chapter 5 working with data tables and inline frames
Post on 05-Jan-2016
240 Views
Preview:
TRANSCRIPT
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
Chapter 5: Working with Data Tables and Inline Frames 3
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 Frames 4
Let’s start.◦Do pages 305-309 to open the new webiste and begin creating it.
Chapter 5: Working with Data Tables and Inline Frames 5
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.
Chapter 5: Working with Data Tables and Inline Frames 6
Creating a New Style Sheet
Chapter 5: Working with Data Tables and Inline Frames 7
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 Frames 8
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
Chapter 5: Working with Data Tables and Inline Frames 9
Changing Table and Cell Properties
Chapter 5: Working with Data Tables and Inline Frames 10
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 Frames 11
Adding text & Images to a Table
Chapter 5: Working with Data Tables and Inline Frames 12
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
Chapter 5: Working with Data Tables and Inline Frames 13
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
Chapter 5: Working with Data Tables and Inline Frames 14
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
Chapter 5: Working with Data Tables and Inline Frames 15
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
Chapter 5: Working with Data Tables and Inline Frames 16
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.
Chapter 5: Working with Data Tables and Inline Frames 18
Targeting Links in an I-Frame
Chapter 5: Working with Data Tables and Inline Frames 19
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.
Chapter 5: Working with Data Tables and Inline Frames 20
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 21
top related