Advanced css page layout
This presentation is the property of its rightful owner.
Sponsored Links
1 / 48

Advanced CSS - Page Layout PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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.

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.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 page layout

Advanced CSS - Page Layout

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 css5

Advanced CSS

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 css9

Advanced CSS

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 css11

Advanced CSS

  • EX:

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 layout3

Page Layout

  • Fixed

Page layout4

Page Layout

  • Liquid

Page layout5

Page Layout

  • Elastic

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 layout8

Page Layout

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 layout15

Page Layout

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.

Page layout18

Page Layout

Page layout19

Page Layout

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 layouts1

Dreamweaver’s CSS Layouts

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.

  • Login