Praxisteil

new reference

In diesem Teil innerhalb der New Reference-Reihe werden sämtliche, für den Erfolg wichtigen Programmierinstrumente vorgestellt, erläutert, und es wird anhand von Beispielen deren Funktionsweise vorgeführt.

Kategorie: Design-Tricks

Frames als Rand

Anwendung

Unterschiedliche Bildschirmauflösungen und Ausstattungen sind immer noch ein großes Problem bei der Gestaltung von Internetseiten. Gestalten Sie beispielsweise Ihre Seiten für eine hohe Auflösung, sehen diese auf Monitoren mit geringer Auflösung meist nur noch sehr mickrig aus. Oft ist nur ein Teil der Seite zu sehen. Gehen Sie andersherum vor und entwickeln Sie auf geringen Auflösungen, dann wird der zu kleine Bildschirminhalt auf großen Monitoren meist links oben in die Ecke gedrängt. Eine Abhilfe schafft ein geschickter Umgang mit Frames.

Umsetzung

Mit Hilfe mehrerer Frames gestalten wir uns einen Rahmen. Die Mitte des Bildschirms wird von einem Rechteck mit fest definierter Größe gefüllt. Diese Größe sollte so gewählt sein, dass Sie auch auf geringer Auflösung noch voll zu sehen ist. Mit Hilfe der Frames gelingt es uns jetzt, den eigentlichen Inhalt in der Mitte des Bildes exakt sowohl vertikal als auch horizontal zu zentrieren. Selbst wenn das Browserfenster verkleinert wird oder die Bildschirmauflösung sich verändert, bis zur Größe unseres mittleren Frames ist die Darstellung jederzeit optimal. Natürlich lassen sich mit Frames nicht so einfach Rahmen ziehen, wir teilen unseren Bildschirm daher in drei Spalten. Wobei wir die jeweils äußeren Spalten mit etwa 25% als Rand wählen. Zusätzlich wird der Bildschirm in drei Zeilen geteilt. Hier lassen wir jeweils oben und unten 15% Rand. In der Mitte bleibt unser Feld, in das wir schließlich den eigentlichen Inhalt füllen.

Verschiedene Möglichkeiten, ein Bild zu beschriften.

Beispiel

<frameset rows="25%,*,25%">
<frame src="oben.htm">
<frameset cols="15%,*,15%">
<frame src="links.htm">
<frame name="Mitte" SRC="mitte.htm">
<frame SRC="rechts.htm">
</frameset>
<frame src="unten.htm">
</frameset>

Tips

Nachdem alles fertig ist, nicht vergessen, die Frameränder verschwinden zu lassen und die Scrollbalken anzupassen.

Unsichtbare Frames

Anwendung

Die Verwendung von Frames setzt sich nach anfänglicher Zurückhaltung inzwischen immer stärker durch. Nachdem dieser Befehl zur Aufteilung des Browserfensters endlich auch in HTML 4.0 einen offiziellen Status erlangt hat, weicht die anfängliche Skepsis. Frames findet man heute auf professionellen Websites in der Regel als unsichtbare Rahmen, um gerade bei kleineren Bildschirmen keinen Platz mit Scrollbalken zu verschwenden.

Umsetzung

Um die unschönen Rahmen verschwinden zu lassen, sind derzeit noch mehrere Attribute notwendig, da der Microsoft Internet Explorer und der Netscape Communicator unterschiedliche Befehle unterstützen. Verwenden Sie die drei Attribute FRAMESIZE, FRAMEBORDER und BORDER und setzen Sie für alle den Wert "0" ein, um Rahmen ganz verschwinden zu lassen.

Beispiel

<html>
<frameset>
<frame
cols="60%, 40%"
frameborder="0"
border="0"
framespacing="0">
...
</html>

Hier verschwindet der Rahmen, weil FRAMEBORDER auf 0 gesetzt wurde.


Tips

Über das Attribut SCROLLING lassen sich zusätzlich eventuell notwendige Scrollbalken ausblenden. Der Wert NO verhindert das Einblenden dieser Balken zuverlässig. Über YES können Sie die Bildlaufleisten dauerhaft einblenden und AUTO passt die Leisten je nach Inhalt automatisch an.

Blinde GIF-Bilder einsetzen

Anwendung

Die Textauszeichnungssprache HTML bietet wenige Möglichkeiten, Elemente exakt auf einer Seite zu positionieren. Ein beliebter Trick für genaueres Layout ist der Einsatz von sogenannten »blinden« GIF-Bildern. Das sind unsichtbare Bilder, die nur als Platzhalter eingesetzt werden, um den Browser zu zwingen, bestimmte Elemente in der Ansicht genau zu verschieben.

Umsetzung

Erstellen Sie zunächst mit einem beliebigen Grafikprogramm ein kleines Bild mit der Größe 1 x 1 Pixel. Eventuell können Sie das Bild auch etwas größer wählen, wenn Ihre Grafiksoftware so kleine Bilder nicht zulässt. Speichern Sie das Bild im GIF-Format und versehen Sie es mit dem Attribut transparent. Binden Sie das Bild dann wie andere Grafiken in Ihren HTML-Code ein und verändern Sie die Größe mit den Attributen Width und Height beliebig. Das Bild dient jetzt zwar als Platzhalter, wird aber aufgrund seiner transparenten Eigenschaften nicht angezeigt.

Beispiel

<img scr="leer.gif" width="100" height="200">

Das Bild leer.gif hat eine Breite von 100 Bildpunkten und eine Höhe von 200 Bildpunkten.

<a href="deutsch/start.htm">
<img src="flag_d.gif" border="0"
alt="Deutsch" width="30" height="21"></a>

<img src="empty.gif" border="0"
width=100 height=10 alt="---">

<a href="englisch/start.htm">
<img src="flag_e.gif" border="0"
alt="Englisch" width="30" height="21"></a>

Tips

Verwenden Sie für Ihre gesamte Webpräsenz immer das gleiche transparente Bild, damit der Browser die Grafik aus dem Cache-Speicher beziehen kann und nicht jedes Mal neu laden muss.

