WEB DESIGN

USING

DREAMWEAVER

TRAINING NOTES

Web Design Training Page 1

Table of Contents

The Interface...........................................................................3
Site Management....................................................................9
Page Properties.....................................................................12
Colors in Dreamweaver.........................................................13
Text Formats.........................................................................15
Heading 1..............................................................................15
Heading 2.....................................................................................15
Heading 3..................................................................................15
Text Formatting....................................................................16
Choosing Fonts.....................................................................17
Aligning Paragraphs.............................................................17
Other Text Features..............................................................18
Horizontal Rules...................................................................19
Inserting Images...................................................................20
Working With Images...........................................................20
Images and Text....................................................................21
Creating Links.......................................................................22
Linking to Different Parts of the Page..................................23
The Rollover Wizard..............................................................23
Ordered and Unordered Lists................................................24
Image Maps...........................................................................25
More About Image Maps.......................................................26
Indents and Outdents...........................................................27
Forms.................................................................................... 27
Text Fields.............................................................................28
Checkboxes and Radio Buttons.............................................29
Lists and Menus....................................................................30
More Lists and Menus...........................................................31
Buttons..................................................................................32
Creating a Jump Menu..........................................................32
Tables....................................................................................33
Creating a Table....................................................................33
Table Properties....................................................................34
Cells and Rows......................................................................35
Modifying Your Table............................................................36
Spanning Columns and Rows................................................37
Nesting Tables......................................................................38
Using Tables as a Layout Tool..............................................38
Behaviors..............................................................................39
Creating a Behavior..............................................................40
Status Bar Messages.............................................................41
Popup Windows.....................................................................42
Swap Image...........................................................................42
Templates..............................................................................43
Creating the Template..........................................................43
Generating Pages..................................................................44
Using Multiple Templates.....................................................45
Working With Dreamweaver and HTML...............................45

Web Design Training Page 2

Working with External Editors.............................................46
The HTML Source Window...................................................47
Tag Editing............................................................................48
Copying and Pasting HTML..................................................48

INTRODUCTION
Of all the WYSIWYG (What You See Is What You Get) Editors out there, Macromedia's
Dreamweaver has consistently been reviewed the best. The clean code it produces as well
as it's hands off approach makes it among the most popular editors for web developers.

Who is this tutorial for?

Web Design Training Page 3

This tutorial will be helpful for both novices and gurus alike. Thought the gurus might
wish to skip a couple of chapters.

What can you expect to learn from this tutorial?

You'll learn how to use Dreamweaver as a tool for creating high quality web pages. You'll
also learn how to create JavaScript events, Cascading Style Sheets, DHTML animations.
We'll also focus a great deal on site management.

What do I need to learn before I begin this tutorial?

You need a good understanding of the world wide web: specifically URL's and links. You'll
need to understand basic graphics, fonts and color. You'll need to understand paths,
filenames and file management.

What about HTML?

We recommend that you have a good understanding of HTML before you attempt to tackle
Dreamweaver, but we don't require it. You won't necessarily need to know how to code
HTML, but it's advisable that you know what it's capable (and incapable) of. Previous
experience with other WYSIWYG editors will be a plus.

We have plenty of resources here on W3Nation that we will be cross-referencing, such as

Graphics and HTML.

Throughout this tutorial we will be using 2 kinds of visual samples: screenshots from the
program and sample pages. Screenshots will sometimes be on the page and other times
be linked to open in a new window. Sample pages will always be linked to open in a new
window.

Web Design Training Page 4

The Interface
Toolbars
Dreamweaver has 3 primary toolbars: Objects, Properties and Launcher. The Objects
Toolbar allows you to insert objects with the click of a mouse. The Properties Toolbar is
the most important of them all. It is used to specify attributes on the selected object. The
Launcher Toolbar opens different palettes.
The Properties Toolbar

This is the toolbar you will use most often. This is where you specify attributes for
the object you are working with. An object is anything HTML element. Text is an
object, as is a graphic, a list, a table and a form. Options on the toolbar change
according to the active object. The figure above is the default if no object is
selected. As you can see, most of the default options have to do with the
presentation of text.
When the 'More' arrow on the lower right corner is selected, the Toolbar doubles
in size, with some advanced options.

With no objects selected, there are no advanced options.

Here we show the toolbar with an image selected. As you can tell, the options have all
changed. There are fields for width and height dimensions, links, vertical space,
horizontal space, alignment, maps ... These are all Advanced Options that will be
explained later in the tutorial.

The Objects Toolbar

The Objects toolbar is where you can easily insert many HTML objects. With this toolbar
you can insert images, tables, horizontal rules, layers, applets, active x, plugins, Flash,
Shockwave and rollovers.
You can also toggle the items in this toolbar by clicking on the arrow near the top. This
brings up a sub-menu where you can change to Forms, Head, and Invisibles. With Forms
you can add standard form objects. With the Head Objects, you can define your meta tags
and other information that appears in the <HEAD> container. With the Invisible Objects
you can add anchors, comments, scripts and more.
The <HEAD> Tag
Unless you author with a large monitor, I recommend you keep this toolbar closed to
avoid clutter in your work area. I've found the more workspace I have, the easier it is to
work and the better the results.

Web Design Training Page 5

The Launcher

This is an easy way to launch certain palettes and windows within Dreamweaver. You
should note that this toolbar also resides in the lower right corner of the Dreamweaver
window without the text descriptions. I recommend that you learn what the icons mean,
then remove this toolbar from your workspace.

Site - This is where you can manage your site.

Library - Here you can keep a collection of objects just by dragging them into the window.
You can also maintain templates here.

Styles - Here you can specify and apply Style Sheets

Behaviors - Here you can define and apply Javascript Behaviors

Timeline - Here you can control Dynamic HTML animations

HTML - Here you can view and edit the source code of the document

Menu Commands

Dreamweaver has many of the standard menus as other programs: File, Edit, View, Insert,
Modify, Text, Commands, Window and Help. Just about everything in the program can be
accessed via a menu command.

The File Menu

Under the file menu you can manage your documents, by saving, opening, creating new
documents, etc. There are also many unique commands specific to Dreamweaver.

Import/Export - You can import XML into a template, export editable regions (of a
template) as XML, and export CSS styles. More import/export features can be added by
using plugins.

Convert - You can convert your document to 3.0 browser compatible or you can convert
tables to layers.

Preview in Browser - You can check your document in your browser of choice. You can
also define browsers here. When you get comfortable working in Dreamweaver, you'll find
yourself checking your work in the browser often. The shortcut keys are F12 for the
primary browser and Command (CTRL for PC) F12 for the secondary browser.

Check Links - Here you can make sure all the links within the current document are
intact. You can also check links sitewide. The shortcut keys are Command (CTRL) F7 for
the open document or Command F8 for the entire site.

Check Target Browsers - You can use this feature to check the compatibility of your
document with a browser of your choice. Dreamweaver will check the HTML in your
document for compliance with the browser you choose, and will generate an HTML report
showing errors.

Recent Documents - There is always a list of the last few documents you worked on with
Dreamweaver. You can easily re-open the document by selecting its name from the File
Menu.

Web Design Training Page 6

The Edit Menu

Undo/Redo - Here you can undo or redo a previous action. Shortcut keys are Command
(CTRL) Z for undo and Command (CTRL) Y for redo.

Cut/Copy - Places the selected item on the clipboard. If Cut is selected, the item is
removed from the document. Any object can be copied to the clipboard, including HTML
elements (forms, tables). Shortcut keys are Command (CTRL) X for Cut, or Command
(CTRL) C for copy.

Paste - Pastes an item from the clipboard. The shortcut key is Command (CTRL) V.

Paste as Text - This is useful when the clipboard contains HTML or other code
Dreamweaver would recognize. If you want to display the code in the document, select
this option. By default, Dreamweaver will paste the code into the source of the document
and it will be applied immediately.

Launch External Editor - This is where you can launch the HTML editor of your choice,
whether it be BBEdit, Simpletext, Homesite or Notepad. The default editor is specified in
Preferences.

Preferences - Here is where you specify application preferences, such as editors, HTML,
and more. We will be discussing the Preferences dialog in detail in the next section.

Find/Find Next/Replace - This is where Dreamweaver will look for a specific string of text
(you define). This is a powerful feature when working with large sites. We will be
discussing this feature in more detail later.

The View Menu

Here you can change aspects of how your workspace is displayed.

Head Contents - With this selected, a toolbar appears at the top of your document just
below the menus. Here you can quickly add or modify elements that belong in the
<HEAD> of the HTML document, such as Meta Tags, Javascripts and Styles.

You can learn more about the <HEAD> of an document here.

Invisible Elements - These are elements that cannot be seen on the page, such as Styles,
Comments, Hidden Fields, etc. Dreamweaver will use a symbol to show that an object is
present (see below). If View | Invisible Objects are selected, they will be displayed in your
workspace like the icon below.

Rulers/Grids - You can turn rulers and grids on and off. You can also specify which unit to
measure by. Pixels is recommended.

Layer/Table/Frame Borders - By default, Dreamweaver has an outline border for all these
elements. You may turn them off here.

The Insert Menu

This is where you insert objects to your page. You can insert images, tables, horizontal
rules, layers, active x, plugins, Flash, Shockwave, rollovers, forms, form objects, anchors,
columns, scripts, line breaks, non breaking space, server side includes and <HEAD>
elements.

We will be discussing many of these in more detail later in the tutorial.

Web Design Training Page 7

Modify

This is where you modify certain elements of the page, such as Tables, Frames and more.
We will be discussing these in more detail as we start creating documents.

Text

