Getting started with CSS Sculptor

1. Dreamweaver CS3 or higher
   
2. Design Extender (alternatively, Eric Meyer's CSS Sculptor) installed and activated in Dreamweaver
   
3. A site defined in Dreamweaver. If you need assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+

1. From the Insert menu choose WebAssist > CSS Sculptor.
   
   
2. The Create CSS Sculpture Page wizard opens with a number of preset layout designs. Each option gives you a starting point for creating a layout. To speed up your production, choose the layout that best matches the design you are aiming to achieve. You will learn how to customize the look in the next section.
   
   
3. From the design type menu, choose a desired preset layout design. For this tutorial, I have chosen 2 Column Fixed, Right Sidebar, Header and Footer.
   
   
4. From the design menu, choose the design that best matches the color scheme you intend to create. For this tutorial, I have chosen Slate.
   
   
5. Review your choices in the preview area.
   
   
6. By default, all CSS styles are stored in external style sheets. However, you can select to embed the CSS styles in the page header by checking the box.
   
   
   
   
   
7. Select the Edit button to continue.

The Customize CSS interface allows you to completely modify all aspects of your site’s layout and design. To easily access the features you wish to customize, the interface has been separated into 6 tabs with the following options.

1. Layout: Modifying the overall layout.
   
   
2. Box: Adding new divs, spry components, as well as apply widths, margins, and padding.
   
   
3. Type: Customizing the various text included in your layout.
   
   
4. Design: Applying color, background image, and borders to individual elements.
   
   
5. Print: Configuring a print style sheet to be included with your CSS.
   
   
6. Output: Choosing placeholder content, comments, and doctype.
   
   
   

The Layout tab provides various options for designing your overall layout. If you selected a preset from the Quick Insert interface, all the various options will be pre-populated based on that option. The following introduces the various sections of the interface that you can adjust.

1. From the Page Structure section, choose design width and position.
   
   
2. If desired, choose the Maintain overall column width or Equal column lengths options. In order to apply either of these techniques, you need to use a fixed column layout where everything uses the same unit of measurement. You may need to move to the Box tab to modify the margin or padding for some of your div elements.
   1. Maintain overall column width: This will ensure that the column widths are the same, regardless of changes to the margin or padding.
      
   2. Equal column lengths: This applies the faux column technique by taking a screenshot of the bottom portion of the design, and repeating this image in the content wrapper div of the design. This image is inserted into your defined site.

3. Under Layout Components, choose whether you wish to include a Header, Top navigation, Content area, or footer.
   1. Header: Choose from normal or full width headers.
      
   2. Top navigation: Check the box if desired.
      
   3. Content area: Choose left or right and number of columns
      
   4. Footer: Choose from normal, full width, fixed normal, and fixed full width.

4. Add any desired left or right columns by entering the appropriate number in the text field.
   
   
5. Click the refresh icon to update and preview your changes.
   
   Some of these options may already be populated based on the chosen preset.
   
   
   

The Box tab in CSS Sculptor 3 allows you to add or customize various box-related properties (like margins and padding) for each layout component. Additionally, you can add Spry components for even more advanced custom layout creation.

1. The Layout Component tree displays all the various elements currently used in your design. Using this tree, you can select a component to customize and move a component up, down, left or right throughout the CSS. The following describes the most common components that you may see in the Layout Component tree.
   1. body: The body tag is at the top of the layout tree and is made available to change margins and padding in the Box tab; in other tabs, select the body entry to specify a different overall font-family, text color or background color.
      
   2. outerWrapper: The outerWrapper encompasses all of the <div> tags used to construct the page. A common use of the outerWrapper is to center the layout by setting the left and right margins to auto.
      
   3. contentWrapper: As the name implies, 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).

2. From the layout tree, choose the component you wish to modify.
   
   
3. For the selected component, enter a width, height, and apply a float if desired.
   
   
4. If desired, enter margins and padding for the selected component.
   
   
5. Select other components to make additional modifications.
   
   
6. Click the refresh icon to update and preview your changes.
   
   
   
   
   
7. CSS Sculptor 3 allows you to add the following new components to your design.
   1. New div elements
      
   2. Spry accordion panels
      
   3. Spry collapsible panels
      
   4. Spry tabbed panels

8. Choose the element you wish to insert the new component within.
   
   
9. Select the plus icon and choose the desired component to add. The selected option will be added to your layout and will display in the Layout Component tree.
   
   
10. Click the refresh icon to update and preview your changes.

Note: The Spry components utilize a default style sheet created by Dreamweaver. While customizing your design, there may be CSS properties (such as borders) that are applied to your Spry component but not displayed in CSS Sculptor. Entering your desired value in CSS Sculptor will override the default style sheet.

1. 

