Coding My Site

I began by creating the home page, which is labelled as index.html

I then created a stylesheet for the index page and I began to try code.

I started with the container which I had determined to be 1024 pixels by 768 pixels, I have left it purple so that I could see where it is on the page, 

currently in this shot the container is not in the right place, I want mine to be centre.

This is now correct and the correct code is below

I then went on to the navigation bar, I knew due to my wire frame I wanted it to be 200pixels tall and 1024(so it spanned across the whole container) pixels wide.

 Again I picked a random colour so I could see that it was right.

I then changed the colour to the one I had drawn up in my design to do this when I had gone to the colour option I had changed the format to rgb, I then typed in the values of the purple colour I wanted to achieve and this worked.

I then added my logo to the site, when I first typed in the code on the stylesheet (CSS) the logo appeared to the left, and so I edited the code to find where I wanted it to be. 

I referred to my wireframe for this part, I knew it had to be 21pixels down from the top of the page, and I placed it 50% left like I had the container itself, I knew that this meant that the logo aligned to the centre line on the left and I needed to minus 73 pixels back for the logo to be in the correct place. 

And so it was now in the right place, I think that it looks good in the nav bar, as it is right in the centre and it has an equal distance between the top of the page and the bottom of the navigation bar.

I then thought about the buttons in the nav bar, this was the first code I tried, 

All I needed to add was top: 71px, as it had already been placed 21 pixels down, I knew this from referring back to the wire frame

and so button1, 'katy hudson' link was now in the exact place I had wanted it to be, and I was pleased with what I had so far achieved 

I then continued to add in the buttons, following the wireframe, each time I changed something I referred back to my the safari preview so I knew what I had exactly changed, this process was slightly trial and error to but I managed to get the buttons in the right place.

At the same time as this I trialled the link being rollover buttons, and I liked the effect it had, it connects the links the the 'prism' theme, and it was really minimal.

(all of the pages in the web address bar)

After I had created the navigation bar, I went on to the background image, and so I used the imagery from indesign, I opened them up in photoshop and saved them in the correct file format for web.

I inserted the background image as an image.

I then went onto create all my other pages, by creating a navigation bar, in the right colour, and then adding a background image.

Below are the site pages I had managed to create so far, each of them connect to their own pages, and each have their intended background image and the right colour navigation bar, also all the rollover buttons are working and the nag bar is all aligned and correct. I think so far that they all work well, and I would say I have so far stuck to my original design, and I have managed to create the basics.

I need to now ensure that each of my pages link back to the home page as they currently only link to each other,
I also need to add a footer with the address, all of the icons, and the triangles indicating which album the audience is looking at. 
As well as this I need to add the content on the page, I think that this may differ from the original design due to my experience of coding so far, but I think I will be able to almost put in the text like I had on indesign, the fonts may need changing though as they might not be web safe.