Thiet ke wep.ppt
Chia sẻ bởi Phong Nghia |
Ngày 01/05/2019 |
44
Chia sẻ tài liệu: thiet ke wep.ppt thuộc Power Point
Nội dung tài liệu:
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 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 CSS
EX: On your web page have, you want to emphasize a word within
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 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 CSS
EX: 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 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 do 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
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 CSS
EX:
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 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
Types of Web Page Layouts: Float-based layouts offer three basic approaches to this problem:
Fixed width
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, 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 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 Layout
Fixed
Page Layout
Liquid
Page Layout
Elastic
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 Layout
The 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 Layout
Page Layout
The Insert Div Tag Tool: lets you wrap a 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 tag.
Then click the Insert Div Tag button on the Layout category of the Insert panel
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 Layout
Choose a class from the Class menu or choose an ID from the ID menu.
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 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 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 Layout
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.
The AP Elements Panel
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.
 
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 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 do 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
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 CSS
EX:
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 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
Types of Web Page Layouts: Float-based layouts offer three basic approaches to this problem:
Fixed width
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, 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 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 Layout
Fixed
Page Layout
Liquid
Page Layout
Elastic
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 Layout
The 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 Layout
Page Layout
The Insert Div Tag Tool: lets you wrap a 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 tag.
Then click the Insert Div Tag button on the Layout category of the Insert panel
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 Layout
Choose a class from the Class menu or choose an ID from the ID menu.
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 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 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 Layout
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.
The AP Elements Panel
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.
 
tag.
The
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 Layout
Page Layout
The Insert Div Tag Tool: lets you wrap a
Page Layout
Page Layout
The Insert Div Tag Tool: lets you wrap a
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
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
tag.
Then click the Insert Div Tag button on the Layout category of the Insert panel
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 Layout
Choose a class from the Class menu or choose an ID from the ID menu.
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 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 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 Layout
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.
The AP Elements Panel
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.
Then click the Insert Div Tag button on the Layout category of the Insert panel
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 Layout
Choose a class from the Class menu or choose an ID from the ID menu.
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 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 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 Layout
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.
The AP Elements Panel
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.
* Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ...
Người chia sẻ: Phong Nghia
Dung lượng: |
Lượt tài: 0
Loại file:
Nguồn : Chưa rõ
(Tài liệu chưa được thẩm định)