Download Position objects with CSS and tables

Positioning Objects with
CSS and Tables
Chapter 6 Lessons
Introduction
1. Create a page using CSS layouts
2. Add content to CSS layout blocks
3. Edit and format 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
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
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)
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
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)
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
Lesson 1: Create a Page Using CSS Layouts
New Document Dialog Box
Preview of selected
layout
Layout options
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
Lesson 1: Create a Page Using CSS Layouts
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
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
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
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
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
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
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
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Table or
1.
1.
2.
Switch Insert Panel to Layout
Option Table or
Application Bar Insert 
Table
Modify Settings in Table
Dialog box
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
Lesson 4: Create a Table
Table Dialog Box
Rows text box
Table width text box
Border thickness
text box
Columns text box
Click list arrow to
choose pixels or
percent
Cell padding text box
Cell spacing text box
Accessibility options
Top header
Summary text box
Lesson 4: Create a Table
Standard Table Mode
Expanded
Tables mode
button
Standard Tables mode
displays table as it
would appear in Web
browser
Standard mode
button
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
Lesson 4: Create a Table
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
Lesson 4: Create a Table
Standard v. Expanded View
Standard View
Expanded View
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
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
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
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
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
Lesson 6: Insert and Align Images in Table Cells
Images in Table Cells
CSS Class rule
CSS Tag rule
Inline style
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
Lesson 7: Insert Text and Format Cell Content
Formatting Cells
feature_item
rule applies
The rest of the
text on the page
has inherited the
font properties
from the body
tab
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