vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 7

Ein gelungener Webauftritt

Puuh, die Woche war anstrengend. Dafür werden wir die Woche ein wenig gemächlicher ausklingen lassen. Wir werden auf der Basis der bisher gelernten Techniken ein eigenes kleines Web erstellen und uns ein wenig über Webseiten und Design im Allgemeinen unterhalten.

Die Themen heute:

7.1 Mit einfachem Design anfangen

Wer in der Erstellung von Webseiten noch nicht so erfahren ist, sollte nicht der Versuchung erliegen, gleich im ersten Anlauf »die welterschütternde Website« kreieren zu wollen. Wichtiger ist es, sich erst einmal ein klares Konzept für den Aufbau des Webs und die Navigation durch die Webseiten zu erarbeiten. Die Profis sprechen in diesem Zusammenhang auch von der »Usability« einer Website.

Usability ist ein Maß für die Bedienbarkeit und Benutzerfreundlichkeit eines Systems (beispielsweise eines Webs). Kriterien für die Usability eines Systems sind: Lernkurve, Effizienz der Bedienung, Statusverwaltung, Fehlerbewältigung und subjektives Gefühl (fühlt sich der Anwender wohl beim Umgang mit dem System).

Für die Usability einer Webseite ist vor allem eine steile Lernkurve wichtig. Der Websurfer will nicht erst umständliche Bedienungsanleitung lesen müssen, um sich im Web hin und her zu bewegen oder mit den Angeboten im Web zu interagieren. Hier kann man durch logische Organisation des Webs und intuitiv nachvollziehbare Navigationsstrukturen viel bewirken.

Umgekehrt können gerade ungewöhnliche Design- und Navigationslösungen das Interesse des Websurfers wecken und ihn anregen, die Website zu erforschen (siehe beispielsweise Website der Mailänder Scala in Abbildung 7.7). Welchen Weg man einschlägt hängt letztlich also vor allem von der Art der Website und dem Profil der anzusprechenden Websurfer ab.

Organisation vor Design (frame_seite.html)

Im Falle unseres kleinen Beispielwebs wollen wir unsere Design-Ansprüche der Organisation und Navigierbarkeit des Webs unterordnen. Konkret soll das heißen, dass wir die Homepage des Webs als Frameseite aufsetzen werden und die dadurch bedingten Einschränkungen in der Wahl des Designs in Kauf nehmen.

Die Aufteilung in Frames (Banner, Inhaltsverzeichnis, Anzeigebereich) hat für uns den Vorteil,

Die Frames der Homepage

Unser Beispielweb ist eine kleine Gedichtesammlung, die wir ins Internet stellen wollen. Abbildung 7.1 vermittelt Ihnen einen Eindruck davon, wie unser Web später aussehen wird.

Abbildung 7.1:  Die Startseite des Webs (das Design hat durch die Umwandlung in Grauwerte etwas gelitten)

Die Frame-Definition für diese Webseite sieht wie folgt aus:

<frameset rows="105,*" border="0">

<frame name="oben" scrolling="no" noresize src="oben.html"
frameborder="0"
marginwidth="0" marginheight="0">

<frameset cols="240,*">
<frame name="inhalt" target="hauptframe" src="inhalt.html"
frameborder="0">
<frame name="hauptframe" src="begruessung.html" frameborder="0" >
</frameset>

Zuerst werden zwei Zeilen definiert, von denen die erste 105 Pixel hoch ist. In ihr werden wir ein grafisches Banner einblenden. Die zweite Zeile, die den Rest des Browserfensters einnimmt, ist in zwei Spalten aufgeteilt. Im ersten (linken) Frame blenden wir das Inhaltsverzeichnis unseres Webs ein (eine Sammlung von Links zu den Gedichten), der rechte Frame dient der Anzeige der Gedichte (zu Beginn geben wir in diesem Frame einen kleinen Begrüßungstext aus).

Abbildung 7.2:  Die Aufteilung in Frames

Im endgültigen Web sind die Frames ausgeblendet. Dazu werden die frameborder- Attribute der Frames auf 0 gesetzt. Das border-Attribut des Framesets sorgt dafür, dass keine Leerräume zwischen den Frames zurückbleiben.

