Connect CSS to all HTML pages

Questions

Course info

34 lessons / 3 hours

Overview

Dreamweaver (and web design in general) is such a hard program to teach yourself. We know, because as Dreamweaver trainers we have all taught ourselves. We wish we had a resource like this when we were learning.

Hand coding a website from scratch is now a thing of the past. Web designers use tools like Dreamweaver to a lot of the heavy lifting. We imagine this is your first website build and we're glad we're here to help make this process a little less troublesome. 

Who should use this?

Anyone that is brand new to Dreamweaver and anyone brand new to web design in general. If you're reasonably experienced in web design you might find this course a little slow going.

What do you need?

  • You'll need a laptop (Mac or PC)
  • Dreamweaver CC installed. Dreamweaver can be downloaded from theAdobe website here.

Can I use this tutorial with Adobe Dreamweaver CS4, CS5 or CS6?

No. Unfortunately there were some fundamental changes in the Dreamweaver CC update that makes CC and previous versions very different.

Remember you can download Dreamweaver CC free for 30 days. Don't worry - after your free trial has expired your files will still be updatable using any other web design program.

If you like the tutorials we'd love you to like, share and tweet it. We'd be very grateful.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hi, and welcome to this Dream Mover tutorial. My name is Daniel Walter Scott  and I'm a trainer here at Bring Your Own Laptop. And what we're gonna do in this tutorial is we're gonna  address the problem of, um, we've got our homepage  and we'll preview it in a browser  and I'll show you one of the problems you may have  encountered is I've got my homepage and it's looking good,  but if I go to that contact page  or the About Us page, you can see it's kind  of this old style, okay? And has none of the div tag structure  and none of the styles part of it. So to get around that, we're gonna cheat a little bit, okay? What we're going to do is, um,  'cause the only thing unique about those pages  with the text, um, the actual structure  and all the styles actually we spend quite a bit of time on,  but copy and pasting that text was quite quick.

So what we're gonna do is do a File Savers. So I'm gonna do File Savers save over the top  of my Contact Us page there. So I'm gonna give you the exact same name  and this is gonna replace it forever. So when you do do this, make sure that um,  you're not destroying anything, uh,  that you don't have another copy of somewhere else. But I have this text in another, um, word file  so I can use that text again. So let's save over the top.

It's gonna say Replace, I say Yes. Okay, now, now we're looking at the contact dust page. Now it looks exactly the same as my homepage,  so I'm gonna go through, I should go through now and copy  and paste the text back in. But to cheat, I'm just gonna come in here  and add, uh, contact us. Contact us, just so we know we're on a different page. Um, and I should go  and bring all the texts back in, but I'm not going to.

So I've got my index page here, my homepage,  I've got this Contact Us page,  which I've added all my lovely, lovely  contact last details. Okay? So I'll paste that in, format it up  and use any class styles that I want to,  to get it, um, looking nice. But the next thing I need to do is when I'm using an old  page is I need to make sure that I go through  and change the document title. Now, when I started these tutorials in an earlier version  of Dreamweaver, the title used  to be up here in this gray bar, just  above the image vintage campers. Okay?

In this version 14.2. So 2014 0.2, they've moved it down here, okay? Um, so you gotta make sure that, um,  every document title okay, needs  to be unique for every page. So my homepage was called Vintage Camper Rental Sydney. Okay? This one's going to be called Vintage Camper  Contact Us Page.

Alright, we're gonna go through  and do this exact same thing for the About Us page. So I'm gonna do a save as of this  and I'm gonna make this my About Us page. Okay? I'm gonna replace it  and this one now is gonna be called About Us. Okay? And this is all How about Us  details, okay?

So I'd go through now and place my text  and put any images I need to into this page. So I've got three pages, my index, my Contact Us,  and My About Us  because they use the same physical names as we did before. Our navigations should still work. So let's give that a go. Oh, one thing I forgot to do is the About Us Page needs its  own unique document titles. Remember in earlier versions it's up top in the gray bar  and here it's down the bottom.

So this is the Vintage Camper about Us. Great. So I'm gonna save it, file save,  and I'm gonna preview in a browser  and we're gonna see if these pages  all at least look similar. So we've got a homepage about Us page  and we've got a contact us page. Great. Alright, uh, that's it for this tutorial.

I'll see you in the next one.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025