1. Positioning Objects with CSS and Tables
Chapter 6
Positioning Objects with CSS and Tables

2. Creating a Page Using a Fluid Grid Layout
CSS page layouts consist of containers formatted with CSS rules into which you place page content.
These containers can accommodate images, blocks of text, Flash movies, or any other page element.

3. Creating a Page Using a Fluid Grid Layout
The appearance and position of the containers are set through the use of HTML tags known as div tags.
Using div tags, you can position elements next to each other as well as on top of each other.

4. Creating a Page Using a Fluid Grid Layout
Tables are placeholders made up of small boxes called cells, into which you can insert text and graphics.
Cells in a table are arranged horizontally in rows and vertically in columns.

5. Creating a Page Using a Fluid Grid Layout
You can create dynamic div tags using JavaScript behaviors, simple action scripts that let you incorporate interactivity by modifying content based on variables like user actions.

6. Creating a Page Using a Fluid Grid Layout
One type of div tag is an AP div tag.
AP stands for absolutely positioned, so an AP div tag creates a container that has a specified, fixed position on a web page.
The resulting container that an AP div tag creates on a page is called an AP element.

7. Creating a Page Using a Fluid Grid Layout
Because building a web page using div tags can be tedious for beginning designers, Dreamweaver CC provides Fluid Grid layouts that are available in the New Document dialog box.

8. Creating a Page Using a Fluid Grid Layout
Default predesigned Fluid Grid layouts
Fluid Grid Layout option
New Document dialog box

9. Creating a Page Using a Fluid Grid Layout
Fluid Grid Layouts are layouts based on three device sizes
Mobile
Tablet
Desktop

10. Creating a Page Using a Fluid Grid Layout
Each device size is based on a grid system similar to column guides.
CSS style sheets control the way the page content is displayed across the grids, with each grid using slightly different selector properties and values tailored to the device being used to display the page.

11. Creating a Page Using a Fluid Grid Layout
A designer can design a single page, but modify the way the content is displayed by changing the style sheet properties so the content will be attractive and readable regardless of the screen size used to display it.

12. Creating a Page Using a Fluid Grid Layout
A Fluid Grid layout contains div tags that control the placement of page content using placeholders.
Each div tag container has placeholder text that appears until you replace it with your own content.
Because div tags use CSS for formatting and positioning, designers prefer them for building web page content.

13. Creating a Page Using a Fluid Grid Layout
When you use the Dreamweaver Fluid Grid layouts, you can be sure that your pages will appear with a consistent design when viewed in all browsers and all device sizes.

14. Creating a Page Using a Fluid Grid Layout
As you design your page layouts using div tags, you can use Design view to see and adjust CSS content blocks.

15. Creating a Page Using a Fluid Grid Layout
Dotted-line borders surround the CSS blocks
CSS clocks defined by dotted borders

16. Creating a Page Using a Fluid Grid Layout
In the Visual Aids list on the View menu, you can display selected features of div tag elements, such as:
CSS Layout Backgrounds
CSS Layout Box Model
CSS Layout Outlines
AP Element Outlines

17. Adding and Positioning DIVS
When you use fluid grid layouts and style sheets to design new website pages, you move from long, complicated page code to much shorter page code, because the bulk of the code moves from the pages to the style sheets.

18. Adding and Positioning DIVS
To add a new page you can:
Save an existing page with a new file name and replace the content with new content.
Create a site template from an existing page and use it to create new pages.
Use the New Document dialog box to create a blank page.

19. Adding and Positioning DIVS
Every new blank page, by default, has one div called .gridContainer.clearfix.
This div acts as a “wrapper” inside which all other divs are placed.

20. Adding and Positioning DIVS
All fluid grid tags must be placed inside this div, between its opening and closing <div> tags.
A new page also contains an additional div on the page, located inside the .gridContainer.clearfix div.

21. Adding and Positioning DIVS
After you have used div tags to create divs, you can rearrange and/or resize the divs on the page.
Selecting the Element Quick View button shows a visual representation of the HTML DOM structure for the page.

22. Adding and Positioning DIVS
DOM stands for Document Object Model, a convention that represents the order and type of elements used in a web page.
The Element Quick View button lets you view each defined page element in a tree diagram so you can quickly see the order and position of each element relative to the other page elements.

23. Adding and Positioning DIVS
List of page elements
Select stacked folders icon to expand the contents
Viewing the order of page elements with Element Quick View

