Introduction to

Dreamweaver
version 4.0

The Dreamweaver Interface

The Dreamweaver window is designed to allow you to build web pages easily. The tools
can create, edit or delete objects without you having to write any HTML. Its very similar
to layout software for printing. You can add text, graphics, sound even movies by using
either menus or bars. Dreamweaver will generate the required code. We will discuss all
of these terms.
Lets start by looking at the Document window. When you start Dreamweaver, several
windows will open. Which ones will depend on how Dreamweaver is configured. We
will assume Dreamweavers default settings. You will see a Document window that is
where you create your page. The other two windows are the Objects palette and the
Properties inspector. Those will be covered later. The Dreamweaver document window
has many of the same functions as any other Windows application along with additional
ones.

Title Bar: Standard Windows Component

It shows the title of the Dreamweaver page you are working on. If you opened
Dreamweaver and created a new page it will display: Untitled Document (Untitled-1)
Dreamweaver. If the page has a name this is where it will be displayed.

Control Menu: Standard Windows Button

Located at the left end of the Title Bar, you can recognize it because it looks like the
Dreamweaver icon. It has controls to move, size, minimize, maximize and close the
document window. There are alternate ways to accomplish these functions.
The three buttons on the right end of the Title Bar are also standard Windows buttons.
From left to right they are: Minimize, Maximize and Close.

Minimize Button: changes the document window to a button on the taskbar. Clicking
that same button will restore the window.
Maximize/Restore Button: This toggles the document window to full screen and back
to the size it was when you maximized it.
Close: Clicking this will close the current document. It is the same as selecting Close
from the FILE menu.

Size Box: Standard Windows Button

This is located at the bottom right corner of the current document window. You can
adjust the size of the window by clicking on this button and dragging it.

Scroll Bars: Standard Windows Component

If the document/page is larger than the document window, you will see scroll bars located
on the right side of the windows and/or the bottom of the window just above the Status
Bar.

Status Bar:

Located at the bottom of the document windows, from left to right the Status Bar
contains the Tag Selector, which allows you to edit existing tags; the Window Size popup menu which provides you with a number of standard document sizes or you can
create or edit your own; the document size and estimated download time (based on a 28.8
bps modem); and the Launcher Bar which contains buttons for opening and closing
various panels, windows, and inspectors. These buttons are for more advanced use but
you can see what they do by placing the cursor over a button and its function will be
displayed. In fact most Windows buttons will display its use simply by placing the cursor
over the button. You can also display the Launcher, a floating panel with identical
buttons. This will be covered later.

Floating Palettes
You have heard the term panels. You may ask what is the difference between palettes and
panels. A palette is a set of panels that are grouped together. They let you view and
change information on the page you are editing. Floating palettes are just that. They can
be moved around the screen and placed where they suit you the best. There are a large
number of palettes to choose from but we are only going to cover three: the Object
palette, the Property Inspector and the Launcher.

Objects Palette
The Objects palette contains seven panels which provide tools that you can use to add a
wide variety of content to your page. The default panel is the Common panel, which, as
its name implies, provides the most commonly used elements in web page design, such as
tables, rules and objects created by other applications such as Flash, Photoshop and Paint
Shop Pro to name a few.

The drop down list at the top of the Objects palette gives you access to the other six
panels.

The Characters panel contains buttons to add

special characters to you page. Examples

include the trademark symbol, the copyright
symbol or foreign symbol.

The Forms panel that contains tools required

to create a web based form. Examples include
text entry fields, check boxes, buttons, radio
button, etc.

The Frames panel provides buttons that help

you create a frameset.

The Head panel lets you add META tags to

your page. META tags allow you to add items
such as Description, Keywords, Refresh, Base
and Link.

The Invisibles panel allows you to add

anchors, scripts and comments to your
document.

The Specials panel allows you to add Java

applets, various types of plug-ins and ActiveX
items.

The Launcher

The Launcher contains buttons that open and activate various Dreamweaver windows,
such as the HTML inspector, by bringing them to the front of the document window.

The Site Window lets you manage files that make up the web site. It is also used
for uploading files to the web site.
Assets are elements, such as images or movie files, that you use in building a
page or a site.
HTML Styles lists the various HTML styles used in your page
CSS Styles lists what, if any, CSS (Cascading Style Sheets) styles used on your
page.
Behaviors lists what special actions, if any, are assigned to objects used on your
page.
History is a record of commands that you have entered. You can select a
particular command and replay it to execute it again.
Code Inspector opens a window with the generated code and provides options
for debugging or modifying that code.

