| CSS Layers are objects that are defined using Cascading Style Sheets. (We discuss Cascading Style Sheets in the "Cascading Style Sheets" section of Chapter 8, "Working with Style.") As explained in the sidebar below, the tables that are generated to hold sliced images add unnecessary code and are cumbersome to work with. Fortunately, you can export images so that they are inside CSS Layers. Each CSS Layer can then be positioned easily within the web layout. Behind the Scenes: CSS Layers vs. Slice Tables For years, the only way to position text or images side by side in web pages was to arrange the information in an HTML table (which usually meant having to create the code for that table). But tables were never meant to hold anything but tabular data. So when web designers started using slices in tables, it caused all sorts of problems. Tables for slices are complicated and add too much code to the web page. Once you have created a table for slices, it is very difficult to change the position of one element within the table. The entire table has to be recreated. With the development of Cascading Style Sheets, another type of element was available for web designers. CSS Layers are objects that can be positioned numerically on the page without any need for table code. (Dreamweaver calls these objects Draw Layers.) A good way to understand CSS Layers is to think of the frames in InDesign that contain text and graphics. These frames can be positioned on the page by specifying their position in the Control palette, or they can simply be dragged to any position on the page. CSS Layers are implemented using a DIV element a tag that defines clear divisions in a document. The DIV element uses a CSS ID style that specifies the width, visibility, and position of the layer. So which one should you use, CSS Layers or slices? Slice tables are easier to create, by exporting directly out of Photoshop, ImageReady, and Illustrator. CSS Layers require understanding how to create the CSS definitions for each of the elements. But the flexibility and convenience of CSS Layers is worth the effort of learning how to use them. A complete tutorial on CSS Layers and CSS definitions is way beyond the scope of this book. If you would like to learn more about the subject, we recommend "Adobe GoLive CS2 Tips and Tricks" by Adam Pratt and Lynn Grillo or "Adobe GoLive CS2 Classroom in a Book" by Adobe Creative Team. |
CSS Layers from Sliced Artwork Photoshop, ImageReady, and Illustrator all allow you to export slices as CSS Layers using the Slices section of the Output Settings dialog box. Create the slices in the image as described in the previous section, "Slicing and Dicing Images." Then follow these steps to create CSS Layers from slices. In Photoshop or Illustrator, open the Save For Web dialog box, and set the options for the slices. In ImageReady, use the Optimization palette to set the options. In Photoshop or Illustrator, click the Save button to open the Save Optimized As dialog box. In ImageReady, choose File > Save Optimized As. In the Save Optimized As dialog box, choose HTML And Images from the Format list. This ensures that you have the code necessary to create the CSS Layers as well as the images. Choose Other from the Setting list. This opens the Output Settings dialog box. Set the Slice Output button to Generate CSS, as shown in Figure 17-9. Leave the Referenced list as By ID. This positions each slice using styles that are referenced by a unique ID. Click OK to return to the Save Optimized As dialog box. Figure 17-9. Generate CSS controls in the Output Settings dialog box.  Use the Slices list to choose which slices should be converted to CSS Layers. We prefer the option for All User Slices. This limits the CSS Layers to only the areas inside the image that we officially designated with a slice boundary. This avoids creating extra CSS Layers that contain blank images. Click Save. The images and HTML code that defines the CSS Layers are created.
CSS Layers from Illustrator Layers Illustrator has an additional feature for creating CSS Layers. You can convert the artwork on each Illustrator layer into a CSS Layer. You arrange your artwork by placing the elements you want on each CSS Layer onto their own Illustrator layer. In the Save For Web dialog box, set the optimization settings as desired. Then click the Layers tab and select Export As CSS Layers (Figure 17-10). Figure 17-10. Layers tab in the Save For Web dialog box in Illustrator. 
The layers for the artwork automatically appear in the Layer list. You can choose each layer and then set the export options for that layer. For instance, if you don't want a layer to export, you would choose that layer and then click the Do Not Export option. We had high hopes for this feature. Unfortunately, we discovered three unexpected results when exporting the CSS Layers. First, we expected that the artwork on each Illustrator layer would be exported as images that are the size of the bounding box that encloses that layer. Instead, the images are exported at the size of the largest layer in the document. This creates images much larger than we would want. We also discovered that the CSS Layer that holds the image also comes in much larger than the original artwork on the Illustrator layer. This creates CSS Layers that contain empty spaces around the image. The CSS Layer can be cropped in GoLive to eliminate the empty space, but that's not something we want to do. We thought that adding slices to define the exact area of the artwork on each layer might fix some of these problems. Unfortunately, when we chose Export As CSS Layers, those sliced images are contained within a table that sits inside the CSS Layer. This defeats the entire purpose of using CSS Layers, which is to be able to easily position the layer object anywhere on the GoLive page. |
Creating CSS Layers in GoLive As much as we love cool features that let us integrate all the Creative Suite applications, if you want to put images from Photoshop, ImageReady, or Illustrator into CSS Layers, we suggest exporting the images as ordinary web graphics, using the GoLive command Special > Insert > Layer, and then adding the graphic within the layer. This way you can better control the size of the CSS Layers. That's not to say, however, that there aren't special features within GoLive for working with CSS Layers. Our good friend, Lynn Grillo, alerted us to these cool tricks for working with CSS Layers in GoLive. Pasting Images into CSS Layers Ordinarily you will want to use Smart Objects (covered in Chapter 9) to insert Photoshop or Illustrator artwork into GoLive pages. However, here's a neat way to put simple art, such as a gradient, into a GoLive layout. Create the image in Photoshop. (For instance, create a black-to-white gradient 400 pixels wide by four pixels tall.) Then copy the Photoshop image and switch to GoLive. In GoLive, create a CSS Layer and click inside it. Then paste the contents of the clipboard. This opens the Save For Web dialog box within GoLive, where you set the optimization controls for the image. After you save the optimized art, the image appears inside the CSS Layer. The CSS Layer can then be resized and repositioned as desired. This technique also works with Illustrator artwork copied to the clipboard. This is exactly the sort of integration we like to see between the applications. CSS Layers from a Tracing Image GoLive also has Tracing Image feature that lets you place portions of a Photoshop or Illustrator file into a CSS Layer. Start by choosing Window > Tracing Image. This opens the Tracing Image palette. Click Source, and then use the link folder to choose the image that you want to place on the page. This image can be a web graphic or any of the Smart Object files such as native Photoshop, Illustrator, or PDF files. If you have chosen a PDF file, you can choose which page of it to insert. The tracing image appears on the page. You can use the Tracing Image palette as shown in Figure 17-11 to change the opacity of the image so that it fades into the background of the page. Use the Hand tool to position the image on the page. You can also use the Crop tool to choose a specific portion of the image as artwork on the actual web page. Click the Cut Out button to open the Save For Web dialog box. You can then choose the optimization settings for the artwork. Figure 17-11. Using the Crop tool in the Tracing Image palette. 
What we particularly like about the Tracing Image feature is that the Source image becomes a Smart Object for the portion of the image cut out of the page. This means if you make changes to the original Photoshop, Illustrator, or PDF document, those changes automatically update in the web graphic. |
