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

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 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.