The little rectangular icon located at the lower right of the Launcher toggles the
Launcher from horizontal to vertical.

Property Inspector

The Property Inspector provides control over the properties of text and other objects.
An object is any item in the document. It can be text, an image, a form, a table or
something else. The contents of the Property Inspector changes depending upon what
object is being examined. This is where you can set your text and image alignments, table
borders and external links along with many other properties. The Link field is where you
enter the link for that selected object. It is important to know is that Dreamweaver doesnt
care if the selected object is text or an image. You create the link the same way in either
case.
1. You can create links manually by typing the link reference directly into the Link
field.

2. You can create a link by using Browse for file button which is the folder icon
located to the right of the Link field. This lets you browse through your local web
site files and select the file to want to link to.
3. You can create a link by using Point to File. First select the object that serves as
the link. Make sure your Local Site pane is visible including the file you want to
link to. Hold the mouse button on the Point to file icon (the circle between the
Link field and the Browse for File buttons) and drag to that file. When the cursor
is on the file, release the mouse button. Dreamweaver enters the link into the Link
field automatically. When you are done, close the current document and save the
changes.
Standard and Layout Views
Returning to the Common panel of the Object palette you should see at the bottom, two
rows named Layout and View. You can use two different views when designing web
pages. In Standard view, you can insert tables and layers and modify them in the
traditional way.
Layout view allows you to design the page with tables as the underlying structure. This
eliminates many of the difficulties of creating complex tables.
Layout view allows you to create a cell without first creating a table. If you do this, you
may think youve created a one cell table but in truth you havent. What Dreamweaver
does is assume that the table is the width of you document and then cuts that space up to
define the cell you laid out.

If you want a one cell table for example, to keep your layout intact regardless of the size
of the browser window, first create the table and then create the cell to use the whole
table.

Working with a Site Window

In this section we will define a web site, including designating a site folder and
specifying a home page. We will use the Site Window to organize site files and copy
elements to pages in the site.
Defining the Site
Before doing any work with web authoring software, you should plan our site as much as
you can. Determine who your audience will be, what do you want to convey, do you want
them to contact you? How do you want a visitor to navigate your site? Planning ahead
will save a lot of time once you actually begin creating your web pages. Also its
important that a visitor knows where they are in your site and have an easy way to return
to the homepage regardless of where they are.
Defining a site will visually help you see how your site is organized and see all of the
files required. In Dreamweaver, a defined site is the collection of all files that are
necessary for that web sites operation. These files include HTML, ASP, CFM, graphics
and several other types. Not all sites will use all of these file types. When you define a
Dreamweaver site you can:

Display the site in the Site window. This shows all files in the site as well as how
they are linked together.
Use the Site window to add or update links
Use the Site window to rearrange folders without having to manually update
existing links. They will be updated automatically.
Examine the structure of the site. You can examine it and check it out before
putting it online. Once the site is online it becomes the remote Web site.

Creating the Site Map

A site map is very similar to an organizational chart. It shows how the information is
divided up. More specific content is in a row below the more general information. You
can do this by hand on paper and you may do this early on in the project. But
Dreamweavers site mapping ability will allow you to keep track of your site while you
are in the process of building it.

A sample site map for the Jimbaran Bay Bistro might appear as follows:

This site map would be helpful in deciding how you want a visitor to know where they
are. Each page could have a double navigation bar so the visitor would know they are
looking at a History page in the About Bali section.

Defining the Site with Dreamweaver

First we need to open Dreamweaver and have the Document window active. Since we
are opening Dreamweaver without a file, we will see that the title bar of the Document
window says Untitled Document (Unitled-1). We will name the document later but for
now lets just begin to define the site.
1. Inside the Document window go to the menu item Site then select New Site.
a. You will get the Site Definition Box. At this point, the Site is unnamed so
you will see Site Definition for Unnamed Site in the Title Bar.
b. On the left side you will see a Category Box that lists several category
items. Local Info should be highlighted. If it is not, then select it.
c. The right side of the Site Definition Box has fields that apply to the
category Local Info.

