Transcript Position objects with AP DIV tags

Chapter 10
Positioning Objects with AP Div Tags
Chapter 10 Lessons
Introduction
1. Insert an AP div
2. Set the position and size of an AP element
3. Add content to an AP element
4. Set AP div properties
Introduction
Introduction
• CSS page layout blocks
allows you to use containers
formatted with CSS styles to
place content on web pages
–
–
–
–
Images
Text
Flash movies
Any other page elements
• Div Tags: HTML tags used to
set the appearance and
position of CSS containers
• AP Div Tags: Absolute
Positioned Div tag with a
fixed position
– Dreamweaver creates a ID
type style when created
Introduction
Using AP Div Tags
• Let you control the appearance of elements on your web page
• Allow you to stack your information in a vertical pile, allowing
for just one piece of information to be visible at a time
• Are treated as their own documents, so you can easily change
their contents
• Add behaviors to your Div tags with JavaScript
– Client-side script – the commands from the program are executed on
the user’s computer
– Server-side script – executed on the web server
Introduction
Using AP Div Tags – Behaviors
• Behaviors are preset pieces of JavaScript code that can be
attached to page elements, such as an AP Div tag.
• A behavior instructs the page element to respond in a specific
way when an event occurs, such as when the mouse pointer is
positioned over the element.
• Behaviors are attached to page elements using ActionScript
– Flash scripting language used to add interactivity to
movies, control objects, exchange data, and create
complex animation.
Lesson 1: Insert an AP Div
Understanding AP Elements
• Div tags that are absolutely
positioned, or assigned a fixed
position on a web page
• AP div tags can be used to
– Create special effects on a
Web page
– Stack elements on top of each
other
– Create dynamic pages
– Lay out a Web page
• To insert an AP element:
– Insert Panel Layout Category
Draw AP Div button Drag
to draw rectangular shape
anywhere on your page
– Insert menu  Layout Objects
 AP Div command
• To change settings
– Preferences dialog box for all
AP elements
– Property inspector for a specific
AP Element
Lesson 1: Insert an AP Div
Using Guides
• As you work with AP divs, it is often helpful to use guides to
help them place and align the divs in consistent locations
• A guide is a horizontal or vertical line that is used to position
page content.
• Guides do not appear in the browser.
• You can add as many guides as you need to your web pages.
• A ScreenTip appears, telling you the exact position of the
guide.
• You can use a guide to emulate a fold line
– The fold line indicates where a paper is folded in half
Lesson 1: Insert an AP Div
Inserting an AP Element Using the Draw
AP Div Button
Draw AP Div button
AP Div icon
Horizontal Guide
AP Div border
CSS-P Element
Property Inspector
Lesson 1: Insert an AP Div
Using HTML Tags to Create AP
Elements
• Dreamweaver uses the <div> tag to create an AP element
• Initially, the default value for the first AP Div Tag on a page
appears as <div id=“apDiv1”>
– Additional AP Div Tag will be assigned the next number in sequence
– Can be renamed either in the Property Inspector or the AP Element
Panel
• Styles for AP Div tags reside in the head content as part of the
embedded CSS code
Lesson 1: Insert an AP Div
Understanding AP Elements Content
• An AP element is like a separate document within a Web page. It
can contain the same types of elements as a page
–
–
–
–
–
background colors
images
links
tables
text
• You can set the contents of an AP element to work directly with a
specified Dreamweaver behavior to make the page interact with a
viewer in a certain way
Lesson 1: Insert an AP Div
Formatting AP Divs
• Control the appearance of a
selected AP element by making
changes to:
– Clip: identifies the portion of
a layer’s content that is visible
when displayed in a Web
browser
– Vis: lets you control whether
the selected layer is visible
• By default, the clipping
region matches the outside
border of the AP element
• Can be applied only to an AP
element that has an
Overflow attribute set to a
value other than visible
• Options: visible, hide the
content, specify that scroll
bars appear, let current AP
element automatically deal
the extra content
• Options: default, visible,
hidden, inherit
– Overflow: specifies how to
treat excess content that
does not fit inside a layer
Lesson 1: Insert an AP Div
Property Inspector Showing Properties of
Selected AP Element
CSS-P Element ID text
box
Overflow
property
Vertical Stacking
Properties (Z-Index)
Position (L/T) properties
Dimension (W/H) properties
Visible property
Background
Color/Image
Lesson 2: Set the Position and Size of an AP Element
Understanding Absolute Positioning
• You can position AP elements
precisely using absolute
positioning
• An AP element is positioned
absolutely by specifying the
distance between the upperleft corner of the layer and the
upper-left corner of the page
or layer in which it is
contained
• Treated as if they are separate
documents contained within a
page
– Does not interrupt the flow of
content on the page or parent AP
element in which they are
contained
– Can hide contents on the page
they are placed on top of
– No impact on the location of other
AP elements
– Can overlap elements to create
dynamic effects
Lesson 2: Set the Position and Size of an AP Element
Setting Positioning Attributes
• Control the placement of AP elements by setting attributes from
Property inspector
• AP elements hold their position on a page
• Five primary attributes (properties)
–
–
–
–
–
Position: absolute by default
Left: distance between left edge of element and page or parent AP
element
Top: distance between top of element and page or parent AP element
Width and Height: dimensions of AP element, usually in pixels or %
Z-Index: used to specify vertical stacking of layers
 Cannot be less than 0
 Higher number, higher on stack
Lesson 3: Add Content to an AP Element
Understanding AP Element Content
• An AP element can contain the
same types of elements that a
page based on table layouts:
•
– Background colors
– Images
– Links
– Tables
– Text
Overflow settings will determine
how AP elements will enlarge to
accommodate more content than
the preset image size will allow
• You can insert images or set them
as background
– Background images will
override background color
– Background color will display
while image is loading
• Use CSS styles to format your text
on an AP element
• All other AP div properties such
as text indent, padding, margins,
and background color can be
added with styles
Lesson 4: Set AP Div Properties
Controlling AP Elements
• Use the AP Elements panel
to:
– Control visibility, name, and
Z-index order
– See how AP Elements are
nested
– Change nesting status
• Access the AP Elements
Panel using the Windows
Panel
Lesson 4: Set AP Div Properties
Controlling AP Elements – cont.
•
•
•
•
Nested AP elements are those
whose HTML code is included
within another AP element’s code.
A Nested AP element does not
affect the way it appears to the
page viewer; it establishes a
relationship of how it appears in
relation to its parent AP element
To change the Nesting status of an
AP element, drag it to a new
location in the AP Elements panel
Nested AP elements can share
common styles, with the child AP
element inheriting the styles from
the parent AP element
Nested AP
Element
AP Element
Visibility
AP Elements
Z-Index Values
Lesson 4: Set AP Div Properties
Setting AP Divs Relative to Containers
• When you insert an AP div on a web page, its position is relative to the top
left corner of the browser window.
• A problem arises when the page is viewed in different browser window
sizes
• To prevent this shifting, you can make the AP divs’ positions relative to a
parent container, such as a CSS div tag, rather than relative to the page in
the browser window
• Steps:
1. Set the Positioning property of the div tag you wish to use as the
parent container to relative (.content)
2. Cut and paste the code for the AP divs after the beginning tag for the
parent container
• AP divs are then placed on the page relative to the top left corner of the
parent container and will remain in a fixed position no matter how wide or
narrow the browser window