Adobe Dreamweaver CS4 - Illustrated Positioning Objects with HTML Tables

Unit Objectives Understand table modesUnderstand table modes Create a tableCreate a table Resize tables, rows, and columnsResize tables, rows, and columns Merge and split cellsMerge and split cells Insert and align images in table cellsInsert and align images in table cells Adobe Dreamweaver CS4 - Illustrated

Unit Objectives Insert textInsert text Format and modify cell contentFormat and modify cell content Format cellsFormat cells Add media objectsAdd media objects Adobe Dreamweaver CS4 - Illustrated

Understanding Table Modes Creating a table in Standard modeCreating a table in Standard mode Editing a table in Expanded Tables modeEditing a table in Expanded Tables mode Adobe Dreamweaver CS4 - Illustrated

Understanding Table Modes Adobe Dreamweaver CS4 - Illustrated

Understanding Table Modes Adobe Dreamweaver CS4 - Illustrated

Clues to Use HTML table tagsHTML table tags The &nbsp code represents a nonbreaking spaceThe &nbsp code represents a nonbreaking space Adobe Dreamweaver CS4 - Illustrated

Creating a Table Start Dreamweaver, open The Striped Umbrella Web site, open the file dwh_1.html from the drive and folder where your Data Files are stored, save it as cafe.html, overwriting your existing file, but not updating links, then close the dwh_1.html fileStart Dreamweaver, open The Striped Umbrella Web site, open the file dwh_1.html from the drive and folder where your Data Files are stored, save it as cafe.html, overwriting your existing file, but not updating links, then close the dwh_1.html file Type The Sand Crab Cafe in the Title text box on the Document toolbar, replacing Untitled Document, then press [Enter] (Win) or [Return] (Mac)Type The Sand Crab Cafe in the Title text box on the Document toolbar, replacing Untitled Document, then press [Enter] (Win) or [Return] (Mac) Select the placeholder text Main Content, delete it, click the Standard mode button in the Layout group on the Insert panel if necessary, then click the Table buttonSelect the placeholder text Main Content, delete it, click the Standard mode button in the Layout group on the Insert panel if necessary, then click the Table button Adobe Dreamweaver CS4 - Illustrated

Creating a Table Type 6 in the Rows text box, 3 in the Columns text box, and 735 in the Table width text box, click the Table Width list arrow, click pixels, type 0 in the Border thickness text box, (leave the cell padding and spacing options blank), click None in the Header section if necessary, type This table is used for page layout in the Summary text box, then click OKType 6 in the Rows text box, 3 in the Columns text box, and 735 in the Table width text box, click the Table Width list arrow, click pixels, type 0 in the Border thickness text box, (leave the cell padding and spacing options blank), click None in the Header section if necessary, type This table is used for page layout in the Summary text box, then click OK Compare your screen to Figure H-5, then save your workCompare your screen to Figure H-5, then save your work Adobe Dreamweaver CS4 - Illustrated

Creating a Table Adobe Dreamweaver CS4 - Illustrated

Clues to Use Selecting a tableSelecting a table Click the insertion point in the table, click Modify on the Application bar (Win) or Menu bar (Mac), point to Table, then click Select TableClick the insertion point in the table, click Modify on the Application bar (Win) or Menu bar (Mac), point to Table, then click Select Table Click the table borderClick the table border Click the table tag icon on the tag selector on the status barClick the table tag icon on the tag selector on the status bar Adobe Dreamweaver CS4 - Illustrated

Resizing Tables, Rows, and Columns Click inside the bottom-left cell, then click the cell tag on the tag selectorClick inside the bottom-left cell, then click the cell tag on the tag selector Type 30% in the W text box on the Property inspector, then press [Tab]Type 30% in the W text box on the Property inspector, then press [Tab] Repeat steps 1 and 2 for the next two cells in the last row, using 30% for the middle cell and 40% for the last cellRepeat steps 1 and 2 for the next two cells in the last row, using 30% for the middle cell and 40% for the last cell Adobe Dreamweaver CS4 - Illustrated

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 slightlyClick 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 (Win) or Menu bar (Mac), 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 commandClick Window on the menu bar (Win) or Menu bar (Mac), 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 fileSave the file Adobe Dreamweaver CS4 - Illustrated

