Web Concepts - Introduction to Navigation.pdf

web concepts - navigation

1. Web Concepts
IT4101

2. 1•History
2•Basic Website
3•Factors affecting Website design
4•Planning to build a Website
5•From basic to “wow” Website
6•Another way to build a Website

3. “WOW” Website
ADDING STYLE TO A BASIC WEBSITE

4. Cascading
Style Sheets
Typography Boxes
Page
Layouts
Graphics
and Colour
Navigation
Tables Forms
Responsive
Website

5. Site Navigation

7. Navigation
Use hyperlink
omostly texts
ocan also be a list
◦you may remove default margin, padding and bullets
osometimes graphics
◦must be simple and should be used consistently

8. List as Navigation

9. Navigation
Users should be able to answer the following:
1.Where am I?
Specify the current page and the type of content they are viewing
2.Where can I go?
Specify where they are in relation to the rest of the web site
3.How do I get there?
Provide consistent, easy-to-understand links
4.How do I get back to where I started?
Provide alternatives to the browser’s Back button that let users return to their starting
point

11. Other things to consider
Use effective navigation to help limit information overload on a webpage
oConsider contextual linking
oConsider opening another window when you click an external link
Limit navigation items especially for mobile web sites and smaller devices
oUse universal navigation symbols
When using graphics for navigation
oProvide alternate text based links using the alt attribute
oUse meaningful images

12. •Use the targetattribute specifies where to open the linked document
o<ahref="https://sites.google.com/it.weltec.ac.nz/helloit"target="_blank">Visit SOIT</a>

13. Designing HorizontalNavigation Bars
set the list item display setting to in-line
customize by adding:
oborders
obackground-colors
oimages
owhite spaces

15. Wrapping Problem? Control the Width
When the user makes the browser window small
Solution:

16. Inconsistent Button Size? Control the button Width
By default, it depends on the size of text they contain
Solution:

17. Designing VerticalNavigation Bars
can be customized the same way as horizontal navigation bars

18. Using Background Colorand Graphics
To Enhance Navigation
Indicate History
oshowing users where they have been on your web site
ouse the link pseudo-classes along with background images (Lec5.1:CSS)
Indicate Location
oshowing where they currently are
oindicated by a change in text weight, text color, background coloror with a graphic

19. INDICATING HISTORY

20. INDICATING LOCATION

21. Hover Rollovers
As discussed in Lesson 5.1:CSS:
ochange Text Colorand Background Coloron Hover
ochange Background Images on Hover
ounderlining on Hover
◦a:hover {text-decoration: underline;}

22. Changing Text Colorand Background Coloron Hover

23. Changing Background Imageson Hover

24. Underlining on Hover

25. Thank you!
IT4101 –WEB CONCEPTS