Bài giảng Thiết kế Web

Advanced CSS - Page LayoutAdvanced CSSCompound 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 CSSWhen you open New CSS Rule window, instead of selecting the Class, ID, or Tag selector type, choose the Compound option.Advanced CSSExcept 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 CSSEX: On your web page have , you want to emphasize a word within :You select the word and press the B button, it applies the 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 CSSCreating 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 do what you really want: change the color of the tag only when it appears inside of an tag.The descendent selector is h1 strongAdvanced CSSAdvanced CSSA 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 abody li ahtml li ahtml body ul li aAdvanced CSSStyling 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 CSSFast 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 windowA List view: provides an alphabetical listing of all CSS properties for the selected styleAdvanced CSSAdvanced CSSMoving 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-clickingAdvanced CSSEX:Advanced CSSTo 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 anotherAdvanced CSSThe 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 LayoutTypes of Web Page Layouts: Float-based layouts offer three basic approaches to this problem: Fixed width Liquid ElasticPage LayoutFloat 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 LayoutFloat is a CSS property, available when you create a CSS style. It’s listed in the CSS Rule Definition window’s Box categoryChoose the “left” option, and the styled element floats to the left, Choose the “right” option and the element moves to the right. Page LayoutFixedPage LayoutLiquidPage LayoutElasticPage LayoutWith 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 LayoutThe Mighty Tag: With CSS, the most common element for organizing content is the tag. The 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 LayoutPage LayoutThe Insert Div Tag Tool: lets you wrap a tag around a selection of page contentTo 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 panelPage LayoutYou can also insert a div by choosing Insert ➝ Layout Objects ➝ Div Tag. In either case, the Insert Div Tag window appearsPage LayoutChoose a class from the Class menu or choose an ID from the ID menu.Page LayoutEx: 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 windowPage LayoutSelect 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 #storyLinksIn the CSS Rule Definition window, click the Box category, and then, from the float menu, select “left”Page LayoutType a value in the Width boxComplete 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 LayoutPage LayoutUnderstanding 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 LayoutClear: 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 LayoutPage LayoutDreamweaver’s CSS LayoutsDreamweaver’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 LayoutsDreamweaver’s CSS LayoutsFrom 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 lifeDreamweaver’s CSS LayoutsThe Structure of Dreamweaver’s CSS LayoutsAbsolute 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 PropertiesPositioning 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 PropertiesFixed 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 elementVisibility: 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 PropertiesPlacement: 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 PageDrawing 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 PanelThe AP Elements panel: manage absolutely positioned elements in a document.The AP Elements PanelVisibility: To change an absolutely positioned element’s visibility propertyAP 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.