16. Making Life Easier: Using Templates, Libraries, and Snippets
In This Chapter
Building Pages Based on a Template
Working on Library Items with the Property Inspector
The first thing you do when you begin a site in Dreamweaver is define a site root folder, as discussed in Chapter 2. You tell Dreamweaver where you’re keeping all your site files, and Dreamweaver rewards you for sharing the information by making all sorts of cool site-wide tools available to speed up your workflow and make your life easier. In seconds, Dreamweaver’s site management tools can make changes to every file in your local site root folder—changes that would take you much longer done one file at a time.
We’ll cover two of those time-saving whole-site tools—templates and library items—in this chapter. In addition, you’ll learn how to create time-saving bits of reusable code called snippets. You access templates and library items from the Assets panel. Snippets have a separate panel.
Before getting into the details, some brief definitions are in order. Templates are like master page designs. They create a uniform page design for a site while allowing certain material on each page to be customized for individual pages. Library items are not full pages, but reusable objects with text, code, images, or other elements that you insert in documents; for example, you can create a navigation bar as a library item. Updating either a template or a library item results in the automatic updating of any page in the entire site that is attached to the template or library. Snippets are custom-built code samples that you save for quick insertion. Changing a snippet doesn’t have any site-wide effects.
Creating a Template
Templates are perfect for many situations. For example, let’s say you have a large site where many different individuals change content and add pages. Using a template provides control over the page layout and design by restricting changes to only certain editable regions on a page. Other areas on the page are locked regions, which can’t be changed by people working on an individual page. Locked regions can be edited only in the original template file. This kind of control guarantees a consistent look and feel for a site and prevents any accidental changes to locked regions.
When a change is made to a template, every page made from, or attached to, the template is automatically updated throughout the entire site. You can create a template from scratch, but it is simpler to use an existing page as a model for the template, and that’s what we’ll explain here.
Before you save a document as a template, make sure you’ve already included any needed <meta> tags, style sheets, behaviors, or other underlying parameters. These page elements are located in the locked regions of a template. There’s no way to add things like style sheet links to individual pages made from a template—they must exist in the template already.
2. Choose File > Save as Template.
or
Click Make Template in the Templates category of the Insert panel 
.
The Make Template button in the Templates category of the Insert panel creates your template.
The Save As Template dialog appears with the Site pop-up menu set to the current local site 
.
Any page can be saved as a template. The name you type in the Save as field will be followed by the file extension .dwt in the Assets list.
3. Enter the requested information in this dialog.
Existing templates: You don’t enter anything in this field. Dreamweaver lists any existing templates for the site automatically.
Description: Type a brief description of the template. This is optional but recommended.
Save as: Type the name of the template. You can omit the file extension; Dreamweaver takes care of that for you, as described next.
4. Click Save.
If it doesn’t already exist, Dreamweaver adds a Templates folder to your site files. Your new template will be inside this folder, with the file extension .dwt, which indicates that the document is a Dreamweaver template.
Tip
It’s possible to create a template from scratch. Choose File > New, then in the New Document window, click the Blank Page category and select HTML template in the Page Type column. Or you can start one using the New Template button in the Templates area of the Assets panel.
Tip
Templates are for local use; they’re never loaded in a browser. The Templates folder and its .dwt files don’t need to be uploaded to the server. Just upload the individual HTML pages made from the template. To make this easier, you can cloak the Templates folder, which prevents Dreamweaver from uploading it to the remote server. See “Cloaking Files and Folders” in Chapter 2 for more information. On the other hand, you might choose to upload your Templates folder to the server so that you always have a handy backup of your templates.
Adding Editable Regions
Once you’ve saved the .dwt file, you will want to open it and define any regions you want to be editable. Regions on the page that you don’t specifically mark as editable will be locked and can’t be changed by anyone who is using Contribute or Business Catalyst and working on pages made from your template—hey, that’s the whole point!
To add an editable region
1. Open the template document.
2. Select the element to make editable (for example <div>, <img>, or <td>) with the tag selector in the document window.
or
Select the text to make editable. This choice is most useful when the text is within a div. Selecting the entire div, rather than just the text within it, makes everything about the div editable, including its position. You probably don’t want your users to be able to change anything other than the text, so select just that text and it will be the only editable part of the div.
3. Click Editable Region in the Templates category of the Insert panel .
Use the Templates category of the Insert panel to designate editable regions in the template.
or
Choose Insert > Template > Editable Region.
The New Editable Region dialog appears .
A short, descriptive name is best for a template region. It’s best not to use spaces in the name; instead, use the underscore character, as shown.
4. Type a name for the region.
The editable region will be outlined in green in the document window. A tab at the upper-left corner of the region displays the region name 
.
In the document window, the editable region is indicated by a visible tab giving the region name.
6. (Optional) Delete the text that was in the region and replace it with some general instruction regarding the region—for example, “This region is for main content.” If you don’t do this, it’s OK—anyone making a page from the template can replace the text later.
Tip
You can make any of the following editable: an entire table, the table header, a table row, or individual cells within a table. But you can’t put a table column or multiple noncontiguous table cells in a single editable region.
Tip
Don’t use special characters in region names: no ampersands (&), single quote marks (’), double quote marks (”), or angle brackets (< and >). You can use spaces, but we recommend you use the underscore character (_) instead to match the naming conventions of other items in Dreamweaver, such as form elements and CSS IDs.
Tip
Page titles (the title that appears at the top of a web browser window, defined by the <title> tag) are editable by default on pages that are created from templates.
Tip
When you name your editable regions, give them region names that make their purpose clear for the people who will eventually be entering content into the region, such as Main_Content in this example.
Removing Editable Regions
If you make a region editable and later decide you want to lock it instead, it’s easy to remove the editable region. This doesn’t remove the content within the region; it removes the ability of the user to edit anything in the region. As the designer, you can still put any content you want in the region. But that content won’t be editable by the user.
To remove an editable region
1. Click the tab in the upper-left corner of the region to select the region.
2. Choose Modify > Templates > Remove Template Markup .
To remove an editable region from a template, choose Remove Template Markup.
3. The region is locked.
Other Kinds of Template Regions
Dreamweaver can create more complex editable areas in addition to the basic editable region. These kinds of editable regions are used less frequently, but they’re still useful when you need them. You probably noticed the options in the Templates category of the Insert panel (see 
in “Creating a Template” and in “Adding Editable Regions”). They are:
Optional Region: You set conditions for optional regions, indicated by the word if in the tab showing the region name. Optional content can be either hidden or displayed, depending on whether the conditions are met. For example, let’s say that you have a page of upcoming events. You have an image that says “Coming Soon!” that you want to appear next to events that will occur in the next month. You can write code that checks the date and then displays the “Coming Soon!” image in an optional region when the code expression is true.
Repeating Region: Repeating regions can be duplicated by the user as often as needed. They’re useful for things that vary from page to page—for example, a chart of product colors or sizes or a list of recipe ingredients. Repeating regions aren’t editable until you define the editable areas of the region.
Editable Optional Region: As with optional regions, you can decide whether or not to display content in these regions. Editable optional regions are, well, editable.
Repeating Table: Repeating tables are actually repeating regions, but they automatically include table tags, so you can easily use them for tabular data.
Building Pages Based on a Template
Most of the time, you will create new pages based on your template. This is the easiest and least confusing way to make templates work. It’s also possible to take an existing page, say from an older site that you’re completely redesigning, and apply a template to that page. That method is a bit trickier.
We like working with templates with the Assets panel, because it’s compact and you can do a bunch of things in one place. Dreamweaver CC doesn’t open the Assets panel by default, so if it’s not already open, choose Window > Assets, then drag the Assets panel into the same tab group as the Insert and Files panels.
To make a new page from a template
1. Choose File > New.
The New Document dialog appears.
2. Click the Site Templates tab, and then click the site you are working on in the Site column.
The existing templates for that site appear in the Template for Site column.
3. Select the template you want from the Template for Site column.
A preview of the template appears in the dialog .
If you begin a new page from a template with the File > New command, you must choose the site and then the template.
4. Click Create.
A new page, based on the template, appears.
5. Add content to the editable regions, and save the new document with an appropriate filename and location on your site.
Tip
You can create a new page from a template faster once you get used to working with templates. In the Assets panel, click the Templates category, and then right-click the template name and choose New from Template from the context menu .
Fewer steps are involved in starting a new page from a template if you right-click the template name in the Assets panel.
To apply a template to an existing page
1. Open the existing document to which you want to apply the template.
2. In the Assets panel, select the template you want and click the Apply button (in the lower-left corner) .
Modify an existing page to fit into a template page by selecting the template and clicking the Apply button.
or
Drag the template from the Assets panel to the document window.
or
Choose Modify > Templates > Apply Template to Page. The Select Template dialog appears. Click a template in the list to choose it.
The Inconsistent Region Names dialog appears 
. This dialog allows you to tell Dreamweaver in which region of the new page it should place the document’s existing content.
When retrofitting an existing page to work with a template, you must decide where to put the content. The pop-up menu shows possible regions.
3. In the Inconsistent Region Names dialog, do the following:
In the scrolling list, select an unresolved region.
Use the “Move content to new region” pop-up menu to select an editable region for the content.
If you choose Nowhere from the pop-up menu, the content is removed from the document. If you click the “Use for all” button, all the unresolved content is moved to the selected region.
4. Click OK.
5. The resulting document probably needs some cleaning up to work seamlessly with the template. For example, you may need to restyle some text or move a bit of content manually. After that is completed, save as usual.
Tip
Dreamweaver expects the Templates folder to be at the top level of your site structure. Don’t move it into a subfolder. If you do, Dreamweaver won’t display the template files in your Assets panel or in the New Document template list.
Modifying a Template
Templates give you tons of control over what can be edited and what can’t. Sure, that’s important. But what happens if you make lots of pages from your template and then something changes? Maybe you need to add a new item to the menu, or you need a new editable region on the page. The answer is that something really cool happens when a Dreamweaver template is modified: Dreamweaver automatically changes all the pages you’ve already made using that template. So you can make changes to just one page (the template) and have those changes automatically ripple through the site.
Normally, you’d start your modification directly in the template file. But you can also start from any document that is attached to the template. You can pick and choose the attached pages to which you want the changes to apply.
To modify a template file
1. In the Assets panel, click the Templates button to display the templates, and then double-click the template file you want to edit.
or
In the Assets panel, click the Templates button to display the templates, and then highlight the template file and click the Edit button at the bottom of the panel.
The template file opens in the document window.
2. Edit as desired, and then choose File > Save or press Ctrl-S (Cmd-S).
The Update Template Files dialog appears. Each file attached to the template is listed in the dialog .
Here’s the powerful part of using templates: Dreamweaver offers to update template-based pages when you change a template.
3. (Optional) Select one or more of the files in the dialog. To select a single file, click its name. You may also select noncontiguous files in the list by holding down the Ctrl (Cmd) key and then clicking the files you want. Surprisingly, selecting no files in this dialog is the same as selecting them all.
If you click Update, every selected file attached to the template will update. If you click Don’t Update, none of the files attached to the template will update.
4. Click Update.
The Update Pages dialog appears . Dreamweaver sorts through all the files in your site and makes the updates, showing you the progress in the Update Pages dialog.
If you allow Dreamweaver to update template-based pages, it reports the results when it’s finished.
This dialog also allows you to update all the pages in the site to their corresponding templates, or to just update files based on a specific template. If you don’t need any additional updates other than the ones Dreamweaver already made, go to step 8.
5. (Optional) From the “Look in” pop-up menu, choose Entire Site, Files That Use, or Selected Files.
The first choice reapplies all the templates in the site to files made from those templates. The second choice, which is what you will want most of the time, updates only the pages that are based on the template you just edited. Selected Files applies changes only to the pages that you selected in step 3.
When you make a choice from the “Look in” pop-up menu, the inactive Done button becomes active and its label changes to Start.
6. (Optional) Make sure the Templates check box is selected.
7. (Optional) Click Start.
When the process is complete, the Start button changes to Done and becomes inactive.
8. Click Close to dismiss the Update Pages dialog.
9. Close the template file.
To modify a template attached to a current document
1. With a document based on a template open, choose Modify > Templates > Open Attached Template.
The template opens in a separate tab.
2. Make your modifications as described in the previous section.
When you save the template, you’ll be prompted to update pages attached to that template, including the page you started with.
To modify an individual template-based page
1. Change a template file, as described previously. In the Update Template Files dialog , click Don’t Update.
2. Open a document attached to the same template.
3. Choose Modify > Templates > Update Current Page.
The page updates with the changes you made to the template. No other pages on the site will update.
Tip
When your template links to a CSS file, all your template-based pages link to it as well. If you change your CSS rules, the pages created from the template automatically reflect those changes in exactly the same way non-template-based pages reflect CSS changes.
Tip
HTML pages changed by the update of a template file need to be uploaded to the server for the change to be visible to your site’s visitors. The easiest way to do this is to synchronize the local and remote sites. See “Synchronizing the Local and Remote Sites” in Chapter 2 for more information.
Creating a Library Item
For someone working alone, the restrictions imposed by using a template may be unnecessary or even annoying. For example, when you use templates, you have to set up the editable and locked regions, and then when you go to modify a page based on the template, you don’t have access to page elements in the locked regions. These restrictions are great if you’re a designer who is giving pages to co-workers to modify. But on sites where you want to exercise total control over editing every page, library items offer some of the same time-saving abilities as templates, including the ability to update pages and maintain consistency, but with far fewer restrictions.
Library items aren’t full pages. They’re small bits of text, images, or code that you insert when needed. Good material for a library item might be a navigation bar, a copyright notice, a list of links, a graphic masthead, or perhaps a search box. If you want to use something frequently, have it display consistently on any page, and update all instances of it at one time, a library item fits the bill. And library items are easy to create and use.
To create a library item
1. Open a document.
2. Select an element in the document body. It can be anything you want to reuse: text, tables, forms, navigation bars, images, or other elements.
3. Do one of the following:
Choose Modify > Library > Add Object to Library.
or
In the Library category of the Assets panel, click the New Library Item button.
or
Drag the selection into the Library category of the Assets panel.
4. The item appears in the Library category of the Assets panel . Type a name for the item.
Type a name for your new library item here.
In the document window, the item will be highlighted with a color, indicating that it’s a library item.
Tip
The default color used to highlight a library item is yellow. If desired, you can change this color in the Highlighting category of Dreamweaver’s Preferences panel.
Tip
If it doesn’t already exist, Dreamweaver creates a Library folder at the top level of your site. Library items are stored in this folder, with the file extension .lbi. The folder is for local use and doesn’t need to be uploaded to the server.
Using a Library Item
All you have to decide is where you want to use your library items on your pages. The rest is easy.
To insert a library item
1. Position the insertion point in the document.
2. Drag the library item from the Library category of the Assets panel into the document.
or
Highlight the library item and click the Insert button in the lower-left corner of the Assets panel .
A quick way to insert a library item into a document is to use the Insert button in the lower-left corner of the Assets panel.
The library item appears in the document.
To delete a library item
From a document: Select the library item in the document window and press Backspace (Delete).
From a site: Choose the library item in the Library category of the Assets panel and press Backspace (Delete). This step cannot be undone.
Tip
Library items become part of the page’s code and are subject to any CSS rules in style sheets linked to the page. For example, if your library item contains a paragraph and you have a CSS rule for the p selector, the inserted item will reflect the rule.
Editing a Library Item
You need to be a bit careful when you edit library items, because when you change a library item, Dreamweaver changes all instances of that item throughout all the pages of your site, except any documents that are currently being edited. This can take some time if you have a large site, and you have to edit the item again to undo a mistake; the Undo command won’t save you in this case. It’s nothing to worry about; just be aware that changes can have far-reaching effects.
To edit a library item
1. Do one of the following:
Double-click the item in the Library category in the Assets panel.
or
Highlight the item in the Library category in the Assets panel, and then click the Edit button in the lower-right corner of the Assets panel.
or
Highlight the item in the document window. The Property inspector shows information for the library item . Click Open.
When you select a library item in the document window, you can use the Property inspector to open the library item.
2. A window much like a document window appears, but it contains only the library item .
An open library item window is rather like a normal document window, except there’s nothing there but the library item.
3. Edit the item as needed.
4. Choose File > Save, or press Ctrl-S (Cmd-S). The Update Library Items dialog appears .
If you update library items, Dreamweaver reports on what will happen.
Update: Updates every instance of the library item used in your site.
Don’t Update: No library items are updated.
See the following exercise, “To update a library item only in the current document,” if you want to select individual pages to update.
5. Click Update to have Dreamweaver open the Update Pages dialog, run through all the files containing the library item, update them, and report “Done” to you in the dialog when it’s finished.
6. Click Close to dismiss the Update Pages dialog.
To update a library item only in the current document
1. Edit the library item, and then click Don’t Update in the Update Library Items dialog (see the previous exercise, “To edit a library item”).
2. Open a document containing the library item.
3. Choose Modify > Library > Update Current Page. The library item on this single page updates.
4. Save the document.
To rename a library item
1. Highlight the name of the library item in the Library category of the Assets panel. Do one of the following:
Right-click and choose Rename from the context menu.
or
Click the item name, wait a second, and click it again.
The library item’s name is selected and becomes editable .
Need a better name for a library item? You can change it here.
2. Type the new name for the item and press Enter (Return).
3. The Update Files dialog appears 
. Click Update to change the name of the library item on every page where it is in use.
When you change a library item name, Dreamweaver asks you if you want to change all the instances of the item in the site to reflect the new name.
Tip
Library items can’t contain any head elements, so you don’t have access to the CSS panel when editing a library item (internal CSS style sheets appear within the <head> tag).
Tip
Library items can’t contain a <body> tag, so you don’t have access to the Page Properties panel when editing a library item.
Tip
HTML pages changed by the update of a library item need to be uploaded to the server for the change to be visible to your site’s visitors.
Tip
If a document is open when a library item updates, you’ll have to save the document manually. Updates save automatically in a closed document.
Working on Library Items with the Property Inspector
As we mentioned in the previous section, “Editing a Library Item,” the Property inspector offers some options for working on library items. You saw how to edit the library item using the Open button, but there are two as yet unexplained buttons on the Property inspector: “Detach from original” and Recreate.
Detaching a library item doesn’t remove the item from the page. It breaks the connection between the copy of the library item on the current page and the original source in the site’s Library folder. If you later update the original library item, the current page’s code won’t be changed by the update. You might want to do this if you have a library item that you want to be based on, but slightly different from, the original library item.
Sometimes you can have a page that contains the code from a library item that was removed from the site’s Library folder (or never existed there). For example, let’s say that you copied a page (that contained a library item) from one of your sites to a different site. The site that now contains the page will not, of course, have a corresponding library item in its Library folder. You can use the code in the current document to re-create the library item in the new local site.
2. In the Property inspector, click “Detach from original” . Dreamweaver displays a dialog asking if you’re sure you want to detach the item. Click OK. The link between the item on the page and the original in the Library folder is broken.
The Property inspector can be used to detach a library item from the source or to re-create a library item that’s lost or missing.
To re-create a missing or deleted library item
1. Open a document containing code for a library item that is missing from the Library category of the Assets panel.
2. Highlight the item. The tag selector should display <mm:libitem>.
3. In the Property inspector, click Recreate. The item is re-created using the name it has on this page. The re-created item appears in the Library category of the Assets panel.
Tip
If you detach a library item from a page, the highlighting in the document window that indicated that the element was a library item disappears along with the broken connection to the library item source. But the detached library item still remains on the page; all you’ve done is sever its link to the original item.
Tip
Right-clicking a library item in the document window reveals a context menu with the same options available on the Property inspector: Open, Detach, and Recreate.
Using Dreamweaver Snippets
The Snippets panel is used to store useful bits of code, or snippets, that can be inserted any time, any place. In that way, snippets are like library items. But there’s a big difference between snippets and library items. If you change or update a snippet, there’s no sitewide update to previously inserted versions of the snippet. There’s no connection between the code in an inserted snippet and the original snippet.
Dreamweaver comes with many useful pre-built snippets already loaded and ready to use. You’ll find them in the Snippets panel. If the Snippets panel is not already visible, choose Window > Snippets to bring it forward.
In the Snippets panel , the snippets that come with Dreamweaver are nicely organized into folders for you. Inside the folders you find individual snippets. Click an individual snippet to see a preview in the preview pane at the top of the panel. You can also see a description of the highlighted snippet. If you work with a narrow window, as in , you may have to scroll to the right with the horizontal scrollbar at the bottom of the Snippets panel to see the description. Expand the width of the panel to read the description without scrolling.
The Snippets panel comes preloaded with many useful snippets.
There’s a brief description of the snippet to the right of its name.
You’ve probably already figured out that any custom snippets you save appear in the Snippets panel, too. Your snippets and Dreamweaver’s snippets are used in the same way. We’ll explain how to save a new snippet first, and then how to use it.
To save a snippet
1. Open a document containing the material you’d like to make into a snippet. Select the snippet . Be sure you get all the surrounding material needed by clicking the tag in the tag selector.
Select something on a page to save as a snippet.
2. Click the New Snippet button in the lower-right corner of the Snippets panel. The Snippet dialog appears . Complete the following fields:
When you save your own snippets, you decide on a name, a description, and other basics.
Name: Type a name for the new snippet. See the tip at the end of this section regarding rules for naming snippets.
Description: Type a description. This is helpful, but optional.
Snippet type: Select “Wrap selection” if the snippet is meant to wrap around a selection. Select “Insert block” if the snippet is meant to be inserted as a block.
If you choose “Wrap selection,” you will be asked to choose the parts of the snippet to insert before or insert after the wrapped selection.
Insert code: The code you selected in the document is displayed here. This is an editable field.
Preview type: Choose either Design or Code.
3. Click OK.
4. The snippet appears in the Snippets panel . The preview displays in the preview pane.
Snippets you save appear in the Snippets panel. You can drag them into existing folders or organize new folders of your own.
2. Highlight the snippet in the Snippets panel and do one of the following:
Click the Insert button in the lower-left corner of the Snippets panel.
or
Double-click the snippet name.
or
Drag the snippet from the Snippets panel onto the document.
3. The snippet appears in the document. Replace any dummy text with the correct content 
.
When you insert a snippet into a document, the text or other element the snippet contains appears on your page.
Tip
The snippet preview pane won’t display the snippet with any CSS shown. The snippet must be on a page before CSS rules take effect.
Tip
Delete or modify snippets by highlighting them and using the Edit Snippet button or the Remove button in the lower-right corner of the Snippets panel.
Tip
Organize your snippets by dragging them into preexisting folders or by creating new folders of your own naming.
Tip
Don’t use any special characters in snippet names, such as ampersands (&) or angle brackets (< and >).