Multimedia and the World Wide Web HCI 201 Lecture Notes #4B.

Slides:



Advertisements
Similar presentations
The Web Wizards Guide to HTML Chapter Six Tables.
Advertisements

HTML Tags and Their Functions
Use Tables for Layout Control Day 7. You will learn to: Understand Tables Create a Simple Table Modify Your Tables Appearance Create Page Layouts with.
Chapter 3 – Web Design Tables & Page Layout
Multimedia and the World Wide Web HCI 201 Lecture Notes #5A.
Spanning Rows and Columns Mrs. Wilson Internet Basics & Beyond.
Creating Tables Text Tables -created by using preformatted tags. Graphical Tables - created using Table Structure with HTML.
New Perspectives on Creating Web Pages with HTML
Intermediate Level Course. Text Format The text styles, bold, italics, underlining, superscript and subscript, can be easily added to selected text. Text.
Tutorial 4: Designing a Web Page with Tables
CIS101 Introduction to Computing Week 07. Agenda Your questions Resume project Review Project Two HTML Project Three This week online Next class.
XHTML1 Tables and Lists. XHTML2 Objectives In this chapter, you will: Create basic tables Structure tables Format tables Create lists.
1 HTML Tables. 2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even the most complex tables use just the following three.
XP 1 New Perspectives on Creating Web Pages with HTML Tutorial 4: Designing a Web Page with Tables.
Multimedia and the World Wide Web HCI 201 Lecture Notes #4A.
XP 1 Designing a Web Page with Tables Tutorial 4 Creating a News Page.
Creating a Web Page with Tables. Objectives Create a text table with preformatted text Create the basic structure of a graphical table Organize table.
XP Creating Web Pages with HTML Using Tables. XP Objectives Create a text table Create a table using the,, and tags Create table headers and captions.
Using HTML Tables.
Instructor: A. Burns 1 HTML Tables. Instructor: A. Burns 2 Tables Tables can be a great help in overcoming HTML's vertical orientation. Even the most.
The Power of Tables They aren't just for sitting stuff on anymore...
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
HTML. Creating a Table Attributes: border: indicates the border type of the table Value: 0 (no border), 1, 2, etc. cols: indicates the number of columns.
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 06: Tables - Spring 2011.
Using HTML to Create Tables in Web pages Connie Lindsey November 2005.
XP 1 Tutorial 4 Designing a Web Page with Tables.
1 The Structure of a Web Table beginning of the table structure first row of three in the table end of the table structure table cells You do not need.
HTML Comprehensive Concepts and Techniques Second Edition Creating Tables in a Web Site October 23, 2012.
Chapter Objectives Discuss the relationship between page length, content placement, and usability Complete Step 4: Specify the website’s navigation system.
CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.
Web Design, 3 rd Edition 4 Planning a Successful Web Site: Part 2.
HTML Comprehensive Concepts and Techniques Second Edition Project 3 Creating Tables in a Web Site.
Tutorial 4: Using CSS for Page Layout. 2 Objectives Session 4.1 Explore CSS layout Compare types of floating layouts Examine code for CSS layouts View.
Chapter 5 Creating Page Templates
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
CO1552 – Web Application Development Lists, Special Characters, and Tables.
XP Using Frames in a Web Site Ali Alfayly. XP Tutorial Objectives Create frames for a Web site Control the appearance and placement of frames Control.
Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.
Actual Building the Pages Tables. Using Table Elements  To build effective page templates, you must be familiar with the HTML table elements and attributes.
Website Development with Dreamweaver
10/4/2015Tables1 Spring, 2008 Modified by Linda Kenney 4/2/08.
Adobe Dreamweaver CS3 Revealed CHAPTER FIVE: USING HTML TABLES TO LAY OUT A PAGE.
CNIT 132 – Week 7 HTML - Tables. Tables on the World Wide Web A table can be displayed on a Web page either in a text or graphical format. A text table:
Creating Tables in a Web Site
Designing a Web Page with Tables. A text table: contains only text, evenly spaced on the Web page in rows and columns uses only standard word processing.
XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 4 1 New Perspectives on Creating Web Pages with HTML Tutorial 4: Designing a.
Html Tables Basic Table Markup. How Tables are Used For Data Display Tables were originally designed to display and organize tabular data (charts, statistics,
Week 5 Working with Tables. 2 Understanding Table Basics.
CIS234A- Lecture 7 Instructor Greg D’Andrea. Tables A table can be displayed on a Web page either in a text or graphical format. A text table: – contains.
Basic Table Elements. 2 Objectives Define table elements Describe the steps used to plan, design, and code a table Create a borderless table with text.
Computer Science 101 Lists and Tables. Lists Unordered lists - use a bullet Ordered lists - use a number, Roman numeral, or letter.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.
CIS234A Lecture 8 Instructor Greg D’Andrea. Review Text Table contains only text, evenly spaced on the Web page in rows and columns uses only standard.
Unit 4 Create and Use Tables. TITLE CORNELL NOTES TOPIC: NOTES: Name: Date: 09/08/2009 Period : Summary: Reasons for using tables Unit 4 Page 1 Display.
CHAPTER 5 Working with Data Tables and Inline Frames.
Chapter 5 Creating Page Templates. Principles of Web Design 2nd Ed. Chapter 5 2 Principles of Web Design Chapter 5 Objectives Understand table basics.
Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.
Positioning Objects with CSS and Tables
Web Page Tables GMU-Teaching with Technology. Table Characteristics: Looks like a news page Contains columns and rows.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 5.
CIS101 Introduction to Computing Week 07 Spring 2004.
Designing a Web Page with Tables
Positioning Objects with CSS and Tables
Tables and Frames.
LAB Work 02 MBA 61062: E-Commerce
New Perspectives on Creating Web Pages with HTML
Fixed Positioning.
Using HTML Tables SWBAT: - create tables using HTML
Floating and Positioning
Positioning Objects with CSS and Tables
Presentation transcript:

Multimedia and the World Wide Web HCI 201 Lecture Notes #4B

2 What will we learn today? Spanning rows and columns Controlling page layout with tables Layout design 101 Grids bring order to the page Layout elements in tables Spacing and alignment with table Fixed vs. flexible tables

3 How to create a table like this: - Use table functions available in editing tools - Split cells - Merge cells Spanning cells Today’s opinion poll questionPolitical Party DemocratRepublicanIndependent “Do you favor or oppose increasing the minimum wage?” Favor 70%35%55% Oppose 25%60%30% Unsure 5% 15%

4 Spanning cells How to code in HTML?... value is the number of rows/columns that the cell will span within the table. Two columns, Two rows Three columnsr1 r2 Three rows r3 r4 r5 c1c2c3c4c5

5 //this row has 1 cell 1.Three columns //it has 3 cells //it has 3 cells Spanning columns 1. Three columns

6 //this row has 3 cells( s) 1.Three rows 2 3 //it has 2 cells 4 5 //it has 2 cells 6 7 Spanning rows 1. Three rows

Spanning rows and columns

8 Spanning rows and columns Nicole wants to change the table as follows: NameItem #Type & FinishPrice Bacchus48059Wall Mount Interior Plaster $ 95 Praying Gargoyle 48159Garden Figure Gothic Stone $ 125 Gargoyle Judge 48222BustInterior Plaster $ BustGothic Stone $ 155

9 Controlling page layout with tables Separate pages into different sections - Create one table for the entire page. - Add content into cells: Text Images Forms Tables … Link list Company logo Image

10 Controlling page layout with tables Process - Diagram the layout before you start writing the HTML code. - Prepare the content (text, image, etc.) in separate files, which you can insert into different cells later. - Create the table structure for the outer table first, then gradually work inward. - Insert comment tags to identify the different sections. - Indent the code for the various levels of nested tables, make your code easy to read. - Test and review the code as you proceed, catch errors early.

11 Controlling page layout with tables Design tips - - Make the layout table invisible:. -Create gutters and use cellpadding to keep your columns from crowding each other. - Separate content sections and provide visual interest. - Ensure the text flows from the top-down ( valign=top ). - Avoid making very narrow columns where the text is hard to read. (total columns <=3) - Let text flow around the relevant image

12 Layout design 101 Grids bring order to the page

13 Layout design 101 Grids bring order to the page - A balanced and consistently implemented design scheme will increase readers' confidence in your site. - No one design grid system is appropriate for all Web pages. - Process: - Establish a basic layout grid --- a graphic “backbone”. - Determine how the major blocks of illustrations will fit in the grid sections. - Without a firm underlying design grid, your project's page layout will be driven by the problems of the moment, and the overall design of your Web site will seem patchy and confusing.

14 Layout design 101 Layout elements in tables Line length - If eye traverses great distances on a page, the reader is easily lost and must hunt for the beginning of the next line. - Use tables to limit the line length, ideally to ten to twelve words per line. Margin - Separates the main text from nontext elements, also provides contrast and visual interest. - Use table cells to establish margins, and use them consistently throughout your site to provide unity.

15 Layout design 101 Layout elements in tables Columns - A multicolumn layout, with the page divided into columns of main text, site navigation, and perhaps a third column with links to related sites, provides a flexible space for variations in page layout and narrow the text column to a comfortable line length.

16 Layout design 101 Layout elements in tables Gutter : the space between columns that keeps columns from running into one another. Add empty cell Use “cellpadding” Use “cellspacing”

17 Layout design 101 Spacing and alignment with table Tables can be used to combine different text alignments on the page.

18 Layout design 101 Spacing and alignment with table Use invisible tables to control precisely the indent of a bullet list.

19 Layout design 101 Spacing and alignment with table Use invisible tables to control precisely the indent of a bullet list.

20 Layout design 101 Define a visual section with colored background Use the bgcolor attribute to color an entire table, a table row, or an individual cell. This is an easy, low-bandwidth approach to adding visual identity and structure to a page without relying on graphics. Working with images Tables give the designer much greater flexibility in positioning images on a page than simple inline image placement. You can use tables to create complex layouts that combine text and images or multimedia materials.

21 Layout design 101 Playing visual tricks with table Something fancy you can do with tables is to take a composite image, split it in pieces, and then recombine it in the cells of a table. This technique is useful for creating wrap- around effects, image captions, or rollovers.

22 Layout design 101 Playing visual tricks with table Something fancy you can do with tables is to take a composite image, split it in pieces, and then recombine it in the cells of a table. This technique is useful for creating wrap- around effects, image captions, or rollovers.

23 Layout design 101 Use fixed-width tables for precise layouts - Your page layout will be stable whatever the size of the user's screen or browser window. - You can fix the position of elements on the page and control typographic features such as line length and spacing. - Center the table in the browser window or design a background graphic to fill the empty areas of the large display screens.

24 Layout design 101 Use fixed-width tables for precise layouts Define cell widths with absolute values to keep the table from expanding to fill the window. Include an invisible image as wide as the cell to keep tables from collapsing when the browser window is too small.

25 Layout design 101 Use flexible tables for layouts that adapt Give up the control of your page design and come up with graphics and layouts that will still work under varying viewing conditions.

26 Layout design 101 Add little control over flexible tables (1)

27 Layout design 101 Add little control over flexible tables (2)

28 Assignment 3 (due on 02/02/2005) Write an HTML file that includes: - An ordered list, specifying attributes “type” and “start”. - Nest another unordered list into the above list. - A table with the following structure: (1) Specify border thickness, bordercolorlight, bordercolordark, cellspacing, and cellpadding. (2) Use different background colors to differentiate the spanned and un-spanned cells. (3) Same width for the 5 columns, same height for the 4 rows. - Use a table layout for your page, and “shape up” your code.