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

Creating and linking multiple pages

From: Creating a First Web Site with Dreamweaver CS6

Video: Creating and linking multiple pages

Once you have one page for your site created and looking good, you can then start to create the other various pages. In this case, I have the homepage created known as index.html, and now I need to create the about, portfolio, and contact pages. Notice even as I click on them, they're not going anywhere, so I need to hook up this menu too. So that's my goal: hook up the menu and make those various pages. So I'm going to go into Dreamweaver. Here I am, in Dreamweaver. I can select this Spry Menu Bar, and I want to link up these different items as I select the home item right here, that specific button.

Creating and linking multiple pages

Once you have one page for your site created and looking good, you can then start to create the other various pages. In this case, I have the homepage created known as index.html, and now I need to create the about, portfolio, and contact pages. Notice even as I click on them, they're not going anywhere, so I need to hook up this menu too. So that's my goal: hook up the menu and make those various pages. So I'm going to go into Dreamweaver. Here I am, in Dreamweaver. I can select this Spry Menu Bar, and I want to link up these different items as I select the home item right here, that specific button.

The link just has a pound sign in there, so it says you know what, I know I am a link, but I don't really go anywhere. Well, I can change that. In fact, if I click that Browse button, notice that I can go ahead and select any file that I have in here. And if you have access to the Exercise Files/Chapter 05/03 Begin, that's what I'm referring to. Selecting that file, selecting Open, and it just puts it right in there. Moving on to the about page, well, you know what, an about page it doesn't exist yet. Well, that's easy enough. I can just type in here "about.html" and just keep in mind that's what I called it.

Going to the portfolio, doing the same thing, portfolio.html, contact. You got it, contact.html, just like that. All right, my menu is hooked up, and I need to start making those pages now. So I'm going to save everything, is what I like to do. And with this design set up and everything looking good, I can now go to File > Save As and save an about page. There's my about.html. Here we have it: index and about.html.

So for my about.html page I can start to customize some of this text. Right down here you can see for this About page, you know what? I can eliminate that text there. And you can see for the About page has a resume and additional content. I can remove that text as well. All right, that's my About page. In fact, I want to change some of this text. In fact, I do actually want to call this Eva Jones. And this will be about, okay, just like that.

So it says about Eva Jones. So let's click on Live view. That looks good. It looks like a great about page, and then I can save that. All right, going back to my index.html page, because this also has content for my portfolio page, so I can save this as my portfolio page, same folder, just like that. And right in here I can start to just make sure this contains the items, as I scroll down, Graphic Design and Motion Graphics. That's what I need it to say, removing that content.

In fact, right in here and in this case again Eva Jones, and in this case what I want to do, portfolio. I want to move this, taking this, I'm going to cut it, paste it on that side. That looks good, and I can insert more content in there. But overall, that looks great. I'm going to save this page, going back to my index.html. I'm going to save my final page, which is going to be my contact page, doing a Save As. It saves it to the same folder, clicking Save, right in here. Scrolling down, getting rid of all of that other content except for that Let's connect contact page information. So in this case I can say, contact Eva Jones.

All right, clicking in Live view. It looks great. I can add more in here if I want to as well. Saving this page, actually saving everything and from there, what I can do is even test it in a web browser. So here I'm testing the contact page. Well, let's click on the homepage. Yup, works great. Clicking the About page, clicking the portfolio page, and the contact page. But I want to customize this even more. I want to customize the style. In fact, I want the style to be consistent across all the pages, but I want to change the background for each page.

So what I want to do there is starting with this contact page, I can add a style. Okay, so it's actually referring to these various style sheets which are all external, but in this case if I want to customize any of the look specific to a specific page, I can add a new style just by clicking here, New CSS Rule. And I can add a new selector and even selector name. So in this case I want to change the background. That's going to be B for body.

Selecting OK and from there I can create a new background. In this case, I'm going to reference a new background image that's going to overwrite this current one. So I'm going to select Browse, and I'm going to go to my images folder. And if you do have access to these files, I'm going to go into the 03 Begin images folder. Notice right in here, since I'm dealing with the contact page, I can select that background contact that I've exported earlier from Photoshop.

So selecting Open, I can click Apply. Oh, and there it is. Looking good. I'll click OK. That looks great. But what happened? Well, let's take a look. As I look at my CSS Styles panel, I can see that body. This is what it's added. This body is actually, if I go to the code just by right-clicking, this is actually just internal to this HTML page. So it's just specific to this HTML page.

So this is basically saying, hey you know what, all that other style, just go ahead and apply it as you usually would, and anything I want to overwrite or apply specifically to this page I would just add internal to this page like I just did. So that's how that's set up. It cascades, as it's known as a Cascading Style Sheet, cascades down applies this CSS and then overwrite that original image with this one, okay. So it works out great. I like that. I can save that. I get that nice customization. In fact, let's move on to the portfolio page, right in here, with that selected, adding that new tag known as the body, and I can type in body if I want to.

Selecting OK, going to the background, then browsing to that background for that portfolio page, which is right here, background port. Selecting OK. And you can see it's changed; it has these feathers which are pretty cool. Saving this page, going into this About page, and now what I can do is again, just be mindful of what you have selected, because if I have this selected, it's going to actually add it to a CSS page. So just that style is selected.

I'm adding a new CSS rule. It's going to be a tag known as body, and again you can type it in there or select it from the dropdown. Selecting OK. Going into the Background category, this is my last one. There's my about image. Appropriate, since its Eva Jones. All right, everything looks good. Since I start to deal with these multiple pages, I get in the habit of just saving everything.

Okay, so I just save all. We can preview this in a browser. Here it is. You can see that image. It takes on all those characteristics of that stylesheet.css, so it expands and contracts accordingly. And then as I click on, say, the Home link, you can see it changes that background. All right, let's do some more, going to the portfolio page. I love this. So the style is consistent. The user is used to the nav and where all the content is being positioned, but each page has its own unique look.

So that's how you can easily create multiple pages, link them together, and even customize them for a unique style per page.

Show transcript

This video is part of

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

30 video lessons · 41826 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 CS6.

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 preferences from 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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.