We recommend that you print this page for further reference as you are working with your new template.

This template package comes with the starter web site in .zip format. Unzip the package and start editing the pages. You may wish to keep a backup copy of the .zip in case you need to start over. We have included a basic site structure with common pages to help you get started. You may rename the pages, add more pages, and add your content.


Can I change the template colors? You can easily modify font colors (links, headings, and text) by editing the included CSS file. The colors in the top header area and the bottom footer area are actually graphic images and cannot easily be changed. If you feel the colors used in this template do not meet your needs, we offer custom design and modification services. Please contact us for details and pricing information.

How do I add my site name? Changing the "Your Business Name", along with adding your own slogan, requires a graphics program. You can edit these items by opening up the source file or by using the blank header images that come with the template. If you do not have a graphics program, I will add your name and tagline for you at no cost within 30 days of purchase.

Can I change the images used in the template? You can easily replace all images with those of your own.



The copyright for this web template and accompanying design remains with the designer, Templates in Time and/or Dreamweaver in Time You may not claim ownership of the design nor may you use it for any purpose other than that explicitly set forth in the separate license agreement.

Template Use:

This template comes with a site license, not a user or computer license. This template is licensed for use on one site only. If you wish to use this template for subsequent sites, you must purchase a license for each additional site. All images and source files included within the template are licensed for use with this template only. All royalty-free image vendors have their own terms of use in how their images may be used and in what context. Please check with the listed vendor(s) if you have questions.


Expression Web : This template, using the TNT logo, was designed specifically for the Expression Web

Dreamweaver: This template, using the DNT logo, is made specifically for Dreamweaver.


Editing the Dynamic Web Template (.dwt) Pages:

Dynamic Web Template pages can be found within the Templates folder of your web and are easily identified by the .dwt extension. They contain the basic page structure for all of your web (.htm) pages. You will find a .dwt for each different page layout included in your template package. If you change a .dwt page, all of the web pages based on that .dwt will also change. Dynamic Web Templates have both “editable” and “non-editable” regions. Editable Regions can change from page to page such as your page content. You open the web (.htm) page and make changes inside of the editable regions. Non-editable Regions are areas defined by the .dwt and cannot be changed on your .htm pages. To change non-editable regions, you have to open the .dwt file. Changing non-editable regions will change every web page in your site that is based on that .dwt page.

Editing Include Pages (Expression Web) or Library Items (Dreamweaver):

This template uses include pages/library items to hold the navigation links. This allows you to easily make changes to your links on the appropriate include page rather than having to make several changes to the .dwt page(s). Note that the include page will look like there is no formatting applied. Just make your changes. Your changes will automatically be applied to each page that uses the included content and the correct formatting will appear on your pages. You will typically find the following include pages in the Includes folder:

Editing the Content (.htm / html) Pages:

This template package allows you to delete the pages you do not need and to rename existing pages if necessary. To edit the existing .htm pages, just delete our sample content. You can then type your own text and add any additional photos. Note that you will not be able to edit any “non-editable” regions on these pages. Remember to change the page title when you make a new page or rename a page.

Important: If you delete all content from an editable region, it may disappear and be difficult to find. Switch to Code or Split view and look for the following:

<!-- #BeginEditable “content” --><!-- #EndEditable -->
Type some placeholder text between the two tags as follows:
<!-- #BeginEditable “content” --><p>Content here</p><!-- #EndEditable -->
Switch back to Design view and you will now see the editable region and can add content to that area. Make sure you type in the paragraph tags <p></p>


1. When you name your pages, make all of the letters lower case and use NO spaces between words. For example - gettingstarted.htm

2. Do NOT copy any text from Word, etc. directly into your web. Paste the text into notepad to remove all formatting. If you copy directly into your web, you will get lots of formatting code you don't need.

3. Make use of the Heading Tags. We use Heading 3 for the larger gray text. This template has 6 heading tags. Look at the "information" page to see what each looks like.

Creating New Pages:

Expression Web: To create a new, blank page based on a .dwt page layout, go to File > New > Create From Dynamic Web Template. In the dialog box that appears, select the appropriate .dwt page (if you template offers more than one page layout). When your new page is created, save the page giving it a unique name and page title. You can then add content to the editable regions.

