facebook google plus twitter
Webucator's Free Adobe Dreamweaver CS6/CC Tutorial

Lesson: Links

Welcome to our free Adobe Dreamweaver CS6/CC tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver CS6 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

  • Create text links.
  • Learn the difference between absolute and relative paths.
  • Target new windows with your links.
  • Create email links.
  • Add anchors to your 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 Inspector.

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

  1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already open.
  2. Higlight the text "wikipedia".
  3. In the Link field in the Properties Inspector, enter "http://en.wikipedia.org/wiki/Hello_world_program":
  4. Save your page.
  5. Preview the page in your browser (File > Preview in Browser). The page should look like this:
  6. Notice that when you hover over the link, the cursor turns to a pointer and Firefox 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:

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

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/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/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?

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

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:

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 > Email Link, and then filling out the resulting dialog:

If you select the text you want to turn into an email link before selecting Insert > 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/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?

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Anchors

Anchors are named locations to which a link can point. Anchors make it possible to link to a specific location on a page.

Follow these steps to add an anchor in Dreamweaver CS6 using the pre HTML5 way:

  1. Place the cursor where you want to add the anchor.
  2. Select Named Anchor from the Insert menu or the Common Insert panel.
  3. In the resulting dialog, enter a name for your anchor (no spaces allowed):

To illustrate let's add an anchor to the top of ClassFiles/Dreamweaver/Exercises/Anchors.html so that we can add a "Back to Top" link at the bottom of the page:

  1. Open ClassFiles/Dreamweaver/Exercises/Anchors.html in Dreamweaver.
  2. With the cursor at the very beginning of the page (before the "Anchors" heading), select Insert > Named Anchor:
  3. In the Named Anchor dialog, enter "Top":
  4. You should now see an anchor icon () in front of the "Anchors" heading. If you do not, you may need to change your preferences by selecting Edit > Preferences and then selecting the "Invisible Elements" category and checking Named anchors:

You are now ready to create a link to your new anchor. To do so:

  1. Scroll down to the bottom of your Anchors.html page and highlight "Back to top."
  2. In the Properties Inspector, enter "#top" in the Link field. The pound sign or hash mark (#) at the beginning of the link value is important. It tells the browser to search for an anchor on the page.
  3. Save your page and open it in the browser.
  4. Scroll to the bottom of the page and test the link. Does it bring you back to the top?

To link to anchors on remote sites, simply include the whole URL followed by a pound sign and the anchor. For example: http://www.example com/index.html#anchorname. Or in the case of a default page: http://www.example com/#anchorname.

Please note that HTML5 no longer uses the above technique. Instead, simply use the id= attribute to give a location a name, and then link to that name using a # at the beginning. Much easier and more direct.

To add an anchor in Dreamweaver CC using the proper HTML5 way:

  1. Place the cursor where you want to add the anchor.
  2. Use the ID field to name the area.
  3. Create the link to the new named area (#name).

Adding Anchors

Duration: 15 to 25 minutes.

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

  1. Before starting, open ClassFiles/Dreamweaver/Solutions/Anchors.html in your browser and test the links to see how the page should work.
  2. Now open ClassFiles/Dreamweaver/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:
  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 http://www.webucator.com/ilo/schedule/adobe/.
  6. Save your page and open it in the browser.
  7. Test your links. Do they work?

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

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 Inspector.
  3. Drag the mouse over to the Files panel and point to the file.

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 Inspector:
  3. In the Select File dialog that appears, click on the Site Root button to quickly navigate to your website root:
    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 Inspector.
  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.