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 CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • 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

  • We will change the background color of the web page
  • We also need to correct the page so the lower area of the page matches the width of the header area
  • We will start by toning down the blue color in the footer area so it better matches the header
  • Select the footer in the Selectors panel, and use the eyedropper tool for the background color and choose a color in the middle of the header image to better match the header and footer colors
  • We also modify the width of the lower portion of the web page
  • We need to modify the .container class and change the width to 1000px
  • In order to change the background color of the web page, we modify the body tag
    1. The body tag contains all of the content the user sees when they view the page in the browser
    2. Select the body tag in the Selectors area and change the background color to match the upper color of the gradient in our header area
  • We also want to add a border surrounding the entire content on the page
    1. Select the .container class and add the following:
    2. border color: #6666666
    3. border-width: think
    4. border-style: solid
  • Select the body tag and change the background-color to #C0C3C8
  • Preview the page in the browser

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
    • Modifying Footer
    • Matching Color With Header Background
  • Matching Content and Header Width 3:07
    • Identifying Content Tags
    • Resizing Content Area
    • Resizing .container Properties
  • Body Background Color 6:06
  • Adding a Border 7:18
    • Locating Tag Selectors
    • Show Set
  • Selecting Border 8:22
    • Color
    • Width
    • Style