Web Design & Production

I encountered another problem since playing with changing the images in CSS.  Now my Website references page seems to have lost all the text at the start. It’s too late now, and I’m tired, so hopefully that won’t matter too much marks wise as that aspect had already been marked.

I paid to update the CSS, but not for my final project in the Web Design and Production course, I did this more to experiment with wordpress. My final blog theme link is in the post titled blog theme (below). Not knowing much about wordpress I started to alter  the default theme I was using. I uploaded an image and cropped it for the header, then uploaded it, and from that point on it all went wrong. The background images went blank and the header did not appear at all. A while ago I read a couple of blogs giving instructions of how to create a custom blog theme in wordpress and it all seemed so complicated with a number of files that had to be created and updated (including .php’s), so not just a matter of updating the CSS. So I went to tumblr as I didn’t have very long to create a custom blog theme and needed something fairly simple. Anyway I found a blog where someone had the same issue as me and the issue was that when you pay to update the CSS you can no longer just use the custom CSS option. In order to use images you now have to upload them to your library then get the URL of the image and add it to your CSS. Well I did all this and it worked, I changed the background image. I have only just started playing with the custom CSS so at this stage I’m not sure how much I am able to change it but I’ll experiment with it and see what I come up with. Most likely if I had realised it wasn’t as complicated as it seemed I would have created my custom blog theme here, but too late now. We learn from our mistakes or should I say misunderstandings…. The theme isn’t fantastic at the moment but it will do for now. As long as it can be read at the moment is all that matters.

Site is complete this is where you’ll find everything….

1. Main navigation – is at the top, there are 5 pages
2. Sub pages – located in ‘Tickets’. There are 3 headings across the top – Stonefest essentials, General & Members tickets. Also in the ‘History’ page on the right splitting the dates in two. Click on either one to see the history for the period.
3. Link to page fragment - as most of the content didn’t require a lot of scrolling the only page I could add it to was the ‘Welcome’ page. At the bottom is a back to top link which takes you to the top of the page.
4. Email link – there are 2 links in the ‘Contact’ page to email stonefest.
5. File download – this is the form of a stonefest information sheet PDF located at the bottom of the ‘Welcome’ page.
6. Form or form input field – located in the ‘Contact’ page as a form to subscribe to stonefest stuff or go into the draw to win a prize. The submit button will open up whatever email program you use on your computer to send it.
7. Image – there are images of all artist on the ‘Artists’ page and the ‘Tickets’ page.
8. Google map – located in the ‘Artists’ page on the right hand column under set times heading.
9. YouTube video or Last.FM – located in the ‘Artists’ page. There is an instruction on the right hand column to click artists images for video and bio. Click on the artists image and a video / website / genre and about info appears. Click the ‘back to artists‘ to return to the main page. Unfortunately I was unable to get videos of some artists and they only have a picture.
10. Links to external web sites (at least 6) – on the ‘Welcome’ page click on each of the artists names get taken to links to their websites.

Go to site….

Well I have  done my own blog theme. I completed it from scratch as in I didn’t use a theme already made and customise it. I would like to continue to make improvements on this theme.  However, it’s good enough for now.

Here’s my blog theme…

So that completes the Web design and Production unit. It’s been fun and very educational! I have gained a very good understanding of CSS and feel a lot more confident to build a website from scratch if this becomes a job I do down the track. Webdesign is huge, there is so much more to learn and I’d need to keep up to date with latest trends and standards. Ok well that’s all for now folks….

It was a monumental effort working fulltime and doing two units this semester… eyes are hanging out of my head… but hey I made it and here is the finished site.

my Stonefest site

I am very relieved to say that I have completed most of the website, all that is left now is some tweaking and styling of some of the text. I might actually be able to get a good night sleep tonight, as in before midnight… it’s been many late nights of working on my uni assignments for both graphic design and web design. It all seems to hit at once.  The only additions I want to make now is the input of video and editing the band photo’s.

Well not much more to say, as I am very tired and my eyes are sore from looking at this screen. So that’s all for now folks. It won’t be long and I will publish my site onto the host, but not till I have finished tweaking it.

I thought I’d talk a bit about my experience with the two wysiwyg (what you see is what you get) software packages I have been using, Coda and Dreamweaver. I have been doing most of my work in Coda, which I find very user friendly. All the coding I do in Coda appears the same in the Firefox browser as it does in the preview. However when I have worked on these same files in Dreamweaver, the preview is all over the shop. Apparently this indicates there will be some issues with IE when it comes to viewing and placing of the content, and that is exactly what happened when I viewed it from an old version of IE at work. It’s lucky that we only have to code the stonefest website to work in Firefox as I would have to do quite a few work arounds to get it looking right in IE. We have the oldest version possible of IE at work, so I had text overlapping and out of alignment etc. In the future though this will be something that I will do, I found some good resources on the internet on IE fixes. I’ll put up the link when I get the chance as it may be useful in the future.

Another issue I did have with Coda, and got a headache trying to work out exactly the cause, was it the server or was it Coda, I still don’t know. Anyway, I used Coda to upload my files to the server I am using for Stonefest, the index.html file appeared to be there, but was not on the server yet Coda thought it was still there, however there was no code in the index.html file. Because it could not find the file on the server, Coda would not allow me to delete it from my site folder. I tried saving over the index.html file with the correct version and it worked the first time I previewed it, after that the code disappeared again. Coda stated that this file did not exist on the server, which was correct. In the end I located the file manager on the hosts server and cleared out all my files and uploaded them directly to the site using their ftp software. This has now worked and I no longer have the issue with the index.html file, it was only this file by the way. So it seems that for some unknown reason Coda thought it was still there. Not sure I’ll ever know why that happened, but I did waste a lot of time and ways of trying to fix it.

I have been a little frustrated with wordpress for creating my own blog theme. I don’t have enough time to learn the extra php and extra pages you have to understand to complete a wordpress theme by the 5th June. I did manage to figure out how to edit an existing theme from a tutorial, however to actually edit or create your own theme in wordpress you have to pay for it, so I have now moved to Tumblr. I located the how to create your own tumblr theme tutorial and found these instructions much easier to follow and have managed to create a two column theme and put specific posts in each column. As soon as I am happy with the coding and the layout I will begin to create my visual design around it. It does seem kind of backwards but I know exactly what sort of layout I want so it will be easy to design the background to fit.

I am fairly happy with my understanding of CSS and looked at CSS Zengarden studying the code on different designs to see how they were done. CSS Zengarden is a site where designers add their own CSS to the same HTML and create completely different looking pages. I have added a few links in my blog to places that I have found useful for CSS help, so feel free to have a look. I’m not quite ready to add my blog theme link up yet, it’s looking pretty uncoordinated colour/design wise.

The Stonefest website is not far off complete and I am looking into a host. Watch this space! the link will be up soon.

I have coded most of the website and had orginally placed the text onto the yellow and pink background. Keeping with the current code and placement of text I am now looking at creating a more simple easier on the eye version, all that changes is the background. I like the tabbed navigation so this version is very different to previous versions. The CSS journey has been a little frustrating trying to layout the navigation and text exactly where I want it. I have found a few resources on web design and have added them to my blog. Well I am relieved after having finally finished the promotional packaging project for Graphic Design and now begin work on the final project for the semester as well as finishing off this site and creating my own blog theme. At this stage I will be creating it for wordpress, but this may change as I’m not sure how hard or easy this will be.

This is now the simple tabbed background I am working on.

Here is the yellow and pink version that had been tweaked from the last version.