HTM-Editor
 

Einführung in die Arbeit mit einem Editor

In unseren Seminaren haben wir gute Erfahrungen mit dem Programm Dreamweaver gemacht. Der Aufbau ist gekennzeichnet durch mehrere 'schwebende' Fenster, die durch Anfassen der Titelleiste verschoben werden können. Unter dem Menüpunkt Fenster kann man mit dem Befehl: "schwebende Fenster anordnen" auch Ordnung in den Aufbau brin-gen.
In der Menüleiste finden sich verschiedene Unterpunkte, die zum Teil schon aus anderen Programmen bekannt sein dürften, wie Datei, Bearbeiten, Einfügen, Ändern, Text, Fenster, Ansicht.

Die wichtigsten Fenster sind:
  • Objekte
  • Eigenschaften
  • Verlauf
  • HTML-Quellfenster

Bildschirm von Dreamweaver:

Bevor mit einem neuen HTML-Dokument begonnen wird, sollte ein eigener Ordner angelegt werden. Hier hinein sollten auch die Bilder, ggfs. in einem Unterordner abgelegt werden. Als erstes müssten dann unter dem Menüpunkt Ändern - Seiteneigenschaften gewisse Grundeinstellungen vorgenommen werden, wie z. B. der Seite eine Hintergrundfarbe zuzuordnen und ihr einen Namen zu geben. Die Internetseite sollte in dem Textfeld Titel unbedingt einen Namen erhalten, der dann beim Aufruf in der Titelleiste des Browsers erscheint. Ansonsten steht dort nämlich nur "Unbekanntes Dokument"

.

Um eine Hintergrundfarbe für die Seite auszuwählen, muss nicht der Hexadezimalcode der Farbe in das Textfeld eingegeben werden, einfacher geht dies indem eine Farbe aus der Palette ausgewählt wird. Statt einer Hintergrundfarbe kann auch ein Hintergrundbild ausgewählt werden, indem der Button Durchsuchen angeklickt und die entsprechende Grafikdatei ausgewählt wird. Ei-ne Hintergrundfarbe sollte trotzdem angegeben werden, da diese beim Aufrufen der Seite sofort erscheint, während das Laden des Hintergrundbildes Zeit beansprucht. Je nach gewählter Schriftfarbe ist der Text dann schon während des Ladevorgangs lesbar.
Zur Vereinfachung können unter dem Menüpunkt Farben die Text- und Hyperlinkfarbe für das gesamte Dokument voreingestellt werden.


Wichtig ist auch die Menüoption Text, in der sämtliche Befehle zu finden sind, die die Gestaltung eines Textes ermöglichen. Dazu muss der zu bearbeitende Text markiert sein. Der Menüeintrag Text ergänzt die Formatierung v. a. um solche Befehle, die nicht im Ei-genschaftenfenster zu finden sind. So z. B. das Untermenü Stil.
Hier sind die gängigen Stile zu finden, die in der Regel auch aus der Textverarbeitung bekannt sind, wie z. B. unterstrichen, durchgestrichen oder hervorgehoben.

Die Textformatierung, also Einstellen der Textgröße, der Textfarbe, der Schriftart, des Stils ... kann man im Eigenschaftenfenster vornehmen, ebenso die Ausrichtung (links- oder rechtsbündig oder zentriert) des Textes.

Listen
Listen sind in Dreamweaver sehr einfach zu erstellen. Man kann dazu das Symbol im Ei-genschaftenfenster benutzen oder über den Menüeintrag Text - Liste - ... gehen. Man wählt diesen Befehl, wenn die Liste beginnen soll und drückt am Ende eines Listenein-trags einfach die ENTER-Taste. Automatisch entsteht der nächste Eintrag. Die Art der Liste (geordnet, ungeordnet, ...) wird vorher bestimmt.

Grafiken
Man kann Bilder einfügen über Einfügen - Grafik oder über das entsprechende Symbol im Objektfenster unter der Kategorie 'Allgemein'. Das Positionieren der Grafik funktioniert per drag&drop bzw. mit den Pfeiltasten. Die meisten Veränderungen lassen sich über das Eigenschaftenfenster steuern: z. B. die Größe verändern. Bei der Ausrichtung des Bildes muss man über den Menüpunkt Text - Ausrichtung gehen.

Rollover-Bilder
Als Rollover-Bilder werden verlinkte Bilder bezeichnet, die sich verändern, wenn die Maus darüber fährt. Dies funktioniert so, dass das veränderte zweite Bild zusammen mit dem ersten geladen, aber nicht sichtbar wird. Es liegt an derselben Position wie das erste Bild (sozusagen darunter) und ersetzt dieses, wenn die Maus darüber fährt. Verschwindet die Maus aus dem Bereich des Bildes, ersetzt das erste Bild wieder das zweite. Beim Klicken auf das Bild wird die Seite aufgerufen, auf die das Bild verweist.
Rollover-Bilder lassen sich ganz leicht einfügen. Man wählt aus: Rollover-Bild einfügen und wählt in der erscheinenden Dialogbox die entsprechenden Quelldateien aus (für das erste Bild, das zweite und den Link).