1. This presentation will go over the different property menu
for different objects.
After this presentation you should be aware of you
objects’ properties, and how to alter them to your
specifications
Please open Dreamweaver and
Create a new HTML document

2. Each object has different properties and
options.
The Property menu will change depending on
what object you have selected.

3. This is the body
(It’s the only thing we have so it’s
automatically selected)
And these are its properties. Lets take a closer look…

4. 1
2
3
4 5
6 7
1. Format: select the format of your text (Heading, Paragraph, etc.)
2. Font: select your font (only web safe fonts available)
3. Style: select the style of your text (we’ll go further into styles later)
4. Size: the size of your text
5. Color options: select the color of your text (you select it from the color picker
or enter the color’s code if you know it)
6. Standard text options: Very similar to Word (notice the indent & outdent)
7. Link options: Options for linking your text (we’ll go further into this later)

5. Now lets add a Table to our page.
The quickest way to do this is with the
Insert Toolbar towards the top of your
document

6. In the Insert Toolbar, look under the Common tab
This is the button for Inserting a Table
(Notice it looks let a table, Genius!)

7. This window will pop up so you can
setup up your table how you want it.
Please setup your table
with 2 rows & 2
columns.
Don’t worry about the
other options, we can
edit those later.

8. Now you have a table…
And these are its properties. Lets take a closer look…

9. 1 2 3 4 5
6 7
1. Table ID: Name your table, to help keep your work organized
2. Rows & Columns: Change the layout of your table
3. Width: select width of your table (you can choose to have the width be a certain amount of pixels, or a
percentage of space in the window)
4. Cell Padding & Cell Spacing: The space between your cell and what’s inside & the space between cells (these
are internet terms you should know by now)
5. Align: Choose how you want your table aligned on your document
6. Border: choose the size of the border in your table. If you want it invisible choose Zero.
7. Class: Choose a certain style you want for your table (you don’t need to mess with this now)
8. Row & Columns Heights/Widths: Alter the widths & heights of your Rows & Columns. This can also be done by
dragging the table with your mouse (notice the widths are displayed on your table)
9. Background Color/Image & Border color: Choose the table’s background color or select and image. Then
choose a color for the border
8 9

10. Now Select the top left Cell.
You can do this by clicking in the cell.
Oh PS.
you can select objects by choosing them
from the bottom of your document window.
Let me show you…

11. You can simply select things by
choosing them from this bar.
Click here to select the body
Click here to select the table
Click here to select a row within the table
Click here to select a cell within the table
This is good for when your
websites get more complex
and cluttered

12. Now, where were we?
Ah that’s right, we were selecting the top
left cell. If you haven’t done that already, do
that now.

13. This is your cell…
You can tell which cell is
selected because it has a black
border highlighting it or your
cursor is inside it
And these are it’s properties…

14. By now these properties and options should begin to look
familiar, so I won’t go over all of them
However, there are some properties unique to a cell, so be
sure to familiarize yourself with them.
Now lets select the top 2 cells.
You can do this by clicking and dragging over them in the
document window, or by selecting them from the bottom of
the window like we discussed earlier.

15. You should have the top
row selected like this.
Now lets merge these 2
cells into 1
Click here to Merge Cells.
This option will merge whatever cells you have selected.

16. Now click and drag your
banner into the top cell
And
Drag your Navbar into your
left cell
Remember to add
your Alternate text

17. Your table will resize itself
to make room for the
images, and your layout
may be altered.
Don’t panic,
this can be fixed
You can click and drag the cell borders to change their size.
Go ahead and make sure the left cell is snug around the Navbar.
This way we have the whole right cell available for adding other
information.

18. You can select an image and alter its specific
properties in the Properties Window below.
But we’ll get into those properties and
options later. Lets move on

19. Select the body, and then click the Page Properties
button to see the properties for the entire page.

20. This menu has
many options
which we will go
over at later times.
For right now lets
focus on the
Appearance
category
In the appearance category you can choose options for your entire
page. For this practice site please choose a background color that
fits the color scheme.
If you choose the same color as the banner & navbar
borders, they won’t stand out.

21. Your webpage
should look similar
to this…
But we ain’t
done yet!
We’ll keep working later, but for right now
make sure you save your work.
Remember, save it as yourname_practicesite and make sure it’s in
your practice site folder