Mac Lab | Dreamweaver Tutorials

Creating a Liquid Table

In this lesson you will learn how to make your image stay centered in any browser window.

From the Site Window, open index.html, select all (Command-A)
Press Delete to clear the document
Click on the Insert Table icon in the Objects Panel
The Insert Table dialog box opens

Note: The settings shown (below) are from the last table Dreamweaver created on my computer—your dialog box will most likely look different
Change the settings as shown below
Make sure you have Percent (not Pixels) selected from the pull-down menu and click OK
Your index.html should look like:
Those pesky default browser offsets may cause trouble so we'll get rid of them by...
We'll get back to the Page Properties dialog box in future lessons

For now, just take a look at it

Starting to see the possibilities?
Click in the Left Margin text box and type 0 (zero)
Press Tab and your cursor will jump to the next text box (Margin Width)

Type 0, press Tab, 0, Tab, 0

Your dialog box should look exactly like:

If not, make corrections—if so, Click OK
Now your table will hug the edges of the document window
If the table is still selected, the Property Inspector will look like:

If yours looks different, you must reselect the table before we can change the Height settings
Type 100 in the text box next to the H (for Height) and change the menu settings from pixels to % (Percent)

Note: For some unfathomable reason, many students seem to have trouble changing that last setting to % and end up with a table height of 100 pixels. Don't let this happen to you!
If you've successfully followed so far your document will have scroll bars (as is shown below) or some other odd feature that doesn't resemble a perfect 100% by 100% table occupying the document window

This is due to a glitch in Dreamweaver

Save your file (Command-S) and Close the window (Command-W)
Open index.html via the Site Window and your document will now reflect the settings you've made

See the flashing vertical line along the left side of your document?
That is your insertion point (yes, sitting outside of our table that takes up 100% of the document window—go figure)

Note: The arrow in the lower left corner of the document (above) points to the body tag (<body>)

     Move your cursor over the tag to see what happens
     Click on it
     Did you notice how the Property Inspector changed?

These tags come in handy when making certain selections
More on that in another lesson
Click somewhere inside the document to move your insertion point within the table

The Table Data tag (<td>) will be bold
Just in case you don't see it, your insertion point is now flashing just to the left of the I-Beam (shown below)
Click on the Align Center icon in the Property Inspector and your insertion point moves to the center of the document
Change the settings of the Horizontal and Vertical alignment to Center and Middle respectively (as shown below)

Overkill? Perhaps, but browsers are tricky to control
The next Property Inspector settings require the table to be selected first

Rather than fumbling at the edge of the document, trying to find the edge of the table, just click on its Tag (as shown in the lower left corner of the document window below)

Click on <table> and the table is selected

The Property Inspector is contextual and immediately changes to reflect the properties of the selected object
Change the Align setting from Default to Center
With the insertion point at dead center, insert a rollover image as you learned to do on this page

Yes, set the link to about_this_site.html (That's your only other page so far!)
Now your index.html page should preview in browser exactly as shown in the movie below

(Of course you will have a different image)

CLICK ARROW TO PLAY MOVIE

Try resizing your browser window to see how the image stays centered

Congratulations! You've learned how to build your first liquid table in an HTML document.

Use the rollover (below) to return to the index page