© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables

© 2010 Delmar, Cengage Learning

Chapter 5

Positioning Objects with CSS and Tables

© 2010 Delmar Cengage Learning

Chapter Five Lessons

1. Create a page using CSS layouts.

2. Add content to CSS layout blocks.

3. Edit content in CSS layout blocks.

4. Create a table.

5. Resize, split, and merge cells.

6. Insert and align images in table cells.

7. Insert text and format cell content.


Positioning Objects with CSS

• With CSS page layouts, you use containers formatted with CSS styles to place content on web pages– images– blocks of text– a Flash movie– any other page element

• The appearance and position of the containers is set through the use of HTML tags known as div tags. – you can position elements next to each other as well

as on top of each other in a stack


Using Div Tags versus Tables

Tables• Control the

appearance of your web page

• Static and difficult to change on the fly

Div Tags• Control the

appearance of your web page

• Stack your information in a vertical pile

• Treated as their own documents so you can easily change its contents


Behaviors

• Behaviors in Dreamweaver are simple action scripts that allow you to incorporate interactivity by modifying style or content based on variables like user actions


Understanding Div Tags

• Div tags are HTML tags that define how areas of content are placed and formatted on a web page

• Div tags can be used to designate different colors for blocks of content, text that uses a CSS style, and many other properties

• AP Div Tag is a div tag that has a specified, fixed position on a web page (absolutely positioned)


Using CSS Page Layouts

• Dreamweaver provides 32 predesigned layouts in the New Document dialog box

• These layouts are used to place the page elements, rather than using tables

• Because div tags use CSS for formatting and positioning, they are the preferred method for building content for web pages

• Dreamweaver provides information about the blocks of CSS content on web pages by using outlines in Design view


Fig. 1: New Document Dialog Box

Preview of selected layout

Layout options


Viewing CSS Layout Blocks

• As you design web pages using div tags for page layout, you can use Design view to see and adjust CSS content blocks.– Defined by dotted borders


Fig. 2: CSS Blocks Defined by Dotted Border

Dotted-line borders surround the CSS content blocks


Fig. 3: Pre-defined Layout Selected for New Page

HTML Page Type

2 column fixed, left sidebar, header and folder Layout

Blank Page option selected


Fig. 5: New Page Based on CSS Layout

Blocks of content based on CSS layout

Attached su_styles.css file

Styles created by Dreamweaver based on CSS layout choice


Understanding CSS Code

• When you view a page based on a predesigned CSS in Code view, you will notice helpful comments that explain sections of the code– The CSS rules reside in the Head section. – The code for a CSS container begins with the

class, or name of the rule, and is followed by the ID, or the name of the container.

– A pound sign (#) precedes the ID.– The code that ties the rules to the content is

located in the body section.


Fig. 6: Code View for CSS in Head Content ID preceded

by # sign

Comments in gray text

Class name preceded by period


Fig. 9: Editing Code in the Header Section

Delete these heading tags


Edit Content in CSS Layout Blocks• Easy to modify the properties for individual

styles to change the way the content is placed or formatted on the page

• During the process of creating a page, you can attach an external style sheet to the page– External and internal style sheets for

page layout in the CSS Styles panel


Fig. 11: CSS Styles Panel

Styles for external style sheet

Styles for pre-defined

CSS layout


Fig. 13: Viewing the Div Tag Properties

Border for div block

Properties of div tag

Class assigned to

div tag

Div ID = mainContent


Fig. 15: Editing the Properties of the two ColFixLtHdr #mainContent Rule

Select the twoColFixLtHdr

#mainContentrule

Change the margin settings for the

block to 0 0 0 230px


Fig. 16: Editing the Properties of the two ColFixLtHdr #headerContent Rule

Select the twoColFixLtHdr

#headerContentrule

Change the background color

value to #FFFFFF


Fig. 19: Viewing Café Page in the Browser


Understanding Table Modes

• Grid layout on a page, such as a chart with text and numbers

• Some web pages based entirely on tables and some contain tables inside CSS layout blocks

• Standard or expanded mode


Creating a Table: Standard Mode

• Useful when you want to create a table with a specific number of columns and rows

• Use the Table dialog box to set:– Rows, columns, border thickness, table

width, cell padding, and cell spacing• Nested table is a table within a table


Expanded Tables Mode

• Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing

• Easier to actually see how many rows and columns you have in your table

• The Expanded Tables mode allows you to see each cell clearly


Planning a Table

• Sketch a plan for a table that shows its location on the web page and the placement of text and graphics in its cells

• Decide whether to include borders around the tables and cells. – Setting the border value to 0 causes the

table to appear invisible, so that viewers will not realize that you used a table for the page layout unless they look at the code


Setting Table Accessibility Preferences

• To make a table more accessible to visually handicapped viewers, add– Table caption– Table summary (does not appear on screen)– Table headers

Can be placed at the top or sides of table Are automatically centered and bold


Fig. 22: Sketch of Table on Café Page


Fig. 23: Table Dialog Box

Rows text box

Table width text box

Border thickness text box

Accessibility options

Columns text box

Click list arrow to choose pixels or percent

Cell padding text box

Cell spacing text box

Top header

Summary text box


Fig. 24: Expanded Table Mode

Click “exit” to return to Standard mode

Expanded Tables mode displays more space between cells for easier editing

Expanded Tables mode button

Standard mode button


Resize, Split, and Merge Cells

• You can resize the rows or columns manually or by entering numbers in the properties inspector

• You can also take one cell and split it into two or more cells

• You can take two or more cells and merge them into one cell


Fig. 26: Selecting a Cell

Dimensions of column widths are at the top of each column

W text box Cell tag Insertion point is inside the bottom-right cell


Fig. 27: Resizing the Row Height

Resizing pointer


Fig. 28: Splitting a Cell into Two Rows

Splits cell into rows or columns button

Selected cell Number of rows text box


Fig. 29: Resulting Split Cells

Two cells split from one cell


Fig. 31: Code View for Merged Cells

Nonbreaking spaces

colspan tag


Insert Images in Table Cells

• Use the Image command on the Images Menu on the Insert panel

• Drag it from the Assets panel into cell


Aligning Images in Table Cells

• You can align graphics horizontally and vertically within a cell– Use the Horz (or Vert) alignment option in

the Property inspector• To control spacing between cells, use cell

padding and cell spacing


Fig. 33: Horizontally Aligning Cell Contents

Horizontal alignment options


Fig. 34: Image Inserted into Table Cell

cheesecake.jpg


Fig. 35: Aligning Image in Cell

Cheesecake photo is centered within cell

Horizontal alignment is set to center


Inserting Text in a Table

• Type• Copy/paste• Import


Formatting Cell Content

• Select the contents in the cell, then apply formatting to it

• Can format each item individually or select the entire cell and format it


Formatting Cells

• Different than formatting cell content• Can include setting properties that visually

enhance the cell appearance– Cell width, background color, alignment

• Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector


Fig. 36: Property Inspector Showing Options for Selected Image

Property inspector shows properties for selected image

Image selected inside a cell


Fig. 37: Property Inspector Showing Options for Formatting a Cell

Insertion point in cell

Property inspector shows cell properties, not image properties


Fig. 38: Typing Text into Cells

Text typed into cells


Fig. 39: Formatting Text Using a Cascading Style Sheet

bold_blue style paragraph_text style

paragraph_text style


Fig. 40: Formatting Cells Using Horizontal and Vertical Alignment

Vert list arrow

Horz list arrow

Insertion point inside cell with no elements selected


Fig. 41: Hiding Visual Aids

Dotted lines representing borders are hidden

Live view button Visual aids button

Documents

© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables