web site design & management class 7 march 12, 2003
TRANSCRIPT
![Page 1: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/1.jpg)
Web Site Design & ManagementClass 7
March 12, 2003
![Page 2: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/2.jpg)
Pam Scanlon2
Web Site Design & Management Class 7
Agenda
• Homework – hand in
• Absentee policy
• Go over Chapter 4 homework
• Individual attention/help your fellow student
• In class assignment
![Page 3: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/3.jpg)
Chapter 4
Planning Site Navigation
![Page 4: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/4.jpg)
Pam Scanlon4
Principles of Web Design Chapter 4
Objectives
• Create usable navigation
• Build text-based navigation
• Link with a text navigation bar
• Add contextual linking
• Use graphics for navigation and linking
![Page 5: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/5.jpg)
Pam Scanlon5
Principles of Web Design Chapter 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?• You should ask these questions EVERY time!
![Page 6: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/6.jpg)
Pam Scanlon6
Principles of Web Design Chapter 4
Creating Usable NavigationTo 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
![Page 7: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/7.jpg)
Pam Scanlon7
Principles of Web Design Chapter 4
Creating Usable Navigation
• Provide consistent, easy-to-understand links• Provide alternatives to the browser’s Back
button that lets users return to their starting point– What are some of these alternatives?
![Page 8: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/8.jpg)
Pam Scanlon8
Principles of Web Design Chapter 4
![Page 9: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/9.jpg)
Pam Scanlon9
Principles of Web Design Chapter 4
![Page 10: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/10.jpg)
Pam Scanlon10
Principles of Web Design Chapter 4
Limit Information Overload
• Create manageable information segments• Control page length• Use hypertext to connect facts, relationships,
and concepts
![Page 11: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/11.jpg)
Pam Scanlon11
Principles of Web Design Chapter 4
Using Text-Based Navigation
• Text-based linking is often the most effective way to provide navigation on your site
• It can work in both text-only and graphical browsers
• Always provide a text-based set of links as an alternate means of navigation
![Page 12: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/12.jpg)
Pam Scanlon12
Principles of Web Design Chapter 4
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:
![Page 13: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/13.jpg)
Pam Scanlon13
Principles of Web Design Chapter 4
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:
![Page 14: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/14.jpg)
Pam Scanlon14
Principles of Web Design Chapter 4
![Page 15: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/15.jpg)
Pam Scanlon15
Principles of Web Design Chapter 4
![Page 16: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/16.jpg)
Pam Scanlon16
Review of formatting tags<div> vs. <p>
• <p> puts a double line break in
• <div> is handy if you are using styles
• See the following web pages for more info
• http://www.webdevelopersnotes.com/tutorials/html/12.php3
• The mighty <div> tag from webmonkey
![Page 17: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/17.jpg)
Pam Scanlon17
The Paragraph Tag
![Page 18: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/18.jpg)
Pam Scanlon18
The <p> paragraph tag </p>
• A two sided tag (not everyone uses it that way, but it is mandatory for this class that you do. It is good practice.)
• Gives you a double “carriage return” in between paragraphs
• If you want only a single return, use the <br></br> break tag.
• What attributes can a <P> tag have?
![Page 19: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/19.jpg)
Pam Scanlon19
Principles of Web Design Chapter 4
![Page 20: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/20.jpg)
Pam Scanlon20
Principles of Web Design Chapter 4
![Page 21: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/21.jpg)
Pam Scanlon21
Principles of Web Design Chapter 4
![Page 22: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/22.jpg)
Pam Scanlon22
Principles of Web Design Chapter 4
![Page 23: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/23.jpg)
Pam Scanlon23
Principles of Web Design Chapter 4
![Page 24: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/24.jpg)
Pam Scanlon24
Principles of Web Design Chapter 4
![Page 25: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/25.jpg)
Pam Scanlon25
Principles of Web Design Chapter 4
![Page 26: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/26.jpg)
Pam Scanlon26
Principles of Web Design Chapter 4
![Page 27: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/27.jpg)
Pam Scanlon27
Principles of Web Design Chapter 4
![Page 28: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/28.jpg)
Pam Scanlon28
Principles of Web Design Chapter 4
![Page 29: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/29.jpg)
Pam Scanlon29
Principles of Web Design Chapter 4
![Page 30: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/30.jpg)
Pam Scanlon30
Principles of Web Design Chapter 4
Graphics for Navigation• Standardize your navigation graphics• Provide predictable navigation cues for the
user • Repeat graphics to minimize download time• Use consistent placement and design of
navigation graphics to reassure the user• Use easily understandable graphics
![Page 31: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/31.jpg)
Pam Scanlon31
Principles of Web Design Chapter 4
![Page 32: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/32.jpg)
Pam Scanlon32
Principles of Web Design Chapter 4
![Page 33: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/33.jpg)
Pam Scanlon33
Principles of Web Design Chapter 4
![Page 34: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/34.jpg)
Pam Scanlon34
Principles of Web Design Chapter 4
![Page 35: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/35.jpg)
Pam Scanlon35
Principles of Web Design Chapter 4
![Page 36: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/36.jpg)
Pam Scanlon36
Principles of Web Design Chapter 4
![Page 37: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/37.jpg)
Pam Scanlon37
Principles of Web Design Chapter 4
![Page 38: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/38.jpg)
Pam Scanlon38
Principles of Web Design Chapter 4
![Page 39: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/39.jpg)
Pam Scanlon39
Principles of Web Design Chapter 4
Summary• Work from the user's point of view. Think about
where users want to go within your site, and make it easy for them to get there.
• Add plenty of links so it's easy to get around your site. Link to fragments as well as whole pages. Make it easy to get back to your navigation options.
• In addition to providing links, make sure you provide plenty of location cues to let the user know where they are
![Page 40: Web Site Design & Management Class 7 March 12, 2003](https://reader035.vdocument.in/reader035/viewer/2022070403/56649f285503460f94c409db/html5/thumbnails/40.jpg)
Pam Scanlon40
Principles of Web Design Chapter 4
Summary• Do you have to use graphics for linking?
Rethink the objectives of your site and determine whether text will do as well. Every additional graphic adds to download time.
• Don't forget to provide ALT values to your <img> tags to provide alternate navigation options for the user