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 [...]... 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 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.. .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... page Page Layout 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. .. 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:... 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... − 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...   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... 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... 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