adobe dreamweaver cs5 on demand part 69 potx

ptg Creating Templates Introduction A template is a common structure of a Web site design. Usually Web sites follow a standard structure, such as a header, a navigation bar and a footer that are common to all your pages. Now, imagine that your site has 50 pages. If you need to make one small change, for example adding a new link, you would need to go to each of those pages and change it manually. But using a template you only need to change it in the template and all the pages will be updated automatically. Think of Dreamweaver templates as really large library items. Instead of occupying a small part of a page, templates control all areas of a page that are to be kept consistent throughout the majority of a Web site. Once created, areas within the template are then made editable so new content can be inserted from page to page. If nothing else, templates are a fantastic timesaving tool. They allow you to create pages that share the same design but contain different content, and if you modify a template document, you immediately update the design of all pages that were created from that template. In this chapter, you'll learn how templates can streamline your workflow. 18 18 What You’ll Do Introduce Templates Create a Template Open a Template Define Editable Regions Define Editable Attributes Create Repeating Regions Create Optional Regions Create InContext Editing Editable Regions Create InContext Editing Repeating Regions Create Nested Templates Create a Web Page from a Nested Template Create a Web Page from a Custom Template Update a Template Attach or Detach a Template Import XML into a Template Export Template Data as XML 427 From the Library of Wow! eBook ptg 428 Chapter 18 Think of templates as really big library items. For example, an entire Web page can be saved as a template. You could have the navi- gation built into the page; along with editable areas for text or graphics. Let's face it; large and complex Web sites have many pages that have a similar look and feel. Think of a catalog Web site where you would click to view items in the catalog. Let's say that the site has hun- dreds of items, and the only difference between the pages is the description of the item and an image. Instead of creating hun- dreds of pages from scratch, you need only create one template and have editable areas for the description and image. Templates ca n be co m p r i s e d of vi rt ually any Web design components. They can include graphics, images, CSS, Flash, just about anything that you would place on a normal Web page. Since a template will con- tain areas that are editable, and areas that are locked, most templates are designed using a series of tables, or AP elements. As the designer of the template, you decide what areas of the template are editable and what areas are locked out. Of course, this means lit- tle to your visitors; locked and editable areas only define to the Web designer what areas can be changed and what areas remain the same. For example, you create a Web page that emulates a newsletter. The navigation, footers, and the e-newspaper flag remain the same; however, there are areas of the page that you want to update with the latest news. When you design the template, the navigation, foot- ers, and flag are locked, and the areas for the news are editable. Templates do n ' t control wh a t visitor s do with the page; they control how other design- ers edit the page. When the template is used, the designer assigned to change the data can only access and change the areas you mark as editable. This prevents the accidental (or purposeful) changing of the page, except where you as the Template designer decide. Editable Regions If you're a regular template user (and you should be), you'll find a lot of flexibility as you create editable areas for a template page. There are four types of editable areas on a template page: editable region, repeating region, optional region, and editable tag attributes. Editable regions are unlocked areas that you can add content in a template page. Repeating regions are unlocked areas where you can add or delete copies of the repeating regions in a template page. There are two types of repeating regions: region and table. With a table region, for example, you can increase or decrease the rows in a table while keeping the table structure intact. Optional regions are unlocked areas that allow you to show or hide content in a template page. In addition to using editable regions, you can also use editable tag attributes to modify spe- cific attributes related to an element. You can make some attributes editable while leaving other attributes locked. The Internet is full of sites containing pre- designed templates. Some are quite elabo- rate. You can find templates for entire sites, such as shopping carts, and sites complete with Paypal pages. Listed here are a few of the sites that carry templates: http://allwebcodesign.com/ http://www.dreamweaver-templates.org/ http://www.adobe.com/products/dreamweaver /download/templates/ Introducing Templates From the Library of Wow! eBook ptg Chapter 18 Creating Templates 429 Creating a Template Create a Template Create a document (including editable regions) that you want to use as a template. Click the File menu, and then click Save As Template. Save the template using the following options: ◆ Site. Choose the site to save the template (default: working site). ◆ Existing Templates. Choose to save as an existing template. ◆ Description. Enter a meaningful description of the template. ◆ Save As. Enter a file name for the template. Click Save. Click Yes as necessary to update the site with any needed files. Dreamweaver saves the template file with the .dwt extension in the default Templates folder within the local root site folder. NOTE If you attempt to close a template file without an editable region, Dreamweaver warns you. 5 4 3 2 1 Templates allow you to create pages that share the same design but different content, and if you modify a template document, you immedi- ately update the design of all pages that were created from that tem- plate. One of the best ways to create a template is to actually design a Web page, place everything where you want it to be (navigation, text areas, image areas, footers, possibly a library item, etc.), and then con- vert (save) the page as a template. Templates contain editable and locked areas, so they are typically enclosed within a table structure or AP elements. When you create a template, Dreamweaver saves the file by default to the Templates folder for your site and manages any links, so updates are properly maintained. 4 3 Checking Template Syntax When you insert a region in a template, Dreamweaver uses HTML comment tags, known as template tags, to specify the region in the code to make sure it remains valid HTML. For example, <! TemplateBeginEditable name =”. . .” >. There are a few important rule to be aware of: (1) white space can be any length; (2) attributes can be in any order; (3) comment and attribute names are case sensi- tive; and (4) all attributes need to be in quotation marks, either single or double quotes. When you save a template, Dreamweaver checks the template syntax. However, you can also check it whenever you want. Open the template you want to check, click the Modify menu, point to Templates, and then click Check Template Syntax. If there are problems, an error message appears, describing the problems. For Your Information From the Library of Wow! eBook ptg 430 Chapter 18 Opening a Template Open a Template File Using the Assets Panel Click the Window menu, and then click Assets to display the Assets panel. Click the Templates category. Open the template using one of the following options: ◆ Select the template in the Names window, and then click the Edit button in the Assets panel. ◆ Double click on the name of the template in the Assets panel. 3 2 1 After you create and save a template, you can open it using several dif- ferent methods in Dreamweaver. You can use the Assets panel or the Open dialog box. When you save a template file, the default location is typically in the Templates folder of the local root site folder. When you use the Assets panel to open a template, the default location automati- cally appears displaying the current templates. When you use the Open dialog box, you need to navigate to the Templates folder. If you have recently saved or opened a template, you can also open it again quickly using the Open Recent submenu on the File menu. When you open a template file, the title bar in the Document window contains the word <<Template>> followed by the name of the template along with the .dwt file extension for templates. 1 Edit button 3 2 See Also See “Creating a Web Page from a Blank Template” on page 22 for infor- mation on using a blank template. Did You Know? You can create a blank template from the Assets panel. Open the Assets panel, click the Templates category, click the New Template button, type a name, and then press Enter (Win) or Return (Mac). From the Library of Wow! eBook ptg Chapter 18 Creating Templates 431 Open a Template File Using the Open Dialog Box Click the File menu, and then click Open. TIMESAVER Press Ctrl+O (Win) or A +O (Mac). Click the Files Of Type list arrow (Win) or Popup (Mac), and then click Template Files (*.dwt). Locate and select the template file you want to open. The default location is typically in the Templates folder of the local root site folder. Click Open. 4 3 2 1 2 4 3 Did You Know? You can open the template file attached to the current page file. Open the Web page based on the template you want to open, click the Modify menu, point to Templates, and then click Open Attached Template. You can rename a template. Open the Assets panel, click the Templates cate- gory, click the name of the template, click the name again, enter a new name, and then press Enter (Win) or Return (Mac). You can delete a template. Open the Assets panel, click the Templates cate- gory, click the template you want to delete, and then click the Delete button in the Assets panel. From the Library of Wow! eBook ptg 432 Chapter 18 Defining Editable Regions Define Editable Regions Open the template you want to add editable regions. Select the content (including tables, table cells, or AP elements) in the template you want to make editable, or click to place the insertion point. NOTE If the area is going to contain text, make sure you apply any formatting options, using HTML or CSS to the area before making it an editable area. Click the Insert menu, point to Template Objects, and then click Editable Region. The New Editable Region dialog box opens. Enter a unique name for the new region. Click OK. The editable region appears with the name in the tab. 5 4 3 2 1 When you first create a template, the entire page is locked and uned- itable to the designer. Without editable areas, you would not be able to make any changes to the page. To correct this problem, you need to create editable areas in the template. Editable areas are for the design- ers who want to use templates to create Web pages. Web pages based on a template enable Dreamweaver users to edit parts of a Web page within the editable regions without the risk of accidentally changing the locked regions. Editable regions in Design view appear with a rectan- gular outline and a small tab in the upper-left corner with the name of the region. You can click the tab to select the editable region. 1 3 2 4 5 Did You Know? You can remove or relock an editable region. Select the area you want to change, click the Modify menu, point to Templates, and then click Remove Template Markup. From the Library of Wow! eBook ptg Chapter 18 Creating Templates 433 Defining Editable Attributes Define Editable Attributes Open the template you want to define editable attributes. Select the tag or object that you want to make editable. Click the Modify menu, point to Templates, and then click Make Attribute Editable. Select from the following options in the Editable Tag Attributes dialog box: ◆ Attribute. Select the attribute, or click the Add button and enter the attribute manually. ◆ Make Attribute Editable. Select to make this attribute editable. ◆ Label. Enter a unique name for the editable attribute. ◆ Type. Select a type from the available options: Text, URL, Color, True/False, or Number. ◆ Default. Enter the initial default value for the attribute. Click OK. 5 4 3 2 1 In addition to making regions of a page editable, you can also make specific HTML tag attributes editable (for example, the background color of the page). This combination not only gives you control over a general area such as a table, individual cell, or an AP element; you now have control over specific elements. You can use this option to allow contributors to the Web page the ability to duplicate the region. For example, when creating a table that holds customer comments, the contributor needs the ability to add more rows to the table. In addition, you can also create template variables, such as boolean, text, number, color or URL, for use in template expressions. 1 3 5 4 Did You Know? You can modify the properties of an editable attribute. Click the Modify menu, click Template Properties, select the attribute or variable you want, make any changes, and then click OK. From the Library of Wow! eBook . Template Define Editable Regions Define Editable Attributes Create Repeating Regions Create Optional Regions Create InContext Editing Editable Regions Create InContext Editing Repeating Regions Create Nested. editable areas on a template page: editable region, repeating region, optional region, and editable tag attributes. Editable regions are unlocked areas that you can add content in a template. pages based on a template enable Dreamweaver users to edit parts of a Web page within the editable regions without the risk of accidentally changing the locked regions. Editable regions in Design