^ click above ^

When I get a few minutes later, I take along a handful of printed items wherever I'm going, and read it whenever I can, ie. waiting in the dentist office, waiting in traffic (at a standstill, of course), waiting for my haircolor to cover the gray, waiting for etc-etc.

To add this nice little feature to your web page, all you need to do is place a snippet of JavaScript code with a text link into your web page. To draw attention to your Print this Page link, simply add a printer icon nearby. Remember that content truly is king, but it does not hurt to add some visual effects for those folks who are visually oriented especially when the graphic files are so small it does not inhibit page load time.

javascript:print()

How the source code looks with a hyperlink:
<a href="javascript:print()">Print this Page</a>

How the source code looks with an image:
<a href="javascript:print()"><img src="print.gif" border="0" alt="name of image"></a>

In the print industry the sign of quality paper is a company watermark or brand emblem. This same effect can be achieved for your company's web site using CSS. This effect is compatible only with MIE4+ and NS6.1+. Older browsers will simply not render the watermark.

The code for watermarking is done utilizing the background-image, background-repeat, background-attachment, and background-position CSS properties. This code can be placed within your external style sheet applying it to the body tag. If you are not familiar with the different methods of CSS and how or when to use them, be sure to read our article, "External, Internal or Inline? Which Method is Best?"

body {background-image: url(back.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;}

If you do not have a company logo, it may be time to have one designed. Or simply use a piece of royalty-free clipart. Open your image into your graphics software and decrease the transparency to whatever best suits your needs. Keep in mind that watermarks are generally one to three shades darker than the background color. Your text must easily be read on your web pages or the concept is lost.

It is common to use the no-repeat property so the image appears as a professional watermark and align the watermark either in the center of the page (as shown in the code above) or at the bottom right of the page replacing the background-postion property with the code below:

background-position: right bottom;

To view a demo page with a watermark using this concept, Click Here.


Stretching Images
By BasicTemplates

Most of the time stretching an image by setting incorrect image sizes within the HTML code would distort it horribly. Below is a review of the example comparisons from our related article, "Adding Text to Images: The Right Way".

Incorrect - image dimensions are incorrect in the HTML source code


Correct.

Corporate Font One of the things that happened was that a 'working party' of senior managers decided that the existing tendency (it was never that rigid, anyway - I always used Arial) to use Times New Roman was 'too officious' and we needed a new font to prove that we valued our employees...  Posted by: Sualdam View Post  |  Click To Comment