Working with Links and Navigation Chapter 5 Working with Links and Navigation

© 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

© 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

© 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 email addresses © 2011 Delmar Cengage Learning

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

© 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

© 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

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

© 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

© 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

© 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

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

© 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

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

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

© 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

© 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

© 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

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

© 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

© 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

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

© 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

© 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

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

© 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

© 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