1. Working with Links and Navigation
Chapter 5
Working with Links and Navigation

2. © 2011 Delmar Cengage Learning
Chapter 5 Lessons
Create external and internal links
Create internal links to named anchors
Create, modify, and copy a Spry menu bar
Create an image map
Manage website links
Incorporate Web 2.0 technology
© 2011 Delmar Cengage Learning

3. © 2011 Delmar Cengage Learning
Working with Links and Navigation
Links help viewers navigate between the pages of the website.
It is important to link only to pages within your website.
© 2011 Delmar Cengage Learning

4. © 2011 Delmar Cengage Learning
Working with Links and Navigation
Web pages contain two types of links:
Internal links are links to web pages within the same website
External links are links to web pages in other websites or addresses
© 2011 Delmar Cengage Learning

5. © 2011 Delmar Cengage Learning
Working with Links and Navigation
Tools You’ll Use
© 2011 Delmar Cengage Learning

6. © 2011 Delmar Cengage Learning
Create External and Internal Links
An absolute path is a path used for external links that includes the complete address for the destination page, including:
The protocol
The URL (Uniform Resource Locator)
The filename
© 2011 Delmar Cengage Learning

7. © 2011 Delmar Cengage Learning
Create External and Internal Links
A relative path is a type of path that references web pages and image files within the same website.
Relative paths include the filename and folder location of a file.
© 2011 Delmar Cengage Learning

8. Create External and Internal Links
HTML button
Text for link
URL for link
Creating an external link to the Blue Angels website
© 2011 Delmar Cengage Learning

9. © 2011 Delmar Cengage Learning
Create Internal Links to Named Anchors
A named anchor is a specific location on a web page that has a descriptive name.
A target is the location on a web page that a browser displays when users click an internal link.
© 2011 Delmar Cengage Learning

10. © 2011 Delmar Cengage Learning
Create Internal Links to Named Anchors
Once you create a named anchor, you can create an internal link to it using one of two methods:
You can select the text or image on the page and drag it to the Point to File icon
You can select the text or image to which you want to use to make a link and then type # in the Link text box
© 2011 Delmar Cengage Learning

11. © 2011 Delmar Cengage Learning
Create, Modify, and Copy a Spry
Menu Bar
A Spry menu bar is one of the pre-set widgets available in Dreamweaver that creates a dynamic menu bar.
A Widget is a piece of code that allows users to interact with a program.
© 2011 Delmar Cengage Learning

12. Create, Modify, and Copy a Spry Menu Bar
Horizontal
layout option
Spry Menu Bar dialog box
© 2011 Delmar Cengage Learning

13. © 2011 Delmar Cengage Learning
Create, Modify, and Copy a Spry
Menu Bar
Spry is an open source code developed by Adobe Systems to help designers quickly incorporate dynamic content on their web page.
An item is a link on a menu bar.
A state is the condition of the item relative to the mouse pointer.
© 2011 Delmar Cengage Learning

14. Create, Modify, and Copy a Spry Menu Bar
Menu item appearance when the mouse is placed over it
Spa page in the browser with the mouse over the About Us item
© 2011 Delmar Cengage Learning

15. Create, Modify, and Copy a Spry Menu Bar
Once you create a menu bar, you can copy and paste it to the other main pages in your site
Menu bar with all menu and submenu items in place
© 2011 Delmar Cengage Learning

16. © 2011 Delmar Cengage Learning
Create an Image Map
An image map is an image that has one or more hotspots placed on top of it.
A hotspot is a clickable area in an image that links to a different location on the page or to another web page.
© 2011 Delmar Cengage Learning

17. © 2011 Delmar Cengage Learning
Create an Image Map
Ways to create image maps:
Include alternate text for each hotspot
Draw the hotspot boundaries a little larger than they need to be to cover the area you want to set as a link
© 2011 Delmar Cengage Learning

18. © 2011 Delmar Cengage Learning
Create an Image Map
There are three hotspot tools
The Rectangular Hotspot tool
The Circle Hotspot tool
The Polygon Hotspot tool which allows you to draw an outline around any shape
© 2011 Delmar Cengage Learning

19. Create and Image Map
Clicking on an individual
state will link to information
about parks in that state
Pointing to the Texas image and holding down the mouse button causes the hotspot border to be visible
Viewing an image map on the National Park Services website
© 2011 Delmar Cengage Learning

20. © 2011 Delmar Cengage Learning
Create an Image Map
With the Pointer Hotspot Tool you can select the hotspot handle and change the size or shape.
You can also move the hotspot by dragging it to a new position on the image.
© 2011 Delmar Cengage Learning

21. © 2011 Delmar Cengage Learning
Manage Website Links
You should check links to make sure they work on a regular basis.
Orphaned files are files that are not linked to any pages in the website.
© 2011 Delmar Cengage Learning

22. Manage Website Links Link Checker panel displaying no orphaned files
No orphaned files listed
Show list arrow
Link Checker panel displaying no orphaned files
© 2011 Delmar Cengage Learning

23. © 2011 Delmar Cengage Learning
Incorporate Web 2.0 Technology
Web 2.0 describes the recent evolution of web applications that facilitate and promote information sharing among Internet users including:
GPS
RSS
Podcasts
Vodcasts or vidcasts
© 2011 Delmar Cengage Learning

24. © 2011 Delmar Cengage Learning
Incorporate Web 2.0 Technology
Social networking refers to any web-based service that facilitates social interaction among users, including:
Facebook
Myspace
© 2011 Delmar Cengage Learning

25. © 2011 Delmar Cengage Learning
Incorporate Web 2.0 Technology
Links to Facebook, Twitter, YouTube, RSS Feeds
© 2011 Delmar Cengage Learning

26. © 2011 Delmar Cengage Learning
Incorporate Web 2.0 Technology
Wiki is another example of a Web 2.0 application.
Wiki (the Hawaiian word for “quick”) refers to a site where a user can use simple editing tools to contribute and edit the page content on the site.
Wikipedia is a good example of this.
© 2011 Delmar Cengage Learning

27. © 2011 Delmar Cengage Learning
Incorporate Web 2.0 Technology
Using the applications that are a part of Web 2.0 with your website can bring your site from simply presenting information on pages to facilitating a compelling dialog with your viewers.
© 2011 Delmar Cengage Learning