| When a document is long or has many sections, you might need to create a series of links that will jump the user to specific places within the document. This technique eliminates the need for the viewer to scroll through long passages of text. A named anchor marks the place in the page to which a link jumps. In this exercise, you insert and link to a named anchor. You will also learn another method of selecting link filesusing the Point To File icon. 1. | Open definitions.html from the Lesson_03_Links folder. Choose Modify > Page Properties and select the Links category of the Page Properties dialog box. Set the same default link colors that you used for the index.html document in this lesson's first exercise. Click OK.
Recall that the link color's hexadecimal value was #FF3300, the rollover link color was #FF9900, the visited-link value was #993300, and the active link color was #FFCC00.
Tip Keep your link colors the same throughout your site. Randomly changing link colors can be confusing for visitors. This file contains a large amount of text that requires the visitor to scroll to see the entire document.
| 2. | Position the insertion point in front of the term Vinyasa Yoga at the bottom of the document. Click the Named Anchor button in the Common category of the Insert bar.
 The Named Anchor dialog box opens.
Tip You can also insert a named anchor by choosing Insert > Named Anchor, or by using the keyboard commands Option+Command+A (Macintosh) or Ctrl+Alt+A (Windows). | | | 3. | Type vinyasa in the Anchor name text field; then click OK.
 Don't use spaces, punctuation, or special characters (such as copyright symbols, number signs, and so on) in the name. There should never be more than one named anchor with the same name in the same document; otherwise, the browser cannot jump the user to the correct named anchor.
A yellow icon appears on the page to represent the named anchor. The icon might be selected when it first appears on the pageselected anchor icons are blue. This icon is an invisible element that doesn't appear in the browser.
 Tip If you can't see the Named Anchor icon, make sure that the Invisible Elements option is turned on by choosing View > Visual Aids > Invisible Elements. When you insert a named anchor, a dialog box might open to warn you that you won't see the anchor unless the Invisible Elements option is turned on. Named anchors must also be checked in the Invisible Elements category of the Preferences. You can determine which options have been turned on by choosing Edit > Preferences and selecting the Invisible Elements category. The Named Anchors box should be checked. The lessons in this book assume that you are using the default configuration. | | | 4. | Place the cursor at the end of the paragraph describing yoga at the top of the page. Press Return and type There are many styles of yoga, including:. Press Return (Macintosh) or Enter (Windows) and type the following terms, with a line break between each:
Hatha Anusara Ashtanga Bikram Dynamic Hatha Integral Iyengar Kripalu Vinyasa
This text will act as a navigational element by jumping the user to the corresponding sections of the page. Each term will be a link that references the corresponding named anchor, like the one you created for Vinyasa Yoga near the bottom of this page in the preceding steps.
| 5. | Select the text Vinyasa from the new list of yoga styles you just created. Type #vinyasa into the Link text field on the Property inspector.
 The number sign (#) is required to tell the browser that this link is internalit takes the user to a location on the same page.
Make sure that the name you type after the number sign is exactly the same as the anchor name. You should follow the naming guidelines from Lesson 1 when you name your anchors. Named anchors are case-sensitive, even though many browsers accommodate a case change. For example, if you name your anchor vinyasa and then type #Vinyasa in the Link text field, your link might not work consistently in all browsers.
The text Vinyasa, located in the list of yoga styles, is now linked to the Vinyasa term and definition near the bottom of the page. Now you will repeat the process for Kripalu.
| | | 6. | Add another named anchor before the Kripalu term near the bottom of the document and name it kripalu.
You have created a second anchor.
Tip If the anchor is inserted in the wrong place, you can drag it to a new position. | 7. | Select the word Kripalu in the list of yoga styles at the top of the document. Drag the Point to File icon (located next to the Link text field in the Property inspector) to the kripalu-named anchor you just made. Release the mouse button when the pointer is directly over the named anchor.
When you first click the Point to File tool, the Link text field initially contains instructional text that will be replaced with the link that you choose. After you roll over the named anchor, #kripalu will appear in the Link text field. Using the Point to File icon to create links might help prevent typing errors.
 Note You can also use the Point to File icon to link to other files in your site if the Files panel is open. With the text or graphic selected that you want to link, click the Point to File icon and drag it over the Files panel. The Files panel comes to the front if it is behind the Document window or other panels, and you can continue to drag the mouse until you have the pointer directly over the file you want to link to. | | | 8. | Insert named anchors and links to them for the remaining navigational terms you created at the beginning of the document. For the anchor names, type hatha, anusara, ashtanga, bikram, dynamic, integral,and iyengar for their respective yoga types.
You can edit the names of any anchors you create by clicking the named anchor. The Property inspector changes to show that a named anchor is selected. You can change the name in the Property inspector's Name text field.
| 9. | Insert a named anchor at the very top of the page in front of the text Yoga and name it top. Create a new line at the bottom of the page, type Back to Top and link it to #top using the Link text field on the Property inspector.
Tip Remember to use two paragraph returns to escape the definition list and create the new line. In long documents, it is a common practice to include links at the end of every section to a named anchor at the top of the page or to a navigational table of contents. This common anchor is usually called #top. When you provide this type of a link, users don't need to scroll back up to the top of the page if they want to continue using those links to jump to other sections. Any number of links on the page can reference the same named anchor.
Note Viewing problems, such as a link to a named anchor jumping to the wrong area or simply not working, might occur if that named anchor is located inside of a link. To avoid this problem, any attempts to move or insert a named anchor inside of a link causes Dreamweaver to automatically end the link just before the named anchor and create a second link to the same destination immediately after the named anchor (which ends at the same point where the original link ended). In these cases, the named anchor is actually sandwiched between two separate links that have an identical value. As a result, placing the cursor at the beginning of the linked text and making a change to the link value changes only the first instance of the link; you need to remember to duplicate any changes that you make to the second instance of the link that occurs after the named anchor. | | | 10. | Save the file and preview it in the browser.
The navigational terms at the top of the page now link to their corresponding sections. You can close the definitions.html file.
Tip Named anchors might not work as expected if they are placed inside tables or layers. For best results, keep named anchors outside of tables and layers. You'll learn to create tables in Lesson 6 and layers in Lesson 9. In the following step, you will continue learn how to link to a particular section of another document using a named anchor.
| 11. | Open the top-level index.html file in the Lesson_03_links folder. In the paragraph beginning with Anusara Yoga, a form of hatha yoga… select the words hatha yoga. Type definitions.html#hatha in the Property inspector's Link text field.
|
Be sure to replace the original number sign (#) in the Link text field with the link you have typed in.  In the previous steps, you created a named anchor at the hatha section of the definitions.html file. Now you are making a link in index.html point directly to the hatha section in definitions.htmlinstead of linking to the top of the page as it would if you had used definitions.html as the link. You can preview index.html in the browser and test this new link. The use of anchors to link to specific portions of other pages helps your site to be more functional, directing your viewers to what they are looking for immediately and reducing the amount of time they have to spend scrolling through long documents. The more functional and easy to use your site is, the more likely it is that you will have new and repeat visitors. Note You can also create links that include named anchors to other pages using the Point to File tool, which you used in the previous steps to create links within the same document. For example, with both index.html and definitions.html open in separate windows, you can select a link in index.html, click the Point to File icon to the right of the Link text field, and point to the desired named anchor in definitions.html.
Leave the index.html document open for the next exercise. |
