facebook google plus twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: Links

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

The "HT" in HTML stands for HyperText. HyperText is text that, when clicked, can take the user to other content. So, what makes HTML HTML is the fact that the pages can contain links. In this lesson, you will learn how to create them.

Lesson Goals

  • Learn to create text links.
  • Learn the difference between absolute and relative paths.
  • Learn to target new windows with your links.
  • Learn to create email links.
  • Learn to name locations on a page.

Adding Links

Dreamweaver makes adding links easy. Simply highlight the text that you want to turn into a link and enter the link URL into the Link field in the Properties.

To illustrate let's add a link to ClassFiles/dreamweaver-cc/Exercises/hello-world.html:

  1. Open ClassFiles/dreamweaver-cc/Exercises/hello-world.html in Dreamweaver if it's not already open.
  2. Highlight the text "wikipedia".
  3. In the Link field in the Properties, enter "http://en.wikipedia.org/wiki/Hello_world_program": Properties Panel URL Field
  4. Save your page.
  5. Preview the page in your browser (File > Real-time Preview). The page should look like this: Link
  6. Notice that when you hover over the link, the cursor turns to a pointer and the browser shows the URL to which the link points.
  7. Click the "wikipedia" link. It should take you to Wikipedia's page entitled "Hello world program."

Absolute vs. Relative Paths

Absolute Paths

An absolute path shows the complete path to a file starting from the web root. To illustrate this, see the following directory tree:Absolute Path Web Root

Assume that the wwwroot folder is the web root. This means that when a user types http://www.servername.com/index.html, the index.html page within the wwwroot folder will be downloaded to the browser. The absolute path to the web root from a page on the same domain is simply a forward slash (/).

The same link could be placed on any page in any folder below the wwwroot folder or on any page in the wwwroot folder itself.

Using an absolute path, a link to Company.html would include the about directory, like this: /about/Company.html

External Links

When linking to a page on a different website you must identify the location of the domain using the domain name (or IP address) of the site. To illustrate, assume that the directory structure shown above is found at http://www.beatles.com. The path of a link to Company.html from another site would be written like this: http://www.beatles.com/about/Company.html

Relative Paths

Relative paths can only be used to link to other files under the same web root. A relative path indicates where a file is relative to the file that contains the link. The folder (or directory) that contains the file being worked on is called the current directory. The relative path to another file that is also in the current directory is just the name of that file. For example, since Company.html and Contact.html are found in the same directory, they can link to each other simply by specifying the file name.

The relative path to a file in a subdirectory of the current directory must include the name of the subdirectory. For example, to link to Company.html from index.html you must first point to the about directory, like so: about/Company.html.

The relative path to a file in a directory above the current directory should begin with ../ For example, the following shows the path of a link to index.html from Company.html: ../index.html

Default Pages

The web server administrator can set up default page names to look for when a path ends with a directory name without specifying a file. Often these files are named index.html or Default.htm. In this case, the following two URLs would be identical, both loading index.html.

  • http://www.beatles.com/
  • http://www.beatles.com/index.html

Quick Tricks for Adding Links in Dreamweaver

Dreamweaver provides some neat tools for quickly adding links described below.

Point to File

  1. Highlight the text that will become a link.
  2. Click down on the Point to File icon in the Properties.
  3. Drag the mouse over to the Files panel and point to the file.

Adding Link Example

Browse for File

  1. Highlight the text that will become a link.
  2. Click on the folder icon (if you hover over the folder icon, it will shown Browse for files) in the Properties: Properties Panel File Browser Icon
  3. In the Select File dialog that appears, click on the Site Root button to quickly navigate to your website root:Select File Dialog Box
    1. Alternatively, you can type the URL into the URL field.
  4. Navigate to the file and click OK.

Drag File from Files Panel

  1. Highlight the text that will become a link.
  2. In the Files panel click down on the file to which you want to link.
  3. Click down on the Point to File icon in the Properties.
  4. Drag the mouse over to the Properties Inspector and point to the Link field. Although the "no-drop" cursor might show up, Dreamweaver allows you to drop the file path into the field.

Adding Links to Your Page

Duration: 15 to 25 minutes.

