Search | A-Z Directory | Contacting People | About Us
University of Melbourne

World Wide Web Publishing Policies and Guidelines

5. Design Guidelines

[? Search] [Top] [Contents]
[Prev: 4. Content Guidelines]
[Next: 6. Help]

Contents:
5.1. HTML Standards
5.2. Navigation
5.3. Template options
5.4. Layout and formatting
5.5. Metatags
5.6. Creation of new images

5.1. HTML Standards

All WWW publishing should conform to the HTML standard (HTML Working Group Internet Standard) or other international standards as determined and approved by office of the Vice-Principal (Information). The use of proprietary extensions (eg. Microsoft or Netscape extensions) is strongly discouraged. Current information on the HTML standard can be found at <http://www.w3.org/hypertext/WWW/MarkUp/>

HTML is an emerging standard and will continue to change rapidly. It should be remembered that the browser being used to access your page may not be Netscape or may be a text-based browser only. The page should be accessible and look professional, irrespective of the browser being used. Authors should view their pages using more than one browser on multiple platforms or use the HTML validation service available via the ITS Home Page.

Departments and staff who do not have equipment which will support graphical browsers (such as Netscape) are able to Telnet to an ITS server from which the LYNX (text-based browser) can be used free of charge to staff and students of the University.

Frames

The use of frames is discouraged within the University of Melbourne web site. Category 1 and 2 pages must not use frames.

Javascript

Javascript can be used to add functionality to a web site and aid with navigation, although it is recommended that it be used sparingly. When using javascript it is advantageous to test the HTML file on various HTML 4.0 compliant browsers before publishing.

It is also recommended that a non-javascript alternative be provided.

Background Sound

The use of background sound is discouraged within the University of Melbourne web site. Category 1 pages must not use background sound.

5.2. Navigation

Figure 9: Navigation (Section 5.2)

[Navigation (Section 5.2)]

Consistent navigation is an important factor in ensuring a useable site for the University. For this reason the following navigational elements are compulsory for all pages in categ ories 1 and 2, and are strongly recommended for category 3 (especially those pages which are available to external users):

The following navigational elements are compulsory for categories 1, 2 and 3:

The University also supplies a set of additional navigational elements, such as 'BACK', 'FORWARD' and 'HOME' buttons, which are strongly recommended for categories 1, 2 and 3, although are not compulsory. These navigational elements may be accessed at: <http://www.unimelb.edu.au/img/bullets/index.html>

It is also strongly recommended that the top blue bar of the header be used for navigation. It can be used as a link to the Homepage of a department or section. Further information about this is available in Section 5.6 'Creation of New Images'. Faculty images are available from: <http://www.unimelb.edu.au/img/topbannersNew/>

Special Announcement Banners

The University's main Homepage and three user Homepages include a set of Special Announcement banners. These are not to be used anywhere else on the University's site. Requests for the placement of a special announcement can be made by contacting Anne Seuling (Tel 8344 8079 email: a.seuling@unimelb.edu.au).

A separate set of Special Announcement banners are available for use by Faculties and Departments. These banners are similar to those used on the main University Homepages. For instructions on how to use these please refer to Section 5.6.

5.3. Template options

To aid the developer of web pages for inclusion in the University of Melbourne site structure, several templates are available.

The templates are broken up into style categories:

(i) Top Level Menus and Information Pages

(ii) Lower Level Information Pages

These styles should be selected from:

<http://www.unimelb.edu.au/templates/>

On this web page you will find:

A style of template should be chosen that reflects the position of the page within the University of Melbourne web site hierarchy, and the type of information that will be on the page. Homepages should use level 1 templates, while lower level pages can use either level 1 or 2.

Figure 10: Template Options (Section 5.3)

[Template Options (Section 5.3)]

Once a template has been chosen a number of optional images are available for use in the heading banner, and as navigational elements. eg. Bullets.

These images should be selected from:

<http://www.unimelb.edu.au/img/>

On this web page you will find a menu of graphic element types, eg. Banners, Bullets, Navigation Elements, Logos etc.

5.4. Layout and formatting

The following two sections, 'Basic' and 'Advanced', provide specific information on the use of the templates.