2. Type Jimbaran Bay Bistro Site in the Site Name field. The site name is only used
for maintaining the site and doesnt appear in the URL for our site.
3. In the Local Root Folder field, we select the folder that will contain the web
pages on our local machine. If the folder does not exist, we must create one using
Windows Explorer. Dreamweaver will not create the folder for you. In this case
we know that DW_Workshop\Bistro_Website will be the root folder and has
already been created. We can browse to this folder by clicking on the folder icon
located to the right of the Local Root Folder text box. When we reach the folder
C:\DW_Workshop\Bistro_WebSite click Select. The folder will appear in the
Local Root Folder text box. This folder is now the root folder for our web site
and is essentially the container of our web site files. Everything that we add to
this site will be within this folder or within a subfolder in this folder. Its
important to know that only files that are within the Local Root folder can be
transferred to the web server once we upload the site. We can ignore the HTTP
Address text box for now and make sure that the Enable Cache box is checked.
4. Now that we have provided the basic settings for our new site click on OK.
5. An alert box appears telling us that Dreamweaver will now create a cache for the
site. Clicking OK will cause Dreamweaver to dedicate some memory in order to
store our files. This improves the performance of the site map display. If you
experience trouble with this option such as a computer crash or hang up, reboot
the computer, start Dreamweaver, go to the menu item Site. Click on Define Sites
and you will see a Define Sites box. Highlight Jimbaran Bay Bistro Site and then
click the Edit button. This will display the Site Definition box that you had seen
earlier. Uncheck the Enable cache and then select OK.

If cache is enabled, Dreamweaver checks the files we have in our root folder (in this
case it is C:\DW_Workshop\Bistro_Website\) and displays them in the Site window.
Right now there arent any files yet so we only see the root folder.

Lets put the web site files in their proper folders now. We know that all of the files are in
the folder C:\DW_Workshop\Bistro_Files.
1. In Explorer, go to C:\DW_Workshop\Bistro_Files and copy all HTML documents
to C:\DW_WorkShop\Bistro_WebSite\.
Files that are type HTML Document
2. Copy all of the images to C:\DW_WorkShop\Bistro_WebSite\Pictures\
Files that are types: JPG Image or GIF Image
3. Copy all of the sound files to C:\DW_WorkShop\Bistro_WebSite\Sounds
Files that are types: MIDI Sequence or WAV Sound

Using the Site Window

Working with the Site Window
Once the site is defined, DW displays all of the files and folders in the right pane of the
Site window. This lets you manage your files (view, manage links, rearrange the web
sites structure or create new pages, edit existing ones and upload them to the online Web
Site).

10

Accessing the Site Window

1. Open DW if it isnt already running and activate the Document window. Go to
the Menu Item Windows and select Launcher if it is not already checked.
2. If the Site window is not visible on your desktop then click on the Site button in
the Launcher. In the Site window we see two panes. The right side shows the
files that we have locally in the C:\DW_WorkShop\Bistro_WebSite\ folder. This is
the one weve seen earlier. Now we can see the files that we copied to our web
site folder. The left pane displays the list of files on the Remote site. (Remember,
the Remote site will be the site that will actually be on the web for people to
visit.) Right now there are no files yet so the pane is empty.
3. Since there are no remote files yet, we can save some space by reducing the size
of the Site window. On the lower left corner of the Site window we see a
triangle. This toggles the Site window to show both remote and local files or just
local files. We only have local files so far so click it. The Site window only
shows the local site files.
4. The listing in the Site window works a lot like Windows Explorer does. You can
expand or collapse folders to see their contents. Click the + sign to expand a
folder and the sign to collapse it.
5. In order to see how these files all fit together click on the Site Map button
in
the upper left corner of the Site window:
Tip: Anytime you see a button with a small arrow on it, you know that
the button has several choices. Select and hold the left mouse button
down on the arrow to see what choices are available. The Site Map
button has the arrow so it has more than one choice.
6. When we press and hold the Site Map button, we get a drop down list asking us if
we want Map Only or Map and Files. Map Only displays the left pane
containing the site layout. Map and Files displays both panes with the Site Map
in the left pane and the Root Folder in the right pane. For now we will select
Map Only.
7. Dreamweaver displays an alert box that tells us it cant build a site map because
either the home page is not specified, does not exist or is located outside of the
Local Site folder (C:\DW_WorkShop\Bistro_WebSite\). When you specify a
folder and no file name, Dreamweaver looks for the file default.htm as the home
page. If you look at the folder you can see we dont have a file called default.htm.
Actually the file default_BISTRO.htm will be our homepage. There are two ways
to make this recognized as the homepage. One way is simply to rename it to
default.htm. or, tell Dreamweaver the name of the file. Without a home page
Dreamweaver has no starting point from which to build the tree. All files in the
web site are relative to the location of the home page so it needs to know where
the home page is. Click the Define Sites button. Select the Jimbaran Bay Bistro
Site if it isnt already highlighted.

