New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Creating a First Web Site with Dreamweaver CS4
Illustration by

Linking to web pages and sites


From:

Creating a First Web Site with Dreamweaver CS4

with Paul Trani

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Creating a First Web Site with Dreamweaver CS4
2h 41m Beginner Sep 16, 2009

Viewers: in countries Watching now:

Creating a First Web Site with Dreamweaver CS4 shows the basics of doing just that—building a first web site. Adobe Certified Instructor Paul Trani walks through the important steps of creating a web site from concept to publishing, using Dreamweaver CS4. He teaches how to create basic web pages, add text and image content, use Cascading Style Sheets for design and layout, create a photo gallery, and even check the final site for browser compatibility. He also demonstrates how to create a contact form to encourage viewer feedback on the site. Exercise files accompany the course.

Topics include:
  • Exploring the Dreamweaver workspace for first-time users
  • Linking to external web pages and sites
  • Improving the presentation of text and images on the site
  • Building a layout using Cascading Style Sheets
  • Making navigation reusable across multiple pages
  • Displaying content using the Accordion widget
  • Creating a contact form and sending data from it
  • Making the final site search engine-friendly
Subjects:
Web Web Design Projects
Software:
Dreamweaver
Author:
Paul Trani

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.

Find answers to the most frequently asked questions about Creating a First Web Site with Dreamweaver CS4.


Expand all | Collapse all
please wait ...
Q: After creating the website as instructed in the tutorial, and uploading the site to the internet, the website does not seem to work for every browser. How can one make sure that the website will work for all browsers?
A: An important step when creating a website is to check for browser compatibility. To do so in Dreamweaver, go to Window > Results > Browser Compatibility. Click the Play icon in the left corner then go to Settings and target the browsers you¹re after. Then hit the Play button to run it and check the page that’s open. If there’s an issue, best-case scenario, it should show you what the issue is and link out to a solution. Worst case is that it’s a pretty unique issue, in which case further troubleshooting would be needed.

Q: The background image is tiling, instead of being one large image. How is this corrected in Dreamweaver?
A: This can be corrected by using a larger image, something around 1024x768 that will fill up most of the monitor space. The issue is that the background image is just too small. Note that tiling of the background image can be turned off in the CSS Panel, but that would only result in a single small image. So it’s better to just use a larger image for the background.
Q: When trying to import SWF content, I get a message: “This file is outside the root folder of site ‘xxxxx’ and may not be accessible when you publish the site.” What is causing this?
A: Make sure your SWF file (and all files you put on a page) are located in your local site. Basically make sure you set up a local site in the site panel. It will ask where to put your local site on your computer. Just make sure you SWF is in that folder and you won’t get that error.
 
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.
Upgrade now


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 Upgrade now

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

Notes cannot be added for locked videos.

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.