Handbuch Webdesign: AllInOne

Wenn Sie im HTML-Code "c00lfont2u" als Schriftart vorgeben, und dann Ihre Seite auf einem Computer betrachten auf dem es keine Schriftart namens "c00lfont2u" gibt, dann wird statt dessen die Standardschriftart (Times) ver­wendet. Abbildung 17 zeigt die Standard-Schriftarten, die auf den Betriebssystemen Windows 95 und Mac OS 9 sicher installiert waren. Beachten Sie auch die Größen­unterschiede: Alle Schriftarten sind in der Größe 12 Punkt abgebildet, erscheinen aber verschieden groß. Diese Schriftarten sind also seit vielen Jahren im Web bekannt und gerne verwendet, weil sie seit vielen Jahren zur Verfügung stehen. Abbildung 18 zeigt eine aktuellere Statistik für die 800 Browser getestet wurden.

Aus dieser Statistik können Sie z.B. herauslesen, dass die Schrift "Haettenschweiler" auf 63% aller Computer installiert ist. Wenn man nur die Apple-Computern betrachtet sind es nur 13%, bei Linux-Rechnern nur 14%. (Auf Windows-Rechnern ist sie entsprechend häufiger um auf den Durchschnitt von 63% zu kommen). Es ist deswegen sinnvoll, nicht eine bestimmte Schriftart zu verlangen, sondern eine Liste von Schriftarten vorzugeben: wenn die erste Schriftart auf der Liste nicht installiert ist wird die zweite verwendet, dann die dritte,..... Abbildung 19 zeigt drei Beispiele für solche Listen.

 Verdana, Tahoma, Arial, Helvetica, sans-serif;
 "Times New Roman", Georgia, Times, serif;
 "Courier New", Courier, monospace;

Eine gute Sammlung von Links zum Thema Web-Typografie bietet Dr.Web's Weblog^[3]

Es gibt zwei unterschiedliche Methoden, Schriftarten in Webseiten einzubetten, so dass sie bei Bedarf herunter geladen und verwendet werden können. Um eine Schriftart in dieser Weise zu verwenden, brauchen Sie eine (meist kostenpflichtige) Lizenz. Ein Trick um den Einsatz von Fonts zu vermeiden ist das Ersetzen von Text (hauptsächlich Überschriften) durch Bilder mit Hilfe von Stylesheets.^[4]

[Bearbeiten] Nicht kontrollierbare Schriftgrößen

Als WebdesignerIn werden Sie nicht dafür bezahlt, den Zeilenumbruch zu erledigen. Das ist die Aufgabe des Browsers. Je nach Schriftgröße und zur Verfügung stehendem Platz im Browser-Fenster wird der Browser die Absätze geeignet in Zeilen umbrechen, wie in Abbildung 20 gezeigt.

Abbildung 20: Zeilenumbruch im Browser

[Bearbeiten] Unbekannte Lesereihenfolge

Wenn Ihre Website aus mehreren Webseiten besteht, haben Sie keine Kontrolle darüber, in welcher Reihenfolge diese Seiten gelesen werden. Ganz im Gegenteil: Web-LeserInnen gehen sehr selektiv vor, und navigieren sehr lange, bevor sie sich "zum Lesen niederlassen".

[Bearbeiten] Keine eindeutiger Eingang

Die LeserInnen "betreten" Ihre Site auch nicht durch die "Eingangstüre" - also über die von Ihnen definierte Hauptseite. In Abbildung 21 sehen Sie ein Beispiel.

Abbildung 21: Navigationsstruktur und Reales Navigationsverhalten

[Bearbeiten] Links und Lesereihenfolge

Die dicken Pfeile symbolisieren die Links, die zwischen den Seiten existieren. Die dünnen Pfeile symbolisieren den Weg, den eine bestimmte Leserin durch die Seite nimmt. Diesen Weg kann man aus dem Logfile des Servers rekonstruieren: Sie kommt von Google, wo Sie die "Seite 1" gefunden hat. Von dort navigiert sie zur "Hauptseite", und von dort weiter zu "Seite 5". Hier verlässt sie die Site wieder - vielleicht, indem Sie dreimal auf den "Zurück"-Button drückt um wieder zu ihren Suchergebnissen bei Google zu kommen, oder indem sie das Browserfenster schließt, oder indem sie eine neue URL eintippt, Im Logfile der Website ist das nicht mehr erkennbar. Die Hauptseite ist ein neuralgischer Punkt jeder Website - die zentrale Navigationsstelle. Die Gestaltung der Hauptseite ist also sehr wichtig. Ein "Deckblatt", oder eine "Intro-Seite" braucht eine Website hingegen nicht. Das ist eine Idee aus der Print-Welt, die am Web keinen Sinn macht.

[Bearbeiten] Verschiedene Zusatzprogramme und Plugins

Jeder Browser kann HTML und "reinen Text" darstellen. Falls der Browser Bilder darstellen kann, dann in den Formaten gif und jpg, eventuell auch png.

[Bearbeiten] Zusatz­programme

Alle anderen Formate (Word, CAD-Pläne, Audio und Video-Dateien, Flash, PDF, ...) können aber trotzdem im Web eingebunden werden. Der Browser kann Zusatzprogramme starten, um diese Formate darzustellen. Das ist technisch immer möglich, ob es sinnvoll ist, ist eine andere Frage. Spielen wir die Sinnfrage am Beispiel von Office-Dokumenten (Word, Excel, Access) durch.

• Nicht jede LeserIn hat Excel, Word und/oder Access auf ihrem Computer. z.B. Apple, z.B. Palm Pilot, z.B. Linux
• Office-Dokumente können Makro-Viren enthalten. Deswegen
• können Sie Probleme bekommen wenn Sie einen Virus verbreiten
• sind die Leute vielleicht nicht gewillt Office-Dokumente von Fremden entgegenzunehmen.
• Office-Dokumente sind meist sehr groß, jedenfalls größer als ein entsprechendes HTML-Dokument. Die längere Download-Zeit könnte Leute abschrecken.
• Office gibt es in vielen verschiedenen Versionen. Um möglichst viele Leute zu erreichen, muss man eine leicht veraltete Version (z.B. das Word-Format von Office 2003) anbieten.

Wenn Sie das alles bedenken, und dann zu dem Schluss kommen, dass es im konkreten Fall sinnvoll ist, z.B. ein Excel-Dokument in Ihre Website einzubauen, dann ist das technisch ganz einfach: Sie setzen einen Link zur Excel-Datei. Für verschiedene LeserInnen wird die Handhabung sich unterschiedlich darstellen:

1. Beispiel: Billy G. benutzt einen Windows-Rechner mit der neuesten Office-Version, um Ihre Seite anzusehen. Wenn er auf den Link klickt bekommt er eine Warnung mit dem ungefähren Inhalt: "Achtung, das könnte gefährlich sein". Wenn er trotzdem weitermacht, wird Excel gestartet und die Datei geöffnet.

2. Beispiel: Alyssa P. Hacker benutzt einen Linux-Rechner, dort gibt es kein Excel. Wenn Sie auf den Link klickt, erscheint ein Fenster "Unbekannte Datei, wollen Sie die Datei speichern". Sie kann die Datei so herunterladen und mit OpenOffice öffnen, oder auf Diskette zu einem Windows-Rechner tragen.

[Bearbeiten] Plugins

Ein Spezialfall von Zusatzprogrammen für Webbrowser sind Plugins. Diese übernehmen die Darstellung eines rechteckigen Bereiches innerhalb einer Webseite. Ein bekanntes Beispiel ist das Flash-Plugin zur Darstellung von swf-Dateien.

Abbildung 22: Plugin im Webbrowser und das Kontextmenü (beim Rechtsklick)

In Abbildung 22 wird das Rechteck am rechten Rand der Webseite nicht vom Webbrowser selbst, sondern vom Flash-Plugin dargestellt. Für die LeserIn ist das nicht erkennbar. Erst wenn sie/er die mit der rechten Maustaste in diesen Bereich klickt erscheint ein Flash-spezifisches Kontext-Menü, wie in der Abbildung rechts neben der Webseite gezeigt. Welche Verbreitung die verschiedenen Plugins haben, ist schwer zu sagen. Macromedia, die Firma die Flash herstellt, publiziert auf Ihrer Website eine Statistik laut der 97% aller Browser das Flash-Plugin benutzen (siehe Abbildung 23). Wenn man nach anderen Statistiken im Web sucht, kommt man aber zu ganz anderen Ergebnissen. Verschiedene Sites bieten Statistiken über die jeweils eigenen Zugriffe. Hier bilden sich die Vorlieben des jeweiligen Zielpublikums ab. Abbildung 24 zeigt zwei Statisiken von einer Forum-Site (sunniforum.com) im arabischen Raum, und einem Webcounter-Anbieter. Mit 51% bzw. 89% Anteil des Flash-Plugins findet man hier ganz andere, und widersprüchliche Zahlen. Es bleibt also bei jedem Projekt einzeln abzuwägen, ob Plugins für das Zielpublikum der Site sinnvoll sind oder nicht.

[Bearbeiten] Zusammenfassung

Wenn Sie in diesem Buch lernen, wie man Webseiten erstellt, sollten Sie dabei nie vergessen, dass Sie ihr Ausgabemedium, den Browser in dem Ihre Webseite schlussendlich dargestellt wird, nicht kontrollieren können, und dass dieses Ausgabemedium sehr vielfältig ist - genau so vielfältig wie die Menschen, die diese Programme benutzen. Ein paar mögliche Szenarien:

• Home-User in der 1.Welt, die viel Geld haben und sich aus Spaß am Computer immer die neueste Hardware leisten, immer die best-mögliche Internetanbindung haben, immer die neueste Software benutzen.
• Firmen-User, die mit dem Computer vorlieb nehmen müssen, den Ihnen die EDV-Abteilung zur Verfügung stellt. Das heißt selbst im Jahre 2006 vielleicht noch 1024x768 Auflösung, Windows XP, ein veralteter Browser und keine "Spass-Plugins" wie Flash.
• BesucherInnen von Internet-Cafés irgendwo auf diesem Globus, die weder Software noch Hardware kontrollieren, sondern verwenden müssen, was da ist. Und das ist vielleicht ein sieben Jahre alter PC mit ebenso alter Software.
• Blinde, die mit einem Text-To-Speech Programm oder einer Braille-Ausgabezeile im Web surfen, wie oben in Abbildung 4 gezeigt.
• Menschen mit Rot-Grün Blindheit, die zwar den Text und die Bilder sehen, aber nicht zwischen bestimmten Farben unterscheiden können.
• Menschen mit eingeschränkter Feinmotorik, die nur schwer mit einer Maus umgehen können.

und so weiter.

[Bearbeiten] XHTML

[Bearbeiten] Einleitung

Dieses Kapitel ist sehr trocken geschrieben, es handelt nur vom HTML-Code und den genauen Vorschriften, wie dieser Code zu schreiben ist. Verlieren Sie dabei nie aus dem Auge: es geht um die Gestaltung von Webseiten. Das Ergebnis der trockenen Arbeit mit dem Code ist immer eine Webseite. Hoffentlich eine lesbare, bunte, interessante Webseite – auch wenn der Code selbst Ihnen unleserlich, trist und uninteressant erscheinen mag. Den Code beherrschen heißt, durch ihn hindurch die lebendige Webseite sehen zu können.

Vielleicht erlernen Sie mit HTML zum ersten Mal so etwas Ähnliches wie eine Programmiersprache. Dazu gehört auch der Erwerb des Fachvokabulars: Tags, Attribute, Whitespace, Character Entities – diese Fachbegriffe müssen Sie verstehen und korrekt verwenden können.

[Bearbeiten] XHTML und HTML

Die Abkürzung HTML steht für "HyperText Markup Language". HTML wird vom World Wide Web Consortium standardisiert. 4.01 ist die letzte/höchste Version von HTML, nach dieser Version wurde von HTML auf XHTML umgestellt. XHTML ist zu XML kompatibel, deswegen das X am Anfang.

Es ist etwas schwieriger, korrektes XHTML zu schreiben als korrektes HTML, da die Schreibweise in HTML weniger genau geregelt ist. Die aktuellen Browser stellen sowohl HTML als auch XHTML dar. Wir werden XHTML verwenden, es aber einfach HTML nennen.

Die wichtigsten Prinzipien und die wichtigsten HTML-Tags (für Links, Bilder, Tabellen, Formulare) werden hier kurz vorgestellt. Alle Details können und sollen Sie bei selfhtml ^[5] oder in einem ähnlichen Referenzwerk nachschlagen. Sie sollten – wie bei allen Themen – parallel auch andere Quellen zu HTML konsultieren und die Aussagen in diesem Buch kritisch hinterfragen!

In diesem Kapitel wird nur der HTML-Code beschrieben, nicht das Erstellen von HTML-Dateien mit einem Programm, das nach dem "what you see is what you get" – Prinzip funktioniert. Sie können den HTML-Code mit jedem Text-Editor erstellen. Die HTML-Datei sollten Sie – auch während Sie die Datei noch erstellen und verändern – immer wieder in einem Browser betrachten und überprüfen, ob das Ergebnis Ihren Vorstellungen entspricht. Der Arbeitsablauf ist immer:

1. Code im Editor ändern
2. Datei im Editor abspeichern
3. in den Browser wechseln
4. Die Anzeige im Browser aktualisieren / neu laden

Und wieder zurück zu Punkt 1. So lange wiederholen, bis die Webseite fertig ist.

[Bearbeiten] Characterset

HTML-Dateien bestehen aus reinem Text, auch ASCII-Text genannt – so wie Dateien mit der Endung .txt.

Achtung: Erstellen Sie Ihren HTML-Code nicht mit dem Programm Wordpad unter Windows. Dieses Programm kann zwar ASCII-Text erzeugen, aber auch Dokumente im rtf-Format. Das kann zu dem in Abbildung 25 gezeigten Fehler führen:

Hier wurde der Text nicht (nur) mit HTML-Tags formatiert, sondern auch mit der von WordPad angebotenen Formatierungs-Leiste. Verwendet man diese, dann erscheint der Text zwar im Programm Wordpad größer / fett, im Browser sieht er dafür nicht mehr richtig aus.

Die korrekte Art, HTML zu speichern, ist entweder ANSI, auch bekannt als Format ISO 8859-1 (Latin-1). Das ist der traditionelle Computer-Zeichensatz ASCII, ergänzt um die in westeuropäischen Sprachen nötigen Zeichen wie die Umlaute üöä ÜÖÄ sowie ß é ñ. (Um ganz genau zu sein, wird seit Einführung des Euros und des €-Zeichens ISO 8859-15 (Latin-15) verwendet – das ist Latin-1, ergänzt um das Euro-Zeichen und ein paar Ligaturen für Französisch.) Unter Windows und Linux wird dieses Format standardmäßig verwendet, nur am Mac müssen Sie beim Speichern im TextEdit darauf achten, das richtige Format, nämlich ?Westeuropäisch (Windows Latin 1)? einzustellen.

Eine Alternative zu Latin-1 ist Unicode in der Variante utf-8. Das hat den Vorteil, dass Sie die Sonderzeichen verschiedener Sprachen in einem Dokument mischen können. Falls Sie Ihre HTML-Datei als utf8 speichern, müssen Sie das im Head der HTML-Datei angeben, siehe Tags für den Head.

[Bearbeiten] Zeichenreferenzen

Zeichenreferenzen (engl.: character entities) dienen dazu, bestimmte Zeichen darzustellen. Eine Zeichenreferenz hat immer die Form &entityname; Folgende Zeichenreferenzen müssen Sie verwenden:

Folgende Zeichenreferenzen müssen Sie nicht verwenden, Sie können das Zeichen auch direkt im HTML-Code eingeben. Die Schreibweise als Zeichenreferenz ist vielleicht praktisch, wenn Sie das Zeichen nicht auf Ihrer Tastatur finden können (z.b. auf einer englischen Tastatur).

Die Umlaute ü, Ü, ö und Ö funktionieren nach dem gleichen Prinzip wie ä und Ä.

[Bearbeiten] HTML-Tags

Die gewünschte Formatierung des Textes wird mit HTML-Tags angegeben.

