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

When you open New CSS Rule

window, instead of selecting the
Class, ID, or Tag selector type, choose
the Compound option.

Advanced CSS

Except the four link state options in

the drop-down menu, you must type
the selector name in the Selector
Name box.
You need to use a different syntax for
each type of selector.
Descendent Selectors: If a tag is
inside another tag, its a descendent
of that tag.

Advanced CSS

EX: On your web page have <h1>, you

want to emphasize a word within
<h1>:
You select the word and press the B
button, it applies the <strong> tag
to that word.
Most browsers display both tags, so
you cant see any difference
between the emphasized word and
the other words in the headline.

Advanced CSS

Creating a tag selector to change the

<strong> tags color and make it
stand-out from the headline isnt
much of a solution:
You end up changing the color of
every <strong> tag on the page,
like it or not.
A descendent selector lets you do
what you really want: change the
color of the <strong> tag only when
it appears inside of an <h1> tag.

Advanced CSS

Advanced CSS

A descendent selector can contain

more than just two elements as well.
The following are all valid selectors
for the <a> tags inside the bulleted
lists.
ul li a
body li a
html li a
html body ul li a

Advanced CSS

Styling Groups of Tags: To create a

style that applies to several different
elements at once, In the Selector
Name box, type a list of selectors
separated by commas.

Advanced CSS

Fast Style Editing With the

Properties Pane: The Properties
pane displays CSS properties in one
of three different views:
A set properties view: displays only
the properties that have been define
A Category view: groups the different
CSS properties into the same seven
categories used in the Rule Definition
window
A List view: provides an alphabetical

Advanced CSS

Advanced CSS

Moving and Managing Styles: To

move a style from one place to
another in the same style sheet:
Drag the style in the CSS Styles
panel. The order the styles are
listed in the CSS Styles panel
represents their order in the actual
CSS
You can select and move more than
one style at a time by Ctrl-clicking

Advanced CSS

EX:

Advanced CSS

To move one or more styles

between two style sheets:
Drag the style from one style sheet
to another in the CSS Styles panel.
This is applied both for moving a
style from an internal style sheet to
an external style sheet, and for
moving a style from one external
style sheet to another

Advanced CSS

The Cascade: The page has two

different
styles,
two
sets
of
formatting rules for the same tag.
The browser merges the three styles
into a sort of hybrid, following these
rules:
Properties that dont conflict are
applied as usual.
Properties do conflict, the Web
browser uses the property from the
style with the greatest specificity.

Page Layout

Types of Web Page Layouts: Floatbased layouts offer three basic

approaches to this problem:
Fixed width
Liquid
Elastic

Page Layout

Float Layout Basics: Float-based

layouts take advantage of the CSS
float property to position elements
side by side, and create columns on a
Web page.
In essence, the float property
moves a page element to the left
or the right.
Any HTML that appears after the
floated element moves up on the
page, and hugs up against the side

Page Layout

Float is a CSS property, available

when you create a CSS style.
Its listed in the CSS Rule Definition
windows Box category
Choose the left option, and the
styled element floats to the left,
Choose the right option and the
element moves to the right.

Page Layout

Fixed

Page Layout

Liquid

Page Layout

Elastic

Page Layout

With the fixed-width approach, you

dont have to worry about what
happens to your design on a very
wide (or small) monitor.
Liquid: Your page gets wider or
narrower as your visitor resizes the
window.
Elastic: With this kind of design, you
define the pages width using em
values. An em changes size when the
browsers font size changes.

Page Layout

The Mighty <div> Tag: With CSS,

the most common element for
organizing content is the <div> tag.
The <div> tag is an HTML element
that has no inherent formatting
properties you use it to mark a logical
grouping of elements, or a division,
on the page.

Page Layout

Page Layout

The Insert Div Tag Tool: lets you

wrap a <div> tag around a selection
of page content
To use this tool, either select the
content you wish to wrap with a div
or click on the page where you
wish to insert an empty <div> tag.
Then click the Insert Div Tag button
on the Layout category of the
Insert panel

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

Ex: To create a two-column design,

you could follow these easy steps:
Select the contents of the banner.
Then, on the Layout category of
the Insert panel, click the Insert Div
Tag button.
In the ID box, add an ID name.
Click OK to close the Insert Div Tag
window

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

Understanding the Box Model:

CSS properties located within this
category: width, height, padding,
margin, and clear.
Width and height: specify the
width and height for any styled
object using these properties.
Float: move an object to the left or
right side of a page and have other
content wrap around it.

Page Layout

Clear: Clear prevents an element

from wrapping around any object
with a right or left Float property.
Padding: Padding is the gap that
separates the content of the styled
tag.
Margin. The margin is the outermost
space surrounding an element.

Page Layout

Page Layout

Dreamweavers CSS
Layouts

Dreamweavers CSS Layouts are

simply basic designs. Each layout is a
simple HTML file and a style sheet.
Creating a new CSS layout page takes
just a few steps:
Choose File New.
Choose Blank Page from the left
column, and the type of page you
wish to create in the Page Type
column.

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

The Structure of Dreamweavers CSS

Layouts

Absolute Positioning
(AP)

Beyond float-based layouts, CSSs

other main technique for placing
elements on a Page Absolute
positioning lets you specify an exact
position on a page for any element.
Web is a environment thats difficult
to control with pixel level precision.
If increase the font size in the
browser, the enlarged text may spill
out of your carefully crafted layout.

The CSS Positioning

Properties

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.

The CSS Positioning

Properties

Fixed is similar to the fixed value

of the CSS attachment property
used to lock a background image in
place.
Width and height: set the width
and height of the element
Visibility: Dreamweaver makes the
contents of all tags visible on the
page.
Z-index: represented by a number
in the Z index field, controls the

The CSS Positioning

Properties

Placement: specify an absolutely

positioned elements position which
is, after all, the whole point of AP div.
The four properties control where
each of the four edges of the AP div
begin.

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.

The AP Elements Panel

The AP Elements panel: manage

absolutely positioned elements in a
document.

The AP Elements Panel

Visibility: To change an absolutely

positioned
elements
visibility
property
AP element ID: If you use Draw AP div
tool, Dreamweaver gives the AP div a
generic ID name.
Z-index: provides a third dimension to
absolutely positioned elements.