As of August 1st, 2008, the Edutech web site will no longer be updated. Edutech was funded by the Swiss Virtual Campus programme, which ended on July 31st, 2008. Some activities will be taken over by the e-Learning Services group at the SWITCH foundation.

Advanced Design of Vista's Homepage

Introduction

Keywords: Vista, homepage, advanced

This page introduces you to an advanced method of homepage design and guides you through the steps of its creation. The aim is to motivate you to develop your own method of creating an exceptional and unique homepage for your students. The method and material show here has been provided curtsy to Patricia Schettino, Christian Milani and Goran Josic from the eLab of the University of Lugano.

Minimal Design Versus Advanced Design
Access the demo in the course list
Advanced Design
Completely replace homepage by a HTML-page
Tips and Hints

Minimal Design Versus Advanced Design

Take a moment to compare the three following screen pictures of Vista homepages.

Minimal Design

'Advanced' Design

See live example (click also the "Courses-icon" to see an adaptation of the homepage design to a sub-level organizer page): Access the demo in the course list.

Total Replacement

Main differences:

The 'Minimal' design uses text-titles and standard Vista icons.
The 'Advanced' design uses HTML-code in the header or footer field of the Vista Homepage as well as custom made images to create a unique look and feel inside Vistas homepage structure.
The 'Total Replacement' design replaces the Vista homepage by a HTML page (from the courses File Manager or from outside) providing total liberty as to the creation of an artful look and feel

Advanced Design

The main elements

a custom designed header and footer
no standard Vista color background
Vista icons are replaced by custom icons containing titles, short texts, photos
a well chosen and corresponding coloring for images, background and icon picts

Homepage zones that you can act on are shown in this following illustration:

Prepare your custom made HTML by using an external HTML editor. Add the desired style.
In the following see the code used in the example above:

Past your custom-made HTML-code into the header.

Create your custom icons with a graphic editing program. Observe certain design rules such as:

Keep it simple, only essential elements
Don't use more than seven colors for a tool
Don't use more than four colors for a website

Upload your new icons to your File Manager

Replace Vistas icons with the help of the menu Course Customization > Page Layout.

Use the footer for any supplementary imagery. See the code for the example above: <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
    <td bgcolor="#333366" colspan="3"><img height="30" width="780" src="html/m1/img/spacer.gif" alt=""/></td>
    </tr>
</table>
See the result for the above example:

Adapting the color in the upper frame On the Group level go to Settings > Branding

adapt the background color (in the above example: #9acccd)
adapt the text coulour (in the above example: #000000)
indicate an image. (In the example an empty transparent image is used to cover and hide the standard logo).
More details in the HOWTO: Branding.

Set the background color to the color already used in the header and the other images.

Switch off the text description for all the icons on the Vista homepage by choosing "only images" in Icons Settings.

Completely replace homepage by a HTML-page

This method places a special code into the header of the homepage (or any organizer page you would like to use for this) and is both radical and risky for your course. Radical, since you replace the homepage completely forgoing most of the advantages of the Vista environment. Risky, since you will never be able to re-establish the 'normal' Vista homepage. So you best try it out first in a sub-organizer page that you can always erase if need be.

This is what you do: Place the following code into the header and tell it to use HTML:

Details

Replace the value for content in the code with '0' to get an immediate execution of the code (the numbers correspond to the seconds the browser waits before executing).
Replace the address in this example with the URL of your page on an external server, or with the pathway to the file in the courses File Manager.
To find the pathway to a file in the File Manager.

open the header and set the HTML-Creator to 'on'.
Chose the link tool (chain-icon)
Browse in the File Manager for the file and end with "Add Selected".
Set the HTML-Creator to 'off'
Copy the file's pathway into the Replacement code. It will look something like this: "/webct/RelativeResourceManager/Template/1Test1.html".

Place the completed code into the header field.

Warning

If you use this method you should be very much aware of the fact, that

your students will not be able to use Vista's navigation tools that will have to be provided on your web page. No "Previous, Next, Retrace".
your students will not be able to directly use Vistas tools, such as Search, Forum, Glossary, Quiz, Notes etc. Such tools will have to be linked to with absolute links that have to be placed by hand into all your different pages.
with each upgrade or when using the templating the URLs of such internal tools and function change and imposes an enormous adaptation work each time.
any tracking, that Vista normally does to inform you about students habits and your courses weeknesses will no longer work.

Conclusion: Even though the total replace method provides you with a very nifty graphical freedom of design, you pay it dearly with loss of functions and a raise in workload later on. This should therefore be limited to extremely specific needs.

Tips and Hints

Open page or Content Module in same or new Window

When placing a Content Page or a Content Module on an Organizer Page it will automatically be shown in the same window. If you wish it to be opened in a new window you can set that property by using the Power View.

Go to the targets Action Menu: Edit Links Settings
Check the box for Open in a New Browser Window.

Note: To see this, open Student View.

Broken Image Link in Header or Footer

When you want to show an image in a header or footer through a relative link, you some times see a broken image link to the image file in your sections' File Manager.

In the Header or Footer's HTML code check the pathway to the image. This path is sometimes containing unwanted supplementary code.
Shorten the pathway to the filename and any sub-folder the picture might be in.

Author: Andreas Röllinghoff
Modified 27.10.05
Edutech Vista HOWTOs

Skype us: A. R�llinghoff

R. Brugger