In order to meet the outcomes of the 'Design For Web' brief we needed to produce a fully functioning multipage website, fully coded and theoretically could be taken live if we wished.
To aid the coding of my new website I produced a hand-rendered wire frame as a template for each of the pages in which I had worked out all o the calculations.
I began the coding for my website by creating a 'invisible' container in the style sheet, which would be the screen size I had selected which is 1024 px x 768 px which works on 99% of devices. This container would not visible on the final site but would contain all the content that was visible.
Once I had the container I was then able to create a navigation bar which would be placed inside the container on the left hand side and would enable the audience to navigate around the site, I decided that the width of the navigation bar would be 200 px in order to give plenty of space for the buttons.
I then created the coding for the buttons of the website, stating their height of 100 px and width 200 px which I would then be able to place the designs I created on Illustrator inside the navigation bar.
Another piece of coding I needed to create in style sheet, so that I could place it into the source code later on was a container for the type which would be on each of the article pages. Using the calculations I made when creating the wireframe I made a container which had a width of 365 px and a height of 300 px, I also added a scroll bar should the text exceed this size.
Again using the wireframe I had created I was able to work out the size of the images which would be placed on the article pages, a width of 190 px and a height of 300 px. I used this calculation to create the coding for 'image' in the style sheet.
Once all the coding in the style sheet had been done I began with placing the content into home page by using a facility on Dreamweaver which I learnt about in Simon's sessions to put in rollover buttons into the navigation bar.
I then split the the content container into two separate columns which would ensure that the content would not spread across the whole of the screen and the page would not look too 'busy'.
The inside this left hand column on the home page I wrote up a brief explanation of the purpose of the website and how it could be interacted with by the audience in left column.
On the individual pages for the articles I linked in the images from the 'style sheet' to the 'source code' using the 'div' coding.
I then repeated this process with the text for the page playing my text inside '<div>' and '</div>' which linked the coding I had produced in the style sheet.
As I was going through the process of coding I chose a different colour for each of the container which I found particularly useful as I was then able to see the negative space left when padding etc. was added.
Once I produced on the webpages for my website I was then able to use this coding as a template for other pages and ultimately create a fully functionally four page website.
Final Website Pages
