The first change that I made was the styling of headings and navigation, it was also suggested that I used a handwritten type font so I thought that I would use this style for the navigation and headings. To find the right type of font I went on Google Web Fonts, which had quite a selection especially of hand written style.
After looking at through Google Web Fonts, I narrowed it down to these five. I really liked the look of the 'Happy Monkey' font, which is at the bottom. I thought that it looked hand written and at the same time looked clear and easy to read.
I decided to try out the 'Happy Monkey' font. The image above is of the title. I wasn't sure whether to change it from how I originally had it, however I think this works really well and looks clear and easy to read. Instead of having the letters cut out on the paper like before I decided to have a crinkled paper texture on the white box and denim for the letters.
I have also used this font for the navigation. Again I think it works really well and is also clear to look at and read on the page.
I have also changed the font of the headings in the content boxes and the links on the 'Press Reports' page to 'Happy Monkey' and I am pleased with how it has turned out. I did try having the paragraphs with this font as well but I found it quite hard to read and decided to stick with the simple body text. Below is the html and css code that I need in order for the font to work.
HTML:
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
CSS:
font-family: 'Happy Monkey', Helvetica Neue, Helvetica, Arial, Sans;
The next thing that I need to look at and change was the post it note.
I went on to make the post it note slightly bigger and a lighter shade of yellow, I also made the images of the logos slightly bigger as well. It was also suggested that I move the logos from the header, so I decided to move it so that it was on the right hand side next to the content and underneath the navigation, this means that it will be still be clear and easily visible when people come on to the website.
The next thing that I did was finish and change the gallery page. I struggled to do my original idea of the rollover, so I instead changed it and used a simple lightbox code that is just as effective.
This is now what the gallery page looks like. When you click on an image it will come up in a box in the middle of the screen. The code for this was pretty simple and it meant that I need two versions of each, one small and one big.
<link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.ie6.css" /><![endif]-->
<script type="text/javascript" src="javascript/lightbox/jquery.lightbox.min.js"></script>
<link rel="stylesheet" href="css/styles.css">
I needed to place the bit of code, which is above at the top my html code for the page and then in my main content section I was able to put in my images.
<a href="images/3L.png" class="lightbox" rel="group1"><img src="images/3.png" width="200" height="97" /></a>
<a href="images/L2.png" class="lightbox" rel="group1"><img src="images/2.png" width="200" height="150" /></a>
<a href="images/L4.png" class="lightbox" rel="group1"><img src="images/4.png" width="200" height="104" /></a>
<a href="images/L7.png" class="lightbox" rel="group1"><img src="images/7.png" width="200" height="114" /></a>
<a href="images/L5.png" class="lightbox" rel="group1"><img src="images/5.png" width="200" height="223" /></a>
<a href="images/L6.png" class="lightbox" rel="group1"><img src="images/6.png" width="200" height="293" /></a>
<a href="images/L8.png" class="lightbox" rel="group1"><img src="images/8.png" width="200" height="139" /></a>
Above is the main bit of code for the lightbox. I have highlighted in blue where I need to place the larger image. In red I have highlighted where the smaller images goes and in green where I needed to put the height and width of the smaller image. Underneath that bit of code I need to put this bit in:
<script type="text/javascript">
$(document).ready(function(){
$('.lightbox').lightbox();
});
</script>
This is what the images look like when you click on them. I am pleased with this outcome even though it is not what I originally planned.
I then went on to get all my content to be fixed in one position. The screen shots below show what it looks like when the page is adjusted.
No comments:
Post a Comment