Adobe Dreamweaver CS 3 – Using Templates and Libraries

Introduction

This guide explains briefly the use of Templates and Libraries available in Dreamweaver. When a website grows, you need to find the best ways to manage and keep a consistent look throughout the site, in the least amount of time possible. Dreamweaver offers two fantastic features to help webmasters manage websites, both small and large – the Templates and Libraries.

To outline the difference between these two features, consider that Templates are used to control the presentation/display of the website; how/where each item is positioned. Libraries are code sections such as menus that will be repeated throughout the entire website.

The use of these two features comes when you need to update a section from the website that appears on all pages of your site, for example, add a new item in the menu, modify the footer, or any design changes. If doing it manually, you will have to edit each page, but with Dreamweaver this is all automated and all you need to do is make the change once – Dreamweaver will automatically update the entire site for you.

Templates and Library items are also useful when using Adobe Contribute. This program is used by website owners to manage the content inside the website through a ‘what you see is what you get’ interface. Website updates can be done very easily, even directly through programs such as Microsoft Word. When you create a template in Dreamweaver, you specify which parts of the page users can edit, and  Contribute will automatically understand the syntax and does not allow the users to edit areas which are not ‘marked’ as editable.

In this guide, we will see how to create a basic template, and how to use two library items – one for the main menu and one for the footer. We will focus on creating a template and library items for a new website, however, note that the use of these two features can be implemented on existing sites.

If you would like to implement this feature, check out ‘File > Modify > Templates > Apply template to page’ after you have created your templates and libraries according to this article. Dreamweaver will automate most of the work involved in applying a template to a ready existent website, and it can be accomplished with ease!

Part 1 – Templates

Templates allow you to design a single page, and then use it to give a consistent layout and look throughout your entire site. The first step is to create a single page. You can choose any layout you want. For this example, we will use a very basic layout, since it’s just to explain the use of templates.

Our page will be divided into the following four sections

1. Header
2. Menu bar
3. Content
4. Footer

The following image illustrates where each section will be placed:

(click here to download the example site code and related files)

Leave the sample web page without any content, just create the containers that will be used. Normally, you have two ways to create the containers.

The traditional method is by creating a layout based on the use of tables. You would create a table, and then insert the content inside 4 rows, helped by nested tables.

The modern way of handling this type of work is by using CSS. To see an example, you can download and view this sample website.

 The first step is to make this page a Dreamweaver Template. To do this, go to ‘Insert > Template Objects > Make Template’. Select the site you are working on, if you want you can write a small description of this template and finally write the name of it. We will name this template ‘Main’.

Click on Save, and the template will be created. You will see that the filename was changed to ‘main.dwt’. The extension .dwt means ‘Dreamweaver Template’.

The next step is to create editable regions. Editable regions are the areas where the content will be placed. When you create a new page based on this template, only those areas that are specified as editable regions can be edited.

When you save it as a template, Dreamweaver automatically insert two editable regions for you, both placed in the <head> section. The first one allows the document title to be editable, while the second one is used to allow any specific content to be placed inside the <head> section, such as any JavaScript or specific CSS files.

Let’s start by creating the content editable region.  Make sure the cursor is inside the content area where you want the editable region to be, go to ‘Insert > Template Objects > Editable Regions’. A dialogue box will pop up asking you to name this new region. Write the name you would like, for our example we will name this region ‘Content’, and press ok.

Dreamweaver will mark the editable region with a blue border to assist you.

 Do the same process to create another two editable regions, for the top menu and the footer. The resulting page will look like this:

Now, just save the file. The template is ready.

Part 2: Libraries

Library items are used when you will use a code section several times throughout your website. In our case, we will be using the menu and footer in all the pages of our site.

Note that you can also leave these two sections part of the main template, however, when dealing with larger websites you will find that sometimes you need to use a different menu for certain areas in your page. If using templates only, you will have to create multiple templates. By utilising library items, you need only one template, and you can assign different library items according to the section the page is in.

Click on ‘Window > Assets’ will show you the assets section.  Then just click on the ‘Library’ button (see picture below)

Now, click on ‘New item’, and write a name for new library. We will call the first one ‘topmenu’. Double clicking on the new ‘topmenu’ library will allow you to edit its contents.

The ‘topmenu’ library will open empty. In this library we will insert the code for the top menu.  You can either design your menu in ‘design view’ or just write the menu in code view. Remember that this code will be inserted by Dreamweaver into a web page ready formatted with the <html><body>… syntax, so all you have to insert is the HTML code for the specific part. In the image below you can see the code view of the ‘topmenu’ library. Inside the file there is just the HTML code for the menu links.

Save the file, and create a new library item. This will hold the footer content. In this example we will name the library ‘footer’. The footer library will be used only to hold the copyright notice, but in a real live scenario it can hold any other content.

The next step will be to insert these library items into our Template. Open the ‘main’ template. Start by placing the cursor in the ‘menu’ editable region. All you have to do to insert the library is just select the library name you want to use, and click the ‘Insert’ button in the ‘Assets’ panel.

Repeat the process for the footer.

As you can see, Dreamweaver will mark the library items inserted into the web page by a yellow highlight.

The last step is to save the template. Now you have a Template for your pages, to help you:

1. Keep a consistent look throughout your website
2. Make any site-wide updates easily and fast

Part 3: Conclusion

Using templates, you can:

1. Create new pages based on the templates you created
2. Apply the template to pages that already have content. (Dreamweaver will ask you in what regions you would like to place the ready existent content)

For this example we will be creating the pages for our sample website based on the ‘main’ template created earlier. Select ‘File > New >’. A dialogue box will pop up. Select ‘Page from Template’, the name of the site and the name of the template, then click ‘create’. Ensure you have ‘update page when template changes’ selected, so when you update the main template, this page will also be updated.

As you can see, the page just created contains the contents of the template. Dreamweaver will not allow you to edit any part of the page unless it is an editable region. You can insert your content and save.

Now, you can go on and create the other pages of your site.

Your website can be updated in the following ways:

1. To update the menu and footer, just open the library and edit there. When you save, Dreamweaver will automatically update all pages that use that library.
2. To make any design changes across the entire site, all you have to do is edit the ‘main’ Template. You can basically change the whole look and layout of the entire site by modifying only the main template. Dreamweaver will update all the pages that use the template automatically. That’s a good time saver!

Also a nice feature you get is that this setup is compatible directly with Adobe Contribute. Using templates and libraries, you can allow certain people to edit the content of the website without the risk of modifying the design part.

Using Adobe Contribute, users will be able to only edit the content inside an editable region. Remember to select ‘contribute compatibility’ to on in the site properties if you intend to make the site accessible by Adobe Contribute users.

Article written by Noel Grech, 2007. All content is © ANG Malta 2007. Should you wish to publish this article, you will need to 1. Obtain permission by contacting us. 2. Include a link back to our website.