7.12 Tables Tutorial

   

In this tutorial, you'll learn how to use Dreamweaver's Layout mode to build a page for the Cosmopolitan Farmer Web site. You'll also practice adding tables using the Insert bar's Table object and gain experience with tracing images and Library elements.

7.12.1 Getting Started

Before you begin building the page, download the tutorial files. As always, you'll find them at www.sawmac.com/dwmx2004/ ; click the Tutorials link to go to the tutorials page. Under Tables Tutorial, click either Windows or Macintosh, depending on the kind of computer you're using.

When the files have downloaded and decompressed, you should have a folder named DWTables on your computer, containing the Web pages and graphics needed for this tutorial. If you're having difficulties, the Web site contains detailed instructions for downloading the files you'll be using with this book.

1. In Dreamweaver, choose Site Manage Sites.

   The Manage Sites window appears.

2. Click the New button and select Site from the small pop-up menu.

   The Site Definition window appears. Make sure the Basic tab is selected.

3. Type Tables Tutorial in the site name field. Click Next .

   This is the name that Dreamweaver will use while you are working on this tutorial.

4. Select the "No, I do not want to use server technology" option and click Next.

   In this tutorial, you'll be building a basic Web page. (A "server technology" is a far more complex, database-driven feature, as described in Part VI of this book.)

   In the next steps, you'll tell Dreamweaver how you want to work on the files in your site and where you store those files. In this example, you'll use the folder you downloaded from this book's Web site. (In other situations, you'll choose or create a folder of your own.)

5. Click "Edit local copies on my machine."

   As mentioned in Section 16.1, there are several ways to edit files and transfer them to a Web server. You'll be editing these right on your computer.

6. Click the folder icon next to the label "Where on your computer do you want to store your files?"

   The Choose Local Root Folder window opens.

7. Browse to and select the DWTables folder.

   Windows and Macs handle this slightly differently, as described in Section 1.3.1. Selecting the DWTables folder makes it the local root folderthe folder that holds all the files, graphics, and other folders that are part of a single Web site (see Section 1.3).

8. Click Next.

   Next you'll be asked how you want to connect to a remote server, which is the computer (the Web server) that holds your finished Web files and dishes them out to the citizens of the Internet.

9. From the pop-up menu, choose None.

   For this tutorial, you won't be connecting to a Web server. But when building your own sites, you certainly will. For detailed instructions on transferring files to your Web server, see Chapter 16.

10. Click Next.

    A summary of the options you selected appears. If you made a mistake, you can cycle back through the various screens by clicking Back.

11. Click Done to close the Site Definition window, then click Done on the Manage Sites window to close it.

Now you're all set to begin the tutorial.

7.12.2 Creating a New Page and Setting Its Properties

You'll first start by creating a new Web page and setting some of its basic properties.

1. Choose File New.

   The New Document window opens. You'll be creating a basic Web page.

2. Make sure the General tab is selected and, in the Category list, select the Basic Page option is selected.

   You'll be using HTML to create the page, but to keep in line with current standards you'll use the more modern XHTML standard.

3. Select HTML in the Basic Page list and make sure the "Make Document XHTML compliant" box is turned on. Click Create to close the window and create a new, blank document.

   Dreamweaver generates all the XHTML code for the page. Always save a page immediately after creating it.

4. Choose File Save. Save the page as battle.html in the DWTables folder.

   After saving a new file, it's wise to immediately name the page.

5. Select the text "Untitled Document" in the Title field in the document toolbar; type The Battle of the Century .

   If you don't see the Document toolbar (Figure 1-2), choose View Toolbars Document.

   Before you start adding tables to this page, you'll add a background image and color and set a few other page properties.

6. Choose Modify Page Properties.

   The Page Properties window opens (see Figure 7-29).

7. In the Background color box, type #739494; in each of the four margin boxes (Left, Top, Right, and Bottom), type 0.

   This sets a background color for the page as well as eliminating the space that most Web browsers add around the content of a page. Next you'll add a background image that appears as a bar along the left edge of the page.

8. Click the Browse button to the right of the Background image box; navigate to the images_global folder and select the file bg_sidebar.gif .

   The Page Properties window should now look like Figure 7-29.

