1. Positioning Objects with CSS and Tables
Chapter 6
Positioning Objects with CSS and Tables

2. © 2011 Delmar Cengage Learning
Chapter 6 Lessons
Create a page using CSS layouts
Add content to CSS layout blocks
Edit content in CSS layout blocks
Create a table
Resize, split, and merge cells
Insert and align images in table cells
Insert text and format cell content
© 2011 Delmar Cengage Learning

3. © 2011 Delmar Cengage Learning
Positioning Objects with CSS and Tables
CSS page layouts consist of containers formatted with CSS into which you place web content.
The appearance and position of the containers are set through the use of HTML tags known as div tags.
© 2011 Delmar Cengage Learning

4. © 2011 Delmar Cengage Learning
Positioning Objects with CSS and Tables
Tables are placeholders made up of small boxes called cells into which you can insert text and graphics.
Cells in a table are arranged:
Horizontally in rows
Vertically in columns
© 2011 Delmar Cengage Learning

5. © 2011 Delmar Cengage Learning
Positioning Objects with CSS and Tables
Behaviors are simple action scripts that let you incorporate interactivity by modifying content based on variables like user actions.
Designers prefer CSS layouts for page design and CSS tables for placing lists of data.
© 2011 Delmar Cengage Learning

6. © 2011 Delmar Cengage Learning
Positioning Objects with CSS and Tables
Tools You’ll Use
© 2011 Delmar Cengage Learning

7. © 2011 Delmar Cengage Learning
Create a Page Using CSS Layouts
An AP div tag creates a container that has a specified, fixed position on a web page.
An AP element is the resulting container that an AP div tag creates on a page.
© 2011 Delmar Cengage Learning

8. © 2011 Delmar Cengage Learning
Create a Page Using CSS Layouts
Dreamweaver CS5 provides 16 predesigned layouts for building a web page.
There are two types of CSS layouts:
A fixed layout
A liquid layout
© 2011 Delmar Cengage Learning

9. Create a Page Using CSS Layouts
Preview of selected layout
Preview of div tag layout
New Document dialog box
© 2011 Delmar Cengage Learning

10. © 2011 Delmar Cengage Learning
Create a Page Using CSS Layouts
You can use the Design view to see and adjust CSS content blocks.
Text and images that have been aligned or positioned using div tags have a dotted border.
© 2011 Delmar Cengage Learning

11. Create a Page Using CSS Layouts
Dotted-line borders
surround the CSS
content blocks
CSS blocks defined by dotted borders
© 2011 Delmar Cengage Learning

12. © 2011 Delmar Cengage Learning
Add Content to CSS Layout Blocks
Once you have created a layout with div tags, you should use CSS styles to format the text.
In the Code view, helpful comments are in gray to help you differentiate them from the rest of the code.
© 2011 Delmar Cengage Learning

13. Add Content to CSS Layout Blocks
Comments in gray text
Class name
preceded by
period
Rule
properties
Code view for CSS in head content
© 2011 Delmar Cengage Learning

14. © 2011 Delmar Cengage Learning
Edit Content in CSS Layout Blocks
You can edit a predesigned CSS layout.
If your CSS layout has both external and internal style sheets, you can change the rule properties.
The properties and values for the rule appear in the Properties pane.
© 2011 Delmar Cengage Learning

15. Edit Content in CSS Layout Blocks
Styles for external style sheet
Styles for predesigned CSS layout
SpryMenuBarHorizontal.css
styles
Viewing the CSS Styles panel
© 2011 Delmar Cengage Learning

16. © 2011 Delmar Cengage Learning
Create a Table
Tables are great when you need a grid layout on a page.
Expanded tables mode adds extra space between cells.
The border is the outline or frame around the table and individual cells and is measured in pixels.
© 2011 Delmar Cengage Learning

17. © 2011 Delmar Cengage Learning
Create a Table
When you place a table inside another table it is called a nested table.
Cell padding is the distance between cell content and the cell walls.
Cell spacing is the distance between cells.
© 2011 Delmar Cengage Learning

18. © 2011 Delmar Cengage Learning
Create a Table
When you use the Expanded Tables mode, it is easier for you to see how many rows and columns you have.
WYSIWYG is the acronym for What You See Is What You Get.
WYSIWYG means that your page looks the same in the browser as the web editor.
© 2011 Delmar Cengage Learning

19. © 2011 Delmar Cengage Learning
Create a Table
Click list arrow to choose
pixels or percent
Top Header
Summary text box
Accessibility
options
Table captions, headers and summaries provide information and add accessibility to users.
Table dialog box
© 2011 Delmar Cengage Learning

20. © 2011 Delmar Cengage Learning
Resize, Split, and Merge Cells
You can resize the rows or columns of a table by dragging.
Cells width or height is specified as a percentage; that percentage is maintained in relation to the width or height of the entire table if the table is resized.
© 2011 Delmar Cengage Learning

21. © 2011 Delmar Cengage Learning
Resize, Split, and Merge Cells
When you split a cell it means you divide it into multiple rows or columns.
To merge cells means to combine multiple cells into one cell.
When you merge cells, the HTML tag used to describe the merged cell changes from a width size tag to a column span or row span tag.
© 2011 Delmar Cengage Learning

22. Resize, Split, and Merge Cells
Merges selected cells
using spans button
Resulting merged cell
Merging selected cells into one cell
© 2011 Delmar Cengage Learning

23. © 2011 Delmar Cengage Learning
Insert and Align Images in Table Cells
You can insert images in the cells of a table using the Image command.
When you add a large image to a cell, the cell expands to accommodate the inserted image.
© 2011 Delmar Cengage Learning

24. © 2011 Delmar Cengage Learning
Insert and Align Images in Table Cells
You can align images both horizontally and vertically within a cell.
Horizontal alignment options
© 2011 Delmar Cengage Learning

25. © 2011 Delmar Cengage Learning
Insert Text and Format Cell Content
You can enter text into a table by:
Typing it directly into the cell
Copying it from another source and pasting it in
© 2011 Delmar Cengage Learning

26. © 2011 Delmar Cengage Learning
Insert Text and Format Cell Content
Text typed into cells
Typing text into cells
© 2011 Delmar Cengage Learning

27. © 2011 Delmar Cengage Learning
Insert Text and Format Cell Content
When you format a cell it can include setting properties that visually enhance the cell’s appearance.
To format a cell, expand the Property inspector to display cell formatting options.
© 2011 Delmar Cengage Learning