Dreamweaver CS3: To create a new, blank page based on a .dwt page layout, select "File > New > HTML." Go to "Modify > Templates > Apply template to page> Then choose the type of page you wish to create."

Cascading Style Sheets (CSS):

This template uses a CSS-based layout, which means that the page sections (header, sidebar, content, and footer) are positioned using CSS rather than within a table-based grid. Because this results in cleaner code, your pages load faster and search engines may rank your page better than they would in a table-based design.

When looking at your pages while in Design view, some elements may not appear correctly. Fonts may seem too large or small; spacing between elements may seem too wide, etc. While this can be a bit disconcerting, you will find it easy to keep previewing your site in a browser as you make changes. This will display your page correctly. To preview your pages, save the page after each change and then go to File > Preview in Browser.

Occasionally while editing your pages, you may “lose” the formatting. When this happens, save the page and then hit F5 to refresh your page. The page should snap back into position and the styles will return.

Javascript Calendar:

We include a simple javascript calendar in many of our templates. Note that you will not be able to see the calendar while in Design view. This script is set to show the current date only. If you do not wish to include the calendar, you can delete it from the code.

<div class="calendar">
<script type="text/javascript" src="calendar.js"></script>
<p><a href="news.htm">
<img alt="Click for More Event Details" src="images/buttons/button-moreinfo.jpg" /></a>

To change the size of the fonts in the calendar or to change the colors, you will need to edit the calendar.js file.

Main Menu Details:

The links shown in the top drop-down menu are on the mainnav.htm page within the Includes folder. This menu uses a combination of JavaScript and CSS to display a definition list so that the drop-down items are hidden until you mouse-over the top link. Please note that this is a very simplistic list and is not designed to display multiple levels.

To edit these links, it is easiest to work in code view so you can see where each menu section is located. You can add additional links to each section and can change the top section links. There is a limited amount of space available horizontally on the menu bar. You can adjust the link menu width, change the font size, etc. by editing the menu ID properties in the CSS file. You can add more items in the sub-menu links.

1. NOTE: For a link without a drop-down submenu, use the following as an example.

<dt onmouseover="javascript:show();"><a href="../default.htm">Home</a></dt>

2. NOTE: For links that do have a drop-down submenu, use the following as an example. Please notice that each link group (top link plus submenu links) must have a unique menu ID name. The first one is named smenu1, the second is named smenu2, etc.

<dt onmouseover="javascript:show('smenu1');"><a href="../aboutus.htm">About Us</a></dt>
<dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
<li><a href="../faqs.htm">FAQs</a></li>
<li><a href="../contact.htm">Contact Us</a></li>

If you need help editing your menu, please contact us for additional details. [Credit for this menu: http://tutorials.alsacreations.com/deroulant/]

Contact page form:

If you have a form in your contact page, there are a number of different scripts available that will allow you to receive form results by email. The type of form mail script you need will depend on the scripting methods your web host supports.

Meta Tags:

To help get your site listed in search engines and directories, we have added blank meta tags for keywords and description to each page. You will want to either delete these tags or add your own specific content. DO NOT leave our default content in these tags. To add your own unique page description and keyword content, right click on the page when in Design view and select Page Properties. In the dialog box that appears you can change the page title and add your own keywords and description for the page.

Photo / Image Tips:

Here are a few tips on naming your photos/images.

1. Use all lower case in your photo / image name.

2. Use "Insert > Picture > From .... Do not drag your images into your web.

3. Use an image program to size your images. Do not grab the corner of the image and pull in to make the image smaller. It may seem like a small image to you, but your viewer's browser must load the entire huge picture!

PART V - Contact Us:

We also offer customer support by email and phone during our regular business hours:

Marsha Bryant, Owner
Dreamweaver in Time (http://www.dreamweaverintime.com)
Email:  marsha@dreamweaverintime.com
Phone: 919-847-4756
Business Hours:
    M-F 4:00 pm – 9:00 pm (Eastern Time)
    Saturday 9 am - 6 pm
    Sunday 1 pm - 5 pm
    Most holidays 1 pm - 5 pm (Closed Christmas)