TEMPLATES

Templates in Dreamweaver are a lot like master pages in InDesign; you create the content you want to appear on all the pages in your site in a template file (DWT), and then create areas where content will change from page to page.

Any portions that you don't define as "editable" can't be changed on individual pages, but if you change the template itself, all the pages that use it will update to reflect those changes. This can be mighty handy if you've got a bad link in a nav bar, for instance. Fix the link in the template, and avoid having to change it on every page in your site.

HTML documents created using a template are referred to as "child" pages, with the template being the "parent."

Begin by creating a template page. Select "new" from the File menu and select "Blank Template" and then "HTML template." You can choose a predefined layout, or none from the Layout column.

If you are not using one of Dreamweaver's templates, start by creating a "wrapper" <div>, which will surround all the content in the page. Then add <div> tags for the content areas—banner, menu, main content, images, sidebars, and so on.

Create anything that will be common to all the pages in your site—this could include background images or textures, banners, nav bars, and so on. Add these elements to the template page using the Insert panel.

Create and assign CSS styles that you want to apply to all the site's pages to your template page. I recommend an external CSS file to control everything. Use File > New, and select CSS for file type. Once that's open, save it loose in your root folder so all files you create can access it easily.

If you didn't create <div> tags to start, create any <div> areas that will contain content that changes from page to page. When inserting a <div> from the insert menu, you will be asked to create a Class or an ID. Either is fine, although Classes can be applied to anything in an HTML file, while IDs are unique and can only be assigned to one element.

Select each <div> that you want to be able to modify, and from the Common tab of the Insert panel (or Insert > Template Objects), and choose Editable Region. Name each one with a unique name so you remember what goes where (or so someone else who may be using it knows). Don't assign any areas that you don't alter inadvertently as editable regions.

Dreamweaver will ask you to name each region. It's also not a bad idea to put some descriptive text into each area so when you're creating new pages from the template, you remember what's supposed to go where.

Save the template when you're done.

Once you've created and saved a template, it's given a suffix of DWT and stored in a Templates folder that Dreamweaver automatically creates in your site folder. Don't move the folder or the files or Dreamweaver will loose track of them!

To create a new page using the template, select New from the File menu. In the dialog box that opens, click on the Template option. If necessary, navigate your way to the templates folder inside your site folder and select the template you want to use.

Note at the bottom right is the option to update all pages that use this template whenever the template changes. Leave this checked since it will prevent huge editing headaches later. If you ever want to disconnect a page from the template, you can do so using Modify > Templates > Detach from Template.

The new document contains any content you placed or created in the template, and the editable regions where you can add text and/or images.

If you try to mess with anything you didn't define as editable you get a "not allowed" icon.

If you find you need to edit the template itself, open it by choosing Modify > Templates > Open Attached Template, or Open from the File menu, and navigating your way to the Template folder in your site folder.

Saving an edited template triggers a dialog box that asks you if you want to update any pages that use that template.

When you click "update" another window opens and shows you which files were updated.

Very nice.

If you find you need to edit a Fireworks banner or nav bar that's used in a template, make sure to use the "edit from Fireworks" button from within Dreamweaver: if you edit the original and try to replace it in the template, lots of weird things happen.

back to top

YOUR TURN

At this point, you should have a good idea of what your pages are going to look like, even if you don't have all the content created yet.

Now is a good time to start working on a template to use to develop all the pages in your site. It will help you determine how much text you need, as well as where the images are going to go and what size they need to be to fit.

It's also time to start looking seriously at the CSS rules you need to style your pages. Keep all the rules you define in an external style sheet since that will make things a lot easier to edit, should you need to do that later. You can create internal style sheets for each page to tweak things, once you start actually producing them.

Create a main page template, making sure that any content areas that will change from page to page are editable, and those areas that will be consistent from one page to the next (background, banner, and navigation, at the least) are accounted for.

Create any banner or masthead graphics in Photoshop. Use HTML for the navigation for now. It will be easy to replace it with buttons from Fireworks down the road.