CHAPTER 5 Working with Data Tables and Inline Frames.

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 Frames 2

Housekeeping

◦ Add Chapter 5, if you haven’t already.

◦ Read the project on page 302


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.


Let’s start.◦Do pages 305-309 to open the new webiste and begin creating it.


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 310-316.


Creating a New Style Sheet


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.


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 317-322


Changing Table and Cell Properties


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.


Adding text & Images to a Table


Do pages 323-329

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 330-333


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 334-336


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 337-341


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 342-348


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 347-348Chapter 5: Working with Data Tables and Inline Frames 17

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.


Targeting Links in an I-Frame


Do pages 349-353

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.


What to do? What to do?

Homework

◦Practice test at www.scsite.com/ew3/learn

Labs

◦Cases and Places #1 – Creating a new Table, on page 365


CHAPTER 5 Working with Data Tables and Inline Frames.

Documents

Transcript of CHAPTER 5 Working with Data Tables and Inline Frames.