Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Changing the Page Background Color

  • To change the background color of the web page
    1. In order to change the background color of the web page, we modify the body tag
    2. The body tag contains all of the content the user sees when they view the page in the browser
    3. Modify background color to #ccc
    4. If a hex color contains the same colors, we can use this shorthand
    5. This represents the color #cccccc
  • The browser understands that each of these characters should be doubled in order to obtain the full hex value
  • View the page in the browser and it should have a black background on our page

Changing the Page Background Color

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Modify Background Color 1:01
    • CSS Short Hand
    • Save Command Shortcut
    • Browser Preview
  • Summary 4:03

Transcription: 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, see you in the next lesson.0276