Dreamweaver -- CSS - PowerPoint PPT Presentation

dreamweaver css n.
Skip this Video
Loading SlideShow in 5 Seconds..
Dreamweaver -- CSS PowerPoint Presentation
Download Presentation
Dreamweaver -- CSS

play fullscreen
1 / 23
Download Presentation
Dreamweaver -- CSS
Download Presentation

Dreamweaver -- CSS

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. Dreamweaver -- CSS

  2. Dreamweaver -- MX

  3. Dreamweaver -- MX • 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 <P STYLE = “font-size: 20 pt; color: #0000FF”> • Inline styles override any other styles

  6. Inline styles <HTML> <HEAD><TITLE>Inline Styles</TITLE></HEAD> <BODY> <P>Here is some text</P> <P STYLE ="font-size: 20pt">Here is some more text</P> <P STYLE ="font-size: 20pt; color: #0000FF">Even more text</P> </BODY> </HTML>

  7. CSS – External style sheet • External style sheet • Embedded within the HTML header section • Begins with <STYLE TYPE = “text/css”> • Or Create the style sheet as an individual file with .css extension and link it to the HTML file using • <LINK REL = “stylesheet” TYPE = “text/css” HREF = “filename.css”> • 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 <HTML> <HEAD> <TITLE>Style Sheets</TITLE> <!-- This begins the style sheet section. --> <STYLE TYPE ="text/css"> em { font-size:20pt color: #00FF00 } a.nodec {color: brown} a:hover {color: red; background-color: black} .blue { color:#0000FF } </STYLE> </HEAD> <BODY> <P>Here is some text</P> <P> Here is some <em> more text </em> </P> <p><a CLASS = "nodec" href = "http://www.abc.com"> Here is hover effect </a></p> <P CLASS = “blue">Even more text</P> </BODY> </HTML>

  9. External style sheet (Con’t)

  10. External style sheet (Con’t) • Example of individual style sheet file • Style Sheet file: styles.css P { font-size:20pt } .blue { color:#0000FF } • HTML file <HTML> <HEAD> <TITLE>Style Sheets</TITLE> <LINK REL = ”stylesheet”TYPE ="text/css”HREF =”styles.css"> </HEAD> <BODY> <P>Here is some text</P> <P> Here is some more text</P> <P CLASS =”blue ">Even more text</P> </BODY> </HTML>

  11. Other features • Position, dimensions, box model • Position: <p><img src = “xxx.gif”style = “position: absolute; top: 0px; left: 0px; z-index: 1” /></p> • 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: <div style = “width: 10em; overflow: scroll; text-align: right”> … </div> • 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 Margin Border Content 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 Create a new file to add external CSS Insert external CSS in the document

  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