MYONLINEPROOFING.COM

soft proof - www.myonlineproofing.com

Menu


from the Document bar or by pressing F12. When the page opens in the browser, try rolling over the Home link. Only the area around the Home link


should be clickable. Named Anchors The final type of linking element you can add to your web pages are anchors. Adding named anchors on a page allows you to create hyperlinks that link to specific areas within a page. Although you can also use named anchors to link a user to a specific spot on another page, named anchors are generally reserved for pages that contain an excessive amount of content. In this situation, a small subnavigation menu can be created that links the user to specific spots (the anchors) on the page. Subsequently, you can add a "Back To Top" link at the point on the page where the user was linked to; when the "Back to Top" link is clicked, the user returns back to the top of the page. To work with named anchors, follow these steps: 1. Open the file companydirectory.htm. 2. The company directory page contains ten management bios for employees at our fictitious company. Near the top of the page is a menu bar that contains a horizontal list of all the employees listed on the page. Named anchors are the perfect choice in this case for linking each name in the menu bar to its respective employee within the list.   To create the named anchor, place your cursor next to the first name in the list (Ada) and select Named Anchor from the Insert menu. The Named Anchor dialog appears, similar to Figure 3.46. Figure 3.46. The Named Anchor dialog allows you to create a named anchor within the page. 3. In the dialog, enter the name of the first employee, Ada, and click OK. 4. The yellow named anchor icon appears next to Ada's name. Because this named anchor icon is considered an invisible element, you might not be able to see it. To enable it, make sure that the Invisible Elements option is checked in the Visual Aids submenu in the Document bar. 5. Create a hyperlink to the named anchor for Ada's name in the horizontal menu. Begin by highlighting Ada's name in the menu bar. 6. Place your cursor in the Link text box in the Properties Inspector and type #Ada. The # symbol represents an anchor name while Ada represents the name itself. When finished, the design should resemble Figure 3.47. Figure 3.47. Create a hyperlink from the horizontal menu to the new named anchor. [View full size image] Preview your work in the browser by selecting the Preview In Browser option from the Document bar or by pressing F12. When the page opens in the browser, select Ada's name from the horizontal menu. The browser should advance the page down to Ada's name. Our next step is to add the "Back to Top" functionality. You can add this feature by following these steps: 1. On the company directory page, add the text (Back to Top) next to Ada's name above her bio. 2. Highlight the (Back To Top) text and enter the # symbol in the Link text box in the Properties Inspector. The result should resemble Figure 3.48. Figure 3.48. Add a Back To Top link to your page. [View full size image]   TIP Adding the # symbol to the Link text box is by far the simplest way of creating a Back to Top link but is not considered a best practice. A more efficient way