IT 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 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 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: linked text or image (or both)

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 DescriptionExamples 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. or 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 ProtocolHyperlink HTML Example HTTP Visit the CIW site. HTTPS (Secure HTTP) Visit our secure CIW site. FTP Download the file from our FTP server. You can send to us at Telnet Please visit our Telnet server.

The Anchor Tag (cont’d) Make sure that you:  Use a closing anchor tag  Place quotation marks around the value  Include the closing bracket at the end of the opening 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 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: target anchor text or image (or both) … other page content here … text/images linking to targetArea1

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: link text/image

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 (  Link Controller (  Checkbot (  Link should still be reviewed manually to verify relevance of linked content

Atomic Learning Tutorials drmwvrcs5_intro drmwvrcs5_intro Section F - links

Project Outcomes addressed in this activity: Unit Outcomes: Create an internal link Create an external link Create an 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 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: graphics.com/font/p1.html) 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 link to compose an 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 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 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!