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, you want to emphasize a word within :  You select the word and press the B button, it applies the 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 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 tag on the page, like it or not.  A descendent selector lets you do what you really want: change the color of the tag only when it appears inside of an 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 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 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 Tag: With CSS, the most common element for organizing content is the tag.  The 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 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 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

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