The first thing we need to do is create our XHTML page. Open up Dreamweaver. In the top left corner click on the "Code" view button. Erase all the tags. Use this basic code. Just highlight it, copy it and paste it in your Dreamweaver document. Of course fill in my text with that of your own:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Two-Column Layout with Fixed-Width Column</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head><body>
<div id="container"><div id="header">
the header -- put a graphic here
</div><!--end of header division--><div id="columnleft">
<h1>this is cool </h1>
<p>stuff to drive people inside "what's new" the search box, sign up box and a cool picture or ad or two! </p>
<p> </p>
</div><!--end of columnleft division--><div id="columnright">
<h1>Main Story Headline</h1>
<p>The main story. This is targetting our main audience and our core mission. Wow! People will be amazed and want to read this. This short explanation REALLY makes them want to read the rest of the story. <a href="mainstory.html">Read more</a>.
</p><h1>Secondary Story Headline</h1>
<p>This is the second most important story. Or maybe it is yesterday's most important story. People will still really want to read it. Esp. after this oh-so-exciting introduction, right? What do you mean, "Don't quit my day job"? <a href="secondstory.html">Read more</a>.
</p>
</div><!--end of columnright division--><div id="footer">
The Organization | 718.123.4567 | info@organization.org
</div><!--end of footer division--></div><!--end of container division-->
</body>
</html>
Now let's save this. Go to the menu bar and choose FILE --> SAVE. Make a folder where all your website stuff will be and save this file in there. Be sure to name it: index.html (all lowercase and no spaces). Now look at it in "Design" view. It should look like this:
If you do not have little dotted lines around every box than you accidentally messed up one of your <div> or </div> tags. Double-check them. Okay, you have your content now, your XHTML page, but now you want to style it, design it all beautiful and cool. Now you are going to make your CSS page, your cascading style sheet page, a collection of rules for the different divisions and styles.
Keep that file open and now start a new document. Go FILE --> New --> Basic Page --> CSS --> and make sure the bottom right corner "Document Type" says "XHTML 1.0 Transitional," then click "Create."
Copy and paste these style sheet rules here:
body {
text-align: center;
}#container {
margin-left: auto;
margin-right: auto;
border: 1px solid #333333;
width: 750px;
text-align: left;
}#header {
background-color:#b30000;
border-bottom: 1px solid #333333;
width:750px;
}#columnleft {
float: left;
width: 200px;
padding-top:1em;
background-color:#ff8080;
}#columnright {
padding-top:1em;
margin: 0 0 0 200px; /* top right bottom left */
background-color:#ffbfbf;
}#footer {
clear: both;
background-color:#b30000;
padding-bottom: .75em;
padding-top:.5em;
border-top: 1px solid #333333;
width:750px;
}
Now go FILE --> SAVE --> and put it in the same folder as the other file index.html but call it: stylesheet.css. DON'T SAVE YET! (or if you did save it again, now) RIGHT UNDER WHERE YOU NAME the file stylesheet.css it says "Save as Type" -- you must choose the format .css.
Almost done with the first part. If you look at the Design view of the index.html (the XHTML) file you'll see the styles have been applied to the divisions. If not, just do this: Go to the file index.html. Look at the CSS Styles palette in the top-right corner. If it isn't there make it appear by going WINDOW --> CSS STYLES. At the bottom of the palette is a teeny-tiny little chain (to the left of the plus sign, pencil and garbage can). Click on the chain, i.e. "Attach Style Sheet," and click "Browse" and scroll to your document stylesheet.css and double-click it. Now when you look at index.html in Code View you see the code: <link href="stylesheet.css" rel="stylesheet" type="text/css" /> added in between the <head> and </head> tags.
Now when you look at index.html in Design view you can see that the styles are applied. It should look like this:
The left column and right column headlines aren't even. Some other stuff looks weird too. Well, first, that is because we are looking at it in Dreamweaver where it doesn't look the exact same as a browser. Go FILE --> PREVIEW IN BROWSER and look at it in a browser. It should look like this:
Hmm, the top headlines don't match up in Microsoft Explorer 6 (on right). It looks even worse in Explorer 5 and 5.5. Yes, this is one of the many reasons people say "websites look better in Firefox." Just make sure you don't have headlines on the top of the left column. Have a graphic or different sized headline or something to distract people from the fact it doesn't line up perfect. And, hey, Explorer version 7 is in beta and it is supposed to be a lot better!
Now you are ready to add more style rules. You have set the main design, the placement of the divisions/columns. Some text books add these extra style rules INSIDE of the division style rules, but don't -- you will run into problems when you design gets more complex and will end up losing your mind trying to fix it!
Go back to your document stylesheet.css and look at it in Code View. Now you want to add more style rules to make it nicer. I added these, feel free to copy and paste them into your document and play around with it:
/* this style rule will make all images in the left column have nice spacing */
#columnleft img {
width: 170px;
margin-left:15px;
margin-right: 15px;
}/* this style rule will format the text, (because remember it is all in <p> tags) */
#columnleft p {
color:#660000;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em; /* warning, illegible if LESS than default size, .8em */
line-height: 1.2em;
padding:0 15px 0 15px; /* top right bottom left */
margin-top:.2em;
margin-bottom:.75em;
}#columnleft h1{
font-family: Georgia, "Times New Roman", Times, serif;
color:#b30000;
font-size:1.0em;
font-weight:bold;
padding:0.5em 0 0 15px; /* top right bottom left */
margin: 0 0 0 0; /* top right bottom left */
}#columnleft h2{
font-family: Georgia, "Times New Roman", Times, serif;
color:#b30000;
font-size:0.8em;
font-weight:bold;
font-style:italic;
text-indent:1.2em;
padding:.5em 0 0 30px; /* top right bottom left */
margin: 0 0 0 0; /* top right bottom left */
}#columnleft h3 {
font-family: Georgia, "Times New Roman", Times, serif;
color:#b30000;
font-size:0.8em;
font-weight:bold;
font-style:italic;
text-indent:2.2em;
padding:.5em 0 0 30px; /* top right bottom left */
margin: 0 0 0 0; /* top right bottom left */
}/* this style rule will make links attractive */
#columnleft a {
color:#b30000;
font-family:Arial, Helvetica, sans-serif;
text-decoration:underline;
padding:0 1px 0 4px; /* top right bottom left */
}#columnleft a:hover {
color:#b30000;
font-family:Arial, Helvetica, sans-serif;
text-decoration:underline;
padding:0 1px 0 4px; /* top right bottom left */
}/* this style rule will make all images in the right column have nice spacing */
#columnright img {
padding:.3em 15px .3em 30px; /* top right bottom left */
}/* this style rule will format the text, (because remember it is all in <p> tags) */
#columnright p {
color:#660000;
font-family:Arial, Helvetica, sans-serif;
font-size:0.8em; /* warning, illegible if LESS than default size, .8em */
line-height: 1.2em;
padding:.2em 20px .5em 30px; /* top right bottom left */
margin:0 0 0 0; /* top right bottom left */
}#columnright h1{
font-family: Georgia, "Times New Roman", Times, serif;
color:#b30000;
font-size:1.2em;
font-weight:bold;
padding:0.5em 0 0 15px; /* top right bottom left */
margin: 0 0 0 0; /* top right bottom left */
}#columnright h2{
font-family: Georgia, "Times New Roman", Times, serif;
color:#b30000;
font-size:0.9em;
font-weight:bold;
font-style:italic;
text-indent:1.2em;
padding:.5em 0 0 30px; /* top right bottom left */
margin: 0 0 0 0; /* top right bottom left */
}#columnright h3 {
font-family: Georgia, "Times New Roman", Times, serif;
color:#b30000;
font-size:0.8em;
font-weight:bold;
font-style:italic;
text-indent:2.2em;
padding:.5em 0 0 30px; /* top right bottom left */
margin: 0 0 0 0; /* top right bottom left */
}/* this style rule will make links attractive */
#columnright a {
color:#b30000;
font-family:Arial, Helvetica, sans-serif;
text-decoration:underline;
padding:0 1px 0 4px; /* top right bottom left */
}#columnright a:hover {
color:#b30000;
font-family:Arial, Helvetica, sans-serif;
text-decoration:underline;
padding:0 1px 0 4px; /* top right bottom left */
}/* this style rule will format the text, (because remember it is all in <p> tags) */
#footer p {
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:0.7em; /* warning, illegible if LESS than default size, .8em */
text-align: center;
padding:0 0 0 0; /* top right bottom left */
margin:1px 0 0 0; /* top right bottom left */
margin-top:1px solid #333333;
}
Replace my colors with better ones. Play around with font families. This last bit of code also takes off the unattractive color on the left column. It was just there to make sure all the divisions were lined up properly. If you don't already have a nice color scheme, go choose one at the Well Styled website. I'm sure you can do better than the colors I chose here!
Create a header graphic that is 750pixels by 125 - 175 pixels and insert that.
Save and view in Design View. Keep changing around the spreadsheet and view. Change and view. Pretty soon you will have a web design that will inspire consumers with confidence and help them access all of your services and make donors feel safe enough to donate online!
See the website created with this exercise. To view the code while in a web browser, just go VIEW --> SOURCE and copy away. Get the CSS stylesheet too.