Creating Text Links


If you can drag your mouse from here to there, you can create a link inside Dreamweaver. All you have to do is decide what on the page you want to be the link, and where you want that link to point.

Because creating links is such a large part of developing a Web site, there are multiple ways to create links. You can figure out which method works best for you.

To create a text link:

1.
Select some text on the page to be the link. Figure 7.1 shows that the title "HomeCook. info " has been selected.

Figure 7.1. Drag the Point to File icon, and the arrow will follow to the selected link file.


2.
In the Property Inspector, click on the Point to File icon . An arrow will appear, and that arrow can be dragged into the Files panel. Drag it to the file you want, and release the mouse.

or

In the Property Inspector, click on the Browse for File icon . The Select File dialog will appear (Figure 7.2). Choose the file you want and click OK.

Figure 7.2. You can also select a link file from the Select File dialog.


or

In the Property Inspector, click in the Link text field and type in the name of the file you want to link to.

or

In the Property Inspector, click on the pop-up menu to the right of the Link text field, and choose from the list of recently used links ( Figure 7.3 ).

Figure 7.3. Or use this pop-up menu in the Property Inspector.


or

In the Insert Bar, click on the Hyperlink button . The Hyperlink dialog will appear ( Figure 7.4 ). Type in the name of the file to link to, or click the Browse For File icon to select a file. Click OK when you're done.

Figure 7.4. Finally, you can type the link file name in the Hyperlink dialog.


Tip

  • If you want to remove a link, click inside the text you want to de-link, click on the <a> in the tag selector, and then clear the Link text field in the Property Inspector.


The Different Types of Links

When you create a link from one Web page to another, there are three possible types of links you can add: absolute, document relative, or site root relative. Figure 7.5 shows the file list from www.homecook.info, a fairly typical site, with a number of files inside various folders. Figure 7.6 shows another way of looking at the same information.

Figure 7.5. Here's a list of folders and files (as seen in the Files panel) from a site of medium complexity.


Figure 7.6. The about, news, food, and recipes folders (or directories) are all contained within the site root folder.


  • Absolute: The index.html file contains a link to http://www.dori.com/index.html, which is another site altogether. This is an absolute link. The link starts with the explicit name of a server where the file can be found. It's also correct for the link to just go to either http://www.dori.com/ or http://www.dori.com; in both cases, the link will take you to the default file for that domain (in this case, index.html ).

  • Document Relative: The index.html file also contains a link to the index.html file inside the about folder. To tell the browser how to navigate from one to the other, the link is about/index.html . That link is relative to the document it's being called from: the server knows based on that link that it needs to find a folder named about at the same level as the index.html file, and inside that folder, a file named index.html .

If about/index.html linked back to index.html , it would link to ../index.html . Once again, the server starts looking for the next file at the same level as the current file, and those two periods tell the server to go up a levelback to www.homecook.info. And from there, it's easy to find the index.html file. A file two levels deep would link to the main index page by linking to ../../index.html . It goes up two levels of folders before looking for a particular file.

Document relative links are especially useful when you're testing on your local machinethe browser can get from one page to another just based on the location of the current document.

  • Site Root Relative: Another way to reference files within the same site is by referencing them by where they are within the site, that is, relative to the root of the site, not the current document. The root of the site is always identified with a forward slash: / . With a site root relative link, the page at /food/index.html would link to /index.html . You no longer need to tell the server to go up a level or two; instead, you just tell it to start at the root and look for that particular file.

    Site root relative links are useful when you're creating site-wide Library items. For instance, the left-hand menu in Figure 7.1 contains links to /about/index.html and /food/index.html . With site root relative links, you know that those links work everywhere on the site, no matter what page contains that menu. Library items will be covered in Chapter 13.

Links to external sites must be absolute links. Links within a site can use either document relative or site root relative links or a combination of the two. Which a site uses by default is set in Dreamweaver's preferences (see "Changing Link Relative To").





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net