Macromedia dreamweaver 8-using dreamweaver User Manual
197
7
CHAPTER 7
Laying Out Pages with CSS
In Macromedia Dreamweaver 8, you can use CSS styles to lay out your page. You can either
insert
insert
div
tags manually and apply CSS positioning styles to them, or you can use
Dreamweaver layers to create your layout. A layer in Dreamweaver is an HTML page
element—specifically, a
element—specifically, a
div
tag, or any other tag—that has an absolute position assigned to it.
Whether you use CSS, tables, or frames to lay out your pages, Dreamweaver has rulers and
grids for visual guidance in your layout. Dreamweaver also has a tracing image feature, which
you can use to re-create a page design that was created in a graphics application.
grids for visual guidance in your layout. Dreamweaver also has a tracing image feature, which
you can use to re-create a page design that was created in a graphics application.
This chapter contains the following sections:
About layers in Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Inserting a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Setting layer preferences and properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Managing layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Manipulating layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Converting layers to tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Animating layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Inserting div tags for layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Working with div tags for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
Inserting a layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Setting layer preferences and properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Managing layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Manipulating layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208
Converting layers to tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Animating layers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Inserting div tags for layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Working with div tags for layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222
NOT
E
Dreamweaver treats all
div
tags with an absolute position as layers, even if you didn’t
create those
div
tags using the Layer drawing tool.
TIP
You can use a Dreamweaver design file as a starting point for your CSS layout. Select a
file from the Page Designs (CSS) category of the New Document dialog box (see
file from the Page Designs (CSS) category of the New Document dialog box (see
).
NO
TE
If you’re unfamiliar with using layers and Cascading Style Sheets (CSS), but are familiar
with using tables, try using tables or Layout mode for page layout (see
with using tables, try using tables or Layout mode for page layout (see
and