Alternative Grafik verwenden

Anwendung

Mit dem Befehl zum Einfügen eines Bildes lässt sich neben der eigentlichen Bildquelle gleichzeitig auch eine zusätzliche alternative Bildquelle angeben. Die alternative Bildquelle wird immer vor der eigentlichen Grafik angezeigt und ist dazu gedacht, zunächst ein Bild mit niedrigerer Auflösung zu senden. Ziel dieses Attributs ist es, den Besucher der Website schon möglichst früh mit einem schnellen Überblick über den Inhalt zu versorgen.

Umsetzung

Erstellen Sie mit Ihrem Grafikbearbeitungsprogramm eine Kopie des Originals, die Sie so verändern, dass sie wesentlich weniger Speicherplatz benötigt. Das können Sie beispielsweise tun, indem Sie Auflösung und Farbtiefe verändern. Die Bildgröße sollten Sie möglichst unverändert lassen.

Beispiel

<img scr="original.gif" lowscr="kopie.gif">

Tips

Setzen Sie eine Alternativgrafik nur dann ein, wenn sich Original und Kopie wirklich deutlich in ihrer Größe unterscheiden. Sonst lohnt sich der zusätzliche Aufwand der Datenübertragung für das zusätzliche Bild nicht mehr.

Seite von fremden Frames befreien

Anwendung

Ein Problem tritt bei der Verwendung von Frames immer dann auf, wenn eigene Seiten in fremde Frames geladen werden. In diesem Fall werden die eigenen Inhalte nur zum Teil angezeigt. Außerdem verwischen die Angebote zwischen eigenen Inhalten und fremden Informationen schnell.

Umsetzung

Wenn Sie selbst andere Angebote aufrufen, können Sie leicht verhindern, dass diese innerhalb Ihres Framesets angezeigt werden, indem Sie eine neue Browserinstanz starten und das Dokument dort anzeigen. Schwieriger wird es, wenn jemand anderes Ihre Inhalte in seinen Seiten integriert hat. In diesem Fall müssen Sie dem Übeltäter per JavaScript zu Leibe rücken. Dazu müssen Sie lediglich die unten aufgeführten Zeilen in den Kopf Ihres Dokuments einfügen. Das führt dann dazu, dass diese Seite immer in einem eigenen Fenster angezeigt wird.

Beispiel

<html>
<head>
<title>Titel der Seite</title>

<script language="javascript">
<!--
if (top.frames.length != 0)
{
top.location = location;
}
-->
</script>

</head>
<body>
<b>I n h a l t</b>
</body>
</html>

Zusätzlich Hintergrundfarbe angeben

Anwendung

Sofern Sie für eine Internetseite einen grafischen Hintergrund auswählen, kann eigentlich auf die zusätzliche Angabe einer Hintergrundfarbe verzichtet werden. Sie sollten allerdings möglichst doch von diesem Attribut Gebrauch machen. Denn die Hintergrundgrafik wird immer erst etwas zeitverzögert übertragen, dagegen ist die Farbangabe im HTML-Dokument immer sofort da. Dieser Umstand kann insbesondere dann zu Problemen führen, wenn man mit dunklem Hintergrund und weißer oder heller Schrift arbeitet. Denn in diesem Fall wird der Besucher in den ersten Sekunden der Übertragung neben einer weißen Seite fast nichts in dem Dokument erkennen können. Gibt man dagegen eine schwarze Hintergrundfarbe an, dann ist auch weiße Schrift sofort zu erkennen.

Umsetzung

Zusätzlich zum Attribut zur Angabe eines grafischen Hintergrundes geben Sie einfach auch die ungefähre Farbe der Grafik mit an.

Beispiel

<body background="dunkler_hintergrund.gif" bgcolor="black">

Tips

Diese Möglichkeit sollten Sie eigentlich immer nutzen, wenn Sie eine Hintergrundgrafik verwenden. Der zusätzliche Übertragungsaufwand könnte geringer nicht sein, und der gewünschte Effekt lässt Ihre Seiten schneller beim Anwender sichtbar werden.

Seitenränder festlegen

Anwendung

Durch das Einfügen einer unsichtbaren Tabelle lassen sich leicht und einfach Seitenränder für ein HTML-Dokument erzwingen. Fügen Sie dazu eine einzige Tabellenzelle in das Dokument ein.

Umsetzung

Sie müssen lediglich eine Tabelle mit einer einzigen Zelle in die Seite einfügen. Durch die Möglichkeit, der Tabelle eine bestimmte Minimalgröße zuzuweisen, füllt Sie trotz fehlender konkreter Größenangaben die gesamte Seite. Zentrieren Sie die Tabelle zusätzlich, um einen gleichmäßigen linken und rechten Rand zu erhalten.

Beispiel

<div align=center>
<table width=90%>
<tr>
<td>
Inhalt der Seite
</td>
</tr>
</table>

<html>
<body>
<div align=center>
<table width=80% height="95%">
<tr>
<td bgcolor=#FFFF00 align="center">
<b>Inhalt der Seite</b>
</td>
</tr>
</table>
</body>
</html>


Tips

Experimentieren Sie mit verschiedenen Prozentangaben für die Breite der Tabelle, um ein für Ihre Daten optimales Ergebnis zu erhalten.

Unsichtbare Tabellen

Anwendung

Tabellen werden heute kaum noch in ihrer ursprünglichen Form zur Darstellung von Informationen in Tabellenform genutzt, sondern fast immer zum Seitenlayout. Da HTML keine Möglichkeit der genauen Platzierung von Elementen auf der Seite kennt, bieten sich hier Tabellen als Hilfe an. Da man problemlos die Rahmen der Tabellen mit border=0 verschwinden lassen kann, machen sie sich selbst optisch nicht bemerkbar. Aus diesem Grund werden diese Tabellen auch »blinde« Tabellen genannt.

Umsetzung

