tutorial 6 creating tables and css layouts. objectives session 6.1 – create a data table to...

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


Objectives

• Session 6.2– Create a template layout– Modify a layout– Create a navigation bar– Format a table using the Table AutoFormat feature


OverviewCreating a Table


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


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


Working with Tables


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


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


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


Working with Tables

– Background• Color – should not compete with text• Background picture – can increase download

time


Working with Tables


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


Working with Tables


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


OverviewUsing CSS Layouts


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



• 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



• 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



• 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

tutorial 6 creating tables and css layouts. objectives session 6.1 – create a data table to...

Documents

table new perspectives

table layout

table gridlines

tables new perspectives

table row

microsoft expression

table autoformat

table menu