Templates
Dreamweaver CS4
A screen captured walkthrough by Scott Hastings
This page describes how to use custom Dreamweaver templates. Screen shots of Dreamweaver CS4 have been added to aid in the locating of certain buttons and areas of the Dreamweaver interface. We will explore how to set up a site, folders, and then prepare an html file for conversion into a template and finally convert it into a custom template. From there we'll start building the individual pages for the site.
Managing Sites
So far this document has not properly covered the FILES PANEL. It will be very important to understand how websites are organized by Dreamweaver.
First off we need to understand LOCAL and REMOTE files. Local files are found on our computer, they are the files we work on to make a web page. They can include image, html, CSS, and any other file format that is require for the site to appear properly. Remote files are the very same files mentioned above, but are located (usually) on a remote server. This is the active working copy of the site. The REMOTE files are the files that your viewers see.
If you've never set up a site in Dreamweaver we will now. If you already have a site set up, skip this part. We need to tell Dreamweaver at the very least where our LOCAL files are going to be stored. This way when we create page links, templates and other things, Dreamweaver will know how to properly relate to them.
To start setting up a site in Dreamweaver go to the SITE MENU > MANAGE SITES. Choose NEW on the right to create a new site. In the next dialogue that opens there are two tabs at the top, a BASIC and an ADVANCED tab. Click the ADVANCED tab and on the LEFT category area choose LOCAL.
In the dialogue insert the following info: Give the site a name, then choose a folder on your computer to house your local files. If you'd like, and I recomend it, create a folder in your new site folder called 'images'. Leave the default links relative to document and if you have a website domain type it in as well (you don't need this). That's it. Click OK to continue. Your new FILES PANEL should look similar to this:
It shows the site name you gave it and that you are viewing your LOCAL files and not the REMOTE. The dropdown lets you switch between the various file locations. We only need LOCAL settings for this tutorial.
The files panel has a bunch of buttons along the top now that will be very useful once you have a domain and need to upload and syncronize your local files with the remote ones. For this tutorial we won't need most of them since we are only working locally.
Now that Dreamweaver knows where we want to save our files we should put any and all files we've already been working on into that folder and any images we are using in the images folder. Take a moment to move these files into the correct folder, these files should include the HTML file we've been working on, the CSS file we've created to style and format the html and any images should be put in the images folder.
You may need to fix some of the links to your images and to your CSS file since they aren't in the same relative location that they were before.
If so, select any missing images and use the LINK area in the PROPERTIES PANEL to fix the image. In the case of the background images you'll need to edit the CSS RULES in the CSS STYLES PALETTE. Double click the body style, click the BACKGROUND CATEGORY and use the BROWSE button to re-assign the background image. You may also need to fix the link to the styles. At the bottom of the CSS STYLES PANEL there is an ATTACH STYLE SHEET button. It looks like a chain link. You may need to delete the old CSS file in the CSS STYLES PANEL. Click on the .css file that doesn't have any styles in it and click the garbage can at the bottom of the palette.
Making the conversion
What we do now it create a Dreamweaver Template file (DWT) from our existing webpage and replace any changeable content with editable regions. This will allow new webpages to be created from the basic template but still allow us to add and change unique information in certail areas on the subsequent pages.
To start, go to the FILE MENU and choose SAVE AS TEMPLATE...
You'll be asked to give the site a description and name. Fill these out and make sure you are creating the template for the correct site at the top. It will probably be different than the one depicted. Click Save to finish this step.
It will probably ask you if you want to update links. Click YES and Save the file.
Now you have a DWT file to work with. This file was created by Dreamweaver and is saved in a special Template Folder in your site. If you ever need to make changes to the navigationbar or other Template elements, then you need to edit the DWT file. Any page made from the template will not allow access to edit any area protected by the template. Preventing design inconsistencies between pages.
The next stage in creating a proper template is to add EDITABLE REGIONS. We'll replace the main content with some as well as the sidebar information. Those two areas will contain different information than the Header area, which will remain the same between all the pages. Allowing complete navigation to any page in the site from any page in the site.
Select and Delete the text in the side bar and choose INSERT > TEMPLATE OBJECTS > EDITABLE REGION. Dreamweaver will ask for a name. Give the region a suitable name (i.e. sidebar) and click OK. A small greeny blue box will appear in the sidebar. This is the editable region. Don't worry if it looks small, they will expand as content is added to them later. They will adhere to the formatting applied to the division or tags around them. So whatever is in the Sidebar will act exactly the same as before. Add another editable region in the main Content area and remove the existing data.
The following is a screenshot of this site taken from Dreamweaver. Naturally your site may look different than mine. Especially if you had fun editing and changing various settings or making your own graphics for the header or the top button. But in the shot you can see the Sidebar and maincontent Editable Regions.
Now my template is ready for mass production. Save the DWT file and close it. The next step is making the individual pages to create the SITE.
