Home > Articles > Graphics & Web Design > Dreamweaver & Flash

Designing Your Dreamweaver MX Page Layout Using Tables

  • Print
  • + Share This
Creating intricate designs using tables used to be difficult and confusing. Dreamweaver ended all that confusion; now you can use table layout view to draw tables and table cells on the Web page, creating the page design you want.
This chapter is from the book

In the last hour, "Displaying Data with Tables," you explored some of the properties of tables and table cells. You used tables in Web pages in the same way you might use tables in a spreadsheet or a word processing application— to present data in an organized way. In this hour, you will apply more properties and new commands, using tables to aid Web page layout.

NOTE

Page layout refers to designing the way the page will look when viewed in the browser. You position text, menus, and other page elements in an efficient and attractive way.

Tables give Web developers the ability to make page elements appear in a specific place on the screen. Dreamweaver enables you to work in Layout view so you can draw table elements directly onto the Document window. This makes it easy to create tables for page layout.

In this hour, you will learn

  • How to use Dreamweaver's Layout view

  • How to merge and split table cells

  • How to align the contents of table cells

  • How to nest a table within a table cell

  • How to turn a table into a group of layers

Using Layout View

Traditionally, designing tables for page layout has been a complicated task. Making changes or creating the perfect number of cells required Web developers to merge, split, and span various rows and columns to get pages to look the way they wanted them to. Dreamweaver MX includes a Layout view, enabling you to easily draw, move, and edit table cells.

To turn on Layout view, select the Layout View button on the Layout view tab of the Insert bar, shown in Figure 12.1. When you turn on Layout view, the two layout buttons on the Insert bar become active. One of these buttons draws a layout table; the other button draws an individual layout cell (a table cell).

Figure 12.1 You select Layout view in the Layout tab of the Insert bar. You can go back and forth between the Layout and Standard views.

Adding a Layout Table and Layout Cells

Dreamweaver's Layout view enables you to draw your design in table cells directly onto the Document window. Create areas for content, menus, and other elements of a Web page by selecting the Draw Layout Cell command and drawing cells for each page element.

TIP

Design for a specific screen resolution by first selecting a resolution from the Window Size drop-down menu in Dreamweaver's status bar.

To create a page layout

  1. Select the Layout View button in the Insert bar.

  2. Select the Draw Layout Cell button in the Insert bar.

  3. Draw cells in the Document window for page elements, as shown in Figure 12.2. A layout table is automatically created to hold the layout cells.

  4. Figure 12.2 In Layout View, you can draw table cells in the Document window. The cells are contained within a layout table.

  5. When you place your cursor over the edges of a layout table cell, the outline of the cell changes from dotted blue to solid red. This is when you can click the cell to select it. A selected cell appears as solid blue with resize handles visible. Move cells by selecting and dragging them.

  6. Resize cells by dragging the resize handles at the corners and sides of the cells.

  7. Resize the table that contains the cells by dragging the resize handles at the corners and sides of the table.

TIP

To create multiple layout cells without having to click on the Draw Layout Cell button every time, hold down the Ctrl key in Windows and the Command key on the Mac.

To quickly select a cell to edit its properties, Ctrl-click (Command-click on the Mac) on the cell. The Property inspector, shown in Figure 12.3, presents the width, height, background color, horizontal and vertical alignment, and wrapping properties. These properties are exactly the same table cell properties that you learned about last hour. There's one additional property, Autostretch, which is unique to layout tables.

Figure 12.3 In Layout mode, the Property inspector displays layout cell properties.

Stretching Your Content to Fit the Page

Autostretch enables a column to stretch to fill all of the available space in the browser window. No matter what size the browser window is, the table will span the entire window. When you turn on Autostretch for a specific cell, all of the cells in that column will be stretched. This setting is particularly useful for cells that contain the main content of the page. The menus can stay the same width, but the content can stretch to take up all the available space.

Dreamweaver will automatically add spacer images to your table cells to make sure they remain the size that you intend in all browsers. The spacer image trick is an old trick used by Web developers to ensure that table cells don't collapse. A transparent one-pixel GIF is stretched to a specific width. This image is not visible in the browser. The GIF maintains the width of all the cells that are not in the autostretched column. If you do not add a spacer image, any columns without an image to hold their size will collapse.

To turn on Autostretch

  1. Select a cell by Ctrl-clicking it.

  2. Select the Autostretch radio button in the Property inspector.

  3. The Choose Spacer Image dialog box appears, as shown in Figure 12.4. You have three choices:

    • Create a spacer image file: Dreamweaver creates an invisible one-pixel GIF image, adds it to the top cell of each column, and stretches it to the column width. When you select this option, Dreamweaver asks you where you'd like to store the spacer.gif image that Dreamweaver creates.

    • Use an existing spacer image file: If you've already created a spacer image, select this option. Dreamweaver asks you to navigate to where the image is stored.

    • Don't use spacer images for Autostretch tables: If you select this option, -Dreamweaver warns you that your cells may collapse and not maintain the widths that you have set.

Figure 12.4 The Choose Spacer Image dialog box enables you to choose what spacer you use when you turn on Autostretch.

You can also apply the Autostretch command for an entire column by selecting the drop-down menu in the column heading, shown in Figure 12.5. Each column heading displays the width of the column in pixels. You can also simply add a spacer image to the column (or remove it from the column) by selecting the appropriate commands from this menu. When a column has a spacer image added, the line at the top of the column appears thicker. When a column is set to autostretch, a squiggly line appears instead of the column width.

Figure 12.5 Use the drop-down menu at the top of a layout table column to turn on Autostretch for a table column.

You can set a spacer image for a site in Dreamweaver preferences. After you have set a spacer image for the site, Dreamweaver no longer prompts you to create or choose a spacer image; the image is simply added. Create or select a spacer image for an entire site by opening the Layout View category of Dreamweaver preferences, as shown in Figure 12.6. Note that you can also change the colors in which layout objects appear in Dreamweaver and whether or not spacer images are automatically inserted in this preferences category.

Figure 12.6 Set a spacer image for an entire site in the Layout View category of Dreamweaver preferences.

CAUTION

Dreamweaver adds an additional row at the bottom of your table for the spacer images. Do not remove this row.

  • + Share This
  • 🔖 Save To Your Account

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020