Chapter 5 introduce advanced CSS - Page layout. This chapter presents content: Compound selectors, styling groups of tags, fast style editing with the properties pane, moving and managing styles, to move one or more styles between two style sheets,...and another content.
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 dropdown 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 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 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 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 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 Adding an AP Div to Your Page 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 ... 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... 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,... usual – Properties 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