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: 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 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
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
page’s 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
Dreamweaver’s CSS Layouts


Dreamweaver’s 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.
Dreamweaver’s CSS Layouts
Dreamweaver’s 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 layout’s 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 Web page to life
Dreamweaver’s CSS Layouts

The Structure
Layouts
of
Dreamweaver’s
CSS
Absolute Positioning (AP)



Beyond float-based layouts, CSS’s 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 that’s 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 top-down 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 stacking order of
AP elements on a page.
The CSS Positioning Properties


Placement:
specify an absolutely
positioned element’s 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 element’s 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.