Creating the Web Pages
Features and Elements of the Web Site
Some of aspects of the web design have been created based on similar ideas of CSS and modified to encompass what is desired.
Navigation
Within the web design two different navigation features have been used. One as a horizontal navigation (main) bar and the second as a vertical (sub) bar.
Main Navigation Bar
Many examples of navigation bars were looked at to gain an idea of what possibilities can be done. One example of a horizontal navigation bar was found which encompassed a form of lists and hovers into the CSS code. This example was modified to the specifications needed. The concept from the example was used because it was seen as being easy to use which could be used by most users.
Figure 1
W3Schools (2010) Navigation Bar. [Online] Available from:
http://www.w3schools.com/Css/tryit.asp?filename=trycss_navbar_horizontal_float_advanced
[Accessed 03/03/2010]
Sub Navigation Bar
An example of a vertical list (Liddell M) was found which offered a suitable way of displaying additional options to the user. It offered a clear and straight forward list however alterations and adaptation was made to it to change the look and working of list. The example that was displayed offered underlining at the certain parts of the list when hovered over which did not keep it simple. This can be seen below:-
Figure 1
Liddell M. Blue Boxes. [Online] Available from:
http://css.maxdesign.com.au/listamatic2/vertical09.htm
[Accessed 18/03/2010]
As can be seen from Figure 1 the example makes use of a sub list which allow even more options to be displayed. This was considered to be too much information to display to the user causing a form of information overload.
Accessibility Bar
Mouse Over’s – Through the use of a tutorial (W3Schools 2010) it was found that instead of having the code make reference to multiple images like many languages, CSS made it possible to make use of one image containing all the images that were needed. The image that was used in the example was downloaded (Figure 1) and adapted (Figure 2) so that the coordinate system that was used to navigate between images could be mastered.
Figure 1
W3Schools (2010) CSS Image Sprites. [Online] Available from:
http://www.w3schools.com/Css/css_image_sprites.asp
[Accessed 02/04/2010]
Figure 2
Once the coordinate system that uses pixels and percentages to navigate across and down the image was mastered it was possible to create a completely new image with the desired sizes for the web site. This is shown below:-
Figure 3
Even though the look for the font buttons have been completed it has not been possible to find a way that can work with the Javascript that allows for the appearance to be maintained along with the font been changed. As a result the ability to alter the font size has not been completed however the CSS created to allow for font buttons has been done to show where the buttons would go in the design for an accessibility bar/stylus changer.
Changing the Appearance of the Pages?
The ability to change an entire page of design can be done through the use of CSS (Cascade Style Sheets) which means that when the user clicks on a smaller font to be used a certain CSS file will be referred to that which will override the current CSS file that was being used originally.
Figure 1
Certain web sites (E-bility Pty Ltd 2003) recommend the use of CSS when referring to accessibility because CSS makes it easy to alter entire formats by the use of a few lines of CSS on the file.
The same concept has been used for the appearance of pages (theme) within the design. This has been done through the use of java script working alongside CSS. A tutorial (Heng C 2009) has been followed which explained how this could be done. It is possible to change the appearance of a page through the use of CSS but when the user goes to the next page then it would revert back to the original appearance. Java script was used in order to create a cookie that would remember the appearance of the page. The java script can then be used through certain boxes of colours being placed in the accessibility bar of the design which can be clicked on by the user which will change the theme to an alternate CSS sheet. Example of the buttons used are shown below:-
Figure 2
It has been found that different colours can have a negative effect on some dyslexics (Rainger P 2003 Pg 5). This issue is unique to the dyslexic student therefore giving the student the ability to alter the appearance of the web site to their own requirements can essentially give them the freedom to see a web site how they wish. Even if a none dyslexic individual were to use the web site then they could alter it to an appearance that is comfortable to them therefore it could be concluded that this type of concept could be built to facilitate a wide range of users.
Why can this not be easily done with Basic Web Pages?
Basic web pages that do not use CSS would struggle to be able to alter web pages like previously proposed because individual pages would have to be created for each font size and if the text for the page was edited then all the pages for different font sizes would have to be altered which could become very time consuming. To elaborate on the font size example a diagram has been drawn below:-
Figure 1
As shown above if Page A is edited by adding or deleting text then pages B and C with the text size differences will be wrong therefore will need altering. If there were more than just three pages then the web designer could have vast amounts of alterations. The same concept would stand for page layouts and colour contrasts.
Design 1
Design 2
Design 3
Design 4
Design 5
Figure 3
Figure 4
