close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Creating a Custom Site Sculptor Design

Tutorial created by Team WebAssist

Categories: Design Extender, CSS, Design, Dreamweaver

rating

This tutorial shows you how you can create a custom site design that you can use in Site Sculptor to create your site. This assumes that you have created a custom web page design or obtained one from a third party.

arrow downRequirements

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)

arrow downCustomizing your design

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.

arrow downCreating your menu

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.

arrow downCreating a Site Design

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.

arrow downWhat to do next...

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

arrow downReviews and comments

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
rating

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.