From a workshop series offered in Fall 2007.

1. Intermediate Macromedia Dreamweaver MX Sarah Bombich
STaRS Student Training Arc: Library Technology Center
Revised 11/24/10 1/6
Intermediate Macromedia Dreamweaver MX
Goals
 To practice using templates to create a consistent look and feel across a site while
making site maintenance speedy
 To practice using library items for rapid site updating
 To understand the purpose of cascading style sheets and understand how to
implement them in Dreamweaver
Prerequisite and Helpful Knowledge
 Familiarity with the World Wide Web (WWW) required
 Understanding of how the WWW works, including familiarity with web servers, web
browsers, and web standards, is strongly recommended
 Understanding of how a web site is structured, both the underlying files and the user-
experienced site structure, is strongly recommended
 Working knowledge of HTML is strongly recommended
Templates
Templates allow you to create a consistent look and feel across a site. They are also very
helpful when you want to easily update and manage a site. They can be used in conjunction
with library items.
You can create a template from an existing document or you can create a template from a
new, blank document. Dreamweaver saves templates with the file extension .dwt. Templates
are saved in a special Templates folder in the local root folder of the site.
Note: Do not move your templates out of the Templates folder, or put any non-template
files in the Templates folder. Also, do not move the Templates folder out of your local root
folder. Doing so causes errors in paths in the templates.
Creating Templates
 Creating a template from scratch
o With a blank or existing document open, choose File > Save as Template
o If you haven't already, you may be prompted to set editable regions.
o In the dialog box that appears, select a site and enter a name for the template in the
Save As box. Click Save.
 Editing an existing template
o Choose Window > Site.

2. Intermediate Macromedia Dreamweaver MX Sarah Bombich
STaRS Student Training Arc: Library Technology Center
Revised 11/24/10 2/6
o Choose the template you would like to edit and edit the template in the Document
window.
o You may be prompted to update attached pages. If you do not update the attached
pages and then re-upload the affected pages, your template change will not take
place.
Defining Editable Regions
 Turning existing content into an editable region
o Before you insert an editable region, you should save the document you are working
in as a template. If you insert an editable region in a document rather than a
template file, Dreamweaver warns you that the document will automatically be
saved as a template.
o Select the text or content that you want to set as an editable region
o Insert an editable region:
 Choose Insert > Template Objects > New Editable Region
 Right-click (Windows) or Control-click (Macintosh) the selected text or
