Wednesday, 6 March 2013

05/03/2013

05/03/2013


I began working more on the main site and the video this week. 

I applied a temporary logo image into the header just to get a feel for how it might look later on when I design the proper one.  Still contemplating whether to leave it to the left or put it in the center of the header. 




I started styling the contacts page. I have all the text floated onto the left side while the map and picture is floated to the right. There's still work to be done on it though as the layout isn't completely even yet. I'm using a temporary image until I screen capture a photo from my video of the luas to use. 




I began adding content to the 'More Info' page. It has the cost to use the Recycling Center and has a table of most of the waste they will accept there. A small problem I ran into was implementing the euro sign, dash and spacing onto the webpage, as it just appeared as big question marks. The euro sign is recognized when '€' is put into the html, '–' for the dash and ' ' for a little bit of spacing. For the table I used a standard layout with a bit of styling to keep the sites font and colours consistent. It has 'border-collapse:collapse;' to make the border a single solid line and the same green colour as the footer. The title area uses the blue from the header with the same grey font as the nav menu. Both pictures below are on the same 'More Info' page, it was too long to fit into one image:







I also started work on the 'Alternatives' page. It's 3 other Recycling Centers in the Dublin area in case Ballyogan is too far away for some people. To do this, I had to do research on near-by Centers that I could use a references. For all 3 I put pretty basic information such as: Address, Opening times and a small bit about what kind of waste they will accept. As all the alternatives are smaller in size, they don't take in the variety of waste the Ballyogan does. The other centers were Ringsend Recycling Center, Coolmine RC and Ballymount RC. I found an image that reflects each one and photoshopped the image into a green circle. These images are clickable and lead the user to a site where they can get more information on their desired center. 



No comments:

Post a Comment