Everything in a template is locked, except for the <title>tag and an editable region in the
<head>of the document. This is needed so that external JavaScript files and style sheets can be added to a child page. It’s also where Dreamweaver behaviors insert the JavaScript
You must never move templates from the Templatesfolder. This is perhaps the single most common mistake with templates—moving the master template to another folder will cause you endless grief. Don’t do it.
functions that they require. However, the area above the DOCTYPEdeclaration and below the closing </html>tag is not locked in templates for server-side languages, such as PHP.
I’ll come back to this issue a little later, because it causes a lot of confusion.
It goes without saying that you must unlock at least one part of the page for the template to be of any real value. Otherwise, every child page would be identical. Deciding what to lock and unlock depends entirely on the level of control that you want over a page. For instance, you could create separate editable regions for each of the headings on the page.
If you select the entire heading, including its surrounding tags, the heading can be replaced by anything: a table, a <div>, an <iframe>, or whatever you like. If you select just the content of an <h2>tag and convert it into an editable region, only the content can be changed in a child page. You can’t even change it to an <h1>tag.
Since the remaining chapters of this book are about building dynamic content with PHP, you don’t want such rigid control. So, you could make everything inside the container
<div>one big editable region. However, we’ll take a slightly different approach.
This exercise shows you how to create separate editable regions for the sidebar heading and paragraphs, as well as for the whole main content area.
1.Open stroll_horiz_footer.dwt.php in the Templates folder if it’s not already open.
2.Open Split view. Click immediately to the left of the heading that reads The pleasures of London. Hold down your mouse button, and drag to the end of the heading. Alternatively, hold down the Shift key while pressing the keyboard right arrow to select the content of the heading. Make sure you have just the text and not the surrounding <h3>tags, as shown in the following screenshot:
Making the sidebar and main content areas editable
It’s important to note that template code is locked only in Dreamweaver. You can edit locked regions in any other text or HTML editor. The whole concept of templates breaks down unless everyone responsible for handling the pages uses only Dreamweaver to edit them.
13
3.There are several ways to make this an editable region. If you’re a fan of the Insert bar, click the down arrow next to the Make Templatebutton on the Commontab, and select Editable Region. The Insert bar remembers your last selection, so the Editable Regionbutton remains displayed, ready for the creation of more editable regions.
Alternatively, right-click and select Templates ➤New Editable Regionfrom the con- text menu, or select Insert ➤Template Objects ➤Editable Region.
4.This opens the New Editable Regiondialog box. It has just one field for a name for the editable region. It can be anything you like, but each region must have a differ- ent name. Enter sidebarHead, and click OK.
5.This wraps the contents of the <h3>tag in two special HTML comment tags, as shown in Figure 13-1. These tell Dreamweaver to treat this as an editable region in child pages. Dreamweaver also displays a turquoise border around the region in Design view, with a tab at the top left indicating the name of the editable region.
Figure 13-1.Editable regions are easily identified in both Code view and Design view.
6.Select the first paragraph in the sidebar by clicking inside it and selecting <p>in the Tag selector at the bottom of the Document window. Repeat steps 3 and 4 to turn it into an editable region called sidebarTop.
7.Do the same with the bottom paragraph in the sidebar, and call it sidebarFollow.
8.This leaves the <blockquote>outside the editable regions in the sidebar. Because the pull quote is styled in a particular way, you probably don’t want an inexperi- enced person to do anything other than change the text. So, select the text in the
Always check the position of the TemplateBeginEditableand TemplateEndEditable comments in Code view, because you can easily move them or any of the sur- rounding code while still in the template. Checking now saves a lot of frustration later, when you discover that you didn’t select the region accurately in Design view and your child pages don’t work the way you expect. These comments are an integral part of the template control mechanism and are propagated to the child pages, where they remain part of the HTML.
first paragraph of the <blockquote>element, and apply an editable region called quote. Even if you don’t select the surrounding <p> tags, Dreamweaver usually assumes you want them included in the editable region, so you need to move them manually in Code view.
9.Do the same with the quote_attrib paragraph, and call the editable region quoteAttrib. After you have moved the <p>tags, the TemplateBeginEditableand TemplateEndEditablecomments should be inside the paragraphs like this:
<blockquote>
<p><!-- TemplateBeginEditable name="quote" -->No, Sir, when a man is ➥ tired of London, he is tired of life; for there is in London all that ➥ life can afford.<!-- TemplateEndEditable --></p>
<p id="quote_attrib"><!-- TemplateBeginEditable name="quoteAttrib" -->
Samuel Johnson, 1777<!-- TemplateEndEditable --></p>
</blockquote>
You can tell if you have positioned the tags correctly because the turquoise outlines of the editable regions should now hug the text in Design view, rather than surround the quotation marks of the pull quote’s background images, as shown here:
10.Select all the content in the mainContent <div>, but not the surrounding <div>tags, and create an editable region called mainContent. Check that the template com- ments are in the right place in Code view, and save stroll_horiz_footer.dwt.php.
11.Dreamweaver should display a warning that sidebarHeadis inside a block tag and that users of the template won’t be able to create new blocks in this region. This is because the <h3>tags are outside the sidebarHeadeditable region, which prevents anything other than a level-three heading being created. That’s fine. So, click OK.