9. Click OK to close the Page Properties window and apply these changes.

   Whoops! Instead of a single bar along the left edge of the page, there are several vertical stripes filling the page. This isn't what you want. By default, a background image will tile repeatedly both vertically and horizontally. But with Cascading Style Sheets, you can overcome this limitation and control how a background image tiles. In this case, you want the image to tile only vertically (that is just along the left edge) and not horizontally across the page. You can do this quickly with Dreamweaver MX 2004's new Relevant CSS panel.

The Page Properties window lets you set global properties for a page like link color, text color background images and margins.

10. Make sure the Tag inspector is open (Window Tag inspector) and click the Relevant CSS tab to display the panel (see Figure 7-30).

    Dreamweaver MX 2004 now creates a CSS style whenever you apply properties to a page. The tag style (see Section 6.1.3) redefines how the <body> tag is formatted. You can modify this style as you would any other CSS style (see Section 6.4.1 for more on editing CSS styles.) You'll see the two background properties you set listed at the top of the list (see Figure 7-30).

    If you don't see this listing of properties, there are two possible causes: first, the body tag may not be selected. To do so, just click <body> in the tag selector (Section 1.2.2) at the bottom of the document window. Second, make sure the A Z button is turned on, as shown in Figure 7-30, which presents an alphabetical listing of the CSS properties for the particular style.

NOTE

When you use the Page Properties window, Dreamweaver adds a new body tag style in an internal style sheet in the page. You may prefer to put all of your styles in an external style sheet (Section 6.1.2). If that's the case, you can skip the Page Properties window and just create a new tag style for the <body> tag in an external style sheet as described in Section 6.2.

11. From the pop-up menu to the right of the Background Repeat property, select "repeat-y" (see Figure 7-30).

    Notice that the bar now tiles only on the left edge of the page creating a nice continuous stripe exactly as planned.

12. Choose File Save to save your changes.

    Now you're ready to start building your layout.

The Relevant CSS panel is one way to edit a CSS style. The properties for the style selected in the top half of the panel (in this case the <body> tag) appear and are editable in the bottom list of properties.

7.12.3 Using a Tracing Image

In this tutorial, you'll be building a news page for the National Exasperater Web site. To get a taste of the different table-building methods Dreamweaver offers, you'll use both the Layout mode and the Standard table mode. In this part of the tutorial you'll use a tracing image and the Layout mode to draw the table design for the banner of the page.

1. Choose Modify Page Properties.

   The Page Properties window opens.

2. Select the Tracing Image category and click the browse button.

   The Select Image Source dialog box appears.

3. In the DWTables folder, double-click the file called tracing.gif .

   It's a GIF image of the design for this page's banner.

4. Move the Page Properties window so that you can see the document window underneath it, and then click Apply.

   You should see the graphic appear in the document window (see Figure 7-31).

You can use the Page Properties dialog box to change the page's background color, margins, link colors, as well as apply a tracing image to a page. Call it up quickly by pressing Ctrl+J ( -J). (If you think you might find rulers helpful, as shown here, choose View Rulers Show.)

5. Move the Image Transparency slider to the middlearound 50%and click OK to close the Page Properties dialog box.

   The image fades into the background of the page. You've just inserted the tracing image a GIF image that you prepared in some graphics program while brainstorming the design of your site, freed from the constraints of actually having to build the Web site while you played around with visual ideas.

   You'll use this graphic as a pattern for creating the layout of the banner. This image won't show up in a Web browser; it appears only in Dreamweaver.

6. Choose File Save.

Congratulations! You're well on your way to creating a beautiful new Web site. Next, you'll start to add the details.

7.12.4 Building the Banner in Layout Mode

You'll use Dreamweaver's Layout Mode to build one part of a table-based page design.

1. In the Insert bar, click the Layout tab (see Figure 7-3).

   This panel contains useful tools for controlling layout and switching between Dreamweaver's two design viewsStandard and Layout.

2. Click the Layout button.

   Dreamweaver switches to Layout mode.

   When you first switch to this view, the Getting Started in Layout mode window may appear. This window explains how to use the layout tools. If you already get it, turn on "Don't show me this message again," and then click OK.

3. On the Insert bar, click the Layout Table tool button (also shown in Figure 7-3).

   The Layout Table tool lets you draw a table directly in the document window. Once you've drawn the table, you can add cells to it:

