Libraries & Templates

home

Automating Dreamweaver with Templates and Libraries

Templates

Templates are files with the extension .dwt, which are stored in a Template folder in
the root the site. By creating a Template this folder will be created automatically.
Templates can be applied to multiple pages. By doing so the layout of the template is applied to those pages.
Initially all pages look identical based on the look of the Template. Once you insert Editable Regions (Insert/ Template Objects/Editable Regions) You can change these areas in all your pages.

The main characteristic of a Template is that it contains editable regions and regions which are locked and can’t be modified. That’s helpful because you can be certain that the layout will remain the same from page to page.

Create a Template

To create a Template choose File/New and choose HTML Template. The file will be saved into the Template folder and be visible and editable in the assets window. You can also save an existing file as a template (File/Save as template).

Once your Template is saved you can work on it like you work on a regular html file. You create a complete layout for your design idea. Then you decide which areas you would like to change from page to page.

Define editable regions

By default the content of the Template is locked. Nothing can be changed when you apply a Template to a page unless you defined editable regions. To be able to add content to the pages that are based on the template you have to define editable regions:

Select text, or Div Containers or other elements you want to be unlocked and go to
Insert/Template Objects/Editable Region

Name the region you defined editable in the Editable Region window, like "title", "main content", "side left"

Under Modify/Templates you will see the names of all defined editable regions.

Save the Template.

Apply a Template to a new file

Open a new document.

Go to Modify/ Template/Apply Template to Page.

Choose the template you want to apply from the list. You can have more then one template for each project or defined site.

Apply a Template to an existing file

A template can be applied to an already existing file. However you will have to add the file content to an editable region. A pop up window will ask you to select a region. Later you can move content into several regions available. Open a file and choose Modify/Template/Apply Template to Page. Choose the template from the pop up window

Open an existing document

Go to Modify/ Template/Apply Template to Page.

A window pops up to clarify in which editable region you want the old content to appear.

NOTE: If you have a page with a lot of content and apply a template to it, it's often easier to paste the content manually into the editable regions instead of allowing Dreamweaver to insert the content.

Work with a file based on a Template

You are now able to insert text or links, tables or images to those regions defined editable.
In general the page properties are locked and the only modification possible is the title of the page. That’s why you can’t add any style sheets or behaviors to a file based on a Template.
There’s no access to the head of a file that’s based on a Template.
That also means that you will have to create 2 Templates if you want to have files with 2 different background colors.

Edit a Template
By double clicking on the template in the site window or in the assets window you open the original template file. You can make changes, modify page properties, remove or add editable regions etc

Update files after modification
After you save the Template that already applies to some files, a window will pop up to ask you if you want those changes to apply to those files. Choose Update and let the software do the work. If you have 1000 pages based on the template these 1000 pages will be changed in an instance...

Links
If you defined a site, created a template and simply saved it, Dreamweaver will generate a Template folder on the root level of the site. The links in the template will be relative to this position. However when you apply the template to pages on different levels of your file structure hierarchy the links will be automatically changed according to the new position.
The same is true for Library Items below.
CSS
Templates operate in conjunction with CSS. If you embed the styles into the head of the Template, remember that the code will be part of every page of your project. Therefore linking an external style sheet for the main rules and using very few head and inline styles to overwrite external ones when desired is the way to use them most effectively.

Library items

Library items are HTML snippets and have the extension .lbi. They are similar to Templates as they are locked code that can be applied to multiple pages but they are not used for a full page design but for repeating elements throughout a web project. They could be used if an element isn't part of every page but of several ones.

They are stored in a Library (Window/Assets: the book icon displays the Library) that will be created as soon as an object is added to the Library in Dreamweaver. The Library folder will be stored in the root folder of your site and created automatically like the Template folder. Content that appears on multiple pages or content that is updated often but doesn't’t really change it’s layout would be worth being saved in the Library.

Each root folder uses a different Library folder.

The comment  will be added to the HTML code with every item you insert into a page. This helps Dreamweaver to detect all the items in the site in case of modifications and updates.

Library items are html elements. They can be tables, text, buttons - anything you add to the Library. A Library item can either be changed by directly editing it and then using the update option , so that each item used within a project will be replaced with the new version. They can also be changed within an html document directly but need to be "detached from the original" (in the Properties inspector) which ends its status as a Library item and makes it regular code again.

Library items are also great for preserving consistent looks throughout your site. For example if you save a bottom navigation bar and some text as a Library item you can insert it into each page and it will look the same.

The following is an example for an HTML element that sits on the bottom of each page of a web site. By adding it to the Library it can be added to each page with ease (just drag and drop). In case of change Dreamweaver will notice as soon as a Library item is saved and ask if you would like to update all pages.

contact me projects portfolio about me map

Please email me with questions: me@moi.com

This is how the code looks:


<table width="500" border="6" bordercolor="#CC3300" bgcolor="#CC6699">
<tr>
<td><table width="500" border="0">
<tr>
<td><table width="500" border="1" bordercolor="#FF9900">
<tr>
<td align="center">contact me </td>
<td align="center">projects</td>
<td align="center">portfolio</td>
<td align="center">about me </td>
<td align="center">map</td>
</tr>
</table></td>
</tr>
<tr>
<td bgcolor="#999999"><h3 class="worklinks"><br />
Please email me with questions: <span class="style6">me@moi.com </span><br />
<br />
</h3></td>
</tr>
</table></td>
</tr>
</table>


To create a Library item

Go to Window/Assets

In the Assets Palette click on the little book icon on the left (the last one)

Select a page element like a table or text

Go to Modify/Library/Add Object to Library.

Name the item in the window that comes up and view it in the Library.

Double click the Library item to view and edit the html page.

Here you can modify and fine tune your item. You might want to add styles here
or even attach a style sheet.

Drag Library items from the Assets window into your pages

To edit Library items “globally”

Double click the item in the Library.
The .lbi page will open and you can edit the item.
The changes are not yet applied to all the pages containing this item but a window pops up
that lets you define the updating process.

To edit Library items “locally”

The only way to edit an item locally is to detach it from the library in the properties inspector.
The object isn't’t part of the library anymore and would not be included in updates.

To update the site after a modification
After you modified and saved a Library item a window will pop up to define the update process.
You have the choice between

Updating the entire site

Updating selected pages

Updating the current page

You can also update files by choosing Modify/Library/Update Current Page or Update Pages : select files you want to apply the changes to.

CSS
Library items will be stored in the Assets Panel without CSS. Therefore the styles used to create the item have to be moved into the external style sheet, linked to the template or page the Library item is applied to, to see it formatted and styled.