Home Page

My home page is up and running. Here is the link to it:

https://www.imperial.ac.uk/humanities/webdesign/2012/grahamshaw/webroot/html/home.html

Here is how it looks:

I covered the look and feel of the site in the wireframe post so I won't go into that. Instead, I will talk about how I got everything to work.

Firstly, in class we were told to set up our ids in the following way: <wrapper <banner <nav />  /> <container /><footer /> />   (where the < and /> indicate where you open and close the ids. This produces a box in the middle of the screen with all your website content inside it. This is a perfectly acceptable way to set up a web page but because I wanted two strips at the top and bottom of the screen I have set my pages up in a slightly different way. The layout for my site goes:

<header  <nav />  />    <wrapper  <container /> />  <footer />

My page therefore has 3 distinct strips: the header which contains all the navigation links, the wrapper in the middle of the screen, and a footer at the bottom. The header and the footer have the same background colour (sampled from the wire frame photoshop file using the eye-dropper tool), while the central wrapper area is kept white for easy reading.


My style sheet is therefore split into two: index.css, which is the global style sheet for all the ids and classes that stay the same across the site, and home.css, which is the ids and classes unique to my home page.

Here is the style sheet info for the header:

The Header has been given a set height of 150px, while the navigation bar has been given a width of 960px and a left hand margin of 200px. So it isn't exactly centred in the middle of the screen, but it's close.  The rest of the navigation coding is very similar to the nav coding from a previous post. Some of the padding values have changed, but it is still an inline list of links.

The class logo makes sure that when I insert  my image into the navigation bar it is positioned on the left with space above and to the right of it.

The footer style info looks like this:

The footer has also been given a set height of 150px; setting the width to 100% ensures that the footer goes across the entire screen. The background colour has been set in the same way as the header, but there is also a background image which was a separate layer from the photoshop wireframe file which was then saved as a gif. The repeat-x command makes sure that this background image repeats horizontally across the screen for different sized monitors.

The class inner is the container for the info in the footer. Its margins have been set to the same parameter as the header so that positioned in the same horizontal location. The inner footer is less wide than the navigation bar so that the links that float on the right of the screen are positioned slightly inwards from the edge of the wrapper, as can be seen in the image at the top.

The colour of the text and the links has been set to the same colour as the orange box in the middle of the page, again, using the eye dropper tool in photoshop.

Two global classes contained in the index.css sheet:

These two classes describe two degrees of shadow that can be added to boxes. The following link describes how to use shadows more fully, but the first shadow is gray and that blurs outward by 10px, while the second shadow is black and blurs outwards 30px. The first shadow is applied to my text container by calling class="shadow"

Inside the home.css are the ids which control the contents of the wrapper. The 3 images are contained inside the classes topimg midimg and btmimg respectively:

The three background for the image were individual layers in the photoshop wireframe and so were saved as separate gifs. The three boxes are floated on the left and given a set height and width. The 3 images inside each box are then constrained to a maximum height of 190px to ensure that some of the background box shows around them.

The setting for the container look like this:

The left margin of the container has been set at 250px so that it will sit to the right of my 3 images. It's width has therefore been set to 700 so that it will still sit inside the main wrapper, which has a width of 960px.

The minimum height and overflow:visible parameters ensure that the container box is at least 650px tall, but that it can grow if more text than this is added.





That's all the interesting stuff I think...