Dreamweaver CS3

Dreamweaver CS3 is very similar to Dreamweaver 8.

In addition, Adobe has some excellent help available on

• Top new features in Dreamweaver CS3 (in particular, see Browser Compatibility Check)
• Understanding Cascading Style Sheets (CSS)
• Creating a page with a CSS layout
• Creating and managing CSS

Dreamweaver has some nice layouts and sample to get you started: select File > New, then choose Blank Page, HTML, and a layout with different types of columns, or choose Page from Sample, Starter Page, and a choose a sample page.

Dreamweaver creates CSS as you modify text properties. This feature can be turned on/off by selecting Edit > Prefences, General heading: Use CSS instead of HTML tags.

CSS rules can be viewed and modified by

• clicking the Page Properties... button in the Properties window (Note: this is the easiest way to add common CSS functionality to a web page, for example, removing the underline on links except when mousing over them.)
• clicking the CSS button in the Properties window
• selecting Text > CSS Styles
• selecting Window > CSS Styles
• selecting View > Code and scrolling to the head of the document (internal CSS), or by selecting File > Open and choosing a .css file (external stylesheet).

CSS styles have priority in order of location: inline CSS has the highest priority, followed by internal CSS, and then external stylesheets. However, if an external stylesheet is referenced in the head of a document after internal CSS, it will have priority in application. Including a "body" rule in your CSS is a quick way to see which set of CSS rules have taken precendence. The obvious advantage of a single external stylesheet is that edits can be made in one place since the CSS is shared between multiple pages.

Here's some common CSS that sets the background color, default font, and removes the underline on links except when "hovered" over:

body {
background-color: #B4A67B;
font-family:Arial, Helvetica, sans-serif
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}

A CSS class can be applied to certain sets of links to make them look different than the default links. This is helpful for links that appear on a dark background; for example, the class below, "navlink" appears as white text that turns light grey and underlined when moused over:

.navlink {
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
font-weight: bold;
line-height:14px;
}
.navlink:visited {
color: #FFFFFF;
text-decoration: none;
}
.navlink:hover {
color: #CCCCCC;
text-decoration: underline;
}