• Tags sind zwischen spitzen Klammern ("kleiner" und "größer"-Zeichen) eingeschlossen.
• Zu (fast) jedem "Anfangs-Tag" gibt es einen "End-Tag", der sich nur durch einen Schrägstrich vom Anfangs-Tag unterscheidet. Z.B. <p>hier der Absatz</p>.
• "alleinstehende" Tags müssen in XHTML mit einem Schrägstrich am Ende geschrieben werden: <br /> (früher, in HTML, ging auch <br>)

Die wichtigsten Tags werden weiter unten noch vorgestellt. Welche Tags es gibt und was sie jeweils bewirken, ist im HTML-Standard festgelegt. Sie können nicht einfach einen neuen Tag erfinden.

[Bearbeiten] Whitespace

Sogenannter whitespace - das sind mehrere Leerzeichen, Tabulatoren und Zeilen­umbrüche hintereinander – wird vom Browser völlig ignoriert. Ob Sie also in Ihrer HTML-Datei ein Leerzeichen oder 7 Leerzeilen einfügen macht keinen Unterschied. Die beiden Dokumente werden vom Browser gleich dargestellt:

 <p>Halli Hallo</p>

 <p>
 Halli
 Hallo
 </p>

Abbildung 27: Zwei HTML-Dokumente die gleich dargestellt werden. Nur die Tags beeinflussen die Darstellung der Webseite. Sie müssen den Tag <br /> verwenden, um einen Zeilenumbruch auf der Webseite zu erzeugen – dies ist aber nur selten sinnvoll, da der Browser einen automatischen Zeilenumbruch durchführt.

[Bearbeiten] Attribute

Manche Tags können Attribute enthalten. Ein Beispiel ist der Tag <img>, der ein Bild in die Webseite einfügt (Englisch: Image). Die wichtigsten Attribute von <img> sind src (von Source = Quelle) und alt (Alternative Darstellung). (Ein häufiger Fehler ist es, scr statt src zu schreiben)

  <img src="neu.gif" alt="Das ist neu!" />

Es ist egal, in welcher Reihenfolge Sie die Attribute schreiben. Ebenso sind Zeilenumbrüche, Tabulatoren, Leerzeichen auch hier, innerhalb eines Tag ohne Auswirkung auf die Darstellung im Browser:

  <img alt="Das ist neu!" src="neu.gif" />
  <img 
 alt="Das ist Neu!" 
 src="neu.gif" 
 bli="bla, blu"
 />

Das Attribut bli, welches HTML nicht kennt, wird wie andere unbekannte Attribute vom Browser einfach ignoriert. Der Wert eines Attributes wird in Anführungszeichen geschrieben, auch Zahlen (das war in HTML noch nicht verpflichtend):

   <img alt="Das ist Neu!" src="neu.gif" 
 width="50" height="15" />

ACHTUNG: ein häufiger Fehler ist es, das zweite Anführungszeichen zu vergessen:

   <img alt="Das ist neu!"
 src="neu.gif><p>Text nach dem Bild, der "zufällig"   
   auch Anführungszeichen enthält – aber das kommt nicht immer vor. .</p>
   <p>Und noch mehr Text</p>

Wenn Sie, wie in Abbildung 28 gezeigt, das zweite Anführungszeichen vergessen, hat das enorme Auswirkungen auf die Darstellung der Webseite: der Browser sucht konsequent nach dem zweiten Anführungszeichen, wenn es sein muss bis zum Schluss des Dokuments. In diesem Beispiel findet er schon in der nächsten Zeile ein Anführungszeichen. Damit ist der Wert des Attributs beendet. Nun sucht der Browser noch nach der schließenden spitzen Klammer des img-Tags. Das Ergebnis ist, dass der Text gar nicht im Browser angezeigt wird.

[Bearbeiten] Kompatibilität

Neue Tags, die z.B. ein Browser nicht erkennt, sind zu ignorieren - es gibt keine Fehlermeldungen. Wenn das W3C in einer zukünftigen XHTML-Version 21 beispielsweise den neuen Tag <jump> (hüpfenden Text) einführt, können Sie diesen Tag auf Ihrer Webseite verwenden. Der Text wird jedoch nur in den neuesten Versionen der Browser (die schon XHTML 21 kennen) hüpfend dargestellt. In Netscape 6 oder MSIE 5 wird der Tag <jump> ignoriert:

Bevor Sie also einen neuen Tag einsetzen, sollten Sie sich darüber im Klaren sein, welche Versionen der Browser diesen Tag darstellen und wie viel Prozent Ihres Zielpublikums schon eine passende Browser-Version benutzen. Meist können Sie eine Seite so gestalten, dass auch mit älteren Browsern der gesamte Inhalt lesbar ist.

Das war eine Überlegung zur Kompatibilität der Browser. Auch Menschen sind nicht kompatibel: so sind ca. 9% aller Männer und ca. 0,8% aller Frauen rot-grün-blind^[6] - verwenden Sie also nicht den Farbunterschied zwischen rot und grün, um wichtige Information anzuzeigen.

[Bearbeiten] Text formatieren

Folgende Tags nennt man blockbildende Tags weil sie im Browser immer als rechteckige Fläche angezeigt werden, als "Block":

Da diese Tags nicht ineinander verschachtelt werden können ist der folgende Code nicht korrekt:

´ <h1><p>Absatz in der Überschrift</p></h1>

Es gibt keinen Absatz in der Überschrift. Entweder ein Stück Text ist ein Absatz, oder es ist eine Überschrift:

  <h1>Überschrift</h1>
  <p>Absatz</p>
  <p>noch ein Absatz</p>

Der Browser stellt zwischen den blockbildenden Tags jeweils einen Abstand dar. Dieser kann mit Stylesheets verändert, bzw. auf Null gesetzt werden. Im Browser Firefox kann man als zusätzliches Hilfsmittel die ?Web Developers Toolbar? installieren. Mit dieser Toolbar können Sie sich unter anderem die ?Blocks? der blockbildenden Elemente anzeigen lassen wie in Abbildung 31.

Format für kleinere Text-Abschnitte müssen Sie innerhalb eines Blocks verwenden, sie werden auch als inline-Tags bezeichnet:

Der <font>-Tag ist ein "altmodischer" Tag, der durch Stylesheets ersetzt wurde, und den Sie in neuen Dokumenten möglichst nicht verwenden sollten. Um alte Dokumente zu bearbeiten, müssen Sie diesen Tag aber kennen. Diese inline-Tags können ineinander verschachtelt werden:

   <p>Absatz mit 
   <b>fett und <i>fett-kursiv</i></b> ist in Ordnung </p>

Beim Verschachteln muss die Reihenfolge passen:

   <p>Absatz mit 
   <b>fett und <i>fett-kursiv</b></i> ist in Ordnung </p>

[Bearbeiten] Bilder

Wenn in einer Webseite Bilder verwendet werden, so sind diese jeweils als eigene Datei gespeichert. Enthält eine Webseite z.B. vier Bilder, dann besteht das ?Gesamtkunstwerk? aus fünf Dateien: einer HTML-Datei, und vier Bild-Dateien.

Wenn Sie die gesamte Webseite auf USB-Stick speichern und mitnehmen wollen, müssen Sie alle fünf Dateien mitnehmen! Falls die Bilder in einem Unter-Ordner gespeichert waren, muss auch diese Ordnerstruktur erhalten bleiben.

Noch ein Wort zur Größe von Bildern: Bei den Breiten- und Höhen-Angaben (width und height) sollten Sie immer die echte Größe des Bildes (gemessen in Pixel) angeben. Wieso? Betrachten wir die zwei möglichen Fälle:

• Bild ist in Wirklichkeit kleiner, width- und height-Angaben sind zu groß
• Bild ist in Wirklichkeit größer, width - und height-Angaben sind zu klein
  Größer dargestellt

Im ersten Fall wird das Bild im Browser nicht gut aussehen: in einem Bild, das zu groß dargestellt wird, werden die einzelnen Pixel sichtbar. Kompressions-Artefakte ? das sind Bildfehler, die durch die Kompression entstehen ? werden besser sichtbar. In Abbildung 33 sehen Sie typische jpeg-Artefakte rund um die Nase.

Abbildung 33: Ein Pixel-Bild wird auf 4-fache Breite und Höhe vergrößert

Im zweiten Fall (verkleinerte Darstellung) gibt es keine Probleme mit der Bildqualität, sondern mit der Übertragungszeit.

Das Bild in Abbildung 34 ist im Original 450x450 Pixel groß, und hat eine Dateigröße von 115KB. Diese 115KB müssen übertragen werden, auch wenn das Bild dann im Browser kleiner (z.B. 225x225 Pixel groß) dargestellt wird. Die Alternative wäre, das Bild im Grafikprogramm auf 225x225 Pixel zu verkleinern. Dabei wird auch die Dateigröße kleiner, in diesem konkreten Beispiel 35KB. Das ist ein Faktor 3 in der Dateigröße, und damit auch in der Download-Zeit. Der typische Arbeitsablauf ist also:

• Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
•  ?Beste? Version des Bildes archivieren
• Bild im Grafikprogramm auf die richtige Dimension und Format bringen
• Fertiges Bild in den Web-Ordner kopieren
• <img>-Tag in das HTML-Dokument einfügen.

Das Bild wird wie ein Wort im Text behandelt, und kann nicht frei auf der Webseite positioniert werden. Später lernen Sie verschiedene Methoden kennen, wie man Text und Bild mittels Tabellen oder Ebenen doch noch positionieren kann. Bis dahin gilt: Wenn Sie das Bild wie in Abbildung 35 mitten in einen Absatz hinein setzen, ergibt das meist ein sehr hässliches Layout.

Abbildung 35: Bild mitten im Absatz

Besser ist es, das Bild in einen eigenen Absatz zu setzten, und den Absatz dann z.B. zu zentrieren:

Als Bildformate für Webseiten können nur Pixel-Formate verwendet werden:

Es kann jedes Bild in allen drei Formaten gespeichert werden. Ideal wäre, das Format auszuwählen, in dem das Bild nichts an Qualität verliert, und die Dateigröße möglichst gering ist. Der vorher beschriebene Arbeitsablauf kann also weiter verfeinert werden

• Bild erstellen oder einspielen (Scannen, von Digitalkamera, etc)
• Das Ergebnis, ein Bild mit hoher Auflösung + Dateigröße,
  Format z.B. tiff oder jpg mit geringer Kompression archivieren
• Bild im Grafikprogramm auf die richtige Dimension und Format bringen;
  Ergebnis: Bild im Format gif, jpg, png, Dateigröße möglichst klein (=web-tauglich).
• Fertiges Bild in den Web-Ordner kopieren
• <img>-Tag in das HTML-Dokument einfügen

Das Ergebnis ist ein web-taugliches Bild im richtigen Ordner.

[Bearbeiten] Links + Anker

Das Web heißt Web, weil es wie ein Spinnennetz ist ? die Stränge dieses metaphorischen Netzes sind die Hyperlinks. Links im Web sind unidirektional, sie funktionieren nur in eine Richtung. Sie können von Ihrer Seite zur ORF-Seite einen Link machen, Sie können nicht von der ORF-Seite zu Ihrer Seite einen Link machen. Bevor Sie einen Link setzen, müssen Sie sich über zwei Dinge klar werden:

1. Welcher Text auf Ihrer Webseite soll anklickbar sein?
2. Wohin soll der Link führen (URL)?

Alle Links auf einer Seite sind gleich gestaltet, normalerweise sind sie alle blau und unterstrichen. Mit Stylesheets können Sie diese Gestaltung ändern.

Stilistischer Tipp: Vermeiden Sie Formulierungen wie ?Klicken Sie hier, um zu Yahoo zu gelangen?. Die LeserInnen Ihrer Seite wissen, wie ein Link zu bedienen ist. Schreiben Sie einfach zuerst einen ganz normalen Satz, und verwandeln Sie dann ein geeignetes Wort in einen Link. Z.B. ?Ich empfehle Yahoo als Internet-Verzeichnis?.

Das zweite Beispiel in Tabelle 5 zeigt eine sogenannte "relative URL". Sie beginnt nicht mit http:// oder mailto:. Der Browser verwendet die URL des Dokuments, in dem sich der Link befindet, um die vollständige, "absolute URL" für den Link zu berechnen, wie in Abbildung 37 gezeigt.

Das Prinzip hinter relativen und absoluten URLs kennen Sie vielleicht schon von relativen und absoluten Pfadangaben. Relative URLs können auch Ordnernamen enthalten, und den speziellen Ordnernamen .. für den übergeordneten Ordner.

Die Verwendung von relativen URLs bringt folgenden Vorteil mit sich: Wenn die Website auf eine neue Adresse übersiedelt wird, funktionieren alle Links ohne Änderung weiterhin, wie Abbildung 39 zeigt.

Statt des Textes kann bei einem Link auch ein Bild stehen, Abbildung 40 zeigt den dazu notwendigen Code.

  <a href="home.htm">
  <img src="home.gif" alt="zurück zur Homepage" />
  </a>

Bei der Verwendung von Bildern als Link ist das alt-Attribut des Bildes besonders wichtig, um das Navigieren zu ermöglichen, falls das Bild nicht angezeigt werden kann, wie in Abbildung 41 gezeigt.

Noch ein stilistischer Tipp: Wenn Sie einen Link setzen, dann nutzen Sie die Chance, wirklich genau zu dem Dokument zu linken, das Sie referenzieren wollen. Ein Beispiel soll dies verdeutlichen: Wenn Sie zu einem bestimmten Artikel im Sport-Teil der Salzburger Nachrichten vom 1. April 2005 linken wollen, dann suchen Sie genau diesen Artikel aus der Website der Salzburger Nachrichten heraus, und verwenden Sie die URL dieses Dokuments für den Link.

Nur bei wenigen ? besonders schlecht gestalteten ? Webseiten geht das nicht weil Frames verwendet werden und das einzelne Dokument keine eigene URL hat. Websites die mit Frames gestaltet sind vergeben so also die Chance verlinkt zu werden und schmälern damit wiederum ihren PageRank bei Google, und die Chance gefunden zu werden.

[Bearbeiten] Anker

Sie können innerhalb der Webseite sogenannte ?Anker? setzen, die dann gezielt angesprungen werden können. Das ist besonders bei längeren Webseiten sinnvoll. Die ?Anker? heißen auf englisch ?Anchor? ? daher kommt auch der html-tag <a>. In deutschsprachigen Programmen wurden sie sehr unterschiedlich über­setzt ? z.B. heißen sie im deutschen Frontpage ?Text­marken?. So sieht ein Link zu einem Anker aus:

   <a href="#Bild1">das erste Bild</a>

So sieht der entsprechende Anker aus:

   <a name="Bild1"></a>

Wenn Sie wissen, dass in einer Seite draußen am Web ein Anker vorkommt, dann können Sie gezielt einen Link zu diesem Anker hin setzten: z.B. in der Seite http://webwelt.horus.at/html/forms/home.htmlgibt es einen Anker namens Beispiele. Die URL, die zum Anker zeigt ist: http://webwelt.horus.at/html/forms/home.html#Beispiele

[Bearbeiten] Gesamt-Struktur einer Webseite

Mit den bisher gezeigten HTML-Tags können Sie Webseiten erstellen, die von den meisten Browsern angezeigt werden. Diese Webseiten entsprechen aber noch nicht dem HTML-Standard. Eine korrekte HTML Seite enthält zusätzlich noch folgendes Grundgerüst.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
 <title>Titel der Seite</title>
 </head>
 <body>
 Hier die Tags die Sie schon kennen
 </body>
 </html>

Der <!DOCTYPE>-Tag muss ganz am Anfang stehen. Er gibt die Versionsnummer des verwendeten HTML-Standards an ? in diesem Fall XHTML 1.0. Der Rest des Dokuments befindet sich innerhalb des <html>-Tags. Innerhalb des <html>-Tags befindet sich genau ein <head> und genau ein <body>, es sind keine Wiederholungen erlaubt. Der <head> enthält Informationen über die Seite, aber keine direkt sichtbaren Elemente (siehe auch Kapitel 2.10). Der <body> enthält den eigentlichen Inhalt der Webseite. Alle bisher vorgestellten Tags sind nur innerhalb des <body> zu verwenden.

[Bearbeiten] Tags für den Head

Der <title>-Tag ist der wichtigste Tag im Head. Abbildung 43 zeigt das Ergebnis einer Abfrage in einer Suchmaschine. Woher kommt der Text, der hier angezeigt wird?

