Macromedia Dreamweaver 8 Unit G Working with Tables

Macromedia Dreamweaver 8 Unit G Working with Tables and Layers Macromedia Dreamweaver 8 -Illustrated Introductory 1

Unit Objectives Understand table modes Create a table Resize tables, rows, and columns Merge and split cells Insert and align images in table cells Insert text Macromedia Dreamweaver 8 --Illustrated Introductory 2

Unit Objectives Format and modify cell content Format cells Add multimedia content Add a layer Position and format a layer Macromedia Dreamweaver 8 --Illustrated Introductory 3

Understanding Table Modes Creating a table in Standard mode Editing a table in Expanded Tables mode Drawing a table in Layout mode Macromedia Dreamweaver 8 --Illustrated Introductory 4

Understanding Table Modes Macromedia Dreamweaver 8 --Illustrated Introductory 5

Clues to Use HTML table tags Ø <table></table> Ø <tr></tr> Ø <td></td> Ø The &nbsp code represents a nonbreaking space Macromedia Dreamweaver 8 --Illustrated Introductory 6

Creating a Table Open The Striped Umbrella Web site, then double-click cafe. html in the Files panel to open the cafe page in Design View Type The Sand Crab Cafe in the Title text box on the Document toolbar, replacing Untitled Document, then press [Enter] (Win) or [Return] (Mac) Click the Standard mode button in the Layout group on the Insert bar if necessary, then click the Table button If necessary, type 7 in the Rows text box, 3 in the Columns text box, and 750 in the Table width text box, click the Table Width list arrow, click pixels if necessary, type 0 in the Border thickness text box, (leave the cell padding and spacing options blank), type This table is used for page layout in the Summary text box, then click OK Macromedia Dreamweaver 8 --Illustrated Introductory 7

Creating a Table With the table still selected, expand the Property inspector if necessary, click the Align list arrow on the Property inspector, then click Center to center-align the table on the page Click the Layout mode button on the Insert bar Click the Standard mode button on the Insert bar, then save your work Macromedia Dreamweaver 8 --Illustrated Introductory 8

Creating a Table Macromedia Dreamweaver 8 --Illustrated Introductory 9

Clues to Use Selecting a table Ø Click the insertion point in the table, click Modify on the menu bar, point to Table, then click Select Table Ø Double-click the table border Ø Click the table tag icon <table> on the tag selector Macromedia Dreamweaver 8 --Illustrated Introductory 10

Resizing Tables, Rows, and Columns Click inside the bottom-left cell, then click the cell tag icon on the tag selector Type 30% in the W text box on the Property inspector, then press [Tab] Repeat the previous two steps for the next two cells in the last row, using 30% for the middle cell and 40% for the last cell Macromedia Dreamweaver 8 --Illustrated Introductory 11

Resizing Tables, Rows, and Columns Click inside one of the cells to deselect the last selected cell, place the pointer over the bottom row border of the first row until the pointer changes to a resizing pointer, then click and drag downward to increase the height of the row slightly Click Window on the menu bar, click History to open the History panel, if necessary, then drag the slider in the History panel up until Set Height is dimmed, to undo the Set Height command Save the file Macromedia Dreamweaver 8 --Illustrated Introductory 12

Resizing Tables, Rows, and Columns Macromedia Dreamweaver 8 --Illustrated Introductory 13

Clues to Use Resetting table widths and heights Ø Select the table, click Modify on the menu bar, point to Table, then click Clear Cell Heights or Clear Cell Widths Macromedia Dreamweaver 8 --Illustrated Introductory 14

Merging and Splitting Cells Click to place the insertion point in the upper-left cell, then click and drag the pointer across the top three cells in the first row Click the Merges selected cells using spans button on the Property inspector Repeat the first two steps to merge the second and third cells in the fifth row Place the insertion point in the first cell in the fifth row, then click the Splits cell into rows or columns button on the Property inspector Macromedia Dreamweaver 8 --Illustrated Introductory 15

Merging and Splitting Cells Click the Split cell into Rows option to select it if necessary, type 2 in the Number of Rows text box if necessary, then click OK Click the Show Code View button on the Document toolbar Click the Show Design View button, then save your work Macromedia Dreamweaver 8 --Illustrated Introductory 16

Merging and Splitting Cells Macromedia Dreamweaver 8 --Illustrated Introductory 17

Clues to Use Adding and deleting rows and columns Ø You can add or delete one or several rows or columns at a time Ø Use commands on the Modify menu Ø To add a new row to the end of a table, simply press [Tab] Macromedia Dreamweaver 8 --Illustrated Introductory 18

