I finally have some real content on my website, you can see my efforts here:
Getting the text content for this was pretty easy, the trickier part was getting illustrative images that actually looked good. I trawled the internet for pictures, and while I found some that will explain how you get from organic material to complex hydrocarbons, I didn't think there was sufficient consistency (in terms of their overall look and feel) to use them on my site. In the end, I resorted to nicking screen grabs from some training material I had, but they had nicked it from Total so I figured it was ok.
I took the screen grabbed images and added them as layers in photoshop. I've already used layering and animation to create animated gifs for my flash video so it wasn't difficult to create a series of animations explaining the different processes involved in forming hydrocarbons. Here is the first image for illustrative purposes:
As you can see, it depicts dead animal and plant matter falling to the sea bed and being covered by more layers over time. There are 3 more images which describe how the material is broken down by heat and pressure and then the hydrocarbons getting trapped under an impermeable layer of rock.
Here is my first attempt at page 1:
Initially, I decided to have a vertically scrolling page for the 4 images and the information that went along with them. To ensure that my page created enough space between my header and footer bars I did the follwing:
The main contents of my site, the images and the text, are inside their own div, called wrapper. This wrapper is positioned in the centre of the screen and has a set width of 960px so that it can be viewed correctly on all modern monitors. By adding bottom:0 and clear:both; I ensure that the footer always appears at the bottom of the screen.
The images have been placed in boxes that are floated left and given wide margins so that they sit in the middle of the wrapper. This ensures that the text positions itself above and below the images without too much thought required on whether half a sentence will try and display itself up one side. Putting them in a box also allows me to add a border in keeping with the coloured squares at the bottom of my pages. The above example has a red border colour.
The only other thing to note was that I added a shadow to the outside of the boxes to make them stand out a bit more:
This bit of code has been added to my index css file as a class, so it's available for use on any of my divs across my pages.
This gives me the following look on my page:
I was pretty happy with the layout of the page, but after some thought I felt that I should try and reduce the scrolling required to view all the information. In class on Tuesday some of my fellow students had shown examples of image galleries so I decided to see if I could implement a gallery for my page.
I found the following guide for a gallery:
I wanted a gallery with a numbered list of the images to indicate the different steps in the process, so this was ideal.
The guide explained in fairly clear terms how to import the information into your own html and style sheets although they should have made it a little more explicit in stating that you need to download jquery.js and jqgallscroll.js in order for all the java script code to work correctly.
After adding my four images like so:
I got the following result:
It's fair to say that the initial settings aren't quite right. The size of the box needs to change and the image needs to move up so that the descriptive information can be seen below it.
The guide explains how to change the height and width of the box, but repositioning the image from the centre of the box to the top, to allow room for text at the bottom, was pretty tricky.
To move the image I changed this:
To this:
The original code had the size of the margin dependent on the height chosen for the box so I changed that to 0. I also changed the top parameter changed from 50% to 0 so that the image would appear at the top of the box.
Other changes I made:
These two classes from jqGallScroll.css control the position of the image text and caption respectively. Setting the positions to absolute and top to specific values ensures the text is positioned at a set point below the image.
The only other major change I made was to the outer box of the gallery:
I made the box's border the same colour as my header and footer and increased the left and right margin to 150px each so that it would sit in the middle of the page. I added the code I had used for the darkshadow class from previous to give the box a shadow. For some reason I couldn't call the class normally, but doing it this way worked.
And here's the outcome:
I'm really pleased with the overall effect and the great thing is if I need to use it again I can do so without too much difficulty.
No comments:
Post a Comment