Resizing Tables, Rows, and Columns Adobe Dreamweaver CS4 - Illustrated

Resizing Tables, Rows, and Columns Adobe Dreamweaver CS4 - Illustrated

Clues to Use Resetting table widths and heightsResetting table widths and heights Select the table, click Modify on the Application bar (Win) or Menu bar (Mac), point to Table, then click Clear Cell Heights or Clear Cell WidthsSelect the table, click Modify on the Application bar (Win) or Menu bar (Mac), point to Table, then click Clear Cell Heights or Clear Cell Widths You can also use these commands to tighten up extra white space in a cellYou can also use these commands to tighten up extra white space in a cell Adobe Dreamweaver CS4 - Illustrated

Merging and Splitting Cells Click to place the insertion point in the fourth row, then drag the pointer across the next cell to the rightClick to place the insertion point in the fourth row, then drag the pointer across the next cell to the right Click the Merges selected cells using spans button on the Property inspectorClick the Merges selected cells using spans button on the Property inspector Place the insertion point in the first cell in the fourth row, then click the Splits cell into rows or columns button on the Property inspectorPlace the insertion point in the first cell in the fourth row, then click the Splits cell into rows or columns button on the Property inspector Adobe Dreamweaver CS4 - Illustrated

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 OKClick 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 toolbarClick the Show Code view button on the Document toolbar Click the Show Design view button, then save your workClick the Show Design view button, then save your work Adobe Dreamweaver CS4 - Illustrated

Merging and Splitting Cells Adobe Dreamweaver CS4 - Illustrated

Clues to Use Adding and deleting rows and columnsAdding and deleting rows and columns You can add or delete one or several rows or columns at a timeYou can add or delete one or several rows or columns at a time Use commands on the Modify menuUse commands on the Modify menu To add a new row to the end of a table, simply press [Tab]To add a new row to the end of a table, simply press [Tab] Adobe Dreamweaver CS4 - Illustrated

Inserting and Aligning Images in Table Cells Click to place the insertion point in the first cell in the second row, click to select the Image button in the Common category on the Insert panel, navigate to the drive and folder where your Unit H Data Files are stored, double-click or click the assets folder, double-click café_logo.gif, inserting the alternate text Sand Crab Cafe logo when prompted, click OK, then refresh the Files panelClick to place the insertion point in the first cell in the second row, click to select the Image button in the Common category on the Insert panel, navigate to the drive and folder where your Unit H Data Files are stored, double-click or click the assets folder, double-click café_logo.gif, inserting the alternate text Sand Crab Cafe logo when prompted, click OK, then refresh the Files panel Adobe Dreamweaver CS4 - Illustrated

Inserting and Aligning Images in Table Cells Click to place the insertion point in the first cell in the fourth row (the top row in the set of split cells), click the Image button in the Common category on the Insert panel, navigate to the drive and folder where your Unit H Data Files are stored, double-click the assets folder, double-click cheesecake.jpg, insert the alternate text Banana Chocolate Cheesecake when prompted, click OK, then refresh the Files panelClick to place the insertion point in the first cell in the fourth row (the top row in the set of split cells), click the Image button in the Common category on the Insert panel, navigate to the drive and folder where your Unit H Data Files are stored, double-click the assets folder, double-click cheesecake.jpg, insert the alternate text Banana Chocolate Cheesecake when prompted, click OK, then refresh the Files panel Adobe Dreamweaver CS4 - Illustrated

