User Guide Cancel

About Dreamweaver templates

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Learn how to use Dreamweaver templates to design a “fixed” page layout and then create documents based on the template that inherit its page layout.

A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template that inherit its page layout. As you design a template, you specify as “editable” which content users can edit in a document based on that template. Templates enable template authors to control which page elements template users—such as writers, graphic artists, or other web developers—can edit. There are several types of template regions the template author can include in a document.

Note:

Templates enable you to control a large design area and reuse complete layouts. If you want to reuse individual design elements, such as a site’s copyright information or a logo, create library items.

Using templates enables you to update multiple pages at once. A document that is created from a template remains connected to that template (unless you detach the document later). You can modify a template and immediately update the design in all documents based on it.

Note:

Templates in Dreamweaver differ from templates in some other Adobe Creative Cloud software in that page sections of Dreamweaver templates are fixed (or uneditable) by default.

Types of template regions

When you save a document as a template, most regions of a document are locked. As a template author, you specify which regions of a template-based document will be editable by inserting editable regions or editable parameters in the template.

As you create the template, you can make changes to both editable and locked regions. In a document based on the template, however, a template user can make changes only in the editable regions; the locked regions can’t be modified.

There are four types of template regions:

An editable region: An unlocked region in a template-based document—a section a template user can edit. A template author can specify any area of a template as editable. For a template to be effective, it should contain at least one editable region; otherwise, pages based on the template can’t be edited. For detailed information in editable regions, see Create editable regions in templates.

A repeating region: A section of the document layout that is set so that the template user can add or delete copies of the repeating region in a document based on the template as necessary. For example, you can set a table row to repeat. Repeating sections are editable so that the template user can edit the content in the repeating element, while the design itself is under the control of the template author.

There are two types of repeating regions you can insert in a template: repeating region and repeating table. To know how to work with repeating regions, see Create repeating regions and tables in Dreamweaver.

An optional region: A section of a template that holds content—such as text or an image—that may or may not appear in a document. In the template-based page, the template user usually controls whether the content is displayed. See the Optional region section for more information.

An editable tag attribute: Lets you unlock a tag attribute in a template, so the attribute can be edited in a template-based page. For example, you can “lock” which image appears in the document but let the template user set the alignment to left, right, or center. See Define editable tag attributes in Dreamweaver for more information.

When you create a template file by saving an existing page as a template, the new template in the Templates folder, and any links in the file are updated so that their document-relative paths are correct. Later, when you create a document based on that template and save it, all the document-relative links are updated again to continue to point to the correct files.

When you add a new document-relative link to a template file, it’s easy to enter the wrong path name if you type the path into the link text box in the Property inspector. The correct path in a template file is the path from the Templates folder to the linked document, not the path from the template-based document’s folder to the linked document. Ensure that the correct paths for links exist by using either the folder icon or the Point-to-file icon in the Property inspector when creating links in templates.

Server scripts in templates and template-based documents

Some server scripts are inserted at the very beginning or end of the document (before the <html> tag or after the </html> tag). Such scripts require special treatment in templates and template-based documents. Normally, if you make changes to script code before the <html> tag or after the </html> tag in a template, the changes are not copied to documents based on that template. This can cause server errors if other server scripts, within the main body of the template, depended on the scripts that are not copied. An alert warns you if you change scripts before the <html> tag or after the </html> tag in a template.

To avoid this problem, you can insert the following code in the head section of the template:

<!-- TemplateInfo codeOutsideHTMLIsLocked="true" -->

When this code is in a template, changes to scripts before the <html> tag or after the </html> tag are copied to documents based on that template. However, you will no longer be able to edit those scripts in documents based on the template. Thus, you can choose to either edit these scripts in the template, or in documents based on the template, but not both.

Template parameters

Template parameters indicate values for controlling content in documents based on a template. Use template parameters for optional regions or editable tag attributes, or to set values you want to pass to an attached document. For each parameter, you select a name, a data type, and a default value. Each parameter must have a unique name that is case sensitive. They must be one of five permitted data types: text, boolean, color, URL, or number.

