Link basics

show more Link basics provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS5 Essential Training show less
please wait ...

Link basics

Without links the World Wide Web would be a pretty boring place. Instead of being able to click to jump from page to page, you would have to type in each unique address every time you wanted to view another page. It's no exaggeration to say that without the ability to create links, there would be no Internet. So knowing how to create links in Dreamweaver is pretty important. It's also, you'll be glad to know, pretty easy. Before we get into how to create a link in Dreamweaver, let's take a moment to learn the basics of links and a few of the different types you can create.

Links are nothing more than an address that points the browser to another location. The "A" or Anchor tag is used to create Links, and the "href" attribute is used by the browser to resolve the link's destination. Different types of links use different means to resolve link paths. Understanding the differences between these types will assist you in deciding which type of link to use in certain situations. There are three main types of links: Absolute, Document Relative, and Site Root Relative.

Absolute Links contain the entire Path to the desired Page, including the http protocol. They are primarily used to resolve links outside of the current site, although in complex sites or sites where pages are generated automatically, it's not uncommon to see them use to navigate internally in the site. This practice is discouraged as a general rule since it takes Absolute Links longer to resolve. For links outside of your site, however, Absolute Links are required.

Document Relative and Site Root Relative links are very similar. They offer you a way to resolve links within your own internal site. Document Relative Links are by far the most popular. Put simply, they are resolved by specifying the path from the current page to the desired page, using the site file and folder structure. Forward Slashes are used to denote going into a folder, while dot, dot forward slash is used to signify going up and out of a directory.

For example, if you are in a subdirectory and needed to access the Index Page in the Root Folder, the Document Relative Link would be, ../index.htm. If you are on the Index Page and needed to navigate to the photos.htm page in the Lifestyles Directory, the link would be resolved as lifestyles/photos.htm. When two files are in the same folder, you can merely resolve the link by using the name and the extension of the file.

Site Root Relative Links are very similar to Document Relative Links with just one major difference. Instead of resolving the link using a relative path from the file's current location, you resolve the link by going back to the root directory and working your way down. The Root Directory is identified by using a Forward Slash at the beginning of the link, and then working down the directory structure. Therefore, linking to the index.htm file would be resolved as /index.htm, no matter where the link was created in your site.

Site Root Relative Links aren't as widely used, but they are great for creating links on pages that move around within your site a lot, or on pages that you aren't quite sure where their final destination is going to be. As we continue on in this chapter, we will explore creating external and internal links in our pages, as well as alternate link types like e-mail and named anchor links.

Link basics
Video duration: 3m 37s 15h 22m Beginner


Link basics provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS5 Essential Training

please wait ...