How to Link to Pictures, Web Pages and Other Files on Your Website using Dreamweaver CS6

Chapter 4: How to Create Clickable Links or Hyperlinks

by Christopher Heng, thesitewizard.com

One of the basic things that you can do with a website is to put links pointing to other web pages, pictures,
downloadable files, and even other websites. Such links can be made up of words that are clickable or they can
also be pictures. Like all web editors, Dreamweaver CS6 provides the facilities to let you easily create such links.

For those who have just arrived at this page from outside thesitewizard.com, please note that this chapter assumes
that you have completed the earlier chapters of the
Dreamweaver CS6 Tutorial.
If you are new to Dreamweaver, you should probably begin with
chapter 1. In
fact, if this is your first website, I recommend that you start with the
article How to Make / Create
Your Own Website: The Beginner’s A-Z Guide.

Goal of This Chapter

By the end of this chapter, you will have created at least one link to another page on your website, and will
have learnt (“learned” in US English)
how to make other pictures and text into clickable links.

Structure and Types of URLs

Glance at the top of your web browser to its address bar. There’s no need to scroll up; just look at the part of
your web browser that shows you the web address of this page. You should be able to spot a string of text that
says “http://www.thesitewizard.com/dreamweaver/dreamweaver-cs6-tutorial-5.shtml” either in a
blank field somewhere at the top, or on the tab itself (or both).

In webmaster parlance, this web address is called a “URL”, which is short for “Uniform Resource Locator”. The
first part of the URL specifies the communications procedure a web browser needs to use to access the page. In
this case, the procedure used is HTTP. There are other communications procedures in use on the Internet as well. For example,
you have already encountered FTP, which you use to transfer your web pages from your computer to your web host’s computer.
These communications procedures are technically known as “protocols“. They are used to coordinate
between computer programs like your web browser (on your computer) and the web server (on your web host’s system)
to get the web pages you want.

Immediately following the protocol is (loosely speaking) the
domain name,
which in this case is “www.thesitewizard.com”.

The final part of the URL consists of the location of the web page on the domain itself. In the case of
this article, the page is located in the “dreamweaver” directory (ie, folder) and has a filename
of “dreamweaver-cs6-tutorial-5.shtml”, hence the string “dreamweaver/dreamweaver-cs6-tutorial-5.shtml”,
where the directory is separated from the filename with the slash character (“/”). Note that the slash character
is always used to separate directory names in URLs, even if your computer (or your web host’s computer)
uses Windows. Do not use the backslash (“”) to separate directories.

