WDV 331 Dreamweaver Applications

1. WDV 331 Dreamweaver Applications Templates Dreamweaver CS6 Chapter 19

2. Template Basics • Templates let you build pages that share a similar structure and graphic identity. • No worry about accidentally deleting or changing elements. • Templates come in handy when you design a site with less Dreamweaver-savvy, individuals building individual pages. • A new page based on a template — also called a template instance, or a child page — looks just like the template, except that page authors can edit only designated areas of the page, called editable regions. • The rest of the page remains consistent and is locked.

3. Editable Regions • Are the basic building blocks of a template. • An editable region is that part of a page —a paragraph, the contents of <p>, < div > tag, or a headline, for example — that page authors can change as they build template-based pages. • Templates can include multiple editable regions — a sidebar and the main content section of a page, for example. Also Editable tag attributes. • There may be times when you want to make a particular tag property editable

4. tag property • I.e. be able to assign a new image file by changing the < img > tag’s src attribute. To keep someone from deleting the image but still allow them to change pictures, you’d make just the src property editable. • You could also make the image’s alt property editable, and if needed the width and height properties • Unique headline design for web section of your site. Build the site template and assign a class to the < body > tag and make the class name editable. • when you create pages for different sections of the site, you add a class name specific to each section. • i.e. On the template-based pages showcasing your company’s products, change the class to .products, and then add a descendent selector style .products h1 to your style sheet and you’ll have a unique look for all the < h1 > tags on product pages.

5. Repeating Regions & Repeating Tables • Some web pages, like those that showcase the products a company sells, include lists of items. For pages like these, Dreamweaver lets you define repeatable regions in your template. • You may not know in advance how many products the page will eventually list. • Use Dreamweaver to define a row — or any selection of HTML — as a repeating region, so that page authors can add new rows of product information as needed.

6. Optional Regions • Optional regions make templates even more flexible. They let you show or hide content — from a single paragraph to an entire < div > tag full of other tags — on a page-by-page basis. • Suppose you create a template that showcases your company’s products. Some products go on sale while others remain full price, so you add an optional region to the product descriptions that displays a big “On Sale” logo. When you create a new product page, you could show the optional region for products that are on sale and keep it hidden untill time of sale.

7. Editable Optional Regions • Editable optional regions are similar, but have the added benefit of being editable. • Maybe you’re creating a template for an employee directory, giving each employee his or her own page with contact information. Some employees want their picture displayed on the page, while others don’t. • Solution: Add an editable optional region that includes space for a photo. You add a different photo for each page, except for the shyer types; for them, you simply hide the photo area.

8. Other Benefit of Templates • Templates greatly simplify the process of updating a website’s design. Like Library items; pages based on templates retain a reference to the original template file. • Dreamweaver passes any changes you make to that template to all the pages you created from it, which can save you hours • Down side. You have to reload every web page of you web site to the web server. • Consider Server Side include. Although search engines may like templates better.

9. Creating a Template • The first step in creating a template is to build a basic web page and tell Dreamweaver that you’d like to use it as a template. • You do that two ways: • build a regular, plain old web page and turn it into a template, or • create a blank, empty template file and add sections for text, graphics, tables, and other content.

10. Turning a Web Page into a Template • The easiest way to create a template is to base it on a web page in your current site folder. Although you can create templates based on web pages that aren’t part of your current local site, you may run into problems with links and paths to images. • Once you open the page, choose File → Save As Template or, in the Common category of the Insert panel click the Templates button and then select Make Template from the drop-down menu.

11. Save as a Template • The Save As Template window includes the name of the current local site in the Site drop-down menu; meanwhile, all templates for that site show up in the Existing Templates box. • Note: The Templates menu in the Common category of the Insert panel provides access to tools for creating templates • Dreamweaver saves the page in the Templates folder of your local site root folder. It adds the .dwt before the file’s extension to indicate that it’s a Dreamweaver template. Main.dwt

12. Building a Template from Scratch • It’s easiest to create a web page first and then save it as a template, but you can also build a template from scratch. • Open the Asset panel’s Templates category by choosing Window → Assets and then click the New Template button at the bottom of the Assets panel. Once Dreamweaver adds a new, untitled template to the list, give it a new name. Something descriptive like “Press release”.

