blog theme

my blog theme is here

I had a lot of trouble initially with images and backgrounds in blogger, I ended up finding myself quite rushed and had to simplify my design. However, I think this has worked in my favor, I am relatively pleased with the end result, the colours fonts and layout are still mostly customizable through the standard blogger dashboard, in the end my skills were applied to choosing a color pallette, making minor adjustments to the css and html, and creating a background image.
This assignment taught me the benefits of linking to other URL’s, using alternate web space for images is a technique I adapted at the last minute into my major assignment. I was not able to upload files over 500kb with the hosting service I chose. This meant I either needed to crop or lower the quality of my downloadable audio files… or link to another URL…
Tom Cosm makes all of his music available for free to do whatever you want with, he has appeared at other Servants of Sound gigs before, and is rumored to be appearing again at the festival in 2009, I figured linking to his audio files was a viable option.

major assignment

my major assignment is now available to be viewed on-line, here dragon dreaming

woohoo!

This assignment ended up being a much bigger learning experience than I had originally anticipated. In the first semester of my degree I had made a website, using dreamweaver, and had figured what I already knew about the program would help me through. However, as I’ve mentioned in an earlier blog, my old techniques, were just that, old. I couldn’t use tables due to compatibility problems, so I had to use div tags, It took a while to persuade me, and probably longer for me to learn how to use div tags, but in the end they ended up working out quite well for me, I ended up finding website design almost very mathematical. I have filled the criteria as far as I can tell, and am mostly happy with the end result.
Things I would change if I was to do this assignment again would be;
The links, I would like to use image maps and have more visually pleasing links or buttons.
The Layout Images I wouldn’t use the transparency on png’s in the same manner as I had difficulty lining up the images at the bottom of the pages.
The Client Although Dragon Dreaming appeals to me, there current web present is not very strong making content for this assignment hard to come by, given the chance to do this assignment again I would have chosen another festival with more readily available content.
I believe this assignment did what was intended, I now have a relatively good understanding of current, and past web design techniques and believe I now also have the ability to adapt to a changing web design environment.

Some Reflection:

Before this unit, I hadn’t made a website since first semester, first year… two years ago. A lot seems to have changed since then. Mainly no Tables!!!!. It seems to me the best way for m to learn is by trial and era! I seemed to spend most of my time changing half  a line of code and then flicking between browsers to check compatibility. I tried using a few books but generally found the answers coming to me when I was swearing at the book.

Some More Image Issues:

None of my images were showing up in Firefox, I wasn’t sure why. Sometimes Photoshop and I aren’t as friendly as we pretend to be. I overcame this issue by remaking them all and re-saving for web and devices.

Transparency:

I have used a few .png images on my site. I have chosen to use .png files as they support transparency. My banner image and the image behind my content both use transparent circles to allow some of my .bg image to show through. Although this is not too obvious when the page is static when you resize it you can see the .bg move behind the content. I kinda like this effect and view it as a little hidden bonus (an easter egg if you will)

3 column layout:

I have learnt about floating <div> tags when I didn’t actually need to. Oh Well, it wil become a useful tool one day, perhaps. I wanted the main content of my page to be centered with images running down the page either side.
Originally I created a left column at 100px wide, a center column at 700px wide and a right column at 100px wide, applying a float: left;  element to these columns meant that they “floated” next to each other. Once these were placed, I then needed to apply a ‘clear’ element to the following <div> tags to stop it trying to float next to the other columns. Although it would not float next to them because they filled the maximum width of my ‘wrapper” <div> tag it would float behind the center column.

I played around with this three column layout for a while. It started to cause me massive problems. The left and right columns, wouldn’t stretch to the same height as the center content column. I would have to specify specific heights to all three columns, and then specify the height of all three columns accros all pages of the site. This was massively time consuming and increased file size due to seperate images being loaded on either side column.

MY SOLUTION: although it seems really obvious to me know, I had an epiphany. I realised I didn’t need the three columns. I needed another ‘wrapper’ type <div> tag, which I called <contentwrapper>. for my content. I placed another <div> tag 900px wide inside and below my image and navigation boxes. Inside this <div> tag I created a <div> tag 700px wide and set both its left and right margins to auto, centering the 700px <div> within the <900px> div.
This allowed me to create an image in Photoshop 900px wide, and approx 300px high, I placed this image in the background of the 900px contentwrapper <div> tag, and making it repeat.
This means the same layout can be used across all the pages of the site without having to specify heights for the content <div> tags. This means the content of each page can be changed relatively simply without needing much extra coding, if any!

Wrapper:

Applying the margin left and right auto tags centered each <div> tag I applied to. But I had to write it for each <div> tag.
That’s when I Discovered I could place <div> tags within other <div> tags. massively simplifying my design. I placed what I called a ‘wrapper’ div tag around my entire page. I specified the width as being 900px, which means the content of my page will not exceed 900px wider, if I remember the lectures correclty this maximum width should fit on most browsers. To center my ‘wrapper’ <div> I  set its margin to auto which has centered my entire page, at a width of 900px.

DIV TAGS

It took me quite some time to get my layout back to what I had done with tables. My biggest problem was centering. Although I looked it up and got it right the first time, I forgot to refresh my browser, and spent hours trying things like centering text, justification, these were not helping!

What I needed to do: In my CSS style sheet I needed to add a margin-right: auto and a margin-let: auto tag to my <div> tags on my .css sheet.

Tables:

Turns out you can’t use tables, why? Well, this is what I can gather – apparently tables will not show up the same across different media platforms. e.g a page which works fine on firefox or I.E may look messy and jumbled on an iPhone. Although I doubt that my target audience will be looking at my page on an I-phone it is a good practice to get into.
I did find this out the hard way! I had built most of my site with tables and was about to get down to the nitty gritty, anyway now I get to play with <div> tags… yay.

AH JAVA!

I wanted a countdown timer for my website. I googled ‘html countdown timer’ and it became apparent quite quickly that if I wanted a countdown timer I would have to use some javascript…. not easy!!! Unless.. I found I nice chap who said, ‘hey here’s some countdown timer code, take it and use it if you want’ I thought to myself… O.K. All I needed to do was enter the dates I wanted to use and hit preview, up came some code, a little copy and paste and voila! countdown code!
I placed this code inside my <footer> <div> tag, with my .css rules attached and it came out in the font and colour etc that I wanted.