www.BuntesWeb.de
www.BuntesWeb.de - Computer & Internet
 
 

Das Homepage-Handbuch speziell für blutige Anfänger

Grundelemente einer Webseite - Der "Seiten-Kopf"

Grundlegende Eigenschaften der Webseite werden bei Namo WebEditor in den Dokumenteigenschaften geregelt. Sie stehen dann für den Betrachter unsichtbar in einem speziellen Bereich im Kopf des HTML-Dokumentes. Unsichtbar? Naja, nicht ganz. Immerhin sieht der Betrachter ja die Auswirkungen dieser Einstellungen. Neben einigen anderen Dingen, auf die wir aber erst später zu sprechen kommen, werden hier die Grundeinstellungen für die farbliche Gestaltung der Webseite festgelegt. Also der Seitenhintergrund und die Schriftfarben. Außerdem können die Seitenränder eingestellt werden und das Dokument bekommt einen Seitentitel. Fangen wir damit mal an...

Der Seitentitel

Der Seitentitel wird vom Webbrowser in der Fenstertitelzeile angezeigt und dient auch als Text für Favoriten. Die Suchmaschinen zeigen den Titel als Linktext an und nehmen Stichworte, die sich im Titel befinden ganz besonders wichtig. Jede Webseite sollte also unbedingt einen treffenden Titel haben.

Bevor Sie also damit beginnen, irgendwelche Inhalte im Editor zu erstellen, bearbeiten Sie die Dokumenteigenschaften und geben Sie den Titel ein, Mit Namo WebEditor wählen Sie aus dem Menü: [Datei - Dokumenteigenschaften] oder drücken Sie einfach [Strg]+[F1]. Wechseln Sie dort auf den Karteikartenreiter "Allgemein". Dann finden Sie (u.a.) das Eingabefeld "Titel:"

Geben Sie einen Titel ein, der perfekt zu dieser Seite passt und der die wichtigsten Stichworte enthält. Doch fassen Sie sich trotzdem kurz. Maximal 60 bis 65 Zeichen sollten genügen. Jede Seite bekommt einen eigenen Titel. Beschreiben Sie also nicht Ihre ganze Homepage, sondern nur die eine Seite, zu der dieser Titel gehört. Der allgemeine Titel der Homepage dient nur als Seitentitel der Eingangsseite.

Hintergrund der Seite

Keine Wand ohne Tapete. Wenigstens anstreichen müssen Sie die Wand. Das selbe gilt für eine Webseite. Natürlich würde die Information auch herüberkommen, wenn Sie einfach nur schwarzen Text auf weißem Grund schreiben würden. Aber das sieht nicht nur erbärmlich aus, davon bekommt der Leser vermutlich auch bald Kopfschmerzen.

Sie haben grundsätzlich die Wahl zwischen einer Hintergrundfarbe oder einem Hintergrundbild. Sie können auch beides zusammen verwenden. Dann wird allerdings nur das Hintergrundbild angezeigt. Es macht aber trotzdem Sinn, da die Hintergrundfarbe so lange zu sehen ist, wie das Bild zur Übertragung braucht. Und sollte es mal technische Probleme mit dem Bild geben, dann wird, quasi im Notfall, auf die Hintergrundfarbe zurückgegriffen. Die Hintergrundfarbe scheint auch durch, falls Sie eine transparente Hintergrundgrafik verwenden.

Was Sie beachten müssen

Anfänger machen nun aber sehr gern den Fehler, dass sie eine supertolle, sehr auffällige und stark gemusterte "Tapete" verwenden und darauf dann den direkt den Text ausbringen - womöglich noch in einer verschnörkelten Schriftart. Am Ende kann man diese Homepage dann zwar anschauen, aber leider nichts mehr lesen. Ähnlich übel kann es auch aussehen, wenn man eine ungünstige Kombination aus Schrift- und Hintergrundfarbe wählt.

