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 grading120 PointsOn the Assignment page

Attend the Weekly Seminar or complete the FLA quiz 20 PointsLog 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 pathA 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 protocolsProtocol

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:info@ciwcertified.com"> info@ciwcertified.com</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.strohm-graphics.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!

emartignon@kaplan.edu

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!