How you use the template will be determined by whether or not you modify the template with an HTML Visual Graphic editor, or an HTML code editor.

HTML Visual Graphic Editors

Figure 11: Layout and Formatting (1) (Section 5.4)

[Layout and Formatting (1) (Section 5.4)]

An HTML Visual Graphic editor is a program that presents you with a WYSIWYG (What you see is what you get) interface, where the content you edit on the screen is very similar to the final product, and you generally don't have to worry about the actual HTML code. Examples of such programs are: Macromedia Dreamweaver, GoLive Cyber Studio.

If you are using an HTML Visual Graphic editor, please read the BASIC information.

IMPORTANT:Caution should be exercised when using Visual Graphic editors. Many of these editors try to force HTML code to be written the way the manufacturer of the editor believes it should be written. This can have unwanted effects on the template and on your web page.

In particular, when using the University Web Page Templates, some editors incorrectly append a Paragraph Break after images, which breaks up the appearance of the banners at the top of the page. Netscape Composer, Microsoft Frontpage and Claris Homepage are examples of programs that incorrectly modify the HTML code.

The recommended program is the latest version of Dreamweaver (version 3.0) by Macromedia (http://www.macromedia.com/). Dreamweaver is available through University Computer Supplies.

Check the instructions of your Visual Graphics Editor to determine whether or not it will amend HTML code. We recommend the use of an editor which does not amend HTML code.

HTML Code Editors

Figure 12: Layout and Formatting (2) (Section 5.4)

[Layout and Formatting (2) (Section 5.4)]

An HTML code editor is a program that allows you to directly modify and create HTML code. The interface is orientated towards text entry, with varying degrees of functionality to assist in the creation of the page. Use of these programs implies you have some knowledge of HTML concepts and commands. Examples of such programs are: Allaire Homesite, BBEdit, and any text editor.

If you are using an HTML code editor, please read the ADVANCED information.

Basic

Template Structure

The University of Melbourne templates have been designed with a standardised structure. The break down of each page is:

Note: In the case of the last line of information (the linked email address of the page maintainer) it is important to attach the email address link to the text of the email address, rather than to the name of the page maintainer. This will assist people who print a hardcopy of the page, because the email address will still be visible.

The minimum graphic requirement for every page authored is the top menu strip, incorporating the search and help button, blue bar, and University of Melbourne crest.

Template Use - Basic

The following steps are general instructions:

Setting up the page for editing:

1. On your computer, set up a 'project' directory (or folder). This is a useful place to store all the elements that will go in to making your web page.

2. Visit: <http://www.unimelb.edu.au/templates/>

And download a template style to your project directory.

3. If you want to replace the banner images, visit: <http://www.unimelb.edu.au/img/banners/>

and note the directory location, and filename of the images you want to use. If you wish to create your own images, refer to Section 5.6.

4. If you want to create your own imaged text page title refer to Section 5.6.

Editing the page - Basic

1. Open the template.

Using your page editor, open the template that is now in your project directory.

2. The document title.

Modify the generic page title with your page title. Replace the text with a descriptive title of what your page is about. Do NOT delete the reference to 'The University of Melbourne'.

eg.

If you are creating a page on swimming lessons at the sports centre, as part of the Sports Services web structure.

Replace: The University of Melbourne - ENTER YOUR PAGE TITLE HERE

With: The University of Melbourne - Sports - Swimming Lessons

Note: The Page Title referred to here is a document title reference. It is the title of the page that appears at the top of the web page browser, as opposed to the title that appears on the page, as page content.

In some HTML Visual Editors you may have to look in the menus of the editor for a 'Page Preferences' or 'Page Information' area that will allow you to modify this title.

3. First line of the graphic header.

Figure 13: Graphic Header (Line 1)

[Graphic Header (Line 1)]

Do not modify the first line of the heading graphics. The link to the Search engine, A-Z Directory/Contacting People/About Us pages should be left alone.

4. Second line of the graphic header.

Figure 14: Graphic Header (Line 2)

[Graphic Header (Line 2)]

The second line of graphics may contain some photo images, or just a title (if you are using the minimal, low-level template). If you want to replace the banner images, change their filename references to the names of the files you chose from the /img/banner directory on the University of Melbourne site.

Note: The University of Melbourne crest must remain in place.

5. Page Title.

The page title informs the viewer what this page is about. Either replace the generic title text with your own heading, or replace the title text with the image details you made a note of earlier in the section 'Setting up your page for Editing'.

6. Links.

This section of the page is a good place to add your links to other pages. Note that the bullets and links are in two separate parts of a table. This structure provides you with an easily modifiable layout. For each new row of links, just copy the first row, paste it to the end of the links table, and edit it.

Insert and hyperlink the names and descriptions of your links to other pages. It is also a good idea to hyperlink the bullet graphics as well because many web page readers will click a graphic link before they click a text link.

7. Main Body Content.

This section of the page is a Content table. Edit and add your information here, in the right hand side of the table. The left-hand side of the table is purposely left empty to provide a margin that gives your page visual structure. It actually has a graphic image in it to force the margin to the appropriate width, because some browsers will not display the page properly without it.

To ensure that your page will keep its structure, do not edit the left-hand side of this table.

8. Content not in a table structure.

You may choose not to use either of the tables above to format the layout of the page. If this is the case, delete the items you do not need, eg. the Links table, or the Content table, and include your information here.

9. QuickFind Menus.

The next part of the page is some special HTML code that will automatically insert the Quick Find menus on your page.

The code looks like this:

<!-#include virtual='/include/footer/footer.htm'->

Depending on your editor, you may or may not see this code or some sort of reference to it.

In either case, leave it where it is and it should work just fine.

The quick find menu will only work on the main University Server. If you are using a different server you will need to mirror the 'Server Include' (this should be done on a regular basis - at least once a week). Please get your server administrator to check the server's instruction on how to do this. Should your server administrator encounter any difficulties please contact the CWIS group. If your server does not support SSI the footer will need to be added manually.

10. Author Block.

The Author Block is a required section of information.

On the line that reads: 'Created: INSERT CREATION DATE HERE eg. 9 July 1968'

Modify the text so that it reads appropriately eg. Created: 25 December 1998

The format of the date needs to be VERY specific. It should be Day-of-Month full-name-of-Month four-digit-Year. No commas or other punctuation.

On the line that starts: 'Last modified', change nothing. The web server will automatically display this information for you.

On the line that starts: 'Authorised by: eg. Director, Some Department', replace the text with the appropriate authority. eg. Authorised by: Director, Corporate Relations

On the line that starts: 'Maintained by: Joe Bloggs, Department', replace the text with your name if you are the person who maintains the content on this page. eg. Maintained by: Anne Seuling, Communications Unit.

On the line that starts: 'Email: j.bloggs@unimelb.edu.au', replace the text with the email address of the person who maintains the content of this page (probably you). eg. Email: a.seuling@communications.unimelb.edu.au

AND THEN, most importantly, hyperlink the text of the email address to the actual email address. In the example just above, the hyperlink reference would look like this: mailto:a.seuling@communications.unimelb.edu.au

11. Meta Tags. Please read Section 5.5 to learn about making your web page more useful.

Advanced

Template Structure

The Melbourne University templates have been designed with a standardised structure. The break down of each page is:

Note: In the case of the last line of information (the linked email address of the page maintainer) it is important to attach the email address link to the text of the email address, rather than to the name of the page maintainer. This will assist people who print a hardcopy of the page, because the email address will still be visible.

Template Use - Advanced

The following steps are general instructions. Although this section is designed for Advanced users, much of the content of the Basic section has been included to ensure all information has been provided to you.

Setting up the page for editing:

1. On your computer, set up a 'project' directory (or folder). This is a useful place to store all the elements that will go in to making your web page.

2. Visit: <http://www.unimelb.edu.au/templates/>

Download a template style to your project directory.

3. If you want to replace the images, visit: <http://www.unimelb.edu.au/img/>

Download the images you require to your project directory. If you wish to create your own images, refer to Section 5.6.

4. If you want to create your own imaged text page title refer to Section 5.6.

Editing the page - Advanced

After opening the template in your project directory, you may want to follow through the Template code with these details close by. The following text examines the template code, line-by-line, to assist with the insertion of the appropriate information for your pages.

The template code used here is the code of the Top Level template. Since all other templates are a subset of this template, or simpler than this template, you will still be able to use these details as a guide for other University of Melbourne templates.

As a general convention, any text you see in UPPERCASE should be replaced with text of your choosing.

The Template:

1.

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>

Leave this line in place. It tells the web server and web clients about the commands used in this document.

2.

<title>The University of Melbourne - ENTER YOUR PAGE TITLE HERE</title>

Modify the <title> tag to reflect your page title. Replace the text with a descriptive title of what your page is about. Do NOT delete the reference to 'The University of Melbourne'.

eg.

If you are creating a page on swimming lessons at the sports centre, as part of the Sports Services web structure.

Replace: The University of Melbourne - ENTER YOUR PAGE TITLE HERE

With: The University of Melbourne - Sports - Swimming Lessons

3. The Meta Tags. Please read Section 5.5 after the Advanced section.

4.

<LINK REL='Stylesheet' TYPE='text/css' href='http://www.unimelb.edu.au/css/default.css'>

This line refers to the Melbourne University Cascading Style Sheets (CSS) Do NOT delete this tag. The CSS is currently empty but it is important to retain the reference in case the University decides to implement a style sheet in the future.

5.

<body bgcolor='#FFFFFF' text='#000000'>

These tags control the colour of the background and text. To maintain consistency with the whole of the site, it is suggested you do not modify these tags.

6.

<!- The following table is an essential Heading Table ->

This line is the start of the code that defines the visible graphic header of the page. It is broken in to two rows.

The first row defines the thin strip that holds the links to the Search engine, A-Z Directory/Contacting People/About Us.

This row should NOT be modified.

The second row defines the two banner graphics, with the University of Melbourne logo between them. Modify this line of code:

<td width='250' valign='top'><img src='http://www.unimelb.edu.au/img/banners/leftbannerimg.jpg' width='250' height='90' border='0' alt=' '>

so that '/img/banners/leftbannerimg.jpg' refers to the Left Hand Banner image you wish to use.

Modify this line of code:

<td width='250' valign='top'><img src='http://www.unimelb.edu.au/img/banners/rightbannerimg.jpg' width='250' height='90' border='0' alt=' '>

so that '/img/banners/rightbannerimg.jpg' refers to the Right Hand Banner image you wish to use.

Note: The University of Melbourne logo must remain in place.

7.

<!- The following table is for the Main Title ->

This comment tag starts the table in which you place your Title or Heading for the page. You can use text, a graphic, or just delete the table if you have no heading.

Note the first item displayed in the table is a reference to:

<img src='http://www.unimelb.edu.au/img/nav/dotclear.gif' width='65' height='1' border='0' alt=' '>

The image 'dotclear.gif' is a transparent GIF image 1 pixel x 1 pixel in size.

It is used through the document, and the University of Melbourne web site wherever there is a requirement to force the width or height of a table cell, or to provide vertical or horizontal spacing.

In the code you will see the lines:

<h1>

REPLACE THIS STATEMENT WITH YOUR HEADING

</h1>

If you replace the text, as indicated, with your own heading text, make sure you delete the following lines which will display a Graphic heading.

If you prefer to create your own Graphic heading, delete the lines above, and refer to Section 5.6.

8.

<!- The following table is for your Links ->

This table is an ideal position for your links to other pages. If you have no links, remove this table completely. You can replace the following code:

'http://www.unimelb.edu.au/img/bullets/bullet.gif'

with a reference to a bullet image of your choice from the same directory.

Replace the text:

<a href='/index.html'>REPLACE THIS LINK WITH YOUR LINK</a>

With the text of your link, and the appropriate hyperlink reference.

9.

<!- The following table is for the Main Body content of your page ->

This table is an ideal position to place the content of your page. Inserting your data in this table will structure your page so the margin is displayed correctly.

If you do not wish to use the table structure to format your page, or if you have no content, just delete this table.

Replace the text: PAGE DATA AND INFORMATION GOES IN HERE. REPLACE ALL OF THIS TEXT WITH YOUR TEXT, IMAGES, AND ANY HTML CODE YOU WISH TO ADD.

With your own text and graphics.

10. Unstructured page data.

If you have not used the table structure, or want to define your own page layout, delete the previous tables for Links and Content.

Then, replace this text:

<p>

IF YOU DO NOT WISH TO USE THE PAGE LAYOUT TABLES, DELETE THE
TABLES YOU DO NOT NEED  FROM ABOVE, AND PUT YOUR ADDITIONAL
PAGE DATA, TEXT, IMAGES, INFORMATION, AND ANY  HTML CODE YOU
 WISH TO ADD, IN HERE. REPLACE ALL OF THIS TEXT WITH YOUR TEXT.</p>

With your own HTML code.

11.

<!- The following line inserts the Quick Jump menus. Do not delete the following line ->

<!-#include virtual='/include/footer/footer.htm' ->

As the code says, do not delete the line that starts '<!-#include'

This line will automatically be replaced with the Quick Jump menus that are the same as the ones found at the bottom of the University of Melbourne home page.

The quick find menu will only work on the main University Server. If you are using a different server you will need to mirror the include (this should be done on a regular basis - at least once a week). Please get your server administrator to check the server's instruction as to how to do this. Should your server administrator encounter any difficulties please contact the CWIS group.

12.

<!- start author block ->

The Author Block is a required section of information. In this section, do not modify any code other than the areas that indicate they can be replaced.

On the line that reads: 'Created: INSERT CREATION DATE HERE eg. 9 July, 1968'

Modify the text so that reads appropriately eg.

Created: 25 December, 1998

On the line that starts: 'Last modified', change nothing. The Melbourne University web server will automatically display this information for you.

On the line that starts: 'Authorised by: eg. Director, Some Department.', replace the text with the appropriate authority. eg.

Authorised by: Director, Communications

On the line that starts: 'Maintained by: Joe Bloggs, Department.', replace the text with your name if you are the person who maintains the content on this page. eg.

Maintained by: Anne Seuling, Communications Unit.

On the line that starts: 'Email: j.bloggs@unimelb.edu.au', replace the text with the email address of the person who maintains the content of this page (probably you). eg.

Email: a.seuling@unimelb.edu.au

AND THEN most importantly, hyperlink the text of the email address to the actual email address. In the example just above, the hyperlink reference would look something like this:

mailto:a.seuling@unimelb.edu.au

13. Meta Tags.

Please read Section 5.5 to learn about making your web page more useful.

14. Final Cleanup.

To make your document a little more space efficient, and since you now understand the layout of the template, it is a good idea to remove all the unnecessary code from your HTML document.

This includes all lines that start with '<!--' and end with '-->'

EXCEPT the following lines:

<!--#include virtual='/include/footer/footer.htm' -->

<!--#flastmod virtual='${DOCUMENT_NAME}' -->

<!--#config timefmt='%1e %B %Y' -->

This line is not a comment line. It is a line specially interpreted by the web server to insert the Quick Menu code.

5.5. Metatags

Metatags are pieces of information that are stored inside your HTML document. They provide useful information about the document which will aid The University of Melbourne server to correctly index your documents. This will make your documents easier to find when people search for information using the search engine.

If you are using a Visual Graphic editor, you may have to hunt through the menu settings of your software to find the place where you change this information.

If you are using an HTML Text Editor to edit the code, you will find the Metatags at the start of the template.

The following is a list of the Metatags, what they mean, and an example of the type of information you should provide in them.

Metatag: http-equiv='Content-Type'

Used for: Used by the web server when delivering information. Do not modify this information.

Content: 'text/html; charset=iso-8859-1'

Example in HTML code:

<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>

Metatag: meta name='expiry-date'

Used for: Informing the date at which the document is no longer current.

Content: 'INSERT THE DATE THIS DOCUMENT EXPIRES format: YYYY-MM-DD'

Example in HTML code:

<meta name='expiry-date' content='2002-08-15'>

Metatag: meta name='maintained-by'

Used for: Showing the name of the person who is responsible for maintaining the page content and their email address.

Content: 'INSERT THE NAME AND EMAIL ADDRESS OF THE PERSON WHO MAINTAINS THIS PAGE'

Example in HTML code:

<meta name='maintained-by' content='Anne Seuling, a.seuling@communications.unimelb.edu.au'>

Metatag: meta name='authorised-by'

Used for: Showing the name of the person who has authorised the document to be published.

Content: 'INSERT THE NAME OF THE PERSON WHO AUTHORISED THIS DOCUMENT'

Example in HTML code:

<meta name='authorised-by' content='Director, Communications'>

Metatag: meta name='author'

Used for: Identifying the person who first wrote this document. Most likely this is your name.

Content: 'INSERT YOUR NAME HERE'

Example in HTML code:

<meta name='author' content='Anne Seuling'>

Metatag: meta name='description'

Used for: Providing a brief descriptive summary of the contents of this page.

Content: 'TYPE A BRIEF DESCRIPTION OF YOUR PAGE CONTENT HERE'

Example in HTML code:

<meta name='description' content='The University of Melbourne, an international research university, is located in Victoria, Australia. Acclaimed for excellence and achievement in education and research, its motto is GROWING IN THE ESTEEM OF FUTURE GENERATIONS.'>

Metatag: meta name='keywords'

Used for: Informing search engines which words in this document are 'more important' than other words. ie. Individual words that are representative of the document content. Think: What words would you enter into a search engine if you were trying to locate this document.

Content: 'TYPE UP TO TEN KEYWORDS HERE, SEPARATED BY COMMAS'

Example in HTML code:

<meta name='keywords' content='University of Melbourne, Melbourne University, university, tertiary education, education, Melbourne, Victoria, Australia, Higher Education, research, teaching'>

Note: Ten keywords are a suggested number of keywords. You may want to enter more or less depending on the information you are delivering.

Metatag: meta name='last-modified'

Used for: Informing the date the document was last changed.

Content: 'INSERT DATE HERE format: YYYY-MM-DD'

Example in HTML code:

<meta name='last-modified' content='1998-11-17'>

Metatag: meta name='distribution'

Used for: Informing search engines and web servers the extent to which this document is intended to be distributed.

Content: 'global' or 'local'

Example in HTML code:

<meta name='distribution' content='global'>

5.6. Creation of new images

Two file formats are currently supported, JPG and GIF; these are suitable for specific tasks. When adding photographic or tonal images to the web site, they can be saved as either JPG (compression at 30%) and GIF (indexed to the minimum required colours).

If a larger higher quality image is to be used it is recommended that a small image be linked to a new HTML page containing the high resolution image.

Flat colour graphics (containing few gradients) and imaged text should be saved in GIF format and indexed to the minimum colours required. eg. imaged black on white text requires as little as four colours.

It is recommended that images are created at their exact size and not resized by altering the width and height tags when authoring HTML pages.

Creation of New Banner Images

To create new left and right banner images, you can use any imaging program such as Adobe Photoshop or Macromedia Fireworks. Set the document size at, or resize the image to, a width of 250 pixels and a height of 90 pixels.

When creating banner images the author can create a photographic dropshadow on the top or top right hand corner of the image depending on whether it appears on the left or the right of the University crest. (See example below.)

Figure 15: Creation of New Banner Images (Section 5.6)

[Creation of New Banner Images (Section 5.6)]

All images are to be saved as JPG files with a quality of level of 3 (30% compression - final file sizes should be around 6 - 7K).

Create a folder at root level of your site called 'img'. Within that folder create another folder called 'banners'. Within this folder place all the banner images you have created, remembering that if there is a right and left hand version of the same image to add 'r' and 'l' to the filename.

Creation of Imaged Text

Figure 16: Creation of Imaged Text (Section 5.6)

[Creation of Imaged Text (Section 5.6)]

When creating imaged text for headings the template allows for a heading area with a width of 500 pixels within a table. The table position is set to create spacial consistency between the banner images and the text.

Imaged text can be created in any imaging program that supports text eg. Adobe Photoshop.

It is recommended that heading sizes are set in Ocean Sans (Font face: Semi Bold) at 18pt with a 2pt letterspace.

(Note: The University has an Ocean Sans font licence in the following typefaces: Book Normal/Italic, Bold Normal/Italic and SemiBold/ Italic. The agreement allows for 1000 user nodes of the above typefaces. These are distributed to the user via SoftDist. Access to SoftDist requires a LANAD or LITE with the appropriate access rights to the distributed software area. Instruction for installation of this typeface for the mac and PC platforms can be found with the fonts on SoftDist.)

Imaged text should be set on a white background and saved in GIF file format. Do not save files that have only imaged text heading as JPG files.

Navigational and formatting aids

Navigational and formatting aids such as bullets and direction buttons that are used within the University of Melbourne corporate site can be added to your own pages. When using these images replicate the same file structure eg. 'bullet.gif' should be located in a folder called 'bullets' within the 'img' folder.

Figure 17: Navigation Aids (Section 5.6)

[Navigation Aids (Section 5.6)]

When creating navigational aids, try to ensure that the file size does not exceed 3 - 4 k per item, and where possible use the same item consistently through the site.

Imaging Links for the Direct Access Panel

Figure 18: Direct Access Panels (Section 5.6)

[Direct Access Panels (Section 5.6)]

To create links for the Direct Access Panel on Faculty pages, first download the Photoshop (.psd) file or tiff (.tif) file from <http://www.unimelb.edu.au/img/panels/>

When creating links, set the same link text on all three panels, this will allow you to rearrange links without altering the continuity of the background image. It is recommended that links are to be set in Ocean Sans (Font face: Semi-bold) at 16pt on 25pt leading, with a 1pt letterspace. We recommend that links be set in black. Once the links have been imaged they can be processed.

(Note: The University has an Ocean Sans font licence in the following typefaces: Book Normal/Italic, Bold Normal/Italic and SemiBold/ Italic. The agreement allows for 1000 user nodes of the above typefaces. These are distributed to the user via SoftDist. Access to SoftDist requires a LANAD or LITE with the appropriate access rights to the distributed software area. Instruction for installation of this typeface for the mac and PC platforms can be found with the fonts on SoftDist. <http://www.unimelb.edu.au/lanad/infopages/softdist/>)

To process the links, begin by cutting each panel to a size of 25 pixels high by 250 pixels in width, and save each file as a jpg of quality 3 (or 30%). Ensure when saving each file that jpg quality setting is consistent.

Name each file by adding the numeral that corresponds to its position on the links panel, after its description, eg. orientation2.jpg.

Blue Title Bar

Figure 19: Blue Title Bar. (Section 5.6)

[Blue Title Bar. (Section 5.6)]

The blue bar on the top right hand side of the template is designed to act as a navigational aid, and can be imaged to reflect the name of a faculty, department or area. The imaged bar should be used to provide a link back to the home page of the specified faculty, department or area. Please see standard blue filler bar and faculty banners at: <http://www.unimelb.edu.au/img/topbannersNew/>.

When imaging the blue bar, the text should appear in white, set in Ocean Sans (Font face: Bold) at 12pt, with a 1pt letter spacing. The text should be vertically centred and ranged right 20 pixels from the end of blue bar. Finished graphics should be saved as an indexed gif file.

(Note: The University has an Ocean Sans font licence in the following typefaces: Book Normal/Italic, Bold Normal/Italic and SemiBold/ Italic. The agreement allows for 1000 user nodes of the above typefaces. These are distributed to the user via SoftDist. Access to SoftDist requires a LANAD or LITE with the appropriate access rights to the distributed software area. Instruction for installation of this typeface for the mac and PC platforms can be found with the fonts on SoftDist.)

[? Search] [Top] [Contents]
[Prev: 4. Content Guidelines]
[Next: 6. Help]

The University of Melbourne ABN: 84 002 705 224
CRICOS Provider Number: 00116K (More information)
© The University of Melbourne 1994-2006. Disclaimer and Copyright Information. Privacy Policy. 

Created: April 1999
Last Modified: 23 October 2001
Authorised by: Director, Communications.
Maintained by: Anne Seuling a.seuling@unimelb.edu.au
[HTML 4.0 Checked!]