Für den oberen Frame setzen wir auch noch die Attribute marginwidth und marginheight auf 0. So können wir sicherstellen, dass unser Banner-Bild in allen Browsern direkt am Rand des Browserfensters beginnt (speziell der Navigator 4 tendiert ansonsten dazu alle Frameinhalte einzurücken).

Der wichtigste Teil der Frameseite ist damit schon fertig. Jetzt müssen wir nur noch META-Tags für die Unterstützung von Suchrobotern einfügen (unsere Website soll ja schließlich auch besucht werden) und eine alternative Darstellung für Browser ohne Frame-Unterstützung vorsehen.

Listing 7.1: frame_seite.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Ausgewählte Gedichte</title>

<!-- Suchmaschinen unterstützen -->
<meta name="language" content="de">
<meta lang="de" name="keywords" content="Gedichte,Rilke,
¬Wang Wei,Longfellow, Dufu, Fontane">
<meta name="description" content="Gedichtsammlung mit eigenen Werken
¬und Gedichten ausgewählter Dichter (Schwerpunkt auf alten
¬chinesischen Dichtern) ">
<meta name="revisit-after" content="30 days">
<meta name="robots" content="all">
</head>

<frameset rows="105,*" border="0">
<frame name="oben" scrolling="no" noresize src="oben.html"
frameborder="0"
marginwidth="0" marginheight="0" ><!-- kein Standardrand durch
Browser -->

<frameset cols="240,*">
<frame name="inhalt" target="hauptframe" src="inhalt.html"
frameborder="0">
<frame name="hauptframe" src="begruessung.html" frameborder="0" >
</frameset>

<noframes>
<body>
<p>Diese Frame-Seite enthält eine Gedichtesammlung mit ausgewählten Gedichten von Rilke, Wang Wei, Longfellow, Dufu und Fontane. Leider unterstützt Ihr Browser keine Frames. Wechseln Sie zur Seite <a href="alternativ.html">OHNE_FRAMES</a>. </p>
</body>
</noframes>
</frameset>
</html>

Die META-Tags zur Unterstützung der Suchmaschinen haben wir in Kapitel 6.4 besprochen. Den alternativen <body>-Teil nutzen wir dazu, die Stichworte aus den META- Tags im Seiteninhalt zu wiederholen. (Denken Sie daran, dass Suchroboter üblicherweise nicht den Links der Frames folgen.)

Das Banner (oben.html)

Die Seite oben.html enthält nicht mehr als ein einfaches Banner (eine langgestreckte Grafik) mit einem einzelnen Link, über den der Webbesucher auf die Begrüßungsseite zurückkehren kann, nachdem er zuvor das eine oder andere Gedicht gelesen hat.

Listing 7.2: oben.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Banner</title>

<!-- Stylesheets -->
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=StyleSheet type="text/css" href="gedichte_eingang.css">
</head>

<body>

<div class="zentriert">

<img border="0" src="banner.gif" usemap="#map1"/>
<map name="map1">
<area href="begruessung.html" target="hauptframe" shape="rect"
coords="3,3,90,33"></area>
</map>

</div>

</body>
</html>

Zur Formatierung verwendet die Seite ein externes Stylesheet.

Listing 7.3: gedichte_eingang.css

body       { background-color: black; color: white; 
margin-top: 20px; margin-left: 0px;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 12pt }
p.dichter { margin-left:300px }
.zentriert { text-align: center }
#zaehler { text-align: right; font-family: sans-serif; font-size: 8pt}
#verborgen { visibility: hidden; color: black }

Die Seite oben.html verwendet nur die Stylesheets body und .zentriert. Die anderen Stylesheets brauchen wir für die Eingangsseite, die wir weiter unten erstellen werden und die die gleiche Stylesheet-Datei einbindet.

Das Inhaltsverzeichnis (inhalt.html)

Das Inhaltsverzeichnis besteht im Wesentlichen aus einer einzigen Definitionsliste. Die »zu definierenden Begriffe« sind die Dichter, die »Definitionen« sind die Gedichte.

Listing 7.4: inhalt.html

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inhaltsverzeichnis</title>
<!-- Stylesheets -->
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=StyleSheet type="text/css" href="gedichte_inhalt.css">
</head>


