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 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, Part 1

  • 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
    1. Select .sidebar1 in the CSS styles panel (Be sure the All button is selected)
    2. Change the float property from right to left by clicking on the word right
    3. Choose left from the dropdown menu
  • We will change the background color of the sidebar area
    1. Select .sidebar1 in the CSS styles panel
    2. Change the background color to read #FF9D00
    3. Note how the color changed in the column below the hyperlinks, but not for the hyperlinks themselves
    4. The hyperlinks have been assigned their own properties so we must change those separately
    5. Choose the ul.nav a, ul.nav a:visited rule
    6. Add background-color property to .sidebar1 class #FF9D00
  • Preview the page in the browser
  • The hyperlinks are not dark enough for our background color
  • I want to change them to black
    1. Select a:visited in the CSS styles panel
    2. This rule controls the color of hyperlinks that we have visited in that specific browser
    3. Our browser history determines if a link is visited or not
    4. Note the hyperlink text color changes to white as we hover over it
    5. This is controlled by CSS
    6. Change the color from 6E6C64 to #CCCCCC
    7. Select the a:link rule
    8. Change the color to #cccccc
    9. Preview in the browser
    10. Note the hyperlinks are black and turn white when hovered over

Modifying the Navigation Column, Part 1

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 the Side Bar 0:23
    • Tag Selection
    • Changing Position and Background Color
    • Changing Text Color
    • Changing Hover Text and Background Color
  • Summary 8:17

Transcription: Modifying the Navigation Column, Part 1

What we want to do now is continue to modify the Predefined layout page that we have set up at this point, which is in our Files panel, the index page.0000

And I just finished modifying the Header area, adding text, customizing a style, adding a title and doing a few other small things.0013

What I want to address now is this sidebar section, in another words the Navigation piece of our page, it is on the right -- because that is where our predefined layout had it set up as -- I want to place it on the left, instead.0023

The other thing I want to do is modify the colors, these are hyperlinks, so there is a few different pieces to modifying the color of the text itself and also the background color, which does not exactly coordinate with our orange up at the top of the page.0039

Let us get started, the first thing I need to do is figure out what this page is called in my CSS style rules. 0057

I am going to put my cursor inside that area, I have the Properties opened up, and so it is a little bit easier for you to see my Tag selector, which is this area right above the Properties.0068

When I select something on the page what is does is, it shows me all of the code surrounding that area.0080

The first piece of code it is my hyperlink itself, so when I click on these tags Dreamweaver shows me what that particular piece of the page is all about.0088

You can see there is a blue outline now sounding this area, so let us just keep moving to the left, the next one , I am still in the text itself, notice I do not have a background yet. 0100

I will move to the next one, OK that selected all four pieces of my text, but still not the background, so I just keep going and notice sidebar1 has selected a box surrounding all of our content in this piece. 0115

That is the rule I want to change, I want to take that entire box and move it to the left.0131

Let us find sidebar1 in our CSS style rules and I will double click files to close it up and move down just a little bit and here is my sidebar1. 0138

And notice it has a background color, a sign, which is that color we are looking at, I will click out of that now. 0152

And it also has a float property, and this float property says, Stay in the right side.0160

What I want to do is click on that, let us move it to the left, and we have an instant left Nav bar, and it really is as simple as that.0167

Now, the background color, we also want to modify, so let Us go ahead and do that and we are going to add the color of #FF9D00 and then hit Enter or Return. 0178

And you can see that change the background of my sidebar, on the page, to an orange, which looks fine, however we still have those green areas right up above it, we will deal with that in a minute.0193

But at least I have my navigation bar on the left hand side and I have it properly colored, now and you can see it shows the color down in our Properties area for that sidebar.0208

Now, let us deal with the text itself and we do something similar to that.0221

So, if I click inside that area I can select the A tag, and what the A tag is, is the hyperlink.0227

Now, if I go over to my CSS style rules, the A tag gets a LITTLE tricky, but I know that if I work my way out here, you will see there is a ul.nav with an A, so let us try that.0236

I have this ul.nav, well if I choose the first one it does not show me any colors, so let us keep moving down the line and get more specific.0253

This one just has a bottom border, so I will move down to this one and there is our background color we want to modify.0263

What I want to do is make this background color match the rest of my sidebar.0271

I will click inside that area, make sure you add the #, otherwise your color would not show up and this is going to be in FF9D00, I will hit Enter or Return, and look at that.0289

Now, the background of those hyperlinks show up the same way as we want, but now I need to modify the text, because it is a little bit light compared to the rest of the text on my page.0293

But, you can already see our page is starting to look a lot different from that initial predefined layout piece, so let Us take a look at a couple of these tags.0306

You can see when I click on the li it highlights it let us go look at that ul.nav li.0318

Well, we had just looked at it, does not have anything specific for color of the text so, I will go back to my A tag, this is the one when we have changed the background color, no other color listed. 0327

Let us go down here, to the next one, I will click on this and notice there is a background color set up for this one as well, but what I want is the text inside that area, hmm, how do I get to that?0343

Well, we are in a pretty section here, in order to modify that, what we need to do is modify this piece here, and we don t have a color listed right now. 0357

What I am going to do is click Add property and I am going to type the word Color and the color determines the text color.0370

And I will go over to the right hand side and click on it, if I click this little square it is called the color picker and when I click on that I can pick a color and I am going to make it black.0380

This is a property that hadn't been assigned it yet, we just added it and look what has happened to our text. 0393

At this point let us do a Save and put it into the browser and see where we are at.0401

I will go ahead and preview in Chrome and there is our hyperlink, but guess what?0406

When we put our cursor on it or hover on it, it turns to the white with the green once again.0412

If we stay off of it we are in pretty good shape, so how do we deal with that?0419

Well, there is another rule we need to modify and that is the one we had just looked at.0424

Here is the background color of green and the text color of white, so I am going to click in that text color and change it to black so it matches this text.0430

And our other background color, I am going to click on that and this is kind of a cool feature, if you click on it, it turns to an eyedropper. 0451 And what I want to do is just put my cursor over there, over the orange, I will click and that way I do not need to type it in.0442

Let us take a look at what happens when we have done that, so I will put it back into the browser.0460

These hover stats do not show up until you get to the browser, so you always want to be taking a look in the browser, as we build our pages.0467

You can see, now it keeps it the same color, now I could add different background color and text, but for now I am just going to keep it the same, So that Is pretty well set up. 0476

We have a little bit of space above our sidebar, but I will deal with that when I get to modifying some of the content on the page.0488

What we just did was we took an entire Navigation area, an entire column of content in our prebuilt page, we moved it from the right side to the left and we customized quite a few properties within that area.0497

That is how you can begin to move and modify the content within this prebuilt page to customize it for you and we created new style rules and we modified old style rules in order to accomplish that.0514

We will continue to build on this page, but that is how you can start working and modifying the CSS style rules for your prebuilt CSS layout pages.0531