This is where text can be formatted. Many of these same commands are mirrored on the
Properties Palette while working with text. We'll also be discussing this in more detail as
we work more with documents.

Commands

This is where you'll find some Dreamweaver specific commands.

Clean up HTML - Here you can remove redundant and empty tags, non-Dreamweaver tags
or specific tags. This feature comes in handy when working with a document either
created by someone else or by another WYSIWYG code generating program that inserts
proprietary tags.

Apply Source Formatting - Here you can apply HTML formatting settings to the
document.

Set Color Scheme - Here you can choose from pre-set color schemes within Dreamweaver.

Sort Table - Here you can sort elements within a table.

Format Table - Here you will find more advanced table formatting options.

Window

Here is where you can open toolbars and palettes, such as Properties and Site Files. You
can also hide the palettes or arrange them. There is also a list of documents currently
open within the program. This makes it easier to work with more than one document at a
time.

Help

We hope you won't need this ;)

Web Design Training Page 8

Preferences

This is where you set your application preferences. We recommend you change these
settings before doing any serious work in Dreamweaver. It'll make your work easier in the
long run. We're not going to cover every single option within this dialog box. Most of the
options are self explanatory. We'll take a deeper look at just a few of the most important
options.

General - We recommend you have 'Show Site Window Only On Startup.' The site window
is where it all begins within Dreamweaver. This is where you should manage all your files.
It's also easy for first-timers to close the application inadvertently when closing a
document. When the Site Window is open, the application remains open.

We also recommend that you make sure the 'Add Extension When Saving' box checked.
You can use either .htm or .html. Some browsers will not recognize an HTML document
without the extension. It's quite easy for Mac users to leave the extension off, since they
don't require it to open the file.

External Editors - Here is where you specify which HTML editor to use when modifying
the code. Dreamweaver bundles with BBEdit for the Mac and Homesite for the PC. These
are the two strongest tag editors out there, so we recommend these for managing the
code. If you want something lighter weight, you can use Simpletext or Notepad,
depending on your platform.

To specify which program, just click on the browse button and navigate to the application
file. Once you've found it, double click and that's it.

You can also specify an image editor. You can use Photoshop, or an image optimizer such
as Image Ready or Fireworks. We recommend the latter. This makes it easier to optimize
your images on the fly. Simply bring them into Dreamweaver, select them, and click on
Edit. They can then be optimized in your program of choice, with little interruption.

HTML Format - For those who want their code just so, this is where you specify how
Dreamweaver will handle it. We all have our preferences, a tab here, a space there. If you
communicate your preferences correctly to Dreamweaver, it will feel like it was
handcoded when you bring it into your favorite editor.

HTML Rewriting - Dreamweaver can fix mistakes, but it can also be wrong on occasion. If
you feel you know more than Dreamweaver, tell it so right here. It can prompt you when it
finds a mistake, or it can ignore the mistake entirely. I've found Dreamweaver to be fairly
accurate when reporting mistakes, so I have it prompt me when it finds one.

Invisible Elements - As mentioned above, Dreamweaver can show you invisible elements
with that pretty yellow icon. Here is where you specify which ones it shows you. It might
not be necessary for it to show you each line break. Personally I like to know everything
that's there. But it's up to you to decide.

Preview in Browser - As already mentioned, this can be defined from the File Menu. Here
is another place where you can specify which browsers are primary and secondary.

Site FTP - Yes, you can even upload your site using Dreamweaver. This is where you set
your communication preferences for the FTP client, such as a Firewall, if you have one.
You can also define how long to wait for timeouts, etc.

Status Bar - I've found this is to be a useful feature. What I check most is the download
time of different modems. Dreamweaver will display the size of the page and the
download time for the page and all it's elements in the status bar. You just have to specify
the modem speed, which depends on your audience.

You should browse through the rest of the Preferences. Everyone's different, so some
might be more important to you than the average user. Now that you're finished, let's
start working.

Web Design Training Page 9

Dreamweaver works best with entire sites rather than independent web pages. For this
reason, it's always a good idea to start a project in the Site Files window. Dreamweaver
has many built-in tools to make a project easier and less time consuming, such as
checking links, which can only be utilized if a Site is defined.

To begin managing your site, simply select 'Site Files' from the Window Menu (or hit F5).

This is where you add and modify files and directories on your site. You can also upload
your files via FTP, generate a site map, and change links sitewide.

Before you begin, you must first define the site. You do this in the Pop-up window in the
toolbar (in the screen shot it says 'tutorial'). Select define sites, which will bring up the
following dialog box:

You may define as many sites as you like and they can be accessed via the popup menu.
Since you most likely don't have any sites already, press the 'New' button. Now you'll see
the following dialog box:

Here you give the site a name, define the local path, the remote path and choose whether
you want to use Cache to speed link updates (recommended).

You can also specify your FTP server, Web Server, configure your site map, and specify
whether you would like to Check Files In and Out. The latter is usually only relevant when
other people (a team) are working within the same site.

So now that you have defined your site, you will notice that all of the files and folders
within the directory you chose are in the site window.

Web Design Training Page 10

Site Management
We recommend you add and modify files through this window. You'll understand why
shortly.
A great way to create your site is by using Context menus. Context menus are activated
either by right-clicking (PC) or CTRL-click (Mac). With Context Menus, one can add,
rename or delete files and folders as well as check browsers and links. All of the context
menu commands are also offered through the File Menu.
To add a file using the context menus, simply select 'New File'. Dreamweaver will not only
create the file, but will also add the necessary HTML tags in order to be a valid HTML file.
When beginning a project, we recommend adding the necessary files and folders first.
This can be done quickly using the context menus. First create the home page file
('index.html') in the root directory. Then create folders for subsequent pages and sections,
and a folder for images and support files.
A typical business site might be organized like this (folders are in [ ] brackets):
[about]
[contact]
[images]
[links]
[services]
index.html
Once the appropriate folders have been created, create a file inside each one of them,
including graphics. To do this, simply highlight the folder, access the Context menu and
select 'New File.' This will place the file inside the folder selected. For now, there's no
need to modify the files. You can leave them as is. Make sure each folder has an
'index.html' file.

So what's the benefit of creating/moving files within the Site Files window? There are
several benefits. First of all, Dreamweaver will immediately add the file/folder to it's site
cache, which will make it easier to change and update links.
If a file is moved outside of Dreamweaver, links will not be updated. Sometimes
Dreamweaver will detect links as being absolute local rather than relative. When this
happens, everything will work fine locally, but when placed online, the links will all be
pointing to file:///(something).

Also, when a new file is created, Dreamweaver adds necessary tags for it to be a valid
HTML document. Dreamweaver adds the following:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF">
</body>
</html>
If files are created in the Finder or Explorer, all the tags except for <html> must be
added.

Files can be moved throughout the site in two different ways.

1. Drag and Drop - Click on the file and drag it over a folder. When that folder is
highlighted, release the mouse button.
2. Cut and Paste - Select a File, hit CTRL (Command) X, or go to the Edit Menu and
select 'Cut'. Find the folder you would like to move the file, select it and either hit
CTRL (Command) V or go to the Edit Menu and select 'paste.'

Files can also be copied by using the Copy and Paste feature. Select a file, hit CTRL
(Command) C or go to the Edit Menu and select 'Copy'. Find the folder you would like to
move the file and then hit CTRL (Command) V.
Files can also be copied within the same folder by Copying and Pasting. Dreamweaver will
add 'Copy of' to the beginning of the file name. This can be useful when you wish to use
the same look and feel as another file. Simply copy the file, rename it, then modify it.

Only one file can be pasted from the clipboard at a time. If you wish to copy and paste the
same file multiple times, you must re-copy it for every paste.

Web Design Training Page 11

When a file is moved, Dreamweaver will check its site cache for links to that file. If there
are links to that file, you will be shown a list of pages linking to it. You can easily change
the links by pressing the Update button. This is the largest advantage of moving files
within Dreamweaver.

We also recommend that if files be deleted, you delete them within Dreamweaver. To
delete a file or folder, simply select it and either use the Context Menu and select 'Delete'
or hit the delete key on your keyboard. Dreamweaver will then check the site cache to see
if there are any other files within the site pointing to the file you are planning to delete. If
there are, you will be informed that links will be broken by continuing. You will be given
the option to continue with the delete or cancel. If you do not get a warning dialog box,
you may safely delete the file.

Dreamweaver can also generate a complete map of your site. This is done by either going
to the Window menu and selecting 'Site Map' or by clicking on the sitemap icon in the
toolbar.

The site map is an icon-driven representation of your site. It can be navigated by clicking
on the plus (+) and minus (-) signs to open and close linked files. The map is drawn by
how files are linked to each other rather than by directory structure. The home page is
always on top, being the root page. Every page it links to is connected to it, and so on.

The site map is useful in many ways.

It's a different perspective of your site. By viewing your site map, you can see how a
visitor would navigate throughout your site.

It's another way to manage files and links. Since the map is structured by the way files are
linked, you can easily change the link from one file to another. Select the linked file,
access the context menu, and select 'Change Link.' You will then be prompted for a new
file to link to. You can also remove or hide links in this manner.

You can generate a graphic to either put online or for your own reference. To generate a
graphic, simply go to the File Menu and select 'Save Site Map As'. You will then be
prompted for a filename. Site maps can be saved as either a Bitmap (BMP) or a PNG file.

Page Properties
Now it's time to begin working on your first page. Before you begin with the page it's best
to define properties of the page, such as Colors and the Title. This can be done with the
Page Properties dialog.
The Page Properties can be found in the Modify menu, or with the keyboard shortcut
Command-J or CTRL-J.

Web Design Training Page 12

