Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for Educator.com

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Linking to Files Outside Your Website

  • We will take a look at how to link to files or pages outside your website known as absolute links
  • When you link to a page on the internet outside your website, you must be sure to include the http protocol
  • You can browse to the page or file and copy the link to paste within Dreamweaver, or you can type the url directly into Dreamweaver
    • Add Las Vegas & New York to the destionations.html page within the bulleted list
    • Add hyperlinks to lasvegas.com & newyork.com by double clicking the words and typing the full url into the Link area within the Properties panel
    • Preview in the browser & notice what happens when you click the links
    • if we close the browser window, we are now off of the website
    • We want to open a new browser window or new tab within the browser for these pages
    • We will add the target of _blank to our hyperlinks using the Target dropdown menu within Properties
    • Preview in the browser & notice the new tab or new window that opens
    • Now the user is not taken off of our web site when they choose one of those links

Linking to Files Outside Your Website

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Linking to a Website 0:45
    • Link Area
    • Open Link in New Tab
  • Another Link Example 5:39
  • Summary 6:25

Transcription: Linking to Files Outside Your Website

We are now going to take a look at how to add hyperlinks to your website to items and locations outside your website.0000

So, this is going from within your own website pages that you control, going out to another website.0010

What we want to do is have our browser open; and I also have the Destinations page open within Dreamweaver.0018

The idea for this is: Las Vegas and New York, our first two U.S. destinations, are rather extensive; and if we tried to create a page that described them, it would be very difficult.0029

So, what we are going to do instead is: we are going to link to a Las Vegas website out on the Web and a New York website out on the Web.0045

How do we go about doing that?0056

Well, let's take a look: this time, we can't use a Dreamweaver tool; what I'm going to do is select the text I want to add the hyperlink to.0058

This is no different than if you are creating a hyperlink to a page within your files.0069

But what I am going to do is go down to the Link area to do it.0075

And within the Link area, any time you are linking to a hyperlink that is not within your website, you need to add the http:// protocol piece.0080

And browsers add that for you now, so most people aren't used to typing that; when the Web first came out, and browsers were very young, they didn't do that piece for you, so we had to type it all out.0094

My favorite thing was: you listen to the radio, and they are describing the actual website address, and they have a 30-second slot, and about 15 seconds of it was saying their exact Web address, because they would have to say http://, then list their domain name, and it took a while.0108

We no longer have to do that; browsers understand, as long as we don't put something else in there, we always want to request a web page.0131

But this hyperlink would not work without it; so we are going to go to lasvegas.com...0140

Let's go ahead and save this page; what I'll do is put it into the browser; so I'll preview it in Chrome.0148

Now, you can see, Las Vegas here is not a hyperlink.0158

If I click the Refresh button, it is definitely not a hyperlink in my Destinations page; so something happened.0164

I'll close this up; notice, my link doesn't exist--and this can tend to happen, so if it happened to you, don't be concerned; we'll just do it again.0172

Like I said, I want to show you some of these things that can happen and explain why.0185

After I typed in the hyperlink, I didn't hit Enter or Return: what that does is register that link into that location.0190

The other thing you want to look at before you bother previewing in the browser is: when you have clicked off of it, it should turn into a different hyperlink color.0200

We don't have any styles set up for our hyperlinks on this page, so ours are going to be royal blue with an underline.0211

That time, I know it worked.0219

So, let me try previewing it now: I'll go ahead and save, and you can see, it is definitely a hyperlink.0223

Now, when the user clicks this hyperlink, they are taken to lasvegas.com.0232

But what happened to our website?--well, they are now lost; they can hit the "Back" button in the browser window to get back to our page, but a lot of users don't even understand that.0240

So, what you want to do any time you are creating a link to somewhere outside your website: you want it to either open in a new tab or a new browser window automatically.0255

We are going to add that piece: I'll highlight Las Vegas, and to add that or tell the browser, "When the user clicks this hyperlink, we want a new tab or a new window, depending on how the user has the browser set up," I go over here to this target area.0267

If I click the dropdown, it's the very first thing in this area.0288

What that is going to do is always open this link in a new tab or a new window.0293

I'll choose that; save the page; and let's put it back in the browser and see what happens.0299

Now, Chrome uses Tabbed Browser; so if I click on this, if that target blank worked, I get a new tab; and notice, I did.0309

Now, when users go out to that web page and they close it, I have not lost them off of my website.0319

So, you usually want to do that for every link you add to an external website (in other words, not any of your files).0329

So, I am going to highlight New York; I am going to add a hyperlink here, adding the http://, and I will put newyork.com.0339

I'll hit Enter or Return to register it, and then do my target: _blank.0353

You can see it became a hyperlink; but every hyperlink I create, I need to test; so this time I'll go to Firefox to test.0363

And my Firefox browser is already open, so here it is.0373

I'll click New York; I go to New York, so that is working correctly.0378

That is how you create links to destinations outside your website.0386

Our page just happens to be a travel destinations website.0394

So, needless to say, there are a lot of hyperlinks I can create on this page; but what I have done so far is: I have created hyperlinks to pages within my website, using some of the Dreamweaver tools; I have now created hyperlinks to pages outside my website.0398

And when I do that, I have to make sure I add this http piece into it; otherwise, my hyperlink won't register.0417

And I have to hit Enter or Return if I have typed that in as soon as I am done.0427

That will make sure that that hyperlink stays and remains in that link area.0435

And always test every hyperlink: the one you don't test is the one that won't work--I can guarantee it.0441

So, that is how you create hyperlinks to locations outside your website using Dreamweaver.0449