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

Chapter 5: How to Create Clickable Links or Hyperlinks


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

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 "https://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, "https://www.thesitewizard.com/dreamweaver/", append the "tool-tip-for-images.shtml" portion given in the link, to construct the URL of "https://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.

    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 "https://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.

Copyright © 2013-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 »

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

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





Home
Donate
Contact
Link to Us
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.