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 Website Files

  • We are going to take a look at creating hyperlinks to other files within your website
  • There are many types of hyperlinks
  • Things you can link to:
    • Files
    • word documents
    • excel files
    • pdfs (create a pdf of the travel specials that users can download)
    • link to the reader program
  • Linking to Files
  • You can create links to any file type within a website
  • The user must have the specific program in order to download & open it
  • You can create links to Word, Excel, PDF or even Photoshop files
  • We will create relative links to our pages & files within our website using Dreamweaver tools
  • These tools are the Point to File & Browse for File icons within the Properties area
  • Create 3 new pages in the files panel by right-clicking within the open area
  • When you create the files this way they don’t open within Dreamweaver
  • Open destinations.html
  • Create a link on the destinations.html page for Austria, Spain & Fiji
  • To do this, double click the word you wish to make a hyperlink
  • Then use the Point to File icon or the Browse for File icons to the right of the Link area within the Properties panel and select the file you wish to link to
  • Preview the page in the browser
  • ALWAYS test every link in the browser
  • These should be retested once you have uploaded your pages to the web server

Linking to Website Files

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
  • Creating Hyperlinks between Web Pages 0:30
    • Create New File
    • Assigning a Hyperlink using Point to File
    • Assigning a Hyperlink using Browse for File
  • Preview in Browser 7:48
  • Creating Hyperlinks to other Files 10:02
    • Features of Point to File
  • Preview in Browser 11:59
  • Linking Image to Web Page 12:47

Transcription: Linking to Website Files

What we are going to look at now is inserting hyperlinks into our pages--and specifically hyperlinks between the web pages within our website.0000

There are many different types of hyperlinks that you can make, and one of the most common is between the pages of your website.0012

That is what we are going to take a look at.0021

Dreamweaver has a couple of tools to help you with this; and I think you will find them very handy.0024

We're going to take a look at creating hyperlinks between our web pages; we'll also take a look at creating a hyperlink to a PDF file within our website files.0031

So, let's get started working on our hyperlinks.0044

I'm on the Specials page here; and the Specials page has had some content and images added to it, and it might be a good idea to create a link to a PDF of our travel specials, so that people could download and print out the Specials page, that PDF version of this page, when they want to.0047

But what we are going to start with is our Destinations page; and let's take a look at that.0072

We really don't have many pages within our website for the various destinations, and there are some we have images for that we kind of want to highlight within this list of destinations.0077

The idea is: I can go in here, and let's say I want to check out going to Austria as a destination: well, if I click on that, I will be taken to a page about Austria, and there will be some content on that page.0091

There are quite a few destinations here where we can really get people excited about these different locations.0108

And then, hopefully, they will book with us at Wanderlust Travel, our fictitious travel agency, in order to do it.0115

But we are going to do things a little bit differently; and this is quite often what ends up happening.0125

Right now, all of the text for these various travel destinations is not ready; but that doesn't prevent us from creating hyperlinks within our website files to these pages.0130

So far, we have been creating HTML files by using either Command or Ctrl, N, to create a new page, or going to up to the File, New interface to do it.0144

This time, we are going to create the pages using the Files panel.0157

And what I am going to do first is: I have a few pages I want to create hyperlinks, because those are some of the pages we are going to start out highlighting within our Destinations page.0162

And Austria is one of the first ones; so what I want to do is create a new page for Austria; and then as I get the content (the text and images), I'll have the page all ready, and I can just drop that content onto them.0176

So, I don't really need any content on the page now; I just need to create the page.0194

I'm going to go over to my Files panel here; and there are two ways to do it.0200

I can right-click in the Files panel, and notice, I have New File or New Folder available here.0206

The other method is: in the Files tab here, on the far right, I have a little Options; and if I click on that and go to File, you can see, I can get to some of the same things.0214

So, I am going to choose New File; and what that does is: it creates a new file in my Files panel, but notice, it didn't open up a new page.0227

This is a great way to do the work flow we need: we don't need to open the page--we just need to create it so we can link to it.0239

We don't have any content for it right now, anyway.0247

So, I'm going to create a page for Austria, and it's just blank.0251

The other one we want to do is Fiji down here in the South Pacific area.0256

I'm going to do the same thing; this time I'll right-click in the Files panel and choose New File, and this will be my Fiji.html page.0263

This is a really quick and easy way to create the page without needing to open the pages and close them each time you do that.0275

Those are two of them that we want to set up.0284

Now, a couple of others are in Europe, and we don't have them listed here, so I think I'll wait on those.0288

Let's just take care of the two that we know about (Fiji and Austria) for now.0295

So, how do I create a hyperlink from one page to another within my website?--and it doesn't matter if there is content on them or not in order to create the hyperlink.0302

What I am going to do is start with Austria; and I am going to double-click the word Austria.0314

That perfectly selects it, so I don't have any spaces on either side; and then I'm going to go down to the Properties area.0321

