Home How-To Sharing Build Your Own Web Gallery
Monday, August 25, 2008

Build Your Own Web Gallery

A step-by-step guide with screenshots for building your first website

This Article Features Photo Zoom


STEP 6e: Changing The Page Background Color

Cloning

Code with page background color changed to gray #CCCCCC.


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.

Cloning

Code with navigation aligned right.


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.

Cloning

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.

Cloning

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.

Cloning

Here's the code with the dimensions corrected. The "page" graphic looks correct now.

Cloning

One more preview in Safari to make sure everything looks good. And it does!


11 Comments

Add Comment

 
 
 

 
  • International residents, click here.
Check out our other sites:
Digital Photo Pro Outdoor Photographer HDVideoPro Golf Tips Plane & Pilot