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.
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.
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,
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.
<!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.)
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.
<!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 besteht im Wesentlichen aus einer einzigen Definitionsliste. Die »zu definierenden Begriffe« sind die Dichter, die »Definitionen« sind die Gedichte.
<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> </dt>
<dt>Fontane</dt>
<dd><a href="fontane.html" target="hauptframe">John Maynard</a></dd>
<dt> </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> </dt>
<dt>Wang Wei</dt>
<dd><a href="wangwei.html" target="hauptframe">Abschied</a></dd>
<dt> </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 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.
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.
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).
<!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.
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.
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.7: Eine Ansicht der Hauptseite
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.
In Deutschland sind alle Werke (Bilder, Fotos, Schriftstücke) einer Person urheberrechtlich geschützt. Das gilt auch für eine gestaltete Homepage (Copyrightzeichen sind daher nicht nötig). Ideen und Informationen sind dagegen nicht automatisch geschützt. Wenn Sie also auf Ihrer Webseite irgendeine attraktive Idee umsetzen (der Mauszeiger verwandelt sich in eine Maus), dann kann jemand diese Idee aufnehmen und mit einer Katze nachprogrammieren
Reine Informationen, wie sie in der Presse gefunden werden können, sind nicht geschützt und könnten deshalb von jedem weiter verarbeitet werden, wenn er sie auf Ihrer Webseite findet. Datenbankinformationen sind dagegen wieder geschützt.
Auch Listen mit attraktiven Informationen, die Sie mühsam über Jahre gesammelt haben, sind geschützt. Da beginnt der Übergang zwischen Information und Datenbank. Eine lange Liste kann eine Datenbank darstellen und darf deshalb nicht einfach von einer fremdem Seite übernommen werden. Die beste Vorgehensweise, wenn Sie solche Listen verwenden wollen, ist immer noch, den Autor zu fragen. Der fühlt sich dann durch eine nett geschriebene Email meist geehrt und wird seine Einwilligung gerne geben.
Links zu Seiten, die in Deutschland verbotene Inhalte darstellen, sind äußerst kritisch zu beurteilen und wurden schon gerichtlich untersagt.
Wer schon einmal mit Frames programmiert hat, weiß, wie leicht man eine fremde Seite über einen externen Link in einen Frame der eigenen Website einblenden kann. Der eigentliche Inhaber der Webseite wird dies aber wohl kaum gut heißen, wenn Sie unter Ihrem Layout seine Seite mit einbinden. Zumal wenn er mit viel Geld seine Seite von einem Grafiker professionell hat erstellen lassen und das ganze teure Layout in Ihrem Frame nicht zur Geltung kommt.
Das deutsche Urheberecht gilt für geistige Werke nur bis 70 Jahre nach dem Tod des Autors. Ältere Inhalte können Sie entsprechend ohne Nachfrage publizieren.
Zum Abschluss habe ich noch eine Zusammenstellung von Fehlern, die Sie nicht machen sollten (wobei einige dieser Fehler tödlicher sind als andere):
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.