Inserting and Aligning Images in Table Cells Repeat step 2 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 textRepeat step 2 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]Save your work, click the Preview/Debug in Browser button, then click Preview in [your browser name] Close your browser, click the cheesecake image, click the Horz list arrow in the HTML Property inspector, then click CenterClose your browser, click the cheesecake image, click the Horz list arrow in the HTML Property inspector, then click Center Repeat step 5 to center the cafe logo and cafe photoRepeat step 5 to center the cafe logo and cafe photo Save your work, preview the page in your browser, then close the browserSave your work, preview the page in your browser, then close the browser Adobe Dreamweaver CS4 - Illustrated

Inserting and Aligning Images in Table Cells Adobe Dreamweaver CS4 - Illustrated

Clues to Use Vertically aligning cell contentsVertically aligning cell contents Vertical alignment optionsVertical alignment options TopTop MiddleMiddle BottomBottom BaselineBaseline Adobe Dreamweaver CS4 - Illustrated

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 Unit H Data Files folder (Win) or copy and paste the text (Mac)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 Unit H Data Files folder (Win) or copy and paste the text (Mac) Adobe Dreamweaver CS4 - Illustrated

Inserting Text 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 dessertClick 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 seasonClick 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 in the Common or Layout category on the Insert panelMerge the two empty cells under the cafe photo, place the insertion point inside the newly merged cell, then click the Table button in the Common or Layout category on the Insert panel Adobe Dreamweaver CS4 - Illustrated

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 if necessary, then type 0 in the Border thickness text box if necessary, then leave the Cell padding and Cell spacing blankType 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 if necessary, then type 0 in the Border thickness text box if necessary, then leave the Cell padding and Cell spacing blank Click the Top row header icon in the Header section, type This table contains the cafe hours. in the Summary text box, then click OKClick 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 HoursMerge 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 H-14, then save your workEnter the cafe dining area names and their hours, as shown in Figure H-14, then save your work Adobe Dreamweaver CS4 - Illustrated

Inserting Text Adobe Dreamweaver CS4 - Illustrated

Clue to Use Using nested tablesUsing nested tables Tables inside tablesTables inside tables Click inside a cell before inserting a new tableClick inside a cell before inserting a new table Can be formatted differentlyCan be formatted differently Careful planning is importantCareful planning is important Adobe Dreamweaver CS4 - Illustrated

Clues to Use Importing and exporting tabular dataImporting and exporting tabular data Tabular data is data arranged in columns and rows, and separated by a delimiterTabular data is data arranged in columns and rows, and separated by a delimiter Importing versus exportingImporting versus exporting Files imported into Dreamweaver must first be saved as delimited text filesFiles imported into Dreamweaver must first be saved as delimited text files Adobe Dreamweaver CS4 - Illustrated

Formatting and Modifying Cell Content Expand the CSS panel group if necessaryExpand the CSS panel group if necessary Select the paragraph under the navigation bar, then use the Property inspector to apply the body_text styleSelect 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 bold_blue styleSelect the text Banana Chocolate Cheesecake, then apply the bold_blue style Adobe Dreamweaver CS4 - Illustrated

Formatting and Modifying Cell Content Apply the body_text style to the text Our signature dessert and the reservations informationApply the body_text style to the text Our signature dessert and the reservations information Apply the body_text style to the nested table textApply the body_text style to the nested table text Save your work, preview the cafe page in your browser window, then close your browserSave your work, preview the cafe page in your browser window, then close your browser Adobe Dreamweaver CS4 - Illustrated

Formatting and Modifying Cell Content Adobe Dreamweaver CS4 - Illustrated

Clues to Use Formatting cells and cell contentFormatting cells and cell content Formatting cells is not the same as formatting the content inside themFormatting cells is not the same as formatting the content inside them Select the cell content to format the cell contentSelect the cell content to format the cell content Select the cell to format the cellSelect the cell to format the cell Adobe Dreamweaver CS4 - Illustrated

Formatting Cells Click to place the insertion point in the cell with the reservations text.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 cellClick 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 contentsWith the insertion point in the cell with the reservations text, click the Horz list arrow, then click Center to center the cell contents Repeat step 3 to center the cell contents for the cell with cheesecake name and the cell with the nested tableRepeat step 3 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 browserSave your work, preview the cafe page in your browser, then close your browser Adobe Dreamweaver CS4 - Illustrated