11

8. Click Edit to bring up the Site Definition dialog box.

9. Weve already seen this dialog box when we were entering Local Info. This time,
go to the Category list on the left side of the dialog box and select Site Map
Layout.

10. Now you will see the right side of the dialog box change to fields that have to do
with Site layout. The first field under the header Site Map Layout (circled in red)
is the text field called Home Page. To the right of the text field is a folder icon.
Click on the folder icon to display the Choose Home Page dialog box.
11. It should open to the folder you specified as the Local Root folder,
(C:\DW_WorkShop\Bistro_WebSite\). If it doesnt, then navigate to that folder.
12. Once youve reached the Local Root folder, you will see all of the files within
that folder. Click on default_BISTRO.htm in the list and then click Open or simply
double click default_BISTRO.htm. The Site Definition box appears again. Notice
that the Home Page field now has the path and file of the Home Page. You will
see other fields displayed: Number of Columns, Column Width, Icon Labels
and Options. Leave these as they are for now.

12

13. Click OK and return to the Define Sites dialog box.

14. Make sure Jimbaran Bay Bistro Site is highlighted and then click Done.
15. We will now be back at the Site window. The window should have two panes.
The right side is the list of files in your Local Folder. The left site should display
the actual site map of your site. If the only file is a home page, thats all it will
show. If there are other files that are linked they will be displayed as well.
Tip: You may see files listed on the right side but they are not in the site map.
In order for them to display in the site map they must be linked to a page that is
directly or indirectly linked to the home page.

13

The site map shows how the pages are linked. If you only see the contents of your
Local Folder, click on the triangle at the lower left of the dialog box to toggle to
the two panes. Or click the Site Map button and select Map and Files.

Your screen should look similar to this:

Notice a few things: The local file Franchise.htm is not in the Site map. Thats
because there is no connection to any of the files that are properly linked in the
Site Map. Except for the Home Page of a web site, all files must be called from
another document. Files that are not called are called Orphaned files. Site Maps
dont just display pages. They can also display graphics or any files contained in a
document. To view these, select the home page icon and then select the Menu
Item View. Then Show Dependent Files. The map will now show links to
graphics files. Place your cursor over the label of one of the icons and you will
see the full path for that file.
Also notice the second item in the second level. Instead of a black label its blue
and there is an icon at the lower right. That tells you that page is actually a link to
another site. Again, place the cursor over the label and youll see the full URL for
that page. If the label is red then that means Dreamweaver cant find the file that
is being called. In that case you will need to edit the html document that calls it
and correct it.
16. Standard Windows Function: If you want one pane to be larger than the other
position the cursor on the border dividing the two panes in the Site window. The
cursor will change to a double arrow. Drag the divider to one side and the width
of the panes will change. Drop it where it suits you.
17. Standard Windows Function: You can also adjust the columns by placing the
cursor on the border between columns and drag it left or right to where you want
it to be. This can be done in many Windows applications.

14

18. We want to only see the Local Site pane now so click on the triangle in the lower
left corner of the window. The Site window should now only be showing the
Local Site pane. Expand the window so that you can see all of the columns in the
Local Site pane. The columns are Local Folder, Notes, Size, Type, Modified
and Checked Out By.
Structuring the Site with the Site Window
You have seen how to view your web site files as a list and in a map. The Site window
allows you to manage the files of your web site as well. Creating a folder structure helps
you to organize your files and so makes it easier to find individual files. You can
organize your files by category or you may want to have all of your HTML documents in
one folder, either in the root folder or a subfolder, and all images in another. We already
did this when we created subfolders for our pictures and sound files. But if we need to
create other folders, we can do that within the Site window. Lets just create an empty
folder so we can go through the process once.
1. Just as with Windows Explorer, any folder you create will be created within the
current folder. For example, if the sub folder Pictures is selected and you create a
new folder, the folder will be inside the Pictures folder. A shortcut to creating a
new folder is to right click the folder in which you want to create the new folder.
You will get a drop down menu. One of the items will be New Folder. Highlight
that and left click. A new unnamed folder appears. (Tip: Many Windows
applications make big use of the right mouse button. Its worth the time to right
click various buttons to see what shortcuts there may be.)
2. We have the subfolders Docs and Pictures already. Give it the name MyFolder.
The folders may be out of order so click on the menu item View and then Refresh
Local. In this case the keyboard shortcut is quicker. (SHIFT F5) The folders will
be alphabetized, as will be the files. (Tip: You can sort lists such as the Site
window by column simply by clicking on the column headers. These headers
are actually buttons that toggle the column in ascending or descending order.)

