Top im Web BASIC - eine Webpublishing-Einführung
Kurs der Universität Bern

Teil 6

Zuerst einige weitere Tricks, eine Seite übersichtlicher und ansehnlicher zu machen, welche die einen oder anderen bereits entdeckt haben werden:  

• Seitenattribute (Farben, Hintergrundbild)
• Schriftarten
• Nummerierungen und Listen
• Horizontale Linien

Seitenattribute und Hintergrundbilder

Öffnet Eure Beispiel-Website im Composer. Ein Klick auf "Format / Page Colors and Background" ("Absatz / Seitenfarben und Hintergrund") lässt folgendes Fenster erscheinen:

Hier könnt Ihr nun diverse Angaben machen, wie Eure Seite aussehen soll. Die hier gemachten Angaben betreffen die gesamte offene Page. "Active Link Text" ("Text aktiver Verbindungen") gilt für Links, die gerade in einem anderen Fenster offen sind; "Visited Link Text" ("Text benutzter Verknüpfungen") für solche, die man schon mal angeklickt hat. Man kann aber problemlos für alle Link-Arten die selbe Farbe wählen.

Im Menu "Format / Page Title and Properties" ("Absatz / Seitentitel und Eingenschaften") solltet ihr nun einen Titel (deutsche Netscape-Fassung: etwas missverständlich als "Name" bezeichnet) für die Seite eingeben. Wir hatten dies ganz zu Beginn schon einmal.

Dieser wird im Tag <title> im Seitenkopf abgelegt und hat nichts mit Seitenüberschriften oder Dateinamen zu tun - dies ist eine zusätzliche Beschreibung, die SEHR wichtig ist, denn Suchmaschinen schauen hier, ob eine Seite wichtig ist oder nicht - es ist also gut, wenn man hier einen aussagekräftigen Titel mit den wichtigsten Wörtern wählt, welche die Seite charakterisieren.

Was im Title steht, erscheint zudem im blauen Balken oben im Fenster. "Author" und "Description" ergeben sogenannte "Meta Tags" - auf diese wird später eingegangen. Ihr könnt aber gern auch da was eintragen:

Nochmals zum wichtigen Unterschied zwischen Dateiname und Title:

• Der Dateiname (z.B. index.htm oder beispiel.html) definiert die Datei auf dem Server, z.B. ist http://www.ikmb.unibe.ch/download/beispiel.htm die Datei namens beispiel.htm im Verzeichnis download auf dem IKMB-Server.
• Der Titel (title-Tag) versieht das Dokument mit einem Titel, der etwas aussagekräftiger ist als der Dateiname - was im title-Tag steht, erscheint später im blauen Balken zuoberst im Browser und wird von Suchmaschinen als Infoquelle zur Seite genutzt und oft auch auf der Resultateseite angezeigt:

Um statt einer Hintergrundfarbe ein Hintergrundbild (wegen der Ladezeiten empfiehlt sich ein von der Dateigrösse her kleines Bild!) einzubinden, benützt man die Abteilung "Background Image" ("Hintergrundbild") im oben erwähnten Menu "Format / Page Colors and Background" ("Absatz / Seitenfarben und Hintergrund").

Wichtig: keine grossen Dateien oder Bilder benützen, ansonsten geht der Download zu lang. Zudem wird eine Seite durch nervöse Hintergrundbildchen schnell mal unübersichtlich. Klassische Websites sind nach wie vor "schwarz auf weiss" oder verwenden dezente Farbkombinationen.

Faustregel: Hintergrundbilder oder allzu seltsame Hintergrundfarben sind OUT. Lesbarkeit geht vor Spielerei! Allfällige dezente Hintergrundfarben sind aber OK.

Nun aber zu einer kleinen Test-Aufgabe: Ladet Euch ab einer beliebigen Page einen Hintergrund auf die Festplatte (in einen leeren Raum mit der rechten Maustaste klicken und "Save background as" oder "Hintergrund speichern als" wählen) und benützt ihn als Test-Hintergrund für Eure Website. Jede erdenkliche Grafik im GIF-/JPG-Format kann als Hintergrund dienen; klar, dass man damit auch schreckliche Dinge machen kann...

Schriftarten (Fonts)

Das Hauptproblem bei der Schriftauszeichnung im Web ist, dass die gewählte Schrift auch auf dem Computer installiert sein muss, auf dem eine Website dargestellt wird. Ich habe die folgenden Wörter als "Charter BT" (die frühere Hausschrift des ikmb) formatiert - sie wird auf Euren Compis jedoch als "Times New Roman" erscheinen (standardmässig wie "Arial" auf allen Windows-Maschinen), denn der Charter-BT-Font ist nur auf den Compis im IKMB installiert. Fazit: wer z.B. den Tag <font face="Arial"> einsetzt, um eine serifenlose Schrift darzustellen, wird auf Mac-Maschinen in der Regel kein Glück haben, denn die Standardschrift ohne Serifen heisst im Mac meistens "Helvetica".