The full URL of a web page, with the protocol (“http://”), domain name (“www.thesitewizard.com”),
directory and filename (“dreamweaver/dreamweaver-cs6-tutorial-5.shtml”) all specified, is known as its
absolute URL“. With such a URL, a web browser can locate any web page on the Internet
(provided it exists).

It’s possible also to use a URL by simply giving its filename. For example, I can put a link on this page
pointing to, say, “tool-tip-for-images.shtml”. When someone clicks on such a link, the web browser will automatically
use the address of the page containing the link to fill in the missing details. In this case, it will take the protocol,
domain name and directory of the current page (the one you are reading), ie, “http://www.thesitewizard.com/dreamweaver/”,
append the “tool-tip-for-images.shtml” portion given in the link, to construct the URL of
“http://www.thesitewizard.com/dreamweaver/tool-tip-for-images.shtml”, which it then proceed to display.

Such a URL (ie, the short “tool-tip-for-images.shtml” address in my above example) is known as a “relative URL“.
It is so-named because it is relative to the address of the page on which the link appears. As you may have guessed,
these links can only be used to point to other pages on the same domain, since the browser always prefixes
the first part of the current URL to your relative link. If you want to link to pages on other websites, you will
need to use an absolute URL.

There are no rules as to whether you should use an absolute or relative URL when creating links that point
to other pages on your current site. Dreamweaver allows you to use whichever you want. It’s up to you to decide,
although, as I mentioned above, if you want a link pointing to a page on another domain, you will always need
to specify an absolute URL.

How to Make Your Website Logo and Other Images into Links

Scroll to the top of this page, and move your mouse pointer so that it is hovering just above the
picture that says “thesitewizard.com” at the top left hand corner. Notice that the pointer changes into a
pointing finger, indicating that my logo is actually a link. If you click it, you will be taken to
the home page of thesitewizard.com. (You don’t actually have to click it, unless you don’t believe me.)

This practice of making the site logo into a link pointing to the home page is by no means restricted
to thesitewizard.com. Many (if not most) websites do it too, so much so that experienced Internet
users have come to expect that they can quickly get to the home page of any website by simply clicking
its logo. In view of this, it is a good idea to make your site logo link to
your home page as well. It improves the overall user-friendliness of your site, and makes it behave
just like a professionally-designed website.

Please note that the procedure below applies to making any picture into a link. That is, although I only
talk about your site logo below, you can follow the same steps to make any image into a link. (Your
site logo, is after all, just a picture.)

  1. Start up Dreamweaver and load the page you have been working on in the past few chapters. You can open
    that page by doubleclicking the “index.html” line in the “Files” panel, found near the bottom
    right of the Dreamweaver window.

  2. Select your logo by clicking it once.

  3. When you do the above, the “Properties” panel (at the bottom of Dreamweaver) will show the attributes or features
    relevant to the logo.

    Properties panel in Dreamweaver CS6 with logo selected

    Click once to put the blinking text cursor in the “Link” field. Then, if you want to use an absolute URL for your link,
    type “http://www.example.com/” (replacing “www.example.com” with the actual address of your home page)
    into the “Link” field, followed by the ENTER key (or the RETURN key if you use a Mac).

    On the other hand, if you prefer to use a relative URL, click the folder icon just beside the “Link” field. A dialog
    box with the title “Select File” will appear. Click the “index.html” file to select it, followed by
    the “OK” button. (Note: if you’re rereading this section to make a picture other than your site logo into a link,
    and want to link it to some other page or file, click that file instead of index.html. My “index.html
    instruction here is meant for those making the site logo into a link.) As you probably already realised, you can
    only use this method of selecting a file if you’re linking to a web page you’ve already created.

    Before you write to ask me, I invariably use an absolute URL for my site logo. But as I said above, there’s no rule
    requiring this. It’s just my personal preference. Do whatever you like for your site. However, if you’re linking
    to a different website, you will always need to use an absolute URL. For example, if you are putting a link to
    thesitewizard.com, you’ll have to explicitly enter “http://www.thesitewizard.com/” into the “Link” field.

    Caution: it’s very easy to make a spelling error when you’re manually typing in URLs (even to familiar
    places like your own website), so doublecheck what you type. It’s very hard to spot such mistakes, because the words
    in URLs are not separated by spaces the way a normal sentence is.

  4. Enter a “0” (zero, without the quotes) into the “Border” field of the Properties panel. This is to prevent certain
    browsers from putting a blue border around your picture. (They do it to show the user that the picture is a clickable link.)
    The “0” specifies a width of zero for that border, effectively removing it.

Your logo is now a link. However, you won’t be able to test it until you upload your web page to the Internet,
which you will do later in this chapter.

How to Make Text into Clickable Links

Making any string of letters, numbers, words, phrases, etc, into links works pretty much the same way.

  1. Select the words, phrases, or whatever. You can do this by dragging your mouse over those pieces of text to highlight them.

  2. As before, enter the URL into the “Link” field in the “Properties” panel, and hit the ENTER key (or the RETURN key on the Mac).
    If your file already exists, you can also click the folder icon next to the “Link” field to select it, instead of manually
    typing the address.

    If the above paragraph sounds cryptic, it means you skipped over the section on making your site logo into a link.
    Please go back to that section and complete it first. The procedure is identical, except that now you’re making
    text instead of a picture into a link.

Once you hit the ENTER key, Dreamweaver will immediately underline the text you selecting, indicating that it is
now a link. Again, however, you won’t be able to test if you’ve linked to the right URL until you actually publish
your page.

If you are about to link to pages that you have not created yet (in anticipation of making them later), and
are dreaming up filenames for those pages, do not use spaces or capital (uppercase) letters
in your filenames. Stick with small (lowercase) letters and numbers. If you want to separate the words in
the filenames, use a hyphen instead of a space. The detailed reasons for this can be found in my article on
How to Create
Good Filenames for Your Web Pages. (You don’t have actually to read that article if you are willing to
take my word that you should stick to small letters, numbers and hyphens.)

How to Link to Pictures, PDF Files and Other Types of Files

Although I have only mentioned how to link to other web pages, you can actually link to anything you want.
For example, you can link to bigger versions of a picture, a PDF file, a Powerpoint file, a Word file,
a video file, an audio file, and so on.

For files located on your website, make sure you copy them into the local website directory on your computer (the same way
you copied your site logo and pictures in chapter 2). For example, if you have a PDF file you want to link
to, copy it into (say) the same folder as your index.html file on your computer. Putting the files
in your local website folder will cause Dreamweaver to consider them a part of your website, and upload them
as well when publishing your pages.

After copying the files into your website directory, make the link the same way you did above.
For example, click the button that looks like a folder icon beside the Link field, and select the file you copied.

Publishing, Testing and How to Solve a 404 File Not Found Error

Save your web page and upload it to your site. If you have added new files to your local website folder, and linked
to them, be sure to allow Dreamweaver to upload the dependent files when you use the “Site | Put” command. (Review
chapters 1 and 2 if you have forgotten what this means.)

Now open your site in your web browser, and test the links you have created. Remember to click your site logo as
well, since you’ve made that into a link too.

If you get a 404 File Not Found
error, it means that the page you’ve linked to does not exist. This is not a problem if you’ve deliberately created
a link that points to a future page, one that you haven’t created yet. In this case, the error message is expected,
and will go away when you get around to creating that page in Chapter 7.

However, if a link to your home page results in a 404 error, that means you’ve made a typing mistake somewhere.
Such links should never result in a File Not Found error, since the home page can’t possibly be missing, given that
your link is on that very page.

To solve this, go back to Dreamweaver and locate the troublesome link. If it’s a text link, click to put your text cursor
anywhere within the words that make up the link. If it’s a picture, just click it once to select it. This will load
the Properties panel at the bottom of Dreamweaver with the appropriate information. Then go through the URL in
the “Link” field, letter by letter, reading it aloud if needed. If you find that your brain refuses to spot the error,
get some fresh eyes to look at it (eg, a friend). Sometimes, our familiarity with our work blinds us to mistakes
because our minds make certain assumptions (automatically correcting errors before it gets to our conscious mind)
as we read it.

Another way to solve a 404 File Not Found error is to load the page in your web browser manually. Once the
page successfully loads in the browser, drag your mouse over the URL in the address bar to select it. Right click
the selection, and click “Copy” from the menu that appears. Return to Dreamweaver, click the problematic link
to load the correct information in the Properties panel, and delete the existing URL in the “Link” field using
your Delete or Backspace key on the keyboard. Then paste the URL into the “Link” field (eg, by clicking
“Edit” on the menu bar in Dreamweaver, followed by “Paste” in the drop down menu that appears). This will
insert the correct URL into the link field. You know that it is correct this time because you’ve actually
copied the working URL from your browser and pasted it unmodified into Dreamweaver.

Next Chapter

In the next chapter, you will configure the navigation menu found in your left column.

I’m currently in the process of writing the next chapter. If you want to be informed when the chapter is published, please
subscribe to thesitewizard.com’s news feed.
It’s free, and no email address or other information is needed. (“Subscribe” is actually just a glorified way of saying
“getting your browser to automatically check thesitewizard.com for updates and inform you whenever there is one”.)
Read this article if you don’t know
how to do it. Another way is to manually check thesitewizard.com’s
home page from time to time. I announce all new articles in the “What’s New” column of that page.

Copyright © 2013 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

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
http://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 this article in whole or part, in any form,
without obtaining my
written permission.

It will appear on your page as:

How to Link to Pictures, Web Pages and Other Files on Your Website using Dreamweaver CS6

Copyright © 2013 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 17 October 2013.

Follow this link:

How to Link to Pictures, Web Pages and Other Files on Your Website using Dreamweaver CS6