SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
🚨 Heads up! This course is no longer supported. We recommend checking out our Webflow Essentials course.
Connect CSS to all HTML pages
SECTION: 1
Overview
3:20:28
6:21
5:25
5:50
3:13
12:46
Questions
Student Gallery
Be the first to share something.
Course info
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
Founder of Bring Your Own Laptop & Chief 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.
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.
