All About Links & Linking in Dreamweaver CS6

Video

 

Written Tutorial Starts:

 

1. The Simple Hyperlink: It All Begins Here

The most basic link is a link from one page of your website to another. This can be done in Dreawmeaver CS6 by highlighting the item you want to turn into a link (we’re going to use a word in our navigation bar) and looking to the Properties panel (Window>Properties) to find the “Link” input field.

Dreamweaver CS6 Links & Linking Tutorial

2. The Pick Whip

Just to the right of the “Link” input field is a small target icon. This is the pick whip, a tool we can use to “point” to the page we want to link to. Simply drag this pick whip over to you Files panel (Properties>Files) and drop it on the page you wish to link to. Just like that we’ve created our first link!

Dreamweaver CS6 Links & Linking Tutorial

3. Link To Other Websites & Pages

Linking to a website where we can’t drag the pick whip and pick it up is very easy as well. Simply navigate to the website and copy the URL from your web browser and paste it into the “Link” input.

Dreamweaver CS6 Links & Linking Tutorial

4. Target

Things are fairly straightforward when you link within your own site. You click and link and go to the page, no big deal, however when you link to another website you don’t want your user to forget about your page so typically you will want to tell the link to open in a new tab/window. This is where “target” bails us out. We want to use “_blank”.

 
“_blank” opens the link in a new window or tab.
“_self” opens the link within the same window/tab. This is default and you don’t normally need to specify this.
We tend to ignore “_parent” and “_top” and you’ll hardly ever, ever use them so I’ll pass over them here.

Dreamweaver CS6 Links & Linking Tutorial

5. Link To Documents & Files

In addition to linking to a web page, we can link to an image, a sound file, a video, a PDF, a ZIP file, or really any file that is within your site or on the web. Depending on the type of file the user’s web browser will open it in the browser (most images, sounds, video, PDF, etc…), but something like a .zip file fille force a download. This can be valuable if you want a user to download a file to their computer. Highlight the text to be made a link and use the pick whip to select a document from your Files panel. This works with virtually any document, image, sound, or video file you can link to.

Dreamweaver CS6 Links & Linking Tutorial

6. Link To an Email Address

You also have the ability to create a link that will allow the user on your website to send you an email using their default email application. This is done by selecting the text which will be your email link and go Insert>Email Link and simply enter your email address.

Dreamweaver CS6 Links & Linking Tutorial

7. Link To Email Address & Add Email Subject

A little hidden trick in Dreamweaver is that you can tell this email link to automatically fill out the subject line for the user to save them time and allow you to immediately identify an email from your website in your inbox. Simply highlight your email link and look to the Properties panel and you will see “mailto:[email protected]” in your “Link” input. Add “?subject=Goofy Subject Line” to the end of that URL in your “Link” input box.

Dreamweaver CS6 Links & Linking Tutorial

8. Create an Anchor

Linking to an anchor is essentially linking to a specific part of the page that you’re on. This is a two-step process. First we set up the anchor and then we link to it. To set up an anchor highlight to element at the section of the page you wish to link to and give it an ID using the Properties panel (there is an “ID” input off to the left side.) I’ll give my text an ID of “photos”.

Dreamweaver CS6 Links & Linking Tutorial

9. Link To an Anchor

The next step is to link to that anchor we just created. To do this highlight your text just like any other link and look to the Properties panel and find the “Link” input as we’ve done so often before. Type a hashtag symbol (#) and the name if your ID. i.e. Our link would be “#photos”. Hit F12 to preview it in your browser and check it out.

Dreamweaver CS6 Links & Linking Tutorial

10. Links Will Automatically Update

One of the great features of Dreamweaver is that, here within your Dreamweaver site, Dreamweaver will automatically update links when you change file names or move files around. Go ahead, try renaming a document that we’ve linked to and watch what Dreamweaver does.Hit the “Update” button when prompted and Dreamweaver will do the heavy lifting for you.

Dreamweaver CS6 Links & Linking Tutorial

11. Change Links Sitewide

Dreamweaver not only will update links as you move files and change names, but you can tell Dreamweaver to change all links pointing to a specific page or document to another page or document all across your site with just a couple clicks. Go Site>Change Link Sitewide… I’m going to set this to change every link pointing to Magic Hat’s “Music” page to point to Tutvid.com instead. Now imagine we have a hundred links pointing to this music page and we want them all changed. This feature would change them all as soon as we hit the “OK” button. This is a huge time-saving feature.

Dreamweaver CS6 Links & Linking Tutorial

12. Badabing!

There we have it! That is your crash course in linking within Dreamweaver CS6. My advice is to link and use links generously, they’re great for your site’s search engine ranking and people really love when you link to their websites and content too!

Dreamweaver CS6 Links & Linking Tutorial

 

Follow Me On Twitter!

Like Tutvid on Facebook!