© 2011 Delmar, Cengage Learning Chapter 11 Adjusting Colors.
© 2010 Delmar, Cengage Learning Chapter 5 Positioning Objects with CSS and Tables.
-
Upload
rickey-cutts -
Category
Documents
-
view
227 -
download
1
Transcript of © 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.
© 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
Blocks of content based on CSS layout
Attached su_styles.css file
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 ID preceded
by # sign
Comments in gray text
Class name preceded by period
© 2010 Delmar Cengage Learning
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
#mainContentrule
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
#headerContentrule
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
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
© 2010 Delmar Cengage Learning
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
© 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 Insertion point is inside the bottom-right cell
© 2010 Delmar Cengage Learning
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 Number of rows text box
© 2010 Delmar Cengage Learning
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
bold_blue style paragraph_text style
paragraph_text style
© 2010 Delmar Cengage Learning
Fig. 40: Formatting Cells Using Horizontal and Vertical Alignment
Vert list arrow
Horz list arrow
Insertion point inside cell with no elements selected
© 2010 Delmar Cengage Learning
Fig. 41: Hiding Visual Aids
Dotted lines representing borders are hidden
Live view button Visual aids button