Adobe® GoLive® CS includes a brand new Swatches palette that is similar to the Swatches palettes you're already familiar with in Adobe® Photoshop®, Adobe® Illustrator®, and Adobe® InDesign®. This means it's that much easier to learn GoLive and work with color in familiar ways. The Swatches palette should be open by default but if you can't find it or accidentally closed it, just open it from the Window menu.

The Swatches palette in GoLive works like other Adobe applications.

To change between different swatch sets use the palette menu in the upper right corner and select the one you want to use. The VisiBone swatch layouts are some of our favorites. To create a new swatch, mix a new color in the Color palette and click the New Swatch icon at the bottom of the Swatches palette.

If you use other Adobe applications you might prefer the list view for your swatches so you can see a color swatch and a text description of the swatch. The good news is that GoLive CS offers you this same familiar way to manage your swatches for Web design. Just use the Swatches palette menu and select Small List instead of Small Thumbnail.

The Color palette in GoLive also works like other Adobe applications and includes color pickers for grayscale, RGB, CMYK, HSB, and HSV. Switch between the different color pickers by clicking the icons at the top of the Color palette or choose from the flyout menu. Select a color field in any palette or toolbar and mix the color in the Color palette to see the changes in real time.

Use the Color palette to create swatches and mix new colors.

Sharing swatches with Photoshop

Not only does GoLive CS have a new Swatches palette, but it also uses the same swatches file format as Adobe Photoshop. This means it's easy to create graphics and swatches in Photoshop and then share those swatches with GoLive to ensure consistency throughout your workflow. Just create the swatches in Photoshop, save them with the Save Swatches command in the Photoshop Swatches palette menu, and then place the .aco file in the GoLive/Settings/Color Swatches folder. The next time you launch GoLive your new swatches will be available in the Swatches palette.

Note that GoLive can only import RGB, CYMK and grayscale swatches. Other color values such as Lab and HSB are reset to default values.

Searching swatches

Searching for specific values or names of swatches is easy in GoLive CS. Just turn on the Show Search Fields option in the Swatches palette menu and color value and color name fields will appear at the top of the Swatches palette. Now to locate a specific color within your active swatches, just entire a search value and hit return. Note that this handy features works in both thumbnail and list view.

Using the eyedropper tool

The eyedropper tool in the Color palette allows you to quickly sample color from anywhere on your monitor. It even works in other windows and other applications that might be open in the background. For example, the eyedropper allows you to match the color of text selected in your Web page with a color in an open Photoshop document or Illustrator logo.

Select the eyedropper tool in the Color palette and place your cursor over the color you want to sample. When you see a preview of the sampled color in the top-left corner of the Color palette, click to sample the color to apply it to your selection.

Use the eyedropper to sample color anywhere on your screen.

Removing color

We've shown you several ways to manage and apply color, but what about removing color? Select the text or color field you want to change and click the remove color icon (empty white box with a red line through it) on the left edge of the Color palette. You can achieve the same result by selecting the Type > Remove Color command for selected text.

Using color shortcut menus

Normally, you apply a color to something by selecting the object, selecting the color field that corresponds to the selected object, and then picking a swatch from the Swatches palette or mixing a color in the Color palette. This works fine, but you might have noticed that there's a small black triangle in the bottom right corner of every color field throughout GoLive. When you click and hold on the black corner triangles you get access to a convenient popup swatch picker where you can make instant color changes (Figure 58a). You can also Right-click (Mac) or Control-click (Windows) anywhere in the color field to open the swatch shortcut menus.

You can customize the swatch set that is available in the color fields.

That's handy, but what makes these hidden menus really powerful is that you can choose which set of swatches is shown when you open it. You can select any of the installed color swatches, including the popular Visibone swatches, from the bottom of the pull-down menu.

You can customize the swatch set that is available in the color fields.

Color fields exist in many different parts of GoLive including the toolbar, the CSS Editor, the Highlight palette, and several Inspectors. This means there are lots of places to put this trick to good use.

You spend precious time creating pages in Adobe® GoLive® that look good and navigate properly. To that end it behooves you to make certain that your pages are free from errors and that they use valid syntax, which will ensure that they behave as expected in a Web browser.

Using GoLive's built-in Syntax Checker, you can see if your pages are compliant with a particular DTD (Document Type Definition) or whether or not your code is well-formed, meaning all tag pairs are complete, etc.

To use the Syntax Checker choose Edit > Check Syntax, or click the Check Syntax button in the Highlight palette, control-click (right-click on Windows) on a page in the Files tab of the Site window and choose Check Syntax, or click the Check Syntax button in the Source tab of the HTML file window (shown below).

Once invoked, a modal dialog will open. In the “Comply With” portion in the upper left, choose one or more DTD's to check against by enabling the checkbox next to them. Alternatively, you could check for well-formedness only.

The “Additionally Allowed” portion in the lower left lets GoLive-specific tags and attributes go through the checker without being flagged. If you intend to strip out the GoLive specific code while uploading, then enable these checkboxes.

Choose the DTD to check against and whether or not to allow additional elements.

By default the Warnings and Errors checkboxes in the upper right are enabled. For the best results leave them on. When you're done making your selections, click OK. The syntax checker proceeds and a list of results is shown. If errors or warnings are found, the problems are highlighted on the page, and the Highlight palette automatically opens.

After running the Syntax Checker a results list is shown.

Double-clicking on a warning or error in the results list causes the page to pop forward with the problem area in view, ready for you to fix. Using the Outline Editor is the easiest way to fix errors since it not only highlights the errors on the page, but it also gives a brief description of the problem. If a required attribute of a tag is missing, the Outline editor even puts a bullet next to it in the tag's attributes list, making it a snap to fix.

The Outline editor is the best choice for fixing syntax errors.

You can run the Syntax Checker on a single open page, on selected pages in the Site window, or on the entire site if the Site window is in focus with no pages selected.

Tip: Want to use the same settings you used last time you checked syntax? Hold Shift when you click the Check Syntax icon in the Highlight palette to bypass the modal dialog and use your previous settings.