Fügen Sie eine möglichst den ganzen Bildschirm umfassende Tabelle mit einer minimalen Breite und Höhe von 95 Prozent ein. Zusätzlich sollten Sie diese Tabelle noch zentrieren. Die Aufteilung der Tabelle in einzelne Zellen bleibt dabei Ihnen überlassen, es kommt ganz auf den Inhalt an, den Sie hier einfügen möchten.

Beispiel

<div align="center">
<table width="95%" height="95%" border="0">
<tr>
<td>
</td>
</tr>
</table>
</div>

Tips

Dieser Effekt zur Seitengestaltung lässt sich nur problemlos anwenden, wenn der Inhalt Ihres Dokuments eine Bildschirmseite nicht überschreitet. In der Entwurfsphase sollten Sie die Tabelle zunächst noch nicht »verschwinden« lassen, fügen Sie das Attribut "Border=0" erst zum Abschluss des Projekts ein. So behalten Sie im Browser eine genauere Übersicht über die verwendeten Rahmen.

Neues Browserfenster öffnen

Anwendung

Gerade wenn man externe Links auf der eigenen Seite unterbringt, kommt häufig das Problem auf, dass der Besucher, den man aufwendig auf die Seiten gelockt hat, schnell wieder verschwunden ist. Klickt der Besucher nämlich einen externen Link auf unserer Seite an, dann wird die neue Seite komplett in den Browser geladen und die Ursprungsseite ist schnell vergessen. Eine praktikable Lösung ist, für externe Links jeweils ein neues Browserfenster öffnen zu lassen. Dann ist der Besucher zwar zunächst weg, aber im Hintergrund schlummert immer noch die eigene Seite, zu der er irgendwann zurückkehren wird. Spätestens wenn er das vorgelagerte Browserfenster schließt.

Umsetzung

Mit Hilfe des Attributs TARGET ist es problemlos möglich, einen Link in einem ganz neuen Browserfenster zu öffnen.

Beispiel

<a href="http://www.wielage.de" target="_blank">
Externer Link
</a>

Tips

Testen Sie auch die anderen unter TARGET im Referenzteil angegebenen Sprungziele.

Clickable Images

Anwendung

Die sogenannten Imagemaps oder clickable Images finden immer größere Verbreitung. Es handelt sich hierbei um Grafiken, auf denen einzelne Bildbereiche mit Links versehen werden können. So könnte zum Beispiel eine Landkarte mit eingezeichneten Standorten zu jedem Standort mit einem anderen Link versehen werden. Imagemaps ersetzen zunehmend einzelne Buttons. Statt vieler kleiner Schaltflächen werden diese zu einem Bild zusammengefasst und die entsprechenden Bildbereiche markiert.

Umsetzung

Man sollte von sehr großen Imagemaps absehen, da der Besucher dann sehr lange warten muss, um überhaupt eine Möglichkeit zur Menüauswahl zu erhalten. Dagegen sind Menüleisten mit Größen bis 25 Kbyte noch relativ unbedenklich. Sie bieten einen guten Ersatz zu mehreren kleinen Buttons und sind in der Übertragung meist noch schneller.

Beispiel

<MAP NAME="Hauptmenue">
<AREA
SHAPE="RECT"
COORDS="476, 1, 520, 45"
HREF="schulung.htm">
<AREA
SHAPE="RECT"
COORDS="431, 1, 473, 45"
HREF="books.htm">
<AREA
SHAPE="RECT"
COORDS="369, 1, 413, 45"
HREF="eintragen.htm">
<AREA
SHAPE="RECT"
COORDS="307, 1, 345, 45"
HREF="service.htm">
<AREA
SHAPE="RECT"
COORDS="243, 1, 283, 45"
HREF="suchen.htm">
<AREA
SHAPE="RECT"
COORDS="189, 1, 228, 45"
HREF="kontakt.htm">
<AREA
SHAPE="RECT"
COORDS="128, 1, 165, 45"
HREF="referenz.htm">
<AREA
SHAPE="RECT"
COORDS="67, 1, 107, 45"
HREF="portrait.htm">
<AREA
SHAPE="RECT"
COORDS="3, 1, 56, 45"
HREF="seite1.htm">
</MAP>

<IMG border=0 width=607 height=50
SRC="part2.gif"
alt="Hauptmenü"
usemap="#Hauptmenue">

Tips

Denken Sie daran: Es gibt noch immer Puristen, die einen Browser benutzen, der keine Imagemaps darstellen kann. Bieten Sie eventuell ein alternatives Menü in Textform an.

Selbstablaufende Diashow

Anwendung

Normalerweise muss der Anwender aktiv werden, um zur nächsten Seite oder einer Seite aus dem Menü zu gelangen. Es gibt allerdings eine Möglichkeit, in HTML automatisch eine folgende Seite zu laden. Diese Funktion lässt sich leicht so umfunktionieren, um eine Reihe von Bildern oder HTML-Seiten nacheinander ablaufen zu lassen. Vielleicht für eine Foto-Galerie oder eine kleine Führung durch Ihr Internetangebot.

Umsetzung

Mit Hilfe des META-Tags REFRESH lässt sich nach einer eingestellten Anzahl von Sekunden automatisch ein anderes Dokument in den Browser laden. Diese Funktion kann man sehr gut zu einer selbstablaufenden Slideshow umfunktionieren.

Beispiel

In Dokument seite1.htm:

<meta http-equiv="refresh" content="10; URL=seite2.htm">
<img src="dia1.jpg">

In Dokument seite2.htm:

<meta http-equiv="refresh" content="10; URL=seite3.htm">
<img src="dia2.jpg">

In Dokument seite3.htm:

<meta http-equiv="refresh" content="10; URL=seite4.htm">
<img src="dia3.jpg">

Tips

Übertreiben Sie diesen Effekt nicht und lassen Sie dem Besucher einen Ausweg, um auch »normal« durch das Programm navigieren zu können. Außerdem müssen Sie die Wartezeit bis zum nächsten Bild genau abpassen. Geht es zu schnell, dann sind die Seiten wahrscheinlich noch nicht komplett geladen, ist die ganze Show zu langsam, langweilt sich der Besucher.

