1. CIT 256 CSS Intro & Dreamweaver Built-in Layouts Dr. Beryl Hoffman

2. CSS CSS (Cascading Style Sheets): set of rules defining the style of a web site. Separates content (in the HTML) from style/appearance/layout (CSS). Can be embedded in HTML page at the top section or attached in a separate.css file (preferred!).

3. CSS rules for HTML tags body { background-color: #FFFFFF; margin: 0; color: black; } h4 { font-family: "Arial"; color: blue } In the HTML file, use tag and it will have that style: My styled heading My styled heading

4. Page Properties CSS Unfortunately, Page Properties button only puts CSS in the head section of that page. Can move all generated CSS to a file by selecting all CSS rules (holding down Shift) and right click to choose Move CSS Rules. Or click the + button in CSS window to add a body or h1 tag without using Page Prop. Button.

5. Making Your Own Style Tags In the CSS (use. (for class) or # (for id (can only be used once)):.mystyle { color:purple; background-color:yellow } In the HTML (use div or span, use class menu at bottom in Dreamweaver): This is some text in my style!

6. CSS and Divs for Layout CSS is now the preferred method for styling the Layout of a web site. The tag is used to divide a web page into areas with different styles Where the top banner/logo goes Where the top banner/logo goes Navigation Links Navigation Links TEXT: CONTENT AREA TEXT: CONTENT AREA</div> bottom of page bottom of page

7. Built-in CSS Layouts in Dreamweaver (File/New)

8. Number of Columns 1 Column used for top navigation. 2 Column used for side navigation. New Grid Layout under new in CS 6 too for many columns in grid.

9. Fixed vs. Fluid Layouts Fixed Layout uses fixed width/length in pixels or inches. Default width 960px, side nav is 180 px of that. Fluid Layout uses percentages so that it expands or shrinks with different screen sizes. Default 100% with side nav 20% width. Go with Fluid whenever possible. Choose fixed only if client wants site optimized for a certain screen size.

10. HTML 5 Special Layout Tags HTML 5 adds special HTML tags to replace some tags: … … to replace … to replace ….... … …,,, etc.,,, etc. IE requires hack to recognize these.

11. Save CSS as new File You can add CSS layout styles to the html file or save it to a.css file (preferrable!):

12. Edit Generated Text Edit the text, change title

13. Edit Generated Styles Look at CSS Panel on top right. Click on CSS Styles and All and the + next to to see rules. Click on a rule, change its properties underneath. Or double click a rule (or pencil) for editing window.

14. Good Tutorial for using Built-in CSS Layouts in Dreamweaver http://layersmagazine.com/editing-css- layouts-in-dreamweaver-cs5.html http://layersmagazine.com/editing-css- layouts-in-dreamweaver-cs5.html