CSS Sculptor gives you the power you need to completely customize the font properties for standard paragraphs, headings, and the various link states.

1. In the layout tree, select the element you wish to modify.
   
   
2. From the Text subtab, choose the font.
   
   
3. Specify any other type settings.
   
   
4. Proceed through the interface by selecting additional layout components.
   
   
5. Select the h1 through Active subtabs to specify type properties for those specific styles.
   
   
6. Click the refresh icon to update and preview your changes.

Note: CSS Sculptor includes a pseudo-element that is frequently omitted from the typical series of link states, a:focus. The a:focus pseudo-element is typically applied when a link receives focus in a browser, either by being clicked or tabbed to.

1. 

Background images and borders are integral to modern CSS layouts. CSS Sculptor makes it possible to add a background color and image, along with complete background properties to the body tag or any individual layout component. In addition, borders can be applied to surround any element or along any side.

1. In the layout tree, select a component to apply a background image or border to.
   
   
2. Specify a background color from the Color tab under Background.
   
   
3. To apply a background image, choose the Image Source tab. Use the Image Repeat and Attachment and Image Position tabs to further specify the appearance of your background image.
   
   
4. To apply a border, choose the Style of border from the menu list.
   
   
5. Specify a width and color for your border.
   
   
6. To customize the border for each side, choose the Top, Right, Bottom, or Left tabs.
   
   
7. Click the refresh icon to preview the changes.

Note: Depending on the preset you selected, there may be a background color or background image already applied. To avoid these settings overwriting anything you apply, you may want to remove these first.

1. 

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. Additionally, certain areas are hidden, for example, those which contain linked navigation. CSS Sculptor allows you to set up such a style sheet quickly and easily.

1. In the Global section, choose Convert divs to page width, Convert divs to black and white, or Set margins and padding to zero.
   
   
2. If print coloring is not required, select the Convert divs to black and white checkbox.
   
   
3. If certain layout components should not be included in the printed version, select the component and choose Hide.
   
   
4. Click the refresh icon to update and preview your changes.

Note: If you click the preview image, the page will display as shown in the Print tab preview pane and not as the screen style sheet is defined. To see the print style sheet in its intended usage, you’ll need to click Finish and preview the page in Dreamweaver using the Style Rendering toolbar or through your browser’s Print Preview command. With both screen and print styles defined, it’s time to establish your output options.

1. 

The final tab of CSS Sculptor gives you control over the page that is created. Options include the ability to set a doctype for the HTML page, determine the amount of placeholder content, and include or omit CSS comments.

1. To set the amount of placeholder content to include in your generated layout, choose one of the options from the Placeholder list.
   1. Full: Includes full lorem ipsum style placeholder text as displayed in the CSS Sculptor previews.
      
   2. Minimal: Applies one sentence for each div. For example, "Content for header div goes here."
      
   3. None: Removes all placeholder content.

2. If you’d like to remove comments from your CSS code, deselect the Include CSS comments checkbox.
   
   
3. In the Page Generation section, choose your doctype from the Doctype list. The default is XHTML 1.0 Strict.
   
   
   
   
   
4. Click Finish and save the design as a preset to use in the future, customize further, or export and share with other CSS Sculptor owners.
   
   
   

CSS Sculptor 3 includes the Manage Colors interface where you can change the entire color scheme for your site with only a few clicks. This interface is provided to quickly replace the current colors with new selections. When changed, all elements using the new colors in your CSS will be updated.

Note: If you wish to change the color for a specific element, you should use the Customize CSS interface.

1. Return to the original CSS Sculptor window and click the Theme-It button.
   
   
2. Choose Design Colors: All the colors currently included in your design are listed here and grouped by the component using that color.
   1. Choose Shift Up or Shift Down to move the color to a different group of components. Refer to the Preview to see how the changes affect your design.
      
      
   2. Using the color swatch/color picker, change the color for the component groups. Using the color picker, you can select any color that displays on the Dreamweaver and CSS Sculptor interfaces.

3. Importing Colors: To gain access to certain colors that you may like on a website or an image, the Color Importing feature has been included.
   1. Choose the Color Importer tab.
      
      
   2. Select the browse button to choose an image file to import or enter the URL to a webpage.
      
      
   3. Choose Apply.
      
      
   4. Using the color pickers, sample any color you wish to use from the import.

4. Color Suggestions: The Color Suggestions feature is provided to give you access to a number of color options that may help you achieve the look and feel you desire.
   1. Select a base color from the available color picker/color swatch.
      
      
   2. From the menu list, choose the type of suggestions you wish to view.
      
      
   3. Using the color pickers, sample any color you wish to use from these recommendations.

   
   

   
   
   
5. Click Finish and save the design as a preset to use in the future, customize further, or export and share with other CSS Sculptor owners.
   
   
   

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments