Specifying Layout Width


In Layout mode, you can control the width of tables in two ways: You can set a fixed width, which is the default, or you can use Autostretch, which causes the cells to change width depending on the width of the browser. In this exercise, you will control the width by applying Autostretch.

1.

In the events.html document, select the top text cell just below the yoga_sangha-title.jpg graphic. Click the Autostretch option in the Width area on the Property inspector.

The Choose Spacer Image dialog box appears if a spacer image is not associated with your site.

In the dialog box that appears, choose Use an existing spacer image file, click OK, and locate spacer.gif in the Lesson_06_Tables/Images folder. The spacer file location will be saved with your preferences. To change or remove the spacer image, choose Dreamweaver > Preferences (Macintosh) or Edit > Preferences (Windows) and select the Layout Mode category and adjust the spacer image settings for the Yoga Sangha site.

Note

The Choose Spacer Image dialog box includes an option to create a spacer image file. If you are working on a site for which there is no existing spacer image, you should choose this option and click OK to navigate to the directory in which you want Dreamweaver to save the spacer image. The Images folder is the best place.

The Autostretch column is displayed in the table widths bar as a zigzag lineyou might have to scroll down to the bottom of the document to see it. Dreamweaver inserts spacer images to control the layout of the fixed-width columns when you select Autostretch. A spacer image controls the spacing in the layout, but is not visible in the browser window.

Tip

You can also click a column's menu on the table width bar and choose Make Column Autostretch to apply the Autostretch option.

2.

Save and view the page in the browser; then change the width of the browser.

Notice that the column stretches as you change the width. When you select a column to Autostretch, you cause all cells in that column to Autostretch. Use the white guides on the page to determine whether another cell is within the column you selected.

If you choose not to use spacer images, columns change size or even disappear if they do not hold content. You can insert and remove spacer images yourself or let Dreamweaver add them automatically when it creates an Autostretch column. To insert and remove these images yourself, choose one of the following options from the column-header menu:

  • Add Spacer Image: The spacer image is inserted into the column. You do not see the spacer image, but the column might shift slightly.

  • Remove Spacer Image: The spacer image is removed, and the column might shift.

  • Remove All Spacer Images: Your whole layout might shift slightly or dramatically, depending on your content. If you do not have content in some columns, they might disappear.

The column menus are contextual and change depending on which column you select. All three preceding options are not available in all columns.

You can close the events.html document.




Macromedia Dreamweaver 8(c) Training from the Source
Macromedia Dreamweaver 8: Training from the Source
ISBN: 0321336267
EAN: 2147483647
Year: 2006
Pages: 326

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net