object, and choose New Editable Region from the context menu
o The Editable Region dialog box appears; in the Name text box, enter a unique name
for the region (You cannot use the same name for more than one editable region in
a particular template).
Note: When you name a region, you can't use the following characters: single or
double quotation marks (' "), angle brackets (<>), and ampersands (&).
Note: The editable region is highlighted in the template. You can mark an entire
table or an individual table cell as editable; however, you can't mark several cells at
once.
o The editable region is enclosed in a highlighted rectangular outline in the template,
using the highlighting color that is set in preferences.
o A tab at the upper-left corner of the region shows the name of the region. If you
inserted an empty editable region in the document, the name of the region also
appears inside the region.
 Defining a new editable region in a template
o In the template, place the insertion point where you want to insert an editable
region.
o Choose Insert > Template Objects > Editable Region.
o In the Name: dialog box, enter a name for the region. The region name, surrounded
by braces ({}), is inserted into the template as a highlighted placeholder. When you
apply the template to a document, you can replace the place holder with text,
images, or other content.
 Unmarking a region (make it non-editable)
o Choose Modify > Templates > Remove Template Markup

3. Intermediate Macromedia Dreamweaver MX Sarah Bombich
STaRS Student Training Arc: Library Technology Center
Revised 11/24/10 3/6
Creating pages based on templates
 Creating a new document based on a template
o Choose File > New
o Click on the Templates tab
o In the dialog box that appears, choose a template and then click Create
 To apply a template to an existing Dreamweaver document:
o Open the document
o Choose Modify > Templates > Apply Template to Page
o Choose a template from the list and click Select
When you apply a template to an existing document, the content in the template is
added to the document. Dreamweaver may prompt you to indicate the editable region
in which you want existing text to appear.
 Detaching a document from a template
o Open the document you want to detach
o Choose Modify > Templates > Detach From Template
When you make a change to a template, Dreamweaver prompts you to update the pages that
use the template. You can also use the update commands to manually update the current
page or the entire site. Applying the update commands is the same as reapplying the template.
Updating templates
 Opening the template used to create the current document
o Choose Modify > Templates > Open Attached Template
 Updating the current document to the most current version of a template
o Choose Modify > Templates > Update Current Page.
 Updating the entire site or all documents that use a particular template:
o Choose Modify > Templates > Update Pages. The Update Pages dialog box
appears.
o In the Look In pop-up menu, do one of the following: Choose Entire Site, and then
select the site name. This updates all pages in the selected site to their
corresponding templates. Choose Files That Use, and then select the template
name. This updates all pages in the current site that use the selected template.
o Make sure Templates is selected in the Update option.
o Click Start

4. Intermediate Macromedia Dreamweaver MX Sarah Bombich
STaRS Student Training Arc: Library Technology Center
Revised 11/24/10 4/6
Library Items
Library items are a way to store page elements such as images, text, and other objects that
you want to reuse or update frequently throughout your web site.
When you place a library item in a document, Dreamweaver inserts a copy of the HTML
source code for that item into the document, and adds an HTML comment containing a
reference to the original, external item. The reference to the external library item makes it
possible to update the content on an entire site all at once by changing the library item and
then using the update commands in the Modify > Library submenu.
Dreamweaver stores library items in a Library folder within the local root folder for each site.
Note: Library items are good for storing headers and footers because you can update
once and propagate changes across your site.
 Creating a Library Item
Select a portion of a document to save as a library item.
o Choose Modify > Library > Add Object to Library.
o Enter a name for the new library item.
o Each library item is saved as a separate file (with the file extension .lbi) in the Library folder
of the site’s local root folder.
 Inserting a library item in a document
When you add a library item to a page, the actual content is inserted in the document along with
a reference to the library item.
o Place the insertion point in the Document window.
o Choose Window > Library.
o The Assets panel appears, showing the Library category.
o Drag a library item from the Assets panel to the Document window, or select an item and
click the Insert button.
To insert the contents of a library item without including a reference to the item in the document,
press Control (Windows) or Option (Macintosh) while dragging an item out of the Library
category of the Assets panel. If you insert an item this way, you can edit the item in the
document, but the document won’t update when you update pages that use that library item.
 To edit a library item
o Double-click the library item in Window > Library. Dreamweaver opens a new
window for editing the library item. This window is much like a Document
window, but its Design view has a gray background to indicate that you're
editing a library item instead of a document.
o In the dialog box that appears, choose whether to update the documents on the
local site that use the edited library item:
 Choose Update to update all documents in the local site with the edited
library item.
 Choose Don't Update to avoid changing any documents until you use
Modify > Library > Update Current Page or Update Pages.

5. Intermediate Macromedia Dreamweaver MX Sarah Bombich
STaRS Student Training Arc: Library Technology Center
Revised 11/24/10 5/6
What are cascading style sheets?
Style sheets describe how documents are presented on screens, in print, or perhaps how they
are pronounced. W3C has actively promoted the use of style sheets on the Web since the
Consortium was founded in 1994. The Style Activity has produced several W3C
Recommendations (CSS1, CSS2, XPath, XSLT). CSS especially is widely implemented in
browsers. [from http://www.w3.org/Style/]
By attaching style sheets to structured documents on the Web (e.g. HTML), authors and
readers can influence the presentation of documents without sacrificing device-independence
or adding new HTML tags.
Use embedded styles to format a single document, or use an external Style Sheet to control
several documents at once. Similar to templates, deciding upon your styles up front will help to
ensure that your pages have a similar look and feel. For documents to use an external Style
Sheet, you must embed a link to the Style Sheet in the head of the document.
The World Wide Web Consortium is responsible for the Cascading Style Sheets specification
(CSS1), which defines style properties (for example, font, color, padding, margin, word
spacing) that control the appearance of elements. Dreamweaver lets you set any CSS1
property. Bear in mind that not all styles are viewable by all browsers.
For detailed information on Cascading Style Sheets, please refer to the World Wide Web
Consortium http://www.w3.org/Style/
Using Style Sheets
Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS
guidelines. Style sheets work in 4.0 and later browsers, although support is not uniform.
Two types of styles are commonly used in Dreamweaver:
1. HTML tag styles redefine the formatting for a particular tag, such as H1. When you
create a style for the H1 tag, all the text with the H1 tag immediately changes.
2. Custom styles are similar to the styles you use in a word processor, except that there
is no distinction between character and paragraph styles. You can apply custom styles
to any range or block of text. If the style is applied to a block of text (such as an entire
paragraph or unordered list), a CLASS attribute is added to the block's tag (for
example, P CLASS="definition" or TABLE CLASS="indent"). If the style is applied to a
range of text, SPAN tags containing the CLASS attribute are inserted around the
selected text. You may manually want to use DIV tags instead of SPAN tags, because
DIV tags preserve indents and spacing better, but you have to type them in manually.
Text formatting that is manually applied to ranges of text can take precedence over styles. To
make styles control the formatting for a paragraph, remove all other formatting settings.
Although you can set all the style attributes defined by the CSS1 specification in Dreamweaver,
not all attributes appear in the Document window.
Creating Styles
 Window > CSS Styles
 Create an external style sheet by clicking on the icon

6. Intermediate Macromedia Dreamweaver MX Sarah Bombich
STaRS Student Training Arc: Library Technology Center
Revised 11/24/10 6/6
 Add a style to the sheet by clicking on the icon
 The three categories
you will need to use
most often:
o Type - Used to
specify the font, font
color, font size, and
font attributes
o Background - Used
to control for the
background color or
background image
o Box - Used to
control for table
padding and margin
setting
Applying Custom Styles
When you define an HTML tag or CSS Selector, these styles are automatically applied for you.
When you create a custom class code, you need to apply that style to the object you want to
possess that attribute.
 Applying a style using a SPAN tag
o Select the word or words
o Choose Window > CSS Styles
o Choose Apply Styles
o Click on the custom style
 Applying a style manually using a DIV tag
o Select the block of text you wish to format in the preview window
o Using the dual code/preview window, manually type in <DIV CLASS=”class name”>
before the block of text highlighted in the code window. Type </DIV> after the block of
highlighted text in the code window.
o Click on the preview window to see your change applied
 Applying a style using an HTML Tag
o Select the tag
o Choose Window > CSS Styles
o Choose Apply Styles
o Click on the custom style