15

At this point we have our home page displayed as well as the second level pages. If you
look at some of the second level files you will see they have a + sign next to them. The
+ sign means the same as it does in Windows Explorer. It means you can click on it to
expand it and see what items are contained in it. If you click on the + next to
merchandise.htm, you see a list of several image files that it calls. This example is simple
with only a couple of levels but if you had a site with many levels, you would see all of
the levels.

16

Modifying Page Properties

Use the Page Properties dialog box to specify a variety of options for the page. To open
the Page Properties dialog box, choose Modify > Page Properties.

Title specifies the page title that appears in the title bar of the Document window and
most browser windows.
Background Image and Background specify a background image and background color
for the page.
Text and Links define default colors for text, links, visited links, and active links. You
can also control these colors using CSS style sheets, which is beyond the scope of this
workshop.

Note about colors:

Next to each color block you will see something like this: #FFCC33. This is called a
hexadecimal number also referred Base 16. Instead of Base 10, which we use almost
exclusively which includes the numbers: 0 through 9, Base 16 includes the 16 numbers
from 0 to F. What number is F? Think of it as a symbol and not a letter. Counting from
zero in Base 16 goes like this:

17

0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
The Base 10 equivalent is:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15
If you compare them, in Base 16, A=10, B=11, C=12, D=13, E=14 and F=15.
The number #CC3366 can be considered in 3 parts with each part a pair of digits. In this
example, the Red Component is FF, the Green Component is CC and the Blue component
is 33. A computer displays color by mixing the 3 colors Red, Green and Blue. Some of
you may have heard the reference RGB. That stands for Red, Green, and Blue. What
color is #CC3366? It is kind of a maroon color.
The pairs can run from the lowest value: 00 which means that color is not present to FF
which means that color is as intense as possible.
Some examples:
FF0000 is bright pure red.
00FF00 is bright pure green
0000FF is bright pure blue.
Red and blue make purple so CC00CC makes the color purple. Whats the difference
between #990099 and #FF00FF? The higher the number, the lighter it gets. #FF00FF is
the brightest purple where as #990099 is a darker purple. Pairs dont have to have two of
the same numbers. Another variation of purple would be: # 9C008F.
All equal values give you gray with the color #000000 being black and #FFFFFF being
pure white.
Many computer users see numbers like 256, 65536 or 16.7 million when referring to
colors on a computer. Its not coincidence that #FF equals 255 and adding the number 0,
you have 256 different values. And 256 x 256 = 65536 which is considered high color
in Windows and 256 x 256 x 256 = 16.7 (approximately) million which is considered
true color. So your video card can display 16.7 million colors because it can display
256 different shades of red x 256 shades of green x 256 shades of blue.
Left Margin and Top Margin specify the sizes of page margins in the <body> tag, for
Microsoft Internet Explorer only. Netscape Navigator ignores these values, using
Margin Width and Margin Height instead. For best cross-browser results, provide
margin values for both browsers instead of just one browser; fill in all four margin values
instead of just two. To ensure that no margins appear in either browser, set all four values
to 0. Dreamweaver doesn't display page margins in the Document window; to see the
margins, use Preview in Browser.

18