Die Suchmaschine liest den Titel und die Beschreibung aus der HTML-Seite aus:

 <title>Kurs Internet Seitengestaltung ? Wifi Salzburg, März 1999</title>
 <meta name="description"
       content="Projektarbeiten Aus dem Kurs Internet Seitengestaltung am Wifi Salzburg im März 1999." />
 <meta name="keywords" 
       content="HTML, Kurs, Webdesign, Webdesigner, Salzburg" />

Da die Meta-Keyword Tags sehr stark missbraucht wurden (irreführende keywords, z.B. Namen der Konkurrenzfirmen), werden sie seit dem Jahr 2002 von den meisten Suchmaschinen ignoriert.^[7]

Der Titel (<title>-Tag) einer Webseite ist weiterhin wichtig. Er wird auch für Favoriten/Lesezeichen verwendet. Der Titel muß also auch ohne die Seite verständlich sein. Achtung: Jede Seite sollte einen anderen Titel haben! Oft findet eine Suchmaschine mehrere Seiten einer Site, wenn alle denselben Titel haben kann man sie nicht unterscheiden.

Der <meta>-Tag hat noch verschiedene andere Anwendungsgebiete. So wird der <meta>-Tag dafür verwendet, das Characterset des Dokuments bekannt zu geben:

 <meta http-equiv="Content-Type" 
 content="text/html; charset=iso-8859-1" />

Eine Alternative zu iso-8859-1 wäre Unicode in der Variante utf8:

 <meta http-equiv="Content-Type" 
 content="text/html; charset=utf8" />

Die Angabe muss natürlich mit dem wirklich verwendeten Characterset (siehe Kapitel 2.1) übereinstimmen. Unicode/utf8 müssen Sie immer dann verwenden, wenn Sie Sprachen mit verschiedenen Zeichensätzen mischen, also z.B. auf ein und derselben Webseite sowohl Deutsch (westeuropäisch) als auch Polnisch (osteuropäisch) als auch Russisch (kyrillisch) verwenden. Wenn Sie nur westeuropäische Sprachen und Namen verwenden ist iso-8859-1 zu empfehlen, das spart ein paar Byte an Daten.

[Bearbeiten] Tabellen

Um eine Tabelle zu erzeugen müssen Sie die Tags <table>, <tr> und <td> richtig ineinander verschachteln.

<table border="1">
    <tr>    
      <td>Freitag</td>    
      <td>Samstag</td>    
      <td>Sonntag</td>
    </tr>
    <tr>    
      <td>lernen</td>   
      <td>lernen</td>    
      <td>lange schlafen</td>
    </tr>
</table>

Normalerweise hat eine Tabelle ein ganz regelmäßiges rechteckiges Gitternetz . Man kann auch nebeneinander liegende Zellen verbinden. Dies erreicht man mit dem Attribut colspan bzw. rowspan des <td>-Tags.

HTML-Tabellen wurden früher in Webseiten auch für das Layout der Seite verwendet, heute verwendet man für das Layout CSS-Stylesheets.

[Bearbeiten] Farben und Hintergrundbilder

Farben und Hintergrundbilder werden in XHTML mit Stylesheet gesetzt. (Nicht mehr wie in HTML mit Attributen des body-Tags oder dem <font>-Tag.). Mehr über Stylesheets erfahren Sie im Kapitel 3.

Tabelle 6: Farben und Hintergrundbilder im Stylesheets

In Webseiten erfolgte die Farb-Angaben früher mit einem Hexadezimalen r,g,b-Code. Dabei wird die Intensität von rot, grün und blau in hexadezimaler Schreibweise zwischen 00 (minimum) und FF (maximum) angegeben. (z.B. #000000 für schwarz, #FFFFFF für Weiss, #FF0000 für reines Rot, #00FF00 für reines Grün, #0000FF für reines Blau). In Stylesheets kann man statt dessen auch die Schreibweise rgb(10,2,120) verweden, um 10 Teile rot, 2 Teile grün und 120 Teile blau zu mischen. Jeder der drei Zahlen kann zwischen 0 und 255 sein. Für einige Farben kann man die englischen Farbwörter wie red, blue, black verwenden. In einem Webeditor wie Dreamweaver wäre die Farbauswahl etwas einfacher, wie in Abbildung 45 gezeigt.

Als ?Hintergrundbild? in einer Webseite kann jedes Bild in einem Web-geeigneten Dateiformat (gif, jpg, png) dienen. Das Bild wird ?gekachelt? ? es wird horizontal und vertikal so oft wiederholt, bis es die ganze Seite ausfüllt. In Abbildung 46 wurde ein Bild mit drei Zahnrädern als Hintergrundbild verwendet, durch die Wiederholung werden sieben Zahnräder angezeigt.

Bitte beachten Sie: Der Inhalt der Seite sollte trotz Hintergrundbild immer noch lesbar sein! Im Beispiel in Abbildung 46 ist eine Linkfarbe zu hell bzw. das Hintergrundbild zu auffällig: Der Text ?wurde schon besucht? in der letzten Zeile ist kaum noch lesbar.

[Bearbeiten] Zusammenfassung

Sie haben den HTML-Code kennen gelernt. Und Sie haben mit diesem Code Ihre ersten Webseiten erstellt. Gratuliere! Im nächsten Schritt werden Sie noch wesentlich mehr Gestaltungsmöglichkeiten an die Hand bekommen, wenn Sie Stylesheets kennen lernen.

[Bearbeiten] CSS

[Bearbeiten] Einleitung

Stylesheets sind vielleicht das wichtigste Werkzeug für Webdesigner. Mit Stylesheets (auch Formatvorlagen, oder CSS genannt) können Sie Ihre Gestaltungsmöglichkeiten von Webseiten wesentlich erweitern. Aber: Um CSS verwenden zu können müssen Sie den HTML-Code Ihrer Webseite verstehen.

Wenn Sie an grösseren Websites mit vielen einzelnen Seiten arbeiten bieten Ihnen Stylesheets die Möglichkeit die Seiten einheitlich zu gestalten, und die Gestaltung von der Inhaltlichen Redaktion zu trennen. Das Stylesheet wird dabei von der DesignerIn erstellt, die HTML-Seiten von den ProgrammiererInnen oder RedakteurInnen.

Wenn dies Ihre erste Begegnung mit Stylesheets ist, können Sie die Kapitel Klassen, IDs und Layout mit Stylesheets überspringen, und diese Details später lernen.

[Bearbeiten] Geschichte

Von Anfang an sollte eine HTML-Datei keine Information darüber enthalten, wie der Text dargestellt werden soll - keine Schriftart oder Schriftgröße. HTML sollte nur strukturelle Information enthalten (das ist eine Überschrift, aber nicht Arial 24pt). Die Formatierungs-Information sollte in sogenannten Stylesheets gespeichert werden, das Format für die Stylesheets war aber noch nicht definiert. Im Jahre 1993 sah eine typische Webseite so aus

 <html><body>
 <h1>Das Studium</h1>
 <p>Studienziel ist es, breit gefächerte technische 
 und wirtschaftliche Kompetenzen...
 </body></html>

Da es keine Stylesheets gab erfand die Firma Netscape ab 1994 zusätzliche HTML-Tags:

<html><body>
<h1><font face="Arial" color="blue">Das Studium</font></h1>
<p><font size="+1">S</font>tudienziel ist es, 
breit gefächerte technische und wirtschaftliche Kompetenzen...
</body></html>

Ab 1995 wurde endlich an den Standards für Stylesheets gearbeitet. In den Browsern war die Unterstützung für Stylesheets ab den Versionen Internet Explorer 3.0 (Juli 1996), Netscape 4.0 (Feb 1997), und Opera 3.5 (Juli 98) zu finden. Eine Webseite mit CSS (Cascading Style Sheets) zeigt Abbildung 47.

Abbildung 47: HTML-Datei und dazugehöriges Stylesheet

Wozu der ganze Aufwand? Stellen Sie sich vor, sie betreuen 1000 Webseiten mit je 20 Absätzen und erhalten den Auftrag: Ändern Sie die Schriftart der Webseiten.

Ohne Stylesheets bedeutet das: in 1000 html-Dateien alle <font>-Tags suchen, und dort die Schriftart ersetzen. Mit Stylesheets bedeutet es: in einer Datei, der Stylesheet-Datei, eine Zeile ersetzen.

[Bearbeiten] Stand der Technik

Die neueren Browser-Versionen (ab Internet Explorer 5.5, Mozilla 1.7, Netscape 6.0) unterstützen CSS1.0 und einen Teil von CSS2.0. Der letzte Browser, der ernste Probleme machte, war Netscape 4.7. Er unterstützte Teile von CSS1.0, stellte sie aber teilweise falsch dar. Netscape 4.7 ist aber ca. 2004 vom Markt verschwunden (hatte damals weniger als 3 % Marktanteil^[8]) kann also heute getrost ignoriert werden.

[Bearbeiten] Unsere erste CSS-Anweisung

Noch sieht alles schwarz-weiß aus. Aber das kann sich ändern. Nun sagen wir dem Browser, dass der Text im Absatz fett und blau sein soll:

[Bearbeiten] html

<p>Hallo Welt!</p>

[Bearbeiten] css-Anweisung

p {color: blue; font-weight: bold;}

Das sieht dann so aus:

[Bearbeiten] Syntax von Stylesheets im Detail

CSS-Anweisungen setzen sich aus dem Selektor, der die gewünschten Elemente selektiert (auswählt) und einer Eigenschaft sowie dem ihr zugewiesenen Wert zusammen:

/* einzeilig */
selektor {eigenschaft: wert;}

/* mehrzeilig */
selektor {
  eigenschaft_1: wert;
  eigenschaft_2: wert;
  eigenschaft_3: wert;
  …
  eigenschaft_x: wert;
}

Beispiele dazu:

p {text-align: justify;}
h1,h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: lightblue;
}
body {
    margin-left: 150px;
    background-color: white;
} 

Was bedeuten diese Stylesheet-Anweisungen?

Erster Absatz: Normale Text-Absätze sind im Blocksatz darzustellen.

Zweiter Absatz: Die Tags <h1> und <h2> aus dem HTML-Document sollen mit der Schriftart Arial dargestellt werden, wenn diese Schriftart nicht vorhanden ist, mit Helvetica, wenn die nicht vorhanden ist mit irgendeiner serifenlosen Schrift. Außerdem soll die Schrift in hellblauer Farbe dargestellt werden.

Dritter Absatz: Die gesamte Seite (<body>) soll links um 150 Pixel eingerückt werden, die Hintergrundfarbe der Seite ist weiß.

[Bearbeiten] Was kann man stylen?

Man kann jeden HTML-Tag (html, body, div, p, h3, table, ul …) via Stylesheet beeinflussen. Will man noch genauer arbeiten, muß man Klassen oder IDs definieren

Welche Formatierungsanweisungen es gibt können Sie in selfhtml nachschlagen; im Folgenden werden wir die wichtigsten behandeln.

[Bearbeiten] CSS-Kommentare

Bei umfangreicheren Stylesheets ist es durchaus vorteilhaft, Kommentare einzufügen. Damit fällt es später leichter, nachzuvollziehen, was man mit der jeweiligen Anweisung beabsichtigt hat. Kommentare können außerhalb und innerhalb der geschweiften Klammer stehen:

body {
 // einzeiliger Kommentar
 background-color:white;
 color:black;
}

body {
 background-color: /* einzeiliger Kommentar, der auch mitten in der Zeile stehen kann */ white;
 color:black;
}

/*
ein Kommentar, der über
mehrere Zeilen geht und
natürlich auch sehr 
interessant ist
*/

Sehr praktisch kann man Kommentare auch dazu verwenden, bestimmte Anweisungen innerhalb eines Stylesheets auszukommentieren! So können kurzfristig Stylesheet-Anweisungen deaktiviert werden:

body {
 background:white;
 color:black;
 /* border:1px solid red; */
}

[Bearbeiten] Verbindung zwischen HTML und CSS

Es gibt drei unterschiedliche Arten, CSS-Informationen in (x)HTML-Dateien einzubinden:

[Bearbeiten] externe Stylesheets

Will man, dass mehrere HTML-Seiten gleich aussehen, sollte man ein externes Stylesheet verwenden. Ändert man in diesem Stylesheet etwas, hat dies unmittelbar Einfluß auf alle damit verknüpften HTML-Dateien. Die Datei muß mit der Datei-Endung .css (demostyle.css) gespeichert werden, damit sie von den Browsern als Stylesheet erkannt wird. Sie wird im <head>-bereich der jeweiligen HTML-datei folgendermaßen eingebunden:

<head>
 ...
   <link rel="stylesheet" type="text/css" href="pfadZumStyle/mystyle.css" media="all"/>
 ...
</head>

[Bearbeiten] interne Stylesheets

Interne Stylesheet haben 2 wichtige Anwendungsgebiete:

1. die Stylesheet-Informationen beziehen sich nur auf ein HTML-Dokument
2. das HTML-Dokument nutzt Informationen des externen Stylesheets, man möchte jedoch für dieses spezielle Dokument andere CSS-Einstellungen verwenden als für die restlichen Dokumente
   1. beispielsweise könnten auf einer Website alle Dokumente mit weißem Hintergrund dargestellt werden - nur ein Dokument soll einen roten Hintergrund erhalten; dies könnte man gut mit einem internen Stylesheet erreichen, in dem nur für die Hintergrundfarbe ein neuer Wert angegeben ist…

interne Stylesheets werden folgendermaßen im <head>-bereich der jeweiligen HTML-datei eingebunden:

