Designing Web Pages
Download
Report
Transcript Designing Web Pages
HTML–Third Edition
Illustrated Complete
Unit I
Designing Web Pages
HTML, Third Edition--Illustrated
Complete
1
Unit Objectives
Understand design principles
Examine Web-specific design
issues
Explore cross-platform issues
Incorporate images effectively
Create a noframes alternative
HTML, Third Edition--Illustrated Complete
2
Unit Objectives
Locate Web design resources
Design an accessible Web page
Explore Web writing guidelines
Study usability factors
HTML, Third Edition--Illustrated Complete
3
Understanding Design Principles
Use active white space
Choose complementary colors
Ensure content legibility
Use type effectively
Use a style that fits the message
HTML, Third Edition--Illustrated Complete
4
Understanding Design Principles
HTML, Third Edition--Illustrated Complete
5
Examining Web-Specific Design Issues
Web users
Target audience
Web connections
Web browsers
Web medium
HTML, Third Edition--Illustrated Complete
6
Examining Web-Specific Design Issues
HTML, Third Edition--Illustrated Complete
7
Clues to Use
Understanding Web media
Collection of media devices
• Each interprets information differently
Use code that is as widely interpretable
as possible
• <em>…</em> instead of <i>…</i>
HTML, Third Edition--Illustrated Complete
8
Exploring Cross-Platform Issues
Browser interpretation
Screen resolution
Image display
HTML, Third Edition--Illustrated Complete
9
Exploring Cross-Platform Issues
HTML, Third Edition--Illustrated Complete
10
Incorporating Images Effectively
Copy the files activities.gif, contact.gif, food.gif,
home.gif, lodging.gif, spa.gif, and deer.jpg then copy
food.htm and paste it into your paradise\frames folder
Open the file htm_I-1.txt, then save it as template2.htm in
your paradise site folder
Click after <!— HORIZONTAL MENUBAR ICONS —>,
press [Enter] twice, then type the following code:
<table id=”navIcons” width=”372” cellpadding=”0”
cellspacing=”0”>
<tr align=”center”>
<td width=”62”><a href=”index.htm”>
<img src=”images/home.gif” width=”62” height=”30”
border=”0”
alt=”Home” /><br />Home</a>
</td></tr></table>
HTML, Third Edition--Illustrated Complete
11
Incorporating Images Effectively
Click before </tr> in the navIcons table,
press [Enter], then type <td width=”62”>
<a href=”contact.htm”><img
src=”images/contact.gif” width=”62”
height=”30” border=”0” alt=”Contact
Us” /><br />Contact</a></td>
Enter the remaining lines of code shown in
Figure I-7 on page I-9
Save your work, open your browser, then
open the file template2.htm
HTML, Third Edition--Illustrated Complete
12
Incorporating Images Effectively
HTML, Third Edition--Illustrated Complete
13
Creating a Noframes Alternative
In your text editor, open your main2.htm page, click after
<body>, drag to select all of the page code between <body>
and </body>, copy the code to your clipboard, then close
Open the file htm_I-2.txt, then save it as frameset3.htm in
your site’s paradise\frames folder
Click after <noframes>, drag to select the paragraph,
including linked text between <noframes> and </noframes>,
press [Delete], then paste your copied code
Click after <noframes>, press [Enter], then type <h1
style=”text-align:center;”> Paradise Mountain Family
Resort</h1>
Save your work, then preview frameset3.htm in your
browser
HTML, Third Edition--Illustrated Complete
14
Creating a Noframes Alternative
Click the text editor program button to return to your page
code, then select and copy all the content from <noframes>
to </noframes>
Open htm_I-3.txt, save it as noframes.htm in your
paradise\frames folder, click after the comment near the top
of the page, press [Enter] twice, then paste your copied
code
Click Replace on your text editor’s Edit or File menu, in the
Find what text box type noframes>, press [Tab], type
body> in the Replace with text box as shown in Figure I-10,
click Replace all
Update the “Page modified by” paragraph at the bottom of
the page with your own name (if necessary) and today’s
date, then save your work and view the page in your
browser
Print your page from the browser, close all files and
programs, then transfer your updated files to your remote
directory
HTML, Third Edition--Illustrated Complete
15
Creating a Noframes Alternative
HTML, Third Edition--Illustrated Complete
16
Locating Web Design Resources
Web design article
Style guides
Existing Web sites
HTML, Third Edition--Illustrated Complete
17
Locating Web Design Resources
HTML, Third Edition--Illustrated Complete
18
Designing an Accessible Web Page
Images and multimedia include
alternate text
Color differentiation is not
required for viewing any part of
the page
Headers in data tables are
correctly formatted
HTML, Third Edition--Illustrated Complete
19
Designing an Accessible Web Page
Table contents make sense if
read row by row
Linked text does not rely on its
context to indicate its function
Page content is logically
organized
HTML, Third Edition--Illustrated Complete
20
Designing an Accessible Web Page
HTML, Third Edition--Illustrated Complete
21
Exploring Web Writing Guidelines
Keep your writing concise
Use short paragraphs with section
headings
Divide text into page-size stand-alone
units
Use concise linked text that
describes its target
Stop writing when you are finished
HTML, Third Edition--Illustrated Complete
22
Exploring Web Writing Guidelines
HTML, Third Edition--Illustrated Complete
23
Clues to Use
Supplementing your site with
guest content
Solicit materials from other contributors
• Feature guest columns and articles
• Many writers write for free or a small fee
• Check all content for accuracy and edit it for
clarity, grammar, and punctuation
HTML, Third Edition--Illustrated Complete
24
Studying Usability Factors
Use a familiar layout
Do not rush to implement the
latest technology
Minimize download times
Keep information up to date
Test your design
HTML, Third Edition--Illustrated Complete
25
Studying Usability Factors
HTML, Third Edition--Illustrated Complete
26
Clues to Use
Estimating page download time
Most Web pages are small
Estimate your total page download time
by:
• Adding the file size of your page to the total
file size of any support files
• Divide total page size by the per-second
download time based on the most common
connection your site visitors are using
HTML, Third Edition--Illustrated Complete
27
Unit Summary
Understand design principles
Examine Web-specific design
issues
Explore cross-platform issues
Incorporate images effectively
Create a noframes alternative
HTML, Third Edition--Illustrated Complete
28
Unit Summary
Locate Web design resources
Design an accessible Web page
Explore Web writing guidelines
Study usability factors
HTML, Third Edition--Illustrated Complete
29