CIS 205—Web Design & Development

CIS 205—Web Design & Development Dreamweaver Chapter 5 Using HTML Tables to Lay Out a Page

Chapter 5: Using HTML Tables • Introduction • Improved page layouts are possible using tables • A table is a placeholder consisting of cells that are arranged in rows and columns • You can place text or graphics within desired cells • Inserting Graphics and Text in Tables • You should plan your table and all its contents before inserting it on a page • Draw a sketch of the page with the table if necessary

Lesson 1: Create a Table • Understanding Table Modes • To create a table, click the Table button on the Insert bar (Common tab or Layout tab) • Also, you can create a table by clicking View, Table Mode, Layout Mode and proceed from there • To reset tables to Standard Mode, click View, Table Mode, Standard Mode

Lesson 1: Create a Table (2) • Creating a Table in Standard Mode • This method is good for creating a table with a specific number of rows and columns • A border is an outline around the cells of the table (can be set to 0 for invisible borders) • A table width of 100% will completely fill the browser window (50%, half the window) • The table width can also be in pixels (fixed size) • Cell padding is the distance between cell content and cell walls • Cell spacing is the distance between cells

Lesson 1: Create a Table (3) • Planning a Table • First, draw a sketch of the table and its contents • A table used only for page layout should have 0 border • Setting Table Accessibility Preferences for Tables • Add a table caption and table summary to make it more accessible to the handicapped (especially for tables that contain data) • Table headers can also be used for this purpose • Drawing a Table in Layout Mode • Use this mode to draw your own table • This mode is primarily used for layout purposes (no fixed numbers of rows and columns)

Lesson 1: Create a Table (4) • Create a table • Open The Striped Umbrella Web site as completed in Chapter 4, double-click café.html in the Files panel • Click the Layout tab on the Insert bar, click the Standard mode button, click the Table button • Type 7 in the Rows text box, 3 in the Columns text box, 750 in the Table width text box, click the Table width list arrow, click pixels, type 0 in the Border thickness text box • Type This table is used for page layout in the Summary text box, click OK • Click the Expanded Tables mode button on the Layout tab, click OK in the dialog box • Click the Standard mode button

Lesson 1: Create a Table (5) • Set table properties • Move the pointer near the top or bottom of the table until you see a small grid next to the pointer, then click the table border to select the entire table • In the PI (Property inspector), click the Align list arrow, click Center to center the table on the page • View the table in Layout mode • Click View on the menu bar, point to TableMode, click LayoutMode (click OK in the dialog box if necessary) • Click the Standard mode button • Click the Common tab on the Insert bar

Lesson 2: Resize, Split, and Merge Cells • Resizing Table Elements • To resize a table or its columns, rows, or cells manually, you select the table, then use the selection handles • To resize all columns equally, drag the middle-right handle • To resize all rows equally, drag the middle-bottom handle • To resize the entire table, drag the right-corner handle • To resize a single row or column, drag interior cell borders • To resize selected columns, rows, or cells, enter values in the W and H text boxes in the PI

Lesson 2: Resize, Split, and Merge Cells (2) • Splitting and Merging Cells • A new table has evenly spaced rows and columns • To split a cell, you divide it into multiple rows or columns • To merge cells, you combine them into one cell • Splitting and merging cells can provide a more interesting layout for a web page • To add or delete rows or columns, select a row or column, then click Modify on the menu bar, point to Table, click InsertRow or InsertColumn • You can create a nested table by placing the insertion point in a cell, then creating a new table in that cell

Lesson 2: Resize, Split, and Merge Cells (3) • Resize columns • In café.html, click inside the first cell in the bottom row, then click <td> on the tag selector at the bottom of the Document window (this selects the cell) • Type 30% in the W text box in the PI, press [Enter], which changes the width of the entire column • Repeat Steps 1 and 2 using 30% for the middle cell and 40% for the last cell • Resize rows • Select a cell in the first row and type 50 (pixels) in the R text box in the PI (or drag the bottom cell border) • Use the History panel to reverse Step 1

Lesson 2: Resize, Split, and Merge Cells (4) • Split cells • Click the first cell in the fifth row, click <td> in the tag selector • Click the Splits cell into rows or columns button in the PI • Click the Split cell into Rows option button, type 2 in the Number of rows text box, click OK • Merge cells • Click the first cell in the top row, then drag to the right to select all three cells in the top row • Click the Merges selected cells using spans button in the PI

