Creating a Custom Site Sculptor Design

You will need the following items before starting this tutorial:

1. Dreamweaver CS3 or later
   
2. Site Sculptor installed
   
3. Web page design to turn into a Site Sculptor design
   
4. Site defined in Dreamweaver (more information)

The first step in creating your own custom site design is to configure your template so that it works properly in Site Sculptor.

Save as template

If your design is not already a Dreamweaver template, your first step is to save it as a .dwt file.

1. With your design open in Dreamweaver, choose File > Save as Template...
   
2. Enter a name for your new template and click OK.

Dreamweaver will convert your page to a .dwt file and save it to a Templates folder of your Dreamweaver site.

Creating the Editable Regions

In Dreamweaver templates, editable regions are areas of your page where you specify content can be changed. For Site Sculptor, you need to define editable regions for Site Sculptor to know where it can insert content such as your navigation menu.

At a minimum, for a template to be used for a Site Sculptor design it must have the following 3 editable regions.

1. Navigation: For inserting the navigation menu
   
2. Content: For inserting the page's content
   
3. Footer: For inserting the footer links

If you intend to use the Site Sculptor content management feature, you will want to create additional editable regions for any area that you want to manageable through the CMS. Follow these instructions for creating your templates.

1. In your site design, highlight the content that should be an editable region.
   For the navigation region, you should highlight the entire menu that exists on the page. You may find it easier to use Code View.
   
2. From the Insert menu, choose Template Objects > Editable Region.
   
3. In the dialog that displays, enter a name for this region.
   The editable region name will also be what is presented within the content management.
   
4. Repeat this step until you have created editable regions for all the necessary areas including the 3 required regions mentioned above.
   
5. Press Ctrl (Cmd) + S to save your template.

If your custom design has a unique navigation menu design that you want to make sure Site Sculptor uses, you will need to create this menu as a CSS Menu Writer preset. CSS Menu Writer is another Dreamweaver extension that is included in the WebAssist Extension Library or Super Suite.

For more information on using CSS Menu Writer to create your menu see the CSS Menu Writer Support page.

If you do not require a specific menu design, Site Sculptor includes some preset designs that can be changed in Theme-It to match any color. These menus are designed to fit well with most web designs and should be good additions to most sites.

Your next step is to use the Site Sculptor Add Layout Wizard to create a new site design.

1. From the WebAssist menu, choose Preset Manager.
   
2. Choose the Site Sculptor Site Designs option from the Product menu.
   
3. Click New to create your new site design.

The Add Layout wizard is separated into the following four steps.

1. Configure home page settings
   
2. Configure home page menu
   
3. Configure content page settings
   
4. Configure content page menu

Let's get to the wizard now:

1. Enter a name for your preset design.
   
2. Choose the Dreamweaver template that you wish to use.
   You can also use a CSS Sculptor preset, but to leverage the benefits of the content management you should select your dwt.
   
3. Click Next.
   
4. For your home page, select the menu that you wish to use.
   If you created a custom CSS Menu Writer menu, you should choose that here. If you want to use a Site Sculptor menu that you can easily modify the colors for, choose any of the designs that are not labeled [menuname (CSS Menu Writer)].
   
5. For each of the 3 drop down menus, specify the appropriate editable region.
   This is necessary to tell Site Sculptor where to insert your page's content, menu and footer.
   
6. Click Next.
   
7. Complete the next two steps as you did the first two.
   Most sites have the same home page and content page designs, so you'll probably want to choose the same template.
   
8. Click Finish when you have completed the wizard.

You have now created a new Site Sculptor design which you can select from the Site Sculptor Site Design menu in the Quick Insert interface.

Now that you have finished creating your new site template, you can start using Site Sculptor. For step-by-step instructions, see the Getting Started Guide.

1. Site Sculptor Getting Started Guide

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