IT tutorials

Dreamweaver CS5 : Using Dreamweaver Templates - Adding Content to Template Documents

11/17/2011 5:19:04 PM
- Windows 10 Product Activation Keys Free 2019
- How to active Windows 8 without product key
- Malwarebytes Premium 3.7.1 Serial Keys (LifeTime) 2019
Constructing a template is only half the job — using it to create new pages is the other half. Because the basic layout is complete and you're only dropping in new images and entering new text, creating pages based on templates takes just a fraction of the time needed to create regular Web pages. Dreamweaver makes it easy to enter new content as well — you can even move from one template region to the next, much like filling out a form (which, of course, is exactly what you're doing).

To create a new document based on a template, follow these steps:

  1. In the Template category of the Assets panel, select the desired template and choose the New From Template option from the panel's context menu. Alternatively, choose File => New. Then, from the New Document dialog box, select the Page From Template category and choose the site and desired template, as shown in Figure 1.

    Figure 1. A list of all the templates by site is accessible by choosing Page From Template in the New Document dialog box.
  2. If you want to maintain a connection between the template-derived document and the template, leave the Update Page When Template Changes option selected. To detach the template from the newly created document and make the entire page editable, deselect the option.

  3. Click OK when you're finished.

When your new page opens, the editable regions are again highlighted, as shown in Figure 2; furthermore, the cursor is only active when it is over an unlocked region. If you have the Code view open, you also see that the locked region is highlighted in a different color — by default, gray. Document highlighting makes it easy to differentiate the two types of regions.


A document created from a template is known as an instance of that template.

Figure 2. In a document based on a template, the template regions are clearly marked.

Generally, it is easiest to select the editable region name or placeholder first and then enter the new content. Selecting the editable regions can be handled in several ways:

  • Highlight the region name or placeholder with the mouse.

  • Position your cursor inside any editable region and select the <mmtinstance:editable> tag in the Tag Selector.

  • Choose Modify => Templates and select the name of your editable region from the dynamic list.


If all your editable regions are separate cells in a table, you can tab forward and Shift+Tab backward through the cells. With each press of the Tab key, all the content in the cell is selected, whether it is an editable region name or a placeholder.

Naturally, you should save your document to retain all the new content that's been added.

Behaviors can be added without any additional coding or workarounds to links within editable regions. You cannot, however, add a behavior to text or an image in a locked region.

Converting a Page to a Template

In this Dreamweaver Technique, you convert an existing page to a template and apply editable regions to several page elements.

  1. From the Techniques site, expand the 28_Template folder and open the template_start file.

  2. Choose File => Save as Template.

  3. In the Save As Template dialog box, enter house_listing in the Save As field and click Save.

  4. When the Update Links dialog box appears, click Yes.

  5. Dreamweaver stores the new file in the Templates folder as house_listing.dwt. Notice that the term <<Template>> is now visible in the Dreamweaver title bar. The next task is to begin adding editable regions to the template. Select the text A Real Steal by dragging across it with your mouse.

  6. Because you want to make just the text inside the <h1> tag an editable region and not the entire tag, it's best not to use the Tag Selector. From the Insert panel's Common category, choose Templates: Editable Region.

  7. In the New Editable Region dialog box, enter Headline in the Name field.

  8. If you have Visual Aids => Invisible Elements enabled, you'll see a border appear around the editable region as well as a tab naming the area. Delete the selected original text and enter the placeholder text Short Headline.

  9. Place your cursor in the first paragraph of text and choose the <p.firstParagraph> tag from the Tag Selector.

  10. Repeat Steps 6 and 7 to create a new editable region; name the region Description.

  11. Press Delete to remove the selected original text. Press Enter (Return) to create a new paragraph and enter this placeholder text: Enter lively description of property here. Use upbeat adjectives and short declarative sentences. Make sure the firstParagraph style is applied.

  12. In the Property inspector, choose firstParagraph from the Style list.

  13. Select the second paragraph in the Tag Selector and click Delete to remove it.

  14. Save your page; Dreamweaver notes that the Headline editable region is within a block tag. Click OK to acknowledge that this is by design.

- Dreamweaver CS5 : Using Dreamweaver Templates - Using Editable Regions
- Adobe Photoshop CS5 : Fixing Depth-of-Field Problems
- Adobe Photoshop CS5 : Using the Dodge and Burn Tools
- QuarkXPress 8 : Combining type and graphics
- QuarkXPress 8 : Fine-tuning typography
- Adobe After Effects CS5 : Curves: Gamma and Contrast
- Adobe After Effects CS5 : Levels: Histograms and Channels
- Adobe Fireworks CS5 : Adjusting tonal range & Using the Align panel
- Adobe Fireworks CS5 : Importing images & Distortion-free bitmap scaling
- CorelDraw 10 : Naming a Web Page
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
Popular tags
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS