DIGITAL
ARTS 1
Mr. Skocko • Room 246 •
593-5446 • Digital Arts Home
Page Layout
HTML pages use tables to position images and information. Here you'll set up a simple liquid table to position your image in the center of the page.
Double-click on 01.html in the Site Window (working through the Site Window guarantees that Dreamweaver will maintain all your images and links)
Your untitled HTML document opens
Notice that the Property Inspector (just below your document) is now active
Highlight Untitled Document
Give your page a descriptive title
Hit Return and your document is now titled
Notice the asterisk (*) in the title bar?
That's Dreamweaver's way of reminding you that your changes have not been
saved yet
Press Command-S to save your changes and the asterisk
disappears
(The Command key is also the Apple key)
Press Command-W to close this document
Yes, you could have navigated to File > Save and File > Close if you wanted (but why go to all that extra work?)
Double-click on 02.html in your Site Window
Don't jump ahead, we're going to do something different with this file
Click on the Insert Table icon in the Insert
Panel
(If your icon is disabled, scroll down)
If your Insert Table icon is disabled, click on the Layout tab
Select Standard View and click on the Common tab to Insert Table
Yes, you can rely on the main menu to accomplish these same tasks but it is far more efficient to make use of the tools at hand
The Insert Table dialog box opens with the settings of the last table used (your settings will probably differ from mine)
Change the settings to match those shown below
Important: Make sure to select Percent rather than Pixels
Hit Return (or click OK)
A table is inserted into your HTML document but it isn't occupying 100% of the width
Press Command-J or navigate to Modify > Page Properties...
The Page Properties dialog box opens
We will be setting the margins to zero
Click in the Left Margin text box and type a zero (0)
Type a zero in each of the margin settings and hit Return
Now your table is 100% of the page width
Notice that when the table is selected (highlighted with thick black line) the Property Inspector (below the document window) changes -- it, like the Options Bar in Photoshop, is contextual and changes depending on what is currently selected
Click away from the table in the document window to see how the Property Inspector now offers text formatting
At the bottom of the document window are tags that you'll find extremely helpful
If you try and reselect the table you may find that your cursor changes in a number of ways...
See the following three images
It's best to position the cursor inside the table (it turns into the I-beam) and click
Notice the document tag and the Property Inspector prior to clicking (above)
After clicking within the table note the changes
The easiest way to select the table is to click on the <table> tag (see below)
The table is selected and the Property Inspector changes once again (get used to this great feature)
With the table selected, click in the Height text box
Type 100 and...
Change Pixels to Percent (%)
Your table now occupies 100% of the document window
Does your table look like this instead?
You forgot to change Pixels to Percent (%)
Click in the center of your table
Your cursor is flashing against the left side of the table (see the I-beam below if you don't see yours)
We fix that by changing the Horizontal Alignment
Change the setting from Default to Center
Your insertion point is now flashing in the center of your document window
But browsers need a bit more direction
Change the Vertical setting to Middle
Now, instead of saving your work, navigate to File > Save as Template...
The Save as Template dialog box opens
Name your file 100_pct_liquid and hit Return
Your document is no longer an HTML file, it's a .dwt (Dreamweaver Template)
Just in case you don't see it, your insertion point is now flashing just to the left of the I-Beam (shown below)
Notice the <body> tag (you're not in the table
Click in the center of the document window and notice how the tag changes
Try and close your template and Dreamweaver throws up a warning
It's a good idea to pay attention to these warnings
And DO NOT check that don't warn me again box
Since Dreamweaver seems to think it's a good idea to have editable regions in a template, how 'bout we cancel and see what happens?
Hey, Dreamweaver even takes pity on us for being so clueless and offers directions on how to add an editable region
We select...
And the New Editable Region dialog box opens
Name it image and hit Return
Now we have an editable region
Notice the tags and the Property Inspector
Save and close the template
A new folder has been created (ignore the offending capital T in the folder name that Dreamweaver created)
Click on the twirlie next to the folder name to reveal your template
Congratulations! You've created a template for a liquid table that will center all your images in any browser window. Now to fix those other pages by applying the template you just created.