dreamweaver -- css. dreamweaver -- mx new icons are added in mx most of the features commonly used...
TRANSCRIPT
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– Desire to change content or appearance by
scripting language– Appearance can be modified by changing
CSS
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
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>
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
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>
External style sheet (Con’t)
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>
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 position
ing keeps elements in the general flow of elements on the page, so positioning is relative to other elements in the flow)
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-ali
gn: right”> … </div>• Widht equals to 10 times the font size• background-color, margin-top, margin-bottom,
margin-right, margin-left
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
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
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
Style sheets (Con’t)
Dreamweaver – insert CSS
New CSS style sheet
Insert external CSS in the document
Create a new file to add external CSS
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").
Dreamweaver -- CSS
Code added in CSS
Code added
Dreamweaver – other featureAnimation 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
Dreamweaver – Timeline