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.
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:
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
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 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
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.
Dreamweaver provides some neat tools for quickly adding links described below.
In this exercise, you will add links to your page.
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 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:
You can also add an email link by selecting Insert > HTML> 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 > 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.
In this exercise, you will add an email link and change a link to open in a new window.
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:
In this exercise, you will add more named locations to Anchors.html.