Monday, May 4, 2015

Site Design - Template 5

The main focus of this template is the embedded Google Drawing. This drawing has a picture on it that has areas made into hyper-links to websites. When you click on the individual areas (planets, in this case), you are taken to different websites.
All the navigation has been removed and the main elements are the 5 round buttons at the top. These could take you to documents with the work for individual tasks or they could take you to more pages on the same website. ( the example buttons here are not linked to anything ).
I have laid out these 5 buttons in a single row table that has 5 columns in it.
As I had made the site 1000px wide, I made each of the 5 columns on the table 200px. The colour of the border of the table was changed to white, so it is invisible against the white background, by changing the rgb colour number to 255,255,255.

I then made sure the button images that I placed in each of the table cells were set to 100%, as this means they fill 100% of the space they are given... ie the 200px you gave to the cell width.

All of the images were created on Google Drawings. The header and the buttons were downloaded from drawings as png files and uploaded to the site. The main image with the planets on it was embedded as a Google Drawing so the hyper links will work.

No comments:

Post a Comment