4. Starting at the upper-left corner of the tracing image, drag diagonally down and to the right, creating a rectangle around the top banner of the tracing image.

   A light gray box with a green outline appears over the tracing image. The green tab in the upper left corner indicates that this is a Layout Table.

   Unfortunately, Dreamweaver inserts an annoying 15 pixel tall crosshatched area (a gray area on the Mac) that obscures the top part of the tracing image (see Section 7.2.7) and also makes the table you just drew look like it's sitting about 15 pixels below the bottom of the banner. You'll temporarily hide that box next.

5. Choose View Visual Aids Hide All.

   This turns off visual aids that highlight normally invisible elements like image maps and table borders and widths, but which can get in the way with the Layout mode and with tracing images. You'll still see the box with the words Layout Mode at the top of the document, but the other area has disappeared.

6. Select the Layout Cell tool (pictured in Figure 7-3).

   You'll next add the cells that make up the table.

7. Starting at the upper-left corner of the Layout Table, drag to a point just below the circle with the exclamation mark and in the middle of the E in Exasperater as shown in Figure 7-32.

   This works best if you start just a few pixels down and to the right of the exact upper corner. The box you just created is outlined in blue.

   Cells are indicated by a light blue outline. When you release the mouse button, the insertion point blinks inside of the cell you just drew. You're ready to fill it up with text or graphics. This cell contains the site's logo.

   You may wonder why the cell cuts off part of the National Exasperater name. Table designs often require dividing graphics into multiple rectangles in order to fit designs into the grid-like structure of tables. In this case, as you'll see as we build this page, you couldn't use one large graphic for the National Exasperater logo, because the row of navigation buttons would have to overlap ita feat not possible with tables alone.

Drag with the Layout Cell tool inside a Layout Table to add a table cell. The gray area to the right of the new cell indicates the area of the Layout Table that doesn't yet contain Layout Cells.

8. Choose Insert Image.

   Alternatively, select the Common tab of the Insert bar and then click the Insert Image button. Either way, the Select Image Source window appears.

   You'll select a graphic to match part of the National Exasperater logo.

9. Browse to the images_global folder inside of the DWTables folder. Then doubleclick the file called logo_national1.gif .

   For a refresher on inserting images, turn to Chapter 5. You've just inserted an actual graphic over the sketch you had made in your tracing image. In the event of an actual Web-creation experience, this is just what you would have done: placing actual graphics over the placeholders you had sketched in the tracing image.

   If you're feeling adventurous, add The National Exasperater as the Alt text for the image (Section 5.2.4).

10. On the Insert bar, click the Layout Cell tool button again.

    You'll next add three cells to the right of the one you just created: one for a National Exasperater graphic, another for the rest of the magazine's logo, and a third one to hold the navigation bar.

Adding additional cells to a table is as simple as dragging. The sides of a cell snap to other cells already in the table, making aligning the edges of cellsa snap.

11. Holding down the Ctrl key ( key), drag from just to the right of the first cell down to the right just above the red stripe of the logo (see Figure 7-33.)

    Holding down the Ctrl ( ) key when creating a cell keeps the Layout Cell tool active, so that you can continue drawing additional cells without clicking the Insert bar again.

12. Create two more cells for the red stripe of the logo and the navigation bar as indicated in Figure 7-33.

13. Click inside the top cell you just added and choose Insert Image.

    The Select Image Source window appears.

14. Browse to the images_global folder inside of the DWTables folder. Then doubleclick the file called cosmo_pub.gif .

    You'll notice that the graphic doesn't appear at the right side of the page as it does in the tracing image.

15. Move your mouse over the light blue outline of the cell until it changes to red; click to select the cell.

    This can be a bit tricky. Since you have several cells touching one another, when you move your mouse over a common border, you can easily select one cell or the other. Watch for a red outline to appear around the cell you're about to select. The next step doesn't change the cell's alignmentits placement on the pageonly the alignment of its contents.

16. In the Property inspector, choose Right from the Horz Menu.

    The graphic moves to the right edge of the cell.

    Next you'll add the rest of the logo.

17. Click in the cell immediately below, and choose Insert Image. Select the file logo_national2.gif in the images_global folder.

    The graphic with the rest of the word Exasperater appears. However, the red stripe doesn't extend all the way across the page as it does in the tracing image. In fact, if you have a large monitor, the red stripe in the tracing image may not even extend all the way across the document window. Don't worry, you'll address that problem with a little Cascading Style Sheet magic in the next phase of this tutorial. For now, you'll finish the rest of the banner.

