In a sense, you could say that hyperlinks, or "links" for short, are the mainstay of the Internet. Even the name "World Wide Web", which you see in the "www" portion of web addresses, is the result of the understanding that links connect all the different websites in the world the way individual threads connect a spider's web. In this chapter, you will learn how to create links on your website, that is, pictures and words that can be clicked on to take your visitors to a different page on your site or to other websites.
For those who have arrived at this chapter from outside thesitewizard.com, please note that this chapter is the 5th chapter of the complete Dreamweaver CS5.5 tutorial. If you are new to Dreamweaver, you may want to start from chapter 1 since I will assume that you have already completed the previous chapters here. In addition, if you have never created a website before, it's probably best if you start at the real beginning and read How to Create a Website: The Beginner's A-Z Guide. The guide is written in plain English, and will take you through all the steps needed for you to get a website onto the Internet.
By the end of this chapter, you will have created links using text and images on your page, and have made them point to other pages on your site and/or to other websites on the Internet.
If you were to take a look at the location (address) bar of your web browser (which is usually near the top
of the browser window), you will see a string of characters that reads
"https://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-5.shtml". This address,
which shows the location of the article you're reading, is known in technical lingo as the
Uniform Resource Locator, or "URL" for short.
A URL comprises a few parts. The portion that says "http://" tells the web browser what
sort of communications procedure it needs to use to be able to retrieve your web page. This communications procedure
is known more formally as "protocol". There are a couple of protocols in common use, namely
"HTTP" and "FTP", but the one that you'll be using for links pointing to other web pages is "HTTP". (And if
the term "FTP" sounds familiar, it's because Dreamweaver uses the FTP protocol to publish your website.)
The second part of the URL is the domain
name, which in this case is "www.thesitewizard.com".
The final portion of the URL gives the folder and the filename of the web page itself. In the case
of this article, the web page has a filename of "dreamweaver-cs5-5-tutorial-5.shtml" and
is stored in a folder named "dreamweaver".
A URL that has all the elements I mentioned here is known as an absolute URL. When you use an absolute URL in your links, web browsers will be able to locate that page from any other location on the Internet (provided, of course, that the page actually exists).
It's also possible to use something known as a relative URL in your links. A
relative URL is a short address like "dreamweaver-cs5-5-tutorial-4.shtml". As you will
probably notice, this short address is missing many components. For example, it doesn't state the protocol
("http://") or the domain name ("www.thesitewizard.com"). When a visitor clicks on a link that uses a
relative URL on your web page, the web browser has to reconstruct the absolute URL of the page before
it can take that visitor to the new address. It does this by using the protocol, domain name and folder
of the existing page containing the link.
For example, if I were to put a link using a relative URL of "index.shtml" on this page, and you click on it, the
web browser will try to form an absolute URL from this partial address. It will first take the address of this current page,
"https://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-5.shtml", and strip away the filename
portion. This leaves it with an address of "https://www.thesitewizard.com/dreamweaver/", to which it attaches
the relative URL given in the link, which is "index.shtml" in our example. The result is that you get an
absolute URL of "https://www.thesitewizard.com/dreamweaver/index.shtml". This is the address to which
you will be taken if you click on the link.
In view of this, you can only use relative URLs to link to pages within your own site. For example, you cannot put a relative link to "somepage.html" and hope that the web browser will be able to read your mind and take your visitors to "http://www.example.com/somepage.html" instead to your own site. If you want to link to a page outside your site, you must specify the complete address, using an absolute URL. Links pointing to your own website, however, can be specified as either relative or absolute URLs. It's up to you which to use.
Try this before you continue. Hover your mouse cursor over thesitewizard.com's site logo, at the top left hand corner of this page. Notice that the cursor changes shape to indicate that the logo is actually a clickable link. If you were to click the logo, you'll end up at my home page. (There's no need to actually click it unless you don't believe me.)
Although there is no rule that says you must make your site logo into a clickable link pointing to your home page, many (if not most) websites do this, especially those that are professionally designed. In fact, so many sites do this that experienced Internet users have come to expect that any time they need to go to the main page of a website, they can simply click on the site logo. Since we want to make our website as user-friendly as possible, so that visitors can easily go wherever they want on our site, it's a good idea to add this feature to your website as well.
The procedure below can be applied to making any image into a clickable link. That is, although I only talk about your site logo below, you can use the same method for any picture. After all, your site logo is only just a picture.
Start up Dreamweaver and open your web page. For those who have forgotten how to open your web page, just doubleclick the "index.html" line in the FILES panel on the right side of Dreamweaver.
Click your site logo (or any other image that you want to make into a link) once, to select it.
As usual, the PROPERTIES panel (see picture below) at the bottom of the Dreamweaver window will change to show the properties relevant to the image that you clicked on.
If you want to use an absolute URL for your link, type the URL for your home page into the "Link" field. For example,
if your site is located at www.example.com, enter "http://www.example.com/" (without the quotes)
followed by the ENTER key (or RETURN key on the Mac) into the field.
On the other hand, if you want to use a relative URL, click the folder icon located just after the "Link" field.
This will bring up a "Select File" dialog box. Select the file you want to link to by clicking it once, and
then click the "OK" button. For example, if you're linking to your home page, click the "index.html"
item once before clicking "OK". As I'm sure you've noticed, you can only use this method for web pages you've already
created.
For the site logo pointing at the home page, I personally prefer to use an absolute URL, but as I said above, when
explaining
the difference between absolute and relative URLs, it's really up to you. Of course if you're linking to some other
site, you'll always have to use an absolute URL. For example, to link to thesitewizard.com, you'll have to manually
enter "https://www.thesitewizard.com/" (without the quotes) into the "Link" field of whatever image or text
that you've selected.
Be careful when typing in your URL. It's very easy to make a spelling mistake and end up with a link that points somewhere other than where you intended. Such errors are very hard to detect, even if you proofread your page.
Enter "0" (zero, without the quotes) into the "Border" field of the PROPERTIES panel. If you don't do this, some browsers will show a blue border around your picture to indicate that it's a clickable link. A value of 0 (zero) in the field forces the border to have a width of zero, effectively removing it.
Your picture is now a clickable link. However, you won't be able to test it until you publish your web page to the Internet later in this chapter.
The procedure for creating links from text is not much different from that of making pictures into links.
As in the case of the picture, you'll first need to select the text. To do this, drag your mouse over the word (or words) to highlight it.
Enter the URL in the "Link" field of the PROPERTIES panel, and hit the ENTER key (or the RETURN key on the Mac) on your keyboard. Alternatively, you can also use the folder icon to select a page from your site if you're just linking to an internal page that already exists.
If you don't know what I'm talking about here, please go back to the section above on making a picture into a clickable link. It's actually the same procedure.
Although Dreamweaver will immediately underline the text you selected to show you that it's now a link, you won't be able to test it till you publish your page.
Save your web page and publish it. Then go to your website in your browser and click the link (or links) you've created. If you've created multiple links, remember to also click your site logo to test it.
If you get a "404 File Not Found" error message in your web browser, it means that you've linked to a non-existent page. This may or may not be a problem. For example, if you've linked to a page that doesn't exist yet, but you plan to create it eventually, then it's obviously not a problem, since you've knowingly created a link to a future page. However, if a link to your home page gives you a 404 error, then there's definitely a mistake somewhere. The home page can't possibly be missing, since your link is on that page itself.
To solve a 404 error that should not happen, check your link to make sure that you've spelt ("spelled" if you use US English) it correctly. If you can't spot the mistake, and yet get the 404 error, I've found it helpful to actually read the words in the link aloud, or, even better, get someone else to take a look at the link. Errors in links are notoriously difficult to spot, since URLs are not sentences with spaces separating normal English words, but are often cryptic sequences of characters running into each other.
Another way to fix the 404 error is to type the URL into your web browser, and load the page manually. Once the page is successfully displayed in your browser, drag your mouse over the link in the browser's address bar to select the URL. Right-click the selection and click "Copy" from the menu that appears. Then return to Dreamweaver, select the picture (or words) again, and paste the URL into the "Link" field, replacing its previous content. This way, you'll be using a URL that you know for sure works (since you've just loaded it in your browser and are merely copying and pasting that address).
Now that you've learnt how to link to other pages and sites, it's time to configure your left column to create a working navigation menu.
Copyright © 2011-2014 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Dreamweaver Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Change Your Words and Images into Clickable Links in Dreamweaver CS5.5
