Embed Size (px)
Citation preview
Create a table
Resize, split and merge cells
Insert and align graphics within table cells
Insert text and format cell content
Maintain Web site
Working with Tables
Anatomy of a Table
Cell
Border
Row
Cell Spacing
Anatomy of a Cell
CellVertical alignment
Horizontal alignment
Width
Height
Text Wrap
Border color
Border width
Background image
Background color
Anatomy of a Row
Row
Vertical alignment
Horizontal alignment
Width
Height
Text Wrap
Border color
Border width
Background image
Background color
Anatomy of a TableRows
Columns
Width
Cell padding
Cell spacing
Alignment
Border color
Border width
Background color
Background graphic
table
Standard ViewRows
Columns
Width
Cell padding
Cell spacing
Border width
Layout ViewRows
Columns
Width
Cell padding
Cell spacing
Border width
Draw table Draw cell
Cell Padding
No cell padding 10 point cell padding
Table Width 800x600 resolution
Browser: 800 pixels
Table: 760 pixels
AccessibilityCaption
Caption alignment
Summary
Headers
Edit Preferences to remind you!
Resize Cells(resize column width)
…or specify
Drag…
Resize Cells(resize row height)
Drag or specify in Properties
Resize Table(resize all row heights and column widths)
Drag or…
specify
Split Cells
Table HTML
Table tag
Table rowtags
Table data(cell) tags
Table close tag</table> (not shown)
Nested Tables
Table withina table cell
Add Graphics to aTable Cell
Drag,…
…or browse
Point,…
Align Graphics in aTable Cells
Cascading Alignment– Text <div>
– Cell <td>
– Image <img>
Align Graphics in aTable Cells
Cell properties align the cell contents
Image properties align the image tothe cell
Insert Text
Type
Copy/PasteImport delimited text file
Where is your cursor?
Where is your cursor?
Cell properties
Image properties
Importing Text
Delimited text file– Export as delimited text from:
• Spreadsheet programSpreadsheet program• Database programDatabase program
– Import tabular data to Dreamweaver
Web Site Maintenance
•Broken links (Link Checker)•Orphaned files (Link Checker)•Unused images (assets panel)•Web-safe colors (assets panel)• Untitled documents (reports)• Alternative text (reports)• Navigational structure (site map)• Upload and view site on a variety of
computers
Link Checker
Broken links
Orphaned files
Assets panel
Unused images?
non-Web colors?
Reports
√
√
√
√
√
Check forclean code
Site map
Check for clean, logical structure
Test in a variety ofenvironments
Platforms
Browsers
Monitor size
Connection speed
Processor speed
Unit SummaryWorking with Tables
Resize, split and merge cells
Add and align graphics in table cells
Add text and format cell content
Perform Web site maintenance
