Monday, August 25, 2008
Build Your Own Web Gallery
A step-by-step guide with screenshots for building your first website
STEP 6e: Changing The Page Background Color
Next I decided to change the page's background color to gray. So I added the attribute style="background-color" to the <body> tag (line 33). This is the first thing we've manually added to the body tag, but Dreamweaver has added some preloaded commands for our image rollovers.
In the Design View, you see that our background is now gray, but so is our content table. That's because we never specified our table's background color, so it goes along the <body> tag, which supersedes it. So, we need to change our table background color to white.
Here's the code with the background color style added to the table on line 34. Note that once you start a style attribute, you don't create new style declarations within the same tag; instead you add to the current style declaration, separating them with semicolons. Look at this code on line 34 carefully and be sure you understand the syntax.
Let's view our progress in Safari. With the gray page background and white content table, it's really looking sharp now! But I don't like the size of the "page" label in the navigation. It's too big. So what to do? I went back to Photoshop and made it smaller.
When I saved the resized file in Photoshop, Dreamweaver caught this and highlighted the code. You can see in the Design View that the page graphic looks squashed. So I changed the width and height attributes in the <img> tag on line 53 to the new dimensions.
Here's the code with the dimensions corrected. The "page" graphic looks correct now.
One more preview in Safari to make sure everything looks good. And it does!
Page 18 of 19