Dreamweaver Templates: Track 1

This tutorial is designed to work with Layout Builder Magic version 1.2.8 or higher. Make sure you have the latest version installed. This 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.

You want easy? Well, it doesn't get any easier than this. Create a blank page, save it as your site index page, then have your way with it, using Layout Builder Magic and LBM Components to get it just right. Track 1 is the way to go when your project calls for each page in your site to have the same main structure. In this case, each page of our little demo site is a two-column affair with a logo row, a navigation row, a content row, and a footer row.

The steps to create

  • 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-basis.htm.
  • Open Layout Builder Magic and create your page structure and design... including a logo, menu, and footer. Don't forget you can use Layout Builder Components to make a gorgeous menu!
  • Once everything is as you want it, choose File > Save as Template. Give your Template file a logical name, such as site-template-2016. The file will be saved inside the Templates folder in the root of your local site as site-template-2016.dwt. This file does not ever need to be uploaded to your server. It does its thing locally.
  • Once your Template file is created, you can delete the template-basis.htm file.
  • Create as many Editable Regions as you need, inside your content columns, making sure the region is inside an lbm-column DIV only. If you are not familiar with Dreamweaver's template features, see the next section: Creating an Editable Region.
  • Leave your logo, menu, and footer locked (do not make them editable) so that changes made in your main Template (.DWT) file will update your child pages.

Creating an Editable Region

Working with Templates and creating editable regions is a fundamental Dreamweaver skill. But if you are new to Dreamweaver, the task of making a region editable inside of a content column is very simple.

Select the content to be made editable:

Choose Insert > Template > Editable Region

Name your region:

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

<div class="lbm-column width-50">
<!-- InstanceBeginEditable name="Sidebar" -->
<p>This is the content inside my column</p>
<!-- InstanceEndEditable -->
</div>

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

Creating child pages

To create a new child page, linked to your Template, choose File > New

The new file 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-template-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.).

Now you are ready to edit content

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

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-template-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.

And that, my friends, is one way to make a web site using Dreamweaver Templates to manage site-wide assets with a Layout Builder Magic design. Yes!

But you can still get creative...

Your site is done, you love it, but then you realize that you need a 2-column row in your main content area to display two mission critical images. Oops? Before you kick yourself in the rear end, remember that you are working with a brilliant PVII tool. Layout Builder Magic supports nesting! If this is what you need, then please, by all means, continue to the following page:

Nesting LBM inside a Template

Mobile Friendly

As a point of information, you should know that Layout Builder Magic pages are Google Mobile Friendly by default. To check this page, go here:

Google MF Test

Enter the URL and run the test. It passes! Of course.

Did you expect anything else?
Nah. We didn't think you did.