Template parameters are passed to the document as instance parameters. In most cases, a template user can edit the parameter’s default value to customize what appears in a template-based document. In other cases, the template author might determine what appears in the document, based on the value of a template expression.

Template expressions

Template expressions are statements that compute or evaluate a value.

You can use an expression to store a value and display it in a document. For example, an expression can be as simple as the value of a parameter, such as @@(Param)@@, or complex enough to compute values which alternate the background color in a table row, such as @@((_index & 1) ? red : blue)@@.

You can also define expressions for if and multiple-if conditions. When an expression is used in a conditional statement, Dreamweaver evaluates it as true or false. If the condition is true, the optional region appears in the template-based document; if it is false, it doesn’t appear.

You can define expressions in Code view or in the Optional Region dialog box when you insert an optional region.

In Code view, there are two ways to define template expressions: use the <!-- TemplateExpr expr="your expresson"--> comment or @@(your expression)@@. When you insert the expression in the template code, an expression marker appears in Design view. When you apply the template, Dreamweaver evaluates the expression and displays the value in the template-based document.

Template expression language

The template expression language is a small subset of JavaScript, and uses JavaScript syntax and precedence rules. Use JavaScript operators to write an expression like this:

@@(firstName+lastName)@@

The following features and operators are supported:

  • numeric literals, string literals (double-quote syntax only), Boolean literals (true or false)

  • variable reference (see the list of defined variables later in this section)

  • field reference (the “dot” operator)

  • unary operators: +, -, ~, !

  • binary operators: +, -, *, /, %, &, |, ^, &&, ||, <, <=, >, >=, ==, !=, <<, >>

  • conditional operator: ?:

  • parentheses: ()

    The following data types are used: Boolean, IEEE 64‑bpc floating point, string, and object. Dreamweaver templates do not support the use of JavaScript “null” or “undefined” types. Nor do they allow scalar types to be implicitly converted into an object; thus, the expression "abc".length would trigger an error, instead of yielding the value 3.

    The only objects available are those defined by the expression object model. The following variables are defined:

    _document

    Contains the document-level template data with a field for each parameter in the template.

    _repeat

    Only defined for expressions which appear inside a repeating region. Provides built‑in information about the region

    _index

    The numerical index (from 0) of the current entry

    _numRows

    The total number of entries in this repeating region

    _isFirst

    True if the current entry is the first entry in its repeating region

    _isLast

    True if the current entry is the last entry in its repeating region

    _prevRecord

    The _repeat object for the previous entry. It is an error to access this property for the first entry in the region.

    _nextRecord

    The _repeat object for the next entry. It is an error to access this property for the last entry in the region.

    _parent

    In a nested repeated region, this gives the _repeat object for the enclosing (outer) repeated region. It is an error to access this property outside of a nested repeated region.

    During expression evaluation, all fields of the _document object and _repeat object are implicitly available. For example, you can enter title instead of _document.title to access the document’s title parameter.

    In cases where there is a field conflict, fields of the _repeat object take precedence over fields of the _document object. Therefore, you shouldn’t need to explicitly reference _document or _repeat except that _document might be needed inside a repeating region to reference document parameters that are hidden by repeated region parameters.

    When nested repeated regions are used, only fields of the innermost repeated regions are available implicitly. Outer regions must be explicitly referenced using _parent.

Multiple If condition in template code

You can define template expressions for if and multiple-if conditions. This example demonstrates defining a parameter named "Dept", setting an initial value, and defining a multiple-if condition which determines which logo to display.

The following is an example of the code you might enter in the head section of the template:

<!-- TemplateParam name="Dept" type="number" value="1" -->

The following condition statement checks the value assigned to the Dept parameter. When the condition is true or matches, the appropriate image is displayed.

<!-- TemplateBeginMultipleIf --> 
<!-- checks value of Dept and shows appropriate image--> 
<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateEndMultipleIf -->

When you create a template-based document, the template parameters are automatically passed to it. The template user determines which image to display.

 Adobe

Get help faster and easier

New user?