18. Click in the bottom cell.

    This cell will contain the navigation bar for the site. When you release the mouse button, the insertion point blinks inside of the cell.

    In the next step, you'll insert a canned, ready-made navigation bar.

19. Choose Window Assets to open the Assets panel.

    The Assets panel lets you quickly reuse elements contained in your site including graphics, colors, Flash movies, and more. (The Assets panel is described in detail in Section 14.3.1.)

20. On the Assets panel, click the last icon on the leftthe one that looks like an open book.

    This displays the site's Library. The Library lets you save and reuse frequently needed snippets of HTML (see Chapter 17 for much more detail).

21. Select "navigation" from the list in the Library window; click Insert (see Figure 7-34).

    Dreamweaver drops in a row of navigation buttons. Notice that the Property inspector indicates that this is a special type of object called a Library item.

    You don't need the tracing image anymore, so you'll turn it off next.

You can find and reuse library items and other site elements, including colors and images, from Dreamweaver's Assets panel.

22. Choose Tracing Image from the View Options menu icon in the toolbar at the top of your document window (shown in Figure 7-11).

    The tracing image disappears. If there is no checkmark next to Tracing Image in the menu, the tracing image is already hidden. (You can also show or hide a tracing image by choosing View Tracing Image Show.)

    For the next steps, you need to show the Visual Aids you hid in step 3.

23. From the View Options menu (Figure 7-11), choose Hide All Visual Aids to remove the checkmark.

    Alternatively, you can use the keyboard shortcut to hide and show visual aids: Ctrl+Shift+I (Shift- -I).

7.12.5 Improving the Banner

The banner is coming together, but it still has room for improvement. With a little help from CSS, and some advanced features of Layout mode, you'll make this banner stand out in the crowd . First, you'll address that issue of the logo's red stripe we mentioned above.

1. Choose Window CSS Styles to open the CSS Styles panel.

   You'll start by creating a new style.

2. Click the New CSS Style button (+) on the CSS Styles panel.

   The New CSS Style window opens. You'll create a class style that you can apply to the table cell with the second half of the red logo.