Clues to Use Merging and splitting cells in Layout Mode Ø It isn’t as easy to modify tables in Standard Mode that were originally drawn in Layout Mode Ø Check the HTML code to try to determine how the original layout was converted into HTML code Macromedia Dreamweaver 8 --Illustrated Introductory 19

Inserting and Aligning Images in Table Cells Open the index page, click the banner to select it, press and hold [Shift], then click to the right of the navigation bar to select both the banner and the navigation bar Click Edit on the menu bar, click Copy, then close the index page Click in the top cell on the cafe page, click Edit on the menu bar, then click Paste Click in the blank space under the Description heading, type The Striped Umbrella banner, click OK, then center the banner if necessary Click to place the insertion point in the first cell in the fifth row (the top row in the set of split cells), click the Image button in the Common group on the Insert bar, navigate to the drive and folder where your Unit G Data Files are stored, double-click the assets folder, double-click cheesecake. jpg, inserting the alternate text Banana Chocolate Cheesecake when prompted, click OK, then refresh the Files panel Macromedia Dreamweaver 8 --Illustrated Introductory 20

Inserting and Aligning Images in Table Cells Repeat the previous step to insert the cafe_photo. jpg in the merged cells to the right of the cheesecake image, using The Sand Crab Cafe as the alternate text Save your work, click the Preview/Debug in Browser button, then click Preview in [your browser name] Close your browser, click the cheesecake image, then click the Align Center button on the Property inspector Repeat the previous step to center the cafe image Save your work, preview the page in your browser, then close the browser Macromedia Dreamweaver 8 --Illustrated Introductory 21

Inserting and Aligning Images in Table Cells Macromedia Dreamweaver 8 --Illustrated Introductory 22

Clues to Use Vertically aligning cell contents Ø Vertical alignment options • • Top Middle Bottom Baseline Macromedia Dreamweaver 8 --Illustrated Introductory 23

Inserting Text Merge the second and third cells in the third row, click in the newly merged cell, then use the File/Import/Word document command to import the Word document cafe. doc from the chapter_g data files folder Click in the cell under the cheesecake photo, type Banana Chocolate, press [Shift] [Enter] (Win) or [Shift] [return] (Mac), type Cheesecake, press [Shift] [Enter] (Win) or [Shift] [return] (Mac), then type Our signature dessert Click in the next cell down and type Reservations are recommended for The Dining Room during the peak summer season Merge the two empty cells under the cafe photo, place the insertion point inside the newly merged cell, then click the Table button Macromedia Dreamweaver 8 --Illustrated Introductory 24

Inserting Text Type 4 in the Rows text box, type 2 in the Columns text box, type 300 in the Table width text box, click the Table width list arrow, click pixels, then type 0 in the Border thickness text box Click the Top row header icon in the Header section, type This table contains the cafe hours. in the Summary text box, then click OK Merge the top row of cells in the nested table, then type The Sand Crab Cafe Hours Enter the cafe dining area names and their hours, as shown in Figure G-15 on page 171, then save your work Macromedia Dreamweaver 8 --Illustrated Introductory 25

Inserting Text Macromedia Dreamweaver 8 --Illustrated Introductory 26

Clues to Use Using nested tables Ø Tables inside tables Ø Click inside a cell before inserting a new table Ø Can be formatted differently Macromedia Dreamweaver 8 --Illustrated Introductory 27

Clues to Use Importing and exporting tabular data Ø Tabular data is data arranged in columns and rows, and separated by a delimiter Ø Files imported into Dreamweaver must first be saved as delimited text files Macromedia Dreamweaver 8 --Illustrated Introductory 28

Formatting and Modifying Cell Content Expand the CSS panel group (if necessary) Click the Attach Style Sheet button, then attach the su_styles. css file to the cafe page Select the paragraph under the navigation bar, then use the Property inspector to apply the body_text style Select the text Banana Chocolate Cheesecake, then apply the spa_names style Macromedia Dreamweaver 8 --Illustrated Introductory 29

Formatting and Modifying Cell Content Select the text Our signature dessert and the Reservations information, then apply the body_text style Repeat the previous step to apply the body_text style to the nested table text Modify the navigation bar to show the home element in its up state and the cafe element in its down state Save your work, preview the cafe page in your browser window, then close your browser Macromedia Dreamweaver 8 --Illustrated Introductory 30

Formatting and Modifying Cell Content Macromedia Dreamweaver 8 --Illustrated Introductory 31

Clues to Use Formatting cells and cell content Ø Formatting cells is not the same as formatting the content inside them • Select the cell content to format the cell content • Select the cell to format the cell Macromedia Dreamweaver 8 --Illustrated Introductory 32

Formatting Cells Click to place the insertion point in the cell with the reservations text. Click the Vert list arrow on the Property inspector, then click Middle to force the cell contents to the middle of the cell With the insertion point in the cell with the reservations text, click the Horz list arrow, then click Center to center the cell contents Repeat the previous step to center the cell contents for the cell with cheesecake name and the cell with the nested table Save your work, preview the cafe page in your browser, then close your browser Macromedia Dreamweaver 8 --Illustrated Introductory 33

Formatting Cells Macromedia Dreamweaver 8 --Illustrated Introductory 34

Adding Multimedia Content Click to place the insertion point in the left cell in the third row Click the Media list arrow in the Common group on the Insert bar, then click Flash Navigate to the unit_g Data Files folder, click crab. swf, then click Yes (Win) or Choose (Mac), then click Yes to close the dialog box asking if you want to copy the file to the Web site Save the movie in the root folder of the Web site, type Flash Movie of crab logo in the Title text box of the Object Tag Accessibility Attributes dialog box, then click OK With the placeholder image selected, click Play in the Property inspector to play the crab. swf movie, then click Stop Macromedia Dreamweaver 8 --Illustrated Introductory 35

Adding Multimedia Content Save your work, preview the page in your browser If the movie did not play in Internet Explorer, click Tools on the menu bar, click Internet Options, click the Advanced tab, then click the Allow active content to run in files on my computer check box Close your browser, position the pointer so that it points to the left side of the second row, then when the pointer becomes an arrow , click the pointer to select the row, click Modify on the menu bar, point to Table, then click Delete Row Save your work, preview the page in the browser again, then close the browser Macromedia Dreamweaver 8 --Illustrated Introductory 36

Adding Multimedia Content Macromedia Dreamweaver 8 --Illustrated Introductory 37

Adding a Layer Close the cafe page and open the index page Click the Standard Mode button in the Layout group on the Insert bar if necessary, click the Draw Layer button in the Layout group on the Insert bar, position the pointer below the horizontal rule on the right side of the page, then drag to form a rectangle Click to place the insertion point inside the layer if necessary, click the Image button in the Common group on the Insert bar, navigate to the drive and folder where your Unit G Data Files are stored if necessary, then double-click su_logo. jpg Add The Striped Umbrella logo as the alternate text for the logo Select the copyright information, click Edit on the menu bar, click Cut, place the insertion point to the right of the logo in the layer, then press [Shift] [Enter] (Win) or [shift] [return] (Mac) Macromedia Dreamweaver 8 --Illustrated Introductory 38

Adding a Layer Click Edit on the menu, then click Paste, then remove any formatting applied to the text Click the border of the layer, then when the pointer changes to (Win) or the hand icon (Mac), drag the layer to place the bottom of the layer even with the last updated statement Select the default name in the Layer ID text box in the Property inspector, type logo, then press [Enter] (Win) or [return] (Mac) Save your work and preview the page in the browser Close the browser and make any adjustments necessary Macromedia Dreamweaver 8 --Illustrated Introductory 39

Adding a Layer Macromedia Dreamweaver 8 --Illustrated Introductory 40

Clues to Use Converting layers to tables Ø Not all browsers can read layers correctly Ø Select the layer, click Modify on the menu bar, point to Convert, then click Layers to Table Macromedia Dreamweaver 8 --Illustrated Introductory 41

Positioning and Formatting a Layer Click the layer border to select the layer Type 75% in the L text box, then press [Enter] (Win) or [return] (Mac) Type 295 px in the T text box, then press [Enter] (Win) or [Return] (Mac) With the #logo style selected in the CSS Styles panel, click the Edit Style. . . button in the CSS Styles panel Macromedia Dreamweaver 8 --Illustrated Introductory 42

Positioning and Formatting a Layer Click the Type category, click the Font list arrow, click Verdana, Arial, Helvetica, sans-serif Click the Size list arrow, click 9, then click OK Save your work, preview the page in your browser, click each link in the navigation bar, then close your browser Exit Dreamweaver Macromedia Dreamweaver 8 --Illustrated Introductory 43

Positioning and Formatting a Layer Macromedia Dreamweaver 8 --Illustrated Introductory 44

Clues to Use Setting layer attributes Ø Width and height Ø Z-Index Ø Layer name Ø Background images or colors Ø Layer visibility Macromedia Dreamweaver 8 --Illustrated Introductory 45

Unit Summary Understand table modes Create a table Resize tables, rows, and columns Merge and split cells Insert and align images in table cells Insert text Macromedia Dreamweaver 8 --Illustrated Introductory 46

Unit Summary Format and modify cell content Format cells Add multimedia content Add a layer Position and format a layer Macromedia Dreamweaver 8 --Illustrated Introductory 47