1 / 51

Chapter Objectives

Chapter Objectives. Develop Part 2, Steps 5 and 6, of the six-step design plan for a Web site Explain the relationship of page size and information placement Establish a visual connection between a home page and underlying pages Describe the impact of a color scheme on a Web site

frey
Download Presentation

Chapter Objectives

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter Objectives • Develop Part 2, Steps 5 and 6, of the six-step design plan for a Web site • Explain the relationship of page size and information placement • Establish a visual connection between a home page and underlying pages • Describe the impact of a color scheme on a Web site • Identify the tool options for developing a consistent Web site layout Chapter 4: Planning a Successful Web Site: Part 2

  2. Chapter Objectives • Describe the basic components of a table and how tables can be used to create page templates • Differentiate between absolute width and relative width • Explain the advantages and disadvantages of style sheets • Differentiate between external and internal style sheets • Explain the advantages and disadvantages of frames Chapter 4: Planning a Successful Web Site: Part 2

  3. Chapter Objectives • Identify guidelines for creating a well-designed Web site navigation system • Explain user-based and user-controlled navigation • Differentiate between a relative URL and an absolute URL • Describe the common types of navigation elements Chapter 4: Planning a Successful Web Site: Part 2

  4. Page Size and Information Placement • The initial, visible screen area is extremely valuable space • Place the most critical information above the scroll line • Avoid a cluttered appearance Chapter 4: Planning a Successful Web Site: Part 2

  5. Establish A Visual Connection • Create a consistent look and feel • Inconsistent appearances confuse visitors • Be careful not to over apply consistency • Overly applied consistency makes pages boring and uninteresting Chapter 4: Planning a Successful Web Site: Part 2

  6. Establish A Visual Connection Chapter 4: Planning a Successful Web Site: Part 2

  7. Color Scheme • Color schemes create unity • Limit the number of colors in your scheme to three • Apply color scheme to the background, text, and graphic elements • Background color should increase legibility of text • Choose graphics that match your color scheme Chapter 4: Planning a Successful Web Site: Part 2

  8. Color Scheme The Heinz Web site utilizes an effective color scheme to create a sense of unity Chapter 4: Planning a Successful Web Site: Part 2

  9. Layout • Consistent layout creates unity • A well-designed layout creates a sense of balance and order • Display certain items consistently (in the same place) on all pages • Main navigation bar • Main content area • Auxiliary links Chapter 4: Planning a Successful Web Site: Part 2

  10. Layout Chapter 4: Planning a Successful Web Site: Part 2

  11. Grids • Underlying layout structure that arranges a page into rows and columns • Allows you consistently placed items on your pages Chapter 4: Planning a Successful Web Site: Part 2

  12. Tables • Contains cells aligned into rows and columns • Two common uses • Create rows and columns of data • Create Web page templates Chapter 4: Planning a Successful Web Site: Part 2

  13. Tables Chapter 4: Planning a Successful Web Site: Part 2

  14. Tables • Position text and other elements • Cell spacing • Cell padding cell spacing cell padding Chapter 4: Planning a Successful Web Site: Part 2

  15. Tables • Options for defining table width • Absolute width • Relative width • Each option has advantages and disadvantages • Understand that each user will view your table differently Chapter 4: Planning a Successful Web Site: Part 2

  16. Tables • Used to reconstruct segmented images • Allows developers to animate certain parts of an image • Rollovers change a page element when the mouse pointer moves over it • Image editing can be done with software packages such as Macromedia Fireworks and Adobe ImageReady Chapter 4: Planning a Successful Web Site: Part 2

  17. Tables This image contains four rollovers that display messages when the mouse pointer moves over them Chapter 4: Planning a Successful Web Site: Part 2

  18. Style Sheets • Cascading Style Sheets allow Web designers to attach to their HTML specific information regarding the appearance of their Web pages • Styles can: • Define measurements of elements • Set margins • Indicate page breaks • Specify other layout features Chapter 4: Planning a Successful Web Site: Part 2

  19. Style Sheets • Allow you to define several attributes all at once to elements with the same HTML tag • Internal Style Sheet • Provides styles for individual Web pages • External Style Sheet • Used for multiple pages • Created in a separatefile • .css extension Chapter 4: Planning a Successful Web Site: Part 2

  20. Step 5: Plan The Web PagesSample Plan Chapter 4: Planning a Successful Web Site: Part 2

  21. Step 6: Plan The Navigation • Well-designed navigation pulls the visitor down the home page • Draws them deeper into the Web site • Design should be both user-based and user-controlled Chapter 4: Planning a Successful Web Site: Part 2

  22. User-Based Navigation • Navigation is user-based if you followed the guidelines for creating the outline structure (Step 4) • Major navigational paths are determined by the site’s outline structure Chapter 4: Planning a Successful Web Site: Part 2

  23. User-Controlled Navigation • Offer options to navigating your Web site only through its major paths • Most visitors use browser navigation features • Back and Forward • Search • History • Favorites • Well-designed navigation is essential to the success of your Web site Chapter 4: Planning a Successful Web Site: Part 2

  24. Navigation Elements Relative and absolute URLs Text Buttons Image maps Menus Site index Search feature Frames Chapter 4: Planning a Successful Web Site: Part 2

  25. Navigation Elements • Linking takes visitors to a different section of the page, a different page on the site, or another Web site • Relative URL • Absolute URL Chapter 4: Planning a Successful Web Site: Part 2

  26. Relative URL • Points to another location in relation to the current location • Use for pages within your site <A HREF=“investmentform.html”>Investment Form</A> Chapter 4: Planning a Successful Web Site: Part 2

  27. Absolute URL • Points to another location by specifying the protocol, server, path name, and file name • Use for pages located on another server http://www.aarp.com/moneyguide/moneybooks Chapter 4: Planning a Successful Web Site: Part 2

  28. Text • Linked text is the most common navigation element • Settings for linked text • Unvisited link • Active link • Visited link • Underlining • Rollover effect Chapter 4: Planning a Successful Web Site: Part 2

  29. Alternatives to Linked Text Chapter 4: Planning a Successful Web Site: Part 2

  30. Buttons • Second most common navigation element • Design special effects to buttons by adding scripts to HTML • Buttons can be downloaded, purchased, or designed from scratch • Icons, small, symbolic images, can serve as links • Avoid excessive use of icons Chapter 4: Planning a Successful Web Site: Part 2

  31. Buttons Chapter 4: Planning a Successful Web Site: Part 2

  32. Image Maps • Graphics that link to more than once place • Designated hot areas are defined by x and y coordinates • Created using mapping software Chapter 4: Planning a Successful Web Site: Part 2

  33. Image Maps • Client-side image map • Mapping information resides in HTML • Processed by the browser • Server-side image map • CGI script processes mapping information • Resides on server • More complicated • Slower response time • Optimize file size of images you use Chapter 4: Planning a Successful Web Site: Part 2

  34. Menus • Offer visitors several navigation options in a relatively small amount of space • Various types • Pull-down • Pop-up • Scrolling Chapter 4: Planning a Successful Web Site: Part 2

  35. Menus Chapter 4: Planning a Successful Web Site: Part 2

  36. Site Index • Contains hyperlinked text to specific locations within the Web site • Organized alphabetically, or as an outline of the site • Generally preferred over site maps (graphic representation) Chapter 4: Planning a Successful Web Site: Part 2

  37. Site Index Chapter 4: Planning a Successful Web Site: Part 2

  38. Search Features • Popular navigational tool for large, complex Web sites • Search process is the same for both large and small-scale sites • Gives visitors much desired flexibility and control Chapter 4: Planning a Successful Web Site: Part 2

  39. Search Feature Chapter 4: Planning a Successful Web Site: Part 2

  40. Frames • Divide Web pages into sections • Frames allow scrolling • Understand the pros and cons of using frames • Best suited for larger monitors Chapter 4: Planning a Successful Web Site: Part 2

  41. Frames Chapter 4: Planning a Successful Web Site: Part 2

  42. Navigation Guidelines • Consistently place your primary navigation elements in the same location on all pages • Underlying pages should include • Link back to home page • Logo or site identifier Chapter 4: Planning a Successful Web Site: Part 2

  43. Navigation Guidelines • Ensure that links on your Web page are • Functional • Relative and worthwhile • Choose link terminology that gives a realistic expectation of the content to be found if the link is visited • Indicate to visitors clear link options Chapter 4: Planning a Successful Web Site: Part 2

  44. Navigation Guidelines • Consider visitors who have graphics turned off in their browsers • Use the ALT attribute • Provide text links in addition to graphic elements Chapter 4: Planning a Successful Web Site: Part 2

  45. Step 6: Plan The NavigationSample Plan Chapter 4: Planning a Successful Web Site: Part 2

  46. Design Plan Checklist • Define the purpose • Identify the audience • Plan the content • Plan the structure • Plan the web pages • Plan the navigation Chapter 4: Planning a Successful Web Site: Part 2

  47. Chapter Summary • Develop Part 2, Steps 5 and 6, of the six-step design plan for a Web site • Explain the relationship of page size and information placement • Establish a visual connection between a home page and underlying pages • Describe the impact of a color scheme on a Web site • Identify the tool options for developing a consistent Web site layout Chapter 4: Planning a Successful Web Site: Part 2

  48. Chapter Summary • Describe the basic components of a table and how tables can be used to create page templates • Differentiate between absolute width and relative width • Explain the advantages and disadvantages of style sheets • Differentiate between external and internal style sheets • Explain the advantages and disadvantages of frames Chapter 4: Planning a Successful Web Site: Part 2

  49. Chapter Summary • Identify guidelines for creating a well-designed Web site navigation system • Explain user-based and user-controlled navigation • Differentiate between a relative URL and an absolute URL • Describe the common types of navigation elements Chapter 4: Planning a Successful Web Site: Part 2

More Related