1. © 2011 Delmar, Cengage Learning Chapter 5 Working with Links and Navigation

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

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

4. © 2011 Delmar Cengage Learning 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 email addresses Working with Links and Navigation

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

6. © 2011 Delmar Cengage Learning 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 Create External and Internal Links

7. © 2011 Delmar Cengage Learning 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. Create External and Internal Links

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

9. © 2011 Delmar Cengage Learning 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. Create Internal Links to Named Anchors

10. © 2011 Delmar Cengage Learning 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 Create Internal Links to Named Anchors

11. © 2011 Delmar Cengage Learning 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. Create, Modify, and Copy a Spry Menu Bar

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

13. © 2011 Delmar Cengage Learning 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. Create, Modify, and Copy a Spry Menu Bar

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

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

16. © 2011 Delmar Cengage Learning 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. Create an Image Map

17. © 2011 Delmar Cengage Learning 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 Create an Image Map

18. © 2011 Delmar Cengage Learning 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 Create an Image Map

19. © 2011 Delmar Cengage Learning Create and Image Map Viewing an image map on the National Park Services website 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

20. © 2011 Delmar Cengage Learning 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. Create an Image Map

21. © 2011 Delmar Cengage Learning 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. Manage Website Links

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

23. © 2011 Delmar Cengage Learning 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 Incorporate Web 2.0 Technology

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

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

26. © 2011 Delmar Cengage Learning 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. Incorporate Web 2.0 Technology

27. © 2011 Delmar Cengage Learning 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. Incorporate Web 2.0 Technology