Chapter 6

1. Chapter 6 Positioning Objects with CSS and Tables

2. Chapter 6 Lessons Introduction • Create a page using CSS layouts • Add content to CSS layout blocks • Edit and format CSS layout blocks • Create a table • Resize, split, and merge cells • Insert and align images in table cells • Insert text and format cell content

3. Introduction Positioning Objects with CSS • With CSS page layouts, you use containers formatted with CSS styles to place content on web pages • Containers can be set to accommodate: • 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 • Div tags can allow you to: • position elements next to each other as well as on top of each other in a stack

4. Introduction Positioning Objects with Tables • Tables can also be used for controlling the placement of page elements • Tables are placeholders made up of small boxes called cells, in which you can insert text and graphics • Cells in a table are arranged in rows (horizontally) and columns (vertically)

5. Introduction 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 • Can create JavaScript behaviors • Simple action scripts that let you incorporate interactivity

6. Lesson 1: Create a Page Using CSS Layouts 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)

7. Lesson 1: Create a Page Using CSS Layouts Using CSS Page Layouts • Dreamweaver provides 18 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

8. Lesson 1: Create a Page Using CSS Layouts New Document Dialog Box Preview of selected layout Layout options

9. Lesson 1: Create a Page Using CSS Layouts New Document Dialog Box • HTML5 Layouts: • 2 or 3 column layouts • These layouts include new HTML tags to support semantic markup such as <section>, <header>, <footer>, <article>, and <aside> • CSS Layouts: • Fixed layout expresses all widths in pixels and remains the same size regardless of the size of the browser window • Liquid layout expresses all widths in percents and changes size depending on the size of the browser window

10. Lesson 1: Create a Page Using CSS Layouts 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

11. Lesson 1: Create a Page Using CSS Layouts 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 Dotted-line borders surround the CSS content blocks

12. Lesson 2: Add Content to CSS Layout Blocks 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 • The code that ties the rules to the content is located in the body section

13. Lesson 2: Add Content to CSS Layout Blocks Code View for CSS in Head Content Tag name Comments in gray text Class name preceded by period

14. Lesson 2: Add Content to CSS Layout Blocks Adding Content to CSS Layout Blocks • As with formatting text on a web page, you should use CSS styles to format text in div tags • You can also add all other properties such as text indents, padding, margins, and background color using CSS styles to layout blocks

15. Lesson 3: Edit Content in CSS Layout Blocks 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 • In CSS Styles Panel • Code View – Head Content area of code • 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

16. Lesson 3: Edit Content in CSS Layout Blocks CSS Styles Panel Styles for external style sheet Style sheet for Spry menu bar (saved in SpryAssets folder) Styles for pre-defined CSS layout

17. Lesson 4: Create a Table Understanding Table Modes • Good when you need: • 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 • Have option of viewing Table in either Standard or Expanded mode • To Create a table: 1. Insert PanelTableor 1. Switch Insert Panel to Layout Option Table or 1. Application Bar Insert  Table 2. Modify Settings in Table Dialog box

18. Lesson 4: Create a Table 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 – outline or frame around table • Table width – %(can change) or pixels (fixed) • Cell padding – distance between cell content and cell wall • Cell spacing – distance between cells • Nested table is a table within a table • WYSIWYG View – Acronym - What You See Is What You Get

19. Lesson 4: Create a Table Table Dialog Box Columns text box Rows text box Click list arrow to choose pixels or percent Table width text box Border thickness text box Cell padding text box Cell spacing text box Accessibility options Top header Summary text box

20. Lesson 4: Create a Table Standard Table Mode Expanded Tables mode button Standard mode button Standard Tables mode displays table as it would appear in Web browser

21. Lesson 4: Create 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 • each cell clearly

22. Lesson 4: Create a Table Expanded Table Mode Expanded Tables mode button Click “exit” to return to Standard mode Expanded Tables mode displays more space between cells for easier editing Standard mode button

23. Lesson 4: Create a Table Standard v. Expanded View Expanded View Standard View

24. Lesson 4: Create a Table 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

25. Lesson 4: Create a Table Setting Table Accessibility Preferences • To make a table more accessible to visually handicapped viewers, add • Table caption • appears at the top of a table and describes the table contents • Table summary (does not appear on screen) • Table headers • Can be placed at the top or sides of table • Are automatically centered and bold

26. Lesson 5: Resize, Split, and Merge Cells 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 multiple rows or columns • Select Cell • Click on Split Cells in Table Property Inspector • Use Split Cells dialog box to specify how to split • You can take two or more cells and merge them into one cell • Select Cells • Click on Merge Cells in the Table Property Inspector • the HTML tag used to describe the merged cell changes from a width size tag to a column span or row span tag

27. Lesson 5: Resize, Split, and Merge Cells Selecting a Cell Dimensions of column widths are at the top of each column Merge Cells Split Cells Cell tag Insertion point is inside the bottom-right cell

28. Lesson 6: Insert and Align Images in Table Cells Images in Table Cells • Inserting an Image in a Table • Insert Panel  Image Command  Image • Drag it from the Assets Folder/Panel • Application Bar Insert  Image • Aligning an Image in a Table Horizontally or Vetically • HTML5 - Align an image by creating a style with alignment settings, then apply the style to the image content • CSS - Add a style to the individual cell tag that sets the cell alignment • Inline Style – Add style directly into the tag of the cell

29. Lesson 6: Insert and Align Images in Table Cells Images in Table Cells CSS Class rule CSS Tag rule Inline style

30. Lesson 7: Insert Text and Format Cell Content Text in a Table • Adding Text to a Table • Type • Copy/paste • Import • Once you place text in a table cell, you can format it to make it more readable and more visually appealing on the page • If a cell contains multiple objects of the same type, such as text, you can format each item individually by using different CSS rules to apply to each one • Formatting Cell Contents • Select the contents and format • Select the entire cell and format

31. Lesson 7: Insert Text and Format Cell Content Formatting Cells The rest of the text on the page has inherited the font properties from the body tab feature_item rule applies

32. Lesson 7: Insert Text and Format Cell Content 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