Formatting Cells Adobe Dreamweaver CS4 - Illustrated

Clues to Use Using grids and guides for positioning page contentUsing grids and guides for positioning page content There are several View menu options to help you position your page content more preciselyThere are several View menu options to help you position your page content more precisely GridsGrids GuidesGuides DistanceDistance Adobe Dreamweaver CS4 - Illustrated

Adding Media Objects Delete the crab image in the left cell in the second rowDelete the crab image in the left cell in the second row Click the Media list arrow in the Common category on the Insert panel, then click SWFClick the Media list arrow in the Common category on the Insert panel, then click SWF Navigate to the unit_h Data Files folder, click crab.swf, click OK (Win) or Choose (Mac), then click Yes to close the dialog box asking if you want to copy the file to the Web siteNavigate to the unit_h Data Files folder, click crab.swf, click OK (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 OKSave 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 StopWith the placeholder image selected, click Play in the Property inspector to play the crab.swf movie, then click Stop Adobe Dreamweaver CS4 - Illustrated

Adding Media Objects Save your work click OK in the Copy Dependent Files dialog box, then preview the page in your browserSave your work click OK in the Copy Dependent Files dialog box, then 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, scroll down to the Security section, click the Allow active content to run in files on My Computer check box, then click OKIf the movie did not play in Internet Explorer, click Tools on the menu bar, click Internet Options, click the Advanced tab, scroll down to the Security section, click the Allow active content to run in files on My Computer check box, then click OK Close your browser, position the pointer so that it points to the left side of the first row, then when the pointer becomes an arrow, click once to select the row, click Modify on the Application bar (Win) or Menu bar (Mac), point to Table, then click Delete RowClose your browser, position the pointer so that it points to the left side of the first row, then when the pointer becomes an arrow, click once to select the row, click Modify on the Application bar (Win) or Menu bar (Mac), point to Table, then click Delete Row Adobe Dreamweaver CS4 - Illustrated

Adding Media Objects Edit the #footer rule as follows: Font- family: Arial, Helvetica, sans-serif; Font- size: small; Font-style: italic; Text-align: centerEdit the #footer rule as follows: Font- family: Arial, Helvetica, sans-serif; Font- size: small; Font-style: italic; Text-align: center Replace the Footer placeholder text with The Striped Umbrella Copyright 2002 – 2012Replace the Footer placeholder text with The Striped Umbrella Copyright 2002 – 2012 Save your work, preview the page in the browser again, then close the browserSave your work, preview the page in the browser again, then close the browser Close DreamweaverClose Dreamweaver Adobe Dreamweaver CS4 - Illustrated

Adding Media Objects Adobe Dreamweaver CS4 - Illustrated

The Finished Project Adobe Dreamweaver CS4 - Illustrated

Clues to Use Editing Flash movies from DreamweaverEditing Flash movies from Dreamweaver Two files are created when you create a Flash movie, a player file and a source fileTwo files are created when you create a Flash movie, a player file and a source file The player file is used on the Web site, but cannot be editedThe player file is used on the Web site, but cannot be edited Editing must be done using the source fileEditing must be done using the source file Select the movie placeholder on an open page of DreamweaverSelect the movie placeholder on an open page of Dreamweaver Click the Edit button on the Property inspectorClick the Edit button on the Property inspector Adobe Dreamweaver CS4 - Illustrated

Unit Summary Understand table modesUnderstand table modes Create a tableCreate a table Resize tables, rows, and columnsResize tables, rows, and columns Merge and split cellsMerge and split cells Insert and align images in table cellsInsert and align images in table cells Adobe Dreamweaver CS4 - Illustrated

Unit Summary Insert textInsert text Format and modify cell contentFormat and modify cell content Format cellsFormat cells Add media objectsAdd media objects Adobe Dreamweaver CS4 - Illustrated