CSS Sculptor for Expression Web

This program is no longer available and works only with Expression Web version 1.0 or 2.0

Eric Meyer's CSS Sculptor for Expression Web was an addon created by WebAssist. Eric Meyer is recognized as a leading authority on Cascading Style Sheets (CSS).  The program will NOT WORK with Expression Web 3 or 4.

"CSS Sculptor is a flexible, powerful tool for generating highly customized Web standards based CSS layouts. With CSS Sculptor, you can quickly create a cross-browser compatible layout with custom widths, margins, paddings, background images and more."

The program comes with a User's Guide you can download and print out. The User's Guide will give you much more in the way of details than it is possible to give in this tutorial.

CSS Sculptor interface

The CSS Sculptor interface has six tabs. Each of the first 5 tabs controls a particular set of CSS properties for the page to be generated:

Screenshot CSS Sculptor Interface.

  1. Layout – The layout tab determines the initial layout of the page, either by choosing a preset layout or by selecting the layout elements manually, including the number of columns to use in the content area and an optional top navigation area. You may also choose one of a series of design presets which control the basic color scheme. You can modify the page structure on the Layout tab by changing the width, position, minimum width, and maximum width properties.
  2. Box – The box tab sets the width and height of any layout component, as well as individual margin or padding values. You can also rename the ID for any major <div> tag.
  3. Type – Use the Type tab to determine a wide range of properties for basic elements such as the text, h1-h6 tags, and a series of pseudo-classes (link, visited, hover, focus and active). Properties available include font-family, font-size, color, decoration, and weight.
  4. Design – The Design tab makes it possible to define the full set of background and border properties for any layout component. You can add a background image to a header, set the repeat property to no-repeat and even position it horizontally and vertically.
  5. Print – Modifies your screen CSS settings to create a style sheet for print. Global settings allow you to quickly set all <div> tags to auto and colors to black and white—or you can change these settings individually for each layout component. You can hide or zero out margins and paddings for any area.
  6. Output - is used for defining the output options including the destinations for screen and print CSS styles (embedded or in an external style sheet), the degree of placeholder content and comments, and the creation or overwriting of a layout preset.

Creating Your Layout

  1. Choose File > New CSS Sculptor Page  (this is the one I tend to use) OR
    Screenshot New Css Sculptor Page.
  2. Choose Insert > WebAssist > CSS Sculptor > New Page.
  3. The Layout tab includes a collection of 30 different preset layouts to help you get started or you can create your own. They include both liquid and fixed layouts, as well as Elastic and Hybrid choices. You can find more details in the User Guide.
  4. When CSS Sculptor opens, choose a preset from the Layout list. For this tutorial , I’ll choose 1 Column Fixed, Centered, Header and Footer.
    View Screenshot
    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. NOTE: I quite often stop here and edit the layout in Expression Web.
    View Screenshot
  5. If you want to work with an overall color scheme, select one of the eleven available from the Design list. I’ll select Moab for this tutorial although I will edit the colors later in EW.
  6. The Layout Tab determines the initial layout of the page. I already know for the fixed layout, I need to adjust the width so that it will resize to 800x600 resolution with no horizontal scroll so I change the width of the container to 740pixels. I also add a top navigation div.
    View Screenshot
  7. The Box Tab  sets the width and height of any layout component, as well as individual margin or padding values. The Box tab also provides a method for renaming the ID for any major <div> tag. If you want to change the name of the outerWrapper to container, this is the place to do so. You can see as you make the various changes, the preview window changes.
    View Screenshot
  8. Use the Type Tab to determine a wide range of properties for basic text, h1-h6 tags, and a series of pseudo-classes (link, visited, hover, focus and active). Properties available include font-family, font-size, color, decoration, and weight. I usually make my changes to this section from within Expression Web.
    View Screenshot
  9. The Design Tab makes it possible to define the full set of background and border properties for any layout component. You could, for example, add a background image to a header, set the repeat property to no-repeat and even position it horizontally and vertically. You can see from the screenshot, I have added a header image. Remember you will also have to add a height to the header <div> so that you can see it. I also change the background color of the header <div> so it is the exact same color as the background of the image. The is especially needed if you are using an image that is smaller than the header <div>
    View Screenshot
  10. The Print Tab modifies your screen CSS settings to create a style sheet for print. Global settings allow you to quickly set all <div> tags to auto and colors to black and white or you can change these settings individually for each layout component. You can also optionally hide or zero out margins and paddings for any area.
    View Screenshot
  11. The Output Tab is used for defining the output options including the destinations for screen and print CSS styles (embedded or in an external style sheet), the degree of placeholder content and comments, and the creation or overwriting of a layout preset. This is the tab you use to set the doctype for the layout you have chosen.
    View Screenshot
    Modern browsers render the print style sheet when the Print Preview or Print command is issued. Many designers attempt to optimize their print style sheets for the more suitable print format, which typically expands the divisions to full width and reduces the color scheme to black and white.Certain areas such as those which contain linked navigation or large graphic banners are hidden. CSS Sculptor allows you to set up such a style sheet quickly and easily.
  12. Once you  have made all of your changes to the various tabs, click finish and the template and images is saved to the location you specify. You can also click Finish at any time in the design process. Once done though, you will not be able to return to the program interface to edit the layout. Any changes or additions will need to be made in Expression Web.
  13. The layout is generated in HTML and opened in Expression Web. You can either save the page as a standard HTML page, a dynamic page or a template. If you chose to store your styles in an external style sheet, that style sheet is created, saved and opened as well.

