Advanced CSS - Page Layout

Advanced CSS EX: On your web page have , you want to emphasize a word within : − You select the word and press the B button, it applies the tag to... Advanced CSS Styling Groups of T

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

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

 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

 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

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

− 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

 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

− 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

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

 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

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

− 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 of Dreamweaver’s CSS Layouts

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