- Creating New Files
- Getting a Head Start
- Turning off the New Document Dialog Box
- Opening Files
- Creating Content
- Page Properties
- Modifying the Page Color and Background
- Saving Your Work
- Saving a Copy of a File
- Previewing in a Browser
- Printing from the Browser Window
- Colors and Web Pages
- Colors and Windows
- Colors for the Mac
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 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. (Previous versions of Dreamweaver always included default settings for text and link colors, but Dreamweaver MX does not.)
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 show up readably (Figure 3.36).
)
Figure 3.36 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 Background text box, type the hex code for the color you wish to use.
Or
Click on the Background color box. The color picker will appear (Figure 3.37). 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.38). The other color options are described later in this chapter, in the section Colors and Web Pages.
Figure 3.37 The color picker opens when you click on any color button
within a dialog box or on the Property inspector.
Figure 3.38 Here, I'm selecting a color from my photograph to serve
as the background color. Any color I click on with the eyedropper, anywhere on
my desktop, can serve as a color choice.Repeat step 2 for the Text color and the Link colors, 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 (Figure 3.39).
Figure 3.39 Here's my page, with a background color chosen from the
photograph on it. I've also changed the link colors.
)
Figure 3.37)
Figure 3.38)
Figure 3.39Tips
More details about how link colors work are available in Chapter 6.
You can find out how to make selected text a different color in Chapters 8 and 11.
Setting a background image
Most browsers created after Netscape Navigator 2 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.40).
)
Figure 3.40 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—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.42.
TIP
Take care when using background images. You may have seen pages where the background took primacy over the content, rendering the text unreadable and the other images gratuitous. You may even have thought these looked cool, but I doubt you read them for long. Be subtle, or use table backgrounds to provide blank space for your text (see Chapter 12).
Converting Other Color Numbers into Hex
Colors in HTML are signified by a six-digit code called a hex code. Colors are also definable by a three-number sequence of hue, saturation, and value, 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 Figure 3.43 and 3.63).
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.)
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 (Choose) button next to the Background Image field. The Select Image Source dialog box will appear (Figure 3.41). This is similar to the Open dialog box.
Figure 3.41 The Select Image Source dialog box, like an Open dialog box,
lets you browse through your computer's files to select an image. The Image
Preview at the right displays the image's dimensions, file size, and
download time. Click on Show Preview to view it or Hide Preview to hide it. This
is the Mac version; the Windows view was shown in Figure 3.27. 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 path-name appears in the URL text box.
Click Select (Open) 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.42).
Figure 3.42 Here, I've added a subtle background image to my page.
I've also modified the central table cell so it uses a solid background
color, to ensure readability. See Chapter 12 for details.
)
Figure 3.41)
Figure 3.42){kind=link}
){kind=link}
){kind=link}
TIP
You can set both a background image and a background color. The image will override the color in most cases, and the color will show up in browsers that support background colors but not background images.
To find out about tracing images, see Chapter 14. To find out about setting backgrounds for tables, see Chapter 12.