Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Linking to web pages and sites

From: Creating a First Web Site with Dreamweaver CS4

Video: Linking to web pages and sites

So once you have some content on your HTML pages, you really want to start linking these pages together. So, what I want to do now is I want to create a quick text navigation bar, made up of HTML text. And I also want to link out to a website externally as well. So, right up here under Home page, I want to type in Home. So, I'm just creating text that is then going to link to the different pages. So, I have typed in Home. I want a divider between the Home link and the Next link, which is the About link.

Linking to web pages and sites

So once you have some content on your HTML pages, you really want to start linking these pages together. So, what I want to do now is I want to create a quick text navigation bar, made up of HTML text. And I also want to link out to a website externally as well. So, right up here under Home page, I want to type in Home. So, I'm just creating text that is then going to link to the different pages. So, I have typed in Home. I want a divider between the Home link and the Next link, which is the About link.

So, I'm just going to use this Pipe key, so I'm going to select Shift and then hit the Backslash key. It will give you that sort of pipe divider, which works out pretty well. So, Home About. Again, Shift+Backslash will give you that pipe. Portfolio. Shift+Backslash and then Contact. So, as you can see, here are my four different pages and I want them to jump to these pages that currently are already open but more importantly I want, say for instance, the About page to jump to about HTML.

So, in order to link any text to something else, all you need to do is select it and I'm just going to double-click on that word and it will select the whole word. And then in the Properties panel, under HTML, I can go ahead and link to that page and again I want to link to this About page. So, I really like the ability to point to a file. So, I'm going to select this Target Looking icon and you can see it gives me this arrow. This arrow will allow me to click-and- drag and point to that specific file and then when I release, it points to that file.

In fact it says About HTML. Look what it gives me. It gives me this text. It now blue. It has an underline, which is clearly the signs of a link. So, that's working out well. Portfolio again, double-clicking on that word, I can use my Point to File button and point to Portfolio like that and Contact. Double-click on that word and maybe instead of using the Point to File, I can always browse to that file as well.

So, browse, 05 Begin, Contact. Okay, so that's exactly what I want to point to. The contact HTML. Click Choose and there it is. Well, okay lastly the Home word, I'm going to link that to the index.html because that's my homepage. Select Choose and there is my navigation. So, well, you might be curious as to whether this is working or not and in order to see this working, I need to preview it in a browser.

So, that's my next step. So, I'm going to go to File and I'm going save this page first and then I'm going to go to File > Preview in browser and I'll preview it in Firefox but you can select any browser you have in here and what it will do is it will launch that browser with that page in it. So, you can see that it is the index.html page. It gives me my links. I get the little hand icon. When I roll over any one of these links and if I click on it, it will jump to that page.

So, here I am on the about.html. I can click the Back browser button and check all of these out. And look what starts to happen. This is the visited link color. It is by default this purple. So, I visited all these pages already and it's just this last one. In fact, if I click on it, look what happens. It turns red and then jumps to that page. So, again, really quickly I was able to add that navigation, pretty effectively for the most part and again it's just really a matter if I go back into the Dreamweaver, of linking those files and pointing to those particular files, so they are sort of linked together.

That's for making sort of a website, sort of this linking intertwined pages. In this case, down below, I have this Follow Jane on Twitter. And what I want to do here is I want this text to jump out to our Twitter page. So, with that text selected, I can go down to this Link input field and I can go ahead and type in that web address. In this case http://twitter.com/ janedoephoto and then hit Return. There it is.

And let's go ahead and save this file and preview it in our browser again. Now if I click on Follow Jane on Twitter, sure enough her Twitter page opens up just fine. In some cases, I might want this page to open up in a new browser window and I can easily control that. In fact, if I close those windows and go back to Dreamweaver, I can select this text and right next to where I typed in the web address, I can select this Target and I can open it up in a blank page.

So, this is sort of a best practice. If you are jumping sort of to a different website, to open that up in a blank window. So, that's what I have just done there. I'm going to click save and I'm going to preview it in a browser. And if I click Follow Jane on Twitter, it opens up in a new browser window in this separate tab. So, they never quite lead my site, which is exactly what I want. I want them to open up that new browser window and again, behind the scenes or under the hood, I can click Split View and you can really start to see what's going on and what Dreamweaver does, which is creates this href, this reference to this page and then targets the new window.

But again, it's code I didn't have to write. Dreamweaver did all of this for me and Dreamweaver does a good job of effortlessly writing all this code for me.

Show transcript

This video is part of

Image for Creating a First Web Site with Dreamweaver CS4
Creating a First Web Site with Dreamweaver CS4

32 video lessons · 51515 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Creating a First Web Site with Dreamweaver CS4.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.