In this exercise, you will add links to your page.

  1. Create the following new pages and save them in ClassFiles/dreamweaver-cc/Exercises. Add titles and level-one headings to each page:
    1. Races as Races.html
    2. Calculator as Calculator.html
    3. Running Log as RunningLog.html
    4. My Account as MyAccount.html
    5. Log out as Logout.html
  2. Open ClassFiles/dreamweaver-cc/Exercises/index.html in Dreamweaver if it's not already open.
  3. Add the following links:
    • Home: index.html
    • Races: Races.html
    • Resources: Resources.html
    • Calculator: Calculator.html
    • Running Log: RunningLog.html
    • My Account: MyAccount.html
    • Log out: Logout.html
    • the most up-to-date information on running races: Races.html
    • the best resources for runners: Resources.html
  4. Save your page and open it in the browser.
  5. Test your links. Do they work?

Targeting New Windows

Sometimes it is desirable for a link to open in a new tab or window, so that the page with the link does not get replaced. Dreamweaver provides a Target field in the Properties Inspector for this purpose. This Target field remains inactive until the Link field is filled in, at which point it gives you the options shown in the screen shot below: Properties Panel

The _parent, _self, and _top values apply to framesets and should not be used (unless you are designing with framesets, which you probably shouldn't be).

The _blank and new values will both direct the linked page to open in a new window. The difference is that all links that target _blank will spawn new windows, whereas a link targeting new will open a new window and name it "new". As long as that window remains open, all future links targeting new will open in that same window. In fact, new is an arbitrary target name. You will get the same behavior with any target name other than the four reserved names: _blank, _parent, _self, and _top.

Be careful not to overuse targetting new windows. A best practice in web design is to give users what they expect and users generally expect links to replace the current page. They also know that they can get back to the original page using the browser's Back button. However, when creating a link that opens in a new window, the user will not be able to use the Back button in that new window to get back to your page. Reserve the open a new window for links that take the user away from your site, so any links to other sites work well in a new window as your site will still be available when they close that window.

Email Links

Email links are used to open an email client to start a new email message. The value you enter in the Link field must begin with mailto: and ends with an email address. For example: mailto:paul@beatles.com

You can also add an email link by selecting Insert > HTML> Email Link, and then filling out the resulting dialog: Email Link Dialog Box

If you select the text you want to turn into an email link before selecting Insert > HTML > Email Link then that text will show up in the Email Link dialog. Otherwise, you must type in the text in the dialog box and Dreamweaver will add it to the page at the point where the cursor is.

More on Links

Duration: 10 to 15 minutes.

In this exercise, you will add an email link and change a link to open in a new window.

  1. Open ClassFiles/dreamweaver-cc/Exercises/index.html in Dreamweaver if it's not already open.
  2. Change the link to Calculator.html so that page opens in a new window.
  3. Add text to the footer that reads "Contact us at info@runnershome.com." Make info@runnershome.com an email link.
  4. Save your page and open it in the browser.
  5. Test your links. Do they work?

Naming a Location on a Page

Named locations to which a link can point are helpful on pages with many topics. Linking to a specific location on a page can be most helpful. This is no longer a built in feature, however, still available by following the directions below.

To add a named location in Dreamweaver CC using the proper HTML5 way:

  1. In Design view, highlight the text where you want to add the anchor.
  2. Using the Right-click method, choose Wrap Tag...
  3. Type span to choose <span>, press Enter twice to commit.
  4. Use the ID field in then properties to name the area.Properties Panel ID Field
  5. Create the link to the new named area (#name).

Adding Anchors

Duration: 15 to 25 minutes.

In this exercise, you will add more named locations to Anchors.html.

  1. Before starting, open ClassFiles/dreamweaver-cc/Solutions/Anchors.html in your browser and test the links to see how the page should work.
  2. Now open ClassFiles/dreamweaver-cc/Exercises/Anchors.html in Dreamweaver if it's not already open.
  3. Add anchors before each story title heading:
    • POOH GOES VISITING
    • A MAD TEA-PARTY
    • THE NAUGHTY BOY
  4. Make the story names at the top of the page link to your new anchors: Anchor Text
  5. At the bottom of the page, you'll see the following text: "W3C anchors | Dreamweaver Class Schedule."
    1. Make "W3C anchors" a link to the "h-12.2.3" anchor on http://www.w3.org/TR/html401/struct/links.html.
    2. Make "Dreamweaver Class Schedule" a link to the "dreamweaver" anchor on https://www.webucator.com/adobe-training/dreamweaver-training.cfm#!?__f=.ilo.
  6. Save your page and open it in the browser.
  7. Test your links. Do they work?