• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Lesson 4. Elements of Page Design > Layout Width and Spacer Images

Layout Width and Spacer Images

In layout view, you can control the width of tables in two ways: by setting a fixed, width, which is the default; or by using Autostretch, which causes the cells to change width depending on the width of the browser. In this exercise, you will apply Autostretch and learn about spacer images.

In the foghorns.html document, select the top text cell just below the foghorn_title.gif graphic. Click Autostretch in the Property inspector.

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

If the dialog box appears, choose Use an Existing Spacer Image File click OK and locate spacer.gif in the Lesson_04_Tables/Images folder. The spacer file location will be saved in your preferences. Choose Edit > Preferences > Layout View to change or remove the spacer image.


The dialog box includes an option to create a spacer-image file. If you are working on a site for which there is not an existing spacer image that you have created, you should choose this option and click OK to navigate to the directory where you want Dreamweaver to save the spacer image. The Images folder is the best place.

The Autostretch column is displayed in the table tab as a zigzagged line. 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.


You can also click a column header's drop-down menu and choose Make Column Autostretch in order to apply the Autostretch option.

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've 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 will 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-header menu is contextual and will change depending on which column you select. All three options above will not be available in all columns.

You've completed a page by using layout view. Next, you'll work in standard view to create tables. You can close the foghorns.html document.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint