Transcript Chapter PowerPoint

Chapter 5
Positioning Objects with
CSS and Tables
© 2010 Delmar, Cengage Learning
Chapter Five Lessons
1.
2.
3.
4.
5.
6.
7.
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.
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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)
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 1: New Document Dialog Box
Preview of
selected layout
Layout options
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 2: CSS Blocks Defined by
Dotted Border
Dotted-line borders surround the CSS content
blocks
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 5: New Page Based on
CSS Layout
Attached
su_styles.css file
Blocks of content
based on
CSS layout
Styles created by
Dreamweaver
based on CSS
layout choice
© 2010 Delmar Cengage Learning
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.
© 2010 Delmar Cengage Learning
Fig. 6: Code View for CSS in Head
Content
Comments in gray
ID preceded
by # sign
Class name preceded
by period
© 2010 Delmar Cengage Learning
text
Fig. 9: Editing Code in the
Header Section
Delete these heading tags
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 11: CSS Styles Panel
Styles for external
style sheet
Styles for
pre-defined
CSS layout
© 2010 Delmar Cengage Learning
Fig. 13: Viewing the Div Tag
Properties
Border for div block
Properties of div tag
Class assigned to
div tag
Div ID = mainContent
© 2010 Delmar Cengage Learning
Fig. 15: Editing the Properties of the
two ColFixLtHdr #mainContent Rule
Select the
twoColFixLtHdr
#mainContent
rule
Change the
margin settings for
the block to 0 0 0
230px
© 2010 Delmar Cengage Learning
Fig. 16: Editing the Properties of the
two ColFixLtHdr #headerContent Rule
Select the
twoColFixLtHdr
#headerContent
rule
Change the
background color
value to #FFFFFF
© 2010 Delmar Cengage Learning
Fig. 19: Viewing Café Page in
the Browser
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 22: Sketch of Table on
Café Page
© 2010 Delmar Cengage Learning
Fig. 23: Table Dialog Box
Rows text box
Columns text box
Table width
text box
Click list arrow to
choose pixels or
percent
Border thickness
text box
Cell padding text box
Cell spacing text box
Accessibility
options
Top header
Summary text box
© 2010 Delmar Cengage Learning
Fig. 24: Expanded Table Mode
Expanded
Tables mode
button
Click “exit” to
return to Standard
mode
Standard
mode button
Expanded Tables
mode displays
more space
between cells for
easier editing
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 26: Selecting a Cell
Dimensions of column
widths are at the top of
each column
W text box Cell tag
© 2010 Delmar Cengage Learning
Insertion point is inside
the bottom-right cell
Fig. 27: Resizing the Row Height
Resizing pointer
© 2010 Delmar Cengage Learning
Fig. 28: Splitting a Cell into Two
Rows
Splits cell into
rows or columns
button
Selected cell
© 2010 Delmar Cengage Learning
Number of rows text box
Fig. 29: Resulting Split Cells
Two cells split from one cell
© 2010 Delmar Cengage Learning
Fig. 31: Code View for Merged Cells
Nonbreaking
spaces
colspan tag
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 33: Horizontally Aligning
Cell Contents
Horizontal alignment options
© 2010 Delmar Cengage Learning
Fig. 34: Image Inserted into
Table Cell
cheesecake.jpg
© 2010 Delmar Cengage Learning
Fig. 35: Aligning Image in Cell
Cheesecake photo
is centered within
cell
Horizontal alignment is set to center
© 2010 Delmar Cengage Learning
Inserting Text in a Table
• Type
• Copy/paste
• Import
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
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
© 2010 Delmar Cengage Learning
Fig. 36: Property Inspector Showing
Options for Selected Image
Property
inspector shows
properties for
selected image
Image selected
inside a cell
© 2010 Delmar Cengage Learning
Fig. 37: Property Inspector Showing
Options for Formatting a Cell
Insertion point
in cell
Property inspector
shows cell properties,
not image properties
© 2010 Delmar Cengage Learning
Fig. 38: Typing Text into Cells
Text typed
into cells
© 2010 Delmar Cengage Learning
Fig. 39: Formatting Text Using a
Cascading Style Sheet
paragraph_text style
bold_blue style
paragraph_text style
© 2010 Delmar Cengage Learning
Fig. 40: Formatting Cells Using
Horizontal and Vertical Alignment
Horz list arrow
Insertion point inside cell
with no elements selected
Vert list arrow
© 2010 Delmar Cengage Learning
Fig. 41: Hiding Visual Aids
Dotted lines
representing
borders are
hidden
Live view button
© 2010 Delmar Cengage Learning
Visual aids button