Margin Width and Margin Height specify the sizes of page margins in the <body> tag, for
Netscape Navigator only. Internet Explorer ignores these values, using Left Margin and Top
Margin instead. For best cross-browser results, provide margin values for both browsers instead
of just one browser; fill in all four margin values instead of just two. To ensure no margins in
both browsers, set all four values to 0. Dreamweaver doesn't display page margins in the
Document window; use Preview in Browser to see the margins.
Document Encoding specifies the encoding used for characters in the document. For English and
Western European languages, choose Western, which is the default.
A Tracing Image is used as a guide to re-create a page design that was mocked up in a graphics
application. A tracing image is a JPEG, GIF, or PNG image that is placed in the background of
the Document window. You can hide the image, set its opacity, and change its position.
The tracing image is visible only in Dreamweaver. It is never visible when you view the page in
a browser. When the tracing image is visible, the page's real background image and color are not
visible in the Document window; however, the background image and color will be visible when
the page is viewed in a browser.
Image Transparency determines the opacity of the tracing image, from completely transparent
to completely opaque.
Document Folder displays the folder in which the current document is saved, if it has been
saved.
Site Folder displays the path of the local root folder for the site in which the current document is
saved, if it has been saved.

This is the Page Properties box with the changes. There might be a slight difference in
the values between this image and yours.

When you have the values you want, then click OK to close the box and apply the
changes. If you click Apply, youll see the changes but remain in the box to make further
changes if needed.

19

Working with Tables

Using Tables for Page Layout

Overview
In this section we will learn how to create and edit tables that will allow you more control
over the layout of your page. Without tables you are limited to what HTML allows. For
example there is no way to maintain specific margins when using text. It is determined by
the browser window that varies from user to user.
By using columns and rows, you can place text and graphics precisely where you want
them to be and eliminate your page elements changing position if the size of the viewers
browser changes.

Objectives
1. Create tables: Create a table and use it to control your page layout.
2. Modify a table: Modify an existing table by inserting and removing table rows
and columns and splitting and joining table cells.
3. Use tables for text formatting: Format characters and paragraphs within table
cells, rows and columns.
4. Set table attributes: Learn how to set column widths and change settings for
table cells.
5. Use tables for page layout: Modify table to arrange page elements more
precisely.

20

Creating a New Table

We are going to create a new table and specify its initial settings. Use the Objects panel or the
Insert menu to create a new table. We will create the main table using Standard View and an
embedded table in Layout View.

1. Do one of the following:

Go to the Object palette

and select Common
from the drop down list.
At the bottom of the
Common panel you will
see View with two
buttons below it. The
left button is Standard
View and the right
button is Layout View.
Select the Standard
View. It is circled in the
image to the right.

In the Document window,

place the insertion point
where you want the table to
appear, then click the Table
button on the Common
category of the Objects
panel.

Choose

Insert > Table

21

Drag the Table button from the Objects panel to the desired insertion
point on the page.
The Insert Table dialog box appears

2. In the dialog box, accept the current values or type new values.
Note: The Insert Table dialog box retains the values of the most recent settings
you entered for a table.

3. In the Rows field, specify the number of table rows. For this exercise, enter 1.
4. In the Columns field, specify the number of table columns. Enter 1.
5. In the Cell Padding field, specify the number of pixels between the cell content
and the cell boundary (or wall). The default padding is 1 pixel. Enter 0 for no
padding.
6. In the Cell Spacing field, specify the number of pixels between each table cell.
The default spacing is 2 pixels. Enter 0 for no spacing.
7. In the Width field, specify the width of the table as a number of pixels or as a
percentage of the browser window. If you are using the table to maintain your
layout, youll want to specify the Width as pixels. A common value is 600. If the
width has some other value, change it to 600 pixels.
8. In the Border field, specify the pixel width of the table border. Enter 0 if you
don't want a border. For this table set Border to 0.
9. Click OK to create the table.
10. Save the document as table.htm.
Using Standard View, we have now created a single cell table that will contain

22

all of the items that will be used on this page. Admittedly it doesnt look like
much at this point. Its just a wide rectangle with some sizing handles on it. If
you have View>Rulers>Show and View>Rulers>Pixels checked you will see
that the table is 600 pixels wide. You can click on the bottom handle and drag it
down to make the table longer.
Click on the Layout View to see how your table displays. You should see a
rectangular area with a tab that says Layout Table and below that, a ruler that
displays the width of the table. (600 pixels)
Now we will insert a table into the single cell table we currently have. A
table contained inside another table is called a nested table.

