View comments | RSS feed

Add color to the page

Now you'll add more color to the page by setting colors for some of the table cells and for the background of the page.

  1. Click once inside the first cell of the three-columned table.
  2. Click the <td> tag (cell tag) in the tag selector to select the cell.



  3. In the Property inspector (Window > Properties), click once inside the Background Color text box.

    The text box is located directly next to the Background Color (Bg) color box.

    NOTE

     

    If you cannot see the Background Color text box, click the expander arrow in the lower-right corner of the Property inspector.
  4. In the Background Color text box, enter the hexadecimal value #993300 and press Enter (Windows) or Return (Macintosh).



    The color of the table cell turns to reddish-brown.

  5. Click once inside the second cell of the three-columned table.
  6. Click the <td> tag (cell tag) in the tag selector to select the cell.
  7. In the Property inspector, click once inside the Background Color text box, enter the hexadecimal value #F7EEDF, and press Enter (Windows) or Return (Macintosh).

    The color of the table cell turns to light tan.

  8. Repeat steps 5 through 7 to change the color of the third table cell to light tan as well.
  9. After you have all three cell colors set, click once outside the table to deselect it.

Next you'll change the background color for the entire page by modifying page properties. The Page Properties dialog box lets you set a number of page properties, including the size and color of page fonts, the colors of visited links, page margins, and much more.

  1. Select Modify > Page Properties.
  2. In the Appearance category of the Page Properties dialog box, click the Background Color color box and select black (#000000) from the color picker.



    ABOUT...

     

    Picking colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). A web-safe color is one that appears the same in Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when using 256-color mode. There are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a web-safe color.

    You can select colors in Dreamweaver by entering hexadecimal values in the appropriate text boxes, or by selecting a color from the color picker. The color picker uses the 216-color web-safe palette; selecting a color from this palette displays the color's hexadecimal value. To use the color picker, click on the color box and use the eyedropper to select a color.

    You can also use the color picker to match colors. For example, if an image on your page contains a certain shade of blue and you want the background color of a table cell to match it, you can select the table cell, click on the color box to open the color picker, move the eyedropper over the blue in the image, and click the mouse button. The color picker fills the selected area with the closest match possible to the color you clicked with the eyedropper. If you select colors by this method, however, the color that the color picker chooses for you may not be a web-safe color.
  3. Click OK.

    Your page background turns to black.



  4. Save your work.

Your page layout is now complete. The layout contains a number of tables that can hold assets such as images, text, and Flash Video (FLV) files. In the next tutorial, Tutorial: Adding Content to Pages you'll learn how to add assets to the page using the various insertion features that Dreamweaver provides.

Comments


No screen name said on Sep 16, 2005 at 5:00 AM :
I follow all instructions as written in tutorial, but background color has not been changed. So, is there something missing?
jonmichael said on Sep 16, 2005 at 4:51 PM :
It's possible that you are experiencing a browser issue. Try previewing the page in different or newer browsers to see if you get the correct results.

Also, if this problem is occurring in the Document window itself, be sure that you are clicking the OK or Apply button in the Page Properties dialog box, and not simply closing the dialog box after making your selection.
sea_witch47 said on Oct 8, 2005 at 5:07 PM :
I've followed the instructions for adding a image placeholder and also for adding color to the page.. The image placeholder comes out grey and the background color doesn't change when I click either apply or enter on the page properties. I've tried it several times by restarting the whole page again and did it after rebooting... I've just downloaded the trial version.
Timothy Tellez said on Oct 10, 2005 at 8:27 PM :
I did the same thing in regards to the background color not changing. I
discovered that I had previously put the hex color # in the wrong box (Bg url
of cell) then deleted the number and put it in the Bg (background color) box.
However, I left a blank space (no text or number) in the Bg url of cell box.
My colors would not change until I got rid of the blank space in the other Bg
url of cell box. Maybe you did the same thing I did. Hope it helps.
No screen name said on Oct 17, 2005 at 7:39 PM :
I have gone through this tutorial twice, and both times after coloring the selected cells, the bottom two tables are smaller in width than the upper tables. Thank you.
No screen name said on Dec 14, 2005 at 4:32 PM :
I cannot get the background color to display. And yes, I saw the top table get bigger (to 706 pixels) making it a different size from the other tables. I deleted the index.html file and started over and the size thing didn't happen the second time. But the background color still doesn't show. What's up Macromedia guys?? No comment since September???
jonmichael said on Dec 15, 2005 at 4:20 PM :
See the note from Mr. Tellez above. There are many ways to do this procedure incorrectly, i.e., miss the # sign, put extra spaces in mistakenly, enter the value in the wrong box. Be sure you are following each step precisely and working with the correct field in the Property inspector.

I am not sure why tables would be resizing if you're not touching them. You may have inadvertently entered an incorrect value in the width fields when working in the Property inspector. Be sure the table column widths set in the Property inspector are indeed the correct widths (indicated on previous pages of this tutorial).
gregorya66 said on Jan 12, 2006 at 9:33 PM :
When creating the index.html page for Cafe Townsend, I noticed that the cell tag in the first cell of the three-columned table (second table) is <th> NOT <td> as it says in the instructions. I thought maybe I made a mistake, so, I went back through the steps again and found that the cell tag is still <th> not <td>. Is there a reason for this? Am I the only one whose gotten this result? If so, what am I doing wrong?
No screen name said on Jan 30, 2006 at 2:29 PM :
about the size of the tables, make sure that padding is zero!
lavander said on Mar 2, 2006 at 1:27 AM :
If the last 2 tables are smaller, it is because you are in the Layout mode. If you revert to standard mode, the are the same length.

Daniel wizziz wizziz
jeffreydenton said on Mar 4, 2006 at 8:02 AM :
when i add the color b/g of black, your diagram shows the black stopping
after the last table. My black goes all the way down the page. Am i missing
something?
tamaraken said on Apr 1, 2006 at 6:06 AM :
When I change the background on the page properties, it changes doesn't only change the color on the tables like the tutorial shows, it changes outside of the tables as well. Is it supposed to? The picture on the tutorial only shows that the color changes black within the tables that are set up.
BreadSlicer said on Apr 4, 2006 at 2:35 PM :
Addendum:

Although DW didn't display the colors as they were being edited (as the tutorial shows) closing the index.htm file and reopening it seemed to corrected the issue.

Is there some way to force a refresh as I certainly hope NOT to be doing this as I create pages in the future...
No screen name said on Sep 7, 2006 at 3:45 PM :
You're not listening! The color number you have entered in this tutorial must be incorrect. When I put the number you gave me into the second column of the middle table,the column remained white, just as experienced by other commentors. When I used the color box to turn the cell "light tan," it worked.

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/dreamweaver/8/using/gs_04_p7.htm