Module 4

Introduction to Templates

March 17

What is a Template?

• A template allows you to reuse

the same design and code over

and over

• Parts of the template are “locked

down” to prevent modifications

• Other areas become editable and

allow for content to be placed in

them

• Making changes in your template

applies those changes to all

pages using that template

What is a Template?

Editable area

All other areas

are “locked”

Static vs. Dynamic web pages?

Static Dynamic

• Prebuilt content is the same each

time the page is loaded

• Content is generated “on-the-fly” and

changes regularly

• Content only changes when

someone updates and publishes the

file (sends it to the web server)

• Page contains "server-side" code,

allows the server to generate unique

content when the page is loaded

• HTML code• PHP, ASP, and JSP or other

• Can pull content from a database

• Example: About Us page with

corporate background, mission,

vision, etc.

• Example: upcoming events on a

homepage pulling from a calendar

and changing each day

Templates

• Web content management

systems (WCM) use templates

• Called themes in some

systems (Wordpress, Drupal)

• Templates can be custom built,

purchased online (from a vendor

such as ThemeForest.com) or

downloaded for free

Dreamweaver Templates

• Dreamweaver allows you to build templates in HTML (or other languages)

and apply the template to static pages

• Creates a .dwt file in your site (in a templates folder)

• Parts of the template are tagged as being an “editable area”

• When a template is applied to a new or existing page the design of the

page will take on the new look/feel

• Content (text, images, videos, tables, etc…) can then be inserted into the

editable areas

• Site must already be using Dreamweaver’s Manage Site features to define

a local root folder for your web site on your personal computer

Creating Dreamweaver Templates

• Can create a template from a

new html page, or can save an

existing page as a template

• Once created, templates can be

applied to a new page - use

“Create from Template” option

• Templates can also be applied

to existing pages - will need to

indicate what editable region

content is going to go in

• Creates a “Templates” folder

where all will be saved…don’t

move them!

Locked vs. editable areas

• Pages using a

template will have

different content

• Need to create

“editable” areas

within the template

• Under “Insert” you’ll

find these options

• Simplest is an

“Editable Region”

Give it a

unique name…

Creates

code…

…that appears as

Locked vs. editable areas

• Editable regions works best within a

<div> tag or other structural HTML

tag that surrounds all of the text,

images, or other elements in the

page that you will want to edit

• Editable regions can get more

complex, e.g:

• Repeating elements

• Tables that allow rows to be

added

Changing a template

• Biggest advantage of

templates is that when you

want to go back and edit

elements you use

throughout your site (such

as the navigation links) you

make that change once to

the template and it’s

automatically changed on

every page using the

• …but the files that changed

then must be uploaded to

the server to be visible

online…

Pros & Cons of Dreamweaver Templates

Pros Cons• Useful when many pages look the same

and share common elements (eg. banner,

menu, footer…)

• A different template is required for pages

that are organized in different ways

• Changes are made once an applied to all

pages using the template

• Large sites can be time consuming to

update in this way

• Simple and easy to create and tag• HTML pages must still be uploaded to the

website (server) to be visible

• Limits “messing up” code on your site,

useful if someone else needs access to edit

• Requires Dreamweaver software to

manage and work with templates

• Helpful for small sites that aren’t updated

frequently

• May not be the best long-term solution for a

site (think CMS!)

Conclusion

• Dreamweaver

templates can be

useful in some

situations…

• As you learn more

about content

management systems

you’ll see the

advantages of using a

system for sites

Module 4 independent study

• Please watch the videos and read the articles found in

the Online Learning / Independent Study section of

Module 4 and complete Quiz 4 before next class