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.
Change background on website
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 Dreamweaver tutorial. My name is Daniel Walter Scott and I'm a trainer here at Bring Your Own Laptop. Now in this tutorial we're gonna look at setting the background color of your website. So the first thing we need to do is we need to figure out how to add the background color, what tag to add it to, and it's the body tag. Okay? Now the body tag we've briefly discussed through um, the tutorials, but essentially what it is, the body tag is everything that the user sees on the website.
So if I look in code view, okay, I've got two main tags. I've got this body tag, you can see it starts here and it goes all the way to the end of my website. Okay? So that's my body tag. That's everything that the user sees. Now, um, there's another tag, the head tag, okay?
And this is the stuff that the user doesn't see. So this has things like my title for my website that appears in search engines. Okay? It has a link here to my CSS sheet. So this stuff doesn't get displayed to the user, but it's very important for a website and it's in the head. We are gonna look at this body tag, okay?
And this is the tag that we color to get the background color. So I'm gonna go back to design view 'cause it's my preference. Now I'm going to click anywhere on my website. I'm gonna click the body tag here down in my breadcrumbs. And over here I'm gonna create a style for this body tag. It's the exact same principle as styling your H one tag or your heading one tag that we did in an earlier um, tutorial.
So clicking on body just helps us preload this thing over here. So select body tag down here in breadcrumbs. Click the main CSS in the sources here. We're gonna ignore media at the moment, okay? In the selectors panel, we're gonna hit this little plus button. Now it's gonna try and default to our body and pick the paragraph tag as well.
So we're just gonna delete the P tag and just have the body and hit enter. Okay, I had hit it twice now. Now I'm styling this tag. Okay, called Body. Now what I wanted to do is go to the background icon, fourth one along and pick background color. Now what color do I want to pick?
I can type it in down here. Okay, if I know what the HEXA decal number is, I need to leave the hash there and type it in. If you know the RGB color, okay, you can type it in here or you can just mix around with the hue slider here and go through and pick a color and pick up. You'll see a color as the background. If you've got a specific color you want to use, okay? And it's in, say it's from one of these images here.
You can go back into color and hit this little eyedropper. This eyedropper tool will allow you to move around your document. And can you see as I move around in this top image here, you'll notice that the color gets updated in the hue, um, down here. So let's move it around. I'm gonna pick this color here, click enter, And you'll notice it matches this top color. Now there's a slight problem because I would like the background to be that color, but I'd like the actual container div to be white so it sits in the middle.
So what I'm gonna do is I'm gonna style the container diviv. So I'm gonna click inside anywhere inside my website. And you can see down in my breadcrumbs I've got the container and that was everything. Um, so we could send to the website. We can also color this box though. So watch this.
So I've got container selected in my selectors. I'm gonna go down to background and I'm gonna pick white. I'm just gonna drag it from the top right hand corner there. So I'm gonna drag all the way up to the top and choose, and I'll choose white, okay? Okay. And you'll notice that now I have a background.
It's very hard to see. Let's look at in preview mode. So I'm gonna use this little globe in the top right hand corner and I'm gonna preview in Chrome. And you'll notice here I've got a background color of that tealy blue. But my container here has the white background where I can see my type. Alright, that's the end of this tutorial.
I'll see you in the next one.
So if I look in code view, okay, I've got two main tags. I've got this body tag, you can see it starts here and it goes all the way to the end of my website. Okay? So that's my body tag. That's everything that the user sees. Now, um, there's another tag, the head tag, okay?
And this is the stuff that the user doesn't see. So this has things like my title for my website that appears in search engines. Okay? It has a link here to my CSS sheet. So this stuff doesn't get displayed to the user, but it's very important for a website and it's in the head. We are gonna look at this body tag, okay?
And this is the tag that we color to get the background color. So I'm gonna go back to design view 'cause it's my preference. Now I'm going to click anywhere on my website. I'm gonna click the body tag here down in my breadcrumbs. And over here I'm gonna create a style for this body tag. It's the exact same principle as styling your H one tag or your heading one tag that we did in an earlier um, tutorial.
So clicking on body just helps us preload this thing over here. So select body tag down here in breadcrumbs. Click the main CSS in the sources here. We're gonna ignore media at the moment, okay? In the selectors panel, we're gonna hit this little plus button. Now it's gonna try and default to our body and pick the paragraph tag as well.
So we're just gonna delete the P tag and just have the body and hit enter. Okay, I had hit it twice now. Now I'm styling this tag. Okay, called Body. Now what I wanted to do is go to the background icon, fourth one along and pick background color. Now what color do I want to pick?
I can type it in down here. Okay, if I know what the HEXA decal number is, I need to leave the hash there and type it in. If you know the RGB color, okay, you can type it in here or you can just mix around with the hue slider here and go through and pick a color and pick up. You'll see a color as the background. If you've got a specific color you want to use, okay? And it's in, say it's from one of these images here.
You can go back into color and hit this little eyedropper. This eyedropper tool will allow you to move around your document. And can you see as I move around in this top image here, you'll notice that the color gets updated in the hue, um, down here. So let's move it around. I'm gonna pick this color here, click enter, And you'll notice it matches this top color. Now there's a slight problem because I would like the background to be that color, but I'd like the actual container div to be white so it sits in the middle.
So what I'm gonna do is I'm gonna style the container diviv. So I'm gonna click inside anywhere inside my website. And you can see down in my breadcrumbs I've got the container and that was everything. Um, so we could send to the website. We can also color this box though. So watch this.
So I've got container selected in my selectors. I'm gonna go down to background and I'm gonna pick white. I'm just gonna drag it from the top right hand corner there. So I'm gonna drag all the way up to the top and choose, and I'll choose white, okay? Okay. And you'll notice that now I have a background.
It's very hard to see. Let's look at in preview mode. So I'm gonna use this little globe in the top right hand corner and I'm gonna preview in Chrome. And you'll notice here I've got a background color of that tealy blue. But my container here has the white background where I can see my type. Alright, that's the end of this tutorial.
I'll see you in the next one.
