HTML, Third Edition--Illustrated Complete 1 HTML – Third Edition Illustrated Complete Unit I...

HTML, Third Edition--Illustrated Complete

1

HTMLHTML––TThird Editionhird Edition Illustrated CompleteIllustrated Complete

Unit IUnit I

Designing Web PagesDesigning Web Pages

HTML, Third Edition--Illustrated Complete 2

U n i t O b j e c t i v e sU n i t O b j e c t i v e s

Understand design principles

Examine Web-specific design issues

Explore cross-platform issues

Incorporate images effectively

Create a noframes alternative

Understand design principles

Examine Web-specific design issues

Explore cross-platform issues

Incorporate images effectively

Create a noframes alternative


U n i t O b j e c t i v e sU n i t O b j e c t i v e s

Locate Web design resources

Design an accessible Web page

Explore Web writing guidelines

Study usability factors

Locate Web design resources

Design an accessible Web page

Explore Web writing guidelines

Study usability factors


Understanding Design PrinciplesUnderstanding Design Principles

Use active white spaceUse active white space

Choose complementary colorsChoose complementary colors

Ensure content legibilityEnsure content legibility

Use type effectivelyUse type effectively

Use a style that fits the messageUse a style that fits the message


Understanding Design PrinciplesUnderstanding Design Principles


Examining Web-Specific Design IssuesExamining Web-Specific Design Issues

Web usersWeb users Target audienceTarget audience

Web connectionsWeb connections

Web browsersWeb browsers

Web mediumWeb medium


Examining Web-Specific Design IssuesExamining Web-Specific Design Issues


Clues to UseClues to Use

Understanding Web mediaUnderstanding Web media Collection of media devicesCollection of media devices

• Each interprets information differentlyEach interprets information differently

Use code that is as widely interpretable Use code that is as widely interpretable as possibleas possible• <em>…</em> instead of <i>…</i><em>…</em> instead of <i>…</i>


Exploring Cross-Platform IssuesExploring Cross-Platform Issues

Browser interpretationBrowser interpretation

Screen resolutionScreen resolution

Image displayImage display


Exploring Cross-Platform IssuesExploring Cross-Platform Issues


Incorporating Images EffectivelyIncorporating Images Effectively

Copy the files Copy the files activities.gifactivities.gif, , contact.gifcontact.gif, , food.giffood.gif, , home.gifhome.gif, , lodging.giflodging.gif, , spa.gifspa.gif, and , and deer.jpgdeer.jpg then copy then copy food.htmfood.htm and paste it into your paradise\frames folder and paste it into your paradise\frames folder

Open the file Open the file htm_I-1.txthtm_I-1.txt, then save it as , then save it as template2.htmtemplate2.htm in in your paradise site folderyour paradise site folder

Click after <!— HORIZONTAL MENUBAR ICONS —>, Click after <!— HORIZONTAL MENUBAR ICONS —>, press press [Enter][Enter] twice, then type the following code: twice, then type the following code:

<table id=”navIcons” width=”372” cellpadding=”0” <table id=”navIcons” width=”372” cellpadding=”0” cellspacing=”0”>cellspacing=”0”>

<tr align=”center”><tr align=”center”>

<td width=”62”><a href=”index.htm”><td width=”62”><a href=”index.htm”>

<img src=”images/home.gif” width=”62” height=”30” <img src=”images/home.gif” width=”62” height=”30” border=”0”border=”0”

alt=”Home” /><br />Home</a>alt=”Home” /><br />Home</a>

</td></tr></table></td></tr></table>



Click before </tr> in the navIcons table, Click before </tr> in the navIcons table, press press [Enter][Enter], then type , then type <td width=”62”> <td width=”62”> <a href=”contact.htm”><img <a href=”contact.htm”><img src=”images/contact.gif” width=”62” src=”images/contact.gif” width=”62” height=”30” border=”0” alt=”Contact height=”30” border=”0” alt=”Contact Us” /><br />Contact</a></td>Us” /><br />Contact</a></td>

Enter the remaining lines of code shown in Enter the remaining lines of code shown in Figure I-7 on page I-9Figure I-7 on page I-9

Save your work, open your browser, then Save your work, open your browser, then open the file open the file template2.htmtemplate2.htm


Creating a Noframes AlternativeCreating a Noframes Alternative

In your text editor, open your In your text editor, open your main2.htmmain2.htm page, click after page, click after <body>, drag to select all of the page code between <body> <body>, drag to select all of the page code between <body> and </body>, copy the code to your clipboard, then close and </body>, copy the code to your clipboard, then close

Open the file Open the file htm_I-2.txthtm_I-2.txt, then save it as , then save it as frameset3.htmframeset3.htm in in your site’s paradise\frames folderyour site’s paradise\frames folder

