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 “pseudo-class”
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 creating a CSS style.
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, it’s 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
can’t see any difference between the
emphasized word and the other words in
the headline.
Advanced CSS

Creating a tag selector to change the
<strong> tag’s color and make it stand-out
from the headline isn’t 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.
−
The descendent selector is h1 strong
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 listing
of
all CSS properties
for the selected style
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 don’t 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: Float-
based 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 of the float.
Page Layout

Float is a CSS property, available when you
create a CSS style.

It’s listed in the CSS Rule Definition
window’s 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 don’t
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 page’s width using
em values. An em
changes size when the browser’s 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