 |
WEB DESIGN SKILLS
Module Study Guide
2008/09
Copyright © Thames Valley University 2008
|
Session 5
Hyperlinks, Structure and Navigation
On this page:
Hyperlinks
Hyperlinking is where we find the real power of the internet.
It was the reason for the web in the first place allowing users to point from
one resource to another. A hyperlink is where you click on some text or an
image on the page and it takes you somewhere else.
Maintain Context
"The key to good hypertext linking is to maintain context, so
that the reader stays within the narrative flow and design environment of your
site."
Ref: 'Web Style Guide' P.J.Lynch S. Horton
CAUTION: Links should
not be overused as they can disrupt the flow of content by inviting your
user to leave your site.
Pay attention to the placement and use of your links by putting
them intelligently where users would expect them. Guide users by giving them
a short explanation about where the links will lead them.
Hyperlinks in HTML
<a href = "index.html">My Link</a>
In this example, "index.html" is the destination of
the link and 'My Link' is the text in the original document which acts as the
link text. Images can also operate as links, if you have an image <img> between
the <a> and </a> tags.
Types of links
1.Relative links
Document relative links connect pages within the same site (same
root folder) and can be written as follows:
<a href = "index.html">Go to homepage</a>
If you have many pages in your site then you might put them in
more than one folder contained within your root folder. In that case you still
use a relative link which includes the name of the folder as follows:
<a href = "animals/elephant.html">Read about elephants</a>
Notice the "elephant.html" page is contained within
a subfolder called "animals" inside the current folder. A forward-slash
is used to separate directory folders.
2.Linking to a specific place within a document
"You can link to a particular section of a document by first creating
named anchors. Named anchors let you set markers in a document and are often
placed at a specific topic or at the top of a document. You can then create
links to these named anchors, which quickly take your visitor to the specified
position."
Ref: Using Dreamweaver - Macromedia
3.Absolute (external) links
Absolute links are used to link to external websites. To do this
you will need to include the entire url e.g.
<a href = "http://www.bbc.co.uk">Go to BBC website</a>
Specifying a target for a link
You can target your link to open in a new window or remain in
the same window. Use the attribute target="...."
_blank opens link in a new window
_top opens the link in the same window
So the code would be:
<a href="http://www.webmonkey.com/" target="_blank">www.webmonkey.com</a> or
<a href="http://www.webmonkey.com/" target="_top">www.webmonkey.com</a>
Opening a new window for a link is commonly done for external links, to keep
the user within your site.
Adding links in Dreamweaver
Select the text or the image which is going to act as your link. In the 'Properties'
panel there is a 'Link' box :
- If you are linking to another page of yours, click on the
icon
and select the page.
- If you are linking to an external site, type the full URL into
the box. You MUST include the http:// bit at the beginning of the address.
It's best to copy and paste from a web browser to avoid typing errors.
- If you are linking to an existing anchor on the same page, drag
the
icon
to the 'anchor' symbol.
Link: How to use anchors in Dreamweaver
Structure
Site organisation begins before you have created a single HTML file.
It is crucial that you set up appropriate folders to keep your files organised
and well managed so they are always contained in the same place. Good organisation
in the beginning saves time later.
HTML files will ultimately be published on a server so that they can be
viewed. The way the site is organised now will be mirrored on the server
they will one day end up on.
Site Planning on paper
The planning stage of creating a website is crucial for mapping out the
site as a whole. To begin, most designers start by designing and planning
their site on paper. This allows them to quickly brainstorm ideas, plan the
structure of the site and number of pages etc.
Directory Structure
What is a directory? This is the set of folders used to store and organise
your HTML files and images used for your website. Always create a main folder
used to store all the files that will be used specifically for that site.
This is called the root folder.
Generally, for small sites, the root folder contains all of your HTML files.
Within it may be another folder, commonly called 'images',
which contains all the site's optimised images. These are common conventions
used throughout the web design industry to keep files organized. This clear
organisation ensures that anyone attempting to change any part of the site
will immediately be able to find the page or image they're looking for.
The homepage or first page of your site must be named 'index.html'. This
allows anyone who entered 'http://www.tvu.ac.uk' to
arrive directly at the homepage without having to type 'http://www.tvu.ac.uk/homepage.html'
Note: An optional folder can be included to store Photoshop (PSD) files
or other original media. These would not need to be uploaded to a server.
Guidelines for naming files
When naming files and images, make sure you follow these guidelines:
- Don't use capital letters or any special characters.
- Don't use any spaces. Instead use an underscore i.e _
- Include appropriate extensions such as .gif or .jpg or .html to identify
files. This is important if you transfer files between MAC and PC.
Navigation
This is the term given to describe how a user would find his/her way around
your site, from one page to another. A navigation scheme must relate to the
overall hierarchical design of the site, but a variety of different systems
can be used:
- Use a menu which is permanently on the screen (or can quickly be scrolled
to) and allows the user to get to any page with a single click.
This is only feasible for sites with a small number of pages. It also requires
you to reproduce the menu on each page.
- As above, but divide the site into sections. The homepage allows the
user to select a section, and then all the pages in a section have the
same menu, with an additional link to go back up to the previous level.
Very large sites may have several levels.
- Use simple 'next' and 'back' buttons on each page. Suitable if the nature
of the site is such that pages should be read in a particular order, but
irritating nonetheless.
- Simply have cross-links embedded in the text on each page. Extensively
used in conjunction with other systems. especially on very large sites
like BBC Online.
These four options (and others) are not mutually exclusive. Elements of
each can be used in your design. The important thing is to make it as easy
as possible for your viewers to navigate your site in the way that you want
them to.
Additionally, each link should be clear and well signposted; that is, it
should be obvious that it is a link, and where the user will end up if he/she
clicks on it. It must be possible to browse through the site easily, and
there should be no 'dead-ends'- that is, pages which have no navigation links
to exit from them. Do not force the viewer to use their own 'back' button
to return to your home page.
Exercises
- On paper, draw up a plan for a site which you might use for your submission
in this module. Decide what pages you could use, and how you would organise
them.
- Devise a suitable navigation system for your site. Decide how many links
you will need on each page, and what they will look like.
- Also decide what sort of style you want your site to have - what background
colour, what text colour, what font and text size.
- Start on a home page which matches this design. Call it 'index.html'.
- Create several pages and make links between them. Test the links by displaying
the pages in a browser and jumping between them. Try using both text and
images as links.
- Link to some external sites. Use the
target attribute to open
these in a new window.
- Make some anchors in a page and link to them from elsewhere on the page.
(In order to test this properly you need a page which is quite long, so you
can see the browser jumping up and down.)