OK, um ein paar eigene Erfahrungen kommen Sie vermutlich nicht herum. Letztlich kommt es ja auch immer darauf an, welchen Zweck die Homepage erfüllen soll. Aber nehmen Sie einfach die allgemeine Erfahrung mit, dass beim Hintergrundbild das selbe gilt wie bei allen Bildern auf der Homepage: "Weniger ist oft mehr". Das Hintergrundbild ist nicht die Hauptsache, sondern Beiwerk. Es sollte also das Lesen der Information nicht erschweren und auch nicht davon ablenken.

Damit es für das Auge angenehmer wird, sollte man einen guten aber doch nicht zu harten Kontrast zwischen Text und Hintergrund erzeugen. Man wählt in der Regel einen hellen, aber nicht zu grellen Hintergrund und darauf eine dunkle Schrift. Damit die Schrift gut lesbar bleibt, sollte der Hintergrund nach Möglickeit überhaupt nicht gemustert sein. Wenn es denn sein muss, dann wähle man zumindest kein zu unruhiges Muster. Oft hilft es, wenn man das Hintergrundmuster mit Hilfe eines Bildbearbeitungsprogramms 'weichzeichnet', also unscharf darstellt und den Farbkontrast (die Sättigung) etwas verringert.

Mein Tipp: In einem späteren Kapitel lernen Sie etwas über Tabellenzellen. Diese können einen eigenen Hintergrund haben. Wenn Sie also eine auffälligere "Tapete" verwenden wollen, dann setzen Sie den Text einfach in eine Tabellenzelle und wählen Sie dafür einen ruhigeren Hintergrund.

So bestimmen Sie den Hintergrund der Webseite

Sie müssen dem Browser nur sagen, welches Bild er verwenden soll. Alles andere macht er von allein. Mit Namo WebEditor wählen Sie das Hintergrundbild und/oder die Hintergrundfarbe in den Dokumenteigenschaften (Strg-F1) auf der Registerkarte "Darstellung". Verwenden Sie das Eingabefeld "Hintergrund:", um einen geeigneten Wert einzugeben oder wählen Sie mittels Farbauswahlmenü die gewünschte Farbe aus. Für das Hintergrundbild dient das Eingabefeld "Hintergrundbild". Geben Sie den Namen der gewünschten Bilddatei ein oder verwenden Sie die Symbole "Durchsuchen" oder "ClipArt", um ein Bild auszusuchen.

Besondere Eigenschaften von Hintergrundbildern

Wie alle Bilder, so muss auch das Hintergrundbild als Datei im Homepageverzeichnis abgelegt werden und ist nicht etwa Bestandteil der HTML-Datei. Obwohl Namo WebEditor Ihnen gestattet, Bilder von irgendwoher einzubinden, tun Sie gut daran, wenn Sie das gewünschte Hintergrundbild zunächst in den Homepageordner kopieren. Sollten Sie also ein Bild aus der ClipArt-Sammlung von Namo WebEditor auswählen, dann befindet sich dieses zunächst in einem temporären Ordner. Erst wenn Sie das HTML-Dokument speichern, werden Sie nach dem endgültigen Speicherort gefragt. Sorgen Sie dafür, dass es in den Dokumentenordner kopiert wird.

Das Hintergrundbild soll in der Regel die komplette Seite hinterlegen. Aber man soll keine riesigen Bilder verwenden. Statt dessen wird eine kleine Grafik als Kachel verwendet. Sie wird also zunächst nebeneinander und dann untereinander so lange dupliziert, bis der Seitenhintergrund komplett gefüllt ist. Das macht der Browser automatisch, so dass man ihm nur das Bild zur Verfügung stellen muss.

Beispiel: Hier ein typisches Hintergrundmuster:
basket_blue.gif
Der Browser wird es oben links auf der Seite einfügen und dann so lange nach rechts hin kopieren, bis die Seite damit gefüllt ist, etwa so:

x

Im Anschluss daran wird die Seite nach unten hin komplett aufgefüllt; so ungefähr:

x

Der englische Fachbegriff für Hintergrundbilder ist "Wallpaper", zu deutsch also "Tapete". Eigentlich handelt es sich vielmehr um Kacheln. Diese spezielle Art des sich nahtlos wiederholenden Musters nennt man "Pattern" (in der Texttilbranche auch Rapport). Oft ist auch von "Texturen" die Rede - also von der Simulation einer Oberfläche.

