Building the website wasn't difficult for me although I did take usability into consideration whilst building though.
I asked my housemates what they all thought of the design before I started coding it, they all agreed that it was a nice design. I then asked would they use the website if they was looking to buy a certain album, in which they responded they would.
When I started building the website I started with the basics I didn't style it or anything I just put straight forward HTML into the website this allowed me to see what the website looked like before it had any styles within it.
This is what it looked like, ugly isn't it?
Okay so i thought about styling and since it was at the top I needed to sort the navigation out. I decided to create a class for each link within the navigation it makes my style sheet look some what messy but it also helps me manipulate it into doing what I want which is appear in the center of the screen.
Okay so i have now styled my navigation and its looking good, I also changed the font family and colour whilst I was at it.
This is what I ended up with eventually personally I like the look of it, also when you click it the link doesn't become underlined or highlighted purple I changed this so that it would stay one colour throughout the process.
Next I decided to style the background as I didn't want white as my background, I wanted a grey, not like grey behind the nav, something a bit darker.
I grabbed the hex code for this colour, its a pretty dark shade of grey but fits well in the website.
I needed to then manipulate the image into place, this required me to put it in a <p> </p> Tag, which I did, I then changed its position to absolute so I could move it around the page, after a good 10 minutes of figuring out the pixels of the position i wanted it I had managed to get it into place.
A lot better now isn't it.
Next I needed to create the content box within the website, although I do have knowledge of doing this I did need to look at w3schools just to double check that I was doing it correctly. After I did this I realised I was. I then remember that within CSS3 you can round off your boxes, which is what I did, its simple to do this.
I then filled the content box in and ended up with this.
Overall I know it looks very basic but I feel that it is quite effective, ideally I would like to create JavaScript Slideshow using html5 but I don't have the time.
Moving on to the 'Buy Music' page I knew my plan for this page however its whether I could pull it off I say this because I have planned to use Javascript within this page. Either way I jumped straight into it knowing that I had to at least attempt to use Javascript.
At first I was using this way of creating Rollovers
function MouseRollover(MyImage) {
Myimage.src = "BMTHS1.Jpg";
}
{
function MouseOff(MyImage) {
Myimage.src = "BMTHS2.Jpg";
}
However I found this ineffective when it came to trying to do multiple image searches so i went to the internet for helpin googling how to create multiple image rollovers in JavaScript after searching I found a website which had exactly what I wanted on it. Although the code looked completely different it still achieved the same effect.
This is the way I ended up creating multiple image rollovers.
In the head I had this
pic1 = new Image();
pic1.src = 'BMTHS2.jpg';
pic2 = new Image();
pic2.src = 'BMTHS1.jpg';
pic3 = new Image();
pic3.src = '18MB.jpg';
pic4 = new Image();
pic4.src = '18MF.jpg';
pic5 = new Image();
pic5.src = 'FOBB.jpg';
pic6 = new Image();
pic6.src = 'FOBF.jpeg';
Then in body I put this:
<p class="bmth">Bring Me The Horizon Sempiternal</p>
onmouseover="document.getElementById('r1').src=pic1.src;"
onmouseout="document.getElementById('r1').src=pic2.src;">
<img src="BMTHS1.jpg" width="100" height="69"
border="0" id="r1" alt="BMTH Sempiternal" />
This worked for this one so I then decided to add my next one.
<p class="calvin">Calvin Harris 18 Months</p>
<p class="pic2"
onmouseover="document.getElementById('r2').src=pic3.src;"
onmouseout="document.getElementById('r2').src=pic4.src;">
<img src="18MF.jpg" width="100" height="69"
border="0" id="r2" alt="CH 18 Months" />
The way this works compared to the other way this will search through the document and find the picture source and then post that on mouseover and then on mouse-out it will look for the other picture source this is done by document.getElementById. The ('r2') is so that it knows it is the second rollover.
After I had achieved this, I launched it only to then realise I had stacked them onto of each other so I styled them in CSS using there own classes and manipulated into the place where I wanted them I then added text on top of the image to allow the user to see what the album was before they purchase it, I included a buy now button however they don't lead to anything due to not being allowed to use client side scripting.
This is the finished product all of the albums have a front cover on mouse off and a back cover on mouse over.
As we can see I have kept everything the same inpart from what is in the context box.
Moving onto the Listen to music, on this page I wanted to show a sample song from each album displayed in the buy music page.
I remember a lecture about being able to use the <audio controls> in HTML5 I used these to create my audio controller. I also remembered that Firefox doesn't support mp3 and that it supports ogg so I remembered to change the file extensions and put them in. I also included some text next to the track so that the user can see what they are listening too. I did this three times one for each album displayed on the buy music page.
You can also see here how I have manipulated the text to fit and then moved the audio controls next to each bit of text.
