close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Using themes in Data Bridge and Design Extender

Tutorial created by Team WebAssist

Categories: Data Bridge, Design Extender

rating

Hey there, boys and girls; today we're going to learn how to create a theme from a template using the Framework Builder tools available in Data Bridge and Design Extender, apply them to every page that uses the template the theme is based on, and how to create new pages using the theme.

When you're using templates in Dreamweaver and you make an update, you have to update every file that uses the template and then upload them... every single one of them... it's a mighty time consuming process. Themes dynamically load on all of your pages, so any updates done don't require each page to be updated and uploaded.

It's a fairly easy process, so gird up those loins, and let's get this party started.

arrow downWhat you need to start

  1. A dynamic site set up within Dreamweaver
  2. Dreamweaver CS3 or later
  3. Data Bridge or Design Extender installed and activated in Dreamweaver

arrow downMake a New template

The first step that we're going to do is create a basic template with Dreamweaver.

Or instead of creating a template, you can use one of our free Dreamweaver templates, create a folder in the root of your site called Templates and place it there. Then you can skip down to the next section.

Step 1: Make a new template

  1. Click File > New
  2. Select Blank Template
  3. Select PHP template as the Template Type
  4. Select 3 column fixed, header and footer as the Layout
    This can really be any template you want, but we'll do this one because it's pretty cool, and has several areas that we can change to be editable
  5. Click Create


Your template is now being created by Dreamweaver and will be available shortly%u2026 *ding* it's now available ( probably ). Once it's ready to go, we're going to need to change the regions on the page to be editable.

Step 2: Make the template usable

  1. Select a region on the template by clicking the dashed line between areas

  2. Click Insert > Template Objects > Editable Region
  3. Click OK
    The area is now editable, and can be used to enter data on pages using the template.
  4. Repeat these steps for the rest of the regions on the template


Now you have your template all nice and neat. Save it, and we'll move on to the next step of goodness.

arrow downConvert it to a theme

Now let's take our template and turn it into something more useful.

  1. With the template open, click WebAssist > Framework Builder > Themes > Create Theme
  2. If you have any pages using this template ( helpful if you're using an existing template ), check the Apply to all pages that use this template checkbox
  3. Click OK


The magical unicorns within Data Bridge and Design Extender are now taking your template and running it through it's rainbow filters, and churning out a sparkling mess of Theme goodness.

arrow downCreate themed page

The very last step is for us to stretch our minds to their limits and create a new page using the theme we just created

  1. Click WebAssist > Framework Builder > Themes > Create page with Theme
  2. Make sure the theme we just created is selected ( it'll be the name of the template you used to create it )
  3. Click OK
  4. Enter a name for the page
  5. Click Save


And there you go. You now know how to take your templates, convert them to to themes, and create pages using the themes for your site.

arrow downWhat to do next...

Well done. Now all you need to do is create a real template for your site, turn it into a theme, and make a million pages with it to wow friends and neighbors.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

Warrio: 3 Years, 4 Months, 1 Week, 4 Days, 6 Hours, 58 Minutes ago

Great concept, just wondering how much more overhead it adds to the page load

rating

Warrio: 3 Years, 4 Months, 1 Week, 4 Days, 6 Hours, 48 Minutes ago

No need to answer my last question, tested a few pages on webpagetest.org and the diffence is negligble.
Cheers

Team WebAssist: 3 Years, 4 Months, 1 Week, 4 Days, 4 Hours, 51 Minutes ago

Thanks for the feedback, namon96!

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.