Im HTML-Code sieht das etwa so aus: <body background="hintergrundbild.gif">
Sie sehen schon, das ist ganz einfach nur der Dateiname des Bildes. Für die Kachelung sorgt der Web-Browser schon ganz von allein.
 

Grundeinstellung der Textfarben

Normaler Text

Die Farbe des Textes lässt sich für das gesamte HTML-Dokument festlegen. Aber keine Angst, dies ist nur eine Grundeinstellung. Sie können natürlich trotzdem noch jederzeit die Schiftfarben mitten im Dokument ändern, falls Sie das für erforderlich halten.

Mit Namo WebEditor stellen Sie diese Grund-Schriftfarbe über die Dokumenteigenschaften, Registerkarte "Darstellung" ein. Im Eingabefeld "Text:" geben Sie die gewünschten Farbwerte ein oder verwenden Sie das Farbauswahlmenü.

So könnte das im HTML-Code z.B. aussehen, wenn man ein schönes dunkles Blau für die Schrift wählt:
<body text="#000055">

Text mit Hyperlink

Wird Text mit einem Hyperlink versehen, dann ändert sich seine Farbe. Wenn man nichts anderes definiert hat, dann werden dafür die Farben entsprechend den Grundeinstellungen des jeweiligen Browsers verwendet. Meist ist das dann Blau für einen normalen Link und Violett für einen Link, den man bereits besucht hatte. Im Moment des Klicks nimmt der Link gern die Farbe Rot an. Die Farben für diese 3 Linkzustände (normal, besucht, aktiv) kann man in den Dokumenteigenschaften einstellen. Bei Namo WebEditor geht das auf der selben Registerkarte, wo man auch die Schriftfarbe für normalen Text auswählt:
.

Die Einstellung "Aktiver" Link ist nicht zu verwechseln mit einer Farbänderung bei Mausberührung - dem sog. Mouseover-Effekt. 'Aktiver Link' heißt nur, dass dieser Link eben angeklickt wurde. Da man in diesem Moment auch schon zu der entsprechenden Seite wechselt, nimmt man diesen Linkzustand nur setten wahr. Der Mpuseover-Effekt hingegen kann mit normalen HTML-Mitteln nicht erzeugt werden. Hierzu bedarf es CSS und darauf komme ich erst viel später in diesem Handbuch.

Hier eine typische HTML-Zeile mit geänderten Text- und Linkfarben - und zwar (sehr) dunkelblauer Text, dunkelrote Links, besuchte Links graubraun. Aktive Links weinrot - nur mal so als Beispiel:
<body text="#000055" link="#770000" vlink="#663333" alink="#CC3333">
 

Seitenränder

Damit die Inhalte einer Seite nicht unmittelbar bis an den Bildschirmrand heranreichen, verwendet jeder Browser einen kleinen Rand. Wenn man die Breite dieses Randes nicht dem Browser oder dem Zufall überlassen möchte, dann muss man die Breite des Randes definieren.

Mit Namo WebEditor bewerkstelligen Sie das über die Dokumenteigenschaften, Registerkarte "Stile". Dort finden Sie die Eingabefelder für Ränder links und oben. Angenommen, Sie wählen jeweils 50 (Pixel) als Seitenrand, dann erzeugt Namo WebEditor folgenden HTML-Code:
<body leftmargin="50" marginwidth="50" topmargin="50" marginheight="50">

In HTML sind der Einfachheit halber nur Angaben für den linken und den oberen Seitenrand vorgesehen. Der rechte Rand wird einfach genau so breit wie der linke und der untere entspricht dem oberen Seitenrand. Dass Namo WebEditor hier 4 Attribute einträgt liegt daran, dass Netscape und der Internet-Explorer unterschiedlich bedient werden müssen.


Damit haben wir das Grundelement 'Seitenkopf' hinreichend besprochen.
Das nächste und völlig unverzichtbare Grundelement ist der Text
Weitere Grundelemente einer Webseite sind: 'Hyperlinks' und Bilder ,
sowie die Ordnungshilfsmittel Listen und Tabellen.
 


Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.