<head>
 ...
   <style type="text/css" media="all">
     body {color:#000;background:#fff;font:0.8em/1.4 "Lucida Grande",Verdana,Sans-Serif;}
     ...
   </style>
 ...
</head>

[Bearbeiten] Inline-Stylesheets

Style Angaben können auch direkt zu einem bestimmten Tag innerhalb des body geschrieben werden. In diesem Fall gilt die Angabe nur für diesen ganz speziellen Tag: dazu müssen Sie innerhalb des Tags das Attribut style verwenden. Die einzelnen Formatanweisung folgen dann als Wert dieses Attributes. Sie können beliebig viele Formatanweisung angeben. Diese Werte werden in derselben Form geschrieben, wie Sie es auch in einer Datei oder im head-Bereich der Datei innerhalb der geschwungenen Klammer angeben würden.

 <h1 style="color:red; text-align:center;">Rote, zentrierte Überschrift </h1>

Vorsicht! Diese Art, CSS direkt in einen bestimmten Tag einzubinden, sollte nur ganz selten gemacht werden! Sie widerspricht der Forderung, Inhalt und Aussehen möglichst voneinander zu trennen und somit die HTML-Seiten einfach pflegbar zu machen. Stellen Sie sich vor, Sie haben in 100 Dokumenten innerhalb diverser Tags eine Farbangabe gemacht; jetzt wollen Sie die Farbe ändern und sind deswegen gezwungen alle Dokumente zu öffnen und zu durchsuchen – keine angenehme Art, sich die Zeit zu vertreiben!

[Bearbeiten] Die Cascade

Wie gerade gesehen, können Sie also auf drei Arten Style-Anweisungen in eine HTML-Datei einbinden. Was passiert nun, wenn sich die verschiedenen Style Angeben widersprechen?

Dann tritt das ein, was den Cascading Stylesheets ihren Namen gegeben hat: Die Cascade, die festlegt, welcher CSS-Befehl Vorrang vor einem anderen hat:

1. Die Angaben in einem einzelnen Tag haben immer Vorrang.
2. Danach folgen die lokalen Angaben im head-Bereich
3. und erst zum Schluss die externe Datei.

Nach diesem Einblick in die Syntax von CSS können wir nun erste Anwendungsbeispiele verstehen.

[Bearbeiten] Vererbung

Wie ein Kind von seinen Eltern bestimmte Eigenschaften erben kann, können auch HTML-Elemente Eigenschaften von übergeordneten Elementen übernehmen. Dazu ein Beispiel:

CSS-Angabe:

body {
 font-family:Georgia;
 font-size:1em;
 color:red;
}

HTML-Code (Ausschnitt):

<body>
 <p>ein ganz normaler Paragraph</p>
 <ol>
   <li>Listeneintrag</li>
   <li>Listeneintrag</li>
 </ol>
 <table border="1">
   <tr>
     <td>Typ</td>
     <td>Jahrgang</td>
     <td>Datum</td>
   </tr>
   <tr>
     <td>Brompton</td>
     <td>1997</td>
     <td>20.3.2007</td>
   </tr>
 </table>
 </body>

So schaut es aus:

Die Angaben zu Schrift (Georgia), Schriftgröße (1em) und Farben (red) wurden nur bei body gemacht! Weil aber alle (sichtbaren) Elemente einer HTML-Datei innerhalb des <body>-Tags stehen müssen, erben diese folglich die CSS-Eigenschaften, die man bei body angegeben hat... Will man aber z.B. der Überschrift eine andere Farbe geben, muß man dies explizit machen:

h3 {color:blue;}

* {margin:0;padding:0;border:none;}

[Bearbeiten] Texte und Farben mit Stylesheets

In diesem Kapitel lernen Sie die wichtigsten Formatierungs-Anweisungen von CSS für Schriftarten, Absätze, Links und Farben kennen. Dabei wird immer wieder das selbe HTML-Dokument verwendet, der Code ist hier abgebildet.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
 <link rel="stylesheet" type="text/css" href="style.css" media="all"/>
 <title>Titel der Seite</title>
</head>
<body>
 <p>dieser Paragraph wird via CSS geändert!</p>
</body>
</html>

[Bearbeiten] Schriftfamilie, Schriftgröße

Zuerst wollen wir die Schriften im Dokument festlegen: Eine mit Serifen für den Fließtext und eine serifenlose Schrift für Überschriften:

1. body {
2.   font-family: Georgia,Times,serif;
3.   font-size: 0.9em;
4. }
5. h1,h2 {
6.   font-family:"Trebuchet MS",Verdana,Arial;
7. }
8. h1 { font-size: 180%; }
9. h2 { font-size: 150%; }

In Zeile 1 bis 4 von Listing 2 werden zwei Anweisungen für alle Elemente innerhalb des <body>-Tags gegeben: die Schriftfamilie in Zeile 2 und die Schriftgröße in Zeile 3. Bei Schriftfamilien gilt es, wie in Kapitel 1.2.4 beschrieben, die Einschränkungen des Web zu beachten. In Zeile 2 werden mehrere Schriften angegeben, diese Liste wird vom Browser von links nach rechts abgearbeitet, die erste Schrift die er findet verwendet er. Vergleichen Sie Zeile 2 mit Zeile 6: Schriftnamen die ein Leerzeichen enthalten müssen in Anführungszeichen gesetzt werden, so wie Trebuchet MS in Zeile 6.

Das letzte Wort in Zeile 2 serif ist ein CSS-Kürzel für irgendeine Serifen-Schrift. Es empfiehlt sich am Ende einer Schriftliste ein solches Kürzel als Standardwert wenn alle Stricke reißen anzugeben, links sehen Sie eine Liste der in CSS1 angebotenen Kürzel.

Die Schriftgrößen-Angabe in Zeile 3 verwendet Ems als Maßeinheit. Alternativ wäre auch eine Angabe in Punkt (pt), Pica (pc), Inch (in), Millimeter (mm), Zentimeter (cm), Pixel (px), iX-Höhe der aktuellen Schrift (ex), Prozent (%).

Viele dieser Maßangaben kommen aus dem Druck-Bereich und machen eigentlich am Bildschirm keinen Sinn… sinnvolle Maßangaben sind: px (dazu mehr etwas weiter unten), em (vielleicht die beste Maßeinheit) und %;

Ausserdem gibt es für Schriftgrößen sieben Standardgrößen: xx-small, x-small, small, medium, large, x-large, xx-large und die relativen Angaben smaller und larger.

Zum Thema Schriftgrößen gibt es verschiedene Ansichten:

Da Webseiten hauptsächlich auf Bildschirmen gelesen werden kann man argumentieren, dass das Pixel die natürliche Maßeinheit auf Webseiten ist. Wenn Sie gif, jpg oder png-Bilder in Ihrer Webseite verwenden ist die Breite und Höhe der Bilder in Pixel fix. Pixel auch als Größe für Schrift macht es einfach die Größenverhältnisse von Bild und Schrift zu fixieren.

Gibt man die Schriftgrößen in Pixel (px) an, hat dies den großen Nachteil, dass Benutzer, die mit dem Internet Explorer 5 oder 6 die Website betrachten, die Schriftgröße nicht ändern können! – aus diesem Grund sollte man diese Maßeinheit so lange nicht verwenden, bis der Internet Explorer 7 auf der Mehrzahl von Windows-Rechnern installiert ist (oder man die Leute davon überzeugt hat, dass es viele sehr viel bessere Browser gibt ;-))

Eine andere Position lautet: Bildschirme und Displays sind sehr unterschiedlich groß; Leserinnen und Leser haben sehr unterschiedliche Sehstärken und -schwächen. Deswegen muss das Verändern der Schriftgröße in der Hand der LeserIn bleiben. In einem Browser wie Firefox geht das ja auch bequem mit einem Tastendruck.

Wenn nun die LeserIn die Schriftgröße ändert, sollte diese Veränderung alle Schriften auf der Webseite betreffen: Fließtest, Überschrifen, Aufzählungen, etc. Dabei könnte das Layout und die Bilder auf der Seite entweder fix bleiben oder sich ebenfalls vergrößern oder verkleinern (falls deren Breite und Höhe ebenfalls in Ems oder Prozent angegeben sind!)

[Bearbeiten] Absätze

Betrachten wir als nächstes den Absatz. Wie immer in HTML erfolgt der Zeilenumbruch automatisch. Mit CSS können Sie verschiedene Aspekte des Absatz-Layoutes steuern:

p {text-align:right;}

text-align verändert die Ausrichtung des Texts im Absatz: left, right, center oder justify (Blocksatz).

[Bearbeiten] Farbangaben

Text – aber auch Rahmenkanten – können via CSS eingefärbt werden. Dazu gibt es gleich mehrere Möglichkeiten:

[Bearbeiten] reservierte Farbnamen

Es gibt eine lange Liste mit Farbnamen, die (angeblich) die meisten Browser erkennen. Dies ist jedoch nicht sehr zuverlässig! Will man genau einen bestimmten Farbton angeben, sollte man diesen in RGB-Werten oder Hexadezimal-Werten angeben.

Um jedoch schnell mal etwas farbig zu machen, sind diese Angaben sehr praktisch:

 h2 {color:red;background:green;}
 p.wichtig {color:blue;border-bottom:1px solid red;}
 h1 {color:maron;background:lime;}

[Bearbeiten] RGB-Werte

RGB-Werte können in Prozent (%) oder in Werten von 0 bis 255 angegeben werden:

 h3 {color:rgb(40%,50%,90%)}
 div#zitat {color:rgb(0,255,40)}

[Bearbeiten] Hexadecimal-Werte

Hexadezimal-Werte benutzen eine 6-stellige "Zahlenreihe" (#RRGGBB) um einen Farbwert wiederzugeben; häufig ist es etwas einfacher, einen Farbwert z.b. aus Photoshop zu kopieren als die etwas mühsamer RGB-Schreibweise… Modernen Browsern ist es egal, ob Sie die Farbangabe hexadezimal oder als RGB-Wert machen!

 h4 {color:#dcdcdc}
 p#zitat strong {background-color:#EE99BF;}

[Bearbeiten] Klassen und IDs

Wenn Sie mit den Style-Angaben den <p>-Tag umformatieren, betrifft das alle <p>-Tags in der Webseite. Oft möchten Sie aber vielleicht nur eine spezielle Art von Absatz anders formatieren als die anderen Absätze. Zu diesem Zweck können Sie sich im Stylesheet noch weitere Formatvorlagen - Klassen oder IDs - definieren:

[Bearbeiten] Klassen

So sieht die Anweisung im Stylesheet aus:

.wichtig { color: red; }

Diesen Klassen können Sie eigene Namen geben. Um Klassennamen von HTML-Tags zu unterscheiden, muss vor dem Namen einer Klasse ein Punkt stehen. Jedem normalen HTML-Tag können Sie nun diese Klasse zuweisen. Dies geschieht mit dem Attribut class und dem Namen der speziellen Klasse.

 <p>Eine <b class="wichtig">ganz wichtige</b> Meldung</p>
 <p class="wichtig">Eine ganz wichtiger Absatz</p>
 <p>Ein ganz normaler Absatz</p>

Zur "normalen" Wirkung des HTML-Tags kommt nun die Formatierung durch die Klasse hinzu: der Text ist in diesem Beispiel also rot. Wenn Sie einem Bereich ihres HTML-Codes eine bestimmte Klasse zuweisen möchten, aber kein passender HTML-Tag vorhanden ist, können Sie die beiden Tags <span> und <div> verwenden, die beide selber kaum Eigenschaften aufweisen. <span> eignet sich für die Verwendung in Fließtext, <div> ist ein blockbildender Tag, erzwingt also einen Zeilenumbruch.

 <p>Es gibt hier ganz <span class="wichtig">besonders interessante</span> Meldungen. </p>

Die Worte besonders interessante erscheinen rot.

[Bearbeiten] IDs

Ids bewirken auf den ersten Blick das gleiche wie Klassen:

 #wichtig { color: red; }

 <p>Es gibt hier ganz <span id="wichtig">besonders interessante</span> Meldungen. </p>

auch hier erscheinen die Worte besonders interessante rot;

Ids dürfen jedoch pro HTML-Dokument nur einmal vorkommen! Sie sind vergleichbar mit einem Personalausweis - auch dieser wird nur für eine Person ausgestellt… (hat man mehrere HTML-Dokumente, kann natürlich in jedem dieser Dokumente einmal die gleiche ID vorkommen!)

Die aktuellen Browser sind (noch) relativ tolerant, wenn man innerhalb eines Dokumentes mehrmals die gleiche ID verwendet – fatal wird es, wenn man versucht, via Javascript genau ein Element anzusprechen (getElementByID()) – dann funktioniert wahrscheinlich überhaupt nichts!

[Bearbeiten] Verschachtelte Elemente

Verschachtelte Elemente (descendant selectors) ermöglichen es, nicht nur Elemente mit bestimmten Klassen oder IDs via CSS zu "stylen", sondern auch Elemente, die sich innerhalb von den Eltern-Elementen befinden. Hier ein einfaches Beispiel dazu:

 <div class="marginale">hier ein einfacher Text, der die <strong>Beziehung</strong> verdeutlichen soll</div>

Will man dem Wort Beziehung, das im gezeigten Beispiel durch den Tag "<strong>" ausgezeichnet ist, via CSS ein besonderes Aussehen geben, braucht man in der CSS-Anweisung nur folgendes schreiben

 .marginale strong {background:blue;color:white;}

Diese CSS-Anweisung veranlaßt den Browser, jedes <strong>-Element innerhalb des divs mit der Klasse "marginale" mit einem blauen Hintergrund darzustellen;

Dies kann man natürlich beliebig weitertreiben:

 .marginale li li strong {border:1px solid red;}

Diese CSS-Anweisung zwingt den Browser, <strong>-Elemente, die innerhalb einer Liste einer Liste, innerhalb der divs mit der Klasse "marginale" vorkommen mit einem 1px starken, roten Rahmen darzustellen…

Die Möglichkeit von CSS auch verschachtelte Elemente anzusprechen ist extrem praktisch! Man muss nicht jedes Element explizit kennzeichnen – manchmal ist dies auch gar nicht möglich (z.b. bei Content Management Systemen oder Wikis!)

[Bearbeiten] Feinjustierung

Man kann die Auswahl der verschachtelten Elemente noch genauer einstellen:

der liebe Internet Explorer – zumindest bis zur Version 6 – erkennt diese Formatierungen leider nicht!

[Bearbeiten] direktes Kind

damit kann man Elemente "stylen", die die direkten Kinder eines Elementes sind:

div.marginale > strong {background:blue;color:white;}

Hier wird das Wort Beziehung blau hinterlegt, weil der Tag <strong> ein direktes "Kind" von ".marginale" ist!

<div class="marginale">hier ein einfacher Text, der die <strong>Beziehung</strong> verdeutlichen soll</div>

Hier wird das Wort Beziehung NICHT blau hinterlegt, weil der Tag <strong> kein direktes "Kind" von ".marginale" ist!

<div class="marginale">hier ein einfacher Text,  der <em> die <strong>Beziehung</strong> verdeutlichen </em> soll</div>

[Bearbeiten] benachbarte Kinder

zum "Stylen" eines Elementes, das direkt einem vorhergehenden folgt:

p + p {margin:0;text-indent:2em;}

die Anweisung bewirkt folgendes: Treten 2 Paragraphen direkt hintereinander auf, wird der 2. Paragraph ohne Abstand zum ersten dargestellt; gleichzeitig wird in der 1. Zeile des 2. Paragraphen der Text um 2em eingezogen

Lorem ipsum sea ad nisl vidit facete, mea tota laoreet ad, est no prompta salutatus. Vis et doctus habemus postulant, usu suscipit assueverit in, an mel iriure omittam adversarium. Vel et labore nemore referrentur, mazim vivendo consetetur vim id. No vix repudiandae suscipiantur necessitatibus. Brute aliquid laoreet an pri.

Epicurei percipit evertitur id vel, at vim elit invidunt. Ad sea tantas disputando. Laudem lobortis splendide an quo. Sed no timeam sapientem. Inani suscipiantur mei ea, cu movet interpretaris mel. Ea vim velit zzril dissentias, nec brute iudicabit eu, volumus perpetua intellegebat an pro.

[Bearbeiten] CSS Box

CSS geht davon aus, das jedes sichtbare Element einer HTML-Datei eine Element Box erzeugt. Darin befindet sich der eigentliche Inhalt (z.b. ein Wort oder ein Bild); dieser Inhalt kann durch paddings, border oder margins von den umgebenden Elementen abgegrenzt werden:

[Bearbeiten] innere Abstände (padding)

Durch padding erzwingt man einen Abstand vom Inhalt zum Rand der Element Box:

<div id="demo">der Innenabstand</div>

div#demo {
  width:6em;
  padding-top:1.5em;
  padding-right:0.5em;
  padding-bottom:1.5em;
  padding-left:0.5em;
}

/* oder in kurzform */

div#demo {
  width:6em;
  padding:1.5em 0.5em; /* 1. wert = oben + unten; 2. wert = rechts + links
}

[Bearbeiten] Äußere Abstände (margin)

Durch margin erzwingt man einen Abstand von einer Element Box zu einer anderen:

<div id="box_1">1. Element</div>
<div id="box_2">2. Element</div>

div#box_1, div#box_2 {
  width:5em;
  border:1px solid black;
  margin-bottom: 30px;
}

[Bearbeiten] Rahmen (border)

Eine Element Box kann mit einem rechteckigen Rahmen versehen werden:

<div class="mitRahmen">Element</div>

div.mitRahmen {
  padding:6px; /* abstand rundherum */
  border-color:red;
  border-width:1px;
  border-style:solid;
}

damit kann man auch richtig schräge Sachen machen:

div.mitRahmen {
  padding:6px; /* abstand rundherum */
  width:8em;
  height:8em;
  border-color:lime blue red gold;
  border-width:20px 10px 4px 8px;
  border-style:solid dashed dotted groove;
}

[Bearbeiten] Layout mit Stylesheets

Kaum etwas hat den Aufbau von Website so fundamental verändert wie der Einsatz von Stylesheets zum Layouten der einzelnen Seiten.

[Bearbeiten] Kurzer geschichtlicher Ausflug

Bevor die Browser dazu fähig wurden, Stylesheet-Positionierungen zuverlässig darzustellen, "mißbrauchten" Webdesigner HTML-Tabellen, um Screenelemente auf der Seite zu positionieren. Mit Hilfe von komplizierten Tabellen-Strukturen und unsichtbaren Gifs, die die einzelnen Tabellen-Zellen aufspannten, war es möglich, visuell ansprechende Seite zu gestalten. Die Websites verloren dabei jedoch einen ihrer größten Vorteile: Inhalt und Präsentation waren nicht mehr voneinander getrennt:

• Website-Besucher wurden gezwungen, die neuesten Browser zu verwenden
• die Browser benötigten eine hohe Rechenleistung, um die komplizierten Tabellen richtig darzustellen
• die Ladezeiten verlängerten sich
• Screenreader (Lesehilfen für Blinde und Sehbehinderte) konnten keine sinnvollen Zusammenhänge mehr erkennen

Auch heute noch wird ein Großteil der Websites nach diesem veralteten Schema aufgebaut. Dies liegt hauptsächlich an WYSIWYG-Editoren (Frontpage, Go live, Dreamweaver usw.) oder an veralteten Content Management Systemen

Wie gut, dass Sie diesen komplizierten, veralterten Weg des Web-Layoutens nicht mehr lernen müssen!

[Bearbeiten] Normaler Seitenaufbau

Ohne Beeinflussung einer HTML-Datei via CSS wird der Inhalt einfach von oben nach unten abgearbeitet. Was also oben steht, wird auch im Browser oben dargestellt…

Dies sollte man nie vergessen: alle Leute, die die Website mit einem Browser besuchen, der kein CSS versteht, werden Ihre Seite so sehen, wie Sie diese in HTML aufgebaut haben! Nehmen Sie sich beim Umsetzen Ihrer Website ab und zu die Zeit und deaktivieren Sie das CSS:

• Ist die Seite auch so verständlich?
• Was kommt zuerst? Das Menü oder der Inhalt?
• Kann man Zusammenhänge auch so verstehen?

[Bearbeiten] Minimale Beeinflussung des Layouts via CSS

Durch das Verwenden von Margins, Borders und Paddings können Sie Abstände zwischen verschiedenen Elementen schaffen, Beziehungen verdeutlichen und visuelle Spannungen aufbauen – ohne die Reihenfolge der Elemente zu verändern!

[Bearbeiten] Floaten

Beim Floaten wird das im HTML-Code oben liegende Element links oder rechts nach unten neben das im HTML-Code unten liegende Element gesetzt...

Verwirrt? Anhand eines Beispiels wird die Sache verständlicher:

<h2 id="einleser">Floating ist sehr praktisch!</h2>
<p>Lorem ipsum no verterem phaedrum (…)</p>

   h2#einleser {
1.   background:gold;
2.   padding:2em;
3.   font-size:2em;
4.   font-weight:normal;
5.   float:left;
6.   margin:0 10px 10px 0;
   }

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum. Cu per alii hinc, ei elitr fastidii accumsan eum, pro dicit tritani urbanitas ea. Tempor constituam per et. In modus dicunt suscipit qui, ex alterum percipit vix.Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum.

Haben Sie gesehen, wie die <h2>-Überschrift nach links unten in den nachfolgenden Paragraph (<p>) rutscht? Würde man in Zeile 5 des Stylesheet statt float:left; float:right; eingeben, würde die Überschrift nach rechts unten rutschen…

   h2#einleser {
1.   background:gold;
2.   padding:2em;
3.   font-size:2em;
4.   font-weight:normal;
5.   float:right;
6.   margin:0 0 10px 10px;
   }

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum. Cu per alii hinc, ei elitr fastidii accumsan eum, pro dicit tritani urbanitas ea. Tempor constituam per et. In modus dicunt suscipit qui, ex alterum percipit vix.Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei, te aperiri nostrud appetere eum.

[Bearbeiten] Clearen

Clear ist das Gegenstück zum Float; es bewirkt, dass das Floaten ab dieser Stelle aufhört. Auch dafür ein einfaches Beispiel:

<h2 id="einleser">Floating ist sehr praktisch, sollte aber nicht endlos weiterlaufen</h2>
<p>Lorem ipsum no verterem phaedrum (…)</p>
<p class="clearLeft">Dieser Absatz sollte unterhalb der gefloateten Überschrift stehen</p>

.clearLeft {clear:left;}

Lorem ipsum no verterem phaedrum comprehensam quo, mea integre persecuti ei.

Dieser Absatz sollte unterhalb der gefloateten Überschrift stehen

Es gibt die Aufrufe clear:left, clear:right und clear:both;

[Bearbeiten] Positionieren

Positionieren ist der radikalste Eingriff in die von HTML vorgegebene Struktur einer Website; es ist damit möglich, Elemente, die im HTML-Code ganz unten stehen, am obersten Rand des Browser zu plazieren und umgekehrt.

Bitte fragen Sie sich dabei immer: Ist dies Umsortieren wirklich notwendig - oder könnte es nicht einfacher sein, den HTML-Code entsprechend umzustellen?

[Bearbeiten] Absolutes Positionieren

Absolut positionierte Elemente fallen komplett aus dem normalen "Fluß" einer HTML-Datei heraus; man könnte sich vorstellen, dass sich diese Elemente auf einer eigenen Ebene befinden und somit weder andere Elemente beeinflussen können noch von anderen Elementen beeinflußt werden können;

[Bearbeiten] Absolut positioniert relativ zum Browserfenster

Für den Anfänger verwirrend ist die Beziehung zwischen dem absolut positionierten Element und seinem "Elternelement": erklärt man ein Element einfach absolut und gibt ihm dann Positionsangaben, beziehen sich diese direkt auf das Browserfenster:

<body>
 <p>hier eine Menge Text…</p>
 <div id="wichtig">dieser Text ist absolut positoniert</div>
</body>

div#wichtig {
  text-align:center;
  background:red;
  color:white;
  border:1px solid white;
  position:absolute;
  width:9em;
  top:30px;
  left:30px;
}

Die graue Fläche stellt das gesamte Browserfenster dar!

Wichtig: um ein Element absolut zu positionieren, müssen mindestens folgende Angaben gemacht werden:

• position:absolute;
• width: eine breitenangabe
• top und/oder left (alternativ ist auch bottom und right möglich!)

[Bearbeiten] Absolut positioniert relativ zu einem übergeordneten Element

Will man ein HTML-Element innerhalb eines anderen Html-Elementes absolut positionieren, muß man bei den CSS-Angaben des äußeren Elementes zumindestens die Angabe position:relative; machen. Hier das Beispiel:

<div id="aussen">
   <div id="innen">innen div</div>
</div> 

/* im css-bereich */
div#aussen {position:relative;background:yellow;
width:100px;height:100px;}

div#innen {position:absolute;width:70px;
left:20px;top:20px;background:blue;color:#fff;}

[Bearbeiten] Relativ Positionieren

relatives Positionieren verschiebt die Position eines HTML-Elements relativ zur normalen Position. Die Lücke, in der das Element normalerweise stehen würde, bleibt erhalten.

<p>dies ist normaler fliesstext</p>
<h2 id="rausrueck">hier eine relativ gesetzte zwischenüberschrift</h2>
<p>hier wieder normaler fliesstext</p>

/* im css-bereich */
h2#rausrueck {position:relative;left:6em;top:-1.4em;background:#ccc;}

[Bearbeiten] Navigationsmenü

Praktisch alle modernen Navigationsmenüs sind als ungeordnete HTML-Listen erstellt und via CSS dem Look & Feel der jeweiligen Seite angepaßt. Diese Listen haben den großen Vorteil, dass sie auch bei deaktivierten CSS als zusammengehörige Navigations-Elemente erkannt werden.

Der HTML-Code ist sehr einfach:

<ul>
 <li><a href="/home/" title="our homepage">home</a></li>
 <li><a href="/products/" title="a selection of products">products</a></li>
 <li><a href="/news/" title="latest news">news</a></li>
 <li><a href="/clients/" title="our clients">clients</a></li>
</ul>

mit Hilfe von CSS kann man das Aussehen der Liste verändern:

• Bullets entfernen: ul {list-style:none;}

[Bearbeiten] Zusammenfassung und Einsatz von Stylesheets

Wichtige Argumente für den Einsatz von Stylesheets sind:

• Zusätzliche Gestaltungsmöglichkeiten
• Einheitliche Gestaltung von mehreren Webseiten
• Arbeitsteilung zwischen DesignerInnen (die CSS erstellen) und RedakteuerInnen (die Inhalte erstellen)

Aber Achtung: CSS ist nicht die Lösung jedes Problems. Was CSS nicht leisten kann ist z.b:

• Mit Stylesheets können Sie nur Objekte verändern, die schon in der HTML-Datei vorhanden sind. Es können keine neuen Objekte eingefügt werden.
• Um ein Stylesheet zu erstellen, muss die DesignerIn die HTML-Tags kennen, z.B. wissen, dass h1, h2, h3 für die Überschriften stehen.
• Damit das Stylesheet wirkt, muss die RedakteurIn, die das HTML-Dokument erstellt, die richtigen HTML-Tags verwenden, z.B. Überschriften wirklich mit h1, h2, h3 formatieren, und nicht mit b, i, font.
  

[Bearbeiten] Dreamweaver

[Bearbeiten] Einleitung

Ein "wysiwyg" Web-Editor wie Dreamweaver macht das Erzeugen von HTML-Dateien einfacher. Das Ergebnis ist aber immer eine ganz normale HTML-Datei; mit genug Fleiß und einem Text-Editor könnte man das gleiche Ergebnis erzielen.

"wysiwyg" ist eine englische Abkürzung für "what you see is what you get", die Abkürzung wird ungefähr "wie-sie-wieg" ausgesprochen. Das Prinzip "was du siehst ist was du bekommst" bedeutet in diesem Fall: Man sieht im Editor nicht den HTML-Code, sondern man sieht, wie die fertige Webseite im Browser aussehen wird.

Aber Achtung: während DTP-Programme, die nach dem wysiwyg-Prinzip arbeiten, dieses Versprechen auch erfüllen können, ist das bei Web-Editoren nicht möglich. Bei einem DTP-Programm kenne ich mein Ausgabemedium–z.B. A4. Bei einer Webseite kann ich viele Eigenschaften meines Ausgabemediums gar nicht kennen (siehe die Diskussion im ersten Kapitel), z.B. die Breite des Browserfensters, die zur Verfügung stehenden Schriftarten, u.s.w. Es müsste also heißen "Was du siehst ist ungefähr was du bekommen könntest".

Dreamweaver ist ein Produkt der ehemaligen Firma Macromedia (jetzt Adobe Systems). Die aktuelle Version ist Adobe Dreamweaver CS4 (Stand: Jan. 2009). Es gibt eine Windows- und eine Mac-Version (siehe Abbildung 51) des Programms. In diesem Buch werden meist Screenshots von Dreamweaver für Windows verwendet, manchmal auch Screenshots von Dreamweaver für Mac.

Seit Dreamweaver 3 empfehle ich das Programm un­ein­geschränkt. Die Unterschiede zwischen den Versionen sind für die nun folgenden Betrachtungen nicht relevant, sie betreffen z.B. die Unterstützung von PHP oder Datenbanken, also fortgeschrittenere Themen. Konkurrenzprodukte zu MACROMEDIA Dreamweaver sind unter anderem Microsoft Frontpage und Adobe GoLive.

Sie können eine Demo-Version von Dreamweaver herunterladen^[9], und für drei Monate gratis benutzen. Erst danach müssen Sie entscheiden, ob Sie Dreamweaver kaufen wollen.

Diese Kapitel beginnt mit einer sehr detaillierte Beschreibung der Dreamweaver-Oberfläche, die für zukünftige Experten gedacht ist, die ihr Werkzeug bis ins Detail beherrschen. Danach lernen Sie, wie Sie den HTML-Code den Sie in Kapitel 2 kennen gelernt haben mit Dreamweaver erstellen können. Am Ende des Kapitels können Sie eine informierte Entscheidung treffen ob Sie Dreamweaver einsetzen wollen.

[Bearbeiten] Entwurfsansicht, Codeansicht, Gemischte Ansicht

Dreamweaver funktioniert wie einleitend beschreiben nach dem wysiwyg-Prinzip–Sie sehen bei der Arbeit also eine Darstellung die ungefähr der Darstellung der Webseite im Browser entspricht. Sie können aber jederzeit auch den "darunter liegenden" HTML-Code ansehen und bearbeiten. Dreamweaver unterscheidet drei "Ansichten": Die Entwurfsansicht, die (HTML-)Codeansicht, und eine gemischte Ansicht. Letztere sehen Sie in Abbildung 52.

Die gemischte Ansicht eignet sich besonders gut zum Erlernen von neuem HTML-Code: Sie können in der Entwurfs-Ansicht einen Bereich markieren, im Code-Ansicht wird der entsprechende Code ebenfalls markiert. So können Sie erforschen, welcher HTML-Code zu welchem Element der Seite gehört.

Die schnellste Art zwischen den Ansichten hin und her zu wechseln ist die Tastenkombination Strg-Tabulator. Dabei bleibt die Markierung erhalten. Ein Qualitätskriterium bei Web-Editoren, und der Grund warum ich Dreamweaver empfehle, ist die Qualität des erzeugten HTML-Codes, und die "Durchlässigkeit" zwischen Entwurfs- und Code-Ansicht. Dreamweaver erzeugt kurzen, gut lesbaren HTML-Code und fördert das Erlernen des Codes durch das gute Zusammenspiel der Ansichten.

[Bearbeiten] Überblick über die GUI von Dreamweaver

Die Oberfläche von Dreamweaver besteht aus einer Vielzahl von Fenstern und Elementen. Für den Einstieg in die Arbeit mit Dreamweaver sind die in Abbildung 53 gezeigten Elemente wichtig:

Das Dokument wird zentral angezeigt. Sie können wie oben beschreiben das Dokument in der Code-Ansicht oder der Entwurfs-Ansicht betrachten und bearbeiten, das Umschalten erfolgt in der Symbolleiste Dokument (in Abbildung 53 mit einem Pfeil markiert). Tabelle zeigt wo Sie weitere wichtige Informationen zum Dokument finden.

Alle weiteren Fenster in Dreamweaver sind mit Ihrem Namen beschriftet.

Das Fenster Einfügen ermöglicht das Einfügen von Elementen in das Dokument. Das Fenster ist oberhalb des Dokumentes platziert, die Handhabung ist damit ähnlich wie in den meisten Windows-Programmen.

Das Fenster Eigenschaften ist unterhalb des Dokumentes platziert, und widerspricht damit den Windows-Konventionen. Dieses Fenster ist für die Arbeit mit Dreamweaver zentral. Der Inhalt des Fensters verändert sich mit der jeweiligen Markierung im Dokument. Ist z.B. eine Tabellen-Zelle im Dokument markiert sieht das Eigenschaften Fenster anders aus, als wenn ein Bild im Dokument markiert ist (siehe Abbildung 55)

Das Eigenschaften Fenster dient sowohl zur Anzeige der Eigenschaften, als auch zur Bearbeitung. So können Sie z.B. in Abbildung 55 die Breite und Höhe des Bildes ablesen, aber auch neue Werte in diese Felder eingeben, und damit die Darstellung des Bildes verändern. Es gibt dabei einen engen Zusammenhang zwischen Eigenschaften Fenster und dem HTML-Code. In Abbildung 56 können Sie nachvollziehen, wie jedes Eingabe-Element im Eigenschafts-Fenster einem Attribut des HTML-Tags entspricht.

 <img width="446" height="446" 
 src="mma/brigitte-jellinek.jpg" 
 alt="Portrait Brigitte Jellinek"
 name="b1" id="b1" />

Das der Eingabefelder wird in zwei HTML-Attribute übertragen: in name und id. Der Grund dafür ist eine Veränderung in der Bedeutung der Attribute: id wird heute dort verwendet, wo früher name verwendet wurde. Dreamweaver setzt die Beiden gleich, und vermeidet damit Kompatiblitätsprobleme. Abbildung 57 zeigt ein komplexeres Beispiel.

Ein Link (<a>-Tag) ist markiert. Das Eigenschafts-­Fenster zeigt (unter anderem) das href-Attribut an, mit der Beschriftung Hyperlink. Das Eigenschafts-Fenster zeigt gleichzeitig aber noch ein paar andere Dinge: Format bezieht sich auf den übergeordneten <p>-Tag. Wenn Sie hier statt "Absatz" "Überschrift 1" auswählen, wird der HTML-Code wie in Abbildung 58 gezeigt verändert.

 <p>Ich empfehle <a href="...">Google</a> für die Suche im Internet</p>

 <h1>Ich empfehle <a href="...">Google</a> für die Suche im Internet</h1>

Wenn Sie das Symbol Ungeordnete Liste drücken verändert Dreamweaver den Code noch stärker, wie in Abbildung 59 gezeigt:

<p>Ich empfehle <a href="...">Wikipedia</a></p>

<ul>
<li>Ich empfehle <a href="...">´Wikipedia</a> 
</li>
</ul>

