1 / 26

Chapter 20

Chapter 20. Using Tables and CSS for Web Page Layout. Chapter 20 Objectives. Explain the design of Web tables Flow text and pictures into table cells Recognize HTML tags for tables Understand cascading style sheets Define the three kinds of CSS Understand CSS for advanced Web page layout.

willa-mack
Download Presentation

Chapter 20

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 20 Using Tables and CSS for Web Page Layout

  2. Chapter 20 Objectives • Explain the design of Web tables • Flow text and pictures into table cells • Recognize HTML tags for tables • Understand cascading style sheets • Define the three kinds of CSS • Understand CSS for advanced Web page layout

  3. What is a Table? • A table is a design element that divides the screen into rectangular regions called cells • Tables became part of the HTML standard in 1996 • Before 1996, Web pages were limited to a single column of information

  4. What is a Table? • A table has a boundary (grid) and content area (cells) • Text and graphics are aligned in the grid • The grid can be either visible or invisible • HTML controls border thickness

  5. Figure 20-2 Tables create rectangular regions used as design elements in advanced Web page layout

  6. Why Use Tables? • To present data neatly in rows and columns that facilitate user insight --Note the extensive use of tables in this text • To create rectangular sections for inserting blocks of text or graphics --Tables can be any size, any number, and embedded in other tables for interesting designs

  7. Creating a Table With Dreamweaver, follow the steps in Table 20-1 Figure 20-4 Dreamweaver’s Table dialog

  8. Creating a Table With FrontPage, follow the steps in Table 20-2 Figure 20-6 The FrontPage Insert Table dialog

  9. Creating a Table With Nvu, follow the steps in Table 20-3 Figure 20-7 Nvu’s Insert Table dialog

  10. Entering Data into a Table • Click inside any cell and type data • Move from cell to cell with the Tab key • Shift-Tab will move you back one cell • You can change the font, color, size, appearance, or text justification • Follow the steps in Table 20-4 • You can adjust the parameters • Follow the steps in Table 20-5

  11. Inspecting Your HTML The typical table uses the table tags in the following structure:

  12. Making Data Tables Accessible • Section 508 of the 1973 Rehabilitation Act says Web data tables must have recognized row and column headers • Example table of world’s highest mountains Note: use <th> and </th> instead of <td> and </td> to define table headers

  13. Putting Images Inside Table Cells • Images can be inserted in any table cell • If the image is larger than the cell, the cell will expand • To insert an image in a table cell, follow the steps in Table 20-6

  14. Subdividing Table Cells • Table cells can be divided by choosing the option to split it • There is no limit to the number of different layouts, which allows many different patterns of rectangular regions on a screen • To create a table inside a cell, follow the steps in Table 20-7

  15. Expanding Cell Rows and Columns • The default for each cell is one row and one column • However, cells can be expanded over several rows and columns • To expand a cell, follow the steps in Table 20-8

  16. Figure 20-12 This Web page has a table inside a table. This kind of design lets you create a design structure that functions independently of the cells in the outer table Figure 20-13 Layout analysis of Figure 20-12. Study this analysis to visualize how the tables provide the structure for the page content

  17. Cascading Style Sheets (CSS) • A cascading style sheet (CSS) is a set of rules that define styles to be applied to entire Web pages or individual Web page elements • Each rule consists of a selector followed by a set of curly braces containing style properties and their values

  18. Cascading Style Sheets (CSS) • Example of CSS style definitions

  19. Kinds of Cascading Style Sheets • There are three ways of applying CSS • An external CSS keeps all of the style definitions in a separate CSS file • An embedded CSS is a style sheet that is copied into the <head> section of the Web page • An inline CSS is a style sheet that applies only to one page element

  20. Why CSS Style Sheets Are Called Cascading • The term cascading refers to the way a CSS inherits rules defined by style sheets earlier on the page • With links to multiple external CSS, the styles on each CSS cascade to the next • An embedded style sheet inherits rules defined earlier • An inline CSS can redefine a rule set earlier on the cascade

  21. Using CSS to Define the Style of an HTML Tag • Fortunately, Dreamweaver, FrontPage, and Nvu all have built-in style sheet editors • The following exercises show how to create style sheets without getting too technical

  22. CSS Style Sheet Exercises • Create an embedded style sheet that makes the H1 heading style dark blue • To learn how to do this, follow the steps in Table 20-9 • Change the color of an anchor tag’s hover state • Result: When a user mouses over your link, the color changes • To add this effect, follow the steps in Table 20-10

  23. CSS Style Sheet Exercises • Create a style class in a subdued style that can be applied to any text • For example, a trailer heading in a smaller font (See Table 20-11) • Inspect HTML span tags • Check the trailer HTML in your resume Note: the class attribute identifies the style class that applies to the scan

  24. Creating Web Page Layouts Via CSS Layers • CSS layers can position blocks of text and graphics onscreen • In Design view, • Drag the corners and edges of divisions to create different layouts onscreen • Make the borders visible or invisible • Layer divisions to make them overlap • Table 20-12 shows how to create various layers

  25. Creating Web Page Layouts Via CSS Layers Table 20-12 How to design a Web page layout with CSS layers ►Accessing Web page creation software

  26. Cascading Style Sheets (CSS) • CSS is an invention of the World Wide Web Consortium (W3C) • To learn more about current CSS, go to www.w3.org/TR/CSS-access

More Related