Navigation
Basic principles of navigation
Types of navigation
Hyperlink
Link syntax
Target attribute (link to internal & external site)
Create a mailto link, image as a link
Relative & absolute links
Navigation is a key element of any
website. It’s how the user gets from section to section, and to your content.
Aside from creating something unique, there are several options for navigation
in site design that are quite common, and for a good reason… they help the user
browse your site easily.
Basic Principles of Navigation
Consistency
Easily learnt-making it obvious
Feedback
Appear when needed
3-click rule
Global navigation
Defined as links to a site's top-level categories that occur on every page of the site.
Local navigation
Local navigation would the links with the text of your web pages, linking to other pages within the website.
http://www.webpagemistakes.ca/website-navigation/
Types of navigation
Embedded links
Navigation bar
Plain list navigation
Navigation tabs
Text with descriptions
Icons or graphics
Interactive navigation
Create rollover image in DW
What is Hyperlink?
Hyperlink or link creates an interactive behavior specified by HTML, or the programming language you're using.
Enabled by a browser.
Can be in a word, group of words, or image that user can click to jump to a new document or a new section within the current document.
Links rely on directory paths to locate files.
A directory path is simply a description of a file's location that can be understood by a computer.
Links are specified in HTML using the <a> tag.
Link syntax
Internal Hyperlink
The simplest hyperlink is one that takes the user to another part of the same document, or another document stored in the same folder or hard drive.
Example: <a href="gallery.html">Gallery</a>
External Hyperlink:
External Hyperlinks are used to take a visitor to
a page on another external website, for example, information on another site
E-mail links:
Link to visitor's e-mail program
It can create an automatic, pre-addressed e-mail message
Example:
<a href="mailto:sllim@nafa.edu.sg">sllim@nafa.edu.sg</a>
Image-based links:
Image-based links work like any other hyperlink.
Include the name of the file, and do not forget the correct suffix - i.e gif, png or jpg
Example:
<img src="images/icon_gallery.jpg" width="125" height="116" alt="gallery"/>
Anchor links
Very similar to normal hyperlink.
Anchors link point to a place within a page
Relative paths
Alternatively referred to as a partial path or non absolute path
Absolute paths
Also referred to as the file path and
full path, the absolute path is a path that contains the root directory and all
other sub directories that contain a file or folder.
No comments:
Post a Comment