Chapter 35: Building Basic Navigation Links

 < Day Day Up > 



 Download CD Content

Hypertext links are the mainstay of the Internet. In this chapter, you discover the different ways you can browse, point, or drag to build all kinds of links, using text and images.

Understanding URLs and Links

There are many ways to build links between one spot in your site and another: Some links move from page to page; others move you around in a page, but however they act or look, most links involve creating a path from one point to another. There are three different types of paths you can use to build a link:

  • An absolute path (URL)

  • Document-relative path

  • Site root-relative path

Absolute URLs

A URL, or Uniform Resource Locator, is a method of accessing an Internet address that starts from a specific point. The starting point for most standard Web pages is the Internet or World Wide Web. Most URLs include the protocol (http://) plus the server's name (www.studiomxbible.com) plus the path to the page from the site's root (/index.htm).

HTTP stands for HyperText Transfer Protocol. Another protocol is File Transfer Protocol (FTP). HTTPS is the protocol for secured servers. Between each portion of the URL, forward slashes indicate new directories. So, the example given in the previous paragraph would read www.studiomxbible.com/index.htm when used as a path in a link. Absolute URLs are used in Dreamweaver MX when the targeted page is outside of the defined site.

External link assets

When a link is created by typing in the absolute URL to a target that is outside of the defined site, an asset is created. The Assets panel (Figure 35-1) keeps track of all external links. To reuse the same URL, select the text or image to use as the link; then open the Assets panel (press F11) and click the Link icon. Select the correct URL and drag and drop it over the selected text or image.


Figure 35-1: Absolute URLs for the Habitat Alert site are stored as link assets.

Document-relative paths

Most of the time, links built within a site are document-relative, and the paths used are measured from the document that contains the link. Relative paths omit the part of the absolute URL that would be the same for all pages within the site. The path is written in the href (hypertext reference) as href="path".

For example, the Habitat Alert site contains four major sections and each of the four sections' pages are contained within folders named for the sections. A link from the home page to the Learn section's starting page would read learn/index.htm, taking the user down into the learn folder to locate the starting page. A link from that page back to the home page would read ../index.htm. Two dots and a forward slash indicate movement up out of a directory. These are all document-relative links and are easily configured using Dreamweaver. They are the most appropriate type of links to use when you are not sure where your site will be located on a server.

Root-relative paths

A root-relative link is a bit like an absolute URL in that it starts from a set point, but the set point is a folder (the site root) on a Web server. Paths that are root-relative start with a forward slash, measured from the root folder. The choice to use root-relative linking is made when selecting a file to link to. The Relative To menu, shown in Figure 35-2, defaults to Document; for root-relative links, select Site Root from the menu.

click to expand
Figure 35-2: Choosing the site root from the Relative To menu

Root-relative links require a Web server for interpretation. Opening a page with root-relative links in a browser without using Preview in Browser doesn't work. Any images will display as broken links and linked pages will not be found because your local browser doesn't understand where the root folder is. Using Preview in Browser allows Dreamweaver to convert the links temporarily (image and page paths) to document-relative links. However, any page called will not have root-relative links converted and will therefore render improperly.

Windows users may preview root-relative pages via their local server using IIS (Internet Information Services) or PWS (Personal Web Server) if they set up a testing environment and choose Preview Using Local Server in the Preview in Browser category of their Preferences.

About HTML links

The HTML tag used to create a hypertext link is the Anchor tag, written as a pair of opening and closing <a></a> tags. When linking to other pages, the anchor tag includes an href attribute to contain the path to the target page, resulting in code that looks like the following:

<a href="learn/index.htm">link</a>

Other links can be made to link within a page or to send e-mail. Some links are null links, or placeholder links that indicate no path but do provide a way to apply JavaScript or other scripted behavior.



 < Day Day Up > 



Macromedia Studio MX Bible
Macromedia Studio MX Bible
ISBN: 0764525239
EAN: 2147483647
Year: 2003
Pages: 491

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