1 / 23

Dreamweaver -- CSS

Dreamweaver -- CSS. Dreamweaver -- MX. 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 . DHTML. Create Dynamic Behavior

quilla
Download Presentation

Dreamweaver -- CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

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

More Related