Adobe Dreamweaver CS6 Changing the Page Background Color

What we are going to do now, is we are actually going to set up the final piece of this page using our Predefined CSS layouts page.0000

we have a colored background that does not exactly coordinate with our content right now, and if we put it in the browser, you will see what I am talking about.0012

I will put it into Firefox, and we will take a look and if I open this up all the way, you can see this background color is not really great.0022

Now, I might still want to modify this little area under the photo, but let us address the background color on the page.0033

This little area here is really a personal thing, but let us deal with the big stuff, which is how do I modify the background color of a webpage.0042

This is a webpage that stays centered in the browser, which is a nice feature, we did not have to create that, it came as a part of our layout, but how do we modify that background color?0053

Well, if I click on my page, the very first tag on the page, the Body tag represents all of the content on my page, so if I click on that you can see everything on the page has been selected.0065

So, because of that, the Body tag is the tag that we want to assign a color too.0082

Let me look at the Body tag, here and it is the very first tag in the styles panel and if you notice, it is that same color.0089

What I am going to do on this is I am going to click on the right hand side and I am going to use, what is called, CSS shorthand.0099

I am going to type #CCC and you will see it turned to a light grey, let us take a look at that in the browser.0108

What CSS shorthand is it represents all 6 characters of a hex value, but if all six characters are the same, then you can only put three in instead of all six.0121

Now, this is not my favorite color for this page, but I wanted you to see that we can use these shorthand colors, and you can see the text color has the shorthand color aside.0136

Instead of putting in all six colors, like we did with our header, because this one has repetitive characters in it, we can just set it up in the shorthand piece, now, what color should we make?0149

Well, let us make it black, so I will click in the color CEP and just make it black and let us see how it looks as black.0165

I will save my page and you can save it using the Save command, now I saved it using control-S or command-S and I know I have already saved it, because you can see the Save command is in grey.0174

So, let us put this in the browser, I will preview it in Chrome and I think that looks much better.0191

I will leave it to you to determine the background color that you want on the page, but I think our page is in pretty good shape.0199

There are maybe some little customizations we can tackle, such as the border for these links, maybe make that black or different color or remove the border, we might want to customize this area just a little bit, but a lot of that is personal preference.0207

The basic layout of our page is working just fine, we are all set, and let me just double check my Header area, it seems to be just a little bit big.0224

And that is something I may want to modify as well, but that is our Predefined CSS layout page customized just for us.0239

You can see everything is all set up for you, the styles are created, and it is just a matter of learning what those styles are within that layout area and modifying them or adding new ones as you need.0252

So, that is modifying a CSS layout, a Predefined CSS layout within Dreamweaver.0267

Thank you for watching educator.com, see you in the next lesson.0276