Browserversion erkennen

Anwendung

Manchmal kann es nützlich oder auch nur interessant sein, festzustellen, welchen Browser ein Besucher verwendet. Zwar gestaltet sich die Protokollierung einer solchen Information komplizierter, aber die rein informative Anzeige für den Besucher selbst ist schnell erstellt.

Umsetzung

Niemand browst völlig anonym durchs Netz. Zwar ist eine Name oder Wohnort nicht so schnell herauszubekommen, aber welchen Browser und welche Browserversion und damit auch welches Betriebssystem der Anwender einsetzt, ist dank JavaScript schnell erkannt. Nachdem Sie den untenstehenden Code in Ihre Seite integriert haben, bekommt jeder Besucher angezeigt, welche Informationen über seinen Browser verfügbar sind.

Beispiel

<html>
<head>
<title>Beispiel</title>
<script language="JavaScript">
<!--
document.write ("Sie benutzen den "
+ navigator.appName
+ " in der Version "
+ navigator.appVersion+".")
// -->
</script>
</head>
<body>
</body>
</html>

Tips

Dieses Script funktioniert nur mit Browsern, die auch JavaScript unterstützen. Außerdem darf der Anwender JavaScript nicht deaktiviert haben.

Unterschiedliche Versionen

Anwendung

Die zahlreichen Unterschiede der verschiedenen Browser in der Behandlung von Funktionen machen einerseits eine große Vorsicht bei der Verwendung neuer Befehle notwendig, andererseits kann man so nie die neuesten Features und Effekte einsetzen. Eine optimale Lösung ist natürlich die Bereitstellung gleich mehrerer Versionen eines Dokuments. Für jeden Browser eine speziell angepasste Version. Nun möchte man aber ungern dem Anwender jedes Mal zumuten, sich bis zur speziellen Seite für seinen Browser zu klicken. Es liegt also nah, diesen Part automatisch erledigen zu lassen.

Umsetzung

Mit Hilfe eines kleinen JavaScript-Programms wird eine automatische Unterscheidung zwischen mehreren Browserversionen durchgeführt. Je nachdem, welcher Browser erkannt wurde, wird eine eigens dafür gestaltete Seite aufgerufen. Übernehmen Sie das Script in Ihre Seiten und passen Sie die angegebenen Dateinamen entsprechend an.

Beispiel

<html>
<head>
<title>Erkennung des Browsers</title>

<script language="JavaScript">
<!--
if ((navigator.appName=="Netscape") &&
(parseInt(navigator.appVersion.substring(0,1)) >= 4))
{
location="netscape4.htm"
}

else

{if ((navigator.appName=="Netscape") &&
(parseInt(navigator.appVersion.substring(0,1)) == 3))
{
location="netscape3.htm"
}

else

{if
((navigator.appName=="Microsoft Internet Explorer") &&
(parseInt(navigator.appVersion.substring(0,1)) >= 4))
{
document.location="msie4.htm"
}

else

{if
((navigator.appName=="Microsoft Internet Explorer") &&
(parseInt
(navigator.appVersion.substring(0,1)) == 2))
{
location="msie3.htm"
}

else
{document.location="noscript.htm"
}
}
}
}
// -->
</script>
</head>
<body>
</body>
</html>

Tips

Achten Sie darauf, auch eine Seite (noscript.htm) für Anwender zu erstellen, deren Browser kein JavaScript versteht oder die diese Funktion deaktiviert haben.

Titel verwenden

Anwendung

Fast jedes Element bietet die Möglichkeit, einen eigenen Titel zu definieren. Nun ist es sicherlich nicht notwendig, dies auch konsequent zu tun, doch einen Titel sollten Sie immer verwenden: den Titel der Seite. Der Seitentitel spielt in vielfacher Hinsicht eine besondere Rolle. Einerseits ist er das entscheidende Kriterium bei der Suche in Suchmaschinen. Nur wer die wichtigsten Stichwörter auch im Titel untergebracht hat wird überhaupt gefunden. Andererseits achten viele Anwender auf den Inhalt des Titels, der in der Browserleiste erscheint. Daher sollten Sie einen aussagekräftigen Titel verwenden. Seitennamen wie »Seite1« oder »Willkommen auf meiner Homepage« bringen da nicht viel.

Umsetzung

Setzen Sie für jede einzelne Seite Ihres Projekts einen aussagekräftigen Titel ein. Der Titel wird im Kopf des Dokuments eingesetzt. Wenn Sie Frames verwenden, wird im Browser lediglich die Titelzeile des ersten Dokuments angezeigt (der Framedefinition). Trotzdem sollten Sie nicht darauf verzichten, auch allen weiteren eingebundenen Dokumenten aussagekräftige Titel zu verleihen.

Beispiel

<html>
<head>
<title>Informationssammlung HTML/XML</title>
</head>
<body>
</body>
</html>

Tips

Übrigens wird auch jedes Bookmark (Lesezeichen) zunächst mit dem Seitentitel eingetragen.

Text genau platzieren

Anwendung

Es ist normalerweise relativ aufwendig, Text fast punktgenau auf der Seite zu platzieren. Sollte man sich von einer Textverarbeitung angewöhnt haben, alles mit Leerzeichen aufzufüllen und so die Wörter auszurichten und einzurücken, wird man mit dem HTML-Browser schnell enttäuscht sein. Denn jede Stelle mit mehr als einem Leerzeichen hintereinander wird gnadenlos gelöscht.

Umsetzung

Eine Rettung naht dennoch, und zwar in Form des Befehls PRE. Dieser Befehl ist dafür gedacht, bereits formatierte Texte ohne weitere Bearbeitung auszugeben. Sinnvoll ist dies vor allem für Programmlistings, aber eben auch für kleine Texteffekte.

Beispiel

<pre>
Solche
Wellen
Linien
funktionieren
am
einfachsten
mit
diesem
HTML
Befehl
</pre>

Eingangsseite

Anwendung

