Web development tutorial

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Design Extender

4 ratings | Sign in to rate this tutorial | View comments

Print tutorial
View this video
Share this tutorial

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.

next section

What you need to start

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

next section

Make 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

Click File > New
Select Blank Template
Select PHP template as the Template Type
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
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

Select a region on the template by clicking the dashed line between areas
Click Insert > Template Objects > Editable Region
Click OK
The area is now editable, and can be used to enter data on pages using the template.
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.

next section

Convert it to a theme

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

With the template open, click WebAssist > Framework Builder > Themes > Create Theme
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
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.

next section

Create 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

Click WebAssist > Framework Builder > Themes > Create page with Theme
Make sure the theme we just created is selected ( it'll be the name of the template you used to create it )
Click OK
Enter a name for the page
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.

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

Reviews 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

4 ratings | Sign in to rate this tutorial