CSS Project Example

This column is controlled by the #leftcontent section of the CSS styles

More Dreamweaver Help

• Dreamweaver tutorials at Entheos: http://www.entheosweb.com/ dreamweaver/default.asp
• Dreamweaver tutorials at PUC: http://education.calumet.
  purdue.edu/Tutorials/HECC
• Adobe Dreamweaver Tutorial/Support Center: http://www.adobe.com/support/ dreamweaver/tutorial_index.html

More on Cascading Style Sheets (CSS)

• CSS layout techniques: http://www.glish.com/css/
• CSS Tutorials: http://www.w3schools.com/ css/default.asp
• Another good series of CSS Tutorials: http://www.echoecho.com/css.htm
• And finally, a third good CSS discussion: http://www.csstutorial.net/

General Web Design

• General web design advice and information: http://en.wikipedia.org/
  wiki/Web_design
• "Writing for a Web Audience": http://www.smartisans.com/ articles/ web_writing.aspx
• Article about web design, audience, and content: http://www.graphic-design.com/Web/Design/
  audience.html
• Another good design article: http://webstyleguide.com/
  interface/user-centered.html
• An Adobe columnist discusses designing for an audience: http://www.adobe.com/
  designcenter/dialogbox/
  targetaudience/
• Web Pages That Suck - Great advice and ideas about creating attractive sites: http://webpagesthatsuck.com/
• Web Accessibility Content Guidelines: http://www.w3.org/WAI
• Research-based usability and web design guidelines (warning: the entire booklet download found here is huge - 161MB!): http://www.usability.gov/
  pdfs/guidelines.html
• Web design fundamentals: http://www.pantos.org/
  atw/basics.html
• Remotely hosted CGI resource index including form mailers/handlers and other fun things: http://cgi.resourceindex.com/ Remotely_Hosted/

About this page (#centercontent)

This page uses CSS styles to control its layout and appearance. The CSS code is reprinted below for your reference. You are welcome to borrow this code to use it as a starting place for your own pages - experiment with different settings under the different sections, such as body, #leftcontent, #banner, h1, or .paragraph, and notice how changes affect the document. Once you get the hang of what CSS looks like, it become easy to define different elements just the way you want them.

---

<style>

body {
margin:10px 10px 0px 10px;
padding:0px;
}

#leftcontent {
position: absolute;
left:10px;
top:50px;
width:200px;
background:#99CCFF;
border:1px solid #000;
height: 200px;
overflow: auto;
z-index: auto;
}

#centercontent {
background:#fff;
margin-left: 199px;
margin-right:199px;
border:1px solid #000;

voice-family: "\"}\"";
voice-family: inherit;
margin-left: 201px;
margin-right:201px;
}
html>body #centercontent {
margin-left: 240px;
margin-right:201px;
}

#rightcontent {
position: absolute;
right:10px;
top:50px;
width:200px;
background:#E6E6E6;
border:1px solid #000;
}

#banner {
background:#fff;
height:40px;
border-top:1px solid #000;
border-right:1px solid #000;
border-left:1px solid #000;
voice-family: "\"}\"";
voice-family: inherit;
height:39px;
}
html>body #banner {
height:39px;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:16px;
padding-top:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000066;
text-decoration: underline;
}
.paragraph {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
}

#banner h1 {
font-size:24px;
padding:10px 10px 0px 10px;
margin:0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000066;
}
.links {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #333333;
}

#rightcontent p {
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
background-color: #99FFFF;
}
a:active {
text-decoration: none;
}
.style1 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; }
</style>

 

This is the #rightcontent section