Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Getting Started

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.

What's included:

What's needed:

Dreamweaver CS3: This template was designed specifically for the Dreamweaver program.

Image Editing Software: While some color changes can be made by editing the CSS file. Other colors are actually graphics. If you wish to make changes to the images source files included in this template, you will need some type of image editing software that will allow opening and editing a .psd file (Photoshop, Paint Shop Pro, Fireworks, etc.)

Step by step:

Adding Your Site Name:

This template contains a graphic that has our sample site name, logo, and/or slogan applied. This is to give you an idea of what the site could look like. Inside of the images folder of your web you will find a “sourcefiles” folder. This folder will contain the images you can edit to apply your own site name, etc. using your favorite fonts. Choose the file that best suits your needs.

  1. header.psd: This is a layered Photoshop file that has each element of the graphic on its own layer. You can delete layers, add new layers, and make other significant changes to this image file. When you have finished your changes, save your image as “header.jpg” into the images folder of your web. Allow your new image to overwrite the existing file. The next time you open your web, your new image will be in place.
  2. header-blank.jpg: This blank image is identical to the one used in the template but does not have any site name or slogan applied. If you do not have a program that will allow you to edit a .psd file, this is the image you would have to edit. When you have finished your changes, save your image as “header.jpg” into the images folder of your web. Allow your new image to overwrite the existing file. The next time you open your web, your new image will be in place.

Important: You will need some type of image editing software program in order to modify the source files. If you do not have the software to add your own text, we can add it for you for free within 30 days of your purchase. For more extensive changes, we offer custom design services. Please visit our web site for details.

Editing the Dynamic Web Template 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:

  1. 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.
  2. Non-editable Regions are areas defined by the .dwt and cannot be changed on your .htm pages.
  3. 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 Library Items:

This template uses library items for the navigation links. This allows you to easily make changes to your links rather than having to make several changes to the .dwt page(s). Your changes will automatically be applied to each page that uses the library item(s). You will typically find the following library items:

  1. global.lbi: This page will contain global level links such as Home, FAQs, Contact, etc.
  2. mainnav.lbi or tabbar.lbi: Your template will use one of these library items. If your template has a tabbed navigation bar, you will edit the tabbar.lbi. If your template does not have a tabbed navigation bar, you will edit the mainnav.lbi. Note: We highly recommend that you edit the tabbar.lbi while in code view to ensure that you place the <span> tags correctly.
  3. cataloglinks.lbi: This page will contain the links to your individual products and/or product categories within the catalog pages of your web.
  4. footer.lbi: This page will have any links you wish in the footer area of your web along with your copyright information.

Editing the Content (.htm) 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.

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.

Creating New Pages:

To create a new, blank page based on a .dwt page layout, go to File > New > Page from Template. 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.

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> </p>

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

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:

Before Going Live:

  1. Change the page title on all pages as appropriate.
  2. Preview all pages by going to File > Preview in Browser. It's a good idea to check your site in more than one browser.
  3. Modify the keywords and description meta tags on each page.
  4. Review and set any form properties so you can receive any form submittals into your email client.
  5. Spell check each page.