Tutorial 6 Creating Tables and CSS Layouts

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 2New Perspectives on Microsoft Expression Web 3.0

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.03

Overview Creating a Table New Perspectives on Microsoft Expression Web 3.04

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.05

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.06

Working with Tables New Perspectives on Microsoft Expression Web 3.07

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.08

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.09

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.010

Working with Tables New Perspectives on Microsoft Expression Web – Background Color – should not compete with text Background picture – can increase download time

Working with Tables New Perspectives on Microsoft Expression Web 3.012

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.013

Working with Tables New Perspectives on Microsoft Expression Web 3.014

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.015

Overview Using CSS Layouts New Perspectives on Microsoft Expression Web 3.016

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.017

Creating Web Page Layouts New Perspectives on Microsoft Expression Web 3.018

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.019

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 New Perspectives on Microsoft Expression Web Hover effect activates when pointer is over one of the links

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 New Perspectives on Microsoft Expression Web 3.021