Title: The title is what appears on the top of the browser bar. For this page the title is
'Dreamweaver Tutorial: Part 3'. The title is also what appears inside the <TITLE>
container tag.

In the 'Background Image' field you can specify a tiling image to use for your background.
Some examples of these can be found in the Gallery section.
One can specify a Background color in the 'Background' field. This number must be a
hexadecimal value or one of the standard colors. If you are unsure about the hexadecimal
value, you can pick from Dreamweaver's Web Safe Color Palette.

For more information see our Colors in HTML section of the HTML Tutorial. You will learn
more about how Dreamweaver uses colors on the next page.
You can also specify colors for Text, Links, Visited Links and Active Links in the
corresponding fields.
The Left Margin, Top Margin, Margin Width and Margin Height fields are all used to
determine how far the body of the page is from the edge of the browser. This must be a
number in pixels.

As you can tell if you use 0 for all your margins, there no spacing between the edges of
the browser window and your content.
The Document Encoding field is where you select the Character Set for your page. If your
page is in English you should leave this at the default - Western (Latin1).

Web Design Training Page 13

Colors in Dreamweaver
Dreamweaver handles Hexadecimal values and HTML standard color names:
 Black
 Maroon
 Green
 Olive
 Navy
 Purple
 Teal
 Gray
 Silver
 Red
 Lime
 Yellow
 Blue
 Fuchsia
 Aqua
 White

Dreamweaver also offers many of its own built-in tools to allow color selection to be much
easier. These can be accessed from many places within the program by clicking on this
button:
This brings up the standard palette as well as a color picker. The color picker can be used
to pick a color from elsewhere on the screen, including other open windows. All one must
do is click on a color and that will become the active color for the element selected.
There are other tools available, such as the Color Dialog. This can be accessed from the
Text Menu by choosing Color. It can also be accessed from the Color Palette:

Click on the circled icon to access the Color Dialog Box.

From this dialog one can choose from all the colors in the bar (most of them are web
safe). RGB values can also be entered. This is useful when working with graphics
programs such as Photoshop or Fireworks.
These colors can also be added to the 'Custom Colors' so that they may be used again. To
do this simply select an empty (white) box under Custom colors, choose your color and
click on the 'Add to Custom Colors' button. This color can now be used from the Color
Dialog anytime.

Web Design Training Page 14

Text Formats
In Dreamweaver text is divided into several different formats, all of which can be changed
from the Properties toolbar. There is the standard paragraph (default), headings from 1-6
and preformatted text.

You can change the format by choosing one of the options from the pop-up list of the
Properties toolbar. These formats apply to the entire paragraph, so you can change the
format without having to highlight the text. You also cannot have more than one format in
the same paragraph.

For more information on paragraphs see this part of the HTML Tutorial.
There are 6 different headings available, numbered 1 through 6. 1 is the largest and 6 the
smallest. Here is an example of all 6 headings.

Heading 1

Heading 2
Heading 3

Heading 4

Heading 5

Heading 6

For more information on different headings, see this part of the HTML Tutorial.
The last option is preformatted text. When this is chosen text can be modified exactly as if
it were in a text editor. The drawback is that it is displayed in a monotype font such as
Courier.
Here is an example of preformatted text:

# of Pork and Beans in stock

----------------------------

Pork Beans Total

5/1 1 2 3

5/2 2 5 7

Text Formatting

Web Design Training Page 15

In Dreamweaver most text is formatted with the Properties Toolbar and the Text menu.
We will discuss how to format text as one would in a word processor with the Properties
toolbar.
Formatting text with the Properties toolbar is very similar to using a Word Processor. You
can apply the change to a specific line of text by highlighting the area you wish to change,
then applying the formatting. If you change the formatting of an area that isn't
highlighted, the change is applied to all text that follows, until it is changed again.
Text can easily be bolded or italicized by clicking on the respective B (CTRL-B) and I
(CTRL-I) buttons.

Text can be sized by using the 'Size' pop-up list of the Properties toolbar.

Many other programs such as word processors and page layout programs scale text using
'points.' Not so in HTML. There are 7 sizes of text in HTML, with 7 being the highest. To
change text size in Dreamweaver, you can choose the size from the menu or you can enter
a number in the box.
You can also scale text using + (plus) and - (minus) symbols. If you would like your text to
be a certain number lower than the default size, you can choose -1. If you want it a little
larger, you can choose +1. This is different from using absolute numbers, such as 2 or 3,
because the relative point is the default font size. Some users might decide to change
their default size to a larger font. Using -1 would scale it down from the size they have
specified.
Here is a sample of the different sizes of text in HTML:
1
2
3
4
5
6
7
You can change the color of text by using the Text Color field:

Here you can enter a hexadecimal color code (or one of the default colors) in the field or
you can pick from the color picker.

Web Design Training Page 16

Choosing Fonts
We all want to use our favorite fonts in our HTML documents. Unfortunately one of the
limitations of the web is that a font will only be displayed if the user has it installed on
his/her computer. With all the different operating systems and platforms on the web,
there is no guarantee that the font one chooses will be what is used to display the page.

HTML allows one to give a list of fonts. If the first font is available, that font is used. If
not, the browser checks for the next font on the list, and so on until a font has been found.
If no fonts are found that match, the browser will render the text using the default font of
the computer. This can be Times New Roman on some configurations, Geneva on others,
and Courier on others.
Dreamweaver also allows one to choose a list of fonts and has plenty 'safe' combinations
built in.
To choose the font for your text to be displayed, you may enter it in the Font field on the
Properties toolbar:

Or you can choose from Dreamweaver's list of 'safe' fonts:

As you can see, each selection has 2 or 3 fonts listed. These are all fonts that are similar
in nature but are common on different platforms. For example, Arial is a sans-serif font
that is common on PC platforms. Helvetica is very similar to Arial, but is more popular on
Mac platforms. If a web designer chooses 'Arial, Helvetica; sans-serif' he or she can be
reasonable confident that the font will appear as intended.
There is also a list for Serif fonts such as Times New Roman, and monotype fonts such as
Courier. If one uses these selections, they should appear similiarly to how they were
intended.
Using the presets is great for offering a little customization, but isn't always enough.
Everyone has their favorite fonts, most of which are usually unique. What if one decided
they wanted to display their text in Optima or Tekton? This is where the Edit Font List
dialog can be used.

With this dialog you can either add more font choices to the list of presets or create your
own. The Font List box at the top of the dialog are fonts already in the preset list. The
'Chosen Fonts' box are fonts you have chosen for the new listing. The 'Available Fonts' are
fonts that are installed on your computer. There is also a text field below the Available
Fonts box where you can manually type in a font name.
To add fonts to the 'Chosen Fonts' you can either find them from the 'Available Fonts' list
and double click on them or click once and then click on the arrow pointing to the left.
You can also enter a name into the Text Field and hit enter when you are finished. Once
you have selected a list of fonts, you can simply click on OK and it is now a part of
Dreamweaver.
If you want to use a unique font, such as Comic Sans you might wish to find some fonts
that are similar first. For example, Tekton is a similar font on the Macintosh platform. So
you may wish to choose Comic Sans first, Tekton second, and perhaps a standard font
such as Arial or Helvetica third.
For more information on Fonts and HTML,

Web Design Training Page 17

Aligning Paragraphs

Text can be aligned within Dreamweaver from the Properties Toolbar. You can choose
Left, Center, or Right aligned.

When you choose an alignment, it is applied to the entire paragraph you are working with.
You can change alignment if you start a new paragraph.
Paragraphs can be created in Dreamweaver by hitting the Enter (or Return) key in the
document. This will create a blank line and will then create a new paragraph.
You can also create a line break in Dreamweaver by hitting SHIFT-ENTER. This is the
equivalent of the <BR> tag in HTML. Instead of creating a new paragraph, you will break
to a new line and continue on the same paragraph. Here is an example:
There was a break, but this text is still in the same paragraph.
You cannot change alignment of a single line by using a line break.

Other Text Features

There is plenty else you can do with text within Dreamweaver. For example, you can
Indent or Outdent Text using 2 buttons on the Toolbar:

The button pointing to the left will Outdent the text. The button pointing to the right will
Indent the text. Here is a sample:

This text is indented

This text is indented some more.

This text is now outdented.