In letzter Zeit setzt sich im Webdesign immer mehr der Trend durch, vor die eigentliche Seite mit der Navigationsstruktur eine sogenannte Eingangsseite zu schalten. Diese Seite enthält meist einige wichtige aktuelle Nachrichten oder Hinweise zum Unternehmen. Eine solche Seite wirkt natürlich besonders professionell, wenn nach einigen Sekunden ohne einen weiteren Mausklick die nächste Seite geladen wird.

Umsetzung

Gestalten Sie eine anspruchsvolle, aber technisch einfache Seite als Einstiegsseite. Damit Besucher nicht schon auf der ersten Seite mit technischen Finessen wie JavaScript oder Frames erschlagen werden. Nach einigen Sekunden lassen Sie dann automatisch die nächste Seite laden.

Beispiel

<meta http-equiv="refresh"
content="10; URL=menue.htm">



<html>
<head>
<title>Fehler: Diese Seite existiert nicht mehr!</title>
<meta http-equiv="refresh" content="5; URL=seite2neu.htm">
</head>
<body>
<center>
<font color="red"><h1>Fehler!</h1></font>
<br>
<font size="+1">
Die aufgerufene Seite existiert
auf diesem Server leider nicht mehr.<br>
Bitte klicken Sie den Link an,
um auf die neue Seite zu gelangen.
<br><br><br>
Nach 5 Sekunden wird die neue Seite automatisch geladen
<br><br><br><br>
<a href="seite2neu.htm">
Informationen und Preise einer Webpräsenz</a>
</font>
</center>
</body>
</html>

Tips

Eine solche Seite, die automatisch zur nächsten Seite weiterleitet, sollten Sie auch einbauen, wenn Sie einzelne Seiten Ihrer Präsenz entfernt haben. Setzen Sie statt dessen eine Seite mit einem Hinweis und einer automatischen Weiterleitung ein. So finden auch Besucher, die über veraltete Links zu Ihnen gelangt sind, direkt zur Hauptseite zurück.

Bild links oben platzieren

Anwendung

Prinzipiell kann ein Bild zwar problemlos in der linken oberen Ecke platziert werden, aber eben nicht genau. Es wird zunächst immer etwas Abstand zum oberen und linken Rand behalten. Möchten Sie aber die Seite wirklich ganz ausnutzen, bleiben Ihnen einige Einstellungen nicht erspart.

Umsetzung

Ziel ist es, den Abstand des Elements zum Rand auf Null zu setzen. Dies können Sie am leichtesten mit StyleSheets erreichen.

Beispiel

<html>
<head>
<style>
.null {position: absolute; top: 0pt; left: 0pt}
</style>
</head>
<body>
<div class="null" id="null">
...
</div>
</body>
</html>

<div style="position: absolute; top: 0pt; left: 0pt">
</div>

Bookmarks per Mausklick

Anwendung

Der Microsoft Internet Explorer verwaltet Lesezeichen oder Bookmarks als sogenannte Favoriten in einer übersichtlichen Liste. Man kann wohl davon ausgehen, dass man, wenn man, in möglichst vielen solcher Favoriten-Sammlungen eingetragen ist, auch besonders häufig besucht wird. Nun ist es aber für den unbedarften Besucher Ihrer Seiten nicht ganz so leicht, sich Ihre Seite als Lesezeichen zu speichern. Sie sollten ihm dabei durch eine raffinierte Funktion hilfreich zur Hand gehen.

Umsetzung

Ein kleines, direkt eingebundenes JavaScript macht es möglich, dass sich der Besucher Ihrer Seite mit nur einem Klick auf die entsprechende Schaltfläche das Lesezeichen auf Ihre Seite sichern kann.

Beispiel

<a
href="javascript:window.external.AddFavorite
('http://www.pott-it.de',
'Pott IT-Experten')">
Lesezeichen auf diese Seite setzen
</a>

Tips

Leider funktioniert diese Funktion nur mit dem Microsoft Internet Explorer.

Browserabhängige StyleSheets

Anwendung

Auch StyleSheets werden wie so viele andere Befehle noch immer nicht von allen Browsern gleichermaßen interpretiert. Um nicht die radikale Lösung wählen zu müssen, nämlich für jeden Browser eine eigene HTML-Seite zu erstellen, gibt es die Möglichkeit, per JavaScript die richtigen Befehle auszuwählen.

Umsetzung

Zunächst benötigen Sie für Ihr Dokument zwei externe StyleSheet-Dateien. Das bedeutet, die StyleSheets werden nicht direkt im Dokument definiert, sondern in einer separaten Datei. Sie erstellen eine StyleSheet-Datei für den Internet Explorer und eine für den Netscape Communicator. In jedes HTML-Dokument lässt sich leicht eine externe StyleSheet-Datei einbinden. Per JavaScript müssen Sie nur von Fall zu Fall entscheiden, welche es sein soll.

Beispiel

<html>
<head>

