I decided to give Dreamweaver another go before I look at Rapidweaver, and started to put the home page together. I seem to be getting the basics ok now, getting more used to IDs, classes and checking any problems in the code.

I put in the logo, navigation and everything I had on my Photoshop page, but then just to complicate matters decided to put the Coda slider on as well. I changed the pictures to ones that I wanted, changed the colours and everything looked and worked fine. Then I tried to put it into my page. How frustrating…didn’t want to work, but after a lot of swearing and persistence got there in the end. I also added a subtle background behind the main content with a gradient to hold the elements on the page together.

I copied this for the next ‘our tips’ page and removed the elements I didn’t want repeated. Because there was a lot of information that needed to be included here and I didn’t want it to have a lot of dense text to wade through I decided to put in an accordion which I added using DW. To give it more of a Web 2.0 feel I decided to add rounded corners. I went to the CSS3 PIE site which is really easy to use as you can change and see what you want before you download it. I chose colours from my Web 2.0 Kuler palette for the accordion and headings which I kept quite large and bold also to fit in with the web 2.0 style.

I thought I would use another slider on this page to show the main ingredients used in old fashioned cleaning in a bold graphic way. (Also I wanted another go at putting a slider into a web page to see if it was any simpler following the instructions in a careful methodical way!). I changed all the colours and pictures to get it looking exactly how I wanted it and put it into the page, copying the javascript into the JS folder, the CSS file, the images into the images file and the code into the HTML. It didn’t work! After a lot of careful scrutinising of the code I found that the source code for part of it was in an extra folder, after changing this it worked.

I copied the page for ‘your tips’ which was next. I wanted this to be a blog where current items could be talked about to keep the site up to date with any green issues, new non-toxic products, current trends, or any tips sent in could be added. I also wanted it to have links to related blogs. It is not easily possible to add a blog using DW so I set it up to look like one.

On this page I also added three widgets. I went to widget box, chose the ones I thought would fit in with my site, cutomised them and downloaded them. I chose a Tweet blender which you could change the colours, font size, language and the subject of the tweets. So I have cleaning related tweets being updated every 10 seconds. I also chose a Natural cleaning tips and recipe widget and thirdly an etch a sketch for light relief after cleaning!

The next page I tackled was the video page. I didn’t want the page to look cluttered so only wanted to show video on it. After choosing the ones I wanted it was very easy to copy the code to link them to the site.

My fifth page was my forum page. I chose a vanilla forum which was relatively easy to put into the page. You can sign in and leave a comment.

Above this I added another accordion which included more specific cleaning information. I kept the colours the same as the ‘cleaning’ page for consistency. I added a shiny button to get visitors to join the forum and a shiny button at the side which when clicked opened out to include the social network buttons. I also added a tweet button and a share button.

I linked all the page navigation together, and all the information on the home page tiles to the appropriate pages. I then linked all the social network buttons to their specific sites.

I used Genfavicon this time and made a favicon using the image of the pink duster that appears on each page.