PAGE DESIGN AND LAYOUT

WEB PAGE DESIGN Every aspect of a Web Page should

reflect the goals that led you to create the page in the first place. Not only should the text and graphics themselves communicate your message, but the way you fit those elements together can make an enormous impact on the reader’s perceptions of you and your company.

There is a checklist to help you think about the key design elements of a Web Page.

KEY ELEMENTS OF WEB PAGE DESIGNThings to Consider

Suggested Guidelines

Text Content Between 100 and 500 words per page

Text Breaks A headline, rule, or image every 40 to 100 words (except in long articles or stories)

Page length Two to four screens (at 640x480)

File size No more than 50KB per page, including images; animated GIFs can be up to 100KB per page

Speed First screen of text and key images appear in less than 3 seconds

Colors Two to four thematic colors dominant

KEY ELEMENTS OF WEB PAGE DESIGNThings to Consider

Suggested Guidelines

Fonts No more than three fonts (in graphic and text)

Blank space Background should show on at least 50 percent of page

Contrast No color in background should be close to text color

Tone and style All text and graphics consistent in mood and theme

Overall Impact Page as a whole should appear balanced and attractive

Colors Two to four thematic colors dominant

IMAGE SPACING AND BORDERS Three different ways to add space between

images and paragraphsUse small, totally transparent images to leave

room between other things.When you wrap text around an image by using

<img align=“right” or <img align=“left” />, you can skip past the bottom of that image at any time with <br clear=“right” /> or <br clear=“left” />. If you have images on both the right and left, you can type <br clear=“all” /> to go past both of them.

You can add extra space on the left and right sides of any image with hspace. To add space on the top and bottom sides, use vspace.

IMAGE SPACING AND BORDERS The <img /> tags also include a border

attribute, which enlarges the rectangular border around images. The border is normally one pixel thick for any image inside an <a> link.

The most popular use of the border attribute is making the image border disappear completely by typing border=“0”.

The color of the border will be the same as the color of any text links.

SPECIFYING IMAGE WIDTH AND HEIGHT Because text moves over the Internet

much faster than do graphics, most Web browsers will display the text on a page before the images.

Then include those dimensions in the <img /> tag.<img src=“image.gif width=“200”

height=“100”/ >

HTML TAGS AND ATTRIBUTES COVEREDTag Attribute Function

<img /> Inserts an inline image

src=“…” The address of the image

align=“…” Determines the alignment of the given image

vspace=“…” The space between the image and the text above or below it

hspace-=“…”

The space between the image and the text to its left or right.

width=“…” The width, in pixels, of the image. If width is not the actual width, the image is scaled to fit.

HTML TAGS AND ATTRIBUTES COVEREDTag Attribute Function

height=“…” The height, in pixels, of the image. If height is not actual height, the image is scaled to fit.

border=“…” Draws a border of the specified value in pixels to be drawn around the image. In case the images are also links, border changes the size of the default link border.

<br /> A line break.

clear=“…” Causes the text to stop flowing around any images. Possible values are right, left, all.

WORKSHOP How would you wrap text around the

right side of an image, leaving 40 pixels of space between the image and the text?

How could you insert exactly 80 pixels of blank space between two paragraphs of text?

If you have a circular button that links to another page, how do you prevent a rectangle appearing around it?

What four attributes should you always include in every <img /> tag as a matter of habit?