Design for Web // Coding

To begin with I created a template to create all my pages from.  I decided that all pages would have the same buttons at the top and there would be a title and then a 2 column structure.  I created the rollover images in the template and created editable regions for:

• the title as I wanted the title to be in a typeface that wasn't available in dreamweaver so I created them as image files using illustrator.
• the name of the page
• the two columns

This is the coding for my style sheet, created from the wire frame:

@charset "UTF-8";

/* CSS Document */

body {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:0.8em;

color:#000;

}

#h1 {

font:Verdana, Geneva, sans-serif;

font-size:30px;

}

#container {

width: 1024px;

height: 768px;

background-color: #fff;

position:absolute;

margin-left:50%;

left:-512px;

}

#title {

margin:50px;

width:1024px;

height:305px;

background-color:#000;

}

#navigation {

width:1024px;

height:156px;

position:relative;

margin-left:50%;

left:-512px;

padding-left:62px;

}

.button {

width:150px;

margin-right:100px;

height:156px;

position:relative;

float:left;

}

#pagetitle {

width:1024px;

height:50px;

margin-top:60px;

text-align:center;

float:left;

margin-bottom:40px;

}

#pagetitle p{

font-size:3em;

}

#column1 {

width:512px;

height:563px;

background-color:#FFF;

float:left;

overflow-y:scroll;

}

#column1 p {

margin-left:0px;

margin-right:20px;

float:left;

font:Verdana, Geneva, sans-serif;

font-size:1.1em;

text-align:justify;

}

#column2 {

width:512px;

height:563px;

background-color:#FFF;

float:left;

}

#column2 p {

margin-left:50px;

margin-right:0px;

float:left;

font:Verdana, Geneva, sans-serif;

font-size:1.1em;

text-align:justify;

}