HTML, Third Edition--Illustrated Complete 1 HTML – Third Edition Illustrated Complete Unit I Designing Web Pages

HTML, Third Edition--Illustrated Complete 2 U 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

HTML, Third Edition--Illustrated Complete 3 U 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

HTML, Third Edition--Illustrated Complete 4 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 5 Understanding Design Principles

HTML, Third Edition--Illustrated Complete 6 Examining Web-Specific Design Issues Web users  Target audience Web connections Web browsers Web medium

HTML, Third Edition--Illustrated Complete 7 Examining Web-Specific Design Issues

HTML, Third Edition--Illustrated Complete 8 Clues to Use Understanding Web media  Collection of media devices Each interprets information differentlyEach interprets information differently  Use code that is as widely interpretable as possible … instead of … … instead of …

HTML, Third Edition--Illustrated Complete 9 Exploring Cross-Platform Issues Browser interpretation Screen resolution Image display

HTML, Third Edition--Illustrated Complete 10 Exploring Cross-Platform Issues

HTML, Third Edition--Illustrated Complete 11 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, press [Enter] twice, then type the following code: <img src=”images/home.gif” width=”62” height=”30” border=”0” alt=”Home” /> Home alt=”Home” /> Home </td></tr></table>

HTML, Third Edition--Illustrated Complete 12 Incorporating Images Effectively Click before in the navIcons table, press [Enter], then type Contact Click before in the navIcons table, press [Enter], then type Contact 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 13 Incorporating Images Effectively

HTML, Third Edition--Illustrated Complete 14 Creating a Noframes Alternative In your text editor, open your main2.htm page, click after, drag to select all of the page code between and, 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, drag to select the paragraph, including linked text between and, press [Delete], then paste your copied code Click after, press [Enter], then type Paradise Mountain Family Resort Click after, press [Enter], then type Paradise Mountain Family Resort Save your work, then preview frameset3.htm in your browser

HTML, Third Edition--Illustrated Complete 15 Creating a Noframes Alternative Click the text editor program button to return to your page code, then select and copy all the content from to Click the text editor program button to return to your page code, then select and copy all the content from to 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 16 Creating a Noframes Alternative

HTML, Third Edition--Illustrated Complete 17 Locating Web Design Resources Web design article Style guides Existing Web sites

HTML, Third Edition--Illustrated Complete 18 Locating Web Design Resources

HTML, Third Edition--Illustrated Complete 19 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 20 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 21 Designing an Accessible Web Page

HTML, Third Edition--Illustrated Complete 22 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 23 Exploring Web Writing Guidelines

HTML, Third Edition--Illustrated Complete 24 Clues to Use Supplementing your site with guest content  Solicit 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 clarity, grammar, and punctuationCheck all content for accuracy and edit it for clarity, grammar, and punctuation

HTML, Third Edition--Illustrated Complete 25 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 26 Studying Usability Factors

HTML, Third Edition--Illustrated Complete 27 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 filesAdding 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 usingDivide 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 28 U n i t S u m m a r y Understand design principles Examine Web-specific design issues Explore cross-platform issues Incorporate images effectively Create a noframes alternative

HTML, Third Edition--Illustrated Complete 29 U n i t S u m m a r y Locate Web design resources Design an accessible Web page Explore Web writing guidelines Study usability factors