1 / 48

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.

ziv
Download Presentation

Advanced CSS - Page Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced CSS - Page Layout

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

  3. Advanced CSS • When you open New CSS Rule window, instead of selecting the Class, ID, or Tag selector type, choose the Compound option.

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

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

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

  7. Advanced CSS

  8. 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. • ulli a • body li a • html li a • html body ul li a

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

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

  11. Advanced CSS

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

  13. Advanced CSS • EX:

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

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

  16. Page Layout • Types of Web Page Layouts: Float-based layouts offer three basic approaches to this problem: • Fixed width • Liquid • Elastic

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

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

  19. Page Layout • Fixed

  20. Page Layout • Liquid

  21. Page Layout • Elastic

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

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

  24. Page Layout

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

  26. Page Layout • You can also insert a div by choosing Insert ➝ Layout Objects ➝ Div Tag. • In either case, the Insert Div Tag window appears

  27. Page Layout • Choose a class from the Class menu or choose an ID from the ID menu.

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

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

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

  31. Page Layout

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

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

  34. Page Layout

  35. Page Layout

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

  37. Dreamweaver’s CSS Layouts

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

  39. Dreamweaver’s CSS Layouts • The Structure of Dreamweaver’s CSS Layouts

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

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

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

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

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

  45. The AP Elements Panel • The AP Elements panel: manage absolutely positioned elements in a document.

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

More Related