Template Guide — Using the Templates
Before you start building your web site, you will need at minimum a general understanding of how the templates are set up and how to use them.
The web template packages are optimized for and best customized by using Adobe Dreamweaver, version CS3 or higher. They utilize the functionality of Dreamweaver templates, which allow designers and developers to create base documents that allow all pages of a site to contain the exact same design but different content. By using Dreamweaver templates, you can control the basic design of a web site in a single place with a single file. When you modify one of these tempate documents, the design of all pages based on that template will automatically be updated as well.
To use use Dreamweaver Templates, you will need to set up a Site Definition for the web site you are building in Dreamweaver (more information).
In these template packages, the base design of each page is contained in files in the "Templates" directory. Dreamweaver template files end in the file extension ".dwt". You will notice that each HTML file present in the template package is based on one of the templates in the package. So if you make changes to a non-editable region of a template file, when you save those changes, all pages based on that template will be updated to reflect this change.
There is plenty of information available on the web for how to best utilize and take advantage of the functionality of Dreamweaver templates, and we'll suggest a few resources below. For the purposes of this guide, though, here is what's important to know: If you use Dreamweaver to customize these templates, then you should make any changes to the DESIGN of the site (i.e. header, navigation, footer) on the documents found in the "Templates" directory.
So the basic basic rule of thumb when working with these templates in Dreamweaver: Make design changes in the .dwt files, and make content changes in the .html files.
When you make changes to templates, pages that are based on them are updated automatically. By customizing your design in the templates, you ensure that you can control your site's look and feel in a consistent manner, while allowing for total customization of content on a page-by-page basis. The content for each page can be fully customized within the editable content region of each page.
More information about using Dreamweaver templates:
Cascading Style Sheets (CSS)
The layout and design of these templates is largely accomplished through the use of a single Cascading Style Sheet, or CSS, that is found in each template package. For the most part, the base CSS should suit your needs perfectly and allow flexibility within the content area of the template. Should you need to utilize additional CSS to accomplish custom design elements in your implementation of the templates, you may append your additional styles to the existing style sheet by editing the file "style.css."
To correct certain CSS bugs inherent to Internet Explorer 6, we target that specific browser with an IE6 style sheet that includes a few fixes. Because Dreamweaver does not recognize these conditional comments, it will not update the path to your IE6 CSS. So we remedied this by pointing to UA home's IE6 stylesheet by default. If you would like to use your locally-hosted version and not rely on our fixes affecting your sites, it is recommended that you update the path to point to your IE6 style sheet.
There are several areas in which you'll need to edit the HTML within the templates in order to tailor the look and feel of the site to your needs. Optionally, you may also need to edit the CSS to achieve greater level of customization for your site. This process is described on the next page, Customizing Templates.