[[Image:Handbuch Webdesign-DW Fenster einklappen.gif|thumb|right|Fenster zusammenklappen}} Wenn Sie das Eigenschaftsfenster nicht benötigen können Sie es zusammenklappen wie rechts gezeigt. Am rechten Rand des Dreamweaver-Fensters ist Platz für weitere Fenster. Diese können über das Menü "Fenster" ein- und ausgeblendet werden. Mit der Maus können Sie auch diese Fenster "zusammenklappen", in Gruppen anordnen, aus dem Fensterrahmen lösen und in schwebende Fenster verwandeln. Welche Fenster Sie für die Arbeit benötigen wird sich immer wieder verändern, sie können Dreamweaver hier an Ihre eigenen Bedürfnisse anpassen.

[Bearbeiten] Text formatieren mit Dreamweaver

Wie im vorherigen Abschnitt beschrieben können Sie mit dem Eigenschaftsfenster Text formatieren. Für die wichtigsten HTML-Tags gibt es in Dreamweaver zusätzlich Tastatur-Kürzel:

Tabelle 7: Dreamweaver Tastaturkürzel für die Formatierung von Text Durch die Verwendung dieser Tastaturkürzel könne Sie Ihre Arbeit wesentlich beschleunigen.

[Bearbeiten] Links und Anker

Tippen Sie zuerst den Link-Text ein, der im Browser angezeigt werden soll. Markieren Sie dann einen Teil des Textes mit der Maus. Tippen Sie die URL in das Feld Hyperlink des Eigenschafts-Fensters ein. Sobald Sie das Eingabefeld verlassen wird die Änderung aktiv, der Link erscheint blau und unterstrichen. ACHTUNG! Sie können den Link in Dreamweaver nicht anklicken um ihn zu testen! Das funktioniert nur im Browser. Nachdem Sie in Dreamweaver eine Site definiert haben (siehe Seite fehlt) funktioniert auch folgendes: Wenn Sie zu einer lokalen Datei linken wollen, also innerhalb Ihrer Site, dann mit können Sie dem gelben Ordern-Symbol neben dem Eingabefeld Hyperlink eine Datei auswählen, oder mit dem "Dateizeiger-Symbol" zu der Datei zeigen.

Anker (HTML-Tag <a name="ankername">) kann man mit Dreamweaver wie in Abbildung 61 gezeigt setzen und verlinken:

• Zuerst den Anker setzen: Einfügen à benannter Ankerpunkt. Sie werden nach einem Namen gefragt (in diesem Beispiel "Aufgabe")
• Dann einen Link dorthin machen: Sie können entweder das Zeichen # und den Namen des Ankers in das Feld Hyperlink eintippen (hier also #Aufgabe oder Sie verwenden das "Dateizeiger-Symbol", und ziehen es mit der Maus zum Anker.

[Bearbeiten] Bilder und Rollovers

Um ein Bild in die Webseite einzufügen verwenden Sie das Bild-Symbol im Fenster Einfügen.

Der Effekt, dass sich ein Bild in ein anderes verwandelt, wenn Sie den Mauszeiger darüber bewegen heißt "Rollover-Effekt" oder "OnMouseOver-Effekt". In Abbildung 62 werden zwei Bilder gezeigt, die für so einen "Rollover-Effekt" geeignet wären. Zuerst müssen Sie die beiden Bilder erzeugen und in einem geeigneten Ordner ablegen zum Beispiel im selben Ordner in dem auch die HTML-Datei liegt.

Abbildung 62: Zwei Bilder für einen "Rollover"-Effekt

Der Code hinter dem Effekt ist eine Kombination aus einem <img>-Tag, einem Link und ein bisschen Javascript-Code. Mit Dreamweaver kann dieser Effekt ganz einfach mit dem Symbol "Rollover-Bild" im Fenster Einfügen erzeugt werden.

Den Bildnamen können Sie frei wählen. Bei Originalbild und Rollover-Bild geben Sie die Dateinamen (oder den relativen Pfad) der beiden Bilder ein. Jedes Rollover-Bild ist gleichzeitig ein Link. Wenn Sie bei "Wenn angeklickt, gehe zu URL" nur das Zeichen "#" eingeben ist es ein Link zur selben Seite. Sie könne aber auch den Dateinamen einer anderen HTML-Datei oder eine URL eingeben.

[Bearbeiten] Unsichtbare Elemente

Manche Dinge die bei der Darstellung der Webseite im Browser unsichtbar sind werden in der Entwurfsansicht von Dreamweaver dargestellt, z.B. wie in Abbildung 64 gezeigt der <br>-Tag der einen Zeilenumbruch erzwingt.

Bei Web-Formular wird in der Entwurfsansicht von Dreamweaver der <form> - Tag als rote, strichlierte Linie dargestellt. zeigt die Darstellung in Dreamweaver und im Browser:

[Bearbeiten] Handhabung von Tabellen

Der Tag-Selektor am unteren Rand des Dokumentenfensters zeigt an, innerhalb welcher HTML-Tags sich der Cursor im Dokumentenfenster gerade befindet. Im Beispiel rechts: der Curser befindet sich auf einem Link <a>, der befindet sich innerhalb eines Absatzes <p>, der wiederum ist innerhalb des <body>-Tags. Beim Bearbeiten von Tabellen können Sie den Tag-Selector besonders gut gebrauchen: Ein Klick auf <td> im Tag-Selektor, und die Zelle wird markiert. Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften dieser Zelle an, wie in Abbildung 66 gezeigt.

Ein Klick auf <tr> im Tag-Selektor, und die Zeile wird markiert. Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften dieser Zeile an, wie in gezeigt.

Ein Klick auf <table> im Tag-Selektor, und die gesamte Tabelle wird markiert. Gleichzeitig zeigt das Eigenschaftsfenster die Eigenschaften der Tabelle an, wie in Abbildung 68 gezeigt.

Das funktioniert auch wenn Tabellen in von Tabellen geschachtelt werden, wie in Abbildung 69 gezeigt. Sie können immer ganz gezielt das richtige Objekt auswählen und verändern.

Mit Dreamweaver wird das Erstellen und Verändern von Tabellen sehr viel einfacher als mit notepad. Mit wenigen Klicks können Sie sehr komplizierte Tabellen-Konstruktionen erzeugen. Achten Sie trotzdem darauf immer die einfachste mögliche Tabelle zu verwenden!

[Bearbeiten] Site Verwalten

Eine Ansammlung von Webseiten die zusammen gehören nennt man eine "Website" oder "Site". Die einzelnen Dateien einer Site müssen in einem gemeinsamen Ordner liegen. Eine Site entspricht also einem Projekt. Wenn Sie gleichzeitig für mehrere KundInnen Sites erstellen, werden Sie die Daten in getrennten Ordnern aufbewahren. Dreamweaver hat ein eigenes Fenster, mit dem Sie die Dateien einer Site verwalten können. Das Site-Fenster sieht beispielsweise wie links gezeigt aus. Mit dem Symbol "Wiederherstellen/Minimieren" können Sie die große Variante des Site-Fensters (bildschirmfüllend) einblenden.

In diesem Fall gehören alle Dateien in c:\data\webmirror\kurse zu einer Site mit dem Titel "Kurse". Bei der ersten Verwendung dieses Fensters müssen Sie zuerst die Site definieren–d.h., Sie müssen Dreamweaver mitteilen, in welchem Ordner die Site liegt, wie in Abbildung 71 gezeigt.

[Bearbeiten] FTP-Upload

Wenn Sie Webspace mieten erhalten Sie einen Usernamen und ein Passwort - mit diesen beiden haben Sie die Berechtigung Seiten auf den Webserver hinaufzuladen. Dazu benötigen Sie ein FTP-Programm. Das Site-Fenster von Dreamweaver ist so ein FTP ( Genau: ein FTP- und SFTP-Programm. An der FH verwenden wir SFTP. Das S stehe für secure, weil die Übertragung des Passworts verschlüsselt erfolgt.) -Programm. Im Sitefenster sieht man rechts die Dateien am eigenen Computer, und links die Dateien am Webserver draußen im Internet, wie in Abbildung 72 gezeigt.

Im Gegensatz zu anderen FTP-Programmen unterstützt Sie Dreamweaver dabei, Ihre Dateien im richtigen Ordner abzulegen. Wenn Sie wie in Abbildung 72 gezeigt auf "Datei bereitstellen" drücken wird die ausgewählte Datei in den richtigen Ordner (html-ue1) auf dem Webserver geladen. Die Ordnerstruktur bleibt erhalten, und damit auch die Funktionstüchtigkeit der relativen Links (vergleiche Seite 36) Abbildung 73 zeigt, was Sie nicht tun sollten: die Datei in einen anderen Ordner am Webserver hinauf laden. Dann funktionieren alle relativen Links nicht mehr.

Bevor Sie FTP im Dreamweaver Site-Fenster benutzen können müssen Sie (Unter Siteà Site bearbeiten à Bearbeiten à Webserver Infos) die Angaben für FTP eintragen: Der Name des Servers, Username und Passwort.

Neben FTP bietet Dreamweaver auch noch den Upload mit SFTP (FTP mit Verschlüsselung) und mit dem WebDAV-Protokoll an, das aber nur von wenigen Webservern unterstützt wird.

[Bearbeiten] Imagemaps

Mit Imagemaps (auch Hotspots genannt) können Sie einzelne Bereiche auf einem Bild markieren, die einen besonderen Link erhalten sollen. Das Werkzeug zum Einfügen der Hotspots erscheint nur, wenn Sie ein Bild markiert haben:

Zu jedem Hotspot können Sie eine eigene URL angeben:

Der HTML-Code dazu sieht etwas unübersichtlich aus, weil er die Koordinaten der einzelnen Hotspots enthält. Die Koordinaten werden von der linken oberen Ecke des Bildes gemessen, und zwar in Pixel.

<img 
    src="karte.gif" width="379"
    height="309" usemap="#Map"
    border="0"> 
<map name="Map"> 
<area shape="circle"
    coords="196,285,37"
    href="#">
<area shape="rect"
    coords="238,220,351,293"
    href="#">
<area shape="poly" 
    coords="197,222,184, "
    href="#">
</map&gt

[Bearbeiten] Zusammenfassung

Dreamweaver ist ein gutes Werkzeug für Webdesign: er erstellt guten Code wenn Sie ihn als "wysiwyg"-Editor benutzen, und er unterstützt Sie auch bei der direkten Arbeit mit HTML und CSS-Code.

Sie haben nun einen Überlbick über die Fähigkeiten von Dreamweaver, und können entscheiden ob, und für welche Aufgabenstellungen sie ihn einsetzen wollen.

[Bearbeiten] Formulare

Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-Möglichkeiten gestalten: mit Links und Hotspots ermöglichen Sie der LeserIn die Navigation durch das Web. Formularen ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten Rahmen. Abbildung 78 zeigt zwei typische Anwendungsgebiete für Web-Formulare: das Eingabeformular der Suchmaschine Google und ein Bestell­formular.

Mit den HTML-Tags <form>, <input>, <textarea>, <option>, <select> werden Formulare gebaut. Ein einfaches Beispiel zeigt Abbildung 79

 <form method="get" action="newsletter-bestellung.cgi"><p>
 Bitte schicken Sie den Newsletter an die
 <label>E-Mail <input type="text" name="email" /></label>
 <br />
 <input type="submit" value="Ja, ich will" />
 </form>

Der <form>-Tag ist &quote;unsichtbar&quote; und dient nur dazu die anderen Eingabefelder zu bündeln. Im Action-Attribut des <form>-Tags wird angegeben, an welches Programm die Daten zur Verarbeitung geschickt werden. Abbildung 80 zeigt wie Formular dessen Code das in Abbildung 79 gezeigt wurde im Browser dargestellt wird.

[Bearbeiten] Eingabefelder

Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den &quote;normalen&quote; HTML-Tags auf. Tabelle 8 zeigt die verschiedene Arten von Text-Eingabefeldern.

Textfeld:
	<input type="text" name="meintextfeld" value="text eingeben" />
Passwort-Feld:
	<input type="password" name="meinpasswort" />
mehrzeiliges Textfeld = Textbereich
	<textarea name="zitat"> In a hole in the ground there lived a Hobbit. </textarea>

Für einzelne Fragen die mit Ja oder Nein zu beantworten sind wird das Eingabe-Element &quote;checkbox&quote; verwendet, siehe Tabelle 9.

<input type="checkbox" name="rauch" /> Raucher

Für Frage, bei denen (eine von) mehreren vorgegebenen Antwort möglich sein soll gibt es verschiedene Eingabeelemente, die in Tabelle 10 gezeigt werden.

Radiobuttons
	<input type="radio" name="size" value="XL" /> XL <input type="radio" name="size" value="L" /> L <input type="radio" name="size" value="M" /> M <input type="radio" name="size" value="S" checked /> S
Menü
	<select name="size2"> <option>XL</option> <option selected>L</option> <option>M</option> <option>S</option> </select>
Menü mit "leer"- Auswahl
	<select name="size3"> <option>---Bitte Auswählen---</option> <option>XL</option> <option>L</option> <option>M</option> <option>S</option> </select>
Liste
	<select name="html" size="4" multiple> <option>im Code</option> <option>Dreamweaver</option> <option>GoLive</option> <option>Frontpage</option> </select>

Radiobuttons die zu einer Frage gehören müssen den selben Namen tragen. der Wert ist unterschiedlich (im Code: name ist gleich, value unterschiedlich). Nur bei einer Liste besteht die Möglichkeit mehrere Antworten auszuwählen. Für alle Eingabefelder gibt: falls auch "keine Antwort" möglich sein soll müssen Sie dafür eine eigene Option einbauen. Jedes Formular braucht einen Absende-Button wie in Tabelle 11 gezeigt.

Absende-Button
	<input type="submit" value="dr&uuml;ck mich!" />
Zurücksetzen-Button
	<input type="reset" value="Zur&uuml;cksetzen" />

Tabelle 11: Eingabefelder Absenden und Zurücksetzen Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.

Den &quote;Zurücksetzen&quote;-Button sollten Sie nur sehr selten einsetzen. Warum&quote; Denken Sie an Ihre eigene Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen &quote;Zurücksetzen&quote;-Button gedrückt und dann gedacht &quote;super, alles gelöscht, genau das wollte ich&quote;, und wie oft haben Sie auf einen &quote;Zurücksetzen&quote;-Button gedrückt und dann gedacht &quote;Mist, das war ja gar nicht der Einsende-Button, jetzt muss ich alles nochmal tippen.&quote;

Tabelle 12 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.

Unsichtbares = Verstecktes Feld
	<input type="hidden" name="webseite" value="www.students" />
Button ohne Auftrag, für Javascript-Programme
	<input type="button" value="Extrafenster" onClick="..Javascript hier..">
Bildfeld, liefert Koordinaten.
Datei:Handbuch Webdesign-Formularfelder 13.jpg	<input type="image" border="0" name="position" src="austria.gif" width="150" height="64">
Visuelle Zusammenfassung mehrerer Felder: fieldset + legend
	<fieldset> <legend>Kreditkarte</legend> <input name="nr"><br> <input type="radio" name="kk" value="Master"> Master <input type="radio" name="kk" value="Visa"> Visa <br> </fieldset>
Datei-Upload, funktioniert nur wenn die Formular-Daten an dne Webserver geschickt werden, nicht aber bei Versand per E-Mail
	Wählen Sie ein Bild aus: <input type="file" name="bilddatei">

[Bearbeiten] Sinnvoller Einsatz der Eingabefelder

Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formulare liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmöglichkeiten. Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel.

	Version 1: Ein Menü ermöglicht die Auswahl aus vorgegebenen Elementen. Mit diesem Formular kann man nur ein, nicht aber zwei oder mehr Zimmer reservieren.
	Version 2: Ein Text-Eingabefeld ermöglicht hier die Eingabe der Anzahl der Zimmer. Es ist aber nicht möglich ein Einzel- plus ein Doppel-Zimmer zu reservieren.
	Version 3: Diese Version ermöglicht die Reservierung von beliebigen vielen Zimmern in allen Kombinationen.
	Version 4: Durch ein zusätzliches Textfeld können alle weiteren Probleme abgefangen werden

Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor, welche Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt geboten. Eine besonders häufige Auslassung zeigt Tabelle 13.

Der linke Entwurf in Tabelle 13 lässt keine Bestellung nur einer Sorte Bier zu. Die &quote;Mindestbestellmenge&quote; für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer &quote;Leer&quote;-Option in die Menüs wird diese Einschränkung aufgehoben.

[Bearbeiten] Formulare erstellen mit Dreamweaver

