1. Dreamweaver -- CSS

2. Dreamweaver -- MX

3. New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature used in Dreamweaver is CSS styles

4. DHTML Create Dynamic Behavior –Desire to change content or appearance by scripting language –Appearance can be modified by changing CSS

5. CSS – Inline styles Inline styles –Individual element ’ s style declared using the STYLE attribute –Each CSS property followed by a colon and the value of that attribute –Multiple properties separated by semicolons –Inline styles override any other styles

6. Inline styles Inline Styles Here is some text Here is some more text Even more text

7. CSS – External style sheet External style sheet –Embedded within the HTML header section Begins with –Or Create the style sheet as an individual file with.css extension and link it to the HTML file using –Styles placed here apply to the whole document –Without style sheets Browser completely controls the look and feel of Web pages –With style sheets Designer can specify the look and feel of Web page

8. External style sheet Example of style sheet embedded within the HTML Style Sheets em { font-size: 20pt color: #00FF00 } a.nodec {color: brown} a:hover {color: red; background-color: black}.blue { color: #0000FF } Here is some text Here is some more text Here is hover effect Even more text

9. External style sheet (Con’t)

10. Example of individual style sheet file –Style Sheet file: styles.css P { font-size: 20pt }.blue { color: #0000FF } –HTML file Style Sheets Here is some text Here is some more text Even more text

11. Other features Position, dimensions, box model –Position: Z-index: 1 for the lower layer (background) Position: absolute, relative Relative: top, bottom, left, right (relative positioning keeps elements in the general flow of elements on the page, so positioning is relative to other elements in the flow)

12. Other features (Con’t) –Span: grouping element, no formatting to contents, for apply CSS rules or id attributes to a block of text –Dimensions: … Widht equals to 10 times the font size background-color, margin-top, margin-bottom, margin-right, margin-left

13. Other features (Con’t) Box –Border-width: think, medium, thin –Border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset –Border-color –Padding-top, padding-bottom, padding- right, padding-left Content Margin Border Padding

14. Style sheets Three possible sources for style sheets –Browser defaults –Preset user styles –Author styles Styles allow inheritance and specificity When conflicting styles: –Author styles have a greater precedence than preset user styles

15. Style sheets (Con’t) Users can define their own user style sheets CSS specification gives precedence to author styles over user styles Use relative measurements Add a user style sheet in IE5 –Tools menu  Internet Options … Accessibility … –Check Format documents using my style sheet

16. Style sheets (Con’t)

17. Dreamweaver – insert CSS

18. New CSS style sheet Insert external CSS in the document Create a new file to add external CSS

19. CSS style sheet Custom CSS styles, also called class styles, let you set style attributes to any range or block of text. HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated. CSS selector styles redefine the formatting for a particular combination of tags (for example, td h2 applies whenever an h2 header appears inside a table cell) or for all tags that contain a specific id attribute (for example, #myStyle applies to all tags that contain the attribute-value pair ID="myStyle" ).

20. Dreamweaver -- CSS

21. Code added in CSS Code added

22. Dreamweaver – other feature Animation the position of various document elements can be done by putting the elements onto a layers and using scripting language to change the layer position

23. Dreamweaver – Timeline