24. Adding and Positioning DIVS
When you display fluid grid layout guides and select a div, a mini-toolbar, sometimes referred to as a HUD, appears next to a div border.
HUD is an acronym to Heads Up Display.
You can use the HUD to hide, duplicate, move, or delete a div.

25. Adding Content to CSS Layout Blocks
Once you have created a layout using div tags, you are ready to insert and format text.
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.

26. Adding Content to CSS Layout Blocks
Comments are gray, non-executable tags proceeded by “/*”.
This notation tells the browser to skip over the lines of code that follow it until it comes to an ending comment tag, */”.

27. Creating a Table
Tables are great when you need a grid layout on a page for a list of data.
To create a table, click the Table button in the Common category on the Insert panel.
You can enter values for the number of rows and columns in the Table dialog box, but the rest of the table properties should be assigned using CSS.

28. Creating a Table
The table width can be specified in units of measure such as pixels, or as a percentage.
When the table width is specified as a percentage, the table width expands to fill up its container (the browser window, a CSS container, or another table).

29. Creating a Table
Setting table widths as percentages works best with Fluid Grid Layouts.
Table width is set using the Width property in the Box category of the relevant CSS style.

30. Creating a Table
To align a table on a page or within a CSS layout block, use the Float property in the Box category.
A table placed inside another table is called a nested table.

31. Creating a Table
Cell padding is the distance between the cell content and the cell walls, the lines inside the cell borders.
Cell spacing is the distance between cells.

32. Creating a Table
You can make a table more accessible to visually impaired users by adding a table caption and a table header that screen readers can read.
A table caption appears at the top of a table and describes the table contents.

33. Creating a Table
Table headers are another way to provide information about table content.
Table headers can be placed at the top of columns.
They are automatically centered and bold and are used by screen readers to help users identify the table content.

34. Creating a Table Columns text box Rows text box Top Header
Caption text box
Table dialog box

35. Resizing, Splitting, and Merging Cells
Sometimes you want to adjust the cells in a table by splitting or merging them.
To split a cell means to divide it into multiple rows or columns.
To merge cells means to combine multiple cells into one cell.

36. Resizing, Splitting, and Merging Cells
When formatting a table, it is important to understand the basic HTML table tags.
The tags for creating a table are <table> </table>.
The tags to create table rows are <tr></tr>.
The tags used to create table data cells are <td></td>.
The tags used to create table header cells are <th> </th>.

37. Resizing, Splitting, and Merging Cells
Dreamweaver places the <&nbsp> code into each empty table cell at the time you create it.
The <&nbsp> code represents a nonbreaking space, or a space that a browser will display on the page.

38. Inserting and Aligning Images in Table Cells
You can insert images in the cells of a table using the Image command in the Images menu on the Insert panel.
When you add a large image to a cell, the cell expands to accommodate the inserted image.

39. Inserting and Aligning Images in Table Cells
You can align images both horizontally and vertically within a cell.
With HTML5, it’s best to align an image by creating a rule with alignment settings, then apply the rule to the image content.

40. Inserting and Aligning Images in Table Cells
shrimp_bisque.jpg
Image inserted into table cell

41. Inserting and Aligning Images in Table Cells
Another way to align content in table cells is to add a style to the individual cell tag that sets the cell alignment.

42. Inserting Text and Formatting Cell Content
You can enter text in a table either by typing it in a cell, copying it from another source and pasting it into a cell, or importing it from another program.

43. Inserting Text and Formatting Cell Content
To format the contents of a cell you can:
select the cell contents, then apply formatting to it.
or, you can select text in a cell and use the Blockquote or Remove Blockquote buttons in the HTML Property inspector to move the text farther away from or closer to the cell walls.

44. Inserting Text and Formatting Cell Content
If a cell contains multiple objects of the same type, such as text, you can format each item individually by applying different CSS rules to each one.

45. Inserting Text and Formatting Cell Content
Formatting a cell is different from formatting a cell’s contents.
Formatting a cell can include setting properties that visually enhance the cell’s appearance, such as setting a cell width and assigning a background color.

46. Inserting Text and Formatting Cell Content
To format a cell with code that is HTML5 compliant, use tags to define a column group style <colgroup>, which will format all cells in a particular column.

47. Inserting Text and Formatting Cell Content
You can also use the column tag <col> to apply formatting styles to singular cells.
Once you have created your styles, you add them to the code for the appropriate columns or cells you wish to format.