Professional Documents
Culture Documents
Advanced CSS - Page Layout
Advanced CSS - Page Layout
Advanced CSS
Compound Selectors:
Is a Dreamweaver term, not a CSS
term.
Describes more advanced types of
selectors such as the pseudoclass styles or the descendent
selectors.
In the CSS there are a variety of
these advanced selectors but in
Dreamweaver, all of them are
created in the same way Start by
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
Advanced CSS
EX:
Advanced CSS
Advanced CSS
Page Layout
Page Layout
Page Layout
Page Layout
Fixed
Page Layout
Liquid
Page Layout
Elastic
Page Layout
Page Layout
Page Layout
Page Layout
Page Layout
You can also insert a div by
choosing Insert Layout Objects
Div Tag.
In either case, the Insert Div Tag
window appears
Page Layout
Choose a class from the Class
menu or choose an ID from the ID
menu.
Page Layout
Page Layout
Select the contents of the sidebar,
and then, in the Insert bar, click the
Insert Div Tag button.
Click the New CSS Style button,
and create a new ID style named
#storyLinks
In the CSS Rule Definition window,
click the Box category, and then,
from the float menu, select left
Page Layout
Type a value in the Width box
Complete the style, and then insert
the div
Follow the same steps for the main
content div: Select the page
elements that form that main
content on the page, click the
Insert Div Tag button, and then
create a new ID style for the pages
main content region.
Page Layout
Page Layout
Page Layout
Page Layout
Page Layout
Dreamweavers CSS
Layouts
Dreamweavers CSS
Layouts
Dreamweavers CSS
Layouts
From the Layout column, select a
page layout.
Choose a DocType from the
DocType menu.
From the Layout CSS menu, select
where to store the layouts CSS
code.
Click the Attach Style Sheet
button to attach any external style
sheets to the page Click the
Create button to bring your new
Dreamweavers CSS
Layouts
Absolute Positioning
(AP)
Positioning type:
Absolute is the most common
option. It lets you place a tag
anywhere on a page.
Relative: lets you position a tag
relative to its position in the HTML.
Static: is the normal behavior of
HTML. Static simply means the
content follows the normal topdown flow of HTML.
Adding an AP Div to
Your Page
Drawing AP Divs:
Click the AP div button, and then
drag the + cursor diagonally in the
document window to create a box.
Use a menu command: at the
insertion point, choose Insert
Layout Objects AP Div.