1. Click on the Insert Table button on the Object palette. Nothing should have
happened. In fact the Insert Table button should be grayed out. Why doesnt it
work? Because you are currently in Layout View and Insert Table is disabled in
Layout View. So, click the Standard View button and then click inside the table.
And try the Insert Button again. This time it works.
You will see another Insert Table dialog box that carries the values of the last
table you created. This table will be different.
2. Enter Rows = 4, Columns=3, Cell Padding = 2, Cell Spacing=3, Width=75.
Change Pixels to Percent and set Border=5

Cell Padding is the number of pixels between the cell content and the cell
boundary (or wall). Cell Spacing is the number of pixels between each table cell.
3. Click OK and you will see a 4 row by 3 column table.
4. Now we are going to modify the table a bit. First, notice that it is on the left side
of the larger table and we want it centered. To do that we need the Property
Inspector. It should be present and the new table should be selected. If the
Property Inspector is not visible, go to Window>Properties. It should be
checked.

23

Set the values in the Property Inspector to match those below:

If you cant tell what colors I chose for the BG (Background) Color and Brdr
(Border) Color, just type in the numbers next to the color boxes. If you type them
correctly the BG Color will be a bright yellow and the Border Color will be a rich
blue.
Notice that the table is now named MyTable, Aligned in the Center and the
border is now 8 pixels wide. We arent using a Background image but if we were,
we could click on the Browse button (the folder icon) and locate the file we want
to use. The 4 buttons under the Cols field are from left to right and top to bottom:
Clear Row Widths, Clear Row Heights, Convert Table Widths to Pixels and
Convert Table Widths to Percent.
5. Now we have a 4 Row, 3 Column yellow table with blue borders that is centered
in the larger table. Lets make a couple more changes. We want the top row to
contain the title and we only need one cell, not 3. So we will Merge the top three
columns into one. Ctrl click each of the top 3 columns. With the mouse in one of
the selected cells, right click. Then select Table>Merge Cells. Now the table has a
single cell that stretches across the table.
6. The cursor should be in the top row. Notice that the Property Inspector has
changed to reflect the new selected object, the Table cell. This window gives you
control over the text, graphics, links or anything you might insert into the cell. We
only want to make a title so with the cursor in the top row, type My New Table.
7. Now the words My New Table are in the table but we want them centered so
we will do exactly the same thing as we would in a word editing program;
Highlight the text and click the Center button.
8. Its a good idea to assign fonts to your content rather than go with the default font.
That way you dont have to worry that your layout will break if someone has a
different default font. Click the arrow next the words default font and select the
first choice. Why didnt the title change? Because it needs to be selected, just like
text does in a word processing program. Select the title and change the font. Now
it looks different. You can change the size and color of the text if you choose to.
Again, I would recommend that you select a font size rather than go with the
defaults. For regular text, size = 2 is good. If the text is a title as it is in this case,
size can be 3 or 4. Also select the format you it to be. It defaults to none. Most of
the time you will use format = paragraph but again this text is the title so make

24

sure it is still selected, click on the Format field and select Heading 1 for the text.
Changing the format of text is the same as it is in a word processing program.
9. Lets merge a couple more cells. This time it will take a column from three rows
and triple the height of the cell. Ctrl-click the right most cells in the 2nd , 3rd and
4th rows. Again with the cursor in the cells, right click, select Table>Merge Cells
Your document should look similar to this:

10. Now lets use the table to help us control layout. We want the large cell to the
right to have an image and we want text to the left of this image. You can use any
picture but dont pick one that is so big it will take up the width of the table.
Remember that the whole page is 600 pixels wide. The table My New Table is
75% of that which means it is 450 pixels wide. The cell itself is about 1/3 of
width of the nested table so it comes to about 150 pixels. Find an image between
150 and 200 pixels wide and insert it into the large cell. I chose an image of the
globe. Its actually smaller than 150 pixels wide. I chose to Align = center so it
stays centered in its cell. I also changed the background color of that cell to white
so it matched the background of the globe. (See the image below to see where the
background color button is.)
11. With an image in place, lets have several lines of text next to the image. First
drag the column to the left so you have a small cell on the left and a larger one in
the middle. Click in the second cell, second row and type: Item Number One.

25

With the cursor still in that cell, click the Align Left Button. Repeat the process
for the next two rows.
12. Finally, find or create a little graphic for the bullet. I just created a 10 x 11 pixel
blue circle. Put the cursor in the first cell in the second row and insert that image,
making sure that the alignment is centered. Repeat for the two rows below and
you should have something that looks like this:

