Transcript Working with Navigation

IT 245 - Website Development
Welcome!
Welcome to Unit 5!
Working with Navigation
This week’s reading:
Chapter 10: Working with Navigation

This Chapter reviews working with navigation in
Dreamweaver.
Introduction

Linking your Web pages together forms the basis for
your Web site’s navigational system. A user- friendly
navigational system is the road map for your site. Your
site can have great and relevant content but, if your
users don’t know how to get to the content they want to
see, they will leave your site quickly. In this unit, you’ll
apply several kinds of links to key elements by doing the
following: apply a text link to a page within the same site;
create a navigation bar; create tabbed panels; create a
link using an image; create a link to a page on another
Web site; and establish an email link.
To-Do-List





Review Key Terms On the Reading page
Read Assigned Text On the Reading page
Respond to the Discussion Board
20 Points
Complete the unit project and upload to assignment
dropbox for grading
120 Points
On the Assignment page
Attend the Weekly Seminar or complete the FLA quiz
20 Points
Log in from Student's Home page
Seminar Overview
In this Seminar we will review:


Web site navigational systems
Web site navigational types
Hyperlinks Review
Objectives :





Reference full and partial URLs
Specify alternative protocols
Create hyperlinks for text and images
Link to local files and remote sites
Create an internal anchor within a file and
link to it
The Anchor Tag



The <a> tag creates hyperlinks
A container tag that encompasses
the text or image (or both) to be used
as a link
The syntax for using the anchor tag
to create a link is as follows:
<a href="URL"> linked text or image
(or both) </a>
The Anchor Tag (cont’d)
A fully qualified URL specifies an entire path
A partial URL assumes a path relative to the file’s current
location
Type of
Reference
Description
Examples
Fully qualified
URL (also
called
absolute URL)
A URL (i.e., URI) that
contains a full path to
a resource, including
the protocol
indicator. Also known
as a hard link.
http://www.someserver.com/somepage.html
or
http://someserver.com/pub/~james/somefile.ext
or
c:\intetpub\wwwroot\ccyp\syb\syb.html
Partial URL
(also called
relative URL)
A URL that assumes
the current
document’s path. All
references are made
from the document’s
current directory.
syb.html: Specifies a file in the current
directory
../css/stylesheet.css: Specifies a file one
directory up from the current page
pub/images/mybullet.gif: Specifies a file
in a subdirectory
The Anchor Tag (cont’d)

You can specify various protocols
Protocol
Hyperlink HTML Example
HTTP
Visit the <a href="http://www.ciwcertified.com">CIW<a/>
site.
HTTPS
(Secure
HTTP)
Visit our <a href="https://www.ciwcertified.com">secure
CIW<a/> site.
FTP
Download the file from our <a
href="ftp://ftp.server.com">FTP server.</a>
E-mail
You can send e-mail to us at <a
href="mailto:[email protected]">
[email protected]</a>.
Telnet
Please visit our <a href="telnet:melvyl.ucr.edu">Telnet
server.</a>
The Anchor Tag (cont’d)

Make sure that you:



Use a closing anchor tag </a>
Place quotation marks around the value
Include the closing bracket at the end of
the opening <a> tag
The Anchor Tag (cont’d)

Various issues to troubleshoot with
hyperlinks




Text and images disappear
All successive Web page text is a
hyperlink
Garbled code appears on screen
Code will not validate due to a problem
<a> tag
The Anchor Tag (cont’d)





Creating local hyperlinks
Creating external hyperlinks
Using images as hyperlinks
Creating internal links

On a long page, a link to another point lower on the page

Internal links require internal bookmarks
Example:
<a name="targetArea1">
target anchor text or image (or both)
</a>
… other page content here …
<a href="#targetArea1"> text/images linking to targetArea1
</a>
Accessing an External File's
Internal Link


Link to a specific point in another page without
first accessing the top of that page
To link to an internal anchor inside of another file,
use the following syntax:
<a href="URL/filename.ext#AnchorName">link
text/image</a>
Managing Hyperlinks




All hyperlinks need to be verified

Verify that the URL or other reference is valid

Verify that the target page or location is accessed
Hyperlinks also need to be managed

Over time, URLs (and content) change

“Dead” links frustrate users
Manually check links
Automatic link-checking software:

Linklint (www.linklint.org)

Link Controller (http://freshmeat.net/projects/linkcont)

Checkbot (http://degraaff.org/checkbot)

Link should still be reviewed manually to verify relevance of
linked content
Atomic Learning Tutorials


http://www.atomiclearning.com/highed/
drmwvrcs5_intro
Section F - links
Project
Outcomes addressed in this activity:
Unit Outcomes:

Create an internal link

Create an external link

Create an email link

Create a global navigation system
Course Outcome:

IT245-3 Implement a website.
Project
Project Instructions:

An excellent starting point is to review other Web sites. Visit
the links below to begin surveying the layouts and structure of
various Web sites. These links are provided to get you started
brainstorming for your own Web site concept. Feel free to
review different sites of your choice. Consider the elements
you see repeated throughout each site.
Project







http://www.myfootprint.org/en/
http://www.ricardoguerreiro.com/
http://www.proyectiva.com/
http://www.2kilo.nl/index_eng.htm
http://www.cokoon.de/
http://www.prefuse73.com/
Have you noticed the following elements repeated throughout
each of the web site samples?
Project

Global navigation: The navigation is in the same place on
each page. This allows the user to easily access each new
page while utilizing the global navigation.

Well-formatted, legible text: The text has clear legibility.
There is contrast between the background color of the page
and the text color. The font is easily read and sans serif type is
a common font family used for body (article) text. (Here is a
good reference on font types: http://www.strohmgraphics.com/font/p1.html)
Project

Contextually relevant images: Images are used to support
the articles listed or to brand the company. A logo is
implemented and images are in place to accompany articles
or in the form of advertisements.

Contact information: Contact information is easily accessible
from the main (global) navigation. There is an email link to
compose an email and/or a form to fill out specific information.
Project

These are some of the main components or design
elements on all well developed web sites. It doesn’t
matter if you are a designer or programmer at heart,
these are all elements which can be implemented
into a well-planned layout for a website. Consider
all of these elements or strategies with your own
creation. They will establish an excellent foundation
from which to plan all future Web sites.
Project
Your instructor will expect you to meet the following objectives in
completing the Midterm Project:

Apply global and secondary navigation systems to your Web
site.

Apply the templates you created in Unit 3 to your secondary
and third-level Web pages.

Develop at least two third-level pages using the templates you
created in Unit 3 and apply local navigation to these pages.

Add an external link and an email link to one of your pages.

Upload all of your pages to your Web site.

Provide a URL to your Web site in the Comments area of the
Dropbox (use the Word doc template provided for
submissions).
Project - Grading Rubrics





Apply global and secondary navigation systems to your Web
site. : 0-30
Apply the templates you created in Unit 3 to your secondary
Web pages. : 0-30
Apply local navigation to your secondary Web pages that links
to your third-level placeholder pages. : 0-30
Add an external link and an email link to one of your pages. :
0-30
Total: 0-120
Thank you!

Feel free to contact me with any questions!
[email protected]

Use the Virtual Office to post questions throughout the week,
as well as to upload your zipped folder if you need me to look
at the code!