Working with Hyperlinks
One of the basic premises behind working with the web is that we can create pages that link between each other. This concept, known as hyperlinking , is the foundation behind the HyperText Markup Language (HTML). By simply adding some text to the page and then associating a link with that text, we can allow our users to interact with multiple pages within a website as opposed to being confined to a single page. Of course, like other web features, Dreamweaver has excellent support for creating and working with the following types of links:
- Text links
- Image links
- Imagemaps
- Named anchors
- Navigation bars
Before we jump directly into linking however, it's important to discuss the concept of paths and targets. Creating a hyperlink is merely the process of assigning a path to the hyperlink reference (href) of text, images, hotspots within imagemaps, or anchors. When you assign a path to one of these elements, you are making a link available from your linked element to the endpoint via the path. When it comes to paths, developers have three to work with:
- Document Relative :
Possibly the easiest type of path to work with, document relative paths require little more than the path from the current file to the target file. For instance, if I were working with a file located in the folder Dorknozzle\Departments\Marketing\Press Releases\ and I needed to link to a file called marketing within the Marketing folder, I would simply use ../../marketing as my path. The ../ essentially forces the browser to back out of the current folder. The same holds true if I were working with a file within the same Press Releases folder and I needed to reference an image within the Images folder located within the Press Releases folder. In that case, my path would resemble Images/file.gif. Simple enough right? The downside to working with document relative paths is that you can only back out of two folders before this method becomes impractical. If you work with a lengthy folder structure, the site root relative path might be your answer. - Site Root Relative :
Site root relative paths are possibly one of the more confusing types of paths to work with and arguably the least flexible in terms of manageability within Dreamweaver. The upside to site root relative paths is that they have no limit to folder depth. For instance, the example in the Document Relative path description references the path Dorknozzle\Departments\Marketing\Press Releases. If I were working with a file within the Press Releases folder and needed to link to the file index within the Dorknozzle folder root, I could use a site root relative path to simply reference the path /index. The / instructs the browser to find the site root and then retrieve index.NOTEBy default, Dreamweaver works with document relative paths. If you want to work with site root relative paths, you'll have to configure it when you define a site. Paths are covered in more detail in the next chapter. - Absolute :
You can use absolute paths when referencing files located in paths that don't change. For instance, the domain name http://www.modulemedia.com or http://www.dorknozzle.info will never change…they are said to be absolute. Because this is the case, I could assign these domain names as my absolute paths. Furthermore, I could also refer to a specifc folder within that domain. For instance, if I wanted to reference an image in the Images folder of the www.modulemedia.com site, I could reference its absolute path as http://www.modulemedia.com/Images/image.gif.
After you've assigned a path to an element in your web page to create a link, you may also want to declare a target. A target exists as a way of instructing the browser how to open the path. For instance, the following four targets can be assigned when working with hyperlinks:
- _self :
Opens the path within the same browser window as the original page. This target is the default. - _blank :
Forces the browser to open the path in a new browser window instance. This keeps the original page in the background. - _parent :
When working with frames, choose this option to load the linked document in the parent frame or parent window of the frame that contains the link. If the frame containing the link is not nested, then the linked document loads in the full browser window. - _top :
When working with framesets, choose this option when you want to load a linked document in a full browser window, thereby removing all frames.
NOTEIt's important to note that the Target drop-down menu is located in the Properties Inspector, always near the Link text box for text and images.
Linking Text
Arguably the easiest form of hyperlinking, creating text links, can be performed in one of three ways. First, we can simply type the text onto the page, highlight it, and then enter a path into the Link text box within the Property Inspector. Second, we can place our cursor where we want the link to appear on the page and select Hyperlink from the Insert menu. This method generates the text and link at the same time. And third, we can highlight existing text on the page, right-click to access the context menu, and choose the Make Link option. Either of the three methods performs the same task.Although we will not walk through each method, it's important to note that each functions similar in nature. After you've got one method down, the other two are just as simple. For now, we'll focus on creating text links by typing text onto the page and generating a link within the Properties Inspector. To do this, follow these steps:
1. | Place your cursor below the main Dorknozzle image but above the date and time stamp. Enter the text Visit our Parent Company . | ||||||||||||||||||||||||||||||||||||||||
2. | Highlight the text you just entered. | ||||||||||||||||||||||||||||||||||||||||
3. | Type the absolute path http://www.modulemedia.com in the Link text box in the Properties Inspector and press Enter. The link is now created for the highlighted text. | ||||||||||||||||||||||||||||||||||||||||
3. | With the link now created, preview your page in the browser by selecting Preview In Browser from the Document bar or choose F12. | ||||||||||||||||||||||||||||||||||||||||
4. | Clicking the link replaces the Dorknozzle site in the browser window with the Module Media site. Of course, you can also change the target of the link to _blank thus forcing the Module Media website to open within its own browser window instead of replacing the Dorknozzle site.Another method for inserting hyperlinks is to choose the Hyperlink option from the Insert menu. Choosing this option launches the Hyperlink dialog similar to Figure 3.42. Figure 3.42. The Hyperlink dialog allows you to create a hyperlink on the page.
As you can see, this technique provides a more complete method for creating a text-based hyperlink. Email LinksAside from linking directly to external websites or to files located in the same folder, you can also use the Link text box in the Properties Inspector to provide a link for users to send email. For instance, the footer of our page has a sentence that reads Questions or Comments? . We could turn this sentence into a link that, when clicked, opens the user's favorite email program complete with an email address, subject, and so on. To do this, follow these instructions:
To accomplish the same task, you could also use the Insert, Email Link command. The Email Link dialog allows you to enter the text to appear on the page and the email address to be associated with the text. Linking ImagesAside from linking text, you can also create links from images. Selecting an image reveals the image-based Properties Inspector which, like the text-based Properties Inspector features a Link text box and a Target menu. To demonstrate how to create a link from an image, follow these instructions:
|