| Remember when you're creating a template that it's a blueprint for all other documents that are based on it. It's also a good idea, when creating a template, to use placeholders for regions that are editable. What I mean by that is if you have a cell in which you know you want the content provider to have the ability to insert a graphic, place an image placeholder in that cell. It's important to see how the HTML table is going to behave with a physical image in the cell and how that image placed in the cell will interact with the other components in the document. That way, when it comes time to insert the new image in the document based on the template, you're simply replacing a dummy image; there will be no surprises of columns or rows shifting. You don't want to be in the position of having to tweak the template to accommodate a graphic. Some things you should keep in mind when creating templates are the following: Include redundant meta information By including keywords and descriptions in your templates, you can save a lot of time from not having to type them over and over again. All the information in the <head> tag is included in the template. Insert all necessary Styles and Behaviors in the template Because the <head> tag is essentially locked by the template, it's a good idea to include scripts. Often JavaScript, which behaviors are based on, will include the code between the <head> tags, and then the scripts are called from an object within the body. So you need to make sure that the code used by the behaviors is already present within the template. Use Placeholders It's good to get in the habit of using placeholders so you can see how the document will be shaped. There is nothing worse than adding content and seeing that the design isn't successful because the area you designated for content wasn't sized properly. Finally, you should know that your template is automatically saved within your local root folder in a folder called Templates. Dreamweaver saves the template with a DWT extension, which stands for Dreamweaver Template. It's important to leave the template within this folder. You don't want to be confusing the links in a template by moving to another location. The point of the template is to have several documents based on it, and if links are not working properly in the template, all the pages that are based on it will share the same fate. You can create a template from a brand-new document or you can convert an existing design into a template. Creating a Template from an Existing HTML Page First, you're going to learn how you can create a template from an existing HTML page. To do that, follow these steps: -
Open a page already designed, as shown in Figure 8.1. Figure 8.1. Notice the document has already been designed.
-
With the page open, be sure to have access to the template objects. You can find them in the Insert panel under the Templates tab, as shown in Figure 8.2. Figure 8.2. Under the Templates tab of the Insert panel resides several options for templates.
-
Click the Make Template button on the far-left corner of the Insert panel. -
This launches the Save As Template dialog box shown in Figure 8.3. In this dialog box, choose what site you would like to save this template under, and name the template. When you're happy, click Save. Figure 8.3. The Save As Template dialog box offers options for naming the template file as well as the site in which you want to save it.
The document will automatically be saved in the site specified in a folder named Templates. When you open the Assets panel, notice under the template category, the template you just saved appears in the panel. If you continue to add content to the page, it's a good idea when linking to use the browse or point-to-file icon in the Properties Inspector. The reason is that Dreamweaver moves the template file into a new folder. By creating the links through the Properties Inspector, you're guaranteed that Dreamweaver knows how to resource the links when it moves the file. Creating a Template from a New Document This is just another alternative for creating templates. If you know from the beginning what you want the template to look like, you can design in a document that is already saved as a template. There are several ways to accomplish this. To create a template from a blank document, follow these steps: -
Create a new document by choosing File, New. This launches the New Document dialog box. -
In the New Document dialog box, under the Category section, choose Template page. From the Template page section, choose HTML Template. You can also choose HTML Template from the Basic Page category. -
Choose Create. This opens a new untitled document; however, notice the title bar reads <<Template>> indicating that it is, in fact, a template. The preceding steps show one of the ways to create a new template from scratch. As I mentioned earlier, Dreamweaver MX offers many ways to do that same thing. Here are the steps to another way of creating a template from a blank document: -
Inside a blank document, access the Insert panel. In the Insert panel, click the Templates tab. -
Under the Templates tab, click the Make Template button. This will effectively change the document into a template page. Finally, with the Assets panel open, you can create a new template right from this panel. Click the template portion of the Assets panel and toward the bottom, you can click the New Template button. This changes the current document into a template. Now that you have a new template file, you can start laying out your design. Creating Editable Regions By default, all areas of the template are locked and uneditable, which means the point of the template is pretty much rendered useless. If a content provider can't get in there and add content, what's the point? So in this section, you'll discover the different ways you can go about creating editable regions. When an editable region has been defined, it is indicated in a new document based on the template as a small blue tab highlight, as shown in Figure 8.4. You can either create a new editable region, which is defining an area with no content as editable, or you can mark a region as editable, which makes the existing content editable. Figure 8.4. Notice that the editable regions are highlighted with a small blue tab indicating the name of the editable region.
You can place all kinds of different media into an editable region. Whether it's text, images, SWF files, or even Java applets, as long as it is content you would otherwise normally fit into a Web page, you can insert it into the editable region. You cannot make any changes to a document's noneditable regions. If you decide that changes must be made outside the editable regions, you can either change the template, or you can break the link between the current document and the template page. You'll look at these options in just a moment; for now, let's look at how you can define different areas as editable. To make a region editable, follow these steps: -
Make sure a defined template is open in the template-editing window. The easiest way to do this is to open the Assets panel, make sure the template category is selected, and double-click the template of your choice. -
Select the content or place an insertion point in the area you want to define as editable. -
In the Insert panel under the Templates tab, click the Editable Region button, as shown in Figure 8.5. This launches a small dialog box. Figure 8.5. You make an area editable by clicking the Editable Region button located in the Insert panel under the Templates tab.
-
In the New Editable Region dialog box, type in what you want to name the region. When you're happy, choose OK. This brings you back to the document; notice the small blue tab with the region name appearing just above the region. -
Now that this region has been defined as editable, save the template by choosing File, Save. You may get an alert message asking you to update pages; for now, choose Don't Update. You'll look at this feature in a page or two. It's that easy to create an editable region in a Dreamweaver template. Next you need to know how you can apply a template to an open document. After you do that, you'll be able to test out the editable region. Applying a Template or Creating a New Document Based on a Template After creating your template, you probably want to use it to create pages. In the next couple of steps, you'll see how you can apply a template to a page. -
Under the File menu, choose New Document. This launches the New Document dialog box. Create a basic HTML page. -
Inside the New Document dialog box, open the Assets panel by choosing Window, Assets. In the Assets panel, click the Templates category. Notice that the template you've created is available. -
Highlight the template in the Assets panel and click and drag it into the document. The document now carries the characteristics of the template. You could also have chosen Modify, Template, Apply Template to Page, or you could highlight the template in the Assets panel and click the Apply button in the bottom-left corner of the panel. -
Also notice that you cannot select anything other than the regions you marked as editable. This demonstrates the power of templates. Only the regions specified have room for additional content or modification. This document could be sent to a copy editor or a content provider, who could make modifications and add content only in those areas. Creating an Editable Tag Attribute As you saw in the previous example, templates can promote a nice consistent look throughout your Web site. With the addition of editable regions, you can even add or edit content to distinguish from page to page. However, generally the editable regions cater only to content. Designwise, all the pages will look identical. A new feature in Dreamweaver MX is the capability to edit certain tag attributes. For example, you could make certain attributes of the <body> tag editable by a content provider, such as the bgcolor attribute. This way, you can offer a consistent look without being boring. Moreover, you offer slightly more control to the developer just adding content to a template page. You can specify what tag you want to be editable; furthermore, you can set what attributes of that tag you want to edit. You must be inside the Template Editing mode, so double-click the template found within your Assets panel. The way that the editable attribute works is that a parameter is set in the HTML code for whatever tag attribute is defined as editable. When individuals author a page based on the template, they have the option of altering that parameter through the Modify menu. We'll look at altering attributes right after you see how to define an editable attribute. To create an editable tag attribute, follow these steps: -
Inside the template, highlight an item you want to make editable. If you want the <body> tag to be editable, select the body tag in the Tag Inspector located in the bottom-left corner of the document window. For this exercise, I'm going to do just that. Select the <body> tag. -
Then choose Modify, Templates, Make Attribute Editable. This opens the Editable Tag Attributes dialog box, as shown in Figure 8.6. Figure 8.6. The Editable Tag Attributes dialog box offers several options for modifying the selected tag.
-
Notice in the Attribute drop-down menu, no information is provided. So you have to add the attribute you want to change. Click the Add button. This launches another small dialog box, as shown in Figure 8.7, that asks you to type the attribute. In this case, type in bgcolor. Figure 8.7. Type in the attribute for the selected tag that you want to make editable.
-
The next thing you want to fill out is the label. Label it something that makes sense; in this case, because you're changing the background color, you should type something like color here. -
In the Type drop-down menu, there are a couple of choices. There are four data types that will be accepted here: text, Boolean (true or false), color, and URL. In this case, because you want the bgcolor attribute to be editable, the color option is the best choice. -
Next is an area to specify a default value. Enter in a value here if you want it to appear different from what the template-based document already carries for a value. In this case, leave it blank. -
Choose OK. You've just defined an editable tag attribute. Now that your template has an editable tag attribute, how do you edit that attribute? The way that you edit a tag attribute is just as intuitive as it is to create one. Create a new document and attach the template in the Assets panel in which you applied the editable tag attribute. To modify the background color, choose Modify, Template Properties. This launches the Template Properties dialog box shown in Figure 8.8. Figure 8.8. The Template Properties dialog box lists all the editable attributes of the tags you specified in that particular template.
Here you'll see each label of all the tags that you've made editable. This is why it's important to label each editable tag something that makes sense. Highlight the color attribute and notice that down toward the bottom, there is an inkwell where you can pick a color from the Web-safe color palette, or you can type the hexadecimal value into the text field. Pick a color and choose OK. The background color of the template-based document you're working with now has the background color that you specified in the Template Properties dialog box. You can do this for any tag you like. If you'd like the content provider to be able to pick font faces and colors, make that attribute editable. The more attributes you make editable, the more personality each page can have while still maintaining a high level of consistency. Removing Tag Attributes If you no longer want certain tag attributes to be editable, open the Assets panel, and in the Templates section, double-click the template for which you want to remove the editable tag attribute functionality. Choose Modify, Templates, Make Attribute Editable. This opens the Edit Tag Attributes dialog box. In the Editable Attribute drop-down menu, select the attribute you'd like to modify. Deselect the Make Attribute Editable check box. When you're done, choose OK. The specified attribute is no longer editable on template-based pages. Repeating Table Another brand-new edition to Dreamweaver MX is the capability to create templates with repeat regions and tables that repeat. This can be extremely useful when additional content needs to be added. For example, an individual adding content to the template-based page might need one more row in the table they're inserting data into. If this is a normal table, the person is out of luck. The table has parameters established by the template master document to contain x number of rows and x number of columns. However, all that changes with this new enhancement to Dreamweaver's templates. When developing the templates, if you're not certain how many items need to be listed to the table, create a repeating table. That way, if one template-based page needs more rows than the other, the person entering data into the template-based page will have the option of adding as many rows as necessary to do the job. Adding a repeating table is simple. Make sure you're inside the editing environment of the template, and also make sure to have the Insert panel visible with the Templates tab active. To insert a repeating table, follow these steps: -
Place a blinking cursor in the document where you'd like the table to appear. -
In the Insert panel, click the Repeating Table button. You can also choose Insert, Template Objects, New Repeating Table. This opens the Insert Repeating Table dialog box as shown in Figure 8.9. Figure 8.9. The Insert Repeating Table dialog box looks much like the Insert Table dialog box. Here you can specify what the table will look like.
-
Enter 2 for Columns, 1 for Rows. Make the table as wide as you'd like with as much space for cell spacing and cell padding as you like. I'm going to type in 0 for a border, and the Starting and Ending row will both be set to 1. Finally, name the repeating region data. When you're happy with the settings, choose OK. A repeating table is inserted into your document. Insert Repeating Table Dialog Box Options Rows This option specifies how many rows you'd like your table to have. Columns This option determines how many columns the table will have. Cell Padding Enter a pixel value to create an interior cushion for the cell, spacing the interior cell edge from the cell content. Cell Spacing This option determines the space between cells in the table. Width Enter a value, either pixel or percentage, based on how wide you want the table to appear in the browser. Border This specifies the pixel width of the table border. Type in 0 if you don't want a border. Repeat Rows of the Table These options specify what rows are to be included in the editable repeating section of the table. Starting Row Enter a number to specify the row number where you want the repeating to begin. Ending Row Enter a number to specify the row number where you want the repeating to end. Region Name Enter in a name for the repeating region. Back inside the document, notice that a blue tab is above the template, specifying that it's a repeating region. Now you can create a new page based on this template and put the repeating table to use. Create a new basic HTML page and attach the template you've been working with. Notice in the template-based document that there are arrows and plus and minus signs above the template, as displayed in Figure 8.10. These controls allow you to add, rearrange, and even delete rows in the table. Figure 8.10. In the table, there are buttons to add, delete, and order the different rows that will repeat in the template-based document.
Enter in data in the first row; now that you need another, click the plus sign and a new row is added to the table. You can add as many rows as necessary. You can even sort the data by using the up and down arrows. Finally, if you added too many rows and need to remove some, click the button with the minus sign. Repeating Regions Most of the time in Web development if you need an area to repeat, it will most likely be a table. However, there is always the exception to the rule. You may have a situation where you need to add several photographs. The Repeat Region is designed for such a situation. It behaves much like a repeating table; however, it doesn't have to be a table. If you want to change something other than the source of a graphic, you'll have to insert an editable region into the repeated region. I talked about creating editable regions earlier in this chapter. To create a repeating region, follow these steps: -
Open the template you want to add the repeating region to. -
Place a blinking cursor in the area where you want to place the repeat region or select the object that you want to repeat. In this exercise, you're going to insert an image placeholder by choosing Insert, Image Placeholder. This will open the Image Placeholder dialog box as shown in Figure 8.11. Figure 8.11. Enter in the dimension values in the dialog box where you want the placeholder to appear.
-
Enter in the dimensions you want the placeholder to have in the document. Images that eventually swap out with the placeholder do not need to have these same dimensions. You can also name the placeholder as well as provide a color for it. When you're happy with the settings, choose OK. -
Notice the placeholder appears in the template with a tab above it, indicating that it is a repeating region. -
Save the template by choosing File, Save. Next, you have to create a new document and attach the template to see how the repeating region will behave in a template-based document. Create a new basic HTML page. After the page is open, attach the template by opening the Assets panel and clicking the Apply button. Notice in the document that you get the buttons as you do with a repeating table. You can add additional editable items by clicking the plus button; you can remove items by clicking the minus button; and you can also rearrange their order by using the up and down arrow buttons. The purpose of a repeating region is to give a bit more flexibility to the individual adding content to the template-based document. It also offers several advantages to the creators of the templates. You do not need to know specifics about the content being added to template-based documents. The amount of products or images is no longer a concern for a template creator. |
