Modifying a preset layout in Eric Meyer’s CSS Sculptor

by Joseph Lowery

The first tab of Eric Meyer’s CSS Sculptor add-in for Expression Web, Layout, establishes the basic page structure. CSS Sculptor includes a collection of 30 different preset layouts to help you get started—or you can create your own. Any layout can be easily modified in a number of ways, including width and page position. Additionally, a second set of presets, Design, initially controls the overall look-and-feel of the layout.

Note: Throughout this Getting Started Guide, I’ll choose a particular option or enter a set value. You’re free to experiment on your own and try different options; however, the screen shots in the Guide may not match your choices.

To choose and modify a preset layout:

1. After installing Eric Meyer’s CSS Sculptor for Expression Web, you can open CSS Sculptor in Expression Web by one of the following methods:
   
   
   • Choose File > New CSS Sculptor Page.
   • Choose Insert > WebAssist > CSS Sculptor > New Page.
2. When CSS Sculptor opens, choose a preset from the Layout list. For this demonstration, I’ll choose 2 Column Liquid, Left Sidebar, Header and Footer.
   
   
   
   
   
   Once you choose a preset, a number of CSS properties are populated with the associated values, some of which are visible in the Layout tab. If you just wanted to create a simple layout, you could, at this point, click Finish.
   
   The preset layouts are divided into four different types:
   
   
   • Fixed – Page and columns widths are set with pixels and do not resize if the browser window or browser text size changes.
   • Liquid – Page and column widths are set with percentages which allows them to resize when the browser window changes.
   • Elastic – Page and column widths are set with ems which allows the columns to resize when the browser text size changes.
   • Hybrid – Page widths are set with a percentage and columns with ems. This combination allows the overall page width to change as the browser window changes and the columns to change when the browser text size changes.
   Note: While it’s possible to create any common Web page layout from scratch within CSS Sculptor, it’s much faster to start your design with a preset layout. As you’ll see later, you can easily save your own presets to select them as custom starting points.



3. If you want to work with an overall color scheme, choose an entry from the Design list. I’ll select Pacifica.
   
   
4. As you can see in the Page structure section, the preset width for this layout is 80% and centered. Let’s leave those values as is and add a minimum width. In the Minimum Width field, enter 760 and leave the unit list set to pixels.
   
   
   
   
   
   The min-width and max-width properties is a CSS 2.0 property and are not supported in older browsers (such as Internet Explorer 6), but do work in Firefox, Internet Explorer 7, and Safari, among others.
5. Let’s try out the new setting. Click Preview to display the layout in your primary browser. Change the width of your browser window to note how the layout remains centered and at 80% of the width of the window—until the window is less than 760 pixels wide. Close your browser and return to Expression Web.
   
   One of the hallmarks of CSS Sculptor is its extreme flexibility. Let’s explore this advantage in the Layout component section.
6. Change the Left column value to 2.
   
   
   
   
   
   CSS Sculptor adds a new column to page as requested. If that’s not exactly what you had in mind, you can change your mind.
   
   Note: When you add a new column next to an existing column as we’ve done in the above step, CSS Sculptor picks up the properties of the existing column. If you add a new column where one did not exist before—by changing a column value from 0 to 1 or more—default column properties are used.
7. Change the Left column value back to 1.
   
   CSS Sculptor is designed to be flexible and quick, so you can modify just the properties you want and click Finish at any point.
8. Click Finish.

Your page is immediately created and ready for your content. You’ve just barely scratched the surface of what’s possible, however. If you’d like to try some of the other tabs, open CSS Sculptor again and choose Last Custom Preset—automatically saved for you—from the Layout list. Now you’re free to explore the other tabs to change everything from the fonts used to background images. Enjoy!

About Joseph

Joseph Lowery's books about the web and web-building tools are international bestsellers, having sold more than 400,000 copies worldwide in nine different languages. Joseph is currently the Vice President of Marketing for WebAssist.