14. Defining Editable Regions • Specify which parts of your template you want locked and which you want editable. • By default, everything on a page is locked. • The Reason to use a template is to maintain a consistent, unchanging design and structure among pages. • To making it usable, you have to define the area or areas that page authors can change. • To add an editable region to a template, start by selecting the part of the page you want to make changeable.

15. Defining Editable Regions • You can designate as editable anything in the document window • Any HTML between the < body > tags. • NOTE: • You can always add Cascading Style Sheets, JavaScript code, and meta tags to the < head > of a template-based page. • Any < head > content in the original template files stays in the page you create from it • However, For example, you can’t remove an external style sheet applied to a template from a page based on that template.

16. UNDER THE HOOD OF TEMPLATES 1 • Dreamweaver saves templates as HTML files in the Templates folder inside your current local site folder • Each template bears the file extension .dwt to distinguish template pages from regular web pages. Dreamweaver treats files in the Templates folder differently from normal web pages, • Don’t save anything but .dwt files in the Template Folder.

17. UNDER THE HOOD OF TEMPLATES 2 • In addition, since Dreamweaver expects to find the Templates folder in the local root folder of your site, don’tmove it or change its name in any way (don’t even change the capital “T” in “Templates,” If you do, your templates won’t work. • As with Library items, Dreamweaver uses HTML comment tags to indicate the name of a template. If you inspect the HTML code of a template-based document, you’ll see that, immediately following the opening < html > tag, Dreamweaver inserts a comment tag with the text “InstanceBegin” followed by the location and name of the template.

18. UNDER THE HOOD OF TEMPLATES 3 • Additional comment tags indicate areas of the page you can modify, plus special template features like template parameters used for optional regions. For instance, the title of a page based on a template is always editable; its comment tag might look like this: <!-- InstanceBeginEditable name =" doctitle" --> < title > My New Page </ title > <!-- InstanceEndEditable --> • The first comment indicates the editable region’s beginning and also includes the editable region’s name. When you edit pages based on the template, you can change only the HTML between these comment tags. Everything else on the page is locked, even when you work in Code view.

19. Unlinking a Page from a Template • If you’re confident that you won’t make any further changes to a page’s template and you want to edit a page’s locked regions, you can break the link between the page and its template by choosing Modify → Templates → Detach from Template. • You can now edit all the HTML in the page, just as you can on a regular web page — which is, in fact, what you have now. • You removed all references to the original template, so any changes to the template no longer affect this page.

20. UNDERSTANDING TEMPLATE PARAMETERS When you insert an optional region, Dreamweaver adds special code to the head of the web page. Called a template parameter, this code is responsible for showing or hiding an optional region. In fact, Dreamweaver uses parameters when you make a tag attribute editable, too. A typical parameter for an optional region might look like this: <!-- TemplateParam name =" SaleBug" type =" boolean" value =" true" --> The <!-- and --> are standard HTML comment markers. TemplateParam tells Dreamweaver that the comment is actually part of the program’s Template features — specifically, a template parameter.

21. UNDERSTANDING TEMPLATE PARAMETERS • A parameter has three parts: name, type, and value. • The name is the name you give the editable region. • The type — “Boolean” above — indicates that the value of this parameter can be only one of two options: true or false. • In this example, the value is “true,” which simply means that the optional region called SaleBug is visible.

22. Template Tutorial • Assignment: complete Template Tutorial • Book 883 Kindal 18853 • page 889 kindle 18983 “9.Open the file hours.html. Choose Modify → Template Properties. The Template Properties window appears” • Hint: This is the second option down under modify.

23. UNDERSTANDING TEMPLATE PARAMETERS • Editable tag attributes also use parameters to store the values you enter for tag attributes. • For example: <!-- TemplateParam name =" PageColor“ type =" color" value ="# FFFFFF" --> • On template-based pages, you can change the value of an editable tag’s parameter using the Modify → Template Parameters menu (see Changing Properties of Editable Tag Attributes ). • Unfortunately, when you delete an optional region from a template, or remove the ability to edit a tag attribute, Dreamweaver always leaves these parameter tags hanging around in the head of the template document. Keeping in mind that Dreamweaver adds these parameter tags directly before the closing </ head > tag, you can find and remove them in Code view.