13. Save your work. We have one more step to perform.

14. I have left the borders on so you can easily see the cells that make up the table.
There are times when you dont want people to easily see that you are using a
table. This is one of those times so we need to edit the table. Click inside the
table.
15. Go to Modify>Table>Select Table. There should be a dark box visible around
your table. Make sure that the Property Inspector is visible.
16. Change the value in the field from 8 to 0. Also set cell spacing and cell padding
to 0.
17. Save your work.

26

This is definitely not the prettiest page but if you preview this file in a browser you will
see a simple page with a couple of images and bulleted text along side a larger image.
This is a basic example of how tables can be used to control your layout. Without tables,
you would have no way of displaying multiple lines of text next to an image. Without
tables, there would be no way to keep the bullets lined up properly with the items. Also
by defining the page to be 600 pixels wide, the layout doesnt get changed if the browser
window gets smaller.
This is just a very basic example of using tables and nested tables.

27

Navigation Bar
A navigation bar consists of an image (or set of images) whose display changes based on
the actions of a user. Navigation bars often provide an easy route between pages and files
on a site. Before using the Insert Navigation Bar command, create a set of images for the
display states of each navigation element. (It can be helpful to think of a navigation bar
element as a button, because when clicked, it takes the user to another page.)

A navigation bar element can have four states:

Up: the image that appears when the user hasn't yet clicked or interacted with the
element. For example, the element in this state looks like it hasn't been clicked.

Over: the image that appears when the pointer is moved over the Up image. The
element's appearance changes (for example, it may get lighter) to let users know they
can interact with it.

Down: the image that appears after the element has been clicked. For example, when a
user clicks an element, a new page loads and the navigation bar is still displayed, but
the clicked element is darkened to show that it's been selected.
Over While Down: the image that appears when the pointer is rolled over the Down
image after the element has been clicked. For example, the element may appear
dimmed or gray. You can use this state as a visual clue to users that this element cannot
be clicked again while they are in this part of the site.
You don't have to include navigation bar images for all four of these states; for example,
you may just want Up and Down states.
You can create a navigation bar, copy it to other pages in your site, use it with frames,
and edit the page behaviors to show different states as pages are accessed.*

28

*Reprinted from Dreamweaver on-line help

To Insert the Navigation Bar
From the Toolbar, select Insert, Interactive Images, Navigation Bar OR,
From the Object Palette, Common Category, select this icon

This window will appear:

Add
Elements

Element
Name
Box

Image
Name

29

Insert Navagation Bar Window

1. Click in the Element Name box, type a name for a navigation bar elementfor
example, Menu. Each element corresponds to a button with a set of up to four image
state options (see previous explanation). The Element name will appear in the Nav Bar
Elements list. The arrow buttons to can be used to arrange elements in the navigation bar.
2. Begin to define image state options for this element (you must select an Up image;
other image states are optional): In the Up Image field, click Browse to select the image
to display initially.
o Over Image field: click Browse to select the image to display when the user
moves the pointer over the element when the Up image is showing.
o Down Image field: click Browse to select the image to display after the user has
clicked the element.

o Over While Down Image field: click Browse to select the image to display
when the user moves the pointer over the Down image.
o When Clicked, Go To URL field: select a location in which the linked file will
open by doing one of the following:
o Select Main Window to open the file in the same window.
o Select a frame in which to open the file.
3

Define image loading options:

o Preload Images: downloads the images when the page loads. If this option
isn't selected, there may be a delay when the user moves the pointer over the
rollover image.
o Show"Down Image" Initially: displays the selected element in its Down state
when the page is displayed instead of its default Up state. An asterisk appears
after the element in the Nav Bar Elements list when this option is checked.

Insert options:
o Determine whether to insert the navigation bar elements vertically or
horizontally in the document
o Display bar elements in table format

To continue adding elements, click the Plus (+) button , then follow steps 2 through 4
to repeat until you've defined all elements.

Click OK when complete

30

Modifying the navigation bar

After creating a navigation bar for a document, you can add images to or remove them
from by using the Modify Navigation Bar command. You can use this command to
change an image or set of images, to change which file opens when an element is clicked,
to select a different window or frame in which to open a file, and to reorder the images.
1 From the Menu Bar, select Modify > Navigation Bar.
2 In the Nav Bar Elements list, select the element you want to edit.
3 Make corrections, then click OK.

31

32