Adobe Dreamweaver CS4 - Illustrated
Positioning Objects
with HTML Tables
Unit Objectives
•
•
•
•
•
Understand table modes
Create a table
Resize tables, rows, and columns
Merge and split cells
Insert and align images in table cells
Adobe Dreamweaver CS4 - Illustrated
Unit Objectives
•
•
•
•
Insert text
Format and modify cell content
Format cells
Add media objects
Adobe Dreamweaver CS4 - Illustrated
Understanding Table Modes
• Creating a table in Standard mode
• Editing 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 tags
•
•
•
•
<table></table>
<tr></tr>
<td></td>
The &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 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)
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 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 OK
• Compare 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 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 Table
• Click the table border
• Click the table tag icon <table> 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 <td> on the tag
selector
• 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
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 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
command
• Save 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 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 Widths
• You 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 right
• Click 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 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 OK
• Click the Show Code view button
on the Document toolbar
• Click 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
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]
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 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 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 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,
click the Horz list arrow in the HTML Property
inspector, then click Center
Repeat step 5 to center the cafe logo and cafe
photo
Save 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 contents
• Vertical alignment options
•
•
•
•
Top
Middle
Bottom
Baseline
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)
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
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 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 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 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 H-14, then save your
work
Adobe Dreamweaver CS4 - Illustrated
Inserting Text
Adobe Dreamweaver CS4 - Illustrated
Clue to Use
• Using nested tables
• Tables inside tables
• Click inside a cell before inserting a
new table
• Can be formatted differently
• Careful planning is important
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Importing and exporting tabular data
• Tabular data is data arranged in
columns and rows, and separated by a
delimiter
• Importing versus exporting
• Files 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
necessary
• 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
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 information
• Apply the body_text style to the
nested table text
• Save 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 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
Adobe Dreamweaver CS4 - Illustrated
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 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 browser
Adobe Dreamweaver CS4 - Illustrated
Formatting Cells
Adobe Dreamweaver CS4 - Illustrated
Clues to Use
• Using grids and guides for
positioning page content
• There are several View menu options to
help you position your page content
more precisely
• Grids
• Guides
• Distance
Adobe Dreamweaver CS4 - Illustrated
Adding Media Objects
•
•
•
•
•
Delete 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 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 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
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
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 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
Row
Adobe Dreamweaver CS4 - Illustrated
Adding Media Objects
• Edit the #footer rule as follows: Fontfamily: Arial, Helvetica, sans-serif; Fontsize: small; Font-style: italic; Text-align:
center
• Replace the Footer placeholder text with
The Striped Umbrella Copyright 2002 –
2012
• Save your work, preview the page in the
browser again, then close the browser
• Close 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
Dreamweaver
• Two 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 edited
• Editing must be done using the source file
• Select the movie placeholder on an open page of
Dreamweaver
• Click the Edit button on the Property inspector
Adobe Dreamweaver CS4 - Illustrated
Unit Summary
•
•
•
•
•
Understand table modes
Create a table
Resize tables, rows, and columns
Merge and split cells
Insert and align images in table cells
Adobe Dreamweaver CS4 - Illustrated
Unit Summary
•
•
•
•
Insert text
Format and modify cell content
Format cells
Add media objects
Adobe Dreamweaver CS4 - Illustrated