This chapter is from the book
This chapter is from the book
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 ).
)
Figure 3.40 Make sure your text color is visible and readable on your background color.
To set the background and text colors
- Open the Page Properties dialog box by pressing Ctrl+J (Command+J).
- In the Text color box, type the hex code for the color you wish to use.
or
Click on the Text Color Picker button
. 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
).
Figure 3.41 The Color picker opens when you click on any Color Picker button within a dialog box or on the Property inspector.
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.
- Repeat Step 2 for the Background color and the Link colors (under the Links category), if you wish.
- 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
).
Figure 3.43 Here's my page, with a text color chosen from the photograph on it.
)
)
)
)
Converting Other Color Numbers into Hex
Colors in HTML are signified by a six-digit code called a hex code. This name doesn't derive from the fact that it's a six-digit number, but from hexadecimal, which means a number system with a base of 16 rather than ten. The other "digits" in the hex system are the letters A–F, which gives us sequences such as 99FFCC.
Colors are also definable by a three-number sequence of hue, saturation, and brightness, or by another three-number sequence: the red-green-blue, or RGB, ratio. There are boxes for these numbers in the Color dialog box (see Figures 3.65 and 3.73).
)
Figure 3.65 The Color dialog box. (1) Select a predefined color, or select an empty Custom Colors box. (2) Select a hue and (3) a shade. (4) Click on the Color|Solid box and (5) click on Add to Custom Colors. (6) Click on the color if it isn't selected, and then click OK.
)
Figure 3.73 The CMYK (Cyan, Magenta, Yellow, and Black) picker resembles the RGB picker; both are Mac color tools. Printers' inks use these four colors.
You can get the RGB sequence of a particular color from an image editor, like Photoshop or Paint Shop Pro, and then duplicate the color by typing the correct numbers into the right boxes in the Color dialog box. Then, of course, you should jot down that hex code for further reference. (You can copy RGB numbers into an image editor, too, if you have reason to duplicate a background color in an image.)
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 ).
)
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.
)
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
- Open the Page Properties dialog box by selecting Modify > Page Properties from the Document window menu bar.
- 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.
- 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.
- 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.
- Click OK to close the Page Properties dialog box and return to the Document window, where your background image will appear ( Figure 3.46 ).
){kind=link}