Before I could begin thinking about the layout, I had to think of a story. The story was going to be the foundation,
for my assignment. Having no ideas what to write about, I began browsing the web. Whilst looking at Fray.com, I came across a story, which
entailed of medieval battles, and love stories. This was to be the inspiration for my story, although my end story is completely re-written and
different, it was based upon work by another artist John Lasne at Fray.com.
The title of my story was the Stone Princess. Since the story revolved around a fictional medieval story, this became my theme. When
thinking about the medieval times, an image of a scroll came to mind. Again after browsing the web, I came across the type of scroll I wanted,
fortunately for me, the creator had left his email address, where he could be contacted. In which I did asking if I could use his scroll image
for an assignment. Quite surprisingly I received a reply saying he would be happy for me to use it as long as he was credited. This I thought was
a fair agreement, and was within the rules set by the assignment brief.
Also to make sure I had not just stolen the image of the internet, I imported the image into Macromedia Fireworks as I am familiar with
this software package, used the marquee tool to go around the scroll, making it an movable object, then used the embossed effect to make the
image stand out. Within the HTML, I created a div, where the image would sit, used CSS to point to the image, as well as positioning it in the
middle of page. Next I created another div, which was where the story would lie, and with the help of CSS, and z-indexs positioned it on top of
the scroll.
In addition to this, I was thinking about typography. Typography is the use of text to create a desired effect and when thinking about my
theme, the thing that instantly came into my mind, was that in the olden days, the first letter was printed larger. So with a series of CSS
class's, and increased font size, I created the look. Afterwards came what fonts to use, to keep with the style of my assignment, I wanted an old
style font that would look as if it had been done with a quill pen. The fonts I originally decided on, for this effect were;
Old English Text MT for the first letter
Lucida Calligraphy Italic for the main body of text.
However a few people had said that the Lucinda font was too hard to read, therefore I decided to change and use the font Centaur instead.
Keeping in touch with the medieval theme, I created a stamp using fireworks, reason I used fireworks was that it enabled me to create
an image map, so the image could link to my penguin webspace and placed it within the HTML in a div called stamp. In addition I wanted a splash
page at the beginning, so I scanned in a picture of a castle, and edited it so only the drawbridge remained. I then put the image as a template
and began to use the pen tool in fireworks to trace round it, then used filter effects to make it look like a ruin, and placed a rectangular
hotspot at the entrance, which would create a starting place to the story.
Only thing left to create was the navigation, as my scroll already had hyperlinks to the next, previous page, I felt I did not need a
bold navigation system, so I placed the links at the bottom, and lined them up to be centered with the scroll. All the above was put together with
the use of divs in HTML and positioning in CSS
Once all the main bulk of the page was done I began to read thru the brief and decided to put in some accessibility issues.
Accessibility Issues
this page has
accesskey on every link - so that when the user presses alt, the page number (e.g. 2) and enter, it will go to page two of my story. This
is useful for people who cannot see or use a mouse
tabindex is also included for accessibility to similar users, and is the order of the links, when the user presses tab
title attributes are again in link tags, to give information about what they do
Created a text link alternative in the splash page, for people who cannot see / use the image map.
Alt tags are included on images, so it gives information about what the image is, if not able to see it.
References and credit attributions
Thanks to Chris Marsh for helping me with any problems or questions that I had.
Thanks and credit to John Lasne for giving me influence with the story
Scroll image: http://www.ssccwebcreations.com/n4name.htm - thanks to author for letting me use the image.
The book Medieval Times written by Frances Brassington - where i scanned the castle image from.