So Why A Web Site?

This is more of a reminder to us, but we've included it here just in case you are attempting to achieve something similar.

First thing to consider was what we were trying to do. It was obvious for us really, its a simple personal website that we wanted to share with friends and family. Yes we could have joined something like facebook, but would then be subject to the restrictions they have, and of course it wouldn't have been so much fun. So the idea is to let those who are interested peruse the photographs and videos we've taken over the years - without them having to suffer our myriad of albums and DVDs!

Size Matters

Photographs take a while to load so we had to decide how big the file should be versus how much detail to lose, in the end we settled on three files for every image. A thumbnail, a medium size for quicker loading, and then the large original file if anyone wanted to see it in all its glory!. Video's, even ours, can be tedious, so we tried to keep each to a maximum of five minutes long - some are shorter -and all have been reduced to the internet standard to avoid compatibility problems.

Presentation and Navigation

We then wondered about the best way to make it easy to find the different media files and opted for the two most obvious ways. Navigation using a menu system Michael devised (drop downs caused issues which we will explain later) and an internal search engine. We then broke our files into collections, based initially on the year they were taken, and then into further sub categories, for example what they are generally about (a wedding) and if necessary further breakdown (vows, dinner, speeches). A second navigation system using GPS is also deployed. Each collection is restricted to just over 100 photographs, with most much much less than that.

Do your Preparation

If you are like us then updating your site will be irregular, so you need to think hard about how you want to manage your data. Creating appropriate folders and sub-folders in your

computer with meaningful names seems obvious. Using Microsofts Visual Basic Express (its free!) Michael wrote a simple file managing solution, not strictly necessary but time saving. No doubt there are some commercial offerings that will do that, but no matter what you choose, you need to be organised from the start, otherwise you'll end up tearing everything up when you realise your structure isn't flexible enough to cope with changes.

Keep It Professional

We also thought it important to create a professional looking site keeping within all the W3C standards for HTML and CSS. They are there for a reason, it gets you into good, but more importantly, consistent habits. HTML design is very forgiving, and you can get away with poor construction, but start to venture into Javascript - which you will eventually have to do to incorporate some dynamism to your site - and you'll suddenly end up in a world for which you aren't familiar. So learn good HTML and CSS techniques early, and Javascript coding will be so much easier.

Content and Style

Both are vitally important, you need to bear in mind what look and feel you want you site to have, as well as what you want to say or show. There are lots of different style types, some we like, some not. Spend some time browsing different sites and decide which style you like best. There are even sites that provide templates. These are fine if they suit you perfectly, but once you decide to change things, fiddling with someone elses template gets rather tricky if it hasn't been well documented (and we find too many assumptions about the users knowledge is made) so ultimately we would recommend you start from scratch.
If you don't understand the difference between CSS and HTML then we suggest you learn about it. We recommend a book by Jerry LEE Ford Jr, HTML, XHTML, and CSS for the absolute beginner.
No doubt there are others good books to be had, but we found his easiest to understand. CSS dictates the style of you page and you can incorporate CSS rules within the page, or create a separate document and tell the page where to find it.

Welcome Page

This sets the tone. We chose a blue pallette, because Michael like blue, you'll read some nonsense about happy and sad colours, just go with you gut instinct. We kept it simple by using a

header

a banner

a navigation bar

a content section

a sidebar

a footer

Each section is broken up using the 'div' element, and each 'div' element has been given its own attributes.