Dreamweaver Templates: Track 2

These instructions are designed to work with Layout Builder Magic version 1.2.8 or higher. Make sure you have the latest version installed. The tutorial is a series that includes 2 unique tracks to pick from:

Track 1 is for smaller, simpler sites where all pages will use the same main structure. You can still add nested rows and columns to customize individual child pages within the main structure.

Track 2 is for larger or more complex projects where you need the flexibility to present any page in a unique layout. Track 2 epitomizes the power of Layout Builder Magic.

This page was built using the techniques taught in this tutorial. As you view additional pages, you will find differing column and row configurations. But all pages in this track are based on a single Template file.

The steps to create

The steps to create your Track 2 Template file are different than those used in the Track 1 tutorial. You'll be creating a template-basis document, in the root—just as you do in Track 1—but you'll be including a special row, reserved for content. This special row will become the key to allowing you to use a single Dreamweaver Template to drive multiple layouts.

Define a local site using Dreamweaver's Site Manager.

Create a new document and save it in the root of your new site. The name is not important. I would save it as template-track2-basis.htm.

Open Layout Builder Magic and create your page structure and design. If you want to emulate the Template used for the Track 2 tutorial, your structure would be:

Row 1: A single column row for your logo

Row 2: A single column row for your navigation bar. You can design your own menu or use one of our menu building tools. We used the menu tool that comes with Layout Builder Components to make the menu on this page:
See Layout Builder Components

Row 3: A single column row reserved for building the content layout in your child pages. When you create this row, set the column inside to the no-padding option. This will allow you, on child pages, to nest a second LBM instance that will define that page's row/column structure. We recommend that you delete the boilerplate heading and paragraph that LBM places into this row with a single line of text:

Insert nested LBM for page content layout here

Make sure it is a simple line of text not formatted as a paragraph or heading. You can use the Format box on your Property Inspector to set formatting to None.

Row 4: Your footer.

Once everything is as you want it, choose File > Save as Template. Give your Template file a logical name, such as site-template2-2016. The file will be saved inside the Templates folder in the root of your local site as site-template2-2016.dwt. This file does not ever need to be uploaded to your server. It does its thing locally.

Set up an editable region

In Design View, select the text you placed in Row 3: Insert nested LBM for page content layout here.

Choose Insert > Template > Editable Region

Name your region:

We named ours Content-Region.

If you peek inside Code View, your editable region will look something like this:

<div class="lbm-column width-100 lbm-no-pad">
<!-- TemplateBeginEditable name="Content-Region" -->
Editable Layout Region. Add nested LBM here.
<!-- TemplateEndEditable -->
</div>

Important: Make sure the editable region comments are inside your .lbm-column DIV.

Updating your Template's locked regions

  1. Updating your locked content is simple. Some common examples of why you would this are:
  2. You've made a new logo
  3. You need to change or add a link to your menu
  4. You need to change the copyright year in your footer
  • Open your main Template file. In this case, Templates/site-template2-2016.dwt.
  • Make the desired change to your logo, menu, or footer.
  • Save the Template file (File > Save). An update dialog will appear:

  • Click the Update button.
  • Since Dreamweaver Templates work locally, make sure you upload the listed updated files to your web server.

Creating your first child page

The first child page you make is your site index page. To create it, you use Dreamweaver's New Document dialog.

Choose File > New

The New Document dialog will open. Note that the dialog will be slightly different depending on your Dreamweaver version. The capture below is from CC 2015. Older versions will be different but similar enough to figure things out.

Choose Site Templates, then the name of the Template you created (in this case, site-template2-2016). Leave Update page when template changes checked.

Click Create.

As soon as the new page appears, you should save it before doing anything else. Typically, you would save this first page as index.htm (.html, .php, etc.).

Build a page structure inside the editable Content-Region

Your first child page should look something like this:

As you move your cursor abut the page, you will notice that you can only establish an insertion point inside the Content-Region box. Your logo, menu, and footer will not allow you to insert an editable cursor. Instead, you will see the locked cursor.

Place your cursor inside Content-Region box and delete the text inside. Once the text is deleted, and with your cursor inside the now-empty box, open the LBM interface.

Choose an Action: click the Create Nested LBM button.

The main LBM UI will open. Create your content layout with as many rows, columns, and options as you want.

Now you're ready to add your content. when you are done, save your page..

Adding additional child pages

You've got a decision to make—one that will demonstrate the true power of Layout Builder Magic!

Choice 1

If the child page you are going to make will have the same row/column structure as your index page, do not use Dreamweaver's New Document dialog (File > New) as you did when you created your home page. Instead, simply save a copy of your first page:

Open the first page and choose File > Save As.

Save the page with a new name. You can save the page in any folder within your defined site.

It will use the same CSS and script files used by your index page. Styling changes made in the LBM UI will be reflected on the new page, as well as the index page.

Tip: If for some reason, you ever need to restructure this page, open the LBM UI and check the following option at the bottom of the screen:

Create New UI Style Sheet for this LBM Instance

Click OK.

Now, any styling or structural changes you make in the LBM UI for this page will use a separate style sheet and will not affect your index page.

Choice 2

Use this method when your new page needs to have a different content structure than your index page. As an example, let's say your index page is a single column design with colored rows, like this page. But you want your interior pages (or some of them) to be a more conventional 2-column design with a sidebar. In that scenario you would use Dreamweaver's New Document dialog:

Choose File > New

The New Document dialog will open.

Choose Site Templates, then the name of the Template you created (in this case, site-template2-2016). Leave Update page when template changes checked.

Click Create.

When the page is created, give it a name and save it. It can be saved to any folder in your defined site.

Create your content structure inside the Content-Region editable region. Use the style options in the LBM UI, secure in the knowledge that the styles you set will not affect your other pages.

Sample Pages

This document is a child page of a Dreamweaver Template created using the techniques taught in this tutorial. We've created a second child page, based on the same Template, but designed with a completely different layout. This is unprecedented, amazing, mind-blowing, and quite impossible without Layout Builder Magic.

Wanna see the second page?

See the Second Page

Important Notes and Insights

The concept is so simple, yet so powerful. What you've learned today cannot be done with the tools Adobe has build into Dreamweaver. It would simply be impossible The techniques you've learned today will enable you to drive an entire web site from a single Template, with an important difference:

Your site can consist of many different content layouts, while your logo, navigation, and footer are snugly managed from within a single Dreamweaver Template file. And since your content structure is always editable (on all pages), the possibilities are bound only by your imagination.

Now that's power.

Layout Builder Magic makes Dreamweaver better in so many ways.