Dreamweaver Ch05
-
Upload
fucilef -
Category
Technology
-
view
1.395 -
download
3
Transcript of Dreamweaver Ch05
Adobe Dreamweaver CS3 Revealed
CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE
Chapter 5 Lessons
1. Create a table
2. Resize, split, and merge cells
3. Insert and align images in table cells
4. Insert text and format cell content
Tables
Are placeholders made up of small boxes (cells), into which you can insert text and graphics
Consist of cells
Arranged horizontally in rows and vertically in columns
Give you control over the placement of each object
Inserting Graphics and Textin Tables
Control placement of elements in relation to each other
Specify amount of space between each page element
Always plan how your table will look with all the text and graphics in it
Even a rough sketch will save you time
Create a Table
Understanding table modes
Creating a table in standard mode
Planning a table
Setting table accessibility preferences for tables
Drawing a table in layout mode
Understanding Table Modes
There are two ways to create a table:
Click Table on the Insert bar
Click View, Table Mode, Layout Mode; then click the Draw Layout Table button or the Draw Layout Cell button
Anatomy of a Table
Cell
Border
Row
Cell Spacing
Anatomy of a Cell
Vertical alignment
Horizontal alignment
Width
Height
Text Wrap
Border color
Border width
Background image
Background color
Cell
Anatomy of a Row
Vertical alignment
Horizontal alignment
Width
Height
Text Wrap
Border color
Border width
Background image
Background color
Row
Anatomy of a Table
Rows
Columns
Width
Cell padding
Cell spacing
Alignment
Border color
Border width
Background color
Background graphic
table
Standard Mode
Useful when you want to create a table with a specific number of columns and rows
Use the Table dialog box to set:
Rows, columns, border thickness, table width, cell padding, and cell spacing
Planning a Table
Sketch a plan for a table that shows its location on the Web page and the placement of text and graphics in its cells
Decide whether to include borders around the tables and cells.
Setting the border value to 0 causes the table to appear invisible, so that viewers will not realize that you used a table for the page layout unless they look at the code
Accessibility Preferences
To make a table more accessible to visually handicapped viewers, add
Table caption
Table summary (does not appear on screen)
Table headers
Can be placed at the top or sides of table
Are automatically centered and bold
Drawing a Table in Layout Mode
Ideal when placing elements on a Web page without specifying number of rows and columns
Draw Layout Cell button
Layout Table button
Fig. 3: Sketch of Table on Café Page
Table properties
Header options
Accessibility options
Fig. 4: Table Dialog Box
Expanded Tables Mode
Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing
Easier to actually see how many rows and columns you have in your table
The Expanded Tables mode allows you to see each cell clearly
Displays more space between cells for
easier editing
Fig. 6: Expanded Tables Mode
Table displayed in layout mode
Layout tab
Fig. 8: Table in Layout Mode
Standard mode button
Expanded mode button
Resize, Split and Merge Cells
You can resize the rows or columns manually or by entering numbers in the properties inspector
You can also take one cell and split it into two or more cells
You can take two or more cells and merge them into one cell
Cell tag icon
W text box
Selected cell
Fig. 9: Selecting a Cell
Resizing pointer
Fig. 10: Resizing the Row Height
Number of rows text box
Splits cell into Rows or Columns button
Fig. 11: Splitting a Cell into Two Rows
Two cells split from one
Fig. 12: Splitting One Cell into Two
colspan tag
Fig. 14: Code View for Merged Cells
Insert Images in Table Cells
Use the Image command on the Images Menu on the Insert bar
Drag it from the Assets panel into cell
Aligning Images in Table Cells
You can align graphics horizontally and vertically within a cell
Use the Horz (or Vert) alignment option in the Property inspector
To control spacing between cells, use cell padding and cell spacing
Vertical alignment options
Fig. 16: Vertically Aligning Cell Contents
cafe_logo.gif
cheesecake.jpg
Fig. 18: Images Inserted into Cells
Centered banner and navigation bar
Centered logo
Centered cheesecake
photo Left-aligned cafe photo
Fig. 20: Aligning Images in Cells
Inserting Text in a Table
Type
Copy/paste
Import
Format Cell Content
Easier to do in Standard mode than in Layout mode
Select the contents in the cell, then apply formatting to it
Can format each item individually or select the entire cell and format it
Formatting Cells
Different than formatting cell content
Can include setting properties that visually enhance the cell appearance
Cell width, background color, alignment
Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector
Image selected inside a cell
Properties for selected graphic
Fig. 21: Property Inspector Showing Options for Formatting Cell Contents
Properties for selected cell,
not image
Insertion point in cell
Fig. 22: Property Inspector Showing Options for Formatting a Cell
Imported text describing the cafe
Text typed into cell
Fig. 23: Importing and Typing Text into Cells
Importing Text
Can import delimited text file
Export as delimited text from
Spreadsheet program
Database program
Import tabular data to Dreamweaver
Top row header
Nested table
Fig. 25: Adding Nested Tables
Vert and Horz list arrows
Insertion point inside cell with no elements selected
Fig. 27: Formatting Cells Using Horizontal Alignment
Hide all visual aids option
Visual aids button
Fig. 29: Hiding Visual Aids
Dotted lines show borders are hidden
Chapter 5 Tasks
Create a table
Resize, split, and merge cells
Insert and align images in table cells
Insert text and format cell content