TIP 50: Working with CSS Objects


New to GoLive CS2 is a set of objects called draggable CSS objects. These objects are a collection of pre-built CSS boxes, such as 3 columns with a liquid center (a center that scales as a page is made smaller or larger), navigation rows, padded boxes, and more (Figure 50a).

Figure 50a. Creating intricate CSS-based layouts is simplified by using the new draggable CSS Objects.


Cozy CSS Objects

The CSS boxes not only can be placed after one another on a page, but you can place them inside one another as well. This flexibility means you can create a complex, CSS-based design in a matter of minutes.


These objects allow you to quickly create a complex CSS layout without hand coding. Simply drag an object from the Objects palette and drop it onto your page. You can even nest one box inside of another. When you've got your basic page layout in place, use the Inspector palette to edit the ID of the <div> tags or to change the size of a box (Figure 50b).

Figure 50b. Select a CSS object on your page and edit its attributes, such as ID or dimensions, in the Inspector palette.


Use the CSS editor to apply styling to a box, such as padding, margin, border, background color or image, and so on (Figure 50c).

Figure 50c. Designate a background color or image for a box in the CSS Editor.


Jumping from the Inspector

A handy feature in GoLive CS2 is the addition of two new buttons in the Layer Inspector: CSS Editor and Layer Palette. One easy click, and you have instant access to the tools you need to work with layers.




    Adobe GoLive CS2 Tips and Tricks The 250 Best
    Adobe GoLive CS2 Tips and Tricks The 250 Best
    ISBN: B008CMGJS0
    EAN: N/A
    Year: 2005
    Pages: 301

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net