Step 9: Resizing the Table
As you may have noticed, the table Dreamweaver created for
you when you created your first cell, extends to the bottom and
the edge of your document window.
- Move your cursor over the green border at the right of the
table.
- When the cursor changes to the resize cursor, click and
drag to the left to resize.
- Repeat for the bottom of the table.
View the Movie Below:
Step 10: Creating an
Autostretch Column
Another popular technique is to create columns that "grow" or
stretch as the browser window stretches. Because you, as the
designer, can't control how everyone will view your website,
this is a good technique to help control how your content is
displayed.
In this example, we have our navigation menu on the left
side. Let's say we wanted the main part of the site to always be
centered in its column. We would need to create a column that
stretches ONLY the right side of the web page leaving the menu
area a fixed size.
- Click the drop down arrow in top of the cell for the
graphics and logo column.
- Select Make Column Autostretch. This now makes the column
"grow" or stretch with the browser by making it a percentage
(100%) width while the other columns remain a fixed width.
- In the
Choose Spacer Image dialog window that opens, select the
default option, Create a spacer image file.
- Click OK
- Save the spacer image to your images file.
- Test your page by pressing F12.
Click here to view.
Try resizing the window. As you resize the window, the
content area of the page stretches with your browser window
while the menu area remains fixed.
----------
You now have a page that stretches with the browser window
and hopefully are comforable using Layout View in Dreamweaver 4.
It's a great feature that may at first seem awkward but I'm
sure after using it a couple of times you'll begin to not only
get used to it but really start seeing how this can help you
create more advanced layouts in a shorter period of time.
|
