IT 245 - Website Development
description
Transcript of IT 245 - Website Development
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:[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.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!
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!