Intro & Account Setup | Getting Started With Dreamweaver MX | Program Layout | Making a Page | Page Properties
Text and Text Properties | Cascading Style Sheets | Tables | Images | Links
Publishing | Templates | Collaborating | Outside Resources

The address of a site on the Internet is called an URL, or "Uniform Resource Locator." Essentially, the World Wide Web is made up of a collection of "hyperlinks." A link, as it is commonly known, is a special kind of text type that allows a user of a website to access a document or some kind of multimedia file when that text is clicked. Links are used for navigating a site, for creating outlets for users to go to another website, and for opening up files on a website. With all of the various functions links serve, it's important to learn how to create links in Dreamweaver MX.

Link Properties
The Properties palette has an area designated to making and editing links. Read the numbered list below and use the corresponding numbers on the image to see how to insert your table:

1. Link:
In this field, you can type in the URL of a website or web page, or copy and paste a URL from a web browser. You can also create a link by going to the menu bar and selecting “Modify” and then “Make Link.”

2. Link Drop-Down Menu:
Click on this triangle to access the drop-down menu that will allow you to choose a URL from a list of previously entered URLs.

3. Point to File:
For use with the Files menu. Drag and drop the pointer to a file listed in your Local or Remote site files to make a link.

4. Browse for File:
Click the folder icon, and browse for a file on your computer to turn into a link.

5. Target:
Links contain the ability to open up a page in various locations. Using Target, you can set a link to open a page in a new window, the current browser, or in a different frame (if you are making a page in frames).

Additionally, you can edit the properties (or style) of links by going into the web page's Page Properties window. In this window, you can change the color scheme of links for sites. You can edit the regular link color, visited link color, and the active link color. A good idea is to make links contrasting colors from the background color or image of your site. For example, blue links on a black web page are impossible to read. Yellow links, or a light, bright color, would work better on a dark background. Alternatively, dark links on a light background are also easy to see. Basically, try to steer clear of using link colors that blend in with your background color.

Creating a Link to Another Site
Making a link to a website or another web page that is not in your site is very simple. First, select the text that you want to turn into a link. Go to the Properties palette and in the Link text box, type in the URL of the website that you want to link to. Or, you can copy the URL from a web browser by going to the menu bar and selecting "Edit," and then "Copy." Then, go back into Dreamweaver MX, put the cursor in the Link text box in the Properties palette, and go to "Edit," then "Paste" in the menu bar (or hit ctrl + v on the keyboard) to paste the URL.

Creating a Link to a Page in Your Site
If the website you are working on that contains multiple pages, you will want to link to your other pages so that users can navigate your site. After all, since the Internet is basically a collection of inter-linking web pages, it's essential that you have links that connect the different parts of your website. When linking to web pages within your own site, it's best to have all the web pages for your site all saved in one folder, or in multiple, organized folders. When your website files are organized, it will be easier to link to your web pages.
With your cursor, highlight the text that you want to turn into a link. Go to the Properties palette. Next to the Link text box, you will see an icon that looks like a folder. Click on the icon. By doing this, you can browse your computer to find to the .html file (or other document) that you want to turn into a link.

The "Select File" window lets you browse your computer's folders to find the file you want to link to. When you click on the file name that you want to link to, the name will appear in the "File name" text box near the bottom of the window. Click on the "Select" button when you find the file that you want to turn into a link.

After you click "Select," you will see that the file name will appear in the Link text box in the Properties palette.

Making an Image a Link
In addition to turning text into links, images can also be turned into links. Images that are links can be clicked just like regular links. Making an image into a link is no different than turning text into a link.

Click on the image that you wish to make into a link (if you do not know how to insert images into your web page, please read the Images section). Go to the Properties palette. In the Link text box, type in or paste the URL that you want to link. Hit the “Enter” key to make the link live, or click elsewhere in Dreamweaver MX. If you click back on the image, you will see the URL you just entered appear in the Link text box of the Properties palette. This means that you have now turned an image into a link.

There are several instances where you might want to make images as links. For example, if you have your navigation set up for your set that a different image represented a different section of your site, clicking on an image link would take the user to that section. Or, if you had a smaller version of a large image on your site (this is called a "thumbnail"), you might want to make that smaller image a link to the bigger version of that image (doing this would save on loading time for your web page in a browser). Making images into links has both practical and aesthetic uses in web design.

Note: When you make an image a link, the default behavior is to indicate that it's a link by turning on the image's border. To have no border on an image link, enter “0” in the “Border” text box. Otherwise, enter in any number you want for the border size.