<script language="JavaScript">
if
((navigator.appName.indexOf("Explorer") >= 0)
&&
(navigator.appVersion.indexOf('4.0')>=0 ))
document.writeln
('<link
rel=stylesheet
href="netscape.css"
type="text/css">');
if
((navigator.appName.indexOf("Netscape") >= 0)
&&
(navigator.appVersion.indexOf('4.0')>=0 ))
document.writeln
('<link
rel=stylesheet
href="explorer.css"
type ="text/css">');
</script>

</head>
<body>
</body>
</html>

Wasserzeichen als Hintergrund

Anwendung

Der Microsoft Internet Explorer bietet für die Angabe der Hintergrundgrafik eine kleine und gefahrlos einzusetzende zusätzlich Option: den sogenannten Wasserzeichen-Effekt. Das bedeutet, die Hintergrundgrafik scrollt nicht mit dem Text mit, sondern bleibt unabhängig davon immer konstant unbeweglich.

Umsetzung

Geben Sie zusätzlich zum Hintergrundbild das Attribut BGPROPERTIES="fixed" an, um einen festen unbeweglichen Hintergrund zu erhalten.

Beispiel

<background="back.gif" bgproperties="fixed">

Tips

Dieser Effekt lässt sich auf allen CSS-kompatiblen Browsern auch mit Hilfe der StyleSheets realisieren. Nähere Informationen dazu finden Sie im Referenzteil.

Größe des Browserfensters verändern

Anwendung

Lassen Sie Ihre Besucher doch einmal einfach und per Mausklick die Größe des Browserfensters verändern. So lassen sich einerseits bestimmte Abmessungen erreichen und andererseits verschiedene Auflösungen testen.

Umsetzung

Was so spektakulär wirkt, ist bereits mit einer Zeile Quellcode und ein bisschen JavaScript zu schaffen. Realisiert wird der Effekt über ein Formular, das die Mausklicks aufnimmt und einen entsprechenden JavaScript-Befehl ausführt.

Beispiel

<form>
<input
type=button
onclick="window.resizeTo(1024,768)"
value="1024 x 768">
</form>

<form>
<input
type=button
onclick="window.resizeTo(800,600)"
value="800 x 600">
</form>

<form>
<input
type=button
onclick="window.resizeTo(640,480)"
value=" 640 x 480">
</form>

<form>
<input
type=button
onclick="window.resizeTo(0,0)"
value="Minimieren">
</form>

Tabellen mit Hintergrund

Anwendung

Tabellen mit farbigen Hintergründen setzen sich immer mehr durch, aber inzwischen lassen sich Tabellen nicht nur mit einfarbigen Hintergründen belegen, sondern auch mit einer Hintergrundgrafik.

Umsetzung

Geben Sie dazu innerhalb des Befehls TABLE als BACKGROUND eine geeignete Grafik an. Wählen Sie die Größe der Grafik so, dass sie zur Größe der Tabelle passt. Dieser Befehl funktioniert leider noch nicht mit allen Browsern.

Beispiel

<table
border="3"
background="back.gif"
align="CENTER"
width="100">

<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

Überblendeffekte

Anwendung

Der Microsoft-Explorer bietet ab Version 4.0 einige interessante Effekte zum Überblenden von der einen zur anderen Seite. Diese Effekte können wahlweise aktiv werden, wenn Sie die Seite betreten oder wieder verlassen. Auf anderen Browsern werden diese Effekte einfach ignoriert und führen nicht zu Fehlermeldungen! Daher sind diese Effekte viel interessanter als irgendwelche Java-Script-Einblendungen.

Umsetzung

Realisiert werden diese Effekte über den Befehl META, dem Sie als HTTP-EQUIV den Wert PAGE-ENTER oder PAGE-EXIT übergeben. Als CONTENT des Attributs übergeben Sie die Einstellungen des gewünschten Effekts. PAGE-ENTER setzen Sie ein, wenn Sie einen Effekt einfügen möchten, der beim Betreten der Seite aktiv wird. PAGE-EXIT verwenden Sie für den Effekt beim Verlassen der aktiven Seite.

<meta http-equiv="page-enter"
content="revealtrans (duration=3,transition=23)">

Neben dem Typ des Effektes (unter TRANSITION) können Sie noch mit DURATION die Gesamtdauer des Ein- oder Ausblendeffektes angeben. Wählen Sie diese Dauer nicht zu lang (ca. 2 bis 5 Sekunden sind optimal). Verwenden Sie diesen Effekt besonders sparsam. Sonst wird er sehr schnell unbeliebt bei Besuchern Ihrer Seiten. Ein oder maximal zwei Seiten sollten mit diesem Effekt ausgestattet werden.

Effekt> Wert>
Box in 0
Box out 1
Circle in 2
Circle out 3
Wipe up 4
Wipe down 5
Wipe right 6
Wipe left 7
Vertical blinds 8
Horizontal blinds 9
Checkerboard across 10
Checkerboard down 11
Random dissolve 12
Split vertical in 13
Split vertical out 14
Split horizontal in 15
Split horizontal out 16
Strips left down 17
Strips left up 18
Strips right down 19
Strips right up 20
Random bars horizontal 21
Random bars vertical 22
Random 23

Beispiel

<html>
<head>
<meta http-equiv="page-enter"
content="revealtrans (duration=4,transition=10)">
</head>
<body bgcolor="yellow">
<b>I n h a l t</b>
</body>
</html>

<meta http-equiv="page-exit"
content="revealtrans (duration=3,transition=23)">

Tips

Wenn Sie diesen Effekt im Browser ausprobieren möchten, achten Sie darauf, dass er nur funktioniert, wenn Sie sich tatsächlich von einer anderen Seite auf die Zielseite bewegen. Ein einfaches Aktualisieren oder Neuladen der Seite aktiviert den Effekt nicht. Das erschwert den Test dieser Effekte ein wenig.

Unterstrich von Hyperlinks entfernen

Anwendung

Ein normaler Hyperlink wird in der vorgegebenen Darstellung in blauer Schrift mit einem Unterstrich angezeigt. In einigen Fällen ist es gewünscht, von dieser traditionellen Form abzuweichen und diese Unterstreichung zu entfernen. So kann das gesamte Erscheinungsbild problemlos an ein vorgegebenes Layout angepasst werden.

Umsetzung

Die Lösung ist hier in den SytelSheets zu suchen. Mit Hilfe des Attributs text-decoration ist es problemlos möglich, diesen Unterstrich zu entfernen. Mit Hilfe der StyleSheets sind natürlich auch weitere Gestaltungsmöglichkeiten offen. Beispielsweise ließen sich Farbe und Schrifttypus leicht ändern.

Beispiel

<a href="http://www.pott-it.de">
Normaler Hyperlink
</a>

<br>
<a href="http://www.pott-it.de" style="text-decoration: none">
Hyperlink ohne Unterstrich
</a>







Schaltflächen mit Rollover-Effekt

Anwendung

Kaum eine Internetseite kommt heute noch ohne sie aus: Schaltflächen mit Rollover-Effekt. Das bedeutet, wenn sich der Besucher mit dem Mauszeiger über eine grafische Schaltfläche bewegt, dann wird diese Grafik ausgetauscht und eine andere Grafik erscheint. So scheinen die Schaltflächen auf die Mausbewegungen zu reagieren.

Umsetzung

Diese interaktiven Schaltflächen werden mit Hilfe von JavaScript realisiert. Zunächst müssen Sie für jede Schaltfläche zwei Grafiken erzeugen, eine im normalen Zustand und eine weitere im aktiven Zustand. Im Kopf des Dokuments werden zunächst die Funktionen für die aktivierte Schaltfläche und die Deaktivierung einer Schaltfläche eingegeben. Wir haben zusätzlich eine Überprüfung der Browserversion miteingebaut. So ist sichergestellt, dass auch in dem Fall, dass der Browser mit dieser JavaScript-Version noch nicht zurechtkommt, nicht abstürzt. Im Körper des Dokuments wird anschließend über das Ereigniss onMouseOver das Bild geladen, das den aktivierten Zustand darstellt. Bewegt sich die Maus wieder von der Schaltfläche weg, dann wird über onMouseOut der alte Zustand hergestellt.

Beispiel

<html>
<head>
<title>Homepage</title>
<script language="JavaScript">
<!--
browser=0
if (navigator.userAgent.substring(0,9)
== "Mozilla/3") {browser=1}
if (navigator.userAgent.substring(0,9)
== "Mozilla/4") {browser=1}

if (browser == 1)
{
var bildan = new Array();
var bildaus = new Array();

bildan[0] = new Image();
bildan[0].src = "button1an.gif";
bildaus[0] = new Image()
bildaus[0].src = "button1aus.gif"

bildan[1] = new Image();
bildan[1].src = "button2an.gif";
bildaus[1] = new Image()
bildaus[1].src = "button2aus.gif"

bildan[2] = new Image();
bildan[2].src = "button3an.gif";
bildaus[2] = new Image()
bildaus[2].src = "button3aus.gif"

bildan[3] = new Image();
bildan[3].src = "button4an.gif";
bildaus[3] = new Image()
bildaus[3].src = "button4aus.gif"

bildan[4] = new Image();
bildan[4].src = "button5an.gif";
bildaus[4] = new Image()
bildaus[4].src = "button5aus.gif"

bildan[5] = new Image();
bildan[5].src = "button6an.gif";
bildaus[5] = new Image()
bildaus[5].src = "button6aus.gif"

bildan[6] = new Image();
bildan[6].src = "button7an.gif";
bildaus[6] = new Image()
bildaus[6].src = "button7aus.gif"
}
var geklickt = null

function an(i)
{
if (browser == 1)
{
if (i == 0) { document.images[0].src=bildan[0].src }
if (i == 1) { document.images[1].src=bildan[1].src }
if (i == 2) { document.images[2].src=bildan[2].src }
if (i == 3) { document.images[3].src=bildan[3].src }
if (i == 4) { document.images[4].src=bildan[4].src }
if (i == 5) { document.images[5].src=bildan[5].src }
if (i == 6) { document.images[6].src=bildan[6].src }
}
}



function aus(i)
{
if (browser == 1)
{
if (i == 0) { document.images[0].src=bildaus[0].src }
if (i == 1) { document.images[1].src=bildaus[1].src }
if (i == 2) { document.images[2].src=bildaus[2].src }
if (i == 3) { document.images[3].src=bildaus[3].src }
if (i == 4) { document.images[4].src=bildaus[4].src }
if (i == 5) { document.images[5].src=bildaus[5].src }
if (i == 6) { document.images[6].src=bildaus[6].src }
}
}
// -->
</script>
</head>
<body>

<a
target="Hauptframe"
href="start.htm"
onMouseOver="an(0); return true"
onMouseOut="aus(0)">
<img
border="0"
src="button1aus.gif"
height="35"
width="100"
alt="Einleitung">
</a>

<a
target="Hauptframe"
href="praesenz.htm"
onMouseOver="an(1); return true"
onMouseOut="aus(1)">
<img
border="0"
src="button2aus.gif"
height="35"
width="100"
alt="preiswerte Webpräsenz">
</a>

...weitere Schaltflächen ...

</body>
</html>

Im nächsten Beispiel gehen wir noch einen Schritt weiter und legen insgesamt drei Zustände für jede Schaltfläche fest. Diese Schaltflächen stellen die Menüleiste dar, die immer eingeblendet bleibt. Bewegt der Anwender die Maus über eine dieser Schaltflächen, dann wird diese zunächst aktiviert. Klickt der Anwender die Schaltfläche zusätzlich an, dann wird diese als Auswahl markiert. Anschließend wird das zu dem Menüpunkt passende Dokument geladen. So sieht der Besucher auf einen Blick, in welchem Menü er sich gerade befindet. Sie müssen in diesem Fall für jede Schaltfläche drei Grafiken erzeugen (Normal, Aktiviert und Gewählt).

<html>
<head>
<title>Homepage</title>
<script language="JavaScript">
<!--
punkt=0;
browser=0;
if (navigator.userAgent.substring(0,9)
== "Mozilla/3") {browser=1}
if (navigator.userAgent.substring(0,9)
== "Mozilla/4") {browser=1}
if (browser == 1)
{
var bildan = new Array();
var bildaus = new Array();
var bild = new Array();

bildan[0] = new Image();
bildan[0].src = "menue1on.gif";
bildaus[0] = new Image()
bildaus[0].src = "menue1.gif"
bild[0] = new Image()
bild[0].src = "menue1g.gif"

bildan[1] = new Image();
bildan[1].src = "menue2on.gif";
bildaus[1] = new Image()
bildaus[1].src = "menue2.gif"
bild[1] = new Image()
bild[1].src = "menue2g.gif"

bildan[2] = new Image();
bildan[2].src = "menue3on.gif";
bildaus[2] = new Image()
bildaus[2].src = "menue3.gif"
bild[2] = new Image()
bild[2].src = "menue3g.gif"
}
var geklickt = null


function an(i)
{
if (browser == 1)
{
if (i == 0) { document.images[0].src=bildan[0].src }
if (i > 0)
{ document.images[i].src=bildan[i].src
if (punkt == i)
{ document.images[i].src=bild[i].src } }
}
}
function aus(i)
{
if (browser == 1)
{
if (i == 0) { document.images[0].src=bildaus[0].src }
if (i > 0)
{ document.images[i].src=bildaus[i].src
if (punkt == i)
{ document.images[i].src=bild[i].src } }
}
}
function gewaehlt(i)
{
if (browser == 1)
{
document.images[punkt].src=bildaus[punkt].src;
document.images[i].src=bild[i].src;
punkt=i;
}
}

// -->
</script>
</head>
<body>
<a
href="page1.htm" target="Hauptfenster"
onMouseOver="an(0); return true"
onMouseOut="aus(0)">
onClick="gewaehlt(0)">
<img src="menue1.gif" border="0"></a><br>

<a
href="page2.htm" target="Hauptfenster"
onMouseOver="an(1); return true"
onMouseOut="aus(1)"
onClick="gewaehlt(1)">
<img src="menue2.gif" border="0"></a><br>


<a
href="page3.htm" target="Hauptfenster"
onMouseOver="an(2); return true"
onMouseOut="aus(2)"
onClick="gewaehlt(2)">
<img src="menue3.gif" border="0"></a><br>
</body>
</html>

Formulare optimal gestalten

Anwendung

Bei der Verwendung von Formularen tritt häufig das Problem auf, die Bezeichnungen der einzelnen Eingabefelder genau zu positionieren. Setzt man diese einfach als Text vor die Eingabefelder, dann entstehen sehr große Ungenauigkeiten, die optisch wenig professionell wirken.

Umsetzung

Die Lösung ist eine zweispaltige Tabelle. Die eine Spalte enthält jeweils die Bezeichnungen der Felder und die zweite Spalte die Eingabefelder selbst. Die gesamte Tabelle wird vom Formular umschlossen. Achten Sie darauf, dass sich der FORM- Container nicht innerhalb einer Tabellenzelle befindet. Abschließend können Sie hinter die Tabelle die SUBMIT-Schaltfläche einsetzen.

Beispiel

<form
name="bestellung"
action="feedback.cgi"
method="POST">

<table border=0 cellpadding=0>
<tr>
<td bgcolor="#C0C0C0" width="30%">
<b>Firma</b></td>
<td bgcolor="#C0C0C0" width="70%">
<input type=text name="Firma" size="40"></td>
</tr>

<tr>
<td bgcolor="#C0C0C0" width="30%">
Ansprechpartner</td>
<td bgcolor="#C0C0C0" width="70%">
Herr
<INPUT NAME="Anrede" TYPE="RADIO" VALUE="Herr">
Frau
<INPUT NAME="Anrede" TYPE="RADIO" VALUE="Frau"></td>
</tr>

<tr>
<td bgcolor="#C0C0C0" width="30%">
<b>Name</b></td>
<td bgcolor="#C0C0C0" width="70%">
<input type=text name="Name" size="40"></td>
</tr>

<tr>
<td bgcolor="#C0C0C0" width="30%">
Straße</td>
<td bgcolor="#C0C0C0" width="70%">
<input type=text name="Straße" size="40"></td>
</tr>

<tr>
<td bgcolor="#C0C0C0" width="30%">
Ort</td>
<td bgcolor="#C0C0C0" width="70%">
<input type=text name="Ort" size="40"></td>
</tr>

<tr>
<td bgcolor="#C0C0C0" width="30%">Informationen</td>
<td bgcolor="#C0C0C0" width="70%">
<select name="Produkt">
<option>Endverbraucher
<option>Studio
<option>Handel
</select>
</td>
</tr>

</table>

<br>
<input type="submit" value="Informationen anfordern">
</form>

Raumeffekt für Soundausgabe

Anwendung

Sofern das Soundsystem eine Stereo oder Surroundausgabe unterstützt, lässt sich die Richtung, aus der der Sprecher bei der Sprachausgabe zu hören ist, genau festlegen.

Umsetzung

Zur Umsetzung bedienen wir uns des StyleSheets-Befehls azimuth. Dieser legt den Raumeffekt für die Soundausgabe fest. Die folgenden Parameter werden eingesetzt, um die Richtung, aus der der Sound der Sprachausgabe kommt, zu bestimmen.

center

von der Mitte

center behind

von der Mitte hinten

center-left

von der Mitte links

center-left behind

von der Mitte links hinten

center-right

von der Mitte rechts

center-right behind

von der Mitte rechts hinten

far-left

von weit links

far-left behind

von weit links hinten

left

von links

left behind

von links hinten

left-side

von ganz links

left-side behind

von ganz links hinten

right

von rechts

right behind

von rechts hinten

right-side

von ganz rechts

right-side behind

von ganz rechts hinten

Beispiel

<style type="text/css">
h1, h2 { azimuth: right }
h3, h4 { azimuth: right behind }
</style>

<div style="azimuth: left">
</div>

Beschriftung von Bildern

Anwendung

Die Beschriftung von eingebundenen Bildern und die Positionierung des umlaufenden Textes bereiten immer wieder Schwierigkeiten. Daher zeigen wir im folgenden Beispiel die wichtigsten Befehle zur Ausrichtung.

Umsetzung

Um festzulegen, wie der Text um ein Bild herum angeordnet werden soll, kann das Attribut ALIGN des Befehls IMG wertvolle Dienste leisten. Mit diesem Attribut bestimmen Sie genau, wie der Browser verfahren soll.

Beispiel

<html>
<body>

<table border="2">
<tr>
<td>
Beschriftung
<img src="wolken.jpg" align="top">
Beschriftung
</td>
</tr>

<tr>
<td>
Beschriftung
<img src="wolken.jpg" align="middle">
Beschriftung
</td>
</tr>

<tr>
<td>
Beschriftung
<img src="wolken.jpg" align="bottom">
Beschriftung
</td>
</tr>

<tr>
<td align="center">
<img src="wolken.jpg">
<br>
Beschriftung
</td>
</tr>

</body>
</html>


© Markt&Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH