Einige Angaben zur Technik und Gestaltung dieser Homepage

Einleitung

In erster Linie geht es ja bei diesem Seminar um die Erstellung von Kriterien zur Beurteilung von CBT-Material. So nebenbei lernt man auch noch einiges über Internet (Newsgroups, FTP etc.) kennen.

Darüber hinaus hab ich nun noch ein bisschen mit Frames, Javascript und der Gestaltung gepröbelt, nur schon auch, weil die meisten Websites eher unübersichtlich aufgebaut sind, selbst wenn der Inhalt klar geordnet werden könnte, beispielsweise hierarchisch und damit über Frames o.ä.
Das naheliegendste Beispiel: Die Homepage dieses CBT-Seminars enthält bereits genug Informationen, dass die "flache" Darstellung zur Unübersichtlichkeit neigt...

Gestaltung und Werkzeuge

Diese Homepage hier ist nur ein Probieren und die "Aesthetik" hält sich in Grenzen.
Ein Problem war vor allem auch, dass mir für eine wirklich gute grafische Gestaltung entsprechend geeignete Werkzeuge fehlten, vor allem für Buttons und Schriften, andererseits ist mit dem Photoshop, der hier für die Grafik zum Einsatz kam, doch bereits einiges möglich.

Als HTML-Editoren waren Claris Homepage und Microsoft Frontpage Express auch nur knapp genügend, die Frames und Javascript mussten im Quelltext direkt erstellt und editiert werden.
Ich werd mir wohl irgendwann noch was besseres anschaffen müssen...

Zuletzt hab ich dann noch mit animierten Gifs experimentiert und den MS Gif Animator gebraucht, ein kleines aber gut funktionierendes Programm.
Bewegte Bilder sollte man aber nur ganz begrenzt einsetzen, weil sie eher stören als nützen. Beispielsweise das animierte CBT links oben sieht zwar gut aus, hat aber keinen Zweck und lenkt vom ruhigen Lesen des Inhalts ab. Es soll nur die Möglichkeiten zeigen, ist aber für den Einsatz auf diese Art gar nicht zu empfehlen!

Frames

Frames haben einige Nachteile, z.B. können sie nur von Browsern neueren Datums angezeigt werden (ich hoffe, alle Teilnehmer dieses Seminars haben framefähige Browser...), Frames können schlecht gedruckt werden bzw. je nach Browser nur ein einzelnes (das aktive) Frame, Bookmarks können nicht auf entsprechende Frames gesetzt werden, der Seitenaufbau ist langsamer etc.

Schade eigentlich und hoffentlich werden diese Nachteile verschwinden, weil die Vorteile enorm sind, z.B. können die Seiten eben sehr viel übersichtlicher gestaltet werden und die Bedienung ist wesentlich schneller.

Der Code kann ja in den Files eingesehen werden, trotzdem noch ein paar Details:

Frame-Details

"index.htm" enthält nur die erste Rahmen-Definition:

<FRAMESET rows="60,*">
<FRAME SRC="ind-top.htm" name="ind-top" scrolling="no">
<FRAME SRC="info.htm" name="main" scrolling="auto" >
</FRAMESET>

und in "ind-top.htm" (oberer Teil des Fensters) und "info.htm" (unterer Teil, Info-Seite) wird die Seite weiter aufgebaut und zuerst weitere Frames definiert (-> geschachtelte Frames sind möglich) und dann erst folgt der Inhalt.

Wichtig ist, dass die Links im Navigations-Frame (z.b. in "ind-top-nav.htm") auf das Frame verweisen, worin jeweils neu aufgebaut werden soll (TARGET="main", d.h. Ziel ist die untere Fensterhälfte mit dem Namen "main"):

<P><A HREF="xypage.htm" TARGET="main">
<IMG SRC="buttonxypage.JPG" WIDTH=88 HEIGHT=33
BORDER=0 ALIGN=bottom name="xypage"></A>

Dynamische Buttons

Javascript hab ich eingesetzt, um verweissensitive Grafiken zu erzeugen (die Buttons im Hauptmenu). Eine Technik, die die Benutzerführung aufpeppt und auch für die CBT-Kurse sehr angenehm wäre (im 'Overview of Java' fehlte dies).

Damit bei grösseren Menus nicht zuviel Code entsteht, hab ich Funktionen erstellt, wobei das alles nur nötig ist bzw. ziemlich viel Code bedeutet aus zwei Gründen:

• Beim Mausclick auf einen Button muss der bisherig gewählte Button die Farbe wieder zurück auf 'normal' wechseln
  (siehe Funktion XCLICK), und
• beim aktiven (mit Mausclick gewählten) Button darf beim Darüberfahren mit der Maus die Farbe nicht mehr ändern
  (siehe IF-Bedingung in den Funktionen XOUT und XOVER, die Variable "xmenu" enthält die Information, welches überhaupt der aktive Button ist)

<script language="JavaScript"><!---

var xmenu = "info"
var xbu = "button-"
var xext = "gif"

function xout(xbuname)
{ if (xmenu!=xbuname)
{ document.images[xbuname].src = xbu+xbuname+"1."+xext } }

function xover(xbuname)
{ if (xmenu!=xbuname)
{ document.images[xbuname].src = xbu+xbuname+"2."+xext } }

function xclick(xbuname) {
document.images['info'].src = xbu+"info1."+xext
document.images['xypage'].src = xbu+"xypage1."+xext
document.images['.....'].src = xbu+".....1."+xext
.....
document.images[xbuname].src = xbu+xbuname+"3."+xext
xmenu = xbuname }

// --></script>

und der Aufruf:

<P><A HREF="info.htm"
TARGET="main"
onmouseout="xout('info')" onmouseover="xover('info')" onclick="xclick('info')">
<IMG SRC="button-info3.JPG" WIDTH=88 HEIGHT=33
BORDER=0 ALIGN=bottom name="info"></A>

weiterhin müssen alle Grafiken zu Beginn in den Speicher geladen werden:

var irgendeinname1 = new Image(); irgendeinname1.src = "button-info1.gif";
var irgendeinname2 = new Image(); irgendeinname2.src = "button-info2.gif";
etc.