Linking to Other Media
HTML files are not the only things you can link to. With images, sound files, movie files, and other kinds of media floating around the web, it's possible to link to items other than HTML documents!
There are two ways you can have people view things that you link to. They will either open up in the web browser, or they can "download" the file to their own computer to open up in a different program (such audio files; these are generally not viewed in a web browser, they are downloaded and played in a separate program for audio).

Things such as images, or even short audio samples, usually in WAV (*.wav) format, can be directly viewed in the browser. Most visitors to your website will want to do such, anyway. Large files, such as movie clips or PDF files, the visitor will want to completely download (save) to their own computer.

Regardless of how you want someone to download or view something, linking to it is the same. Whatever file you wish to link to, make sure it is in the same directory as the page you're linking it from (on the server where your website is located; you'll learn about publishing and uploading files later). Make sure it has an appropriate filename (for example, an image of Murray Hall might be named "murray.jpg" if it's an image in JPEG format).

Select the text (or image) you want to link to another file. Similar to linking to a page, you're going to enter the text into the "Link" box in the Properties palette. Instead of, say, linking to a page named "links.html," you're going to type in "murray.jpg," (or whatever the name of your file is) since you want to link to the image.

This is where you run into problems. Every person and every computer has their web browser configured slightly differently. Maybe you've run across this problem yourself. Clicking on a link on one computer may bring up a box asking you if you want to "Open" or "Save" a file, but clicking it on another computer might just go right ahead and open it without asking for your choice. If you want someone to download a file, rather than simply clicking on it like a normal web page link, you're going to have to physically type out a message on your page reminding them to do so.

To download a file that's been linked to, (in a web browser, not in Dreamweaver MX) place the cursor over the link, and click the right mouse button. You then select either "Save As" or "Save Target As," depending on what web browser you may be using.

A "save" box will then pop up, asking you where you would like to download the file. Select the destination, and click "Save." The file will begin to download. Depending upon your computer's speed and your Internet connection speed (and the size of the file being downloaded), download times can be anything in the world (a small image will download much faster than a large music video, for example).

Making Anchors
Let's say that you have one web page, but it's very long, and you don't want users to have to scroll through the entire page just to find something they're looking for. A great way to turn a lengthy web page into something navigable is by creating "anchors" for your page. Anchors are a type of link that allows you to link to a certain part within the same page. Creating anchors, however, takes a little more effort than making regular links.

As an example, pretend you have a section on a web page called "Outside Resources," but that section is located at the very end of the page. Since you don't want users to have to scroll all the way to the bottom of the page to find that section, you'd want to make an anchor.

First highlight the text that you want to turn into an anchor with your cursor. Now, go to the Properties palette is. You'll put the anchor link inside the Link text box of the Properties palette. First, type "#" in the text box. All anchored links must have a "#" sign in front of its name. This coding tells the web browser that the link is an anchor and is located on the same page you're working in. Then, type in the name of the anchor you want to make. You can make the anchor name anything you want, just make sure that it is appropriate to the work you are doing, so that the name makes sense, and it will be something that you can remember. Be sure not to include any symbols in the name, but do use underscores (_) when you want to put spacing between words.

Now it's time to learn how to do the second step in making anchored links. At this point, you have made the actual anchor link that will be clicked on by users. But, you don't have anything to link to on your page! In order to do this, you need to create what is called the "named anchor." This is the physical anchor itself.

In your web page in Dreamweaver MX, put your cursor where the beginning of the section where you want to put the anchor. Then, go to the menu bar and click on "Insert” and then "Named Anchor" (or, you can simply use the keyboard to do the Named Anchored shortcut, Ctrl + Alt + A).

You can also insert an anchor by going to the “Insert” panel, select the “Common” tab, and click on the “Insert Anchor” icon.

A dialogue box will pop up asking you to put in the name of the anchor. Put in the same exact name that you put in for the anchor link. If you don't, then the anchored link will not work. The link from the previous step must has some place to link to. Now, you are creating that place, and it must have the same name as the link you have already created. Please note that for making the actual named anchor, you do not need to put the "#" at the beginning. You only need to do this for when you make the link to the anchor.

Click the "OK" button when you have entered the anchor name. When you do, a physical anchor will be inserted into your web page. See the image below to see how the anchor looks in Dreamweaver MX. Please note that when the page loads in a web browser, this icon will not appear. It only appears as an icon in Dreamweaver MX so that you can recognize where you inserted an anchor on your page.

You can test to see if your anchors work by previewing your web page in a browser (press F12 on the keyboard). Click on the anchor link, and it should take you to the specified part of the page in which you inserted the anchor. If it does not work, check to make sure if the names of the link and the anchor match in Dreamweaver MX.

>> next