interactivedanwen

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

Anatomy of my website

Leave a comment

So it’s finally finished!

Link to website: http://www.britschoolmedia.co.uk/IM/2012/danwen/drhuang.html

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 dropdown menu which I will mention later on.

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)

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).

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.

html table

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.

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 it.

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 for 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, postioning etc)

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).

Soh Tanaka's clean and effective jQuery image hover gallery was perfect for my simple needs. It looks cool and required minor adjustments (had to delete some hidden links here and there then replacing images etc).

Soh Tanaka‘s clean and effective jQuery image hover gallery was perfect for my simple needs. It looks cool and required minor adjustments (had to delete some hidden links here and there then replacing images etc).

Here's me dissecting flexslider's css file, thankfully it's all clearly labelled. Very nice.

Here’s me dissecting flexslider’s css file, thankfully it’s all clearly labelled. Very nice.

Other stuff/breakthrough (well at least I think they’re cool)

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).

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):

<a href="http://www.stuff.com" target="_blank">Stuff</a>

Here’s how to post source code on wordpress without the whole thing jumbling up in a technical mess (discovered whilst trying to post the above code).

Advertisements

Author: Danwen

I'm British Chinese. I like games, anime, football, comedy, graphic novels, Buddhism and other things.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s