Dreamweaver
Beginning Web Page Design


Home
Site Preparation
Dreamweaver
Basics

Webpage
Modification


Email Links
Tables
Inserting Images
Relative & Absolute
Links

Organizing Sites
Tutorial-Printable Version
Resources

Relative & Absolute Links

Difference between relative and absolute links:

Relative links are within your website. These links are based on the files' relationships with each other. The use of relative links allows files to call each other without using their exact location on the hard drive or floppy drive.

    • Example: graphics/china_logo.gif rather than A://dreamweaver_tut/graphics/china_logo.gif

The use of relative links keeps your site portable (imagine a server trying to look for something on your floppy drive!).

Absolute links should only be used to link to sites that are not part of your site.

Creating a relative link (within your local site).

  • Highlight "Syllabus".
  • On the Properties toolbar in the box next to Link type: syllabus.html
  • Hit Enter
    (This process tells the current page [i.e., china.html] to look for a file named syllabus.html at a particular location, such as a floppy disk, in a folder on your hard drive, or on the Web server if it's been uploaded. Because the link is relative, the search location for "syllabus.html" will never change in relation to china.html. even if the physical location of "china.html" does change.)
  • Save your page! ( Ctrl+S )
  • Hit F12 to preview the page in a browser
  • When the browser window comes up, click on Syllabus .
    This is a new page--the file we just modified! So you've created a relative link to a new page (file) in the same location as your original file.
  • Close the browser window.

Creating an absolute link (to a remote site)

  • Highlight the URL (web address) under "A History of China"
  • On the Properties toolbar in the box next to Link
    type in the entire URL minus the ( )! Be sure there are no spaces in the URL...especially at the end. Spaces may result in a link not working or not properly directing the user to the intended file or page.
    http://www.nationalgeographic.com/
  • Hit Enter
  • Repeat, add absolute links for The China Experience and Annotated Directory of Internet Resources
  • Save your page! ( Ctrl+S )
  • Hit F12 to preview the page in a browser
  • When the browser window comes up, test the link you just made.
    It's another website about the history of China.
  • Close the browser window.
  • Repeat this process for the URL under "China -- History in General"

Tutorial developed by
Leigh Jay Temple, Revised by Kathleen H. Mapson

URL: http://ced.ncsu.edu/ltrc/studio/workshops/dreamweaver/index.html
Last Updated: Wednesday, November 15, 2006

LTRC Workshops | College of Education | NC State University