Site Development (06/02/2011)

I have created the basic page layout to that of my designs, and below is an image of what I have made. I have tried to stick as close to my design as possible, but also using some more advanced CSS features such as ‘text shadow’ to make it look like the titles are glowing. Below is an image of the website current development.

I have realised it’s not much difference from my designs but the banner is the most noticeable part of the site. So I have a few ideas, I could create a new image for the header so it looks just like the designs. Below is an image of the new header image I could use to make it a lot like my designs.

I have also thought of making the header work in a different way by using two different images, one of the images will be for the header and one will be for the navigation bar. Below is an example of the two images I would have used to give it the same appearance to that of my designs.

+

Through this idea I figured I will be able to make the site have more functionality and give it more of an advanced appearance that will be functional across all web browsers. This would be to use sprite images. This is also a feature of CSS and it helps a lot making an (Image/button) change appearance when hovered over or clicked where all of the data is stored in one image. The site will be created to look for a certain range of pixels within the image. Below is an example image of the sprite I might use in the development of the site

I got this information and the example from a magazine I bought not so long ago, that shows some good techniques when developing websites. Below I have provided an image for the front of the magazine.

Or there is another method I have considered using which would be to use CSS to colour the background of the navigation bar links to the same colour of the images that are used for the site because this method will be saving on resources as I have a limited amount of data to cover.

I can use CSS to also change the colour of the background when the link is hovered over as well so it can be just as good whilst saving resources and data can make it seem a better option.