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

© 2011 Delmar, Cengage Learning

Chapter 5

Working with Links and Navigation

© 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


• Links help viewers navigate between the pages of the website.

• It is important to link only to pages within your website.



• 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




Tools You’ll Use


• 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


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



Creating an external link to the Blue Angels website


HTML button Text for link URL for link


• 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


• 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


• 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 SpryMenu Bar



Spry Menu Bar dialog box

Horizontallayout option


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




Spa page in the browser with the mouse over the About Us item

Menu item appearance when the mouse is placed over it


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


• 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


• 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


• 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


Create and Image Map

Viewing an image map on the National Park Services website

Clicking on an individualstate will link to informationabout parks in that state

Pointing to the Texas image and holding down the mouse button causes the hotspot border to be visible


• 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


• 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


Manage Website Links

Link Checker panel displaying no orphaned files

No orphaned files listed Show list arrow


• 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


• Social networking refers to any web-based service that facilitates social interaction among users, including:– Facebook

– Myspace




Links to Facebook, Twitter, YouTube, RSS Feeds


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



• 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 Chapter 5 Working with Links and Navigation.

Documents

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