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 Educator.com

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!

Modifying the Navigation Column

  • Our home page shows a right navigation bar
  • We want the navigation bar to show on the left side of the page instead of the right
  • We will also widen the nav bar and change the background color
    1. Select .sidebar1 in the selector area of CSS
    2. Change the width property to 200px
    3. Modify the background color using the eyedropper tool to match the orange drop shadow in the words Tranquil Travel within the image Designer
    4. Change the float property from right to left by clicking on the right icon in the CSS Properties area of the CSS Designer panel
    5. Set the width back to 180 for .sidebar1 to get it back where it belongs
    6. Preview the page in the browser

Modifying the Navigation Column

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
  • Navigation Bar 0:12
    • Identifying Codes With Tag Selector
  • Modifying With CSS Designer 2:09
    • Show Set Box
    • Changing Width
  • Background Color 4:22
    • Eye Dropper Tool
  • Moving Navigation Bar 5:14
    • Float Feature
  • Preview 6:27