Der Browser wird sich - falls die entsprechende, von der Programmiererin gewählte Schrift nicht vorhanden ist - einfach eine ähnliche aussuchen. Grundsätzlich kann man auf Nummer sicher gehen und zwischen einer Standardschrift mit Serifen (Times, Times New Roman = Standard in allen Browsern) und einer ohne (Arial, Helvetica) wählen. Die verbreitetste Webschrift ist Verdana.

Nun kann man im FONT-Tag mehrere, durch Kommas getrennte Schriften angeben - der Browser wird sodann die erste verwenden, die er auf dem Compi findet (z.B. genau hierfür haben wir am Anfang den Umweg über das Bearbeiten des HTML-Quelltextes gemacht!). 

Aufgabe: Wechselt in den Quelltext und vergebt einigen Abschnitten andere Schriftarten. Versuchts mal mit 

<font size =+1 face="Arial, Helvetica, Helv, Geneva, sans-serif">Hier steht der Text</font>

Helv, Geneva und sans-serif sind weitere, manchmal installierte Schriften, die Arial ähneln (vor allem auf Macintosh-und Unix-Systemen).

Das soeben beschriebene ist auch der Grund, warum Netscape Composer standardmässig nur drei Schriftarten zur Auswahl anbietet:

Ihr könnt im Composer-Designmodus also problemlos auch den Text markieren und die Schrift so wählen. Merke: Andere Schriften zu wählen (manche Witzbolde machen ganze Websites mit "Comic sans"), ist sinnlos.

Ebenso ists mit der Schriftgrösse: Es gibt keine "Punkt"-Schriftgrössen wie im Word. Die User sollten möglichst frei sein, ihre Schriftgrösse selbst zu wählen (denn nicht alle sehen gleich gut), ausgehend von einer Standardgrösse.

Ihr könnt also (ausser mit CSS - das würde hier aber zu weit führen) keine fixen Schriftgrössen vergeben, die bei allen gleich aussehen, sondern nur relative Grössen zu dem, was die User in ihrem Browser als Standard gewählt haben (siehe im Internet Explorer z.B. bei "Ansicht / Schriftgrad". Meist wählt man als Web-Standardschrift "minus 1" aus.

Versucht mal, im Composer den ganzen Text zu markieren und auf das Icon "-a" zu klicken:

Am Rande erwähnt: Finger weg von der Textformatierung "unterstrichen" - das sind im Web ausschliesslich Links! Und die werden ja automatisch unterstrichen dargestellt. (Links kann man übrigens mittels CSS auch so formatieren, dass sie nicht unterstrichen sind - doch das würde hier zu weit führen...)

Nummerierungen und Aufzählungen

Mit den entsprechenden Icons kann man einfach Aufzählungen einfügen und nachträglich bearbeiten.

• Das sieht dann 
• zum Beispiel
• so aus (man markiert die als Aufzählung zu 
• formatierenden Asbchnitte und klickt auf das Listen-Logo)
• Mit der ENTER-Taste erzeugt man einen neuen Punkt

1. Auch als
2. Nummerierung geht das wunderbar,
3. wie man sieht.

Mit einem Klick mit der rechten Maustaste in so eine Liste hinein und der Auswahl "List Properties" ("Listen-Eigenschaften") kann man solchen Listen andere Attribute vergeben:

So kann man den "Bullet" (das Aufzählungszeichen) auch  

• Als Ausgefülltes Quadrat
• oder auch anders

• darstellen... oder eine Numerierung mit römischen
• Zahlen... übt dies doch einfach schnell ein bisschen

Horizontale Linien

Solche kann man entweder als Bildchen darstellen, was die Ladezeiten verlängert. Zudem gilt es im modernen Webdesign als hoffnungslos "out", solche allzu "lustigen" Linien zu gebrauchen; das Motto lautet eher "schlichte Schönheit". Z.B. mit dem Tag <hr> (Horizontal Ruler) - im Composer dazu den Befehl "Insert / Horizontal Line" ("Einfügen / Horizontale Linie") wählen, was dies zur Folge hat: 

Nun kann man die Linie aber auch mit der rechten Maustaste anklicken, um ihr im Feld "Horizontal Line Properties" ("Horizontale Linie Eigenschaften") ein anderes Aussehen zu verleihen - dann sieht sie zum Beispiel so aus:

Dies ist eine 200 Pixel breite, zentrierte, 7 Pixel hohe Linie ohne 3D-Schattierung. Und nun seid Ihr dran - auf Eurer Beispiel-Website... 

Weiter gehts mit den Hyperlinks, dem Salz in der Websuppe... wie man sie einfügt, steht hier...  !

Zur Hauptseite zurück gehts hier.