Abode Creative Suite 5 (Adobe CS5) Dreamweaver provides multiple ways to change a Cascading Style Sheets page layout. A CSS layout is controlled completely by style sheet rules, so you can modify the look and feel of the page directly from the CSS Styles panel and the Property inspector.
Each column, box, and space on your new page is positioned and sized using CSS rules and properties, all of which you can adjust from either the Property inspector (on the CSS Styles panel) or the CSS Rule Definition panel.
If the CSS Styles panel isn’t already open, choose Window→CSS Styles to open it.
Select the All tab to display the style sheet and its rules.
The internal style sheet is shown as <style> at the top. Click the arrow to its left to expand it and show all the rules it contains. Layouts using an attached (external) style sheet display the style sheet name (such as styles.css) instead of the <style> tag.
Select the body rule.
This tag-based style controls the general formatting of the entire page (everything inside the <body> tag).
Click the field next to the background rule to edit it; rather than keep the #4E5869 (medium gray) setting, type a hexadecimal color (such as #CC0000 for red) to change the page’s background color.
Click the swatch next to the color rule to open the Swatches panel; pick a new default type color for the text on your page.
At the top of the CSS Styles panel, select another style (for example, the .twoColElstHdr #container style) to view its properties.
The .twoColHybLtHdr #container ID style controls the size and appearance of the main layout container on the page.
In the Property inspector, edit the properties to change the appearance of the style.
For example, you can change the width of the rule by entering a new number in the Width Rule text box. If you enter 95%, for example, you make the entire layout wider.
Each column and section that comprises your layout is controlled by one of the ID styles listed in the CSS Styles panel. Most every ID style features a width property you can use to change the size of different areas on the page.
Continue to modify different styles listed in the CSS Styles panel and see how they affect different elements on your page. Try changing the type color, font family, and other properties, such as padding and background color.
To figure out exactly which ID controls which column or section, click within the page area and look at the tag selector at the bottom of the Document window. The last <div> tag at the end of the chain shows you which container you’re in and its corresponding ID in the CSS Styles panel (for example, <div#mainBox>).
dummies
Source:http://www.dummies.com/how-to/content/css-layout-modification-in-adobe-cs5-dreamweaver.html
No comments:
Post a Comment