Tutorial 6 Creating Tables and CSS Layouts Objectives

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 New Perspectives on Microsoft Expression Web 3. 0 2

Objectives • Session 6. 2 – Create a template layout – Modify a layout – Create a navigation bar – Format a table using the Table Auto. Format feature New Perspectives on Microsoft Expression Web 3. 0 3

Overview Creating a Table New Perspectives on Microsoft Expression Web 3. 0 4

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 5

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 6

Working with Tables New Perspectives on Microsoft Expression Web 3. 0 7

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 8

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 9

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 10

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

Working with Tables New Perspectives on Microsoft Expression Web 3. 0 12

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 13

Working with Tables New Perspectives on Microsoft Expression Web 3. 0 14

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 15

Overview Using CSS Layouts New Perspectives on Microsoft Expression Web 3. 0 16

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 17

Creating Web Page Layouts New Perspectives on Microsoft Expression Web 3. 0 18

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 19

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 20

Creating Web Page Layouts • Using the Table Auto. Format Feature – Quick method for table formatting • Select a set of table styles from a gallery of template styles • Save the document before applying an Auto. Format template • Apply an Auto. Format template before data is entered New Perspectives on Microsoft Expression Web 3. 0 21