Click after <noframes>, drag to select the paragraph, Click after <noframes>, drag to select the paragraph, including linked text between <noframes> and </noframes>, including linked text between <noframes> and </noframes>, press press [Delete][Delete], then paste your copied code, then paste your copied code

Click after <noframes>, press [Enter], then type Click after <noframes>, press [Enter], then type <h1 <h1 style=”text-align:center;”> Paradise Mountain Family style=”text-align:center;”> Paradise Mountain Family Resort</h1>Resort</h1>

Save your work, then preview frameset3.htm in your Save your work, then preview frameset3.htm in your browserbrowser



Click the Click the text editor programtext editor program button to return to your page button to return to your page code, then select and copy all the content from <noframes> to code, then select and copy all the content from <noframes> to </noframes></noframes>

Open Open htm_I-3.txthtm_I-3.txt, save it as , save it as noframes.htmnoframes.htm in your paradise\ in your paradise\frames folder, click after the comment near the top of the frames folder, click after the comment near the top of the page, press page, press [Enter][Enter] twice, then paste your copied code twice, then paste your copied code

Click Click ReplaceReplace on your text editor’s Edit or File menu, in the on your text editor’s Edit or File menu, in the Find what text box type Find what text box type noframes>noframes>, press , press [Tab][Tab], type , type body>body> in the Replace with text box as shown in Figure I-10, click in the Replace with text box as shown in Figure I-10, click Replace allReplace all

Update the “Page modified by” paragraph at the bottom of the Update the “Page modified by” paragraph at the bottom of the page with your own name (if necessary) and today’s date, page with your own name (if necessary) and today’s date, then save your work and view the page in your browserthen save your work and view the page in your browser

Print your page from the browser, close all files and programs, Print your page from the browser, close all files and programs, then transfer your updated files to your remote directorythen transfer your updated files to your remote directory


Locating Web Design ResourcesLocating Web Design Resources

Web design articleWeb design article

Style guidesStyle guides

Existing Web sitesExisting Web sites


Locating Web Design ResourcesLocating Web Design Resources


Designing an Accessible Web PageDesigning an Accessible Web Page

Images and multimedia include Images and multimedia include alternate textalternate text

Color differentiation is not Color differentiation is not required for viewing any part of required for viewing any part of the pagethe page

Headers in data tables are Headers in data tables are correctly formattedcorrectly formatted



Table contents make sense if Table contents make sense if read row by rowread row by row

Linked text does not rely on its Linked text does not rely on its context to indicate its functioncontext to indicate its function

Page content is logically Page content is logically organizedorganized


Exploring Web Writing GuidelinesExploring Web Writing Guidelines

Keep your writing conciseKeep your writing concise

Use short paragraphs with section Use short paragraphs with section headingsheadings

Divide text into page-size stand-alone Divide text into page-size stand-alone unitsunits

Use concise linked text that Use concise linked text that describes its targetdescribes its target

Stop writing when you are finishedStop writing when you are finished


Exploring Web Writing GuidelinesExploring Web Writing Guidelines



Supplementing your site with Supplementing your site with guest contentguest content Solicit materials from other contributorsSolicit materials from other contributors

• Feature guest columns and articlesFeature guest columns and articles• Many writers write for free or a small feeMany writers write for free or a small fee• Check all content for accuracy and edit it for Check all content for accuracy and edit it for

clarity, grammar, and punctuationclarity, grammar, and punctuation


Studying Usability FactorsStudying Usability Factors

Use a familiar layoutUse a familiar layout

Do not rush to implement the Do not rush to implement the latest technologylatest technology

Minimize download timesMinimize download times

Keep information up to dateKeep information up to date

Test your designTest your design


Studying Usability FactorsStudying Usability Factors



Estimating page download timeEstimating page download time Most Web pages are smallMost Web pages are small Estimate your total page download time Estimate your total page download time

by:by:• Adding the file size of your page to the total Adding the file size of your page to the total

file size of any support filesfile size of any support files• Divide total page size by the per-second Divide total page size by the per-second

download time based on the most common download time based on the most common connection your site visitors are usingconnection your site visitors are using


U n i t S u m m a r yU n i t S u m m a r y

Understand design principlesUnderstand design principles

Examine Web-specific design Examine Web-specific design issuesissues

Explore cross-platform issuesExplore cross-platform issues

Incorporate images effectivelyIncorporate images effectively

Create a noframes alternativeCreate a noframes alternative


U n i t S u m m a r yU n i t S u m m a r y

Locate Web design resourcesLocate Web design resources

Design an accessible Web pageDesign an accessible Web page

Explore Web writing guidelinesExplore Web writing guidelines

Study usability factorsStudy usability factors

HTML, Third Edition--Illustrated Complete 1 HTML – Third Edition Illustrated Complete Unit I...

Documents

Transcript of HTML, Third Edition--Illustrated Complete 1 HTML – Third Edition Illustrated Complete Unit I...