Presentation is loading. Please wait.

Presentation is loading. Please wait.

 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.

Similar presentations


Presentation on theme: " 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."— Presentation transcript:

1

2  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.

3 Things to ConsiderSuggested Guidelines Text ContentBetween 100 and 500 words per page Text BreaksA headline, rule, or image every 40 to 100 words (except in long articles or stories) Page lengthTwo to four screens (at 640x480) File sizeNo more than 50KB per page, including images; animated GIFs can be up to 100KB per page SpeedFirst screen of text and key images appear in less than 3 seconds ColorsTwo to four thematic colors dominant

4 Things to ConsiderSuggested Guidelines FontsNo more than three fonts (in graphic and text) Blank spaceBackground should show on at least 50 percent of page ContrastNo color in background should be close to text color Tone and styleAll text and graphics consistent in mood and theme Overall ImpactPage as a whole should appear balanced and attractive ColorsTwo to four thematic colors dominant

5  Three different ways to add space between images and paragraphs  Use small, totally transparent images to leave room between other things.  When you wrap text around an image by using, you can skip past the bottom of that image at any time with or. If you have images on both the right and left, you can type 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.

6  The 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 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.

7  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 tag. 

8 TagAttributeFunction 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.

9 TagAttributeFunction 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. A line break. clear=“…”Causes the text to stop flowing around any images. Possible values are right, left, all.

10  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 tag as a matter of habit?


Download ppt " 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."

Similar presentations


Ads by Google