You will see there is this section called Link: and within this area, there is this little circular black thing called Point to File; there is also a folder.0329

I am going to click on the Point to File and hold my mouse down; so I have my mouse held down, and I am going to drag over to my Austria file in my Files panel.0342

When I let go, Austria.html is listed there, and I have a default HTML royal blue-underlined link.0354

I won't worry about the colors, because we can always modify that using CSS.0365

I'll do the same for Fiji: double-click; I'll go down to Point to File, hold my mouse down, and drag over to Fiji.0371

Now, these are no longer in alphabetical order--or if you are on the Mac side, what it does is go by file and folder names and place them alphabetically; on the Windows side, it tends to keep the folders together, and then the files together.0382

But I'm going to click the word Local Files twice, and that will pop it back into correct alphabetical order.0400

So, I have Fiji and Austria all set up on this page.0409

I have one more to go: what I am going to do is: I have Spain here, and I do have some images for a Spain page--so let's go ahead and create that also.0414

I'll right-click, click on New File; this one is going to be Spain; I'll go ahead and click twice on my local files to get it in alphabetical order.0427

But this time, I am going to use Browse for File; so I'll double-click Spain, go down, and click the folder; and now, when I do that, I can simply select the folder in my file structure, double-click, and there is my hyperlink for Spain, and it's now blue, and it's underlined.0440

Let's do a save, and I'll put this into...let me do Internet Explorer this time.0466

Now, every hyperlink you create, you need to test.0474

What is interesting about Internet Explorer is: in every other browser, it's bright royal blue; in Internet Explorer, it's kind of a nicer blue--not quite so bright.0479

I click Spain, and let's see what happens.0491

It doesn't seem to be taking me to Spain--let me try this one.0499

There it went to Spain; let's go back--I'll try Austria.0504

Now, this is acting really interesting: let me try another browser and see if I'm having the same issue.0512

So, I'll go over to Firefox; if you have these types of issues, don't panic; what we'll do is...let me do Safari here.0520

There we go; I'll click on Spain; I go to Spain; now, I don't have any content on this page, so I'll hit the Back button.0532

Click on Austria--I go to Austria; Fiji--I go to Fiji; so that seems to be working.0541

If you have a little trouble where a browser gets kind of strange on you, don't panic over your hyperlinks: just go to another browser.0550

If another browser or two do the same thing, then you have a problem in your page; but these browsers are just like any software program--they can have issues.0559

So, I'll go out to Chrome and do one last test, just to make sure.0571

Click on Spain; go backwards: Austria...and you can see, those are all working...Fiji--yes.0577

That was just an Internet Explorer issue or a computer glitch at the time.0587

But I know these hyperlinks are working--just make sure you test every hyperlink: the one you don't test will be the one that is broken.0592

Now, the last thing we want to do is...I made hyperlinks to HTML files; what about hyperlinking to other types of file formats?0602

I'm going to go over to the specials page, and after Travel Specials I'm going to hit Enter or Return; and I'm going to say "View our travel specials in PDF."0614

So, this is going to be a PDF version of our travel specials.0634

How do I link to this one?--well, I do it the exact same way as I do the other types of files.0639

But I want to show you something else: I had the Files panel nicely opened for you so that there would be no confusion--but let me set up my Files panel so it might not work quite correctly.0647

Let me scroll down here: now, what Point to File does (and I find this an interesting feature)--I am going to highlight this whole line; I am going to go and use Point to File; but what happens when I go to do this--if I click and drag over, if I come up towards the top, you can see it scrolls for me.0661

And my PDF is located in the text folder; now, I am keeping the mouse down...and I'll go down to the text folder, hover over it, and notice: Dreamweaver popped it open for me.0686

Your Files panel doesn't have to be perfectly open in order to use this.0698

This is our Travel Specials, which I have in a PDF format inside the text folder here; so I just scroll down to it and let go, and there is my PDF.0704

I'll save this, and let me go out to Chrome again; view them in PDF format; and there they are.0716

You link to a PDF or any other format the exact same way you link to any other HTML file in your website.0727

That is how you can create hyperlinks using the Dreamweaver tools--hyperlinks between files within your specific website.0737

If you are linking from one page to another page or another file that is within your site folder, you can use these methods to do that, whether it is an image or whether it is plain text you are linking--it is the exact same method.0749

Since I mentioned "image," how about we link to one?0767

I'm going to link this particular image; and actually...yes, let's link this one; this works.0770

And what I am going to do is link this one to Austria.0781

I know it's the Charles River Bridge, but I don't have a Prague or Czech folder or file yet, so I'll just show you: there is a link inside the image here.0785

I'll click Point to File and link over to Austria; it's identical to linking for text.0798

Now, once I added it, if I want to get rid of a link, I can select it within the Link area and delete it.0806

That is how you can add and delete hyperlinks to any files within your website folders, using the Dreamweaver tools.0815