PDF (adobe.com)

Creating CSS-based layouts



You can design CSS-based layouts in a Fireworks document, and then convert them to HTML pages with CSS rules that replicate your layouts. CSS-based layouts provide a standards-based approach and give a cross-browser friendly code.

For a video tutorial on creating CSS-based HTML page layouts, see www.adobe.com/go/lrvid4035_fw.

    Rules for CSS-based layouts

    You observe a few rules while creating CSS-based layouts to get expected results.

    Rule 1: Use rectangles to export text and slices to export images
    The export engine exports text placed in rectangles. Because only images which are covered by rectangular slices are exported, place slices on the images to have them exported. These slices “tell” the export engine where the images are.

    Rule 2: Avoid overlapping of objects
    The export engine treats text, images, and rectangles as rectangular blocks. It examines the size and position of these objects to determine the logical rows and columns to place them in the layout. Carefully place the objects so that their boundaries do not overlap.

    Rule 3: Plan the layout for rows and columns
    The export engine looks for logical partitions where a clear line of sight can be placed between objects or groups of objects. Enclose your column layouts in a rectangle to prevent the export engine from inserting a logical row that breaks the column layout.

    Rule 4: Treat the document as two-dimensional
    When you design your page, use rectangles to enclose objects that you want to treat as children of the rectangle. The export engine detects such parent-children relationships. The export engine scans the children elements for logical rows and columns as in Rule 3.

    In addition to these rules, observe the following:

    • The export engine exports only primitive rectangles. To export the rounded corners of rectangles, place rectangular slices over them.

    • To have the strokes of rectangles exported, place rectangular slices over rectangles that have them.

    • To export symbols, place a rectangular slice over them.

    • To export filters that you have applied to text or rectangles, place rectangular slices over them.

    Create a document demo

    You can create a demo of the Fireworks document that you are working on. The demo opens in a browser to demonstrate the features and lets you navigate through the pages.

    1. Select Commands > Demo Current Document.

    2. Select the pages you want to create a demo for, and click Create Demo.

    3. Select the folder and click Open.