Understanding the layout <div> elements

Depending on which of the preset layouts you have chosen, the following <div> layout elements will be available for you to style.

  1. The body tag is at the top level <div> and is made available to change margins and padding in the Box tab. You can specify a different overall font-family, text color or background color. I will quite often use a gradient image as the background with the background color the same as the lower end of the gradient.
  2.  The outerWrapper encompasses all of the <div> tags used to construct the page - a container for the page. A common use of the outerWrapper is to center the layout by setting the left and right margins to auto.
  3. The contentWrapper surrounds the main content area, including any columns. Select the contentWrapper when you want to modify properties for both content and column(s).
  4. The header <div> or masthead contains your background image and perhaps the site logo. If I am using a fixed layout with a background image, I will quite often add a <div> above the masthead for the site name.
  5. The topNavigation contains the top navigation for the layout. A good source for menus for this <div> is Dynamic Drive or Project Seven if you need a dropdown horizontal menu.
  6. The leftColumn1 <div> will hold the left side navigation or whatever you choose to have there. A good source of vertical menus you can use is Dynamic Drive or Exploding Boys.
  7. The rightColumn1 <div> can be used for news, or credits of what have you.
  8. The content <div> contains the main content area of your layout.
  9. The footer <div> holds all of the information you might want to place in the footer <div>.

CSS Sculptor also include a reset rule as part of the style sheet. This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule.

Also a part of the style rules is a class clearfloat. Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. This allows the footer <div> to come just below all of the content <div> tags. Remove it and you will see exactly what happens.

Modifying the CSS Sculptor Layout

I would suggest when you first start using CSS Sculptor, that you leave the css comments in as well as the placeholder text. As you become more familiar working with the program, then you can delete some of the comments.

There are a couple of style rules I add to the sheet immediately:

  • body img { border: 0px; text-decoration: none; }  This will keep the graphic images you use that are hyperlinked from having the ugly blue border around them.
  • #outerWrapper #footer p { margin-top: 0px; margin-bottom: 0px; } This allows you to enter the text in the footer as paragraphs but with no top or bottom margin, they will look like you have used the <br /> tag.
  • .imglft {float: left; padding: 5px; } will float images in the content area to the left with a bit of padding between the image and text
  • .imgrgt { float: right; padding: 5px; } will float images in the content area to the right with a bit of padding between the image and text.
  • .ctr { text-align: center; } will allow you to center text or images that are within <p> tags.

Finished layout


Copyright 2008 Pat Geary of Expression Web Tips, Tutorials, and Templates All Rights Reserved