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 andCreate a new HTML document

Each object has different properties and options.

The Property menu will change depending on what object you have selected.

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…

12

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)

Now lets add a Table to our page.

The quickest way to do this is with theInsert Toolbar towards the top of your document

In the Insert Toolbar, look under the Common tab

This is the button for Inserting a Table(Notice it looks let a table, Genius!)

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.

Now you have a table…

And these are its properties. Lets take a closer look…

1 2 3 4 56 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

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…

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

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.

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…

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.

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.

Now click and drag your banner into the top cell

And

Drag your Navbar into your left cell

Remember to add

your Alternate text

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.

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

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

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.

Your webpage should look similar to this…

But we ain’t done yet!

We’ll keep working later, but for right nowmake sure you save your work.

Remember, save it as yourname_practicesite and make sure it’s in your practice site folder