Dreamweaver zeigt in der Entwurfsansich den <form> - Tag eines Formulars als rote, strichlierte Linie. Abbildung 82 zeigt die Darstellung in Dreamweaver und im Browser:

Achten Sie auf die strichlierte Linie, dann können Sie einen der häufigsten Fehler beim Erstellen von Formularen vermeiden: mehrere <form>-Tags für ein und dasselbe Formular, wie in Abbildung 83 gezeigt.

Welche Auswirkung hat der in Abbildung 83 gezeigt Fehler? Wenn der Absende-Button betätigt wir, werden nur die Daten aus dem <form>-Tag gesendet, in dem sich der Absende-Button selbst befindet. Die Daten aus dem Text-Eingabefeld und von den Radio-Buttons werden in diesem Fall nicht gesendet.

Im Fenster &quote;Einfügen" gibt es eine eigene Abteilung für Formulare, wie in Abbildung 84 gezeigt.

Das 9. (in der Abbildung hervorgehobene) Symbol fügt nicht nur ein Formularfeld ein, sondern ein ganzes &quote;Sprungmenü&quote; – das ist ein Kombination aus Formular, Menü als Eingabeelement und einem Javascript-Programm. Wenn die LeserIn aus dem Menü einen Eintrag auswählt wechselt der Browser auf eine andere Webseite. Es handelt sich also um ein Navigationselement, das nicht innerhalb von anderen Formularen verwendet werden sollte!

Jedes Eingabefeld erhält einen Namen. Der Name wird über das Eigenschafts-Fenster von Dreamweaver eingegeben, wie in Abbildung 85 gezeigt.

[Bearbeiten] Formulardaten absenden

Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Die Namen der Eingabefelder und die Daten die eingegeben wurden, werden zur weiteren Verarbeitung versendet. Abbildung 86 zeigt ein Formular, und die Daten die von diesem Formular versendet werden (in einer Darstellung die die Web-Developers-Toolbar des Browsers Firefox liefert).

Abbildung 86: Formular und gesendete Daten – Standard-Namen

Beachten Sie dabei: Der restliche Inhalt der Webseite, also z.B. der erklärende Text, der neben den Eingabefeldern steht, wird nicht gesendet. In diesem Beispiel also &quote;Lieferadresse&quote;, &quote;Strasse&quote;, &quote;PLZ&quote; und &quote;Ort&quote;. Die Benennung der Eingabefelder ist in diesem Beispiel nicht gut gelungen, Abbildung 87 zeigt eine verbesserte Version.

Abbildung 87: Formular und gesendete Daten – sprechende Namen für Eingabefelder

Wohin / an wen werden die Daten aus dem Webformular gesendet&quote; Um das zu erklären müssen wir noch einmal kurz die Begriffe &quote;Client&quote; und &quote;Server&quote; wiederholen:

Als &quote;Client&quote; wird ein Programm bezeichnet, das einen Internet-Dienst in Anspruch nimmt. Beim Internet-Dienst &quote;World Wide Web&quote; ist der Client also der Web-Browser. Manchmal wird auch der ganze Computer, auf dem das Programm läuft, als Client bezeichnet.

Als &quote;Server&quote; wird ein Programm bezeichnet, das einen Internet-Dienst anbietet. Ein Webserver liefert also auf Anfrage Webseiten. Manchmal wird auch der ganze Computer, auf dem der Webserver läuft, als Server bezeichnet. HTTP ist das Protokoll, die Vorschrift, wie Web-Browser und Webserver miteinander kommunizieren. Das Diagramm in Abbildung 88 zeigt den &quote;normale&quote; Ablauf von HTTP: Der Browser stellt eine Anfrage an den Webserver, der Webserver liefert als Antwort ein HTML-Dokument, der Browser stellt das Dokument dar.

Abbildung 88: Webbrowser und Webserver

Mit Webformularen wird dieser Ablauf etwas komplizierter: Nun kann der Webbrowser nicht nur eine Anfrage nach einem Dokument stellten, er kann dabei auch Daten mitschicken &quote; nämlich die Daten, die ins Formular eingegeben wurden.

Wohin / an wen werden die Daten gesendet? Die URL (des Programmes) wird im action-Attribut des <form>-Tags angegeben, und endet meist mit der Endung .cgi oder .php.

  <form action="http://webwelt.horus.at/html/form/echo.cgi">

Das Programm am Webserver verarbeitet die Daten, und liefert als Ergebnis eine Webseite, die wieder vom Browser angezeigt wird. Das Diagramm in soll diesen Ablauf verdeutlichen.

Abbildung 89: Formulardaten werden über HTTP an ein Programm am Webserver versandt

Die Daten werden vom Browser an den Webserver übermittelt. Der Webserver startet in diesem Fall ein weiteres Programm, z.B. ein CGI-Skript, und übergibt die Daten an dieses Programm. Das Programm verarbeitet die Daten und liefert als Ergebnis, als Output, ein HTML-Dokument, an das Webserver-Programm zurück. Das Webserver-Programm übermittelt das HTML-Dokument an den Browser, der es darstellt.

Wenn Sie nicht über ein geeignetes Programm am Webserver verfügen (weder ein fertiges Programm, noch die Möglichkeit es selbst zu programmireren) dann könnne Sie als Alternative die Daten per E-Mail verschicken. So sieht der entsprechende HTML-Code des Formulars aus:

 <form action="mailto:ich@uni.ac.at" 
          method="post" 
          enctype="text/plain">

Bei dieser Vorgehensweise werden die Daten vom Browser an ein (ebenfalls am Client) installiertes E-Mail Programm übergeben. Dieses E-Mail Programm übernimmt das versenden der daten an die Ziel-Adresse.

Abbildung 90: Formulardaten werden per E-Mail versandt

In Dreamweaver geben Sie diese Attribute des form-Tags wie in Abbildung 91 gezeigt über das Eigenschafts-Fenster ein. In älteren Versionen von Dreamweaver gibt es kein Eingabefeld für das Attribut enctype.

Achtung: Das Versenden der Daten per E-Mail kann aus verschiedensten Gründen schief gehen. Zum Beispiel weil ein Browser, aber kein E-Mail Programm installiert ist. Oder weil das E-Mail Programm zwar installiert, aber das Zusammenspiel zwischen Webbrowser und E-Mail Programm nicht korrekt konfiguriert ist. Das Versenden der Daten per HTTP an den Webserver, und das Verarbeiten der Daten mit einem Programm am Server ist also die zuverlässigere Methode.

[Bearbeiten] Zusammenfassung und Ausblick

Das Thema Webformulare ist damit ausführlich behandelt. Der nächste logische Schritt ist die Erstellung eines Programms am Webserver, das Formulardaten verarbeiten kann. Dafür gibt es verschiedene Programmier­sprachen und Schnittstellen, die bekanntesten wären die Sprache Perl über die Programmier­schnittstelle CGI. Eine Alternative wäre die Sprache PHP. Mit der Programmiersprache Javascript können die Formulardaten vor dem Versendenden aus dem Browser geprüft werden (Außer Javascript ist deaktiviert – dann entfällt die Prüfung).

[Bearbeiten] Ebenen und Frames

[Bearbeiten] Einleitung

Diese Kapitel stellt verschiedene Methoden zum Layout einer Webseite vor: Ebenen haben wir schon im Kapitel 3: Layout mit CSS behandelt, hier werden noch einmal die absolut positionierten Ebenen betrachtet. Im zweiten Teil werden Frames behandelt, die den Browser in mehrere Unter-Fenster zerlegen. Diese Technik ist umstritten, als Webdesign-Profi müssen Sie aber auf jeden Fall damit umgehen können.

[Bearbeiten] Ebenen

Ebenen werden mit dem <div>-Tag erzeugt. Sie können absolut positioniert werden, und sind unabhängig vom "normalen" Inhalt der Webseite. Sie werden manchmal für Layout, und oft für Effekte verwendet. Mit Dreamweaver sind sie wesentlich praktischer zu erstellen als im HTML-Code.

[Bearbeiten] Ebenen in HTML

Sie kennen den HTML-Tag <div> schon als allgemeinen Container ohne eigene Bedeutung, den man verwenden kann um einen Style anzuwenden:

<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="border: 1px black solid; 
               background-color: yellow ">
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<p>drei Absatz Text</p>
</div>

Mit der Stylesheet-Anweisung position: absolute; wird aus dem Container-Tag eine Ebene. Der Inhalt der Ebene verhält sich, als ob er auf einer Folie über der normalen Webseite "schwebt".

<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<div style="position:absolute; 
        left:43px; top:9px; width:104px; height:173px; 
        z-index:1; background-color:yellow;
        border: 1px black solid"> 
<p>ein Absatz Text</p>
<p>zwei Absatz Text</p>
<p>drei Absatz Text</p>
</div>

ACHTUNG: Im Gegensatz zu Tabellen-Zellen reagieren Ebenen nicht auf die Größe ihres Inhalts. Wenn der Text zu groß ist &quote;läuft die Ebene über&quote;, wie in Abbildung 92 gezeigt.

Abbildung 92: Absolut positionierte Ebene bei verschiedenen Schriftgrößen

[Bearbeiten] Ebenen in Dreamweaver

Ebenen kann man in Dreamweaver ganz einfach mit dem entsprechenden Werkzeug zeichnen. Abbildung 93 zeigt die Darstellung von Ebenen in Dreamweaver. Die Position des HTML-Tags <div> in der Seite durch ein gelbes Symbol das den Buchstaben C enthält dargestellt, die Ebene selbst wird an der definierten Position durch ein Rechteck dargestellt. Das gelbe [C] kann man in der Seite beliebig verschieben, es ist bei der Darstellung im Browser unsichtbar. Die Ebene kann man an dem Rechteck in der linken oberen Ecke nehmen und verschieben.

Die Attribute des <div>-Tags können mit dem Eigenschaften-Fenster verändert werden.

Eigenschaften der Ebene:

1. Name: wie immer ganz links am Eigenschaftsfenster
2. Position und Grösse: nicht hier eintippen, sondern die Ebene mit der Maus positionieren
3. Z-Index: gibt an welche Ebene "über" welcher Ebene liegt
4. Sichtbarkeit: eine Ebene kann versteckt oder sichtbar sein.
5. Hintergrundfarbe + Hintergrundbild
6. Überlauf: soll eine Scrollbar erscheinen wenn der Inhalt zu groß für die Ebene ist?

[Bearbeiten] Tipps für die Verwendung von Fixen Ebenen

Fix positionierte Ebenen sind nur beschränkt für das Layout der Seite geeignet. Wie oben beschreiben reagiert eine Ebene nicht darauf, dass der Inhalt zu groß wird. Hier sind die in Kapitel 3.4 beschriebenen Methoden mit CSS zum empfehlen, die immer garantieren, dass der gesamte Inhalt lesbar bleibt Wenn man doch absolut positionierte Ebenen für das Layout verwenden will, muss man den gesamten Inhalt der Seite in Ebenen unter­bringen, sonst hat man folgendes Problem:

• Die Ebenen sind immer absolut, oder besser gesagt: relativ zur linken oberen Ecke des Browser-Fensters positioniert
• Der "normale" Inhalt der Webseite kann auch anders positioniert sein, z.B. zentriert im Browser-Fenster

Bei einer Änderung der Fenstergröße oder der Schriftgröße "verrutschen" also normaler Inhalt und Ebenen gegeneinander.

Abbildung 94a: Absolut positionierte Ebene und zentrierte Überschrift

[Bearbeiten] Frames

Sinvolles Beispiel: [SELFHTML Suchleiste] WARNUNG: Frames machen Probleme: Ohne Frames hat jede Webseite eine eindeutige URL. Mit Frames gilt das nicht mehr. Daraus folgen unvermeidbare Probleme: In der Suchmaschine wird immer nur ein einzelner Frame gefunden, nicht das "Gesamtkunstwerk"

• Von anderen Websites können keine gezielten Links mehr gesetzt werden, nur Links auf die "Einstiegskonstellation" des Framesets, oder auf einzelne Frames
• Beim Drucken muss man extra angeben welcher Frame / ob alle Frames gedruckt werden sollen. Das misslingt meistens.

Zusätzlich machen Frames noch Probleme, die durch geeignete Programmierung vermeidbar sind, aber trotzdem oft auftreten:

• Innerhalb von Frames ist es schwieriger einen Links richtig zu setzen
• Mit Frames kann man leicht den Bildschirmplatz verschwenden
• Man kann die Bildlaufleisten abschalten, auch wenn sie zum benützen der Seite notwendig wären

Was im Browser wie "eine" Webseite aussieht, kann aus mehreren Frames, und damit aus mehreren HTML-Datei bestehen. Die wichtigste Datei enthält neue HTML-Tags: <frameset> und <frame>. Alle anderen Dateien enthalten ganz normales HTML wie Sie es schon kennen.

 <frameset cols="60,*"> 
 <frame name="linksframe" src="links.html"> 
 <frame name="inhaltframe" src="inhalt.html"> 
 </frameset> 

Damit die Seite funktioniert müssen 3 Dateien vorhanden sein: index.html, links.html, inhalt.html So könnte die Datei links.html aussehen:

<p><b>Navigation<b></p>
<p>
<a href="inhalt.html" target="inhaltframe">Home</a><br>
<a  href="zwei.html" target="inhaltframe">Seite 2</a><br>
<a href="drei.html" target="inhaltframe">Seite 3</a><br>
<a href="vier.html" target="inhaltframe">Seite 4</a><br>
</p>

Die Dateien inhalt.html, zwei.html, drei.html,und vier.html sind ganz normale html-Dokumente.

[Bearbeiten] Frames in Dreamweaver

Achtung: es ist sehr einfach in Dreamweaver mit ein paar Mausklicks eine komplizierte Webseite mit 100 Frames zu erzeugen. Am Ende hat man keine Ahnung wie die beteiligten Dateien heißen. Das ist schlecht! Zuerst denken + planen, dann erst Frames anlegen!

Um im Dreamweaver mit Frame zu arbeiten müssen Sie als erstes die Anzeige des Frame-Rahmens aktivieren: Anzeige ⇒ Frame-Rahmen. Damit wird im Dreamweaver um jeden Frame ein zusätzlicher Rahmen angezeigt, mit dem Sie diesen Frame dan manipulieren können.

Frame erzeugen: Bei gedrückter ALT-Taste den Frame-Rahmen ins Dokument ziehen Frame auswählen: Bei gedückter ALT-Taste den Framerahmen anklicken.

Das Attribut src des Frames ("Qu." wie "Quelle") gibt an, welche HTML-Datei als erstes in diesen Frame geladen wird. Mit Links können dann aber andere HTML-Seiten geladen werden.

Im Dreamweaver können Sie mit Alt-Klick oder mit dem Tag-Selector jeden Frame und jedes Frameset auswählen und mit dem Eigenschaftesfenster manipulieren.

[Bearbeiten] Layout im Vergleich

[Bearbeiten] Multimedia

[Bearbeiten] Einleitung

In Kapitel 1 haben Sie sich schon einmal mit der Problemstellung beschäftigt, Dateien mit einem anderen Format als HTML in eine Website einbindet. Dazu reicht ein einfacher Link. Diese Methode finden Sie hier noch einmal, unter dem Stichwort "Download".

Weiters werden Streaming Audio, Eingebettete Multimedia-Objekt, Flash und Java-Applet behandelt. Am Ende des Kapitels wissen Sie welche Technik Sie für welche Aufgabenstellung verwenden können.

[Bearbeiten] Download

<img src="pdf.gif" alt=""> Folien zu Dateisystemen, 450 KB pdf <a href="docs/dateisysteme-sw.pdf">sw</a> oder <a href="docs/dateisysteme.pdf">farbe</a>

Beispiel: PDF (oder Audio) zum Download anbieten: ganz normaler Link. Achtung: Als Gestalterin der Seite kann ich nicht festlegen, ob die PDF-Datei gespeichert werden soll, oder ob sie gleich im Browser (mittel PlugIn) angezeigt werden soll.

[Bearbeiten] Streaming: Real Audio für Arme

