Web Page Editors II
Created by: Jessica Anderson
Date: September 12, 2000
Web Editors: Dreamweaver 2
Table of Contents
Introduction 7 Section 5 – Templates & Libraries 41
Welcome 7 Creating a Template 41
What is Dreamweaver 8 Modifying a Template 42
The Interface 10 Creating a Library Item 43
Modifying a Library Item 44
Section 1 – Managing a Site 17 Now You Try It 45
Defining a Site 17
Files and Folder Management 19 Section 6 – Java Script & DHTML 47
Creating a Site Map 19 Creating a Rollover 47
Creating a Pointer Rollover 48
Creating a Rollover Menu 51
Opening a New Browser Window 57
Now You Try It 21 Dragging a Layer 58
Using Timelines for Animation 60
Section 2 – The Basics 23 Now You Try It 62
Creating and Saving 23
Inserting Images and Text 24 Appendix – Dreamweaver 63
Modifying Page Properties 25
Creating Links 27
META Tags 27
HTML Code 28 Homework 65
Now You Try It 30
Section 3 – Page Layout 31
Adding Layers 31
Layers to Tables 32
Creating and Modifying Tables 33
Now You Try It 35
Section 4 – Style Sheets 37
Redefining HTML Tag Styles 37
Defining a Custom Class 38
Linking to a Style Sheet 38
Converting CSS to HTML 39
Now You Try It 40
Web Editors: Dreamweaver 3
Web Editors: Dreamweaver 4
Web Page Editors II
Instructor: _____________________ Date: ______________________
Phone: ________________________ E-mail: ____________________
____1. Preview the manual
____ 2. Become familiar with Dreamweaver and its interface
____ 3. Become familiar with Site Management
____ 4. Define a Site to work in
____ 5. Learn the basics of Dreamweaver
____ 6. Begin creating web pages
____ 7. Learn the Layout functions in Dreamweaver
____ 8. Learn about Style Sheets
____ 9. Create a Style Sheet
____ 10. Become familiar with Templates and Libraries
____ 11. Create a Library Item
____ 12. Learn how to create Rollovers and Animation
____ 13. Create a rollover and a matching game
____ 14. Fill out the Class Evaluation
____ 15. Finish the Homework and Turn it in
Web Editors: Dreamweaver 5
Web Editors: Dreamweaver 6
Web Page Editors II
Welcome to UEN Staff Development’s Web Page Editors II: Dreamweaver
course. This class will introduce you to the world of creating web pages using
the web page editor program Dreamweaver. You will learn what features
Dreamweaver has to offer you, the web page designer, to save time and add
functionality to your pages.
Throughout the manual various graphics are used to note important information.
The Power Hand is used to note a new technique or skill that will help
you accomplish various tasks associated with web page editing.
The Lightning Bolt is used to denote special pieces of information.
These will vary from technical notes to helpful hints on how to
accomplish a particular skill or task.
Broken Wire icons are used to represent a trouble spot or a potential
problem area that you will want to avoid. Pay attention to these items
they may save you grief in the future.
Web Editors: Dreamweaver 7
What is DreamWeaver?
Dreamweaver is a professional web page editor or sometimes called a
WYSIWYG (What You See Is What You Get) HTML editor. Meaning that if you
create a web page using Dreamweaver it will show you the results instantly. In
comparison, if you were hand coding HTML you would have to do so in a text
editor, save it, and open a browser to see the results of the change.
Dreamweaver is similar to a word processor of web pages plus a lot more. Some
of the features of Dreamweaver include:
• Create web pages easily and quickly
• RoundTrip HTML
• Create Dynamic HTML (DHTML) gadgets and pages
• Supports Cascading Style Sheets (CSS) and templates
• Incorporate Java Script
• Manage multiple web sites and all associated web pages.
HTML stands for HyperText Markup Language. HTML uses a combination
of tags, attributes, and values to generate what we know as web pages. It
allows for the formatting of text, use of images and linking documents
together. Web page editors are the alternatives to writing all of the tags by
hand. Although these editor programs make it seem that learning HTML is
unnecessary we strongly recommend that you learn at least the basics of
HTML so you are not afraid of it. It is also helpful to understand how it
works and what it can do for you. Basic HTML is covered in the UEN Staff
Development course Web Page Creation: Basic HTML or there a lots of
good "how to" HTML books and web sites.
One of the most powerful features of Dreamweaver is roundtrip HTML.
Roundtrip HTML means you can alter the HTML code that Dreamweaver
automatically writes within the program. Most other web editors do not let
you alter their code within the program. This is because to make other
editors work the code has to be written in a specific way. This makes for a
lot of “Junk” HTML code making it difficult to edit outside of the editor.
Dreamweaver creates “Clean” HTML code that can be easily edited.
Roundtrip HTML is important for more than just editing purposes.
Because you can alter the code that Dreamweaver writes, it will leave your
changes alone even if it doesn’t understand them. The program doesn’t
assume that it knows more than you do, however Dreamweaver will
highlight in yellow HTML that it feels may be invalid. This helps when
trying to find errors in code. HTML is constantly changing. Because
Dreamweaver allows you to change the code, you are not prevented from
using new tags just because you have an older version of Dreamweaver.
Web Editors: Dreamweaver 8
Dynamic HTML is a collection of different technologies put together. This
(CSS), and Document Object Model (DOM). It also includes animation,
drag-and-drop, and complicated rollovers (buttons that change
appearance when you put your mouse over them). The purpose for
combining these technologies is to allow for more dynamic content than
what basic HTML provides. Like HTML, if you use DHTML effects in
Dreamweaver, most of the coding is automatically written for you behind
NOTE: There are some cross-platform issues with DHTML between
Netscape Navigator and Internet Explorer, so make sure you test what
you have created.
HTML HyperText Markup Language. The default markup for
basic Web pages and the root of DHTML.
CSS Cascading Style Sheets. A page layout system
understood by new web browsers, which allows for
better control over the appearance and positioning of
elements on a web page.
DOM Document Object Model. A hook to outside scripting
protocol such as ActiveX or external Plug-ins such as
Shockwave or Flash. It allows scripts and programs to
address and update documents.
Web Editors: Dreamweaver 9
Some programs use multiple windows and palettes to reach all of the features of
the program, soon all those windows and palettes clutter up you screen making it
almost impossible to see what it is you are actually working on. Instead
Dreamweaver uses just a few primary windows and palettes that change
depending on what you are doing. This helps to keep your screen working space
more organized and makes learning the interface easier. There are five main
parts to the interface:
The Object Palette
The object palette is a one-click stop for many functions. The palette
contains buttons for inserting various types of objects such as images,
tables, layers and more. You can modify the appearance of the palette:
1. Edit > Preferences > General > Object Palette
2. Change the setting to Icons with Text, Icons Only, Text Only
HINT: Items on the object palette are also found under the Insert pull
down menu on the top menu bar. The object palette is a shortcut to using
the top pull down menus.
Web Editors: Dreamweaver 10
Types of Objects
The Objects Palette is context sensitive. By default the palette shows the
most “common” objects. You can change the Object Palette to show 5
other category of objects; Forms, Frames, Head, Invisibles, and
Object Palette Types
Common Contains the most frequently used objects in
Dreamweaver such as images, table and layer.
Forms Contains buttons for creating forms and the elements
associated with forms.
Frames Contains buttons for creating a page using frames.
Each button gives you a different frame layout.
Head Contains objects for adding head elements such as
meta tags, and the title.
Invisibles Contains buttons for creating objects that are not
visible in the document window, such as anchors.
Characters Contains nine of the most commonly used characters
on a web page.
Web Editors: Dreamweaver 11
The Properties Inspector is context sensitive depending on what type of
element is selected. The Properties Inspector window content changes to
fit the settings of the selected element. The Properties Inspector controls
the setting for elements such as text, tables, images and more. When a
blank document is open in Dreamweaver the Properties Inspector defaults
to displaying settings for text as shown below.
Hint: The arrow in the bottom right corner allows you to expand and
contract the Properties Inspector window. The top portion of the window
displays the most commonly used properties of the object. All others
appear below the line where they can be hidden if screen space is
Launcher and Mini-Launcher
The Launcher is a short cut bar to several of Dreamweaver’s features.
By clicking on the buttons, you are able to “launch” the Site, Library, HTML
Styles, CSS Styles, Behaviors, History, and HTML Source palettes and
The Mini-Launcher at the bottom of the screen works exactly the same
way as the Launcher, minus the words to remind you which button open
each area. If you become familiar, with the launcher symbols you can
close the Launcher and use the Mini-Launcher to save screen space.
Web Editors: Dreamweaver 12
Launcher and Mini-Launcher Features
Site Opens the Site window where you can use the site management
features of Dreamweaver such as viewing a site map and
publishing your pages onto the web.
Library Opens the Library palette. The library is a collection of HTML
elements that can be shared from page to page.
HTML Styles Opens the HTML Styles palette. HTML Styles applies standard
HTML formatting to a selected text of paragraph. You can use
default styles or define your own.
CSS Styles Opens the Cascading Styles Sheets palette. CSS Styles lets
you define and keeps track of any customized Cascading Style
Sheets that have been added to the current page.
Behaviors Opens the Behavior Inspector window. This window allows you
History Opens the History palette. The history palette shows a list of
actions that can be undone, reused, or saved.
HTML Source Opens the HTML Inspector window. This window is where you
can see the actual HTML code for the current page that is being
created by Dreamweaver.
The Document Window
The document window is where all of the activity takes place. The
document window displays approximately what you will see in a web
browser. The document window is where you will be assembling your web
page. There are several elements of the document window. The elements
of the window are; Title bar, Rulers, Tag Selector, Window Size,
Document size and Download Time, and Mini-Launcher.
Web Editors: Dreamweaver 13
Tag Selector Window Size Mini Launcher
Document Window Elements
Title Bar Contains the name or “title” of your web page and the file
Rulers Show or hide by selecting View > Rulers > Show or Hide.
Tag Selector Displays the HTML code for the item that has been
selected in the document window.
Window Size Shows the current window size in pixels. Also allows you to
pick a window size from the pull down menu that
corresponds with common monitor sizes. This will help you
design a page that looks good at several resolutions.
Document Size & Gives you the approximate size and download time for the
Download Time current page that you are creating.
Mini-Launcher The small version of the Launcher. Gives access to key
functions of Dreamweaver.
Web Editors: Dreamweaver 14
Hint: There are several different preferences that you can set to change
the appearance of the Dreamweaver interface. You can get into those
preferences by going to Edit > Preferences. Go into the preferences and
see what options you have.
Web Editors: Dreamweaver 15
Web Editors: Dreamweaver 16
Managing a Site
Managing your site is a big challenge. It becomes difficult to keep track of all of
your files, graphics and their locations especially as you put your site on a web
server. Dreamweaver has a site-management feature that requires that you
create and keep all of your files in one main root folder on your hard-drive so you
can easily duplicate the folder structure on a web server. This helps in keeping
all of you links working and avoiding broken graphics.
Defining a Site
Before you start creating a web site you should create a Local Root Folder on
your hard drive and define that as a site in Dreamweaver. This root folder is
where you will save all .html files and graphics that your web page uses.
1. Create a folder on your hard drive where you want to store your web
2. Open Dreamweaver and press F5 or click on the Site button
in the Launcher to open the Site window.
3. From the pull-down menu select Define Sites…If you have already
have sites defined in Dreamweaver click the New Button in the screen
Web Editors: Dreamweaver 17
4. The Site Definition window will appear. In the Site Name: text box
give your site a name. Click on the yellow folder icon next to the Local
Root Folder text box. Browse to the folder you created on your hard
drive. Highlight the folder name and click Open and then Select.
Check the Use Cache to Speed Link Updates checkbox.
In order for your site to be seen on the web you need to load it onto a web
server. The most common way of doing this is through FTP (File Transfer
Protocol). You can do this in Dreamweaver by fill in the information needed if you
have it available. You need to get this information from you Network
administrator or your Internet provider. The following step will show you how to
set up FTP.
5. Select the Web Server Info in the Category list box. The right side of
the screen will change to Web Server Info. From the Server Access
pull-down menu select FTP. You screens should look like the one
Web Editors: Dreamweaver 18
6. Input your FTP information in the appropriate boxes. Get this
information from you Network administrator, or internet provider.
7. Click OK when you are finished.
8. Click the Done button on the Define Sites screen.
File and Folder Management
With in Dreamweaver you can create and manage file structures like you would
inside of Windows Explorer. You can create new folders, or files and move them
around. When you do this inside of Dreamweaver, you actually create those files
and folders on the hard drive.
1. Make sure the site window is open (F5). Click on the top folder in the
Local Folder view on the right side of the Site window. This is your
Local Root Directory.
2. Create a new folder by going to File > New Folder. This will create a
new folder on your hard drive in the local folder. Give the folder a name
3. If you have files in the local folder that you want moved in to the new
folder simply select them and drag them into the new folder.
Dreamweaver will ask if you would like to scan for link to the files just
moved. If you scan for them it will make a list of all file that refer to the
moved files. You can choose to update the links.
4. You can also create HTML files by going to File > New File. A blank
HTML page will be created. Give the new file a name. This feature lets
you set up you entire site without putting any content on a page.
Creating a Site Map
The site map is a great way to see the structure of you web site. A site map lets
you see what files link to each other. Dreamweaver also lets you make the site
map into a PICT or BMP file.
1. Open the Site window by pressing F5 or clicking on the Site button in
2. Click on the Site Map button in the upper-left corner of the site
Web Editors: Dreamweaver 19
3. A pull down menu will let you choose between two options, Map Only
or Map and Files.
The Map Only view will fill the entire site window with the Site Map. The
Map and Files view will only fill up the left side of the Site window with the
map leaving the local Folder view on the right side of the screen. It is up to
you what view you would like to see. Here is a Map Only view.
4. To save this view as an image file go to File > Save Site Map As…
pick a location on to save the site map image.
Dreamweaver has several other Site map feature that we will not cover in this
manual. We encourage you to look further in to the feature that the Site
management function has to offer.
Web Editors: Dreamweaver 20
Now You Try It
Define a site, create a folder called school_site somewhere on your computer,
either on the Desktop, hard drive, or a disk. Use the new folder as your Local
Create a Graphics folder in your site. The graphics folder is where you will put all
graphics that you use in your web site.
Web Editors: Dreamweaver 21
Web Editors: Dreamweaver 22
Lets get started creating Web Pages. In the “Basics” section you will learn how to
create a web page using Dreamweaver. You will learn how to insert and align
text and images, link images and text, setup page properties, insert META
information, and view the HTML code generated by Dreamweaver. Let’s get
Creating and Saving
Let’s learn how to create and save documents. By default when Dreamweaver
opens there is a blank untitled document. You can use this document or you can
create a new document by going to File > New.
When you create a new page it is a good idea to give the page a name or title.
The name or title appears in the top bar of the page in your browser. To add a
1. Go to Modify > Page Properties…
2. Type a title in the Title text box.
3. Click OK
Before you start to build your page, it is important to save it first. All the site
management features that we will talk about depend on Dreamweaver knowing
where your pages are saved. Besides you don’t want to lose any of your work if
the power were to go out or you computer crashes.
1. Go to File > Save or Save As…
2. Select the location of your “Local Root Folder” on your computer. If
this is the first page in your web site, it is a good idea to name it
TIP: Index.html has special significance in HTML. It almost always means that it is
the beginning page of a site. Web servers recognize index.html as the default
home page. When you type www.uen.org you are really seeing
www.uen.org/index.html even thought you did not type that exact address. The
server automatically opens the page named index as the first page.
Web Editors: Dreamweaver 23
Inserting Images and Text
Adding images to your page is just a couple clicks away. The hardest part is
finding or creating the right graphic for your page. To add graphics to your page
do the following steps:
1. Click on the Insert Image object in the Object Palette.
2. A Select Image Source window will appear. Browse to the location of
the graphic you want insert.
3. Click on the graphic file you wish to insert. A preview of the graphic
will be displayed on the right side of the window. If this is the right
graphic click, the Select button. You will see the graphic appear in
your document window.
Note: If the image you have selected is located outside of your “Local
Root Folder” Dreamweaver will ask you if you want to copy the graphic
into your folder. Make sure that you say yes. Save the image in your
graphics folder. Make sure that all image that you use on your pages are
saved inside your “Local Root Folder” or you will end up with broken links
to your images.
To center images on the screen:
4. Select the image you would like to center.
5. Chose Text > Alignment > Center
6. Save your work.
Tip: You can also insert images on your page using Insert > Image from
the top pull down menus.
Adding text in Dreamweaver is very simple. Dreamweaver is like word processor,
you can simply start typing text on your page and it will appear. To add text:
1. Place your cursor in the document window where you would like the
text to appear.
2. Simply start typing and the text will appear on the screen.
3. Press Shift+Return, to create a line break <BR>. This should put your
cursor on the next line without adding the two-space paragraph break.
Web Editors: Dreamweaver 24
4. Press Return, to create a paragraph break <P> between text.
5. Save your work.
To center text on the screen:
6. Select the text you would like to center.
7. Chose Text > Alignment > Center
8. Or click on the Align Center button in the Property Inspector window.
Modifying Page Properties
To change the background color as well as other attributes of your page use the
Page Properties window. Some of the attributes you can change are
background color, text and link colors.
1. Select Modify > Page Properties…
2. Move the Page Properties window around so you can see part of your
Document Window behind.
3. Click on the small box to the right of the word Background. A color
palette will open up.
4. Click on a color pixel. This will change your background color to be the
selected color. Click Apply to preview the change. Click OK if you are
finished making changes in the Page Properties window. You can do
the same process for Text Color, Links, Visited Links, and Active Links.
5. Another way to pick a color is to match a color using the eyedropper.
Instead of picking a color from the palette you can match the color of
anything on your document window or pallets. Most likely you will be
trying to match a color within a graphic. When the color palette comes
up move your mouse over the item that has the color you would like to
match. Make sure that your cursor is an Eye Dropper. Click on the
Web Editors: Dreamweaver 25
object with the matching color. The property color box should turn the
same color as the matching item. Click Apply to see the results.
6. You can use the hexadecimal value for a color instead of using the
color palette. Type in the number (#3333FF for bright blue) in the box
next to the property color you would like to change.
7. Save your work.
NOTE: All the colors shown in the Color Palette are web safe colors.
When you pick a color that is outside the palette you run a risk of having
the color look different between different browsers.
Title The title of the web page that will appear in the title bar of the
Background Image If you want a background image, specify it here.
Background Sets the background color.
Text Sets the default text color. It can be overwritten for specific text.
Links Sets the color to the links on the page.
Visited Links Specifies what color the link will be after some one has clicked
Active Links Specifies what color the link will be as someone is clicking on the
Left and Top Margin Specifies the default margin settings used by Internet Explorer
Margin Width and Specifies the default margin settings used by Netscape.
Document Encoding Specifies the language for the characters and fonts used in the
Tracing Image Adds a tracing image to your background. A tracing image is
used as a guide for layout purposes.
Transparency Sets the transparency level of your tracing images.
Web Editors: Dreamweaver 26
The ability to link pages with hyper links is what makes the web such a powerful
tool. You can make text or images a link.
1. Select the image or text you wish to make a link.
2. If you want to link to an html file that is within your site, click on the
small yellow folder next to the Link text box in the Properties
3. The Select HTML File window will pop up. Browse to the html file
location on your computer. Click on the file name and click the Select
button. You have just created a relative link or internal link. It is
relative because it linked to the document within the site and not to an
external web site
4. If you want to create a link to an external web site, select the image or
text you wish to make a link.
5. Type the web address (http://www.uen.org) into the link option in the
Properties Inspector window. Notice that if you are creating a text
link, the text color will change. You have just created an Absolute link
or external link. It is absolute because it starts with http:// and includes
the full address.
6. To preview and test your page in a web browser. Go to File > Preview
in Browser > select a browser or Press F12. Depending on what
your default browser is set for you may see your page in Netscape or
7. Make an email address link selecting the text and in the Properties
Inspector type mailto:address@somewhere in the Link field or click
the email link button from the common Object Palette. Type in
the text you want to be a link and the email address.
Once you have built a web page or site you want to have people visit your page.
Most people visit web sites through search engines. One of the ways to get the
search engines attention is to use META tags. META Tags are used by search
engines to categorize or index you pages correctly. You only need to add META
tags to you first or index page. To add META tags to your page do the following
1. Make sure that you have the index.html page in your document
window. Go to the Objects Palette and click on the arrow at the top.
Web Editors: Dreamweaver 27
Select Head from the pop-up menu. The Head menu contains the
2. Click on the Insert Keyword button. A dialog box will appear
were you can enter your keywords.
3. Type all words that you think someone looking for you page would type
into a search string in a search engine. Separate each new key word
with a comma.
4. Click OK
5. Click on the Insert Description button in the Head Objects
Palette. A dialog box will appear where you can enter a description of
6. Type a description of your page. You want to give a detailed
description of what your page has to offer but don’t get too lengthy.
7. Click OK.
HINT: If you have created a web site (multiple pages) you only need to
put the META information on the home page. If you put it on every page
the search engine will list every page you have created when really you
just want your site listed once.
You can view the HTML code that Dreamweaver creates. Looking at the code is
a great way to teach yourself HTML or to see how specific elements were added
in the code. Dreamweaver also color codes the HTML to make it easier to
distinguish between text, images and tags. Being able to see and edit the HTML
code is one of the great features of Dreamweaver.
1. You can view the HTML code by clicking the HTML button
in the Launcher or by pressing F10.
2. Make sure that there is a check in the Wrap checkbox. This will make
it easier to see all of the code without having to scroll horizontally.
3. Look at the top of the code in the <HEAD> tag and you will see any
<META> information that you have added.
4. Close the HTML code window by clicking the X in the top left corner or
press the HTML button once again.
Web Editors: Dreamweaver 28
5. Select an image and open the HTML code window. Notice that the
code associated with that logo image is highlighted. This is extremely
helpful when you want to look at specific HTML code in you page.
Web Editors: Dreamweaver 29
Now You Try It
Start to create the pages for your web site. Build 3 web pages, an index page
and 2 others you can link to the index page. The following are ideas for page
topics to build:
• School Homepage
• Faculty and Staff
• Student Resources
• Parent Resources
There are graphics you can use in the Dreamweaver > example_graphics folder.
NOTE: Copy any graphic you use on your pages into the graphic folder located
inside of you school_site folder. It is important to keep all graphics used in you
web site with in the Local Root Folder. This will prevent broken or missing
Link each page the index page. Test your pages in a browser by pressing F12 or
File > Preview in Browser.
Don’t worry about making your pages perfect the purpose of this activity is to get
you using the features we learned about. Once you get some practice you can go
back and make then look exactly the way you want them to.
Web Editors: Dreamweaver 30
Page layout with standard HTML is very difficult. There are no HTML tags that
allow you to move blocks of text anywhere on the page. You really only have
three options: center, right or left align. This can be very frustrating for someone
who has a great layout in mind but can not make it work with HTML. Tables help
with this frustration but tables are not very intuitive and it can be difficult to write
the HTML code. Dreamweaver has come to the rescue. With the advent of
layers, you can now move objects anywhere on the screen. In this section, we
will talk about layers, tables and converting layers to tables.
Let’s learn how to add a layer and insert images and text in to them. Once they
are there you can move them around to any location on the screen.
1. To add a layer to your page go to Insert > Layer. An empty layer will
appear on your screen in the form of a rectangle. Alternatively, click
the Layer button in the object palette and draw a layer by clicking
and dragging the cursor in the document window.
2. You can click and drag the layer around anywhere on the screen.
Click on the layer and drag your mouse to the location on the screen
that you want the layer then let up on your mouse button.
3. You can add an image or text inside of a layer. Click inside the layer.
You should see a blinking cursor inside the layer.
4. Go to Insert > Image or start typing the text you want inside your layer.
5. The image or text are now inside the layer. You can position the layer
anywhere you would like to on the screen.
HINT: When you create a layer in Dreamweaver, a small yellow icon
appears at the top of your page. This is an invisible element. By selecting
these markers you can easily select the layer associated with it.
6. You can create as many layers as needed to make a great layout.
7. Save your work.
Web Editors: Dreamweaver 31
Layers to Tables
However, there is a drawback to layers. They will only display in browsers
version 4.0 and higher. Any browser older than that will see layers all jumbled up
on the left side of your page. There is hope. Dreamweaver has made it so you
can convert your layers into tables, which can be view by older browsers. Let’s
1. Select Modify > Layout Mode > Convert Layers to Table… a dialog
window will appear.
2. Click the Table Layout: Most Accurate. Click the Prevent Layer
Overlaps checkbox. Click OK. The prevent layer overlap setting is
required since table cells cannot overlap even though layers can.
3. Save your work.
NOTE: Layers work best if every element on the page is in a layer. If your layout
doesn’t look right after converting to tables got to Modify > Layout Mode >
Convert Tables to Layers. All of your element will be in a layer then convert to
tables again. It is very easy to go back and forth between layers and tables.
Convert Layers to Table
Most Accurate Creates a table cell for each layer and creates all the cells
necessary to maintain the structure.
Smallest: Sets the edges of the layer to align if they are within a certain
Collapse Empty pixel range. This results in fewer cells and rows, which equal
Cells faster download. This option could possibly mess up your
layout. Experiment with it to see what happens with each page.
Use Transparent Put a transparent image in each empty cell. This can help
Gif maintain the layout in certain browsers that collapse empty
Center on page Centers the table on the page.
Prevent Layer This option warns you if you have any overlapping layers since
Overlap table cells can not overlap.
Show Layer Opens the Layer Palette, which allows you to rename or
Palette reorder your layers.
Show Grid Turns on the grid of the page if it is not already on.
Snap to Grid Snaps the layers to the nearest snapping point of the grid. This
can help you align objects.
Web Editors: Dreamweaver 32
Creating and Modifying Tables
There are times when you would want to use a table instead of a layer, like when
you are doing a calendar or a table showing teachers names and email address.
Let’s learn how to create a table:
1. Click on the Insert Table button in the Object Palette or
choose Insert > Table from the top pull down menu.
2. The Insert Table dialog box will appear. Fill in the appropriate
information to create your table.
3. A table should appear on your page with the amount of rows and
columns you specified in the dialog box.
4. You can merge cells to create one larger cell. To do this, select cells
you would like to merge by clicking inside the cell and dragging it
through all of the cells you would like to merge.
5. Choose Modify > Table > Merge Cells or click on the Merge Cell
button in the Property Inspector. This will result in all of the selected
cells becoming one cell.
6. Add another row by clicking in a cell and going to Modify > Table >
Insert Row a new row will be inserted above the cell you put where
7. You can delete a column or row just as easily. Select the row you want
to delete. Go to Modify > Table > Delete Row.
8. To add text in your table. Click in the cell you want to add text and
begin typing. You can format the text the same way you would outside
of a table.
9. To add an image to your table click in the cell where you want to insert
the image and go to Insert > Image.
10. You can adjust the column and row widths by moving your cursor to
the boarder of the column or row you want to adjust. Wait for your
Web Editors: Dreamweaver 33
cursor to change to a double arrow and them click and drag the line to
the width or height that you want.
11. You have just created a table. There are several other table options
we have just covered the basics. The best thing to do is get in and
experiment with them to see what you can do.
TIP: There are two types of tables, Percentage-based tables and Pixel-
based tables. A Percentage-based table will stretch with the width of the
browser. This means that the size of the table depends on the size of the
browser. The table will change sizes to fill up the specified % of the
screen. A Pixel-based table is a fixed size no matter how small or large
the browser becomes. What type of table to use is solely dependent on
what you want your page layout to look like.
Web Editors: Dreamweaver 34
Now You Try It
Create a Calendar using a table. You can create a new web page to add the
calendar in or you can use an existing page. Put a few events in the days of the
calendar. Play around with some of the table options. See what you can do with
Hint: A calendar has 7 columns and 5 rows. In your graphic folder I have put a
clipart of Santa feel free to put him in one of your cells if you are doing the month
Here is an example calendar:
Sunday Monday Tuesday Wednesday Thursday Friday Saturday
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Web Editors: Dreamweaver 35
Web Editors: Dreamweaver 36
Cascading Style Sheet (CSS) offer a way to define the appearance/formatting of
the text in your document to ensure consistent formatting and design in your web
site as well as saving you time. With a CSS Style you can make all of your
headings blue and all of your text green. With CSS style, you can set such
attributes as, which font the text should appear in, how much space should
surround it, and what color and size it should be. You can do this with just a few
simple instructions. We will be learning how to set up Styles and Style Sheets (a
collection of rules that define a page style) as well as redefine styles for HTML
tags and link pages to external style sheets.
NOTE: CSS Styles became available with Microsoft Internet Explorer 3.0 and
Netscape Navigator 4.0 older browsers do not support CSS Styles.
Dreamweaver will convert styles to HTML tags so that older browsers will not
have a problem. You get the best of both worlds.
Redefining HTML Tag Styles
There are many ways to implement styles in Dreamweaver. One of those is to
assign font attributes such as color and size to HTML tags.
1. Click the CSS Styles button in the Launcher or got to
Window > Styles in the top pull down menu. The Styles Window will
2. Click on the Open Style Sheet button at the bottom of the Style
3. Click on the New… button in the Edit Style Sheet Window.
4. Select the Redefine HTML Tag. Click on the arrow next to the text
box and select the tag you want to redefine. Click OK. A Style
definition window will appear.
Web Editors: Dreamweaver 37
5. Chose the attributes you would like to set such as font, size, color,
weight, case etc.
6. When you have finished setting up the tags attributes click OK then
Done in the Edit Style Sheet dialog box. You will be able to see the
formatting changes every time that tag is used in your page.
7. Look at the HTML code by pressing the HTML button in the Launcher.
Notice that all of the style sheet information was added to the <HEAD>
of the document.
8. If you would like a change to the style of a tag, click on the CSS Style
button in the Launcher. Click the Open Style Sheet button and
choose the tag that you want to change and click Edit.
Defining a Custom Class
You just learned how to define the attributes for tags, but what if you want to be
able to change the attributes of any text on the screen regardless of what type of
tag it is using? You can do this by creating a Custom Class. A Style Sheet Class
is a set of attributes that can be applied to any text on the page.
1. Click on Open Style Sheet button in the CSS Style palette. Click New
in the Edit Style Sheet menu. Check Make Custom Style (Class) and
give your class a name in the Name: text box (e.g. .green). It is
important that you put the . in font of name you choose. Click OK.
2. In the Style Definition window set the attribute you would like for this
class. Click OK and Done. You will not see any changes to your
screen yet because you have not applied the class yet.
3. Notice that your Style Palette now contains the class you just created.
Select the text that you would like to apply the class to and click on the
class in your Style Palette. The text that you selected should take on
the attributes you set up for that class.
4. Try setting up a couple different class styles and experiment with the
Linking to a CSS Style Sheet
Up to this point you have only created an internal CSS style sheet. You can also
create an external CSS Style Sheet so that different pages at your web site can
have the same set of style sheet information. CSS Style sheets are powerful
because if you change your mind about a style you can edit the style sheet and
all documents using that sheet will be updated.
Web Editors: Dreamweaver 38
1. To make a style sheet accessible to other pages we need to export it.
Go to File > Export >Export CSS Style. Name the file styles.css
(you can name it anything you want as long as it is in all lowercase
letters, no spaces and ends with the extension .css). Pick a location to
save the Style Sheet. It is a good idea to save it somewhere in the
same folder as the web pages that will be using the style sheet.
2. Open or create a web page that you want to link the style sheet you
just created to.
3. Open the CSS Style Palette if it is not already open and click on the
Open Style Sheet button.
4. When the Edit Style Sheet window comes up click on Link. Browse to
the location that you saved your external Style Sheet. Select OK.
5. You now have access to the style sheet that you created before.
Experiment with the Class style and redefined tags.
Converting CSS to HTML
Remember that older browser do not support CSS so to get around this problem
you can convert CSS to HTML tags.
1. To convert your CSS information to HTML go to File > Convert > 3.0
2. Click on CSS Style to HTML Markup in the dialog box that appears.
Click OK. This will create a separate Untitled Document.
3. Compare the HTML for the two different documents.
HINT: Dreamweaver creates another document for you when converting
in case you want to save the two different versions to have on hand.
Web Editors: Dreamweaver 39
Now You Try It
Now that you know how to use CSS style and style sheet in Dreamweaver create
one of your own.
Create a new page or use one that you’ve already created. Create a style sheet
for that page include:
• At least three redefined HTML tags one of the tags should be the body
• Create at least two custom classes.
Export your style sheet and link it to at least one other page. Play around with
some of the attributes and see what result you get.
Web Editors: Dreamweaver 40
Templates and Libraries
One of the most challenging parts of web site design is making pages look
consistent and updating changes throughout a site. Dreamweaver created
templates and libraries as a way to create consistent page designs that can be
automatically updated across the site simply with a change to the template or
Creating a Template
Templates exist so that you can use the same basic design over and over again
without recreating it each time. With a templates you can use the same basic
layout design to create a page and then change the specific content for that
particular page. With a template, you can “lock” parts of a document like the
background, tables, or logo images while leaving other parts of the page editable.
Let’s learn how to create a template.
1. Open a new document and create a basic layout. You may want to set
the background color, add any images that you want to be on each
page. In layer or tables set up areas where you would put text or
images. (Don’t actually put the text or images in just reserve a spot for
2. Once the basic layout is finished save the document as a template by
go to File > Save As Template…
3. The Save As Template dialog box will appear give the template a
name in the Save As: text box. Click Save.
HINT: You will know that the document that you are working on is a
template because the title bar will show <<Template>> and the file name
with a .dwt extension.
4. Now decide which areas of your template you will make editable.
Select or create the table cell, layer, text or image that you want
editable. Go to Modify > Templates > New Editable Region…
5. When the New Editable Region dialog box appears type in a name for
the region. It should give some indication as to what will be going
there. Click OK.
Web Editors: Dreamweaver 41
6. Notice that the name you used for the Editable Region appears on the
template in curly brackets showing the area as editable.
7. Repeat the following steps until you have made all of the areas you
want editable. When finished close the template document make sure
that you have saved your changes.
Let’s create a web page using the template.
8. Go to File > New From Template…
9. Select the template name that you want to use and click the Select
button. A new document should appear that looks just like the template
that you created.
10. The areas on your page that are not highlighted let you know that
these are the editable regions. Select editable areas and add text or
11. Notice that you can not edit any other areas outside of the editable
regions of the page.
TIP: If it ever becomes necessary to edit the page you can detach
the template from the page by going to Modify > Templates >
Detach from Template…
Modifying a Template
Once a template has been created you can modify or update the template and
have the changes you make automatically update all pages using the template.
1. Open the template palette by going to Window > Templates… The
Template palette will open and show a list of possible templates.
Double click on the template you want to modify.
2. The template file will open up for you to edit. Make the changes you
want. You can change colors, layout, formatting etc.
Web Editors: Dreamweaver 42
3. Close the file when you are finished making changes. When prompted
make sure you save your changes. A dialog box will appear asking if
you want to update the pages using this template. Click Yes.
4. View the pages using the template you just modified. They should
have all change.
Creating a Library Item
Library items are great for page design elements such as navigation bars, or
copyright notices. They are items that can be added anywhere within a page. A
Library item when edited and saved updates the changes on all pages that use
the item. This makes it very easy to update multiple pages at one time. Let's
create a library item.
1. Create the element you would like to add to the library in a document
window or find one on an existing page. Elements that you may want
to make a library item are navigation bars, copyright statements or
2. Open the Library window by clicking the Library button in the
launcher or by going to Window > Library.
3. Select the element that you would like to put in the library. Click on the
New Library Item button in the Library Window.
4. Your new item will appear in the window. Give your item a name.
Your Library item will maintain links and text formatting.
Web Editors: Dreamweaver 43
5. Once the item has been created in the library you can add it to other
pages. Open the page you want to add the library item to or create a
6. In the Library window, select the item and click the Insert button.
7. The item will be added to the page. The library item added to the page
will be highlighted indicating that it is a Library item.
HINT: The library items do not keep alignments and can be added
anywhere on a page. You may want to insert the Library items in a
layer to make it easier to move around on your page to a specific
Modifying a Library Item
Once you have created the Library item you are able to modify or update the item
and every page that uses that Library item will be instantly modified or updated
as well. Let's see how it works.
1. Open the Library window and highlight the Library item that you wish to
modify. Click the Open button in the Library window. This will open the
Library Item for editing. You will know that you are in the library editing
mode because the title bar of your page will say <<Library Item>>
2. Make the changes to the item.
3. Close the file and when prompted, save the changes and update the
pages using the Library item. If you get to the Update pages dialog
box, click Update. Close the Update pages dialog box when you are
done review it.
4. Look at a page the uses the Library item and make sure that the
changes were updated.
Web Editors: Dreamweaver 44
Now You Try It
Now that you know how to create a template and library items go a head and try
it. Create a template have the template include the following:
! Background Color or image
! An editable region for text.
! An editable region for an image
! One locked region containing an image or text
Apply the template to a couple of pages. Try modifying the template and see that
the pages using the template were updated. Create at least one Library item.
Apply the library item to a couple of pages. Some ideas for Library items are:
! Copy right statement
! Text navigation for your site
! Web Master contact information
! Page update information
Web Editors: Dreamweaver 45
Web Editors: Dreamweaver 46
write the script. This can save you some times days of programming.
Creating a Rollover
A Rollover is a graphic that changes when you put your mouse over it. Rollovers
are great visual clues to show that a graphic has a special purpose such as a
link. Let’s learn how to create a “swap” image rollover. This type of rollover
requires two images that have the same dimensions. Let’s make one.
1. Create a new page by going to File > New Window. Save your page.
2. Go to Insert > Rollover in the pull down menus or click on the Insert
Rollover button on the Objects Palette.
3. The Insert Rollover dialog box will appear.
4. Use the Browse… button to locate your original image (the one that
will be initially shown on your page) and your Rollover Image (the one
that will replace the original image on the mouse over).
5. In the When Clicked, Go To URL box Browse… to the location of the
file you want to link to or type in the URL of an outside web page.
Click OK when finished.
Web Editors: Dreamweaver 47
NOTE: If you do not what to add the link yet just leave the box alone. The
# symbol makes the rollover a link to nothing but it is it creates a link
which is necessary to make the rollover work.
6. Your original image will appear on your page.
7. Open the Behaviors window by clicking on the Behavior
button in the Launcher or go to Windows > Behaviors in the pull down
8. Make sure that your image is selected. Notice the event and action in
the behavior window. This will tell you what is happening with your
9. Open the HTML window and look at all of the code that has been
10. You will not be able to see the rollover in Dreamweaver you must
preview it in a Browser. Press F12 or go to File > Preview in
Browser… from the top pull down menu. Try your rollover.
Creating Pointer Rollovers
Pointer Rollovers re-use one image that follows mouse around. With this type of
rollover you will need a table to hold the images in place.
1. Create a table to hold your images. Here is an example table.
Web Editors: Dreamweaver 48
2. Add the images that you would like to make links in the appropriate
3. The Pointer Rollover requires three images. The link image (we just
added), the image that will show up when you move your mouse over
the link and a blank image. In the cells where you would like the image
to show up place a blank image. Go to Insert > Image and find the
blank image to insert.
4. Once you have inserted the blank image in all the appropriate cells
select one of the images.
5. In the Property Inspector window, in the box below the image size,
give the image a unique name (blank1).
Web Editors: Dreamweaver 49
6. Repeat the above step for all cells containing the blank image. Make
sure that you give each a unique name, if you don’t your rollover will
not work. (Numbering them works well i.e. blank2, blank3, and blank4.
Don’t use spaces)
7. Now that you know how to name an image repeat the above steps for
each of the link images as well. Give each image a unique name.
8. Open the Behavior window by going to Windows > Behaviors or
clicking the Behavior button on the Launcher.
9. Select one of your link images. In the Behavior window click on the
plus sign button. Select Swap Image from the from the popup menu.
10. Select the corresponding blank image name from the Image: list. Click
the Browse… button and select the image that you want to appear on
the mouse over. Click OK when finished.
Web Editors: Dreamweaver 50
11. Repeat the above process for all of the link graphics. Preview your
results in a browser. They should look something like this:
Rollover Menus using Show/Hide Layer
Rollover menus are a very popular way to provide quick navigation for your
users. To create a rollover menu you will be using the show/hide layer behavior.
12. Create a layer or table to hold each initial rollover graphic or text. Here
is an example.
Web Editors: Dreamweaver 51
13. Add the images that you would like to make links in the appropriate
14. Create a layer and content for each menu item that will appear when
you rollover the initial images that we just added. For instance in the
above example, we will want to make four layers.
15. Give each layer a name. Select a layer, In the Property Inspector
window, in the box below the LayerID, give the image a unique name
Web Editors: Dreamweaver 52
16. Repeat the above step for all layers containing a menu. Make sure
that you give each a unique name. (Only use letters and/or numbers
with no spaces)
17. Open the Behavior window by going to Windows > Behaviors or
clicking the Behavior button on the Launcher.
18. Select one of your rollover images. In the Behavior window click on
the plus sign button. Select Show/Hide Layers from the from the
19. Select the corresponding menu layer name from the Named Layers:
list. Click the Show button. Select the other menu layers that you
want to be hidden, and click the Hide button. Click OK when finished.
Web Editors: Dreamweaver 53
20. The behavior should show up in the Behaviors window.
21. Make sure that the Events column has (onMouseOver). If it does
not select the behavior and click on the arrow. Select (onMouseOver)
from the pull down menu.
Note: If your list does not have that option change the Events
For: to 4.0 and Later Browsers.
22. Repeat the above process for all of the rollover graphics.
Web Editors: Dreamweaver 54
We want to create on additional layer that will cover the entire menu area.
The purpose of this layer is to hide any menu that is open once the user
has moved the mouse off the menu area.
23. Create a large layer extending slightly past the menu area. Give this
layer a name (i.e. hide)
24. Insert a blank image into the hide layer. To add a behavior to the
layer you must have a something to attach it. The graphics also
provides surface area for the mouse to rollover and trigger the
25. Select blank image. In the Behavior window click on the plus sign
button. Select Show/Hide Layers from the from the popup menu.
26. Select ALL menu layers from the Named Layers: list. Click the Hide
button. Click OK when finished.
27. Once all behavior have been added open the Layers window by going
to Windows > Layers.
Web Editors: Dreamweaver 55
The layers window allows you to change the order of your layers as well
as the initial visibility of the layer when the page is loaded.
28. Move the hide layer to the bottom of the list by selecting the layer
name. Click and dragging the layer to the bottom of the list. This puts
the hide layer under all of the other layers.
29. Hide all of the menu layers by clicking in the first column (under the
eye) until a closed eye icon appears.
30. The menu layers will disappear from your document window.
31. Save your work. Preview your results in a browser. They should look
something like this:
Web Editors: Dreamweaver 56
Opening a New Browser Window
Sometimes there just isn’t enough room to put all the information on one page
but the additional information you need to add won’t fill up a full browser window.
What to do? Well you can put your information in a customized browser window.
For example you may have a page that shows students how to do a science
experiment. You would like to give them a list of items they need to gather but
you do not have enough room on your screen to give the list. You could make the
text “gather items” a link that opens the list is a smaller browser window.
Providing the students with the information without taking them away from the
main page. Let’s learn how to do this.
1. Select the text or image that you would like to make the link.
2. In the Properties Inspector make sure that in the Link text box there
is a #.
3. Open the Behavior window by going to Windows > Behaviors in the
top pull down menu.
4. Click the Plus button in the Behavior window and from the pop-up
menu select Open Browser Window. The Open Browser Window
dialog box will appear.
5. Click the Browse… button next to the URL to Display text box and
browse to the .html file you want to display in the new browser window.
6. Set the browser window size by filling in the Window Width and
Height amount is pixels. Try a width of 310 and a height of 350. You
may want to experiment with sizes depending on the content you want
to display in the window.
7. Put a check mark next to the attribute items you want displayed in the
new browser window.
8. In the Window Name: text box give the new browser window a name.
9. Preview your page in a browser by pressing F12.
Web Editors: Dreamweaver 57
10. If you need to edit the window properties just go to the Behaviors
window and double click on the Open browser window behavior.
DTML stands for Dynamic Hypertext Markup Language. DHTML is a combination
DHTML is use to add animation and interactivity to your web site.
NOTE: Before you decide to use DHML in your web site you should
know that DHTML is not supported on browsers older than the 4.0
versions. Consider you audience before using it.
With DHTML you can create animation and interactive pages let’s learn how to
create an interactive site. DHTML will allow you to drag items on a page and
place them in a designated location.
1. Create a new page by going to File > New Window.
2. Use the Insert Draw Layer object to drag a layer on the page. You
must use layer to make this interaction work correctly.
3. Put your cursor inside the layer and an image. You can only drag
layers with an image.
4. Select the layer by clicking on the top handle. In the Property
Inspector window, type the name of your layer under the layer ID.
The Name should be somewhat related to the layer content.
5. Create another layer using the Insert Draw Layer object from the
6. Insert another image in the new layer. Select the layer and give it a
name in the Property Inspector.
Web Editors: Dreamweaver 58
7. Move the layer to the “final” position on the screen. In this case we
want our end users to move the second layer, the crown, on top of
the monkey’s head.
8. Select the image or text inside of the second layer. You must
select the image because the behavior we are going to add need to
be connected to the image not the layer.
9. Open the Behaviors window (Window > Behaviors) and make
sure that 3.0 + 4.0 Browsers is selected in the Events for: text
box. Click on the Plus sign button and select Drag Layer.
10. The Drag Layer dialog box will appear. In the Layer drop down
box select your second layer. Make Movement: Unconstrained
and click on the Get Current Position button. In the Snap If
Within: text box type 50. Click OK. Your box should look something
11. Move the 2nd layer to a location on your page were you want it to
be initially when you first come to the page.
Web Editors: Dreamweaver 59
12. Preview your result in a browser by pressing F12. As you test the
page notice that as you get the layer with in 50 pixels of your “final”
position it snaps to the exact location.
13. That is all there is to it. You can add as many layers as you would
Using Timelines for Animation
We can take the last example and make it animated. For example we can have
the crown automatically move to the monkey’s head. Let’s do that:
1. Use the last examples page setup. On your page you should have
two layers with images inserted in both.
2. Have the layer you want animated in the location where it is to
begin in the animation.
3. Open the Timeline window by go to Window > Timelines.
4. Drag the layer you would like to animate by its handle. Drag it to the
time line window into Channel 1.
5. The two dots in the timeline are key frames. The first key frame
indicates the beginning of the animation and the end key frame
indicates the end of the animation. Select the last key frame by
6. Drag the animation layer by the handle to the ending point of the
animation. Make sure that you take the entire layer not just the
image. You should see a gray line on our screen. This line
represents the path the layer will take in the animation.
7. Make sure that the AutoPlay check box is checked. This tells the
browser to start playing the animation as soon as the page is
Web Editors: Dreamweaver 60
8. Preview your work in a browser by pressing F12.
9. You can add other layers of animation by adding more layer and a
dragging them to the timeline.
Web Editors: Dreamweaver 61
Now You Try It
Create a Rollover
In your example_graphics folder there is a rollover folder. Take the graphics
inside the folder and create a rollover button. Put the button on a new page or
one that you have already created. Make the button a link to a page already in
your site or to an external web page.
Create a Drag Layer Page
In your example_graphics folder there is a Layer folder. Take the graphics inside
the folder and create a matching game using the Drag Layer behavior.
Web Editors: Dreamweaver 62
1. Weinman, Lynda, Dreamweaver 3 Hands-On Training. Peachpit Press 2000.
2. Towers, J. Tarin, Dreamweaver For Windows and Macintosh. Peachpit Press
3. Macromedia Dreamweaver2, Using Dreamweaver. Macromedia Inc. 1998.
4. Lowery, Joseph, Dreamweaver 3, Bible IDG Books Worldwide, Inc. 2000.
Dreamweaver Extensions and Extras
1. Dreamweaver Depot: http://people.netscape.com/andreww/dreamweaver/
One of the largest repositories of Dreamwaver actions, objects and
commands on the internet.
2. Dreamweaver Extentions Database: http://www.idest.com/cgi-
bin/database.cgi Search an extensive database which includes all of the
3. Yaromat: http://www.yaromat.com/dw/index.html
Contains several useful Dreamweaver extensions, including on for importing
fireworks created Rollovers.
4. Dreamweaver’s Fan Page: http://www.massimocorner.com/
A great resource for Dreamweaver extensions, behaviors, commands, and
Web Editors: Dreamweaver 63
Web Editors: Dreamweaver 64
Now You Try It
Credit is available in two forms: university credit from Southern Utah University for
recertification or inservice credit from the State Office of Education. To receive credit,
return the following assignment with in one month of final class date to:
UEN Staff Development
201 Milton Bennion Hall
1705 Campus Central Drive
University of Utah
Salt Lake City, UT 84112-9250
or via fax at (801)585-9040. If you request State credit, your request will be forwarded to
the State Office of Education for final approval. If you request university credit, an
application form will be returned to you which you can fill out and send back with the fee
to SUU. Forms must be returned by the following deadlines: November 1st (fall
semester), March 10th (spring semester), August 1st (summer semester).
Address____________________ Class Title__________________
Date Attended_______________ District_____________________
Type of Credit: University (SUU) State Office
500 Level – Graded No Charge
Create a web site using Dreamweaver. You can download a free 30-day trial by going to
Include in your web site:
• At least 5 pages.
• Use at least one template and library item
• Use at least one rollover
• At least one of your pages needs to use layers.
Save your Local Root Folder and all of it’s content on a disk. Send the disk and this
paper to the above address.
Web Editors: Dreamweaver 65
Web Editors: Dreamweaver 66
Date of Class
Please give both a numerical rating and an explanation. On numerical items, 1
means poor, 2 means fair, 3 means average, 4 means good, and 5 means very
Overall, how would you rate your course experience as compared to other
inservice you have received? 1 2 3 4 5
Compared to other UtahLINK Training you’ve taken, how would you rate this
course? 1 2 3 4 5
What was the best part of this class?
List three ways this class could be improved.
What should the course spend more time on or cover that it doesn’t?
In terms of curriculum, what should the course spend less time on?
Web Editors: Dreamweaver 67
How would you rate the clarity of the curriculum? 1 2 3 4 5
How would you rate the delivery of instruction? 1 2 3 4 5
How would you rate the knowledge of your instructor/s? 1 2 3 4 5
How would you rate the accessibility of instructors and level of personal
attention? 1 2 3 4 5
How would you rate the manual quality? 1 2 3 4 5
How would you rate the pace of instruction? Too Fast Good Too Slow
What will be your biggest obstacles to implementation of what you learned?
Please rate your past experience with each of the following aspects of UEN
(leave an item blank if you have not experienced it)
Overall _____ Help Desk _____ Web Design ______
Training _____ Web Content_____ Installation Team ______
Web Editors: Dreamweaver 68