IT 245 - Website Development

1. IT 245 - Website Development Welcome!

2. Welcome to Unit 5! Working with Navigation This week’s reading: Chapter 10: Working with Navigation • This Chapter reviews working with navigation in Dreamweaver.

3. 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.

4. To-Do-List • Review Key Terms Onthe 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 quiz20 PointsLog in from Student's Home page

5. Seminar Overview In this Seminar we will review: • Web site navigational systems • Web site navigational types

6. 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

7. 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>

8. 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) A fully qualified URL specifies an entire path A partial URL assumes a path relative to the file’s current location

9. 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: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) • You can specify various protocols

10. 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

11. 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

12. 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>

13. 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>

14. 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

15. Atomic Learning Tutorials • http://www.atomiclearning.com/highed/drmwvrcs5_intro • Section F - links

16. 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.

17. 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.

18. 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?

19. 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)

20. 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.

21. 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.

22. 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).

23. 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  

24. 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!