| Hypertext links give you the ability to direct the visitor to documents within your Website or to any other location on the Web. Links made within the same site are called relative links, which can connect to files in any number of locations within the folder structure of a single site. There are a variety of ways to create such a link. The following exercise demonstrates these methods. Remember that it is important to save new documents before you create any links. Saving a file tells Dreamweaver where your document is and enables it to determine the link paths. Dreamweaver needs to determine the location of the linked file in relation to the file in which you are putting the link. If you try to create a link without saving your document for the first time, these paths begin with file:// and they do not work on remote sites because they are relative to your hard disknot to the file in which the link is contained. Although Dreamweaver automatically updates the links when you save a file, it is better to avoid the chance of problematic paths that could cause problems. | | 1. | In the index.html document, select the word Yoga at the beginning of the line Yoga is a 4,000 year-old…
This line is located in the Welcome to Yoga Sangha section in the beginning of the document.
You will create a link from this term to the page with definitions of different styles of yoga.
Note The starting files in this lesson are copies of the files you've been working with in previous lessons. The completed versions are provided here for your conveniencethey have been created using the techniques you learned so far in this book. When creating sites, choose the language that you use to indicate links carefully. Avoid using the phrase "click here" because it is unclear and can cause multiple problems including navigational difficulties. For example, visitors with vision disabilities might not be able to distinguish between multiple links that use "click here"especially if they are using an audio browserthey might have a particularly hard time navigating as a result. In addition, when users skim pages looking for links of interest, they usually watch for the underlines that indicate links. Seeing "click here" instead of a clear description can make this process more difficult. Always be specific when creating phrases that contain links. For example, when directing readers to a document in which they can learn about the different styles of yoga, you might want to use "learn more about different Yoga styles" (where "Yoga styles" is linked) in which the actual link is more descriptive and informative instead of "click here to learn more about Yoga styles" (where "click here" is linked).
| 2. | In the Property inspector, click the Browse For File button to the right of the Link text field.
 The Select File dialog box opens.
| | | 3. | Select the definitions.html file in the Lesson_03_Links folder, and click Choose (Macintosh) or OK (Windows).
The filename definitions.html appears in the Link text field, and the text you selected in the index.html document is now marked as a link. This link is underlined and appears in the color you selected for links in the first exercise of this lesson.
Note You can easily override the page's default link color for individual links by selecting the text that is linked and choosing a color from the Property inspector. Dreamweaver automatically creates a new CSS style for that color. With this method, the CSS style created by Dreamweaver is an internal style, which you'll learn more about in Lesson 4. This link is an example of a document-relative path, which is the best option to use for local links in most Websites and is the type that is used throughout this book. A document-relative path omits the part of the absolute URL that is the same for the current document and the linked document; therefore it uses only the portion of the path that differs. An absolute URL is one that gives the entire Web address of a site or resource, such as http://www.yogasangha.com. The path to the linked document is determined in relation to the location of the document in which the link is contained as the starting point. A path to a file in the same folder, for example, is expressed as name_of_file.html. A path to a file in a subfolder would look like this: name_of_folder/name_of_file.html.
On the other hand, a site root-relative path is determined in relation to the root folder of the site as the starting point and is not based on where the current document is located. The linked document is specified according to its location within the structure of the site.
| 4. | In the Feature: The Eight Limbs of Yoga section, place the cursor at the end of the line for item 8 in the numbered list. Press Return (Macintosh) or Enter (Windows) twice and type See the Sanskrit text for the Eight Limbs. Repeat Steps 1 through 3 to link the word Sanskrit to the sanskrit.html file in the Lesson_03_Links folder.
Note As you learned in Lesson 2, it is necessary to press Return or Enter twice to exit a list; using just one paragraph return would create a new item in the list. When you know the names and locations of the files to which you need to link, you can type their paths directly into the Link text box instead of browsing to find them; however, letting Dreamweaver create the paths will reduce the chance of typos.
Tip If you need to use the same links multiple times in the same sessiona session being the time in which you've had Dreamweaver open until the time when you quit the programyou can save time by choosing recently used links from the pop-up menu to the right of the Link text field on the Property inspector. Editing the destination of a link is a simple process: Click anywhere inside an existing link and make the desired changes to the value in the link text field on the Property inspector by changing the path in the text field or clicking the Browse for File icon. You do not need to select the entire link because Dreamweaver automatically prevents links from becoming nested within each othera link can't be placed inside of another link. Text that you choose to apply a link to is defined by the HTML tags that surround or contain it; therefore, any change you make to the link is automatically applied to all the text contained within the link (between the opening and closing portions of the <a> tag that denotes links of all types). You'll learn more about HTML tags in Lesson 16.
| | | 5. | Select the text www.yogasangha.com near the very bottom of the document. Type http://www.yogasangha.com into the link text field on the Property inspector and press Return (Macintosh) or Enter (Windows) to apply the link.
You created an absolute link that will direct users to a site outside of the project site.
| 6. | Save the index.html file and preview it in the browser. Close the index.html file.
|
The three links you just created should take you to their corresponding pages. Always test your links to be sure they go to the correct locations! If the Start page appears, you can close it. Tip You can preview your document in the browser by pressing F12 to open a window of the primary browser that you defined in Lesson 1. You might need to use a modifier key if your function keys are enabled for system operations.
|
