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

© 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

© 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

© 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

© 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

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

© 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

© 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

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

© 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

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

© 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

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

© 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

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

© 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

© 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

© 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

© 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

© 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

© 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

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

© 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

© 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

© 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

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

© 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