Chapter 5 Positioning Objects with  CSS and Tables
Chapter Five Lessons <ul><li>Create a page using CSS layouts. </li></ul><ul><li>Add content to CSS layout blocks. </li></u...
Positioning Objects with CSS <ul><li>With CSS page layouts, you use containers formatted with CSS styles to place content ...
Using Div Tags versus Tables <ul><li>Tables </li></ul><ul><li>Control the appearance of your web page </li></ul><ul><li>St...
Behaviors <ul><li>Behaviors in Dreamweaver are simple action scripts that allow you to incorporate interactivity by modify...
Understanding Div Tags <ul><li>Div tags are HTML tags that define how areas of content are placed and formatted on a web p...
Using CSS Page Layouts <ul><li>Dreamweaver provides 32 predesigned layouts in the New Document dialog box </li></ul><ul><l...
Fig. 1: New Document Dialog Box © 2010 Delmar Cengage Learning Preview of selected layout Layout options
Viewing CSS Layout Blocks <ul><li>As you design web pages using div tags for page layout, you can use Design view to see a...
Fig. 2: CSS Blocks Defined by Dotted Border © 2010 Delmar Cengage Learning Dotted-line borders surround the CSS content bl...
Fig. 3: Pre-defined Layout Selected for New Page © 2010 Delmar Cengage Learning HTML Page Type 2 column fixed, left sideba...
Fig. 5: New Page Based on CSS Layout © 2010 Delmar Cengage Learning Blocks of content based on  CSS layout Attached  su_st...
Understanding CSS Code <ul><li>When you view a page based on a predesigned CSS in Code view, you will notice helpful comme...
Fig. 6: Code View for CSS in Head Content © 2010 Delmar Cengage Learning ID preceded by # sign Comments in gray text Class...
Fig. 9: Editing Code in the Header Section © 2010 Delmar Cengage Learning Delete these heading tags
Edit Content in CSS Layout Blocks <ul><li>Easy to modify the properties for individual styles to change the way the conten...
Fig. 11: CSS Styles Panel © 2010 Delmar Cengage Learning Styles for external style sheet Styles for  pre-defined  CSS layout
Fig. 13: Viewing the Div Tag Properties © 2010 Delmar Cengage Learning Border for div block Properties of div tag Class as...
Fig. 15: Editing the Properties of the two ColFixLtHdr #mainContent Rule © 2010 Delmar Cengage Learning Select the twoColF...
Fig. 16: Editing the Properties of the two ColFixLtHdr #headerContent Rule © 2010 Delmar Cengage Learning Select the twoCo...
Fig. 19: Viewing Café Page in the Browser © 2010 Delmar Cengage Learning
Understanding Table Modes <ul><li>Grid layout on a page, such as a chart with text and numbers </li></ul><ul><li>Some web ...
Creating a Table: Standard Mode <ul><li>Useful when you want to create a table with a specific number of columns and rows ...
Expanded Tables Mode <ul><li>Allows you to change to a table view with expanded table borders and temporary cell padding a...
Planning a Table <ul><li>Sketch a plan for a table that shows its location on the web page and the placement of text and g...
Setting Table Accessibility Preferences <ul><li>To make a table more accessible to visually handicapped viewers, add </li>...
Fig. 22: Sketch of Table on  Café Page © 2010 Delmar Cengage Learning
Fig. 23: Table Dialog Box © 2010 Delmar Cengage Learning Rows text box Table width  text box Border thickness  text box Ac...
Fig. 24: Expanded Table Mode © 2010 Delmar Cengage Learning Click “exit” to return to Standard mode Expanded Tables mode d...
Resize, Split, and Merge Cells <ul><li>You can resize the rows or columns manually or by entering numbers in the propertie...
Fig. 26: Selecting a Cell © 2010 Delmar Cengage Learning Dimensions of column widths are at the top of each column W text ...
Fig. 27: Resizing the Row Height © 2010 Delmar Cengage Learning Resizing pointer
Fig. 28: Splitting a Cell into Two Rows © 2010 Delmar Cengage Learning Splits cell into rows or columns button Selected ce...
Fig. 29: Resulting Split Cells © 2010 Delmar Cengage Learning Two cells split from one cell
Fig. 31: Code View for Merged Cells © 2010 Delmar Cengage Learning Nonbreaking spaces colspan tag
Insert Images in Table Cells <ul><li>Use the Image command on the Images Menu on the Insert panel </li></ul><ul><li>Drag i...
Aligning Images in Table Cells <ul><li>You can align graphics horizontally and vertically within a cell </li></ul><ul><ul>...
Fig. 33: Horizontally Aligning Cell Contents © 2010 Delmar Cengage Learning Horizontal alignment options
Fig. 34: Image Inserted into Table Cell © 2010 Delmar Cengage Learning cheesecake.jpg
Fig. 35: Aligning Image in Cell © 2010 Delmar Cengage Learning Cheesecake photo is centered within cell Horizontal alignme...
Inserting Text in a Table <ul><li>Type </li></ul><ul><li>Copy/paste </li></ul><ul><li>Import </li></ul>© 2010 Delmar Cenga...
Formatting Cell Content <ul><li>Select the contents in the cell, then apply formatting to it </li></ul><ul><li>Can format ...
Formatting Cells <ul><li>Different than formatting cell content </li></ul><ul><li>Can include setting properties that visu...
Fig. 36: Property Inspector Showing Options for Selected Image © 2010 Delmar Cengage Learning Property inspector shows pro...
Fig. 37: Property Inspector Showing Options for Formatting  a Cell © 2010 Delmar Cengage Learning Insertion point  in cell...
Fig. 38: Typing Text into Cells © 2010 Delmar Cengage Learning Text typed  into cells
Fig. 39: Formatting Text Using a Cascading Style Sheet © 2010 Delmar Cengage Learning bold_blue style paragraph_text style...
Fig. 40: Formatting Cells Using Horizontal and Vertical Alignment © 2010 Delmar Cengage Learning Vert list arrow Horz list...
Fig. 41: Hiding Visual Aids © 2010 Delmar Cengage Learning Dotted lines representing borders are hidden Live view button V...
Upcoming SlideShare
Loading in …5
×

