Interactive Media Work main site (dashboard)/web author blog. Smile and interact?

Anatomy of my website

Making this website was a stressful but enjoyable experience. The amount of time I’ve stared at code and pumped my fist in air triumphantly as a solved a problem are countless. Thankfully my experience in math and gaming has prepared for this up and down ride of overcoming the puzzle we call web coding. Anyhow here’s an anatomical breakdown of my website (just to evidence that I didn’t just pull all of this out of thin air):

Main Structure + other hand coded bits

The navigation bar is one of the most important part of a functional website so I hand-coded it; asides from the awesome drop-down menu which I will mention later on. It may look simple but alignment and styling was a nightmare (when I achieved the end result, the satisfaction was immense) .

The footer is hand-coded as well. The good thing about that is I can jam a load of hidden feature to it (the email address is an actual link to user’s e-mail composer, ready for sending e-mails to the client). Of course I didn’t forget the copyright and a link to this very site (just click on my name).

I’m quite proud of these set of picture menus as I hand-coded them (you can produce something beautiful with some html and css plus a good coding book). A lot of :hover css on this one.

Okay so I used a html table generate on this one so that I won’t go insane typing out td and tr tags. However the content and css styling were all hand-coded, so there.

Just to prove that I wasn’t bluffing, here’s a screenshot of me tinkering with html in dreamweaver.

Add-ons (or should I say snippets I downloaded from the internet):

My first outside resource/bits of code. This smooth and speedy drop-down menu is called TinyDropdown2. It’s brilliant, if you can handle the mass amount of CSS they chuck at you that is.

Flexslider by WooThemes. A no fuss slider that’s highly customisable (even the JavaScript is relatively clear). I made it suite the site more by changing the colour of the arrows in Photoshop and adding captions (this took a while and a load of tinkering with opacity, colors, positioning etc).

On the form page I linked a thumbnail to the form so that people can easily access a bigger version. If they’re not happy with that they can click on PDF link at the bottom (this was easier than I thought to implement).

Google maps were kindly enough to give me a n iframe code for their awe-inspiring map box (yes we’re calling it that). That wasn’t the breakthrough though, the fact that I’ve managed align everything the way they are is. Seriously I’ve lost couple strands of hair trying to do it but hey that’s part of the learning/coding process right?

Last but not least here’s how to make a page/link open in a new tab (just add ‘target=”_blank ” in you anchor tag):