This text is now normal.
The ability to Indent and Outdent gives the author more flexibility of presenting the
content. If you are quoting out of a book, it's a good idea to indent once. Using indents
also makes the document a little easier to read.
Note: The HTML tag used to indent text is the <BLOCKQUOTE> tag.
Text can also be indented and outdented by using the Text Menu or keyboard shortcuts.
The shortcuts are as follows:
Indent: CTRL (or Command) ]
Outdent: CTRL (or Command) [
There are plenty other Text Options that can be accessed in Dreamweaver by using the
Text Menu. For example, you can give your text more 'Style' than what is available on the
Properties Toolbar. By going to the 'Styles' submenu (not to be confused with 'CSS Styles'
or 'HTML Styles') of the Text Menu, you have other formatting options. Here is an
example of the other options and how they render in the browser:
Underline (we recommend against using this because many users will mistake it for a
link)
Strikethrough
Teletype
Emphasis
Strong
Code
Variable
Sample
Keyboard
Citation
Definition

Web Design Training Page 18

Here are some of the HTML Styles that are built into Dreamweaver. These are accessed
from the Text Menu under the 'HTML Style's submenu. Most of these are applied to an
entire paragraph, so be careful how they are used.
Bold
Caption
Copyright
Emphasis
Fixed Width
Headline
Normal
Red
You can add your own custom 'HTML Styles' by choosing 'New Style' from the HTML
Styles submenu. You define the style by choosing a Font, a Font Size, and a text attribute
(Bold, Italics, etc.) If you wish to change the text to your style, simply select it from the
HTML Styles submenu.
You can also change the format, alignment, font, size and color with the Text Menu.
Dreamweaver also offers you the ability to Check the Spelling of your document. The spell
checker can be accessed from the Text Menu or with the keyboard shortcut SHIFT-F7.
The Spell Checker is very similar to other checkers you've seen in other programs. It will
scan the document and compare all words to word in its dictionary. If it finds a word it
thinks is misspelled, you will be prompted and given a list of words Dreamweaver
suggests it might be. You can change to one of those, fix it by changing it in the text field,
or you may ignore it.

Horizontal Rules
A good way to divide text or other HTML elements is by using Horizontal Rules. You can
insert a Horizontal Rule from the Insert Menu. Here is an example:

You can further modify the rule by highlighting it and using the Properties Toolbar. As you
can see, the Properties toolbar changes when the Horizontal Rule is selected.

You can change the width of the Rule by entering a number in the 'W' field. This can be a
number in pixels or a percentage. The default is pixels, and you will have to change the

Web Design Training Page 19

default from the menu to the right of the field. For example, if you wanted a Rule that was
10 pixels wide, it would look like this:

If you wanted a rule that spanned 80% of your work area, it would look like this:

You can also change the alignment of the rule by using the Align menu at the right of the
Properties Toolbar. The default alignment is centered.
As you can see, the Rule is also given a slight shading. You can change this by clicking
inside the 'Shading' checkbox. This will turn the shading off. Here is a sample without
shading:

Inserting Images
Working with images in Dreamweaver is quite easy. To insert an image you can use the
Objects palette or the insert menu.

On the Objects palette simply click on the tree.

You can also use the Insert menu and select Image.

You will be prompted for a filename and can navigate your local directories in order to
find it. Once you have found the image you would like on your page, either double click on
it or click on the Select button. Now the image is on your page.
As you were navigating for the file, did you notice the fields near the bottom of the box?
These are very important so we'll pay special attention to them. You will see a URL field,
which will have either dots and slashes or a full directory path.

Web Design Training Page 20

This is how the page will find the graphic. This can be controlled with the 'Relative to'
checklist. If you select Relative to Site Root, it will start looking from the root of the site '/'
and will continue down the directory structure until the graphic is found. If you select
relative to document, it will look for it in directories relevant to the document. This may
seem irrelevant now, but it can save some hassles in the future. If you have your graphics
and links relative to the document, and you choose to move the document later, all the
graphics will break.

So now that you have an image on the page, what can you do with it?

Working With Images

Once you have inserted the image, Dreamweaver will automatically write the width and
height dimensions to the HTML. These dimensions are written in pixels, which is a term of
measurement that is commonly used on the web.
If you click on the image, a bounding box will surround it with some dots around the
edges.

it looks like this

The image can be scaled within Dreamweaver by clicking on one of the dots, holding the
mouse button and dragging. The image will scale with your mouse. I recommend that you
try not to scale within Dreamweaver. Here is an example of that same graphic that was
scaled with the mouse to about three times its original size.

It doesn't look too good, does it? It's best to scale the image within the image application
you are working in. If necessary you can change the width and height or import the
picture again into Dreamweaver.

Web Design Training Page 21

When you select your image, you might notice that your Properties toolbar changes.

The W and H fields are the pixel dimensions of the image. You can also enter numbers
manually to scale the image. This can be helpful if you scale the image elsewhere.
You will also see a SRC field. This is the path to the image. If this path is incorrect, the
image will look broken:

This can be corrected by clicking on the Folder icon to the right of the field. When this is
clicked, you will be prompted for the location of the image with the same dialog used
when you insert an image.
You can also specify the ALT text for the image by typing into the Alt field. ALT text is
used when the image is broken or if a visitor has images turned off. This will give the user
an idea of what the image would be if it were being displayed.

If you wish to give your image a border, you can do so by using the Border field of the
toolbar. Here you can enter a number in pixels. This will be the width of the border
around your image.

1 pixel

5 Pixels
If you would rather not have a border, just set this number to 0.

Images and Text

In HTML, the designer has the ability to align images around text. An alignment method
can be specified so that the text wraps around the image as the designer envisioned. This
can also be done in Dreamweaver by selecting the image and using the Align field in the
Properties Toolbar.

Here are a few of the alignment options

Browser Default: Usually Baseline. The first line of text begins at the bottom of the image
and the rest appears below the image.

text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text

Top: The first line of text begins at the top of the image and the rest appears below the
image

Web Design Training Page 22

 text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text
Absolute Middle: The first line of text begins at the absolute middle point of the image and
the rest appears below the image

text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text
Left: The text wraps to the right of the image. This can be confusing because it's a little
backwards. Just remember that the image is what is being aligned, not the text.
Text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
Right: The text wraps to the left of image and the image appears on the right.
Text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text
What if we wanted to use 2 images? It gets a little more complicated.
Here is an image aligned left at the beginning of the paragraph and another image
aligned right a little further down. This produces a look similar to a magazine or a
newspaper layout.
Text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text

Creating Links
Dreamweaver gives the designer the ability to create links easily and quickly. Links can
be created with the Properties Toolbar by simply entering the URL of the page you would
like to link to.
Text Links
To create a text link, type the text you would like to use as the link and highlight it.

Once it is highlighted, bring up the Properties toolbar and enter the url of the page you
would like to link to in the Link field.

Once you have entered the url, simply hit enter and the link has been created. Here is
how your text link will look:

Web Design Training Page 23

To create links to documents within your site you can use 'relative urls', which we
mentioned in an earlier part of this tutorial. Instead of entering a full web address
(http://www), you can enter the filename relative to where your document is. For example,
if the file is in the same directory, you can enter the filename. If the file is in a subfolder,
you must link to the folders name, followed by a / slash, and then the filename:
images/image.gif.
If you wish to link to another document on the web, you must enter the full web address:
http://www.domainname.com/filename.html. If you leave off the 'http://' the browser will
not know that you are linking to an external document. Instead it will look for the file in
your local directory.
For more information on relative and absolute urls,

Links
The process for creating a link with an image is similar to creating a text link. Simply
select the image with your mouse, and enter the url in the Link field of the Properties
Toolbar.
You can have your link open in a new window by using the 'Target' field of the Properties
Toolbar:

All you have to do is enter a value (type anything) and your link will open in a new
window. The 'target' attribute is used often in Framesets, which we will cover later in the
tutorial.

Linking to Different Parts of the Page

You have probably seen web pages with links to the Top, Bottom or Middle of the page.
This can also be accomplished easily in Dreamweaver by using the Named Anchor.

Find the section of your document you would like to link to and place your cursor there.
Then go to the Insert Menu and select 'Named Anchor'. You will then be prompted for the
name of your anchor.

If you have configured Dreamweaver to view Invisible Elements (from the View Menu),
you will see a small icon that will represent your anchor.

Now all you have to do is create a link to that anchor. This is done with the Properties
Toolbar as you would normally do, only now you will use the # Pound sign, followed by
the name of the anchor.

When the user clicks on your link, the screen will jump to your Named Anchor. This can
be useful on longer pages where you wish to eliminate the need to scroll.
You can link to the same anchor from another document by appending the #name to the
end of the filename. This can be done with both relative and absolute urls. For example,
you could link to the following: /about/index.html#names. This would take users to the
names section of the document.

Web Design Training Page 24

The Rollover Wizard
A rollover image is an image that changes when the mouse moves over it. Dreamweaver
has a wizard that makes it simple to create a rollover image. This wizard can be accessed
by going to the Insert Menu and selecting 'Rollover Image'.
Before you insert your rollover onto the page, you must first create the original image as
well as the mouseover image. Use your graphics program of choice and create two images
at the same size. It's a good idea to name the images so that you can easily find them and
know their purpose. Here is a sample:

The first image was 100 x 20 pixels. It was named 'image'. The second image had the
same pixel dimensions, used the same font (with a different color), and was named
'imageover.'
After you have created the images, you are ready to insert them into the wizard. Select
Rollover Image from the Insert Menu and you will see a dialog box that looks like this:

You must first assign the Rollover a name in the 'Name' field. This is helpful if you plan on
modifying the rollover later. You must then find the Original Image. You can browse for it
on your local computer. Dreamweaver will link to it as it would if you inserted an image in
the normal fashion. Once you have the path to your original image, you must do the same
with the 'Rollover' image. It is recommended that you leave the 'Preload Rollover Image'
checked. This way the browser will download the image when the page loads. If this is
unchecked, the browser will download the image when the mouse is moved over it. This
could cause a delay until the image is downloaded which would usually lose the effect.
You can also have your rollover go to a certain URL by entering the URL in the last field of
the dialog box. In the example above, we used '#' as the url.

Click on OK and you should see the original image on your page. From there you can
move it to wherever you would like and can further modify it. You can select the image
and have all the standard image options in the Properties Toolbar. You can change the
'Link' field to a new URL. You can add Alt text, a border, change the alignment, assign a
target value, etc.
This is not the only way or the best way to insert a rollover into Dreamweaver, but it is the
easiest way. We will be looking at a more advanced means of inserting Rollovers when we
talk about Behaviors later in the tutorial.

Ordered and Unordered Lists

There are two types of lists available with HTML - Ordered and unordered. An ordered list
is a sequential list, either by number or by letter. An unordered list is a bulleted list. Both
are quite simple to create in Dreamweaver.
To create the list, click on the proper icon in the Properties Toolbar:
- Ordered List
- Unordered List
The paragraph you are working on will become either a numbered list or a bulleted list.
To create a new bullet, or number, just hit enter. If you would like an extra line below the
bullet, hit SHIFT-enter. Once you hit enter again, you will see another bullet or number.
When you have finished your list, just hit enter twice. The list will disappear and you'll be
able to start on a new paragraph.
Bullets and numbers are not the only way to list information. You've probably seen letters,
squares, etc. to present information on other pages. Modifying your list is almost as
simple as creating it.
Once you have created your list, go to the Text Menu, select List, and select Properties.
You will see a dialog box that looks like this:

Web Design Training Page 25

Here you can customize your list. The top menu, List Type, gives you the option of having
a Bulleted List, Numbered List, Definition List or a Menu List.
Once you have defined your list, you can define the Style of your list. For Bulleted Lists,
you have the following style options:
 Bullet

o Circle

 Square

For Numbered Lists, you have the following style options:

1. Numbers

i. Roman Numerals (small)

I. Roman Numerals (large)

a. Alphabet Small

A. Alphabet Large

You can also specify a starting number for Numbered lists in the 'Start Count' field.
Unfortunately it isn't easy to nest lists in Dreamweaver. This still needs to be done in the
HTML itself, so it might be a good idea to learn the code for lists if you plan on using them
extensively.

Image Maps
Dreamweaver offers web designers the capability of creating image maps on the fly. All
the tools required are built in. All that is required is to bring the image in and define the
different clickable areas.
For this example we'll use the following image:

Once the image has been imported, you'll see a few Map options if you expand the
Properties Toolbar:

Web Design Training Page 26

You can start your work by giving the map a name in the blank field to right of the word
Map (a name is required). Then start defining your areas by selecting one of the hotspot
tools (the blue shapes on the toolbar). Simply click and drag around the area you would
like to make 'hot'. For this example, we'll use the Square Hotspot Tool:

Once the area has been drawn, the Properties Toolbar changes:

The 'Link' field is where you enter the url you wish to link to. For this example, we
entered http://www.w3nation.com/. The 'Target' field is just like the standard target for
any link. You can use the Presets included in Dreamweaver, or give the target your own
name by typing in the field. The 'Alt' field is the Alternative text that will be displayed if
graphics are turned off. Here is the information as we entered it for the sample:

and here is the result:

To complete the map, just do the same for all the other areas you wish to be clickable.
Here is our finished imagemap:

If you have Invisible Elements turned on, you will see an icon that looks like this next to
your image map:

Do NOT delete this! This contains the coordinates of your imagemap. If you delete this,
the map will not work.

More About Image Maps

There are three different Image Map tools. There is the square tool, as demonstrated
before, the oval tool and the polygon tool.
The oval tool works in the same fashion as the square tool. You simply use it do specify
a circular hotspot. This tool only draws a perfect circle.

Web Design Training Page 27

The polygon tool is more flexible with a nonlinear type of design. For example, if you
had a picture of a person that you would like to be clickable, this would be the tool to use.
With this tool you can click from one area to another. The tool follows your mouse clicks
with a path. It will continue following until the path is closed.

The Pointer Hotspot tool is used for selecting the hotspots already defined. Once they
are selected they can be moved by dragging with the mouse or using the arrow keys on
the keyboard. You can also delete an existing hotspot by using the Delete key.
Once you have selected a hotspot the Properties Toolbar changes to the information
defined for that hotspot. If you wish to modify your map later, all you have to do is select
it and make the change necessary.

Indents and Outdents

Dreamweaver has 2 buttons on the toolbar that are used for indenting and outdenting
text.

The arrow pointing to the right indents the text and the arrow pointing to the left
outdents the text. To activate an indent, simply click on the button while your cursor is in
the paragraph you would like indented.
The way the text is indented is probably different from what you might expect if you're
used to word processing programs. There is no Indent feature within HTML, so
Dreamweaver uses the <BLOCKQUOTE> tag. This does create an indent, but it also
creates a block of text. See the sample below:

Sample indented text. Sample indented text. Sample indented text.

Sample indented text. Sample indented text. Sample indented text.
Sample indented text. Sample indented text. Sample indented text.
Sample indented text. Sample indented text. Sample indented text.
Sample indented text. Sample indented text. Sample indented text.
Sample indented text.

As you can see, the text is not only indented on the left, but some space is taken from the
right as well. If you would like the text to be blocked further, you simply click on the
indent button twice. Here is a sample of the same text with two indents:

Sample indented text. Sample indented text. Sample

indented text. Sample indented text. Sample indented text.
Sample indented text. Sample indented text. Sample
indented text. Sample indented text. Sample indented text.
Sample indented text. Sample indented text. Sample
indented text. Sample indented text. Sample indented text.

The way Dreamweaver accomplishes this is by nesting a <BLOCKQUOTE> tag within

another.
Text will stay indented until you specify otherwise. This includes new paragraphs in your
document. In order to return the text to the far left, you must click on the Outdent button.

Web Design Training Page 28

Forms
Forms can be created in Dreamweaver with either the Objects Palette or from the Insert
Menu.
Go to the Window Menu and select Objects or use the keyboard shortcut Command or
CTRL F2. When you see the Objects Palette, change the pull down menu at the top to
Forms.

Your Form Objects palette should look like this:

You can now just click on the appropriate button in order to place a new form object on
your page.
Before you place your first form object on the page, you need to insert a form tag. This
can be confusing to some, but all form objects must reside inside a defined form tag. In
fact, if you try to place a form object without a form, you'll get the following dialog box:

You can add a form tag either from the Form Objects Palette or from the Insert Menu.
Click on the upper left button on the palette to create your form. Once you have done
so you will see a red bounding box.

You will also notice that the Properties Toolbar has changed:

Web Design Training Page 29

There are three fields you must fill out in order to activate your form. The form name is
not necessary, but usually recommended, depending on what the form is used for. The
action field is where the information in the form will be submitted to. This can be to
anything from an e-mail address to a CGI file. The Method field determines how the data
in the form is processed. POST usually means that the data is sent to a file and GET
usually means that the data is appended to a URL. The default is POST.
Another way to insert a form is from the Insert Menu. Some people prefer to keep their
workplace as uncluttered as possible. All one has to do is select Form from the insert
menu, which will insert the form tag. To insert form objects, there is a submenu off the
insert menu for just that purpose.
So now you should be ready to start placing objects into your form. Over the next couple
of sections we'll look at the different objects available.

Text Fields

To insert a text field either click on the Text Field button of the Form Objects Palette
or from the Form Objects menu off the Insert Menu. You will see something that looks like
this:

You can configure the text field with the Properties Palette which changes when the text
field is selected:

You can give the field a name by typing in the field to the left of the palette.
You can specify how wide the text area will be by using the Char Width field. The default
is 25 characters.
The Max Chars field is where you specify the maximum number of characters to allow in
the field. If a user runs out of characters they will not be allowed to continue.
If you would like an initial value to be displayed, simply type the value into the Init Val
field. Below is an example of how the field would be displayed:

You can choose which type of Text Area you would like by using the 'Type' field on the
palette. There are three options available: Single line (default), Multi line, and password.
Multi line Text Area
Once you click on the Multi line radio button, your field will become 2 lines. You can then
further customize it with the Properties palette.

Web Design Training Page 30

Instead of the Max Chars field there is a Number of Lines field on the palette. The default
is 2 lines.
You'll also be able to specify how the text wraps in the field when the user is filling it out.
You can do this by choosing from the Wrap Menu below the Number of Lines field. Your
options are Physical, Virtual, or Off.
With wrap turned off, the user will continue typing and the form will scroll horizontally
with them.

With the wrap set to Virtual, the user will continue typing on a new line once the width
has been reached. The appearance to the end user is the same whether the Wrap is set to
Virtual or Physical. The difference is in how the data is sent. When the wrap is set to
Physical, the data will break at the end of the field's width. The data will not break when
the wrap is set to Virtual.

Checkboxes and Radio Buttons

Checkboxes
To insert a checkbox either click on the button of the Form Objects Palette or select
from the Form Objects menu off the Insert Menu. You will see something that looks like
this:

You can then use the Properties Toolbar to assign it a name, a value and specify whether
it is checked or not.
Radio Buttons
To insert a radio button either click on the button of the Form Objects Palette or select
from the Form Objects menu off the Insert Menu. You will see something that looks like
this:

The properties for the radio button are identical as the checkbox.

So what is the difference between the two? There isn't much difference. Often checkboxes
are 'on, off' selections, whereas radio buttons are 'either, or'. This isn't always the case,
and Dreamweaver isn't capable of the 'either, or' option.
Here is an example:
What type of music do you like?

Rock R&B Alternative Rap

Here is an example of checkboxes:
What type of music do you like?

Rock R&B Alternative Rap

Web Design Training Page 31

Lists and Menus
You can add lists and menus to your document in order to give visitors a predetermined
set of choices for a specific piece of information.
To insert a list or a menu either click on the button of the Form Objects Palette or
select from the Form Objects menu off the Insert Menu. You will see something that looks
like this:

Not much of a list. You'll notice that the Properties palette has changed to reflect the
different options available for Lists and Menus.

Here you can decide whether you would like it to be a list or a menu. The default setting
is Menu and is what you saw in the example above A List looks like this:

They look exactly the same, but you might notice that some of the Properties options are
grayed out when it is a list. The difference comes into place when data is entered.
To add some choices to the list, click on the 'List Values' button of the Properties Toolbar.
You will see a dialog that looks like this:

Enter the first value by typing the name in the 'Item Label' field. This is what the user will
see when the form is rendered on the page. You can then enter a value, which depends on
the nature of the form. If this is a jumpbox, you would place a url in the value field. Other
values will depend on the configuration of the Backend application used to parse the form.
To add a new value, simply click on the + (plus) button. You can then enter a new label
and value. You can also get the same result by using the TAB key to move from field to
field. It will automatically create a new value once it has reached the end of all existing

Web Design Training Page 32

values. To remove a value, select it by clicking once (highlight it) and click once on the -
(minus) button.
Here is a sample with the numbers 1-5 used as values:

You might be asking yourself how you can widen the field. There is no way save for
entering longer data. The less amount of characters in the longest label, the smaller the
menu. Since we only used 1 character, the menu is 1 character wide. Here is a sample
with some longer labels:

More Lists and Menus

You can also have a choice preselected when the page loads by using the 'Initially
Selected' field of the Properties Toolbar. Here is an example where Flash was selected:

Now let's look at Lists. Click on the list button of the Properties Toolbar. You'll notice that
the 'height' field and some others are no longer grayed out. The default height is 1, which
is essentially the same as a Menu. It becomes a list when the height is changed. Here is a
sample with the height set to 5.

Now all selections are visible. You can change the way the field is displayed by changing
the height of the List. What if you wanted a visitor to choose between 20 values? You
wouldn't want a list that was 20 lines high. For this you could keep the height at 5, or
however many lines you prefer, but enter the extra values. This is what happens.

Now a scrollbar appears. You can also allow visitors to select multiple values by clicking
on the 'Allow Multiple' checkbox of the Properties Toolbar:
What Tools Do You Regularly Use?
(hold down the CTRL or Command key to check multiple values)

Web Design Training Page 33

Buttons
So now that you have the means to collect all this information, how do you send it? With a
submit button. Dreamweaver offers a few options when it comes to buttons.
To insert a button either click on the button of the Form Objects Palette or select from
the Form Objects menu off the Insert Menu. You will see something that looks like this:

To have it submit the form, you can simply leave it as is. Where it goes was defined when
you inserted the form, which was discussed at the beginning of this Chapter.
You can change the text of the Submit button (as we have done in the sidebar) by
changing the Label field of the Properties Toolbar.

Of course the button will stretch depending on the amount of characters in your button.
You can have the button perform one of two actions. The first is submit, which is the
default. You can also have the button reset the form. This will clear all information on the
form, which is essentially the same as refreshing the page. When you change the action to
reset, the label changes with it. You can still customize this.

Web Design Training Page 34

Creating a Jump Menu
Dreamweaver 3 offers the ability to easily add a Jump Box to a page. What is a Jump Box?
It is a menu that sends a user to a specific URL. This can be extremely beneficial when it
comes to adding navigation to a Web site. Here is a sample.
Note: Using this Box will take you to another site. If you choose to test it, make sure you
hit the Back button to return to the Tutorial.

The creative geniuses have made this task quite easy. All you have to do is click on the
Insert Jump Box button of the Objects Palette. A dialog box will appear. The rest is
easy.

The process of adding selections is very much like adding values to a list or a menu.
Specify the name (or label) in the 'Text' field. You then specify the URL (fully qualified) in
the URL field. To add more selections, just use the + (plus) and - (minus) buttons.
Once you have added all the values, you can switch the order by using the buttons to the
right of the plus and minus:

You can give the field a name, specify the Window to open the URL in (only applies to
Framesets), and even throw a Go button in there.
Once you are finished you'll have a full blown navigation system. The Go button isn't even
necessary. Visitors will follow the URL once it is selected.

Tables
Designers can create complex, professional page layouts with the use of tables. Tables
offer the ability to position HTML elements as well as present information in an organized
manner. Tables, when used creatively, can also enhance the design of a page. For
example, the page your viewing now was composed with the use of several tables.
In this section you will learn how to create, modify , and use tables as a design tool within
Dreamweaver.
So what is a table anyway? If you've used a spreadsheet or a program such as Microsoft Word, you
probably already have an idea. A table is a way of organizing data, or information. This is done by using
headers, rows and columns. For example, here is how a software company's inventory might be
organized:
Software Inventory

25 Adobe Photoshop
15 Macromedia Dreamweaver

Web Design Training Page 35

 20 Microsoft Word
25 Macromedia Flash

The example above was created with a Table Header, 2 columns, and 4 rows. You will
learn how to create these and more.

Web Design Training Page 36

Creating a Table
Tables can be created within Dreamweaver from the Insert Menu, by selecting Table, or
from the Objects Palette by clicking on the Table Icon. Either option brings up the
following Dialog Box:

Several fields must be defined before the table is inserted:

 Rows: How many rows in the table
 Columns: How many columns in the table
 Cell Padding: Specifies the space between the table border and the cell. This
number is in pixels.
 Cell Spacing: Specifies spacing between table cells. This number is also in pixels.
 Width: The width of the table. This is either a percentage or a number in pixels.
Use the drop down menu to choose.
 Border: The thickness of the table border. This is a number in pixels. A value of 0
will give you a table without a border.

Once you have defined the table, click OK and it will be placed on your page. It will look
something like this:

Each one of the boxes is a table cell. From there you can enter text by simply clicking
once inside the cell and then typing. You can also add images, forms, and just about every
other HTML element.

Table Properties

Web Design Training Page 37

Before you can modify your table, you must select it. This can be done in 4 different ways:
 By clicking near the edges of the table with the mouse
 By selecting Table | Select Table from the Modify Menu
 By selecting Table | Select Table from the context menu. It must be accessed
while the cursor is inside the table boundaries
 By clicking on the <table> tag in the lower left corner of the screen.

When the table is selected, you'll notice a black box surrounding it. From here you'll be
doing a lot of work from the Properties Toolbar. Here is a screenshot of the toolbar when
the table is selected:

You can modify the table at any time from the Properties toolbar. Here is an explanation
of the fields:
 Table Name: This is where you would name the table. This really only comes into
effect when you will be using a Javascript to call the table.
 Rows: The number of rows. Changing this will change the table. Only do this if
there is no data inside the table. You'll learn how to modify the table with data
inside in the next section.
 Columns. The number of columns. Changing this will change the table. Like
rows, only do this if there is no data inside the table.
 Width (W): This is the width of the entire table. Use the drop down menu to the
right to specify whether the width is in pixels or a percentage.
 Height (H): This is the height of the entire table. Only change this if you have a
fixed height within the table, such as an image. The height of many HTML
elements will vary on many platforms. If you're at 800 x 600, and specify a height
for that resolution, there will be empty space at the end for someone at a larger
resolution.
 Cellpad: Specifies the space between the table border and the cell.
 CellSpace: Specifies spacing between table cells.
 Align: This is where you set the alignment of the table on the page. The options
are left, center and right.
 Border: The size of the border in pixels.

Dreamweaver also offers many options on customizing the look and feel of a table. These
are found in the expanded Table Properties Toolbar.

 V Space: Specifies the vertical space in pixels around the table.

 H Space: Specifies the horizontal space in pixels around the table.
 Light Brdr: Gives the inside borders a light color. This is only supported in
Internet Explorer.
 Dark Brdr: Gives the inside borders a dark color. This is also only supported in
Internet Explorer.
 BG (long): Specifies a file to be used as the table background. A file can be
chosen from the hard drive by clicking on the Folder icon.
 BG (short): Specifies a table background color in Hexadecimal format.
 Brdr: The border color for the table in pixels.

Cells and Rows

You can also modify cells and rows individually. Rows can be modified by selecting the
entire row. This can be done by holding down the CTRL (Command on Mac) key and
clicking in each individual cell of the row, or by clicking on the <tr> tag in the lower left
corner.

Web Design Training Page 38

Table cells can be selected simply by having the cursor inside the cell. They also can be
selected by clicking with the CTRL (Command) key, or by clicking on the <td> tag.
The Properties Toolbar does change. The top part is identical to the default text
Properties, with alignment, text formatting, etc. The expanded Properties are similar to
the Table Properties, but there are some differences.

 Horz: Horizontal alignment. This affects only the elements inside the cell. The
options are Left, Center and Right.
 Vert: Vertical alignment. This affects the orientation of the elements within the
cell relative to other cells.
 W: Width of the cell. This can be a number or a percentage. If it is a percentage,
the % sign must be added.
 H: Height of the cell. This must be a number in pixels.
 No Wrap (checkbox): This prevents elements inside the cell from wrapping.
 Header (checkbox): This designates that the cell is a Header Cell (TH). This
makes any text inside centered and bold.
 BG (long): Background image for the cell.
 BG (small): Background color for the cell.
 Brdr: Border color for the cell.

Here is a sample:
Header Cell
(blue Header Cell
background)
this cell doesn't require
width 50%
a width. It takes the
Vert: middle
remainder.
Vert: top Vert: middle
Horz: center
Horz. left
border: purple

You should now understand how to define and change many table elements within
Dreamweaver. Next you will learn how to control your table with elements already inside.

Modifying Your Table

One of the advantages of using Dreamweaver is the simple fact that it is a WYSIWYG
program. While designing you can see how changes will look in the browser (to a degree)
without having to preview it. This is one of the many ways which Dreamweaver can save
the Web Designer plenty of time. This gives you the ability to make slight changes while
you are designing. You may decide that you need to add an extra row, or delete an extra
column. There are several ways to do this as you go.

The context menu is extremely helpful for making modifications. While you have your
cursor inside a cell, you are able to right click (CTRL click for Mac), select Table, and

Web Design Training Page 39

there are several options available for making modifications. We will call this submenu the
Table Menu.
Note: This same submenu can be accessed from the Modify Menu by selecting Table.
Adding Rows and Columns

You can add a row or a column by accessing the Table Menu and selecting either Insert
Row or Insert Column. This will be added above the selection. This means that a row will
be inserted above the row your cursor is currently in, and the column will be inserted to
the left of the column your cursor is currently in.
To add Rows or Columns below the selection, you can select Insert Rows or Columns from
the Table Menu. This will bring up a dialog box:

When you access this dialog box, it automatically changes the insertion from Above to
Below. From here you can add multiple columns or rows. You must use the radio buttons
to specify which you would like to insert, and you can use the number box to choose the
amount.

Deleting Rows and Columns

You can also delete rows and columns easily by using the Table Menu. Simply place your
cursor in the row or column you would like to delete, access the Table Menu, and select
Delete Row or Delete Column.
You can delete multiple rows and columns by selecting all the cells within. This can be
done by holding down the CTRL (Command for Mac) key and clicking on each cell
individually.

Spanning Columns and Rows

Unless you are familiar with HTML, you are probably not familiar with Column and Row
Spanning. It can be a difficult concept for some, but is well worth spending the time to
learn it.
You can specify that a certain table cell will span multiple columns or rows. In HTML, you
must specify the number of cells it will span. In Dreamweaver, you are allowed to simply
increase and decrease the span by one.
Here is an example of Column Spanning:
Standard 2 row, 3 column table:

Web Design Training Page 40

Same table with the first cell given a Column Span of 1(increased once)

Same table with the first cell given a Column Span of 2 (increased twice)

As you can see, the top cell spanned the entire row.
Here is the same example for a Row Span:

The first cell of this table was given a Row Span of 1 (increased once).
This can be done easily. Click inside the cell you would like to span. In the case of the
example, that would be the upper left cell. While your cursor is in there access the Table
Menu and select Increase Row Span, or Increase Column Span.
If you decide to change your mind, you can decrease the span in the same fashion, by
selecting Decrease Row Span or Decrease Column Span.
Here is an example of how the first example could be transformed into a simple page
design.
If you've followed up to this point, you are almost capable of producing professional
designs. We just have one page to go.

Nesting Tables
Nested tables means placing (nesting) a table within another table. Doing this can give
the designer even more control over positioning with a table driven page.
It is done quite easily. Simply insert a table while the cursor is within the cell you would
like to place the table.
Here is an example:

Here is the nested table:

Nested table

The nested table was 1 column and 1 row, and given a border of 5 to distinguish it from
the original table.
Before you start going crazy with nested tables, I should warn you that this can slow down
your page's load time. Browsers display tables by rendering what is inside before
rendering the rest of the table. This means that if you have 5 nested tables within 1
container table, the browser must render everything inside before the container table will
displayed. This is especially true with Netscape browsers. It is a good idea to test your
designs in both browsers before you publish.
Nesting tables is more of a design tool than anything else. This is what leads us to our
final section of the Tables Tutorial:

Web Design Training Page 41

Using Tables as a Layout Tool
Now I will share some techniques on turning your newfound table knowledge into quality
page designs.
Before you begin designing your page, you must decide what your target will be. This will
determine how your tables are formatted. You must also decide whether you would like
the content of your page formatted by pixel width or percentage. If you specify pixel
width, the page will not fill the entire screen at larger resolutions (this page is an
example) and could cause horizontal scrolling at smaller resolutions..
I will walk you through the process of designing a page and will show you updated
samples as we go.
Once you've decided the width of your page, you are ready to get started. Insert a table
with the desired width. This will be the container table. Only use 1 row and 1 column with
a cellpadding, cellspacing and border of 0. For the example we used a red table formatted
at 100%.

Now we'll add a table where we can place the site's branding. Go ahead and insert
another table nested within the container table. For the example I formatted the nested
table at 98% so that the red background of the container table would appear to be a
border. I added a three cell table, with the top and bottom cells having a red background.
The nested table also had a cellpadding, cellspacing and border of 0, and the align was set
to center so that it fit comfortable within the container table.

Now it's time to add navigation and content.Go ahead and select the first nested table.
Once it is selected hit the right arrow key once. This will place the cursor within the
container table just after the first nested table. Go ahead and add another table with 2 or
3 columns. For the example I added 3 columns and formatted the left and right columns at
20%. This leaves room for some right and left navigation and a content area. I made the
background color of the content (middle) cell white.

Now it's time for some navigation. Add some text, graphics, or whatever you desire into
one of the sidebars. You will need to set each cell's vertical alignment to Top. Once you
have the navigation in place, you can insert your content in the middle cell. This is what I
did for the example.

Now we have a working page. It might not be the most creative page in the world, but it's
a good start. From here more images, colors and text could be added to spice the page up.
What I just shared with you was a technique. As you experiment with table designs more,
you'll come up with your own techniques that will suit the type of pages you like. This is
something that can only be established with practice.

Behaviors
In addition to page layout, Dreamweaver has the capacity to add interactivity to a page
with the use of 'Behaviors'. This can be anything from controlling a Shockwave movie, to
opening a browser window, to displaying a status bar message.
What are behaviors? They are Javascript events that are applied to a specific HTML tag.
While you don't need to know Javascript in order to use them in Dreamweaver, it is a good
idea to understand a little of how it works.
Javascript is called by certain events that happen during the browser session. The way to
determine these events is with the use of Event Handlers, such as onClick or
onMouseover. Dreamweaver uses these event handlers within the Behaviors Palette, and
they are used to determine when the behavior will go into effect.
In this section you will learn how to use Dreamweaver Behaviors, how to apply them to
specific HTML tags, and how to use some of the behaviors that are built in to
Dreamweaver.

The Behaviors Palette

Web Design Training Page 42

The Behaviors Palette is accessed from the Window Menu by selecting 'Behaviors', or by
pressing F8 on the keyboard.

There are several components of the palette:

1. + (plus): This brings up a submenu where a new behavior can be added.
2. - (minus): This removes a behavior that already exists. This button is grayed out
unless a behavior is selected.
3. Events for: This menu allows you to select what browser compatibility you prefer
for new behaviors. It is recommended that you leave this at '3.0 and Later
Browsers', which is the default.
4. Arrows: The up and down arrows will change the selection of existing behaviors
above or below. These are grayed out unless there are at least 2 behaviors
already.
5. Events: This field is where the Event Handler name is displayed.
6. Actions: This is the name of the behavior that will execute.

So now that you have a foothold, let's get our hands dirty.

Creating a Behavior
To create a behavior, you must first decide which HTML tag it will be applied to. This
decision will depend on the type of behavior you would like to add. Once you have decided
on the tag, you must select it. This can be done by placing the cursor within the element
on your page, or by selecting from the Tag list at the bottom:

Once you have selected the tag, click on the + button on the Behaviors Palette. This will
bring up a list of the Behaviors available to Dreamweaver. Click on the one you wish to
use, and a dialog box will come up. The dialog box varies depending on the Behavior you
wish to use.

Web Design Training Page 43

Once the Behavior has been created, it will appear in the Behaviors Palette.

You can now modify the Action of the Behavior by double clicking on the text within the
Action field. For the above example, that text would be 'Go To URL'. This will bring up the
same dialog box with the information already filled in.
You can also change the Event that will trigger the Behavior. We will now talk about the
different events that can be used and when to use them.

Status Bar Messages

A status bar message is a custom message that appears on the lower left corner of the
browser. This usually happens during an onMouseover event. These are probably the
easiest Behaviors to create in Dreamweaver.
Move your mouse over the following 2 examples to see a status bar message.
Status Bar #1
Status Bar #2
Follow these steps to create a status bar message:
1. Create a link. This can be a text or image link.
2. Select the link (the <a> tag).
3. Open the Behaviors Palette.
4. Click on the Behaviors Menu and click on 'Set Text', which will bring up another
menu where you should choose 'Set Text of Status Bar'.
5. A dialog box will come up with one field titled 'Message'. Simply type the message
that you would like to appear and you're done.

Web Design Training Page 44

Well, almost done. You don't want that message to display the entire time someone is at
your page, do you? If not, you need to create an onMouseOut message. To do this, simply
follow the above steps, but instead of a message hit the space bar once. Then select the
new Behavior in the Palette, and change the event from onMouseOver to onMouseOut.

Popup Windows
You can also create a Popup Window with Behaviors in Dreamweaver. for an example.
Follow these steps to create a popup window:
 Create a link. This can be a text or image link.
 Select the link (the <a> tag).
 Open the Behaviors Palette.
 Click on the Behaviors Menu and click on 'Open Browser Window'.
 A dialog box will come up with several fields. The most important field is the 'URL
to Display'. You can browse for a file if necessary. You can also specify the width
and height of the window, whether it has a navigation toolbar, scrolling bars, etc.
You can also give the window a name, which is useful if you plan on loading other
information in there later.
 Make sure the Event is set to onClick.

This can also be used with other events, such as onMouseOver or onLoad. If you would
like to have a browser window open when a page is loaded, simply select the <body>
(lower left corner) before setting your behavior and follow the same steps as above.
Yacketycat is an example of using this feature to load a site.

Swap Image
This effect has been called many things, such as Mouseovers, Rollovers, and more.
Dreamweaver can accomplish this with the Swap Image behavior.
Here is a sample:

This can be done quite easily:

 Insert an image.
 Select the image (the <img> tag).
 Name the image in the Properties Palette.
 Open the Behaviors Palette.
 Click on the Behaviors Menu and click on 'Swap Image'.
 A dialog box will come up that lists all the images on the page. Make sure the
name you gave this image is selected.
 Enter the path or browse for the image to be used when it is moused over.

There are also two checkboxes that ask if you want to Preload images and Restore
onMouseout. It is recommend that you check both of these. You can also preload several
images at one time by using the Preload Behavior while the <body> tag is selected. If you
are using multiple or complex mouseover effects, you can select Restore on Mouseout
manually by using the original image as the source and using the onMouseout event.
If you've come this far, you should have little trouble using the other Behaviors.

Web Design Training Page 45

Templates
Dreamweaver offers non-programmers the ability to create dynamic web sites. This means
that a standard look and feel can be created, and pages can be generated from that. If the
look and feel is changed later, Dreamweaver will update all the pages that were
generated from it.
The process for creating and using templates, like most everything else with
Dreamweaver, is actually quite simple. First you must design the look and feel. Then you
must decide which areas will be modifiable (content), then save and you're ready to create
the pages. Dreamweaver uses standard HTML comments to determine which template is
used and which areas are editable.
Here is an example:
<!-- #BeginTemplate "/Templates/tutorial.dwt" -->
You will see something like that at the beginning of the page that was generated by the
template.

In this tutorial you will learn how to create the templates with editable regions, how to
generate pages, and how to modify the template and update the entire site.

Creating the Template

Creating the Template
First you must create a look and feel for your template. You can either create a new page
or use one that has already been created. We created a simple 3 row table for the sample.
To transform that page into a template, all you have to do is go to the File Menu and
choose Save As Template.

Once you have settled on a look and feel, you must then define editable regions. It is a
good idea to think carefully here, but you can change the regions later if you make a
mistake.
For this example we used the same table as before.

Now that we have a good idea where everything will go, we can now create the Editable
Regions. As you can see from the sample, only one region in this design will be modified
when pages are created, that would be the center table row where the content will be
plugged in later.
To make that row editable, either place the cursor inside, or highlight everything inside.
You can then either use the Context menu (right click) by choosing the Editable Regions

Web Design Training Page 46

submenu, or from the Modify menu under the Templates submenu. Simply select 'Mark
Selection as Editable'. You will then be prompted for the name of the section. For this
example we used the word 'content'.

You can also 'unmark' the selection if you need to modify it later, or you can choose the
'New' command (without anything selected), which will create a new editable region. This
region will be placed where the cursor is located.
After you have defined the Editable Regions, you are ready to save the template and
generate the pages.

Generating Pages
Generating Pages
To generate a new page, simply go to the File Menu and choose New From Template. You
will be prompted for the site to use and the name of the template. We will discuss using
multiple templates shortly. Choose the name of the template you created and click OK.
That page will be opened, and the Dreamweaver interface will be the same as usual. The
only difference is that there will be some yellow areas. Yellow means that area is not
editable.

You will want to find the white spaces and add some content. For this example, we simply
highlighted the selection that was defined as editable and replaced it with our content.

Now the document must be saved. It can be saved in any directory within the site. All
links and images will be updated to the location specified in the master template. This
new template generated page is now a static page. It can be opened by a web browser,
linked to, or used however the Webmaster deems necessary. Continue generating pages
until the entire site has been created.
To change the navigation or any other template elements, simply open the master
template, make the change and save. You will be prompted on whether you wish to update
pages using that template. If you choose Yes, Dreamweaver will check the site cache for
all pages that use that template and they will be automatically updated. For the change to
appear on the site, you will have to upload all pages to the server.

Using Multiple Templates

Using Multiple Templates
Many Web sites are broken down into several sections or categories. This can be done
with templates as well, but will take a little extra work. You will need to create a template
for each section or category in the site. To do this, open the existing template. Before you
make any changes, use the Save As Template command and choose a name for the
template.
Now make any modifications you deem fit. For example, if you wanted to use a different
header graphic, or different navigation, make the appropriate changes here. Once you are
finished, just save the file from the File Menu or use the shortcut key CTRL S (Command

Web Design Training Page 47

S on the Mac). Once that template is created you can generate new pages from for that
section, or change other pages that have already been generated to use the new template.
You can manage your templates by using the Templates Palette. This can be accessed
from the Window Menu or by the shortcut key CTRL F11. You will see a list of all
templates the current site uses. If you select one of the templates, you will see a
thumbnail in the top half of the palette.

You can also use the Templates palette to manage your pages. If you select the template
and right click on it, you access several options which will affect how the template is used.
For example, you can apply the selected template to the page that is open. This is how you
would change which template the page uses. You can also update the current page, or
update the entire site. The same options can be found by clicking on the arrow in the
Templates Palette.

Working With Dreamweaver and HTML

Dreamweaver is considered a WYSIWYG (what-you-see-is-what-you-get) program because
of its visual interface. What sets Dreamweaver apart from many other design tools is its
tag editing features. For this reason Dreamweaver is usually the preferred tool for
developers who are proficient in HTML.
In addition to always having an HTML code window just a click away, Dreamweaver also
has a built in tag editor, an option to use an external HTML editor, and when elements are
copied to the clipboard, they are copied in HTML format.
In this tutorial you'll learn how to utilize Dreamweaver's flexibility with HTML to your
advantage. Not only will this enable you to create higher quality documents, but it should
also speed up the entire development process and perhaps provide options that wouldn't
otherwise be available to you.

Working with External Editors

Dreamweaver gives you the option of specifying an external editor to edit documents.
First the editor must be specified in the preferences dialog, and then the document can be
launched in the editor by using a hotkey. Once the editing has been completed and the
document saved, Dreamweaver will then reload the document. This works in a similar
fashion as many all-in-one software packages, such as Adobe Photoshop/ImageReady.
To specify which editor Dreamweaver should use, go to the Edit menu and select
Preferences. Click on the External Editors category on the left and you will see a new set
of options:

Web Design Training Page 48

You can then browse in the HTML Editor field. Clicking the Browse button will allow you
to navigate your local computer to locate the program. You must find and select the
executable file rather than a shortcut or alias. You can then specify whether the modified
files will be reloaded or saved when Dreamweaver is the active window again. It is
recommended that you let Dreamweaver prompt you, which is the default setting. This
will give you more room for error.
Note: Homesite (Windows) and BBEdit (Mac) bundle with Dreamweaver. You can install
them from the Dreamweaver CD.
To access the external editor, either use the hotkey, CTRL-E on Windows, Command-E on
Mac, or use the menu command, Edit | Launch External Editor. You should then be
prompted to save the file. If you make changes in the editor and save them, you will be
prompted in Dreamweaver whether you wish to reload the file. Once the file has been
reloaded, any changes that were made will be reflected on the page.
You can also use the Site window to launch files either in Dreamweaver or in your
External editor. You can launch files in other programs by clicking them and choosing the
editor to open with. The editor that is specified in your preferences is always an option,
plus you can browse for other programs on your local computer. The Dreamweaver site
window can be used as an effective launching pad when working with 2 or more
programs.

The HTML Source Window

You can open the HTML Source window from the Launcher by clicking on the HTML
button.

You can access it quickly by clicking on the icon at the lower right corner of the screen.

Web Design Training Page 49

The HTML Source window simply reveals the HTML in the document. You can code
directly in the window, watch the code change as you are working in Dreamweaver, or
copy and paste code.
When the HTML window is opened, the actual code will be on top of a gray background.
You are still in WYSIWYG mode until you click inside the code window. You can code
directly into the HTML window when the background is white, which means it is the
active window.
Not Active

Active

When you are coding HTML in Dreamweaver, the changes won't be applied to the visual
layout until the HTML Source window is no longer the active window. Simply click on any
of the visual elements and the WYSIWYG mode will be active.
The window can be resized by clicking on the lower right corner and dragging to the
desired width and height.

Web Design Training Page 50

Tag Editing
Dreamweaver 3 has a built-in Tag Editor. This is incredibly useful for editing tags on the
fly. The editor can be accessed while working in WYSIWYG mode either by selecting the
elements on the screen, or by selecting from the tags in the lower left corner.
Select an object on your page. Right click on that object and select Edit Tag from the
submenu.

This will display the tag in an editable box.

You can code directly in this box to edit the selected tag only. If you wish to add tags, you
must do so with the HTML Source Window or with your external editor. Once you are
finished simply click on another element on the page. The tag editor will disappear and
any changes will be updated in on the page.
In addition to editing tags via the context menu, you can also remove them. This is done
by clicking on Remove Tag.
You can also edit tags by selecting them from the lower left corner of your screen.

This list of tags reflects the cursor positioning within the page. These are the parent tags
for where the cursor resides at any given moment. If the cursor is moved, the tag list will
change. You can select a tag by clicking on it once. This will select the entire contents of
that tag. To edit the tag, access the context menu and select Edit Tag. This will launch the
tag editor and changes can be made.
You can also remove, set the class or set the ID from the tag list. The latter two options
are only relevant if Styles are used in the document.

Copying and Pasting HTML

As mentioned in the introduction, when elements inside Dreamweaver are copied to the
clipboard, they are copied as HTML. For example, if you select an image and paste it into
your text editor, the HTML code will be pasted.

This is extremely useful for extracting snippets of your code from the document.
You can take this even further. Select several elements on the page by clicking and
dragging with your mouse. When you copy these, all of the HTML for your selection is
copied to the clipboard. You can then paste these into another program, or back into
Dreamweaver.
If you click on one of the tags in the tag list at the lower left corner, you will select the
entire contents of the tag, including any tags inside. For example, if you select the
<table> tag, the <tr> and the <td> tags as well as everything within them are selected.
These can then be copied and pasted into another program.
You can also paste directly into Dreamweaver documents. This can be helpful if you'd like
to reuse elements that have already been created.

When HTML is pasted into Dreamweaver, it is immediately rendered on the page. To do

this, copy the HTML to the clipboard, open the Dreamweaver document, place your cursor
where you would like the HTML to be placed, and paste.

Web Design Training Page 51

If you wish to paste a complete document, simply copy the entire source, open a new
window and paste the code directly onto the blank page (not the code window). You will
then have a complete copy of the web page structure, without any images or support files.

Web Design Training Page 52