Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Designing Web Pages
Transcript
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
