ppt ch09
TRANSCRIPT
![Page 1: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/1.jpg)
Web Design Principles5th Edition
Chapter NinePlanning Site Navigation
![Page 2: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/2.jpg)
Objectives
When you complete this chapter, you will be able to:
• Create usable navigation
• Build text-based navigation
• Use graphics for navigation and linking
• Use lists for navigation
• Build horizontal navigation bars
• Build vertical navigation bars
• Use background color and graphics to enhance navigation
• Create hover rollovers
2Web Design Principles 5th Ed.
![Page 3: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/3.jpg)
Creating Usable Navigation
![Page 4: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/4.jpg)
4
Creating Usable Navigation
• Provide enough location information to let the user answer the following navigation questions:• Where am I? • Where can I go? • How do I get there?• How do I get back to where I started?
Web Design Principles 5th Ed.
![Page 5: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/5.jpg)
5
Creating Usable Navigation
• To answer these questions, provide the following information:
• Let users know what page they are on and what type of content they are viewing
• Let users know where they are in relation to the rest of the site
Web Design Principles 5th Ed.
![Page 6: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/6.jpg)
6
Creating Usable Navigation
• Provide consistent, easy-to-understand links• Provide an alternative to the browser’s Back
button that lets users return to their starting point
Web Design Principles 5th Ed.
![Page 7: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/7.jpg)
7Web Design Principles 5th Ed.
![Page 8: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/8.jpg)
8
Limiting Information Overload
• Create manageable information segments• Control page length• Use hypertext to connect facts, relationships,
and concepts
Web Design Principles 5th Ed.
![Page 9: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/9.jpg)
Building Navigation Structures
![Page 10: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/10.jpg)
10
Building Text-Based Navigation
• Text-based linking is often the most effective way to provide navigation on your site
• Always provide a text-based set of links as an alternate means of navigation
Web Design Principles 5th Ed.
![Page 11: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/11.jpg)
11
Sample Text Navigation
– To main pages (Home, Table of Contents, Index)
– To the top of each chapter
– Within the Table of Contents page to chapter descriptions
– From Table of Contents page to specific topics within each chapter
• The following screens demonstrate a variety of text-based navigation options:
Web Design Principles 5th Ed.
![Page 12: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/12.jpg)
12
Sample Text Navigation
– Between the previous and next chapter
– Within chapter pages to each topic
– To related information by using contextual links
• The following screens demonstrate a variety of text-based navigation options (continued):
Web Design Principles 5th Ed.
![Page 13: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/13.jpg)
13Web Design Principles 5th Ed.
![Page 14: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/14.jpg)
14
Linking with a Text Navigation Bar
• The Table of Contents page must link to the other main pages of the Web site, allowing users to go directly to the pages they want
• Achieve this by adding a simple text-based navigation bar
Web Design Principles 5th Ed.
![Page 15: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/15.jpg)
15Web Design Principles 5th Ed.
![Page 16: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/16.jpg)
16
Linking to Chapter Pages
• The Table of Contents page needs links to the individual chapter files in the Web site
Web Design Principles 5th Ed.
![Page 17: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/17.jpg)
17Web Design Principles 5th Ed.
![Page 18: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/18.jpg)
18
Adding Internal Linking
• Add a “back to top” link that lets users return to the top of the page
Web Design Principles 5th Ed.
![Page 19: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/19.jpg)
19Web Design Principles 5th Ed.
![Page 20: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/20.jpg)
20
Adding an Internal Navigation Bar
• You can use additional fragment identifiers in the table of contents to add more user-focused navigation choices
Web Design Principles 5th Ed.
![Page 21: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/21.jpg)
21Web Design Principles 5th Ed.
![Page 22: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/22.jpg)
22
Linking to External Document Fragments
• You can let users jump from the table of contents to the exact topic they want within each chapter
• This requires adding code to both the Table of Contents page and each individual chapter page
Web Design Principles 5th Ed.
![Page 23: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/23.jpg)
23Web Design Principles 5th Ed.
![Page 24: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/24.jpg)
24
Adding Page Turners
• You can enhance the functions of the navigation bar in the chapter pages by adding page-turner links
• Page turners let you move either to the previous or next page in the collection
Web Design Principles 5th Ed.
![Page 25: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/25.jpg)
25Web Design Principles 5th Ed.
![Page 26: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/26.jpg)
26Web Design Principles 5th Ed.
![Page 27: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/27.jpg)
Adding Contextual Linking
![Page 28: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/28.jpg)
28
Adding Contextual Linking
• Contextual links allow users to jump to related ideas or cross-references by clicking the word or item that interests them
• These are links that you can embed directly in the flow of your content by choosing the key terms and concepts you anticipate your users will want to follow
Web Design Principles 5th Ed.
![Page 29: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/29.jpg)
29Web Design Principles 5th Ed.
![Page 30: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/30.jpg)
Using Graphics for Navigation and Linking
![Page 31: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/31.jpg)
Using Graphics for Navigation and Linking
• If you use graphics for navigation, use the same graphics consistently throughout your site
• These provide predictable navigation cues for the user
• Reusing graphics minimizes download time
31Web Design Principles 5th Ed.
![Page 32: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/32.jpg)
Using the alt Attribute
• Provide alternate text-based links in addition to graphical links
• Include alt attributes in your <img> tags
• The alt attribute is important to accessibility
32Web Design Principles 5th Ed.
![Page 33: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/33.jpg)
33Web Design Principles 5th Ed.
![Page 34: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/34.jpg)
Using Icons for Navigation
• Be careful with navigation icons
• Not everyone agrees on their meaning
• Many Web sites include descriptive text within navigation icons
34Web Design Principles 5th Ed.
![Page 35: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/35.jpg)
Using Lists for Navigation
![Page 36: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/36.jpg)
Using Lists for Navigation
• The HTML list elements are the preferred element for containing navigation links
• Lists provide an easy way to create navigation that can be styled with CSS
<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="history.html">History</a></li>
<li><a href="how.html">How it Works</a></li>
<li><a href="clubs.html">Balloon Clubs</a></li>
<li><a href="festivals.html">Festivals</a></li>
<li><a href="rides.html">Where to Ride</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
36Web Design Principles 5th Ed.
![Page 37: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/37.jpg)
37Web Design Principles 5th Ed.
![Page 38: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/38.jpg)
Removing Default Padding and Margin
• Most lists have built-in padding or margin values
• When creating navigation lists, you will need to remove this default spacing
• Set the margin padding properties to zero for the UL element as shown
ul#navlist {
padding: 0;
margin: 0;
}
38Web Design Principles 5th Ed.
![Page 39: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/39.jpg)
Removing Default Bullets
• HTML lists come with built-in bullets
• When creating lists for navigation, you can remove the default bullets
• Use the list-style-type property as shown
ul#navlist {
padding-left: 0;
margin-left: 0;
list-style-type: none;
}
39Web Design Principles 5th Ed.
![Page 40: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/40.jpg)
40Web Design Principles 5th Ed.
![Page 41: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/41.jpg)
Building Horizontal Navigation Bars
![Page 42: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/42.jpg)
Horizontal Navigation
• In a standard list, each item is on its own line
• To create a horizontal navigation bar using the list, you need to set the list item display setting to in-line
• This allows the list to display on one line
ul#navlist li{
display: inline;
}
42Web Design Principles 5th Ed.
![Page 43: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/43.jpg)
43Web Design Principles 5th Ed.
![Page 44: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/44.jpg)
Customizing the Horizontal Navigation Bar
• You can customize the basic list navigation with CSS properties
• For example, you can:– Add borders, background colors, or images– Set space between buttons
44Web Design Principles 5th Ed.
![Page 45: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/45.jpg)
45Web Design Principles 5th Ed.
![Page 46: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/46.jpg)
Controlling Navigation Bar Width
• Horizontal navigation bars will wrap with the browser
• To prevent this, set a width for your navigation list
ul#navlist {
padding: 0;
margin: 10px 0px 0px 0px;
list-style-type: none;
width: 700px;
}
46Web Design Principles 5th Ed.
![Page 47: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/47.jpg)
47Web Design Principles 5th Ed.
![Page 48: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/48.jpg)
Controlling Navigation Button Width
• To create navigation buttons that are all the same width, change the display type to block
• Float the boxes so they align next to each other
48Web Design Principles 5th Ed.
![Page 49: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/49.jpg)
49Web Design Principles 5th Ed.
![Page 50: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/50.jpg)
Building Vertical Navigation Bars
![Page 51: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/51.jpg)
Building Vertical Navigation Bars
• Use a standard list structure without changing the display type as you did for a horizontal navigation bar
• The <a> elements in the list must be set to a block display property value
51Web Design Principles 5th Ed.
![Page 52: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/52.jpg)
52Web Design Principles 5th Ed.
![Page 53: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/53.jpg)
Using Background Color and Graphics To Enhance Navigation
![Page 54: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/54.jpg)
Using Background Color and Graphics To Enhance Navigation
• You can use background colors and graphics in a variety of ways to enhance your navigation
• You can indicate location with graphic or background color
• You can create interactive hovers that change when the user points to a link
54Web Design Principles 5th Ed.
![Page 55: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/55.jpg)
Indicating History
• Use the link pseudo-classes to show users where they have been
• You can display a graphic based on the state of the link
• In this example, the visited state causes a graphic check mark to display
55Web Design Principles 5th Ed.
![Page 56: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/56.jpg)
56Web Design Principles 5th Ed.
![Page 57: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/57.jpg)
Indicating Location
• Location can be indicated by a change in text weight, text color, or background color or with a graphic
57Web Design Principles 5th Ed.
![Page 58: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/58.jpg)
58Web Design Principles 5th Ed.
![Page 59: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/59.jpg)
Creating Hover Rollovers
![Page 60: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/60.jpg)
Changing Text Color and Background Color on Hover
• The :hover pseudo-class lets you add interactivity when users scroll over your navigation links
• In this example, when the user hovers the mouse over the link: – The text color changes to white (#fff)– The background color changes to bright blue
(#0033cc)
60Web Design Principles 5th Ed.
![Page 61: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/61.jpg)
ul#navlist a:hover {
color: #fff;
background-color: #0033cc;
font-weight: bold;
}
61Web Design Principles 5th Ed.
![Page 62: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/62.jpg)
Changing Background Images on Hover
• When the user hovers the pointer over a navigation button, the button color changes
62Web Design Principles 5th Ed.
![Page 63: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/63.jpg)
63Web Design Principles 5th Ed.
![Page 64: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/64.jpg)
Underlining on Hover
• You can use the hover pseudo-class to turn underlining on when the user points to a link
a:hover {text-decoration: underline;}
64Web Design Principles 5th Ed.
![Page 65: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/65.jpg)
65Web Design Principles 5th Ed.
![Page 66: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/66.jpg)
Summary
• Usable navigation is the result of working with the power of hypertext and designing for your users’ needs
• Work from the user’s point of view
• Make all areas of your Web site quickly accessible
• Provide plenty of location cues
• Use text-based navigation bars
• Use CSS to build attractive horizontal and vertical navigation bars using simple lists
66Web Design Principles 5th Ed.
![Page 67: Ppt ch09](https://reader035.vdocument.in/reader035/viewer/2022062704/5560ce0bd8b42a19088b4e07/html5/thumbnails/67.jpg)
Summary
• Use background colors, text colors, and graphics to enhance navigation
• Use the :hover pseudo-class to add interactivity
67Web Design Principles 5th Ed.