Mac Today Magazine

Dreamweaver Tips And Tricks
By Rick Tracewell

Color Your World

With web design becoming an art form faster than HTML can keep up, it’s important to have the ability to create background and table cell colors that match graphics or other elements in your web page design. But how can you do that without a gigantic list of HTML tags and an even bigger stack of color matching sheets? Easy. Use the fancy schmancy Color Tool in Dreamweaver. Besides, it’s kind of embarrassing having to constantly explain to friends that the swatches of color on your desk doesn’t mean that you want to be an interior decorator.

Step One:

Background Colors

Bring up the dialogue box for changing the HTML page’s properties by pressing “Command+J”. Once in the dialogue box, click on the small box with a down arrow inside it next to Background. This will bring up the color selection box with a jillion little color boxes for you to choose from.

Simply move your cursor over anything visible – including graphics on the screen, dialogue buttons, backgrounds, table cells, etc. – and, using the default Eye Dropper Tool, move your cursor off of the dialogue box and click on a color that you want to match for the background color. If you’d like to choose a specific color, you can also click on the small painter’s pallette (you know, the thing that painters stick their thumbs into) in the lower right-hand corner to bring up the Apple Color Picker.

Notice how once you’ve selected your color, the HTML code (or hexadecimal equivalent for you purists) for the color (e.g., White=#FFFFFF) appears just next to the square that signifies the background color. This can be extremely handy if you later want to search and replace colors in an HTML document.

Step Two:

Matching Colors

Have you ever looked at a web site and just thought that the person who designed it was a blithering idiot? Okay, let me be more specific. Have you seen sites that look well designed but there was a color or two that was off just a bit which made the site appear amateurish? Well, sometimes that wasn’t what the designer was going for. He or she may not have tested their design with other browsers on other platforms. Of course, sometimes it was what the designer was going for and hopefully they are reading this How To right now so they can stop it immediately.

When you are attempting to match HTML colors to a GIF file for the blending of backgrounds and images, you may find color shifts when your design is viewed in different browsers, different operating systems, or even different monitor settings (monitors displaying “thousands” of colors must shift web safe colors slightly – don’t ask why because I just don’t know).

To remedy this problem, there are a few things you can try. First, try choosing a transparent color within your graphic. Sometimes, this can give an irregular pattern to your graphic making the color shift not as apparent as with a perfectly square image. Second, you can forget HTML color matching altogether and simply create a background graphic in GIF format so that the images are exactly matched and will appear the same in all browsers and monitor settings.

HTML is far from perfect. You should get in the habit of testing your site in different situations (monitor settings, operating systems, browsers and browser versions, etc.). Heck, sometimes you’ll find that even the hexadecimal color equivalents don’t appear the same from one browser or monitor to the next. If you have a unique color that you are having trouble with, you might want to test it as suggested above before you try matching to background colors or background images. It may be to your benefit to save the color in a JPEG rather than a GIF format.

Step Three:

Text Colors

Select your text and click on the square with the down arrow in the Properties dialogue box (usually at the bottom of your screen or press “Command+F3”). Once again, you can choose with the Eye Dropper Tool or the pre-selected colors in the Dreamweaver color toolbox, the color that you’d like for your text.

You can also change global text colors for your site by setting it up in the HTML’s properties dialogue box (“Command+J”, remember?). In there, you can change the colors of your text, links, visited links, and active links.

One tip is to make sure that your text colors don’t clash with the background colors on your page or table. Purple background with red text. You know who you are.

Step Four:

Web Safe Color Schemes

Developed by Bruce Heavin and Lynda Weinman, this feature gives you predefined options for your web site’s color schemes (background, text, and text links). That way you don’t end up with purple backgrounds and red text.

First, open your main page . Then choose “Set Color Scheme…” from the “Commands” pull-down menu at the top of Dreamweaver. Now, select your background color on the left and blam! you get a list of text and link colors on your right to choose from. It even gives you an example of what it will look like right there in the dialogue box.

This feature is highly recommended for engineers in charge of their own web sites who think that “anyone can be a graphic designer”.

Step Five:

Colorizing Table Cells

This is pretty simple and Dreamweaver has really done a great job in making it very intuitive. After creating a table with rows and cells, click into a table cell to select it. To select more than one cell, simply click in one, hold and drag across (or down) to select as many other cells as you’d like.

Once you’ve selected your cells, look into the Properties dialogue box underneath where the text editing tools are. You’ll see that once you’ve selected any part of a table, the bottom part of the Properties box brings up table editing tools. To your right, you’ll see two boxes with down arrows. One is named Bg (For Table or Cell Background) and one is named Brdr (for Table Border). You can choose either one to change the color of the background or border using the same Color Tool Box and Color Selecting Tool as in the previous examples.

Step Six:

Finding HTML Colors

Using the cool Eye Dropper Tool in Dreamweaver, you can actually  find colors in other applications or other web sites. Simply pull up the color you want to turn into HTML (open the application or the graphic or the web page) and move it around your desktop so that you can see it when Dreamweaver is open and active. Choose the item you want to color (text, page background, table cell, etc.) and choose the appropriate color box to launch the Color Tool. Now, use the Eye Dropper to move off of the page and onto whatever color it is you want in the other application or on the web page you selected. Click on the color and badabing-badaboom, you’ve got the color into your web page.

Note that once you click, it’ll make the application you clicked on active. You simply have to go back into Dreamweaver to get back into your web page design ~ END