Dynamic Web Templates

Your template comes with one or more .dwt (dynamic web template) pages, one for each page layout. Most (but not all) will have the following:

Image 1: DWT Template Pages

You will need to edit each of the .dwt template pages in order to modify your site name, change the copyright statement, edit your navigation links, etc. This goes very quickly if you make changes to one .dwt template page and then copy and paste those changes into the other .dwt template pages you may want to use. [Note: While we give you several page layout choices, most will not use all of them.]

Editing DWT Pages

When you open a DWT file, you will see common page areas such as navigation links, header content, footer area that will normally contain your copyright statement and links, and bordered areas where your content is to go.

Editing Site Name Image: In most cases, the site name and slogan will be plain text. You will be able to edit this area on the .dwt template page while in design view. If you prefer to dive into the coding, highlight the image and then switch to Code View. You will see the image area highlighted.

HTML:
  1.  <div id="logo">
      <h1><a href="../index.html">Your Business Name</a></h1>
      <h2>Slogan or Tag Line Goes Here</h2>
    </div>
  2. NOTE: Notice the ../ in the file path. Because the .dwt template page is in a folder,
  3. the file path must reflect that the linked page not contained within the template folder,
  4. but is instead "up one level".

Editing Navigation Links: Most of our templates have a drop-down menu. The navigation menu can hold a main topic and one sub-topic level. The sub-topic level will expand on mouseover and will contract when you move the mouse off the menu item.

You can delete main topics (and any associated sub-topics), add new ones, and change the text and links on the existing menu. You will edit the drop-down menu on the .dwt page templates. Note that the subtopic level will not be visible, so you will need to edit the menu in code view. If you look at the coding, it should be relatively easy to make your changes.

For a main topic (top link) only, your code will look something like this:

HTML
  1. <li><a href="../index.html">Home</a></li>

For a main topic that contains sub-topics, your code will look something like this:

HTML
  1. <li><a href="../page.html">Main Topic</a>
  2.    <ul>
  3.      <li><a href="../page.html">Sub-Topic 1</a></li>
  4.      <li><a href="../page.html">Sub-Topic 2</a></li>
  5.      <li><a href="../page.html">Sub-Topic 3</a></li>
  6.      <li><a href="../page.html">Sub-Topic 4</a></li>
  7.    </ul>
  8.  </li>

Once you have your menu completed on one .dwt page, copy the entire menu and paste it into any additional .dwt page templates you will be using. Save your pages and allow the changes to update on the .html pages. Save and you're done.

html
  1. <nav id="mainnav">
  2. copy all coding that appears between the opening and closing nav tags
  3. </nav>

Font sizes and colors, background colors, sub-topic block width, margins, paddings, etc. are all controlled in the default.css page.

Important Note:

Take care that you do not leave empty list elements behind while editing your code. If you see <li> </li> or <ul> </ul> with no content between the tags, delete the tags. Those empty tags will cause problems with the menu in smaller devices.

Editing Slideshow Image Captions: Many of our templates contain a jQuery slideshow. The images can have a caption which is set using the title tag. You can edit the title or it can be omitted if you do not wish to have a caption. To edit, switch to code view and look for the following:

html
  1. <div id="sliderwrapper">
  2. <div id="slider" class="nivoSlider">
  3. <img src="../images/mainimage1.jpg" alt="" title="Add your text here." />
  4. <img src="../images/mainimage2.jpg" alt="" title="Second caption goes here." />
  5. <img src="../images/mainimage3.jpg" alt="" title="Last caption goes here." />
  6. </div>
  7. </div>

You will edit other areas on the .dwt template pages in the same manner. DO NOT edit any content box areas. These are "editable regions" that will be edited on your .html pages. Please read over the instructions that came with your template for more template-specific information.