Dreamweaver chapter 05

2,473 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,473
On SlideShare
0
From Embeds
0
Number of Embeds
1,847
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Dreamweaver chapter 05

  1. 1. Chapter 5 Positioning Objects with CSS and Tables
  2. 2. Chapter Five Lessons <ul><li>Create a page using CSS layouts. </li></ul><ul><li>Add content to CSS layout blocks. </li></ul><ul><li>Edit content in CSS layout blocks. </li></ul><ul><li>Create a table. </li></ul><ul><li>Resize, split, and merge cells. </li></ul><ul><li>Insert and align images in table cells. </li></ul><ul><li>Insert text and format cell content. </li></ul>© 2010 Delmar Cengage Learning
  3. 3. Positioning Objects with CSS <ul><li>With CSS page layouts, you use containers formatted with CSS styles to place content on web pages </li></ul><ul><ul><li>images </li></ul></ul><ul><ul><li>blocks of text </li></ul></ul><ul><ul><li>a Flash movie </li></ul></ul><ul><ul><li>any other page element </li></ul></ul><ul><li>The appearance and position of the containers is set through the use of HTML tags known as div tags. </li></ul><ul><ul><li>you can position elements next to each other as well as on top of each other in a stack </li></ul></ul>© 2010 Delmar Cengage Learning
  4. 4. Using Div Tags versus Tables <ul><li>Tables </li></ul><ul><li>Control the appearance of your web page </li></ul><ul><li>Static and difficult to change on the fly </li></ul><ul><li>Div Tags </li></ul><ul><li>Control the appearance of your web page </li></ul><ul><li>Stack your information in a vertical pile </li></ul><ul><li>Treated as their own documents so you can easily change its contents </li></ul>© 2010 Delmar Cengage Learning
  5. 5. Behaviors <ul><li>Behaviors in Dreamweaver are simple action scripts that allow you to incorporate interactivity by modifying style or content based on variables like user actions </li></ul>© 2010 Delmar Cengage Learning
  6. 6. Understanding Div Tags <ul><li>Div tags are HTML tags that define how areas of content are placed and formatted on a web page </li></ul><ul><li>Div tags can be used to designate different colors for blocks of content, text that uses a CSS style, and many other properties </li></ul><ul><li>AP Div Tag is a div tag that has a specified, fixed position on a web page (absolutely positioned) </li></ul>© 2010 Delmar Cengage Learning
  7. 7. Using CSS Page Layouts <ul><li>Dreamweaver provides 32 predesigned layouts in the New Document dialog box </li></ul><ul><li>These layouts are used to place the page elements, rather than using tables </li></ul><ul><li>Because div tags use CSS for formatting and positioning, they are the preferred method for building content for web pages </li></ul><ul><li>Dreamweaver provides information about the blocks of CSS content on web pages by using outlines in Design view </li></ul>© 2010 Delmar Cengage Learning
  8. 8. Fig. 1: New Document Dialog Box © 2010 Delmar Cengage Learning Preview of selected layout Layout options
  9. 9. Viewing CSS Layout Blocks <ul><li>As you design web pages using div tags for page layout, you can use Design view to see and adjust CSS content blocks. </li></ul><ul><ul><li>Defined by dotted borders </li></ul></ul>© 2010 Delmar Cengage Learning
  10. 10. Fig. 2: CSS Blocks Defined by Dotted Border © 2010 Delmar Cengage Learning Dotted-line borders surround the CSS content blocks
  11. 11. Fig. 3: Pre-defined Layout Selected for New Page © 2010 Delmar Cengage Learning HTML Page Type 2 column fixed, left sidebar, header and folder Layout Blank Page option selected
  12. 12. Fig. 5: New Page Based on CSS Layout © 2010 Delmar Cengage Learning Blocks of content based on CSS layout Attached su_styles.css file Styles created by Dreamweaver based on CSS layout choice
  13. 13. Understanding CSS Code <ul><li>When you view a page based on a predesigned CSS in Code view, you will notice helpful comments that explain sections of the code </li></ul><ul><ul><li>The CSS rules reside in the Head section. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>A pound sign (#) precedes the ID. </li></ul></ul><ul><ul><li>The code that ties the rules to the content is located in the body section. </li></ul></ul>© 2010 Delmar Cengage Learning
  14. 14. Fig. 6: Code View for CSS in Head Content © 2010 Delmar Cengage Learning ID preceded by # sign Comments in gray text Class name preceded by period
  15. 15. Fig. 9: Editing Code in the Header Section © 2010 Delmar Cengage Learning Delete these heading tags
  16. 16. Edit Content in CSS Layout Blocks <ul><li>Easy to modify the properties for individual styles to change the way the content is placed or formatted on the page </li></ul><ul><li>During the process of creating a page, you can attach an external style sheet to the page </li></ul><ul><ul><li>External and internal style sheets for page layout in the CSS Styles panel </li></ul></ul>© 2010 Delmar Cengage Learning
  17. 17. Fig. 11: CSS Styles Panel © 2010 Delmar Cengage Learning Styles for external style sheet Styles for pre-defined CSS layout
  18. 18. Fig. 13: Viewing the Div Tag Properties © 2010 Delmar Cengage Learning Border for div block Properties of div tag Class assigned to div tag Div ID = mainContent
  19. 19. Fig. 15: Editing the Properties of the two ColFixLtHdr #mainContent Rule © 2010 Delmar Cengage Learning Select the twoColFixLtHdr #mainContent rule Change the margin settings for the block to 0 0 0 230px
  20. 20. Fig. 16: Editing the Properties of the two ColFixLtHdr #headerContent Rule © 2010 Delmar Cengage Learning Select the twoColFixLtHdr #headerContent rule Change the background color value to #FFFFFF
  21. 21. Fig. 19: Viewing Café Page in the Browser © 2010 Delmar Cengage Learning
  22. 22. Understanding Table Modes <ul><li>Grid layout on a page, such as a chart with text and numbers </li></ul><ul><li>Some web pages based entirely on tables and some contain tables inside CSS layout blocks </li></ul><ul><li>Standard or expanded mode </li></ul>© 2010 Delmar Cengage Learning
  23. 23. Creating a Table: Standard Mode <ul><li>Useful when you want to create a table with a specific number of columns and rows </li></ul><ul><li>Use the Table dialog box to set: </li></ul><ul><ul><li>Rows, columns, border thickness, table width, cell padding, and cell spacing </li></ul></ul><ul><li>Nested table is a table within a table </li></ul>© 2010 Delmar Cengage Learning
  24. 24. Expanded Tables Mode <ul><li>Allows you to change to a table view with expanded table borders and temporary cell padding and cell spacing </li></ul><ul><li>Easier to actually see how many rows and columns you have in your table </li></ul><ul><li>The Expanded Tables mode allows you to see each cell clearly </li></ul>© 2010 Delmar Cengage Learning
  25. 25. Planning a Table <ul><li>Sketch a plan for a table that shows its location on the web page and the placement of text and graphics in its cells </li></ul><ul><li>Decide whether to include borders around the tables and cells. </li></ul><ul><ul><li>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 </li></ul></ul>© 2010 Delmar Cengage Learning
  26. 26. Setting Table Accessibility Preferences <ul><li>To make a table more accessible to visually handicapped viewers, add </li></ul><ul><ul><li>Table caption </li></ul></ul><ul><ul><li>Table summary (does not appear on screen) </li></ul></ul><ul><ul><li>Table headers </li></ul></ul><ul><ul><ul><li>Can be placed at the top or sides of table </li></ul></ul></ul><ul><ul><ul><li>Are automatically centered and bold </li></ul></ul></ul>© 2010 Delmar Cengage Learning
  27. 27. Fig. 22: Sketch of Table on Café Page © 2010 Delmar Cengage Learning
  28. 28. Fig. 23: Table Dialog Box © 2010 Delmar Cengage Learning 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
  29. 29. Fig. 24: Expanded Table Mode © 2010 Delmar Cengage Learning 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
  30. 30. Resize, Split, and Merge Cells <ul><li>You can resize the rows or columns manually or by entering numbers in the properties inspector </li></ul><ul><li>You can also take one cell and split it into two or more cells </li></ul><ul><li>You can take two or more cells and merge them into one cell </li></ul>© 2010 Delmar Cengage Learning
  31. 31. Fig. 26: Selecting a Cell © 2010 Delmar Cengage Learning Dimensions of column widths are at the top of each column W text box Cell tag Insertion point is inside the bottom-right cell
  32. 32. Fig. 27: Resizing the Row Height © 2010 Delmar Cengage Learning Resizing pointer
  33. 33. Fig. 28: Splitting a Cell into Two Rows © 2010 Delmar Cengage Learning Splits cell into rows or columns button Selected cell Number of rows text box
  34. 34. Fig. 29: Resulting Split Cells © 2010 Delmar Cengage Learning Two cells split from one cell
  35. 35. Fig. 31: Code View for Merged Cells © 2010 Delmar Cengage Learning Nonbreaking spaces colspan tag
  36. 36. Insert Images in Table Cells <ul><li>Use the Image command on the Images Menu on the Insert panel </li></ul><ul><li>Drag it from the Assets panel into cell </li></ul>© 2010 Delmar Cengage Learning
  37. 37. Aligning Images in Table Cells <ul><li>You can align graphics horizontally and vertically within a cell </li></ul><ul><ul><li>Use the Horz (or Vert) alignment option in the Property inspector </li></ul></ul><ul><li>To control spacing between cells, use cell padding and cell spacing </li></ul>© 2010 Delmar Cengage Learning
  38. 38. Fig. 33: Horizontally Aligning Cell Contents © 2010 Delmar Cengage Learning Horizontal alignment options
  39. 39. Fig. 34: Image Inserted into Table Cell © 2010 Delmar Cengage Learning cheesecake.jpg
  40. 40. Fig. 35: Aligning Image in Cell © 2010 Delmar Cengage Learning Cheesecake photo is centered within cell Horizontal alignment is set to center
  41. 41. Inserting Text in a Table <ul><li>Type </li></ul><ul><li>Copy/paste </li></ul><ul><li>Import </li></ul>© 2010 Delmar Cengage Learning
  42. 42. Formatting Cell Content <ul><li>Select the contents in the cell, then apply formatting to it </li></ul><ul><li>Can format each item individually or select the entire cell and format it </li></ul>© 2010 Delmar Cengage Learning
  43. 43. Formatting Cells <ul><li>Different than formatting cell content </li></ul><ul><li>Can include setting properties that visually enhance the cell appearance </li></ul><ul><ul><li>Cell width, background color, alignment </li></ul></ul><ul><li>Select the cell or place the insertion point inside the cell, then choose the cell formatting options in the Property inspector </li></ul>© 2010 Delmar Cengage Learning
  44. 44. Fig. 36: Property Inspector Showing Options for Selected Image © 2010 Delmar Cengage Learning Property inspector shows properties for selected image Image selected inside a cell
  45. 45. Fig. 37: Property Inspector Showing Options for Formatting a Cell © 2010 Delmar Cengage Learning Insertion point in cell Property inspector shows cell properties, not image properties
  46. 46. Fig. 38: Typing Text into Cells © 2010 Delmar Cengage Learning Text typed into cells
  47. 47. Fig. 39: Formatting Text Using a Cascading Style Sheet © 2010 Delmar Cengage Learning bold_blue style paragraph_text style paragraph_text style
  48. 48. Fig. 40: Formatting Cells Using Horizontal and Vertical Alignment © 2010 Delmar Cengage Learning Vert list arrow Horz list arrow Insertion point inside cell with no elements selected
  49. 49. Fig. 41: Hiding Visual Aids © 2010 Delmar Cengage Learning Dotted lines representing borders are hidden Live view button Visual aids button

×