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.
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 |
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