Dreamweaver CS5.5 mages into Clickable Links

How to Change Your Words and Images into Clickable Links in Dreamweaver CS5.5

by Hanumantha Rao.N HanuTechVision

Goal of This Chapter

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.

The Structure and Types of URLs

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 "http://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, "http://www.thesitewizard.com/dreamweaver/dreamweaver-cs5-5-tutorial-5.shtml", and strip away the filename portion. This leaves it with an address of "http://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 "http://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.

How to Make Your Site Logo and Other Pictures into Clickable Links

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.

1. 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.
2. Click your site logo (or any other image that you want to make into a link) once, to select it.
3. 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 "http://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.
4. 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.

How to Make Words, Phrases and Sentences into Clickable Links

The procedure for creating links from text is not much different from that of making pictures into links.

1. 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.
2. 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.

How to Solve a 404 File Not Found Error

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).

NextChapter

Now that you've learnt how to link to other pages and sites, it's time to configureyour left column to create a working navigation menu.