Lesson 2: Resize, Split, and Merge Cells (5) • Inserting Images in Table Cells • Insert images into cells by clicking Insert on the menu bar and clicking Image • Or insert images by dragging images from the Assetspanel into the table cells • In either case, you are prompted to enter Alternativetext for an image • Aligning Images in Table Cells • Align images vertically or horizontally in a cell by selecting the cell and using the Horz or Vert list arrows in the PI

Lesson 2: Resize, Split, and Merge Cells (6) • Insert images in table cells • Open index.html, click the banner image, press and hold [Shift], click to the right of the navigation bar (to select both the banner and the nav bar) • Click Edit on the menu bar, click Copy, close index.html • Click the top cell in café.html, click Edit on the menu bar, click Paste • Click cell (3, 1)—row 3, column 1—click Insert on the menu bar, click Image, double-click café_logo.gif from your Data Files, type Sand Crab Café logo as alt text

Lesson 2: Resize, Split, and Merge Cells (7) • Insert images in table cells (continued) • Repeat Step 4 to insert cheesecake.jpg in cell (5, 1) using BananaChocolateCheesecake for alt text • Merge the two cells to the right of the cheesecake graphic, insert café_photo.jpg in this newly merged cell using The Sand Crab Café as the alt text • Refresh the Assetspanel to verify that the new images are copied to the Web site • Save you work and preview in a browser

Lesson 2: Resize, Split, and Merge Cells (8) • Align graphics in table cells • Click the banner, click the Align Center button in the PI • Center-align the logo and cheesecake images, left-align the café photo • Save you work and preview in a browser

Lesson 4: Insert Text and Format Cell Content • Inserting Text in a Table • You can type text, copy and paste it, or import it into a cell • Then you can format the text in the cell • Formatting Cell Content • It is easier to format cell text using Standard mode • Select the text and apply formatting • You can format an entire cell by selecting the cell or format different items in a cell individually • Formatting Cells • Select the entire cell and use the PI

Lesson 4: Insert Text and Format Cell Content (1) • Insert text • Merge the two cells to the right of the café logo, click this new cell, then import café.doc from the Data Files • Click the cell below the cheesecake photo, type Banana Chocolate, press [Shift][Enter], type Cheesecake, press [Shift][Enter], type Oursignaturedesert • Click Commands on the menu bar, click Clean Up Word HTML, click OK

Lesson 4: Insert Text and Format Cell Content (2) • Insert text using a nested table • Merge the two empty cells below the café photo • Click this new cell, click the Table button on the Common tab of the Insert bar • Type 4 in the Rows text box, 2 in the Columns text box, 300 in the Table Width text box, click the Table Width list arrow, click pixels, type 0 in the Border thickness text box, click the Top row header icon in the Header section, type This table contains the café hours. in the Summary text box, click OK • Merge the two cells in the top row of the nested table, click this cell, type Sand Crab Café Hours • Enter the café hours as shown on page 5.25

Lesson 4: Insert Text and Format Cell Content (3) • Format cell content • Expand the CSS panel group • Click the Attach Style Sheet button (at the bottom of the panel), click OK (to attach the su_styles.css file) • Select the paragraph next to the café logo, click the Style list arrow in the PI, click body_text • Select the text Banana Chocolate Cheesecake and apply the bullets style • Select the Our signature desert text and apply the body_text style • Repeat Step 5 for the text about reservations and the nested table

Lesson 4: Insert Text and Format Cell Content (4) • Format cells • Click the cell with the cheesecake name • Click the Horz list arrow in the PI, click Center • Repeat Steps 1 and 2 for the cells with the reservation text and the nested table • Click the cell with the reservations text, click the Vertlistarrow in the PI, click Middle • Save your work and preview in a browser

Lesson 4: Insert Text and Format Cell Content (5) • Modify cell content • Click Modify on the menu bar, click NavigationBar • Click the Show “Down image” initially check box to remove the check mark for the home button • Click café in the Nav bar elements box, click the Show“Down image” initially check box to add a check mark, click OK • Use visual aids to check layout • Click the Visual Aids button on the Document toolbar, click Hide All Visual Aids • Repeat Step 1 to show the visual aids again • Save your work and preview in a browser

CIS 205—Web Design & Development