For more information, please see full course syllabus of Adobe Dreamweaver CS6
For more information, please see full course syllabus of Adobe Dreamweaver CS6
Discussion
Study Guides
Download Lecture Slides
Table of Contents
Transcription
Related Books
Changing the Page Background Color
- To change the background color of the web page
- In order to change the background color of the web page, we modify the body tag
- The body tag contains all of the content the user sees when they view the page in the browser
- Modify background color to #ccc
- If a hex color contains the same colors, we can use this shorthand
- 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
Software Training: Adobe Dreamweaver CS6
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 educator.com, see you in the next lesson.0276
Start Learning Now
Our free lessons will get you started (Adobe Flash® required).
Sign up for Educator.comGet immediate access to our entire library.
Membership Overview