3. Click the Class radio button. Type .banner in the Name box.

   Class styles always begin with a period. (If you forget to start with a period, don't worry; Dreamweaver will add it.)

4. Click OK.

   The Save Style Sheet File As dialog box appears. You're about to create the filean external style sheetthat will store the styles for this page.

5. Navigate to the DWTables folder. Type styles.css in the File Name box (the Save As box on the Mac), and then click Save to save the file.

   Cascading Style Sheet files always end in .css; that's how Web servers and browsers can tell what kind of file it is.

   Having created the external style sheet, you can now create the first style, as suggested by the sudden appearance of the Style Definition window.

6. From the list of category names in the left side of the window, select Background.

   You can add colors and images to the backgrounds of elements using these properties. In this case, you'll use a graphic that matches the red stripe in the logo.

7. Click the Browse button and select the file bg_banner.gif from the images_global folder.

   You should also set the way the graphic tiles so that it only continues horizontally across the page.

8. Choose "repeat-x" from the Repeat menu.

   The Style Definition window should look like figure 7-35.

9. Click OK to create the new style.

   Since it's a class style, you must apply it by hand to the element you wish to format. In this case, it's the layout cell containing the second half of the National Exasperater logo.

10. Move your mouse over the light blue outline of the cell until it changes to red; click to select the cell.

    You can use the Property inspector to apply a style to this cell.

The CSS background properties offer a lot of control over how graphics are placed in the background of a page, table cell, or other page element. They're described in detail in Section 6.7.2.

11. On the Property inspector, select "banner" from the Class menu.

    Notice that the red strip fills the background of the cell. Since the background graphic matches the strip in the logo graphic, they appear to form a single uni- fied image.

12. Now press F12 to preview the page in your browser.

    Maximize your browser window while viewing the page. If you have a highresolution monitor, you'll notice that red stripe doesn't extend all the way across the browser window, and the National Exasperater graphic doesn't butt up to the right edge of the window. The page would look much better if the banner could automatically stretch to fill in the gapa tricky bit of HTML programming, but an easy step in Dreamweaver.

13. Return to Dreamweaver. Click the first column's header menu (see Figure 7-36), and then choose Make Column Autostretch.

    The Make Column Autostretch option makes one column in a table stretchy, as described in Section 7.2.5, so that it can grow or shrink to fill the available space in a browser window.

    As soon as you choose this command, a dialog box appears asking if you're sure you want Dreamweaver to insert spacer graphics (Section 7.2.6.2).

14. In the dialog box, turn on "Create a spacer image file," and then click OK.

    Dreamweaver uses a special trick for the Autostretch feature: it creates a tiny, 1-pixel transparent GIF graphic. That's what Dreamweaver is prompting you to save now.

15. In the Save Spacer Image window, navigate to the DWTables images_global folder. Save the image with the name spacer.gif .

    Dreamweaver adds a 1-pixel tall row at the bottom of the banner table, and inserts the graphic into the right cell. The right column can now stretch to fit the browser window, since the spacer prevents the left cell from collapsing down to nothing. (See Section 7.2.6.2 for more on this topic.)

16. Choose File Save to save all your work so far.

Press F12 to view the final banner design in your default browser. Try resizing your browser window and notice how the stripe expands and contracts and the National Exasperater graphic always moves to the right edge of the window. The page is looking extremely promising .

NOTE

If, when you preview the page, the two images that make up the logo don't seem to align correctly, the culprit is most likely the height that Dreamweaver set for the layout cells (see Section 7.2.3). To eliminate the height settings, choose Clear All Heights from the Layout table's contextual menu (see Figure 7-5).

The width of a column is listed at the bottom of the column in Layout mode. Clicking this number reveals a menu of options including Make Column Autostretch, which is what you want here.

7.12.6 Building the Content Table

Now that you have the banner, it's time to turn to the actual contents of the page. This news page has two basic areas for content: a sidebar that runs along the left edge of the page and the large area to the right for the text of the news story.

1. On the Layout tab of the Insert bar, make sure the Layout button is selected.

   Figure 7-3 shows this button.

2. Click the Layout Cell tool on the Insert bar.

   You don't have to start with the Table tool when working in Layout mode. If you simply draw a cell, the program creates a Layout Table to fit.

3. Starting just below the information for the first layout table (the gray area with numbers like 247), drag down and about a quarter of an inch to the right of the sidebar area (see Figure 7-37).

   This creates a new cell and a new layout table. But notice that the new cell doesn't butt up against the bottom of the first layout table. It's about 30 pixels below that first table. That's OK, but the page will look better if the sidebar content sits directly below the banner, so you'll resize this cell in the next step.

NOTE

No matter what you do, you won't be able to draw a table cell that fits exactly below the first layout table. This is true even if you hide all visual aids. Dreamweaver doesn't always work logically! In fact, it can be downright buggy . (Thank goodness you have this book.)

4. Select the cell by clicking carefully on its edge. Drag the resize handle at the top of the cell upward until it touches the bottom of the first table (see Figure 7-37).

   The Layout mode lets you draw table cells anywhere on the page, so that you can easily create gutters between blocks of text and add margins between the edge of the page and a table cell. Although it's a fast and easy way to control layout, it's not necessarily the best way to build a Web page that's fast loading. The Layout mode can lead to some complex tables that require lots of slow-loading HTML code. As a general rule, the simpler the table, the better the Web page.

   In this case, you're going to create a very simple table composed of just two columns , one for the sidebar and one for the main story text. To fine-tune the design and the placement of text within each cell, you'll use Cascading Style Sheetstoday's professional method of choice.

With the Draw Layout Cell tool, you just drag across the document window to create a cell. Adjusting the cell's size is a simple matter of dragging one of the cell's resize handles.

5. Select the Layout Cell tool one last time and draw a rectangle just to the right of the sidebar cell you added in the last step.

   Since this cell will hold the main text of the page, the cell should fill the rest of the space to the right of the sidebar. Next, you'll add some already-created text to each cell.

6. Choose File Open. In the DWTables folder, double-click the file called sidebar.html.

   This page holds the text for the sidebar. Dreamweaver doesn't have an Import command like, say, PageMaker or QuarkXPress. Instead, you have to copy and paste text into your Web page, like this:

7. Choose Edit Select All to select all of the text on the page. Then choose Edit Copy to copy it.

   Now you'll switch back to your layout and paste the copied text.

8. Choose Window battle.html.

   A list of all currently opened Web pages appears at the bottom of the Window menu, so that you can switch between them by selecting their file names. Your Web page reappears.

The Windows version of Dreamweaver includes small tabs for each open document. They appear at the top of the Document window; clicking a tab brings that page to the front.

9. Click inside the small sidebar cell. Choose Edit Paste to paste the text into the cell.

   The text doesn't fit perfectly inside the sidebar. That's OK. Momentarily, you'll create a CSS style to fix that.

10. Choose File Open. In the DWTables folder, double-click the file called main_text.html .

    This page holds the text for the main story.

11. Choose Edit Select All to select all of the text on the page; choose Edit Copy to copy it.

    Now you'll switch back to your layout and paste the copied text.

12. Choose Window battle.html.

    Your Web page reappears.

13. Click inside the larger cell in the middle of the page. Choose Edit Paste.

    The text doesn't fit perfectly here either. It's a bit close to the navigation bar and it nearly touches the sidebar text. Again, this is a problem easily fixed with CSS. But first, you'll set the main content cell to Autostretch, so like the banner, it will grow and shrink to fit a visitor's browser window.

14. From the column header menu above the cell with the main story text, choose Make Column Autostretch.

    This makes the cell flexible, as described in step 13 of the previous instructions. The cell now expands to fill the browser window so that you can see all the text.

15. Choose File Save. Press F12 to preview your work in your browser.

    It's a good idea to check your work in a browser every time you try something new, because Web pages can look slightly different in a browser window. The page is coming together, but you still need to deal with the text in the main part of the page. You'll do that next.

7.12.7 Using CSS to Control Table Cells

In the last chapter, you saw how Cascading Style Sheets can control the look of text. But you can apply CSS on all sorts of HTML elements. In this case you'll build a couple of styles to format of the sidebar and main text cells.

1. On the CSS Styles panel, click the New CSS Style button (+). (If the CSS styles panel isn't open, choose Window CSS Styles.)

   The New CSS Style window opens. You'll create a class style that you can apply to the sidebar table cell.

2. Click the Class radio button. In the Name box, type .sidebar .

   Class styles always begin with a period. This style will control the space around the text inside the sidebar.

3. Click OK.

   The CSS Style Definition window opens. Since you've already created an external style sheet, Dreamweaver automatically adds this new style to it.

4. Click the Box category.

   With CSS, you can control the padding of each side of a table cell individually. This offers much more control than basic table properties.

5. Turn off the "Same for all" box below the Padding settings; type 25 in the Right padding box, and 10 in the Left padding box.

   The window should look like Figure 7-38.

6. Click OK to close the window and create the new style.

   Since this is a class style, you must apply it manually to the table cell.

7. Move your mouse over one of the edges of the sidebar cell. When a red border appears around the cell, click to select it.

   Alternatively, you can hold down the Ctrl ( ) key and click anywhere inside the cell to select it.

8. From the Class menu on the Property inspector, select "sidebar."

   The sidebar style indents the left and right margins of the text so that it fits neatly inside the cell. If the left and right margins still don't look right, you can edit the padding values for the style (see Section 6.4.1 for information on how to edit a style).

   For the next part of this tutorial, you'll create a style for the main text.

The CSS Cell-padding property works much like the Table tag's Cell Padding property: It adds space between a border (an edge of a cell, for example) and what's inside. But using Cascading Style Sheets, you can control the amount of padding separately for each edge of a cell.

9. Follow steps 1-3 to create another new class style. Name the style .story .

   Next, you'll format the new style to make the main story text easy to read on the Web.

10. Click the Box category. This time, leave the Padding property's "Same for all" box turned on and type 15 in the top box.

    This setting places 15 pixels of space all the way around the inside of the style.

11. Click the Background category. Select white with the color picker (see Section 1.3.3).

    You can also simply type #FFFFFF (the hexadecimal code for white) in the background color box. Either method set the entire cell to white. But so it doesn't appear too boxy, you'll soften the design by rounding the top left corner of the cell.

12. Click the Browse button to the right of the Background image box. Navigate to and select the file content_corner.gif in the images_global folder.

    This file contains a graphic of a soft corner curve that matches the background color of the rest of the page. But since you don't want the graphic tiling over the entire cell, you need to set it to not repeat.

13. From the Repeat menu, select "no-repeat." The window should now look like Figure 7-39. Click OK.

    That's all you need to do for this style. Now it's time to apply it to a table cell.

CSS's background properties let you fine-tune the placement of background images. In this case, the image of a rounded corner will appear once, in the top left corner of a table cell, providing a gentle curve that will soften the look of the page.

14. Follow steps 7-8 to apply the new stylestoryto the cell containing the news story.

    The text should indent from the edges of the cell, the cell's background should turn white, and a small curve should appear in the top-left of the cell.

7.12.8 Using the Table Object

Like the Layout Table, the Table object is a great tool for laying out Web pages; it's also the only way to achieve certain structures, like the nested table you'll create in the following steps. The Table object is available only in Standard view, not Layout mode.

For the next steps, you'll need the battle.html Web page you were working on in the previous steps. If it's not already on the screen, launch Dreamweaver and open the battle.html file.

Choose File Open Recent to see a list of the 10 most recently viewed documents. Choose a files name to open it.

1. Click the Layout tab on the Insert bar. Then click the Standard view button to switch out of Layout mode.

   The Layout Table tabs disappear, and the outlines of the tables and cells change to dotted lines. This is how Dreamweaver displays tables in Standard view.

2. Click just before the T in the "The Battle of the Century" headline.

   You've placed the insertion point at the beginning of the cell.

3. Choose Insert Table.

   Or click the Insert Table button on the Insert bar. Either way, the Insert Table dialog box opens.

4. Type the settings shown in Figure 7-40, pressing Tab to jump from box to box.

   Don't forget to set the pop-up menu to Pixels.

Unlike Layout Tables, which you draw by dragging with the mouse, you create tables in Standard view by typing in dimensions and properties in the Insert Table dialog box. (This command, in fact, is available only in Standard view.)

5. Click OK.

   The two-row, one-column Table object appears in your Web page, outlined by transparent (but now highlighted) borders.

6. With the table selected, choose Right from the Align menu in the Property inspector (see Figure 7-41).

   The table jumps to the right side of the main story area, and the text wraps around its left edge.

NOTE

You can also use the CSS Float property to make the table (or any element) align to the right of the page. See Section 6.7.4 for more.

7. Ctrl-click ( -click) both cells in this new table, so that a black border surrounds both cells.

   Both cells are now selected. The Property inspector changes to reflect the properties of these cells.

8. In the Property inspector, choose Center from the Horz menu.

   You've just center-aligned whatever you put into these cells. Now you're going to fill them up.

9. Click the top cell; then choose Insert Image.

   Of course, you can also click the Image button on Insert bar's Common tab. Either way, the Select Image Source dialog box opens.

In the Property inspector, choose Right from the Align menu to position the table at the right side of the page. The gold shield that appears just before the "Pisces" heading blue when it's selectedindicates where the table actually sits within the flow of the HTML code for the page.

10. Browse to the images_global folder in the DWTables folder; double-click the file called fight.gif .

    An artist's rendering of the story appears.

11. Click the bottom cell, and then type Artist's Rendering .

    Adding text to a cell is as simple as typing it, but there's much more you can do with text in Dreamweaver, as discussed in Chapter 3. There are many things you could do to improve the look of this table. For example, try creating a CSS class style that adds a black border around the table and indents the text and image from the edges of the table.

    To polish off the design, you'll attach another external style sheet with some canned styles.

12. On the CSS Styles Panel, click the Attach External Style Sheet button (see Figure 6-1).

    The Attach External Style Sheet window appears.

13. Click the Browse button; in the DWTables folder, select the file more_styles.css . Click OK to close the window and attach the external style sheet.

    The sidebar and main story text miraculously change. All through the power of CSS contextual selectors (see Section 6.6.3).

14. Choose File Save. Press F12 to preview your work in your default browser.

Congratulations: You've built a page with a precise layout and flexible design. If you compare this page with the page you built in Chapter 1, you can see the greater control (and freedom) that tables offer the Web designer. In the next chapter you'll explore another newer method of laying out Web pages.

Feel free to compare with the finished Web page at www.sawmac.com/dwmx2004/ .