Design Practice: WEBSITE REGGAE

To create my reggae website I took a slightly different approach to what we learnt in class. Using the Illustrator I designed all the necessary pages. With alternate Rollover versions. Once I had created all the relevant parts I opened them up in Photoshop. It was then possible to split the image up into 9 Separate Jpegs

Sections of Web Page

Sizes of Panels (pixels)

1 - 255px x 129px

2 - 517px x 129px

3 - 242px x 129px

4 - 255px x 511px

5 - 517px x 511px

6 - 252px x 511px

7 - 517px x128px

8 - 517px x 128px

9 - 252px x 128px

Here are the necessary Images needed to Create the site

including the roll over images. I kept everything in the root folder.

In order to put the site together I coded in each pannel. I started with the Index page Obviously.

I inserted all the correct values into the code so that all the jpegs sat in the 1024 x 768 container

CSS File I made sure that all the rollover functions worked

For the other pages I just re-saved the index file into the necessary pages.

LEGENDS PAGE

The middle panels - as the middle pannel needed to change on all of the pages it wasn't too difficult to go into the pages and change the Image for each however for the Legends page it was a bit more difficult. To do this researched into adding extra buttons which would allow the middle image to change on just that page.

To do this I had to activate the J query Library, this allowed me to create 3 extra buttons, that allowed me to switch through the middle panels.

You have to load the jquery library before any scripts that need it so best practice is to always put it first

J query short code

J quiry Library In Dreamweaver

References for J query

http://api.jquery.com/hide/
http://api.jquery.com/show/
http://www.w3schools.com/css/css_display_visibility.asp

The buttons were made in illustrator then saved as
.png files to allow for transparency

Here you can see the 3 center panels in the div class = images legend 5

this allows the buttons to call these different functions

Links don't have to go to another page, if you use JavaScript: it just does that on click

JavaScript: aFunction();

And functions always have a () after, inside which you can send variables and parameters to the function but that's not needed here

Eg aFunction($aVariable);

J query coding for extra buttons

CSS Buttons were placed in 40px x 40px squares

CSS leg buttons

When you click a button it links to "JavaScript: buttonOne();" which is a function defined in the script. When you execute a function you say you "called" that function

The script then hides the other 2 images if they are up and shows the one you clicked

CSS middle pannel code

Music

The music was quite difficult. Originally I was gonna have that page linking to a music player but this ended up going horribly wrong. So in order to get the music working I hooked up the button to a youtube video that is inside a div that is 1px by 1px with overflow:hidden. Unfortunately it does not work as a play or pause button nd there is only one song. But this isnt bad to start with.