{{:Handbuch Webdesign: Vorlage: Abbildung|Datei:Handbuch Webdesign-Multimedia 2.jpg||}

Mit dem (gratis-) Progamm "Real Producer Basic" konvertiere ich meine Audio-Dateien ins rm-Format. Beim Konvertieren muss ich die Qualität auswählen, z.B "für schechtes Modem", oder "für ISDN-Leitung", oder "Für ADS-Anschluss". Mit dem Text-Editor erstelle ich eine Datei mit gleichem Namen, und der Endung ram. In diese Datei schreibe ich die URL, unter der die rm-Datei erreichbar sein wird.

 http://webwelt.horus.at/multimedia/28-hamsterdance.rm

In der Webseite mach ich einen ganz normalen Link zur ram-Datei.

 Musik für <a href="28-hamsterdance.ram">28-er Modem</a>

[Bearbeiten] Einbetten

Falls im Browser ein geeignetes Plugin für diesen Dateityp installiert ist, wird er das Plugin als Teil der Webseite anzeigen, und das Plugin tut dann was es tut. Es gibt viele verschiedene Plugins für ein und denselben Datentyp.

 <embed src="B5.mov" 
 width="160" 
 height="140" 
 align="left" 
 autostart="false">
 </embed>

Für Eingebettetes Audio bieten sich noch die Attribute hidden="true" und loop="true" an. Nachteil dieser Methode: beim Erstellen der Seite kann ich nicht kontrollieren, welches der vielen verschiedene Plugins verwendet wird. Je nach Plugin sieht das ganze dann verschieden aus.

[Bearbeiten] Flash verwenden

Mit Flash können Sie sich einen Media-Player selbst bauen, und bis ins Detail selbst gestalten.

ToDo: Einbettung von swf-Dateien beschreiben

[Bearbeiten] Java-Applets verwenden

Achtung: die Programmiersprache Java hat nichts mit der Programmiersprache Javascript zu tun ( Um genau zu sein: Java gibt es schon länger als Javascript, Javascript wurde zu einer Zeit erfunden als Java mega-in war. Deswegen wurde der Name Javascript in Anlehnung an Java gewählt. Ein Marketing-Gag, keine inhaltliche Ähnlichkeit.) .

Java-Applets sind kleine Java-Programme, die man in einer Webseite verwenden kann um gewisse Effekte zu erziehlen. Ursprünglich konnte man nur mit Java-Applets Animationen zeigen (aber dafür gibt?s jetzt ja animierte gifs), Rollover-Effekte machen (aber dafür gibt?s ja jetzt Javascript), oder komplexe interaktive Animationen darstellen (aber dafür gibt?s jetzt ja Flash). Es sind also relative wenige Anwendungsbeispiele für Java-Applets übrig geblieben. Hier Eines:

Datei:Handbuch Webdesign-Applet 1.gif

Wenn man mit der Maus über das Bild fährt "kräuselt" ein Wasser-Effekt das Bild. Der dazugehörige HTML-Code (etwas gekürzt):

<applet archive="AnWater.jar"
code="AnWater.class" 
width="350" height="70">
<param name="credits" 
value="Applet by Fabio Ciucci (www.anfyjava.com)">
<param name="res" value="1">
<param name="image" value="aphome.jpg">
<param name="light" value="YES">
<param name="minlight" value="0">
<param name="maxlight" value="100">
<param name="autodesign" value="NO">
<param name="density" value="4">
Sorry, your browser doesn't support Java.
 </applet>

Die dazugehörigen Dateien:

Dieser Effekt entstammt der Applet-Sammlung anfy^[10]. Das Windows-Programm von Anfy hilft beim Schreiben des HTML-Codes und beim Kopieren der nötigen Dateien in den Web-Ordner. In Dreamweaver ist das Symbol für Java-Applet eine dampfende Tasse Kaffee. (Java ist in Kalifornien der Name einer bestimmten Kaffee-Sorte, nach dieser Kaffee-Sorte wurde die Programmiersprache benannt. Ein gutes Beispiel für ein Icon, das nicht international funktioniert)

Mit dem Eigenschaften-Fenster können Sie die Parameter für das Applet eingeben.

[Bearbeiten] Zusammenfassung

So viele verschiedene Techniken, blos um ein bisschen Audio und Video und Interaktion in der Webseite unterzubringen? Ja, sobald man die einfachen Medien Text und Standbild hinter sich lässt wird das Erstellen von Webseiten wesentlich komplizierter.

Flash ist für Sie als DesignerIn ein interessantes Thema, das aber den Umfang dieses Buches sprengt.

[Bearbeiten] Javascript

[Bearbeiten] Einleitung

Mit Javscript haben Sie schon gearbeitet – wahrscheinlich ohne es zu bemerken: Wenn Sie ein Rollover-Bild in Dreamweaver erstellen siehe Kapitel 4, dann baut Dreamweaver dafür ein paar Zeilen Javscript in Ihre Webseite ein.

Javascript ist eine Programmiersprache im Web-Browser, mit der man Webseiten interaktiver gestalten kann: der Browser reagiert dann nicht nur auf Klicks auf Links und Formular-Eingaben, sondern z.B. auf das Bewegen der Maus über ein Bild, wie beim Rollover.

Javascript ist eine richtige Programmiersprache – mit Variablen, Schleifen, Verzweigungen – und damit schwerer zu erlernen als HTML oder CSS. Glücklicherweise kann man schon mit wenigen Zeilen Javascript gute Effekte erzielen. Und man kann relativ einfach erlernen fertige Javascript-Programme in die eigenen Webseite einzubauen.

[Bearbeiten] die Programmiersprache

JavaScript ist eine Sprache, die 1995 bei Netscape erfunden^[11] und in den Browser Netcape 2.0 eingebaut wurde. Andere Browserhersteller haben sich angeschlossen, heute (2004/05) funktioniert Javascript u.a. in Mozilla, Netscape, Firefox, Internet Explorer, Opera,

[Bearbeiten] Der <script>-Tag im Body

Javascript-Programme können direkt in die Webseite mit dem <script>-Tag eingebettet werden. Das Programm wird dann beim Aufbau der Seite ausgeführt:

   <h1>Selbstzerstörung</h1> 
   <script>
   for (i=10; i > 0; i--) {
       document.write("<br>in " + i + " Millisekunden");
   }
   </script>
   <p><strong>Peng!</strong>

Erklärung: Nach der Überschrift "Selbstzerstörung" werden vom Javascript-Programm 10 Zeilen HTML-Code erzeugt, die vom Browser wie ganz normaler HTML-Code dargestellt wird. Danach wird der Absatz mit Peng! angezeigt.

[Bearbeiten] die onEvent - Attribute

Meist werden Javascript-Programme aber so geschrieben, dass sie nicht gleich beim Laden der Seite starten, sondern erst wenn gewisse Ereignisse (Events) eintreten. Bei manchen HTML-Tags gibt es Attribute die mit on beginnen (onClick, onSubmit, onLoad,...), als Wert enthalten diese Attribute das Javascript-Programm das ausgeführt werden soll.

   <h1>Selbstzerstörung</h1>
   <form>
   <input type="button" value="Selbstzerstörung"
   onClick="alert('peng')">
   </form>

Ein ganz normales Formular mit einem Knopf wird angezeigt. Erst wenn der Knopf gedrückt wird, wird das Event "onClick" ausgelöst, und damit das Javasprogramm gestartet. Das Javaprogramm erzeugt ein Popup-Fenster mit dem Text "peng"

Ein paar typische Events mit Ihren HTML-Tags:

[Bearbeiten] Der <script>-Tag im Head

Es ist üblich, im Head-Bereich des Dokuments Funktionen (das sind kleine, wieder verwertbare Proramm-Teile) zu definieren, die später verwendet werden:

 <head>
 <script language="javascript">
 function zeige(t) { 
    t = "!!!" + t + "!!!"; 
    alert(t); 
 }
 </script>
 </head>
 <body>
 <h1>Selbstzerstörung</h1>
 <form>
 <input type="button" value="Selbstzerstörung" onClick="zeige('peng')">
 </form>

Die Funktion zeige wird duch das Javascript-Programm im <head> definiert, aber noch nicht ausgeführt. Erst durch den Aufruf der Funktion im onClick-Event des Buttons wird die Funktion gestartet.

[Bearbeiten] Was kann ein Javascript-Programm

Ein Javascript-Programm kann nur Elemente der Webseite und des Webbrowser kontrollieren, sonst nichts. Typische Anwendungen sind:

• Rollover-Bilder – Wenn die Maus über ein Bild bewegt wird, wird dieses Bild durch ein Neues ersetzt.
• Anzeige (und scrollen) von Text in der Statusleiste des Browsers
• Öffnen von neuen Browserfenstern mit definierter Größe und Position am Bildschirm
• Automatisches Ausfüllen von Web-Formularen, z.B. bei Eingabe der Stückzahl wird der Gesamtpreis (= Preis mal Stückzahl) automatisch berechnet und angezeigt.
• Ebene (<div> mit absoluter Position) unsichtbar oder sichtbar machen.
• Prüfen auf Plugin, falls das Plugin vorhanden ist wird auf eine neue Webseite weitergeleitet.
• Bei Frame-Seiten: Austausch der Dokumente in mehreren Frames (z.B. Inhalt und Navigation mit nur einem Click austauschen)

[Bearbeiten] Probleme mit Javascript

Das Programmieren von Javascript ist sehr schwierig. Nicht weil die Programmiersprache schwierig wäre, sondern weil die verschiedenen Browserhersteller absichtlich unterschiedliche Javascript-Varianten in Ihre Browser einbauen. Ein Beispiel: um die Breite des Browser-Fensters auszumessen gibt es mehrere Varianten:

In diversen Foren und auf verschiedenen Webseiten werden fertige Javascript-Programme angeboten. Dabei findet man immer wieder veraltete Javascript-Programme, die in den neuesten Browser-Versionen nicht mehr funktionieren. Deswegen ist es wichtig auf das Erstellungsdatum zu achten.

[Bearbeiten] Die Standardisierung von Javascript

Die Syntax, also die allgemeine Schreibweise der Sprache, wurde als ECMASkript ( Fehler! Verweisquelle konnte nicht gefunden werden.) von der &quote;European Computer Manufacturers Association&quote; standardisiert. Das allein reichte aber nicht aus, um die Unterschiede zwischen den Browsern zu beseitigen.

Schließlich befasste sich das World Wide Web Konsortium mit dem Problem. Die Lösung des Konsortiums, deren Version 1.0 am 1. Oktober 1998 eine offizielle W3C-Empfehlung (recommendation) wurde, ist das Document Object Model (DOM), ein Modell wie die Elemente jeder beliebigen Webseite (jedes Dokuments) von einer objektorientierten Skriptsprache aus manipuliert werden können. Das DOM fasst ein HTML- oder XML-Dokument als Baum auf. Für das Dokument in Listing 3 ergibt das einen Baum wie den links gezeigten.

Das DOM einer Webseite kann man sich als Baum vorstellen, so ähnlich wie die Ordnerstruktur im Dateisystem. So sind in Beispiel der markierte <li>-Tag innerhalb des <ol>-Tags, der <li>-Tag enthält wiederum einen <a>-Tag.

<html>
<body>
<p>Navigation</p>
<h1>Überschrift</h1>
<div class="intro">
<h2>Dies und Das</h2>
<ol>
<li><a id="erster" href="#bla">erster Link</a></li>
<li><a href="#bla">zweiter Link</a></li>
<li><a href="#bla">dritter Link</a></li>
<li><a href="#bla">vierter Link</a></li>
. . . 
</ol>
</div> 

Mit diesem Modell kann man nun in einem Javascript-Programm die Webseite viel tief greifender manipulieren als mit "klassischem" Javascript. Mögliche Befehle wären:

• Mache ein beliebiges Element des DOM unsichtbar (z.B. die ganze Liste)
• Ändere den Style eines beliebigen Elements (z.B. die Schriftart der Überschrift)
• Füge neue Elemente ein (z.B. drei zusätzliche Listenpunkte nach dem ersten Listenpunkte einfügen)
  Methoden für das DOM

Mit dem DOM wurden diverse Zugriffs-Methoden definiert, zum Beispiel document.getElementById() zum Auswählen eines HTML-Tags mit einer Bestimmten ID. Listing 4 zeigt ein Fragment eines Javascript-Programmes, das das Dokument aus Listing 3 modifiziert.

 document.getElementById("erster").href = "http://multimediaart.at";

Doch selbst bei Verwendung des DOM gibt es immer noch kleine Unterschiede zwischen den Browsern. Eine gute Informationsquelle dazu ist quirksmode.org^[12] von Peter-Paul. Er hat auf dieser Site eine Liste von Beispiel-Skripts veröffentlicht, und dazu jeweils die Kompatibilität von 6 verschiedenen Browsern getestet. Abbildung 97 Zeigt ein Beispiel.

Durch die Einführung des DOM hat sich die Situation langsam verbessert. Als genug von den ?alten Browsern? ausgetauscht waren konnte man den neuen Standard auch benutzen.

Für Javascript+DOM war ca. 2005 dieser kritische Level an Verbreitung erreicht. Seitdem gibt es ímmer mehr Webapplikationen die Javascript und die DOM konsequent einsetzten. In Kombination mit dem XMLHTTPRequestObject, das das asynchrone Nachladen von Daten ermöglicht, konnte so eine neue Qualität von Interaktion erreicht werden. Ein Beispiel für diese Art von Interaktivität ist das in Abbildung 98 gezeigt Autocomplete-Eingabefeld.

In diesem Beispiel hat die Leserin erst einen Buchstaben in das Eingabefeld eingetippt: &quote;a&quote;. Diese Eingabe wurde über das XMLHTTRequestObject an ein serverseitiges Skript gesandt, dass eine Datenbankabfrage durchführt. Das serverseitige Skript liefert als Output ein kleines HTML-Fragment mit einer Liste von Namen:

<ul>
<li>ameier</li>
<li>amüller</li>
<li>ahuber</li>
<li>achovski-grauhuber</li>
</ul>

Dieses HTML-Fragment wird vom Javascript-Programm im Client mittels DOM in die Webseite eingefügt. Durch ein Stylesheet erscheint die HTML-Liste nicht als Liste sondern wie in der Abbildung gezeigt. Im Februar 2005 verwendete Jesse James Garrett für diese Kombination zum ersten Mal die Abkürzung AJAX^[13] . Seither entstanden eine Reihe von Javascript-Libraries, die das Entwickeln von AJAX-Applikationen wesentlich beschleunigen. Für alle serverseitigen Programiersprachen (Perl, Java, PHP, Ruby) gibt es ebenfalls Frameworks, Klassen, Libraries, die das serverseitige Erzeugen von Javascript unterstützen. Ob sich hier ein Framework durchsetzt, oder ob die Vielzahl von Angeboten auf Dauer im Einsatz bleibt ist derzeit (Herbst 2006) noch nicht absehbar.

Wenn die Situation so unangenehm bis unübersichtlich ist, warum wird Javascript und AJAX dann überhaupt verwendet? Die Antwort ist ganz einfach: weil es keine Alternative gibt. Javascript ist die einzige clientseitige Programmier­sprache, die in den meisten Browsern eingebettet ist. Keine andere Sprache hat eine so weite Verbreitung. Bevor Sie aber ein Programm mit Javascript/AJAX schreiben, sollten Sie immer erst recherchieren, ob es nicht für Ihre Problemstellung bereits eine fertige Lösung oder ein gutes Framework gibt. Ein funktionierendes, bereits getestetes Javascriptprogramm an Ihre Bedürfnisse anzupassen oder auf mit einem umfangreichen Framework ein Problem zu lösen ist immer weniger Arbeit (und braucht weniger Nerven) als "von Grund auf" zu programmieren – egal wie gut Sie programmieren können.

[Bearbeiten] Quellen

1. ↑ http://de.selfhtml.org selfhtml
2. ↑ http://de.selfhtml.org
3. ↑ http://www.drweb.de/weblog/weblog/?p=527
4. ↑ http://www.stichpunkt.de/css/css-tipps.html#schrift
5. ↑ http://selfhtml.teamone.de
6. ↑ http://de.wikipedia.org/wiki/Rot-Gr%C3%BCn-Blindheit
7. ↑ hier fehlt die Quelle
8. ↑ http://www.upsdell.com/BrowserNews/stat.htm
9. ↑ http://www.adobe.com/downloads/#webdesdev
10. ↑ http://www.anfyteam.de/
11. ↑ http://wp.netscape.com/comprod/columns/techvision/innovators_be.html
12. ↑ http://quirksmode.org
13. ↑ http://www.adaptivepath.com/publications/essays/archives/000385.php