dreamweaver templates free

Document Sample
dreamweaver templates free Powered By Docstoc
					General comments about using templates in Dreamweaver
SAZMUG session on April 6, 2006, given by Laura LePere and Linda Ffolliott
Send template and other Dreamweaver questions to sazmug@listserv.arizona.edu

Why use templates? Templates in Dreamweaver provide a layout for documents on your website and
are used to: (1) provide a consistent appearance of pages on your site; (2) allow for changes through a site,
like changing common graphics or adding or deleting links; and (3) protect common elements on a page from
you or others working on the site from accidentally changing those elements.

Need editable regions: A template will have parts of the page that are protected, and can only be
changed by editing the template, and parts of the page that are editable. You need to think out carefully your
pages, having as many editable regions as NEEDED. Besides the basic editable regions, you can also have
repeating regions or optional regions. It does not matter if regions in the template are inside a table structure
or inside a DIV area.

Where templates are stored: All templates must be stored in a common folder called Templates, at the
root of your site. Even if you have very different parts of your site, which have their own templates, these
templates are all stored in the same folder. If there are no templates and you create one, Dreamweaver
creates this folder for you. If you have a Templates folder, and create a new template, Dreamweaver will add
the template to this folder.

Style sheets and templates: Style sheets are easily used in conjunction with templates. If all of your
pages on the site are created from your template, the style sheet can be bedded (i.e., internal). If you will
have some pages not using the template, then you should use an external style sheet. Typically a template
controls the overall layout of the page, while style sheets control the location of elements or the appearance
of elements on the page.

Using an existing template: Have the site open in Dreamweaver and use File > New. Select the tab of
Templates. Select the site you are using and you can see the list of templates for that site. Select the
template you want to use, then Create to create a document using that template. When you save a
document created from a template, select the appropriate folder on your site, depending on the content of
the document.

To change an existing template: Open the template in Dreamweaver. You won't see the NOT symbol
as you move the mouse around the page. Anything can be changed. Using File > Save will save the
template and you will see prompts to update pages. Any open documents using that template would also
have to be saved. If the document is not opened, then it is saved automatically for you. Changes made
inside an editable region in the template will not appear in the updated pages.

To force an update of pages that use templates use Modify > Templates > Update Pages. You can
choose to update pages that use a specific template or all pages in the site that use templates.

Still need to post changed files to server: Changing an existing template and its documents only
changes the files locally. You still have to post up the web documents to the server. It is not necessary to
post a template to the server, unless there are multiple people working on the site and using the template,
and they would have to get a copy of the new template locally. Templates are used at the time the
document is created. They are not used by the browsers to display the web page.

To create a template: Open a document you want to make into a template or create a page they way you
want it to look. Use File > Save as Template and give it a template name. In the prompt to Update links,
say YES. This changes the images and links so they are correctly referenced in relationship to the template,
which is in its own folder. You will see ../ in front of the image name or link.

You cannot just type in a link name or a graphic name, unless the image source or link is absolute, with a
complete URL.

Then select the part of the webpage to be made an editable region, and use Insert > Template Objects >
Editable Region. Give the region name a meaningful name, which can have spaces in it. Names must be
unique for that template.

To detach a document from a template (with the document open) use Modify > Templates >
Detach from Template – dangerous to do this since changes in templates won’t occur in this document.

To apply template to document that is not controlled by a template
Use Modify > Templates > Apply Template to Page

The resulting document will look funny if the existing page had other navigation or graphics which compete
with or duplicate the template look. Sometimes it's easier to create a new template document and copy and
paste information from an older document, rather than apply a template to a more complicated web page.

Reasons you might want to do this anyway: You inherit a site that could use templates but doesn't. You
want to start using Contribute with your site and you want to make certain areas off-limits to content
updaters. You start working with another developer and you want to maintain consistency. You realize you
want to make changes to a number of pages and you don't want to have to do it individually on each page;
for example, change to CSS layout.

Suggestion: Make a temporary editable region in your template to hold the existing body content. The
bottom of the document is a good place to put it. (You want to separate it from your main layout.)

          o  Copy the page title
          o  Modify > Templates > Apply Template to Page…
          o  Select a template from the dialog box
          o  In the "Inconsistent Region Names" dialog, assign a location for the existing head and body
             content to go. Put the body content in the temporary region. If your head contains javascript
             or styles you want to keep; put the head content in the head.
           o Paste the page title in the "Page Title" box.
           o Copy just content you want from the temporary region to the region where you want it.
           o Delete any duplicate or competing layout or design elements from the temporary region.
           o Once you have converted all your pages you can delete the temporary region from the

Things to watch out for: Existing font tags or inline styles in the editable regions will override
embedded or linked styles in the template controlled regions. If you kept your old head content you may
have links to old style sheets that could conflict with your new design. Or you may have duplicate style
sheet links, which could create a problem later on if you want to change style sheets links in the template.

Suggestion: If you are making major changes to styles, work out your changes in a separate file so you don't
have to update all the attached documents a million times. If you use embedded style sheets, you can use a
test document that doesn't use the template. After you have the styles worked out, copy the embedded
styles to your template and update all your pages. Or you can use a linked style sheet.

Applying templates to documents that are already controlled by a template: You might want to
do this if you are making dramatic changes rather than make a whole series of modifications to an existing
template. If you have exactly the same editable areas you can choose Modify > Templates > Apply
Template to Page… and it will simply change the template name in the upper right of the page. If there are
ANY differences in the number or names of editable areas you will have resolve them in the Inconsistent
Region Names dialog. Proceed with caution!!!

SSI compared with templates: Server-Side Includes (SSI) can be used in conjunction with templates.
An SSI can only be used for blocks of code with no internal changes from page to page. It does have the
advantage that the pages that use it don't have to be updated and uploaded. Templates are better for
situations where there will be changes within a block of code from page to page.

Deciding on editable areas: Breaking content up into smaller editable areas instead of larger ones allows
you to easily change the order of smaller chunks of code. You are less likely to end up with something that
you want to change on all your pages being inside an editable area.

Optional regions: Used for areas that don't show up on every page. An example would be pages featuring
large images that require a different layout for portrait images and landscape images. Use Insert > Template
Objects > Optional Region. Then in each document that uses the template, choose Modify > Template
Properties to turn the regions on or off.

Making an attribute editable:
    Where you want to be able to change a given attribute for a tag. An example would be to allow the
    onload attribute to preload different images on different pages.

          o    Select the tag you want to be able to modify, in this case, the <body> tag
          o    Modify > Templates > Make Attribute Editable
          o    If the attribute already exists in the tag you have chosen it will show up in the dropdown box
          o    If the attribute isn't in the dropdown box, choose Add…
          o    Type in the name of the attribute, in this case, onLoad
o Make sure the "Make attribute editable" box is checked
o Add a label to identify this attribute in the document using the template. The Help suggest
  combining the tag name and the attribute name.
o Choose Type, in this case, Text
o Set Default, in this case, it is empty because I know I want a different image to preload on
  each page.


Macromedia’s template topic center

Listing of sources for Dreamweaver templates. Some are free but most have a fee:

Examples of advanced template features from Macromedia

Tutorials on templates, mostly free. These are for MX but things don't seem to have changed much in the
newer versions.
A book on templates from the same people.
And a nice list of additional resources from the same site.

Every book on Dreamweaver we have seen has a section on templates