ISN page 13 warm up How much power should the federal government have?
Every aspect of a Web Page should reflect the goals that led you to create the page in the first...
-
Upload
howard-parsons -
Category
Documents
-
view
213 -
download
1
Transcript of Every aspect of a Web Page should reflect the goals that led you to create the page in the first...
![Page 1: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/1.jpg)
PAGE DESIGN AND LAYOUT
![Page 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/2.jpg)
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.
![Page 3: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/3.jpg)
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
![Page 4: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/4.jpg)
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
![Page 5: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/5.jpg)
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.
![Page 6: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/6.jpg)
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.
![Page 7: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/7.jpg)
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”/ >
![Page 8: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/8.jpg)
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.
![Page 9: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/9.jpg)
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.
![Page 10: 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.](https://reader036.fdocuments.net/reader036/viewer/2022083007/56649e7f5503460f94b82f61/html5/thumbnails/10.jpg)
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?