Design for web // Website coding

When it came to coding the website I only had to create 4 editable areas to insert my pre prepared images from photoshop.

The first two areas will form the "logobox" and the navigation bar, both of these will end up being the same size aligned  side by side.

I created the logo box 293px X 293px and added 18px padding around it. The shape of the globe stain has been cut out in photoshop so it is now transparent, the Idea is to fix the navigation bar and logobox so that it it remains in a constant position on the page, .

The nav bar was a little bit more tricky,  because these would form the links to navigate round the website I had to prepare them a little differently in photoshop so each link would have the same spacing surrounding it.

 As the buttons on opposing sides have a white gap of 18px facing inwards, because the background is white it makes it a little easier as you cant tell the odd link shape and size when it is on a white background.

The coding of the nav bar after inputting the css on the style sheet

The photobox and the content box are where i will be placing the visuals and content of the website, as I want to keep a constant theme, each page will follow the same layout. The photobox will be a long thin rea to place the visuals, I am editing any images I am using on photoshop to png's 732px W x 293px H, it results in being the same length as the logo box and the navbar.

The content area is again 293px X 293px, and consists of the same background as the logo and the links. in this instance i have created the text