Web Design Standards
Web Design Standards |
|
Introduction
Fonts and Colour
Page Header
Page Sections
Tables
Page Footer
Navigator Setup
This page explains the design standards that should be observed when developing
HTML pages for AGS websites. The page explains the HTML tags that should be used and
provides examples of text, colour, graphics etc.
Throughout the web site font size and colour should be used
consistently in order to convey meaning and ensure that content is easy to read. The table
below explains how different font sizes and colour should be used within web pages:
| Explanation | HTML Tag | Example |
|---|---|---|
| The base font should be controlled via the browser preferences | This is the base font | |
| The page title at the top of the page should should use the heading
one style and be displayed as italic The colour of the text should be golden brown |
< H1 > < I >< FONT COLOR="#7B5A18" > Page Title < /FONT >< /I > < /H1 > |
Page Title |
| Table of Contents title should use the heading two style | < H2 >Table of Contents < /H2 > |
Tables of Contents |
| Section titles within a page should use the heading three style | < H3 >Section Title < /H3 > |
Section Title |
| The first character of each paragraph should be 1 font size larger than the base font | < FONT SIZE=+1 > |
This is the start of a paragraph |
| The colour of hypertext links should always be golden brown regardless of whether or not they have been selected | < BODY LINK="#7B5A18" VLINK="#7B5A18" > |
Hypertext Link |
| Table captions should use the heading three style | < H3 >Table Caption < /H3 > |
Table Caption |
| Table cell headings should use the table heading style and be 1 font size less than the base font | < TH >< FONT SIZE=-1 >Table Cell Heading < /TH > |
Table Cell Heading |
| Table cell text should be 1 font size less than the base font | < FONT SIZE=-1 > |
This is table cell text |
| The page footer at the foot of the page should display text as 1 font size less than the base font | < FONT SIZE=-1 > |
This is page footer text |
No particular font face should be specified thereby enabling
browser preferences to control the font. All text should be in mixed case and the
background colour for the page body should be white.
Refer to the source of this particular page for further information
regarding the HTML tags to use in web pages.
Each page should have a page header which displays the page title and browse
icons for quickly navigating through the web site.
The page title should conform to the text standards outlined in the
Fonts and Colours section.
The browse icons should be displayed using the navigate.gif image.
An image map should define the hypertext links for navigating to the next and
previous pages in sequence and also returning to the home page. An example of
the HTML tags for the image map are illustrated below:
< MAP NAME="navigate" > < AREA SHAPE="rect" COORDS="1,1,20,25" HREF="previous.htm" > < AREA SHAPE="rect" COORDS="30,1,50,25" HREF="next.htm" > < AREA SHAPE="rect" COORDS="60,1,80,25" HREF="home.htm" TARGET="_top" > < /MAP >< IMG SRC="navigate.gif" BORDER=0 USEMAP="#navigate" >
An HTML table should be used to position the page title in the
top left hand corner and the browse icons in the top right hand corner.
Refer to the top of this particular page for an
example of a standard page header.
If a page contains a large amount of text it should be split into sections.
Sections should be separated by a horizontal line and each section should have a
title. The section title should conform to the text standards outlined in the Fonts and Colours section.
When page sections are used a table of contents should be displayed
at the top of the page. Each section title should be listed in the table of contents
and should act as a hypertext link to the specific section. The table of contents should
conform to the text standards outlined in the Fonts and Colours
section.
Refer to this particular page for an example of using page sections
and a table of contents.
Tables should be used to present lists of information and data in a structured
fashion that is easy to read. Information displayed in tables should conform
to the text standards outlined in the Fonts and Colours section.
The tables themselves should be consistently presented. A
gray border should surround the entire table and text within the table cells should be
evenly spaced from the cell border. Tables should never exceed 100% of
the page width so that the content of each row is always visible. An example of the
HTML tags for tables are illustrated below:
< TABLE BORDER=5 CELLPADDING=4 WIDTH=100% >< /TABLE >
Refer to the Fonts and Colours section of this particular page for an example of a standard table.
Each page should have a page footer which displays contact details for
commenting on the website and requesting further information. Reference
information regarding the maintenance of the page should also be displayed.
The contact details and reference information should conform to the
text standards outlined in the Fonts and Colours section. The name of
the person to contact for further information should be displayed and should act as a
hypertext link for emailing the individual. The filename of the page and
the date when it was last updated should be displayed, with a bold prompt positioned to
the left of the text.
An HTML table should be used to position the contact details in the
bottom left hand corner and the reference information in the bottom right hand corner.
Refer to the bottom of this particular page
for an example of a standard page footer.
In order to easily navigate between pages in the website an HTML frames page
splits the browser window into two columnar frames. The frame on the left displays a
list of pages that can be accessed and the frame on the right displays the content of a
particular page which has been selected.
The initial frames page that is invoked in order to access the website is always index.html.
This page sets the relative size of the left and right frames and names the
left frame navigator and the right frame page. The frame names are
subsequently used to instruct the browser to display content in a particular frame. An
example of the HTML tags for the frames page are illustrated below:
< FRAMESET COLS="22%,78%" >< FRAME SRC="nav0.htm" NAME="navigator" SCROLLING="NO" NORESIZE="YES" > < FRAME SRC="page0.htm" NAME="page" >< /FRAMESET >
Pages in the navigator frame always display the AGS logo at the
top of the page using the agslogo.gif image. Underneath the logo
a list of hypertext links for the pages or menu choices available is displayed. An
icon is positioned to the left of each link to indicates whether the link invokes a page
or represents an open or closed menu choice.
If the link invokes a page, page.gif is displayed to the
left of the text. The URL of the hypertext link invokes a content page and targets
it to refresh the content displayed in the page frame. An example of the HTML
tags for the URL are illustrated below:
< HREF="page1.htm" TARGET="page" > < IMG SRC="page.gif" BORDER=0 > Link Text < /A >
If the link represents a closed menu choice, close.gif is displayed to the left of the text. The URL of the hypertext link invokes a frames page and targets it to replace the current frames page so that both the navigator frame and the page frame are refreshed. The navigator frame is refreshed so that the menu choice is displayed opened. An example of the HTML tags for the URL are illustrated below:
< HREF="exp1.htm" TARGET="_top" > < IMG SRC="close.gif" BORDER=0 > Menu Text < /A >
If the link represents an open menu choice, open.gif is displayed to the left of the text. The URL of the hypertext link invokes a frames page and targets it to replace the current frames page so that both the navigator frame and the page frame are refreshed. The navigator frame is refreshed so that the menu choice is displayed closed. An example of the HTML tags for the URL are illustrated below:
< HREF="col1.htm" TARGET="_top" >< IMG SRC="open.gif" BORDER=0 > Menu Text < /A >
In order to easily identify and maintain all the HTML frame and content pages that comprise the website a strict naming convention should be used to name all files. The file name should have a prefix which identifies its purpose and a unique number which identifies its position within the navigator. The table below lists the prefixes that should be applied to file names:
| Prefix | Purpose |
|---|---|
| PAGE | This is the prefix for all content pages that are displayed in the page frame. These pages contain text and information regarding the AGS |
| NAV | This is the prefix for all content pages that are displayed in the navigator frame. These pages display the hypertext links that are available for a particular menu choice |
| EXP | This is the prefix for all frames pages that display the open hypertext link for a particular menu choice |
| COL | This is the prefix for all frames pages that displays the closed hypertext link for a particular menu choice |
The navigator has a heirarchical tree structure and the unique
number appended to the file prefix corresponds to the level of a particular file in the
tree structure. The diagram below illustrates the typical file structure and
naming conventions used in the web site:
Page Files Navigator Files
PAGE0 NAV0, INDEX, INDEX
PAGE1 NAV1, EXP1, COL1
PAGE11
PAGE12
PAGE13
PAGE2 NAV2, EXP2, COL2
PAGE21
PAGE22
PAGE23
PAGE3 NAV3, EXP3, COL3
PAGE23
PAGE23
PAGE23
...
Refer to the source of the navigator frame and the source of the
overall frames page for an example of how the navigator functions.
| For further information
contact Webmaster |
Page: PAGE53.HTM Updated: December 13, 2005 |