advanced css page layout n.
Skip this Video
Download Presentation
Advanced CSS - Page Layout

Loading in 2 Seconds...

play fullscreen
1 / 48

Advanced CSS - Page Layout - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Advanced CSS - Page Layout' - ziv

Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
advanced css
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 css1
Advanced CSS
  • When you open New CSS Rule window, instead of selecting the Class, ID, or Tag selector type, choose the Compound option.
advanced css2
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 css3
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 css4
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 css6
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
advanced css7
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 css8
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 css10
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 css12
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 css13
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
Page Layout
  • Types of Web Page Layouts: Float-based layouts offer three basic approaches to this problem:
    • Fixed width
    • Liquid
    • Elastic
page layout1
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 layout2
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 layout6
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 layout7
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 layout9
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 layout10
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 layout11
Page Layout
  • Choose a class from the Class menu or choose an ID from the ID menu.
page layout12
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 layout13
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 layout14
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 layout16
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 layout17
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.
dreamweaver s css layouts
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 layouts2
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 layouts3
Dreamweaver’s CSS Layouts
  • The Structure of Dreamweaver’s CSS Layouts
absolute positioning ap
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
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 properties1
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 properties2
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
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
  • The AP Elements panel: manage absolutely positioned elements in a document.
the ap elements panel1
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.