Monday 25 November 2013

OUGD504 - Design For Web (3)

After I completed my homepage I started to work on the content pages. There are six content pages, five of which have the same layouts, and the sixth with a different one.
Content pages:
  • Sumerian
  • Phoenician
  • Greek
  • Latin
  • Now
  • Timeline
Working from the thumbnails I drew, I created the wireframes for the two different layouts.
Content pages
Timeline page
From these I started coding the first content page, using coloured backgrounds as a means to differentiate each box from another.
The overall layout for this page was split into 4 separate boxes, with their individual boxes in each to hold the content. Once I was happy with how everything sat, I started putting in the navigation bar in.
I encountered a problem when putting in the last navigation icon:
This was a bit unexpected as the pixel numbers were all correct and it should have fit next to the others perfectly. I tried replacing it a few times, but it kept moving around navigation bar into different places each time.
Eventually I replaced the code but chose not to name the image, leaving it with the default name.
Once I did this, it worked perfectly.
I then started adding in the image contents.
When all the content was added and working I took away all the background colours.
As all the content is working on this page, I saved this file and re-saved it with the other content pages names, creating the five content pages which need this same wireframe.
Once all the pages were done, I started adding in the content to all of them. Another design problem I came across when putting in this content. As some of the alphabets have more symbols than could fit on the page, the page was cutting them off.
To fix this, I added in a line of coding which will make that content box scroll down when there is too much content in it.
Page
Scrolled down
After completing this part of the page for every content page, I turned my attention to the timeline page. As I couldn't have this as interactive as I would like, I decided to make it one simple image of a timeline. This was very easy to code into the page.
Timeline:


Once this was done, I started on linking all the pages together.
Linking the pages:
Once I had linked all the pages together and checked they were all working I left it there, taking this half finished website to the Crit with me.

No comments:

Post a Comment