I thought I’d get an early start in building my own website for assessment as part of IDAT102. Using trial and error(mostly error) I’ve been putting together a basic website using CSS.

I will update this with little pieces here and there in no particular order.

I used the work from the previous session as a starting point as it had the basic structure that I wanted. I added additional pages by duplicating the original index.html, which contained links to each page, and renaming each accordingly.

After this I started playing with the cascading style sheet of which the current version is here [removed]. I tidied up the interface of the site by tweaking the margins, padding, fonts and colours, ect. I added new features such as buttons becoming lighter on mouseover and the border around the menu link for the currently selected page to turn light blue. I also set a minimum length for the white content area and padding to make it so there is always an empty space between the content and the end of the page.

body {
background-color:#999999;
}

#content {
     width: 800px;
     margin: 0 auto;
     background-color: #CCCCCC;
}

#main {
     width: 600px;
     background-color: #FFFFFF;
     float: right;
     color:#000066;
     font-family:sans-serif;
     font-size:14px;
     padding-left: 40px;
     padding-right: 10px;
     min-height: 600px;
     padding-bottom: 100px;
}

#header {
     height: 124px;
     background-image: url(componant3.png);
     background-repeat:repeat-x;
}

h3 {
     color:#000066;
     padding-left: 15px;
     font-family:Verdana;
     font-size:14px;
     margin-bottom: 20px;
}

h1 {
     color:#B1C8E0;
     font-size: 40px;
     font-family:monospace;
     padding-top: 10px;
     padding-left: 10px;
     margin-bottom: 0px;
}

ul#menu {
     float: left;
     list-style: none;
     text-align:center;
     padding-left: 0px;
     margin-top:0px;
}

ul#menu li {
     padding: 0.3em 0.3em 0.3em 0.3em;
     background-color:#cccccc;
     width:140px;
}

ul#menu li a {
     text-decoration:none;
     display:block;
     color:#CCCCCC;
     background-color:#0066FF;
     font-family:Arial, Helvetica, sans-serif;
}

ul#menu a:hover {
     color:#ffffff;
     background-color:#3399FF;
}

input, textarea {
     border: 2px solid #999999;
     width: 400px;
}

input[type="submit"] {
     background: #666666;
     color:#FFFFFF;
     width: 80px;
     border-bottom: 2px solid #999999;
     border-right: 2px solid #999999;
     border-left: 1px solid #999999;
     border-top: 1px solid #999999;
}

#form {
     background-color:#CCCCCC;
     padding-bottom: 10px;
     padding-top: 5px;
     font-size:10px;
     text-align:center;
}

ul#menu [class="selected"] {
   background-color:#99BFDF;
}

Using Adobe Illustrator I made several versions of a fading 10 x 124pixel texture for the site to give it a smoother appearance, eventually settling on this one.

And in the css file:

#header {
height: 124px;
background-image: url(componant3.png);
background-repeat:repeat-x;
}

This repeats the image across the length of the heading, which uses less bandwidth and is more flexible then using a single image. The file is named componant3 because it is the 3rd major version.

I wanted a smoother transition from the menu down the page so I created another fading texture from the colour of the menu background to the overall background but instead decided to have it written into the HTML itself rather then the CSS. This image for some reason doesn’t blend in properly in internet explorer 8 and is clearly visible so either the hexidecimal value is read differently by firefox and IE or the rendering engine of one of them displays .png incorrectly.

For the favicon I used this online tool I converted a simple pattern I drew in mspaint (windows 7 version) into a .ico file. I then added the code

<link rel="shortcut icon" href="favicon.ico" />

between the head tags on every page to instruct the browser to load the favicon.

I’ve also been looking into server side scripting for storage of data inputted into the form but have been mostly unsuccessful, hopefully I’ll work it out in next week’s session.

Design wise I will probably alter the appearance significantly before completion. The site is viewable in its current form at [removed], please bear in mind that it has only been developed for use with firefox and that certain things don’t work properly on other browsers.

Here is a rough sketch of my design: