Hantsweb Technical Guidelines

Navigational icons

Use of navigational icons | Image Library | Navigational Icons

Use of navigational icons

Navigational icons include all the graphics associated with links e.g. the Hampshire rose for the link with the homepage. Users coming to our site quickly learn our navigational conventions and because of this it is important to maintain a consistent and recognisable way for users to find their way around.

The standard Hantsweb page includes navigational icons for Top of Page and to take the user back to the Hantsweb Homepage. Use additional navigating icons to direct users on to or back to other pages in your web collection or to elsewhere in Hantsweb as required.

Example:

• Ten Years of the Hampshire Basse-Normandie Accord

Image Library

We have assembled a small image library which you may find useful. Below are a small selection.

Image	Image Location	WxH (Pixels)	Description
	/images/hccrose.gif	40 x 24	Hampshire rose for use as a bullet point for lists of hyperlinks. Includes white space to separate text.
	/images/rosebtn.gif	24 x 24	Hampshire rose navigational button - although it looks the same as the hccrose,gif it does not include the additional white space for text spacing purpose.
	/images/leftbtn.gif	24 x 24	Set of four navigational buttons suitable for use within a page or set of pages.
	/images/rightbtn.gif	24 x 24
	/images/upbtn.gif	24 x 24
	/images/downbtn.gif	24 x 24

Navigational Icons

The navigational icons listed above are useful for navigating between closely related sections of multiple documents. A document must have a navigational "up arrow" linked to the standard top name at the end of each section. We recommend that each section should begin with an <H1> headline. At the very top of your page, under the <H1> headline, list each section with local links to the section top, as demonstrated on this page.

Similarly you can use the other navigational icons to point back to previous pages, or on to related information in other pages or down to more information in the same page. All pages must include a Hampshire Rose icon as demonstrated below linking back to the Hantsweb homepage (accompanying text should be italicised).

You should separate each navigational button from its neighbour by five non-breaking spaces (the &nbsp: entity in HTML). You should also ensure that the BORDER=0 attribute of the <IMG> tag is present to stop a border from appearing around the navigational icon when the icon itself has been made into a hyperlink.

	Next: Page validater and spell check		Technical guidelines
	Top of this page		Hantsweb Homepage

---