Publishers of technology books, eBooks, and videos for creative people

Home > Articles

  • Print
  • + Share This
This chapter is from the book

Modifying the Page Color and Background

Dreamweaver MX 2004 will display the background color of your page as plain white and the text color as black, but if you want to make sure your page actually has a white background in the browser window, you must set it as such. You can also choose a different background color, or use a background image instead. (Versions of Dreamweaver earlier than MX included default settings for text and link colors, but newer versions don't.)

Background and text colors

You can conceivably use any color as the background color. Keep in mind that you may need to change the text colors as well, so that the text will be readable ( Figure 3.40 ).

03fig40.gif

Figure 3.40 Make sure your text color is visible and readable on your background color.

To set the background and text colors

  1. Open the Page Properties dialog box by pressing Ctrl+J (Command+J).
  2. In the Text color box, type the hex code for the color you wish to use.

    or

    Click on the Text Color Picker button colorbut.gif. The Color picker will appear ( Figure 3.41 ). Click on a color with the eyedropper to select it; the color can be any color in the picker or on your desktop ( Figure 3.42 ).

    03fig41.gif

    Figure 3.41 The Color picker opens when you click on any Color Picker button within a dialog box or on the Property inspector.

    03fig42.jpg

    Figure 3.42 Here, I'm selecting a color from my photo graph to serve as the text color. Any color I click on with the eyedropper, anywhere on my desktop, will be converted into the proper code and used as your color choice.

    The other color options are described later in this chapter, in the section Colors and Web Pages.

  3. Repeat Step 2 for the Background color and the Link colors (under the Links category), if you wish.
  4. In any case, when the code for each color appears in its text box, click on Apply to preview the color on your page; or click on OK to apply the colors and close the dialog box. The newly chosen colors are reflected on your page ( Figure 3.43 ).
    03fig43.jpg

    Figure 3.43 Here's my page, with a text color chosen from the photograph on it.

Setting a background image

Most graphical browsers support background images. A background image can consist of one large image, but more frequently, it's a smaller image that the browser window tiles so that it repeats in a contiguous pattern across and down the browser window ( Figure 3.44 ).

03fig44.jpg

Figure 3.44 A tiled background image. The tiny image repeats from left to right and then down the page. Keep in mind that this is a demo illustration—you wouldn't be able to read text set over a background image with this much contrast and with such a figurative figure. See Figure 3.46.

03fig46.gif

Figure 3.46 Here, I've added a subtle background image to my page. I've also added a different background color to the central table cell so it uses a solid background color, to ensure readability. See Chapter 12 to add background colors to tables or table cells.

To set a background image

  1. Open the Page Properties dialog box by selecting Modify > Page Properties from the Document window menu bar.
  2. Click the Browse button next to the Background Image field. The Select Image Source dialog box will appear ( Figure 3.45 ). This is similar to the Open dialog box.
  3. Browse through the files and folders on your computer until you find the GIF or JPEG image that you want to use. Click on the file icon so that the image's pathname appears in the URL text box.
  4. Click Select (Choose) to close this dialog box and return to the Page Properties dialog box, where the image pathname appears in the Background image text box.
  5. Click OK to close the Page Properties dialog box and return to the Document window, where your background image will appear ( Figure 3.46 ).
  • + Share This
  • 🔖 Save To Your Account