CHAPTER 5 Working with Data Tables and Inline Frames

Chapter Objectives ◦ Use a preformatted style sheet ◦ Insert a data table ◦ Change table and cell properties ◦ Add text and images ◦ Add rows and columns ◦ Merge and split table cells ◦Format a table using CSS ◦Convert text to a table ◦Use table AutoFormat ◦Distribute rows and columns ◦Create an inline frame ◦Target links in an inline frame Chapter 5: Working with Data Tables and Inline Frames2

Housekeeping ◦Add Chapter 5, if you haven’t already. ◦Read the project on page 302 Chapter 5: Working with Data Tables and Inline Frames3

Plan Ahead ◦Plan the basic table structure – use to provide consistency. Need to know how many rows, and columns you need. ◦Add and arrange table content – headings as needed, cells usually have text, but can hold images. Delete rows and columns you DON’T need. ◦Design the table – Do you want your table to be subtle or stand out? Colors can help you with that. ◦Organize existing content into the table – Can convert text already on your site into a table so you can align thaings and make them easier to read. ◦Add an inline frame to display a page –You can embed an HTML page into an inline frame to provide visitors with a view of the page while controlling the viewing size and not requiring an additional link. Chapter 5: Working with Data Tables and Inline Frames4

Let’s start. ◦Do pages to open the new webiste and begin creating it. Chapter 5: Working with Data Tables and Inline Frames5

Creating a New Style Sheet ◦Just as you can create a new Web page using a CSS layout of a new Web site using a template, you can create a new style sheet using a preformatted option that Expression Web provides. ◦It contains code that you can modify to suit your needs. ◦Do pages Chapter 5: Working with Data Tables and Inline Frames6

Creating a New Style Sheet Chapter 5: Working with Data Tables and Inline Frames7

Creating a Data Table ◦Used to list items and characteristics. (menus possibly) ◦Easy to SCAN the items ◦Should always have a caption to tell the visitor what they are looking at. ◦Tracer lines – cell divisions in a table are shown as dotted lines. Helps you line things up. Chapter 5: Working with Data Tables and Inline Frames8

Table Properties ◦Alignment ◦Borders ◦Background ◦Cell padding ◦Text alignment ◦Header Row – Should be bold and easily distinguishable from the rest of the table ◦By default – it will span 100% of the page width. ◦Do pages Chapter 5: Working with Data Tables and Inline Frames9

Changing Table and Cell Properties Chapter 5: Working with Data Tables and Inline Frames10

Adding Text & Images to a Table ◦In a blank table, all columns are the same width & rows are the same height. ◦To navigate in a table, you can use your mouse OR ◦TAB – To next cell in row, or next row if in last cell ◦Shift + TAB – Previous cell ◦Down Arrow – cell in row below ◦Up arrow – cell in row above ◦Right arrow – next cell ◦Left arrow – previous cell ◦You can also add images. May need to crop or resize them to fit appropriately in the cell. Chapter 5: Working with Data Tables and Inline Frames11

Adding text & Images to a Table Chapter 5: Working with Data Tables and Inline Frames12 Do pages

Adding Rows and Columns ◦Row – hit TAB after the current LAST CELL in the table ◦Use the Tables toolbar from the Table menu OR right click in a row or column to add rows/columns above or below! ◦There are several other properties you can manage on the table toolbar ◦Do pages Chapter 5: Working with Data Tables and Inline Frames13

Using Table Fill ◦Allows you to complete a column or row of data with the same content to save times. ◦Useful when most of all the data in a row or column is the same. ◦Do pages Chapter 5: Working with Data Tables and Inline Frames14

Merging Table Cells & applying styles ◦Merging – combining 2 or more adjacent cells ◦Splitting – creates 2 or more rows or columns within a cell ◦Do pages Chapter 5: Working with Data Tables and Inline Frames15

Converting Text to a Table ◦Sometimes you type something in and then later realize it would be better suited for a table. ◦To convert TEXT to a TABLE, it has to be delineated using commas, spaces, or tabs. ◦Do pages Chapter 5: Working with Data Tables and Inline Frames16

Using Table AutoFormat ◦This is a feature that offers predetermined formatting options for tables. ◦Once this is used, Expression Web creates and saves styles as inline styles, not to a style sheet. ◦Do pages Chapter 5: Working with Data Tables and Inline Frames17

Creating an I-Frame ◦Inline frame (I-frame) – way to embed one HTML file into another. ◦Helps control page size when it is viewed in a browser. ◦Helpful for displays tables or websites with large amounts of information the may not be of interest to all visitors. ◦Main page and the embedded file load in the browser separately. ◦Clicking on an item in the navigation bar can load a new embedded page to load without the browser having to reload the original page. Chapter 5: Working with Data Tables and Inline Frames18

Targeting Links in an I-Frame Chapter 5: Working with Data Tables and Inline Frames19 Do pages

What now? ◦Well, this is a neat concept, but with the advent of CSS, using frames and framesets is an outdated, non-standard techniques. ◦Many browsers have issues with frames. ◦These concepts are covered because you may encounter older web pages that used these techniques. Chapter 5: Working with Data Tables and Inline Frames20

What to do? Homework ◦ Practice test at /learn /learn Labs ◦Cases and Places #1 – Creating a new Table, on page 365 Chapter 5: Working with Data Tables and Inline Frames21