Templates and Libraries
Learning Objectives: (originally created for Dreamweaver 3)
In this section, you will learn
- To create Templates and Library Items
- To mark an existing area as editable
- To insert a new editable region
- Adding content to your template
- Using the Repeating Elements Library
About Templates and Libraries
Creating a Web site is a combination of the excitement of producing visually pleasing web pages, and the tediousness of repeating elements such as color schemes, addresses, and format over and over again. Using Dreamweaver 3, you can create a template for a consistent look and feel, as well as libraries, for repeating elements, such as your navigation bar or a company logo, for each page. Templates and libraries allow you to update and maintain your pages quickly and efficiently.
Templates are composed of two types of regions: locked and editable.
Every element on a template falls into these two categories. Either you have an element that is always there, and therefore locked into its position, or you have content that will be added from page to page, and lies in an editable region. When you first create a template, all areas are locked. Part of the process in creating a template involves defining which portions of that document can be altered, or editable. After they are created, templates can be altered to mark additional editable areas or to relock editable areas. You can also detach a document from a template, and edit anything in the document. However, you cannot reattach the document to a template without losing the new content.
A document based on one template can be changed to a completely different look but with the same content, if it is attached to a new template with identical editable regions.
You can design a template any way you'd like. Perhaps the best course is to create a single page that has all the elements you wish included on your template. Then convert that document into a template, and mark all the changeable areas - whether images or text - as editable regions. Before saving your document as a template, consider the following:
- Use place holders. Place holders will help give shape to your page, and will help in remembering which elements you wish to include. Set images to the height and width desired. Mark dummy text where content will later be inserted.
- Include as many elements as possible within the template. No sense in repeatedly adding the same information or object over and over again.
- Include your <meta> information. This is very important. You cannot enter separate <meta> tags for each page without coding by hand. Be sure to include this information within your <head> tag onto your template.
- For the same reason, include any needed behaviors and styles to your template. Since all the code is locked in the <head> tag once a template is saved, you cannot apply new behaviors or create new styles into documents created from templates.
Once you have a page created that has all the information you want included for a template, select File > Save as Template. The entire document is now locked. If you tried to create a new document from this template "as is", you would receive an alert box from Dreamweaver, informing you that the template does not have editable regions.
There are two ways to mark your template for editable regions. The simplest way is to designate any existing content as an editable region. The second way is to insert a new editable region anywhere you place your cursor. In either case, you will have to give each region a unique name. Dreamweaver uses the unique name to identify the editable region when entering new content, applying the template, and exporting or importing XML.
Each editable region must have a unique name, but the names need only be different from other editable regions on the same page.
A common problem in using templates are in the creation of links. Often, a link is added to a template but it won't work with the new page created using the template. The main cause of error is with the path. Dreamweaver puts the page into the Templates folder, which tends to removed one level away. Using the folder icon to link to an existing file should remedy this.
There is a known problem when using lists in template-based pages. If you select a series of lines in an editable region, and then try to convert them to a bulleted or numbered list, Dreamweaver improperly inserts the code above the lines. This can also happen if you try to indent the lines. One workaround is to use the Quick Tag Editor in Wrap Tag mode to surround the text with <ul> or <ol> tags. You will then need to manually insert the <li> tag to each item.
~ peace, polka and piwo