Dreamweaver and Homesite Extensions

www.macromedia.com - Search for Dreamweaver Exchange
- Clean up Word HTML
- Photo Album
- Clean up Frontpage HTML
- Import PDF as HTML
- Course Builder
- Calendar
- Dropdown Menu
- Download counter
- Accessibility checker

CSS

Cascading - The page will inherit styles from any of these three ways. Usually a good rule of thumb is that the style closest to the text/element will override what's defined elsewhere: (using the below list) 1 will override 2 and 3. 2 will override 3, etc. So you could define your body text in an external style sheet (#3), but then override the definition if you want a particular paragraph in your document to appear differently by using 1 or 2.

Code -
Element {attribute: definition; attribute:definition}
  1. Individual style declaration (around an element)
    Example: <P STYLE="color: red; font-family: 'New Century Schoolbook', serif"> This paragraph is styled in red with the New Century Schoolbook font, if available.</P>
  2. Embedded style (inside the <HEAD> of the page)
    Example: <STYLE TYPE="text/css" > 
    <!--
body  { background: url(foo.gif) red; color: black }
.menu     { color: lime; background: #ff80c0 }
.note { margin-left: 5em; margin-right: 5em }
.warning { color: red; weight: bold }
-->
</STYLE>

<h3 class="note">Proprietary Extensions</h3>
<p class="warning">Warning text: Hurricane Season begins! </p>

  3. External style sheet reference - affects any pages that link to it 
    <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" >

    LINK tag goes inside the <HEAD>
    In the file "style.css" you define all the properties/styles.

    You can define the "look" of typical HTML code elements:
    body {
	background-color: #776f4a;
} 

a {
	color: #D1C374;
	text-decoration: none;
} 

h1 {
	color: #FFFFFF;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
}

h2 {
	color: #FFFFCC;
	font-size: 18px;
	font-family: Arial, Helvetica, sans-serif;
}

h3 {
	color: #FFFFCC;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
}

td, th {
	color: #FFFFFF;
}

    Or you can define your own:

    The use of ID is appropriate when a style only needs to be applied once in any document.
    #footer {
	position: absolute;
	top: 500px;
	left: 160px;
	width: 550px;
text-align: right;
	font-family: Helvetica, Arial, sans-serif;
	}

#content {
	padding: 10px;
	position: absolute;
	top: 100px;
	left: 160px;
	width: 550px;
	}

    The CLASS attribute is used to specify the style class to which the element belongs.
    .menu {
color: #FF6666;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
margin-left: 20px;
}
    Rollover links:
    
a {
	color: #03157E;
	text-decoration: none;
}

a:hover{
	color: #fff; 
	background-color: #03157E; 
	text-decoration: none; 
}