 |
WEB DESIGN SKILLSModule Study Guide
|
Session 11
Using templates
On this page:
Templates
Dreamweaver templates
When working on a project which involves many pages, especially if different people are involved, the use of templates provides one way of ensuring consistency across a site. Style sheets also supply this, but templates can include common content as well as layout.
It should be noted that for this approach to work, all users must be using Dreamweaver, as the template files are specific to the software. (Other design programs use similar but incompatible systems.)
The principle
Suppose you are creating a site in which all the pages have an identical layout, and also some common content (e.g. a top menu). Using a template system you would create a template which had all the common content laid out in place, and also areas which were blank on the template but which would later be filled in by different content for the different pages.
Individual pages are then made from the template. Content is added to the blank areas, whilst the common areas are protected from accidentally being overwritten. Any changes made to the underlying template are automatically applied to each page based on that template.
Making a template
Go to 'File>New' and select 'Blank page>HTML template':
This will create an apparently blank page which is your template. Save it at once using an appropriate name (it will be put into a special 'templates' folder within your root folder with a 'dwt' suffix).
You can now create a layout on this page. This can be done either by using a table-based design or with layers. Each area is by default a fixed (non-editable) region, which means that when you're editing the template you can insert content into those areas, but any ordinary pages based on that template will have those areas protected.
Adding editable regions
Any 'region' or area on the template can be made 'editable', so that pages based on the template can have individual content inserted. To do this, click in the region you want to make editable and select 'Insert>Template objects>Editable region'. A dialogue box appears allowing you to name the region. Choose a suitable name and click 'OK'.
[There are other types of region: an 'optional region' has content that may or may not appear in a page based on the template; a 'repeated region' is a section of the page that is repeated as many times as necessary; an 'editable tag attribute' allows you to fix the content but give the user limited control over the layout (e.g. alignment or text colour).]
Making pages based on a template
Once you have made a template and inserted all the fixed content, you can start to make actual pages based on that template. Go again to 'File>New' and this time select the 'Page from template' tab.
Choose the right 'site' (if you have more than one) in the left-hand box, and the right template in the right-hand box and click 'Create'. A new HTML page will be created which will look like the template. You will be able to add content to the editable regions, whilst the fixed regions will already be populated with the content inserted into the template.
You can still edit the template, and you will be given the option when you save the changes as to whether you want the new content and layout to be applied to the pages based on that template.
Using Dreamweaver's Design Pages
Dreamweaver comes with a selection of pre-designed pages with which you can start your design, instead of beginning with a completely blank canvas. Most of these are fairly nondescript, and are primarily concerned with positioning. You have to add colours, images etc. to make the page look interesting.
Go to 'File>new'
Choose from 'Starter Page (Theme)' or 'Starter Page (Basic)'.
If you want to make a template from a Page Design, click on the button marked 'Template' (bottom right of the diagram above). You will then have a new template based on the chosen design. Most of the page will be 'editable' by default, but you can 'lock' any area by selecting the contents, right-clicking in it (PC) and selecting 'Templates>Remove template markup'.
Exercises
- Create a template as above. Make a simple layout with, say, a top bar, a side bar and a main area, using either a table or layers.
- Make the main area editable, but leave the top and side bars fixed.
- Add content in the template to the top and side bars.
- Save the template.
- Make a new page based on that template, and add new content to the editable region (main area).
- View on a browser.
- Make a second page based on the same template and add different content to it.
- Change the content of the fixed areas (in the template) and check that it affects both of the new pages.