<body>
<dl>
<dt>Rilke</dt>
<dd><a href="rilke.html" target="hauptframe">Der Panther</a></dd>
<dt>&nbsp;</dt>
<dt>Fontane</dt>
<dd><a href="fontane.html" target="hauptframe">John Maynard</a></dd>
<dt>&nbsp;</dt>
<dt>Longfellow</dt>
<dd><a href="longfellow.html#excelsior"
target="hauptframe">Exelsior</a><br />
<a href="longfellow.html#paulrevere"
target="hauptframe">Paul Revere`s Ride</a></dd>
<dt>&nbsp;</dt>
<dt>Wang Wei</dt>
<dd><a href="wangwei.html" target="hauptframe">Abschied</a></dd>
<dt>&nbsp;</dt>
<dt>Du Fu</dt>
<dd><a href="dufu.html" target="hauptframe">Herbstliche Flöte</a></dd>
</dl>
</body>
</html>

Die Datei inhalt.html verwendet zur Formatierung ihre eigene externe Stylesheet-Datei.

Listing 7.5: gedichte_inhalt.css

body       { background-color: black; color: white; 
margin-left: 15px;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif }

a:link { color: #2071CC }
a:visited { color: #2071CC }
a:active { color: red }

Mit Hilfe der Stylesheets legen wir neben der zu verwendenden Schriftart und dem Abstand zum linken Rand vor allem die Farben fest. Neben Hintergrund- und Vordergrundfarbe definieren wir auch zum Hintergrund passende Hyperlinkfarben.

Die Webseiten für die Gedichte

Die Hyperlinks aus der Inhaltsseite laden die Webseiten der zugehörigen Dichter in den Hauptframe (und springen gegebenenfalls zu dem gewünschten Gedicht, wenn es zu einem Dichter mehrere Gedichte gibt).

Die Webseiten zu den Dichtern sind immer gleich aufgebaut und verwenden alle das gleiche externe Stylesheet.

Listing 7.6: wangwei.html - Beispiel für die Webseite zu einem Dichter

<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ABSCHIED</title>

<!-- Stylesheets -->
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=StyleSheet type="text/css" href="gedichte.css">
</head>


<body>

<h2>ABSCHIED</h2>

<div class="gedicht">
<p>Steig doch vom Pferd, komm, laß uns einen Becher leeren,<br />
Verrate mir, wohin die Reise geht!<br />
Du sagst, dir sei im Leben nichts gelungen,<br />
Nun kehrst du heim, am Rand des Südgebirges auszuruhn...<br />
So reite denn, ich will dich nicht mehr fragen,<br />
Die weißen Wolken steigen und vergehn dort ohne Unterlaß.</p>
</div>

<p class="dichter">Wang Wei</p>

</body>
</html>

Das Design dieser Webseiten wird durch die Stylesheets in gedichte.css vorgegeben.

Listing 7.7: gedichte.css

body       { background-color: white; color: black; 
margin-top: 25px; margin-left: 25px;
font-family: Arial, sans-serif;
font-size: 12pt }

div.gedicht { margin-left:35px }
p.dichter { margin-left:300px }

Über den body-Stil geben wir die Farben und die Schrift vor. Wichtig ist auch die Angabe der oberen und unteren Ränder, damit der Text der Webseiten vom Rand des Frames abgerückt wird.

Der Text der Gedichte soll etwas weiter eingerückt werden. Aus diesem Grund wird jedes Gedicht in <div>-Tags eingeschlossen (erforderlich, weil es auch Gedichte mit mehreren Strophen gibt) und mittels des Stylesheets div.gedicht eingerückt.

Am Ende des Gedichts steht der Name des Dichters, der mit Hilfe des Stylesheets p.dichter weit nach rechts eingerückt wird.

Die Eingangsseite (index.html)

Zu guter Letzt setzen wir noch eine Eingangsseite zu unserem Web auf (siehe Abbildung 7.3).

Abbildung 7.3:  Die Eingangsseite

Wir speichern diese Datei unter index.html, damit sie automatisch aufgerufen wird, wenn der Websurfer als Adresse lediglich das Verzeichnis des Webs angibt.

Gibt der Websurfer nur ein Zielverzeichnis an, sucht der Webserver in diesem Verzeichnis nach einer Datei index.html, index.htm oder default.html. Wie diese Standarddateien genau heißen müssen und in welcher Reihenfolge der Webserver nach ihnen sucht, hängt vom Webserver ab und kann gegebenenfalls beim zuständigen Webserver-Provider erfragt werden.

Damit die Eingangsseite mit unserem Web konsistent ist, verwenden wir für die Eingangsseite das gleiche Design (Stylesheet-Datei gedichte_eingang.css) und das gleiche Banner wie für unser Web.

Zur Unterstützung von Suchrobotern fügen wir die gleichen META-Tags wie auf der Frameseite ein. Den zugehörigen Textabschnitt, in dem die Stichwörter aus dem <head>- Abschnitt auftauchen, fügen wir am Ende der Seite als eigenen Absatz ein. Mit Hilfe des Stylesheets

#verborgen { visibility: hidden; color: black }

sorgen wir dafür, dass dieser Abschnitt nicht sichtbar ist (er dient ja nur zur Zufriedenstellung der Suchroboter). Wir setzen dazu die Stileigenschaft visibility auf hidden und passen die Vordergrundfarbe der Hintergrundfarbe an (für Browser, die Stileigenschaft visibility nicht unterstützen).

Listing 7.8: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Gedichte</title>
<!-- Suchmaschinen unterstützen -->
<meta name="language" content="de">
<meta lang="de" name="keywords" content="Gedichte,Rilke,Wang
Wei,Longfellow, Dufu, Fontane">
<meta name="description" content="Gedichtsammlung mit eigenen Werken
und Gedichten ausgewählter Dichter (Schwerpunkt auf alten
chinesischen Dichtern) ">
<meta name="revisit-after" content="30 days">
<meta name="robots" content="all">
<link rel="start" type="text/html" href="frame_seite.html"
title="Ausgewählte Gedichte">

<!-- Stylesheets -->
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel=StyleSheet type="text/css" href="gedichte_eingang.css">

<!-- Ein wenig dynamisches HTML mit JavaScript statt

<meta http-equiv="refresh" content="15; url="frame_seite.html">

-->

<script language="JavaScript">

function countdown()
{
if (document.formular.meincounter.value > 0)
{
document.formular.meincounter.value =
document.formular.meincounter.value-1;
Timer = setTimeout("countdown()", 1000);
}
else
location.href = "frame_seite.html";
}
</script>

</head>


<body onload="countdown()">

<div class="zentriert">

<img src="banner_a.gif" />
<p>Wahre Worte sind nicht schön,<br />
Schöne Worte sind nicht wahr.<br />
Tüchtigkeit überredet nicht,<br />
Überredung ist nicht tüchtig.</p>

<p class="dichter">Lao Tse</p>
<br />
<div id="zaehler">
<form name=formular>
Weiter in <input type="text" name="meincounter" size="2"
value="15"> Sekunden
</form>
</div>

<p id="verborgen">Gedichtesammlung mit ausgewählten Gedichten von Rilke, Wang Wei, Longfellow, Dufu und Fontane</p>

</body>
</html>

Statt eines Hyperlinks zur Hauptseite unseres Webs haben wir uns den Luxus einer kleinen Spielerei erlaubt und eine automatische Weiterschaltung eingerichtet. Allerdings haben wir dazu nicht das übliche META-Tag verwendet, denn dann könnte der Websurfer ohne einen zusätzlich einzufügenden Hinweistext gar nicht erkennen, dass er automatisch weitergeleitet wird und verzweifelt nach einem Link suchen. Stattdessen haben wir ein JavaScript-Skript eingerichtet, dass in Zusammenarbeit mit einem Text-Steuerelement einen Countdown erzeugt und am Ende des Countdowns für die Weiterleitung zur Hauptseite sorgt.

Sie brauchen das JavaScript-Skript nicht zu verstehen, betrachten Sie es einfach als Appetizer, der Ihnen Lust auf die nächste Woche machen soll.

7.2 Inspiration finden

Eine der Gründe für die Faszination des Internets ist seine anarchische Struktur und Zusammensetzung, die - bestenfalls - durch gewisse Höflichkeitsregeln eingeschränkt wird. Für Sie als Autor einer persönlichen Homepage bedeutet dies, dass Sie in der Wahl des Designs und des Inhalts Ihrer Webseiten völlig frei sind. Dies ist erfreulich und begrüßenswert, aber nicht unbedingt besonders hilfreich.

Stöbern Sie im Internet

Sofern Sie nicht schon eine klare Vorstellung vom Aufbau Ihrer persönlichen Homepage haben, nehmen Sie sich doch einfach ein wenig Zeit, um sich ins Internet einzuloggen und im WWW nach interessanten Homepages zu stöbern.

Adressen für private Homepages findet man in den Mitglieder-Verzeichnissen Ihrer Internet-Provider, über Suchmaschinen oder Freunde und Bekannte).

Abbildung 7.4:  Mit Frames realisierte, liebevoll aufgebaute, mittelständische Website

Notieren Sie sich, welche Elemente häufig in Homepages verwendet werden und wie die verschiedenen Webs und deren Seiten aufgebaut sind. Versuchen Sie Modetrends auszumachen und lassen Sie sich von den Ideen anderer inspirieren. Merken Sie sich, was Ihnen im Einzelnen gefallen und was Ihnen missfallen hat.

Lassen Sie sich den Quelltext der einzelnen Webseiten anzeigen und lernen Sie daraus. (Aber Vorsicht! Viele Webseiten sind noch in altem HTML-Code geschrieben.)

Abbildung 7.5:  Die Eingangsseite zur Website der Mailänder Scala

Abbildung 7.6:  Tunnelseite

Abbildung 7.7:  Eine Ansicht der Hauptseite

Urheberrecht im Internet

Wer sich nicht nur anregen lassen möchte, sondern Gefundenes am liebsten selbst verwenden möchten, der sollte beachten, dass es auch im Internet einen Urheberschutz gibt.

7.3 Todsünden des Webdesigns

Zum Abschluss habe ich noch eine Zusammenstellung von Fehlern, die Sie nicht machen sollten (wobei einige dieser Fehler tödlicher sind als andere):

  1. Ladezeit sehr groß, der Websurfer sieht nichts (Falls nicht vermeidbar: Ladeseite einfügen, vergleiche Website der Mailänder Scala, Abbildung 7.6)
  2. Werbebanner vor dem eigentlichen Inhalt
  3. Eingang in den eigentlichen Inhalt nicht zu finden
  4. Als erstes Formular ausfüllen, bevor es etwas zu sehen gibt.
  5. Zuviel Text auf der Startseite
  6. Durchgehende horizontale Linien zur Untergliederung einer Webseite
  7. Häufiger Wechsel der Schrift. Noch schlimmer: Wechsel der Schriftart in einem Absatz (Alternative: Hervorhebung von Textpassagen durch Schriftstil (Farbe, Kursiv, Fett) und nicht durch Schriftart.
  8. Verwendung von Leerzeichen und Leerzeilen für Einzüge (Alternative: margin, padding, text-indent)
  9. Aufdringliche Hintergrundbilder, die in den Vordergrund drängen (Alternative: das Hintergrundbild aufhellen (bei schwarzer Schrift) oder anderen Hintergrund wählen.
  10. Aliasing an Bildrändern
  11. Unnötiger Einsatz von Javascript basierten Links (siehe Kapitel 8.2)
  12. Unvermittelt neue Browserfenster öffnen lassen (Fensterdschungel)
  13. Nerviger Hintergrundsound, der endlos dudelt.
  14. Exzessiver Einsatz neuester Technologien, die auf den Systemen der meisten Websurfer nicht korrekt angezeigt werden können (Falls nicht vermeidbar: Links auf Website, wo man neuesten Browser oder Plug-In zur Unterstützung der betreffenden Technologien herunterladen kann)
  15. Keine Alternative zur Framedarstellung
  16. Zu viele Frames in einer Frame-Seite

7.4 Workshop

Heute gibt es keine Fragen und kein Quiz. Wer will kann die gewonnene Zeit nutzen, seiner Fantasie freien Lauf zu lassen und eine eigene Website zu kreieren.



vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


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