Begin Modifying the CSS for Your Website
In this assignment you'll begin converting your Personal Website Design Sketch to an actual website by identifying the real colors for the page elements of your website, and modifying some of the CSS styles.
As we all know from the 64 color box of crayons, blue comes in many colors. The same is true of green, red, gray, etc. The web is no different. It isn't enough to know you want a "blue" background color. You need to know which shade of blue.
And, to make matters even more fun, you need to convert that shade of blue to the six character code we call a Hexadecimal Value. The hexadecimal value, or hex code, has a combination of the numbers 0-9 and the letters A-F. It is always preceded by the number sign (#). Here's an example: Pure red is #FF0000.
A great resource for us is Head First HTML, especially Chapters 8 & 9. Use these as a resource.
IMPORTANT: If you still have your CSS link code "commented out" in your Template, now is the time to uncomment it. (Look for the code on or around line 8 of the HTML code. You'll need to remove the "<!--" just before the code that reads "<link rel=..." and the "-->" just after that code. you know you did it right if your CSS presentation shows up again in your HTML files. Save the Template, say yes to updating the pages based on the Template, and then take up the following task.
Your Task
- Identify the hex codes for the various colors you have on your design sketch. Remember Williams & Tollett's point about "contrast" as you think of your color palette.
- Visit Web Monkey's color charts for some help.
- If you want some help choosing good colors that go together, check out the Well Styled Color Scheme Designer.
- You'll need codes for each of the following aspects of your website's CSS:
- Background Colors for the Body, Container, Branding, MainNav, Content, and SiteInfo.
- Font Colors for your Branding Text, Content Text, MainNav Text, SiteInfo Text, and Links.
- Open your Template (or any page in your personal website, really). Using the CSS Pane in the upper right corner of the Dreamweaver interface, apply your hex codes to the Background of the following:
- #body
- #container
- #branding
- #mainnav
- #content
- #siteinfo
- Still using the CSS Pane in the upper right corner of the Dreamweaver interface, apply your hex codes to the font (Type) color of the following:
- h1
- h2
- h3
- p
- Save your Template or page. Using the Files Pane (bottom right portion of the Dreamweaver interface), find and highlight your CSS file. Hit the blue PUT arrow to upload your CSS file to your web server space. Check your website. You SHOULD see the design changes reflected on every page in your website.
Use the Screencasts for Cascading Stylesheets found in the Web Development & Dreamweaver area of the Screencast Resources site for some help.
Don't like the look? Restyle!
Dr. Reid | Produce | Wikiwiki | Escher
| Cloisonne | The
Blues | Negative | Skinless