Web Design – Week 6

I’ve spent today getting my homepage up and running. I had already drawn all of the content on Illustrator and had decided on a colour scheme and a font . I had already decided to do away with the coloured versions of my icons (see week 4) and had decided only to use colour to indicate the page link when each of the elements was rolled over.

Screen Shot 2013-06-03 at 18.44.37

In order to make the icons on the page change colour when the mouse hovers over them I needed to learn how to create disjointed rollovers. This is because I wanted different aspects of the page to change when each section is highlighted. For instance, when the climate flask is rolled over I want the title to disappear and the other flasks to have a grey outline. A simple rollover image would not allow for this.

Before I could attempt the creation of some disjointed rollovers, however, I needed to slice up my homepage image in Illustrator. I needed each section that I wanted to act as a rollover to be a separate slice. Once I’d done this I saved it for web. All of the slices were then saved separately as images.

Here’s what the page looked like sliced up…

ImageI then drew some Div tags freehand, ensured that they were the same size as the individual images, and inserted each image into the correct tag. This gave me my basic homepage.

I then had to change this original image in Illustrator to what I wanted the page to look like when a specific area was rolled over. So, for example I needed a version of the homepage when the food icon was rolled over. Eg.

ImageI had to save this image  (and every other version i needed) for web too. Then I went about creating disjointed rollovers. Basically, this type of rollover meant that rather than just swapping the image that is rolled over for another I could have the appearance of the whole page change when an icon is rolled over. Creating this type of rollover was relatively easy (once I’d found the Behaviours toolbar anyway).Image

I just had to select the image (the sliced up part of my homepage) that I wanted to initiate the rollover and on the Behaviours toolbar select Add Behaviour and then Swap Image.


A list of all the slices/ images appeared and all I had to do was pick the images that I wanted them to change into. I’ve done this for all of my images now, so the homepage looks like this…


And as you rollover each icon you get;

ImageImageImageImageImageOnce the mouse icon isn’t on any of the images the normal/ starting homepage appears again. So, that’s it so far for the homepage…now to work on the pages it leads to!


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s