Upload
lesley-alexia-armstrong
View
227
Download
4
Tags:
Embed Size (px)
Citation preview
Tutorial 6
Creating Tables and CSS Layouts
New Perspectives on Microsoft Expression Web 3.0 2
Objectives
• Session 6.1– Create a data table to display and organize data– Modify table properties and layout– Input data into a table– Insert and delete rows and columns– Merge table cells
New Perspectives on Microsoft Expression Web 3.0 3
Objectives
• Session 6.2– Create a template layout– Modify a layout– Create a navigation bar– Format a table using the Table AutoFormat feature
New Perspectives on Microsoft Expression Web 3.0 4
OverviewCreating a Table
New Perspectives on Microsoft Expression Web 3.0 5
Working with Tables
• HTML Tables– Until recently, HTML tables were used to organize
data and to create page layout– Now, CSS is the preferred method for creating
page layout• Data Table– Used to align text and numbers in columns and
rows
New Perspectives on Microsoft Expression Web 3.0 6
Working with Tables
• Creating Tables– Cell• Intersection between a table row and a table
column– Expression Web displays tracer lines• Dotted lines that outline each table cell
– Create table by clicking the Table menu• Click Insert Table
New Perspectives on Microsoft Expression Web 3.0 7
Working with Tables
New Perspectives on Microsoft Expression Web 3.0 8
Working with Tables
• Setting the Table Properties– Table Borders• Horizontal and vertical ruled lines inside and
outside the table• Often called the table gridlines or the table grid• By default, the table does not show gridlines• To see table borders in a browser, create a
border width of at least one pixel
New Perspectives on Microsoft Expression Web 3.0 9
Working with Tables
– Table Borders Layout• Alignment – left, right, center• Float–Controls way text wraps around the table
• Cell Padding–White space that surrounds contents of a
cell• Cell Spacing –distance between cells
• Height–Not set by default
New Perspectives on Microsoft Expression Web 3.0 10
Working with Tables
• Width• Size–Controls size of the outside table borders
• Color–Controls color of the outside table border
• Collapse– if checked, a single-ruled line is used for
interior gridlines rather than a double-ruled line
New Perspectives on Microsoft Expression Web 3.0 11
Working with Tables
– Background• Color – should not compete with text• Background picture – can increase download
time
New Perspectives on Microsoft Expression Web 3.0 12
Working with Tables
New Perspectives on Microsoft Expression Web 3.0 13
Working with Tables
• Modifying the Table Layout– Add rows above or below an existing row– Add columns to the left or right of an existing
column– Add colored borders to interior cells using the Cell
Properties dialog box– Add duplicate data to cells using the Table Fill
feature– Quickly adjust column widths by using the
Distribute Columns Evenly button on Tables toolbar
New Perspectives on Microsoft Expression Web 3.0 14
Working with Tables
New Perspectives on Microsoft Expression Web 3.0 15
Working with Tables
• Merging and Splitting Cells– Merging combines cells– Splitting divides cells
• Other Options– Center text horizontally and vertically– Change font and font color– Change foreground and background colors
New Perspectives on Microsoft Expression Web 3.0 16
OverviewUsing CSS Layouts
New Perspectives on Microsoft Expression Web 3.0 17
Creating Web Page Layouts
• Working with the Div Element– Div element does not apply any formatting to text– Purpose is to provide structure to a Web page– Formatted using the CSS ID selector• Creates unique formatting on a Web page
– Template layouts• Are predefined page layouts created by EW• Create page divisions using div element• Once created, text can be added to each division
New Perspectives on Microsoft Expression Web 3.0 18
Creating Web Page Layouts
New Perspectives on Microsoft Expression Web 3.0 19
Creating Web Page Layouts
• Creating a Navigation Bar for the Left Column– Usually contains links to other pages in Web site– Can use an unordered list to create links
New Perspectives on Microsoft Expression Web 3.0 20
Creating Web Page Layouts
• Creating Link Styles– Page Properties can be used to change link colors– Create styles to remove underscores for unvisited
links and to create hover effects
Hover effect activates when pointer is over one of the links
New Perspectives on Microsoft Expression Web 3.0 21
Creating Web Page Layouts
• Using the Table AutoFormat Feature– Quick method for table formatting• Select a set of table styles from a gallery of
template styles• Save the document before applying an
AutoFormat template• Apply an AutoFormat template before data is
entered