This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
(p für paragraph, also Absatz). Er ist per se unformatiert.
Projekt 2 – Text
35
DREAMWEAVER 4 • Einführung
8.
Geben Sie einen beliebigen Text in den Absatz ein.
Wenn Sie sich diesen Text im Browser ansehen, wird der Zeilenumbruch vom Browser vorgenommen. In unserem Fall wird beispielsweise je nach Bildschirmauflösung der gesamte Text nur in einer Textzeile angezeigt.
9.
36
Betrachten Sie die Vorschau im Browser.
Projekt 2 – Text
DREAMWEAVER 4 • Einführung
10.
Klicken Sie an die Stellen im Text, an denen Sie einen Zeilenumbruch einfügen möchten, und betätigen Sie das Tastenkürzel (ª)+(¢).
Im Browser sehen Sie nun, dass die Umbrüche übernommen wurden. Ein Umbruch entspricht übrigens dem HTML-Tag
.
Lektion 2
Einen Titel vergeben und die Seiteneigenschaften ändern Diese Lektion widmet sich dem Titel und den Eigenschaften einer Website. Der Titel der Seite wird oben im Browser angezeigt und beispielsweise auch für Suchmaschinen als Orientierung verwendet. Die Seiteneigenschaften enthalten neben dem Titel noch einige weitere Einstellungen.
Projekt 2 – Text
37
DREAMWEAVER 4 • Einführung Um einen Titel zu vergeben, müssen Sie Folgendes tun:
1.
Tragen Sie den Titel in das Feld Titel ein.
Wenn Sie nun speichern, sehen Sie den Titel der HTML-Seite schon in der Titelleiste von Dreamweaver.
2.
Sehen Sie sich eine Vorschau im Browser an.
Dort wird der eben eingegebene Titel ebenfalls in der Titelleiste angezeigt. Titel
38
Projekt 2 – Text
DREAMWEAVER 4 • Einführung
3.
Eine weitere Möglichkeit, den Titel einer Seite zu ändern, haben Sie mit dem Dialogfenster Seiteneigenschaften. Sie blenden es mit dem Menübefehl Modifizieren, Seiteneigenschaften oder mit dem Tastenkürzel (Strg)+(J) ein.
4.
In den Seiteneigenschaften können Sie ebenfalls den Titel der Seite angeben. Titel eingeben
Tipp Um ein Hintergrundbild für die Seite festzulegen, klicken Sie auf Durchsuchen und wählen eine Grafik aus, die sich eignet. Allerdings ist es inzwischen ziemlich out, exzessiven Gebrauch von Hintergrundbildern zu machen.
Projekt 2 – Text
Neben dem Titel können Sie in den Seiteneigenschaften auch ein Hintergrundbild und eine Hintergrund-, Text- und Linkfarbe definieren. Einstellungen, die Sie hier vornehmen, gelten für den ganzen Körper der HTML-Seite, da sie im -Tag gespeichert werden.
39
DREAMWEAVER 4 • Einführung
Lektion 3
Textstellen fett hervorheben Oftmals erscheint normaler Text recht langweilig. Dem kann man Abhilfe schaffen, indem man bestimmt Textteile hervorhebt. Da die Unterstreichung schon für Links reserviert ist, bietet der Fettdruck eine gute Alternative. Zuerst müssen Sie die Textteile markieren, die Sie hervorheben möchten:
1.
Markieren Sie das Wort »Fallschirm« durch Ziehen mit der Maus.
2.
Wechseln Sie in den Eigenschafteninspektor und klicken Sie dort auf die Schaltfläche B für fett ausgezeichneten Text.
Der Text ist nun fett ausgezeichnet. Dies entspricht dem HTML-Tag .
40
Projekt 2 – Text
DREAMWEAVER 4 • Einführung
Fett
Wenn Sie den Text fett ausgezeichnet haben, ist die Schaltfläche B gedrückt.
3.
Um die Formatierung wieder aufzuheben, klicken Sie die Schaltfläche erneut an.
Tipp Das geht nur, wenn der Text noch markiert ist.
Lektion 4
Textstellen kursiv hervorheben Eine zweite Methode der Hervorhebung von Textstellen ist die Kursiv-Schreibweise. Sie wird im Prinzip genauso angewendet wie der Fettdruck:
1.
Markieren Sie zuerst den Text, den Sie hervorheben möchten. In unserem Beispiel ist das »Tieren«.
Projekt 2 – Text
41
DREAMWEAVER 4 • Einführung
2.
Wechseln Sie in den Eigenschafteninspektor und klicken Sie dort auf die Schaltfläche I für kursiven Text.
Das Wort »Tiere« wurde damit kursiv ausgezeichnet. Dies entspricht dem HTML-Tag .
kursiv
3. Die kursive Formatierung heben Sie durch erneutes Klicken auf die Schaltfläche I wieder auf. Tipp Dazu muss die Textstelle natürlich markiert sein.
Lektion 5
Schriftart ändern Es gibt verschiedene Schriftarten. Natürlich können Sie einem Text einer Website eine andere als die voreingestellte Schriftart zuweisen. Allerdings gilt es dabei, einiges zu beachten. Jede Schriftart liegt in einer eigenen Datei, auf die der Webbrowser zurückgreift. Da die Schriftart einer Website nicht auf den Rechner des Nutzers übertragen wird (bis auf einige seltene Ausnahmen), muss sie dort schon vorhanden sein, damit der Nutzer die Website mit der richtigen Schrift betrachten kann. Deshalb sollten Sie nur gebräuchliche Schriftarten verwenden. Dreamweaver hält einige Gruppen von solchen Schriften im Eigenschafteninspektor bereit.
42
Projekt 2 – Text
DREAMWEAVER 4 • Einführung In unserem Beispiel wollen wir die Schriftart der Überschrift verändern. Dazu sind folgende Schritte notwendig:
1.
Markieren Sie die Überschrift durch Ziehen mit der Maustaste.
2.
Anschließend wechseln Sie in den Eigenschafteninspektor.
Dort finden Sie neben dem Pull-down-Menü Format das Pull-downMenü für die Schriftart. Pull-Down-Menü für die Schriftart
3.
Wählen Sie im Pull-down-Menü die Schriftarten Arial, Helvetica, Sans-serif aus.
Hinweis Als Serifen bezeichnet man die kleinen Füßchen von Buchstaben. Serifenschriften sind als Text meist leichter lesbar, am Bildschirm haben dagegen serifenlose Schriften Vorteile.
Projekt 2 – Text
Dreamweaver bietet Ihnen immer eine Kombination aus mehreren, sehr ähnlichen Schriftarten. Arial unter Windows ist beispielsweise gleichbedeutend mit Helvetica unter Macintosh. Man gibt die erste Schriftart am Anfang an; ist diese nicht auf dem System vorhanden, so wird nach der nächsten angegebenen Schrift gesucht. Zum Schluss wird irgendeine serifenlose Schrift verwendet.
43
DREAMWEAVER 4 • Einführung
Lektion 6
Schrift vergrößern und verkleinern Bei Überschriften wird die Schriftgröße automatisch vorgegeben, in normalen Absätzen oder bei einzelnen Textstellen dagegen können Sie die Schriftgröße bestimmen. Die Schriftgrößen lassen sich von 1 bis 6 angeben. Standardgröße ist die Schriftgröße 3. Diese Schriftgröße hat im Moment auch unser Textabsatz. Im Folgenden wollen wir diese Schriftgröße ändern. Das Vorgehen für das Vergrößern und das Verkleinern entspricht sich.
1.
Markieren Sie zuerst den ganzen Absatz.
Wechseln Sie in den Eigenschafteninspektor. Dort finden Sie das Pull-down-Menü Größe, in dem Sie die Schriftgröße ändern können. Schriftgröße ändern
2. Klicken Sie das Pull-down-Menü an und wählen Sie dort die Schriftgröße 4.
44
Projekt 2 – Text
DREAMWEAVER 4 • Einführung Neben den absoluten Schriftgrößen von 1 bis 6 können Sie die Schriftgröße auch relativ zu der Standardschriftgröße angeben. Die Skala reicht hier von +7 bis -7. Um beispielsweise die Schriftgröße 4 aus diesem Beispiel zu erreichen, müssten Sie +1 angeben.
Lektion 7
Textausrichtung ändern Die Textausrichtung steuert, wie ein Textabsatz ausgerichtet ist. Es gibt drei Möglichkeiten: linksbündig, rechtsbündig und zentriert. Die Standardeinstellung ist linksbündig, also am linken Rand orientiert. Um sie zu ändern, sind folgende Schritte notwendig:
1.
Klicken Sie in den Textabsatz.
2.
Wechseln Sie in den Eigenschafteninspektor.
Dort ist bisher die Schaltfläche für linksbündig aktiviert. linksbündig
3.
Klicken Sie auf die Schaltfläche zur rechtsbündigen Textausrichtung.
Sie sehen sofort das Ergebnis: Der Text wurde rechtsbündig ausgerichtet.
Projekt 2 – Text
45
DREAMWEAVER 4 • Einführung
4.
Betrachten Sie noch die Vorschau im Browser.
Der Text wird immer rechtsbündig an der Fensterkante des Browsers ausgerichtet. Hinweis Die rechtsbündige oder zentrierte Ausrichtung von Fließtext ist aus optischen Gründen meist nur bedingt sinnvoll.
5. Sie ändern die Ausrichtung wieder, indem Sie das Symbol für linksbündig betätigen.
Lektion 8
Schriftfarbe Sie haben im Laufe dieses Projekts schon fast alles an einem Text geändert, was man ändern kann. Eines fehlt allerdings noch: die Farbe des Textes. Wie man die Textfarbe global ändert, haben Sie schon gesehen, nämlich über die Seiteneigenschaften (Menübefehl Modifizieren, Seiteneigenschaften). In dieser Lektion zeigen wir Ihnen, wie Sie Teile eines Textes einfärben können. Ganz speziell greifen wir hier die Überschrift heraus:
1.
46
Markieren Sie die Überschrift »Fliegen Sie ins Paradies!«.
Projekt 2 – Text
DREAMWEAVER 4 • Einführung
2.
Wechseln Sie in den Eigenschafteninspektor. Dort finden Sie rechts neben dem Pull-down-Menü Größe das Feld Textfarbe. Klicken Sie darauf.
Daraufhin erscheint eine Palette mit verschiedenen Farben.
3.
Wählen Sie in der Palette ein dunkles Blau als Farbe für den Text.
Nachdem Sie eine Farbe für den Text gewählt haben, wird der hexadezimale Farbwert in das Textfeld neben dem Farbfeld eingetragen. hexadezimaler Farbwert
Der hexadezimale Farbwert ist eine bestimmte Schreibweise eines normalen RGB-Farbwerts. Wir wollen hier nicht näher auf diese Notation eingehen, da sich die Farben einfacher über die Palette auswählen lassen. Sie haben vielleicht schon einmal von den so genannten websicheren Farben gehört. Das sind 216 Farben, die sowohl unter Windows als auch am Macintosh bei einer sehr niedrigen Bildschirmauflösung dargestellt werden können. Wenn Sie diese Farben verwenden, sind Sie auf der sicheren Seite. Alle Farben aus der Farbpalette sind websicher. Sie erkennen sie daran, dass die hexadezimale Notation aus jeweils drei gleichen Paaren besteht wie beispielsweise #0022FF oder #000099.
Projekt 2 – Text
47
DREAMWEAVER 4 • Einführung
?
Testen Sie Ihr Wissen! 1. Wie blenden Sie den Eigenschafteninspektor ein? 2. Wo stellen Sie einen Absatz auf eine Überschrift 5 um? 3. Mit welchem Tastenkürzel erzeugen Sie einen neuen Absatz? 4. Welches Tastenkürzel umbricht eine Zeile innerhalb eines Absatzes?
5. Welche absolute Schriftgröße hat ein Absatz, der bei einer Standardschriftgröße von 3 den Wert -2 hat?
6. Wie ist ein Text standardmäßig ausgerichtet?
48
Projekt 2 – Text
DREAMWEAVER 4 • Einführung
PROJEKT
3
Listen & Links In diesem Projekt lernen Sie, wie Sie wichtige Informationen mit Listen ordnen. Außerdem zeigen wir Ihnen, wie Sie einen Link erstellen und innerhalb einer Seite verlinken. Im Einzelnen sind folgende Lektionen in diesem Projekt enthalten:
Lektion 1
Eine ungeordnete Liste anlegen
Lektion 2
Aufzählungszeichen ändern
Lektion 3
In eine nummerierte Liste umwandeln
Lektion 4
Nummerierung ändern
Lektion 5
Links erstellen und verstehen
Lektion 6
Anker setzen
Lektion 7
Auf einen Anker verweisen
49
DREAMWEAVER 4 • Einführung
Lektion 1
Eine ungeordnete Liste anlegen In dieser Lektion zeigen wir Ihnen, wie Sie Ihre Informationen optisch ansprechend anordnen. Dazu können Sie beispielsweise Listen einsetzen.
1.
Öffnen Sie die Datei INDEX.HTM mit dem Text aus dem letzten Projekt.
2.
Klicken Sie an das Ende des Textabsatzes.
3.
Fügen Sie mit (¢) einen neuen Absatz an.
Hinweis Der neue Absatz übernimmt die Formatierungen des vorigen Absatzes. Es werden also Schriftgröße, Schriftfarbe etc. übernommen.
4.
Wechseln Sie nun in den Eigenschafteninspektor. Dort klicken Sie auf das Symbol ungeordnete Liste. Damit verwandeln Sie die markierten Zeilen in eine ungeordnete Liste. Hinweis Eine ungeordnete Liste ist eine Liste mit Aufzählungszeichen wie Kreisen oder Quadraten.
50
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung
5.
Tragen Sie hinter dem Aufzählungszeichen einen beliebigen Text ein.
6.
Wenn Sie (¢) betätigen, wird der nächste Aufzählungspunkt angefügt.
Hinweis Wenn Sie innerhalb eines Aufzählungszeichens (ª)+(¢) betätigen, wird kein neues Aufzählungszeichen angefügt, sondern es erfolgt nur ein weicher Zeilenumbruch.
Projekt 3 – Listen & Links
Wir haben im Folgenden noch zwei weitere Aufzählungspunkte angefügt.
51
DREAMWEAVER 4 • Einführung
Lektion 2
Aufzählungszeichen ändern Ihnen sind die gefüllten Kreise zu langweilig? Dann werden Sie in dieser Lektion fündig. Hier lernen Sie, wie Sie das Aufzählungszeichen ändern.
Hinweis Es ist egal, in
1.
welche der drei Zeilen Sie klicken, da das Aufzählungszeichen für die gesamte Liste definiert wird.
2.
Klicken Sie in eine der Zeilen mit Aufzählungszeichen.
Betätigen Sie den Menübefehl Text, Liste und dort Eigenschaften.
Daraufhin öffnet sich das Dialogfenster Listeneigenschaften. Hinweis Das Dialogfenster Listeneigenschaften erreichen Sie auch über das Kontextmenü, wenn Sie mit der rechten Maustaste in eine Zeile der Auswahlliste klicken.
52
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung
3.
Im Dialogfenster Listeneigenschaften ändern Sie im Pull-downMenü Stil die Art des Aufzählungszeichens auf Quadrat.
4.
Bestätigen Sie dann mit OK.
Nun wurden die Aufzählungszeichen in Quadrate umgewandelt.
5.
Speichern Sie die Datei an dieser Stelle mit dem Menübefehl Datei, Speichern, denn mit diesem Stand der Datei soll später weitergearbeitet werden.
Projekt 3 – Listen & Links
53
DREAMWEAVER 4 • Einführung
Lektion 3
In eine nummerierte Liste umwandeln
Hinweis Wenn Sie eine
In dieser Lektion zeigen wir Ihnen, wie Sie aus der Aufzählungsliste eine nummerierte Liste machen.
nummerierte Liste neu erstellen möchten, funktioniert das genauso wie bei einer Aufzählungsliste.
1.
Markieren Sie alle drei Zeilen der bisherigen Aufzählungsliste.
2.
Wählen Sie den Menübefehl Text, Liste, Geordnete Liste.
Hinweis Alternativ können Sie auch auf die markierten Zeilen mit der rechten Maustaste klicken und dort den Befehl Liste, Geordnete Liste wählen.
54
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung
3.
Alternativ zum Menübefehl aus dem letzten Schritt können Sie auch die Schaltfläche Geordnete Liste im Eigenschafteninspektor betätigen.
Die geordnete Liste nummeriert die einzelnen Zeilen. Tipp Sie können übrigens Aufzählungs- und nummerierte Listen beliebig ineinander verschachteln. So lässt sich auch eine Aufzählung auf der zweiten und dritten Ebene erreichen.
Lektion 4
Nummerierung ändern In dieser Lektion zeigen wir Ihnen, wie Sie das Nummerierungssystem einer geordneten Liste wechseln.
Hinweis Die Nummerie-
1.
rung wird global für alle Zeilen der nummerierten Liste geändert.
2.
Projekt 3 – Listen & Links
Klicken Sie in eine der Zeilen der nummerierten Liste.
Rufen Sie mit dem Kontextmenü oder dem Menübefehl Text, Liste, Eigenschaften das Dialogfenster Listeneigenschaften auf.
55
DREAMWEAVER 4 • Einführung
3.
Dort finden Sie im Pull-down-Menü Stil verschiedene Arten von geordneten Listen. Wählen Sie Große römische Zahlen.
Tipp Testen Sie die anderen Arten der geordneten Listen einfach mal aus.
Achtung Sie müssen im Textfeld Zähler starten den Beginn der Zählung als numerische Zahl angeben. V für eine römische Zahl geht also beispielsweise nicht.
4. Im Textfeld Zähler starten legen Sie fest, bei welcher Zahl der Zähler starten soll. Geben Sie dort »5« ein.
Hinweis Im Dialogfenster Listeneigenschaften können Sie im Bereich Listenelement einen Stil und den Zähler für eine einzelne Aufzählungszeile der Liste individuell ändern.
5.
56
Bestätigen Sie Ihre Änderungen mit OK.
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung
Lektion 5
Links erstellen und verstehen In diesem Abschnitt zeigen wir Ihnen, wie Sie auf andere HTML-Seiten verweisen können. Dazu benötigen wir zuerst eine zweite HTML-Datei, die wir als Ziel für unsere Links wählen können.
1.
Erstellen Sie mit Datei, Neu eine neue Datei.
2.
Schreiben Sie den Text »Der Link hat funktioniert« in die Datei.
3.
Vergeben Sie den Titel »Link« für die Seite.
4.
Speichern Sie die Datei unter dem Namen SCHLANGE.HTM in dem Ordner EIGENE DATEIEN/DREAMWEAVER. Sie haben nun eine Testdatei, auf die Sie aus der alten Datei linken können.
5.
Öffnen Sie mit Datei, Öffnen die Datei INDEX.HTM.
Falls die Datei noch offen ist, können Sie diesen Schritt natürlich auslassen. Grundlage ist die zuvor abgespeicherte Version von INDEX.HTM mit der Aufzählungsliste und Quadraten als Aufzählungszeichen.
Projekt 3 – Listen & Links
57
DREAMWEAVER 4 • Einführung
6.
Markieren Sie die Zeile »giftige Schlangen« der Aufzählungsliste.
7. Wählen Sie den Menübefehl Modifizieren, Link erstellen oder das Tastenkürzel (Strg)+(L). Daraufhin erscheint ein Dialogfenster, in dem Sie die Datei wählen können, auf die Sie verlinken möchten.
8.
Wählen Sie im Dialogfenster Datei auswählen die Datei SCHLANGE.HTM.
58
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung Tipp Sie sollten normalerweise innerhalb Ihrer eigenen Website mit relativen Links verweisen. So bleiben Verweise auch korrekt, wenn sich ein Teil der absoluten Adresse wie beispielsweise der Domainname geändert hat.
Zusätzlich zu den schon bekannten Dialogfenstern zum Speichern einer Datei finden sich im Dialogfenster Datei auswählen zwei Textfelder. Bei URL geben Sie eine Adresse an. Diese kann absolut oder relativ sein. Eine absolute Adresse hat meist die Form http:// www.mut.de/index.htm. Eine relative Adresse bezieht sich auf das Dokument, aus dem verlinkt wird. Ist das Dokument, auf das verlinkt wird, im gleichen Ordner, so besteht der Link nur aus dem Dokumentnamen. Ansonsten folgt der Ordner vor dem Dokumentnamen, beispielsweise dreamweaver/index.htm. Wenn sich das Dokument in einem Ordner befindet, der hierarchisch über dem Dokument liegt, aus dem verlinkt wird, so wird mit ../index.htm ein Ordner in der Hierarchie übersprungen.
9.
Bestätigen Sie mit einem Klick auf die Schaltfläche Auswählen.
Im Eigenschafteninspektor sehen Sie die Zieladresse des Links, wenn sich der Cursor auf dem Link befindet. Einen Link erkennen Sie daran, dass er unterstrichen wurde.
Link
10.
Sehen Sie sich die Seite INDEX.HTM im Browser an und klicken Sie auf den neuen Link. Sie sollten von der Seite INDEX.HTM auf die Seite SCHLANGE.HTM gelangen. Wenn irgendetwas nicht klappt, sollten Sie die vorigen Schritte noch einmal nachvollziehen.
Projekt 3 – Listen & Links
59
DREAMWEAVER 4 • Einführung Hinweis Es gibt noch eine andere Methode, auf eine Datei zu verweisen. Wenn Sie in dem Eigenschafteninspektor auf das Symbol Auf Datei anzeigen klicken und die Maustaste gedrückt halten, können Sie den Cursor auf die Datei ziehen, auf die Sie linken wollen. Den Vorgang sehen Sie in der nebenstehenden Abbildung. Er wird außerdem in der folgenden Lektion genauer erläutert.
Lektion 6
Anker setzen In diesem Abschnitt erfahren Sie, wie Sie in einem Dokument einen Anker setzen können. Auf diesen wird dann mit einem Link verwiesen. Das Setzen dieses Links besprechen wir in der nächsten Lektion. Für unser Beispiel wollen wir die Zeile aus der Auswahlliste »riesige Elefanten« als Anker definieren und später von »Paradies« aus der Überschrift auf diesen Anker verweisen.
1.
Markieren Sie den Schriftzug »riesige Elefanten«.
2. Nun müssen Sie den Anker definieren. Betätigen Sie dazu den Menüpunkt Einfügen, Unsichtbare Tags, Benannter Ankerpunkt oder das Tastenkürzel (Strg)+(Alt)+(A).
60
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung
3.
Im nächsten Schritt müssen Sie im Dialogfeld einen Namen für den Anker angeben. Wir haben »Elefant« gewählt. Mit dem Namen wird der Anker später angesprochen.
4.
Bestätigen Sie mit OK.
Daraufhin wird der Anker durch ein Anker-Symbol visualisiert. Wenn Sie es anklicken, sehen Sie den Namen des Ankers im Eigenschafteninspektor. Dort können Sie ihn auch ändern.
Projekt 3 – Listen & Links
61
DREAMWEAVER 4 • Einführung
Lektion 7
Auf einen Anker verweisen In dieser Lektion greifen wir die Ergebnisse der vorigen Lektion auf und linken vom Paradies auf den Anker. Dazu sind folgende Schritte nötig:
Tipp Für die ganz Eiligen: Sie können ein Wort auch markieren, indem Sie darauf mit der linken Maustaste doppelklicken.
1.
Markieren Sie das Wort Paradies in der Überschrift.
2.
Wechseln Sie in den Eigenschafteninspektor.
3.
Klicken Sie dort auf das Symbol Auf Datei anzeigen, halten Sie die Maustaste gedrückt und ziehen Sie den Pfeil auf den Anker.
Hinweis Der Name des Symbols Auf Datei anzeigen ist wohl eine missglückte Übersetzung, die eigentlich »Auf Datei zeigen« heißen sollte.
Hinweis Links auf Anker werden immer mit dem Doppelkreuz (#) begonnen. Wenn Sie auf einen Anker in einer anderen als der aktuellen Datei linken wollen, hängen Sie den Anker einfach mit Doppelkreuz hinter den Dateinamen, beispielsweise schlange.htm#mamba.
62
4. Im Eigenschafteninspektor sehen Sie, dass der Hyperlink den Wert #Elefant erhalten hat. 5. Nun müssen Sie noch unter der letzten Zeile »riesige Elefanten« mit (¢) einige Leerzeilen einfügen, damit Sie den Effekt des Ankers im Browser erkennen können.
Projekt 3 – Listen & Links
DREAMWEAVER 4 • Einführung
6.
Sehen Sie sich die Seite im Browser an und klicken Sie auf den Link »Paradies«. Sie sehen, dass der Browser nach unten springt. Der Anker wird an der oberen Kante des Browserfensters angezeigt.
Tipp Mit Ankern können Sie zum Beispiel auf einfache Art und Weise ein Inhaltsverzeichnis für eine Seite definieren. So lassen sich auch übersichtliche Dokumente einfach aufbereiten. Vergessen Sie aber bei langen Dokumenten nicht, dem Nutzer immer wieder Links zu bieten, die per Anker an den Anfang des Dokuments zurückführen.
?
7.
Schließen Sie nun die Dateien INDEX.HTM UND SCHLANGE.HTM, sodass für das nächste Projekt keine Datei geöffnet ist.
Testen Sie Ihr Wissen! 1. Welche Möglichkeiten haben Sie, einen Absatz als ungeordnete Liste zu definieren?
2. Was können Sie im Dialogfenster Listeneigenschaften einstellen? 3. Kann eine geordnete Liste auch aus Buchstaben bestehen? 4. Woran erkennen Sie einen Link auf einen Anker?
Projekt 3 – Listen & Links
63
DREAMWEAVER 4 • Einführung
PROJEKT
4
Grafiken In diesem Abschnitt kommen Bilder ins Spiel. Wir zeigen Ihnen, wie Sie Grafiken in eine Webseite einbauen und damit umgehen. Dieses Kapitel ist in folgende Lektionen unterteilt:
Lektion 1
Grafiken einbauen
Lektion 2
Die Größe eines Bildes ändern
Lektion 3
Einen Rahmen um ein Bild legen
Lektion 4
Text an einem Bild ausrichten
Lektion 5
Abstand zum Rand und zum Text
Lektion 6
Grafik mit einem Link versehen
Lektion 7
Eine Imagemap einrichten
65
DREAMWEAVER 4 • Einführung
Lektion 1
Grafiken einbauen Die Zeiten der textlastigen Webseiten sind endgültig vorbei. Auf jeder Webseite finden sich mittlerweile Bilder und Grafiken. Das Einbinden von Grafiken ist nicht schwierig. In dieser Lektion erklären wir es Ihnen Schritt für Schritt.
Vorbereitungen Zunächst benötigen Sie eine HTML-Datei und ein Bild, um die Übung nachvollziehen zu können. Diese ersten Schritte nehmen wir hier vor.
1.
Erstellen Sie mit Datei, Neu eine neue Datei.
2.
Vergeben Sie für die Datei den Titel »Bild«.
3.
Speichern Sie die Datei mit dem Befehl Datei, Speichern unter mit dem Namen BILD.HTM. Nun müssen Sie sich das Beispielbild beschaffen. Wir nehmen hier ein Bild aus den Lektionen von Dreamweaver.
Hinweis Wenn Sie Dreamweaver in das bei der Installation vorgegebene Verzeichnis installiert haben, ist der komplette Pfad des Bildes C:\Programme\Macromedia\Dreamweaver 4\Lessons\Lesson Files\images.
66
4.
Öffnen Sie im Windows Explorer den Ordner LESSONS\ LESSON FILES\IMAGES im Dreamweaver-Hauptverzeichnis.
5.
Klicken Sie das Bild THEPLANE.JPG mit der rechten Maustaste
an.
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
6.
Wählen Sie im Kontextmenü den Befehl Kopieren.
Hinweis Alternativ können Sie auch das Tastenkürzel (Strg)+(C) verwenden.
7.
Wechseln Sie in das Verzeichnis EIGENE DATEIEN/ DREAMWEAVER.
8.
Klicken Sie mit der rechten Maustaste, um das Kontextmenü einzublenden.
9.
Wählen Sie im Kontextmenü den Befehl Einfügen, um die Bilddatei zu kopieren.
Hinweis Alternativ können Sie zum Einfügen das Tastenkürzel (Strg)+(V) verwenden. Ein weiterer Weg, um die Datei zu kopieren, wäre das Ziehen mit der Maus (Drag&Drop).
Projekt 4 – Grafiken
67
DREAMWEAVER 4 • Einführung
10.
Wechseln Sie, nachdem die Beispieldatei kopiert ist, zurück zu Dreamweaver.
In medias res Die Vorbereitung ist abgeschlossen, Beispieldatei und Beispielbild sind vorhanden. Jetzt zeigen wir Ihnen, wie Sie das Bild in die Datei einbinden.
1.
Es gibt in Dreamweaver mehrere Methoden, ein Bild in eine Webseite einzubinden. Zuerst müssen Sie die Stelle anklicken, an der das Bild eingefügt werden soll. Da unsere Beispieldatei BILD.HTM noch leer ist, ist diese Stelle natürlich die Position des Cursors.
2.
Betätigen Sie den Menübefehl Einfügen, Bild oder das Tastenkürzel (Strg)+(Alt)+(I).
Daraufhin öffnet sich das Dialogfenster Bildquelle auswählen.
68
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
3.
Klicken Sie im Dialogfenster Bildquelle auswählen das Bild THEPLANE.JPG an.
Wenn Sie das Bild angeklickt haben, wird auf der rechten Seite des Dialogfensters eine Vorschau angezeigt. Mit der Checkbox Bildvorschau können Sie diese ausblenden.
Projekt 4 – Grafiken
69
DREAMWEAVER 4 • Einführung
4.
Bestätigen Sie Ihre Wahl, indem Sie auf die Schaltfläche Auswählen klicken.
Das Bild wurde in die Seite eingefügt. Dabei wurde die Originalgröße verwendet.
70
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
Lektion 2
Die Größe eines Bildes ändern Das Bild ist glücklich auf Ihrer Webseite gelandet. Im nächsten Schritt führen wir Ihnen vor, wie Sie die Größe des Bildes ändern können.
1.
Klicken Sie das Bild einmal an.
Sie sehen um das Bild herum einen Rahmen mit drei Punkten. Diese Punkte sind Skalierpunkte, mit denen sich die Größe des Bildes ändern lässt. Der rechte verändert die Breite, der untere die Höhe, der Punkt rechts unten skaliert Breite und Höhe des Bildes gleichzeitig.
2.
Klicken Sie den rechten unteren Punkt an.
3.
Halten Sie die Maustaste gedrückt und ziehen Sie nach rechts unten, um das Bild zu vergrößern.
Hinweis Wenn Sie beim Ziehen der Grafik (ª) gedrückt halten, werden die Proportionen zwischen Höhe und Breite beibehalten.
Projekt 4 – Grafiken
Im Eigenschafteninspektor sehen Sie in den Textfeldern B und H die Breite und die Höhe der Grafik in Pixel. Durch die Veränderung sind die Werte fett hervorgehoben.
71
DREAMWEAVER 4 • Einführung Hinweis Natürlich können Sie in den Textfeldern B und H die Größe der Grafik auch numerisch verändern. Geben Sie dazu einfach andere Werte ein.
Breite Höhe
4.
Um eine Bilddatei wieder in Originalgröße darzustellen, klicken Sie einmal auf B vor dem entsprechenden Textfeld. Damit stellen Sie die Originalbreite wieder her.
5. Nun stellen Sie noch die Originalhöhe wieder her, indem Sie auf H vor dem Textfeld für die Höhe klicken.
Lektion 3
Einen Rahmen um ein Bild legen In dieser Lektion erfahren Sie, wie man ein Bild mit einem Rahmen versieht bzw. verhindert, dass ein Rahmen um ein Bild auftaucht.
1.
Erweitern Sie den Eigenschafteninspektor durch Klick auf den Pfeil.
Hinweis Wenn Sie einen Rahmen vergeben haben, nimmt dieser die Farbe an, die Sie für Hyperlinks definiert haben. Die Standardeinstellung ist, dass kein Rahmen angezeigt wird. Dies ändert sich allerdings, sobald das Bild mit einem Link versehen wird. Dann wird automatisch ein 1 Pixel dicker Rahmen angezeigt. Um dies zu vermeiden, müssen Sie eine Rahmendicke von 0 Pixeln angeben.
72
2.
Nun sehen Sie das Textfeld Rahmen. Hier können Sie für das Bild einen Rahmen in Pixeln vergeben. Tragen Sie einen Wert von »5« ein.
Rahmendicke
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
Das Bild mit Rahmen
3.
Für die nächsten Lektionen entfernen Sie den Rahmen wieder und vergeben eine Rahmendicke von 0 Pixeln. Damit wird auch kein Rahmen angezeigt, wenn die Grafik als Link verwendet wird.
Lektion 4
Text an einem Bild ausrichten Text neben einer Grafik ist ein wenig heikel, da die Auswirkungen im Browser nicht immer genau vorhersehbar sind. Abgesehen davon ist die Handhabung in Dreamweaver aber sehr einfach.
Projekt 4 – Grafiken
73
DREAMWEAVER 4 • Einführung
1.
Geben Sie neben der Grafik den Text “Nichts ist schöner als Fliegen, egal welche Airline” ein.
2.
Klicken Sie die Grafik an.
3.
Wechseln Sie in den Eigenschafteninspektor. Dort finden Sie das Pull-down-Menü Ausrichten. Das Pull-down-Menü Ausrichten
4. Wählen Sie im Pull-down-Menü die Option Mitte, um den Text an der Mitte des Bildes auszurichten. Hinweis Mit der Option Mitte wird der Text an der Mitte des Bildes ausgerichtet. Die weiteren Optionen sind, den Text oben, unten, an der Grundlinie oder an anderen Kanten auszurichten.
74
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
Lektion 5
Abstand zum Rand und zum Text Nachdem Sie den Text mittig ausgerichtet haben, wollen Sie noch ein wenig Abstand zur Grafik schaffen. Dies sorgt für optische Auflockerung.
1.
Wechseln Sie in den Eigenschafteninspektor.
2.
Geben Sie im Textfeld H-Abstand den Wert »10« ein.
horizontaler Abstand
3.
Bestätigen Sie mit (¢), um den Abstand anzuwenden.
Der Abstand wird nicht nur auf den Abstand zum Text, sondern auch auf den zur Kante des Browserfensters angewendet.
Projekt 4 – Grafiken
75
DREAMWEAVER 4 • Einführung Hinweis Mit dem Textfeld V-Abstand legen Sie den Abstand des Bildes zu Text und Kanten des Browserfensters in Pixeln fest. Das funktioniert analog wie der horizontale Abstand.
Lektion 6
Grafik mit einem Link versehen In dieser Lektion legen wir Links und Grafiken zusammen und machen aus einer Grafik einen Link. Damit können Sie beispielsweise eigene Schaltflächen und Navigationsleisten definieren.
Hinweis Natürlich können Sie ein Bild sowohl mit relativen als auch mit absoluten Links versehen. Ein absoluter Link verweist auf eine URL in der Form http://www.mut. de. Ein relativer Link verweist auf einen Ordner relativ zur Position der aktuellen Datei.
1. 2.
Klicken Sie die Grafik an.
Wechseln Sie in den Eigenschafteninspektor. Geben Sie dort im Feld Hyperlink das Ziel »SCHLANGE.HTM« ein.
Link auf eine andere Seite
3.
Bestätigen Sie mit (¢).
Damit wurde aus dem Bild ein Link auf die Seite SCHLANGE.HTM gemacht.
76
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung Hinweis Der AlternativText wird auch angezeigt, wenn Sie im Browser kurz mit dem Cursor über das Bild fahren.
4.
Nun sollten Sie noch einen Alternativtext vergeben, falls die Grafik nicht angezeigt werden kann. Diesen Text tippen Sie im Feld Alt. ein.
Ein Alternativtext
Lektion 7
5.
Testen Sie den Link im Browser.
6.
Und dann schließen Sie die Datei BILD.HTM.
Eine Imagemap einrichten Eine Imagemap erlaubt es Ihnen, mehrere Links in einem Bild zu haben. Damit können Sie aus einer Grafik eine komplette Navigationsleiste machen.
Vorbereitung Für diese Lektion benötigen Sie wiederum eine HTML-Datei und ein Bild. Zuerst werden wir diese Voraussetzungen schaffen.
1.
Erstellen Sie mit Datei, Neu eine neue Datei.
2.
Vergeben Sie den Titel »Imagemap«.
3.
Speichern Sie die Datei mit Datei, Speichern unter unter dem Namen IMAGEMAP.HTM.
Hinweis Wenn Sie Dreamweaver in den bei der Installation vorgegebenen Ordner installiert haben, ist der komplette Pfad des Bildes C:\Programme\Macromedia\Dreamweaver 4\Lessons\Lesson Files\images.
Projekt 4 – Grafiken
4.
Als Nächstes müssen Sie eine Grafik organisieren, die wir mit einer Imagemap versehen können. Wir verwenden das Bild CHECKCONDITIONMENU.GIF aus den Lektionen von Dreamweaver. Öffnen Sie im Windows Explorer den Ordner LESSONS\LESSON FILES\IMAGES im DreamweaverProgrammverzeichnis.
77
DREAMWEAVER 4 • Einführung
5.
Kopieren Sie die Datei CHECKCONDITIONMENU.GIF entweder mit (Strg)+(C) oder mit dem Befehl Kopieren aus dem Kontextmenü.
6.
Wechseln Sie in den Ordner EIGENE DATEIEN/DREAMWEAVER und fügen die Grafik ein.
7.
Gehen Sie zurück in Dreamweaver zur Datei IMAGEMAP.HTM.
8. Fügen Sie mit dem Menübefehl Einfügen, Bild oder dem Tastenkürzel (Strg)+(Alt)+(I) das Bild CHECKCONDITIONMENU.GIF in die Webseite ein. Hinweis Die Arbeitsschritte sind hier nur knapp beschrieben, da die meisten aus Lektion 1 bereits bekannt sind.
Imagemap anlegen Nachdem die Grafik in die Beispieldatei IMAGEMAP.HTM eingebunden wurde, können Sie mit den nächsten Arbeitsschritten die Imagemap erstellen.
1.
Die Werkzeuge zum Erstellen einer Imagemap finden Sie links unten im Eigenschafteninspektor. Aktivieren Sie das Werkzeug für rechteckige Imagemaps. Hinweis Sie sehen die Werkzeuge für die Imagemap nur, wenn Sie mit dem kleinen Pfeil rechts unten die ausführlichere Version des Eigenschafteninspektors eingeblendet haben.
78
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
2.
Nun müssen Sie ein Imagemap-Hotspot in der Grafik aufziehen. Klicken Sie dazu auf die linke obere Ecke der Welle in dem zuvor eingefügten Bild.
3.
Halten Sie die Maustaste gedrückt und ziehen Sie das Rechteck auf.
rechteckiger Hotspot
4.
Belassen Sie im Feld Map die Voreinstellung auf Map.
5.
Geben Sie im Feld Hyperlink des Eigenschaftenionspektors »SCHLANGE.HTM« ein.
Projekt 4 – Grafiken
79
DREAMWEAVER 4 • Einführung
6.
Nun können Sie im Feld Alt. noch einen Alternativtext für den Hotspot angeben.
Alternativer Hotspot
Tipp Sie können auch ellipsen- oder polygonförmige Hotspots erzeugen. Die Formen lassen sich auch in nur einer Imagemap beliebig mischen.
?
7. Wenn Sie weitere Hotspots vergeben möchten, wechseln Sie einfach wieder auf das rechteckige Imagemap-Werkzeug und zeichnen den nächsten Hotspot. 8.
Schließen Sie nun die Datei IMAGEMAP.HTM.
Testen Sie Ihr Wissen! 1. Mit welchem Tastenkürzel binden Sie eine Grafik in eine Webseite ein?
2. Mit welcher Option können Sie Text an der Grundlinie einer Grafik anordnen?
3. Wo können Sie sich in Dreamweaver eine Bildvorschau ansehen, bevor Sie ein Bild in die Seite einbinden?
4. Was passiert, wenn Sie eine Grafik verlinken, der keine Rahmendicke zugewiesen worden ist?
5. Können Sie auch eine Weltkugel als Hotspot einer Imagemap definieren?
80
Projekt 4 – Grafiken
DREAMWEAVER 4 • Einführung
PROJEKT
5
Tabellen Mit Tabellen können Sie die Informationen auf Ihrer Webseite sinnvoll gliedern. In diesem Projekt sind folgende Lektionen enthalten:
Lektion 1
Eine Tabelle erstellen
Lektion 2
Die Tabelle füllen
Lektion 3
Die Tabelle verschönern
Lektion 4
Zellen zusammenfassen
Lektion 5
Unsichtbare Tabellen
81
DREAMWEAVER 4 • Einführung
Lektion 1
Eine Tabelle erstellen Eine Tabelle besteht aus einzelnen Zellen. Diese Zellen bilden Spalten und Zeilen. Wir wollen hier eine Tabelle erstellen, die Reiseziele, Abflugs- und Rückflugdatum enthält. Diese Tabelle soll aus drei Spalten bestehen und fünf Datensätze enthalten.
Vorbereitungen Zuerst brauchen Sie eine Datei.
1.
Erstellen Sie mit dem Menübefehl Datei, Neu eine neue Datei.
2.
Geben Sie ihr den Titel »Tabellen«.
3.
Speichern Sie die Datei mit dem Befehl Datei, Speichern unter unter dem Namen TABELLEN.HTM.
Die Tabelle einfügen Nachdem die Datei vorhanden ist, wird in den nächsten Schritten eine Tabelle eingefügt.
1. Betätigen Sie den Menübefehl Einfügen, Tabelle oder das Tastenkürzel (Strg)+(Alt)+(T). Daraufhin erscheint das Dialogfenster Tabelle einfügen. Tipp Alternativ können Sie auch in der Objektpalette (Fenster, Objekte) die Schaltfläche Tabelle einfügen betätigen.
2. Geben Sie im Dialogfenster Tabelle einfügen bei Zeile die Zahl der Tabellenzeilen an. Für unser Beispiel sind das 6 Zeilen (5 Zeilen mit Daten, eine Kopfzeile).
82
Projekt 5 – Tabellen
DREAMWEAVER 4 • Einführung
Die Zahl der Tabellenzeilen
3.
Die Zahl der Spalten stimmt in der voreingestellten Fassung. Sollte Ihre Einstellung davon abweichen, geben Sie »3« ein.
4. Die Breite können Sie in Prozent (relativ zur Fenstergröße des Browsers) oder Pixel angeben. Wechseln Sie auf Pixel.
5.
Geben Sie im Textfeld Breite »500« ein.
6.
Die Dicke des Rahmens belassen Sie auf 1 Pixel.
7.
Bestätigen Sie mit OK.
Die Breite der Tabelle
Projekt 5 – Tabellen
83
DREAMWEAVER 4 • Einführung
Lektion 2
Die Tabelle füllen Nun haben Sie eine fertige Tabelle, aber noch keine Inhalte. Prinzipiell können Sie alles in einer Tabelle aufnehmen: Text, Grafiken, weitere Tabellen. Und so wird’s gemacht:
1.
Klicken Sie in die Zelle links oben und geben Sie »Urlaubsziel« ein.
2. Markieren Sie den Text »Urlaubsziel« und betätigen Sie dann das Symbol B im Eigenschafteninspektor, um den Text zu fetten.
3. Geben Sie nach dem gleichen Muster in die Spalten daneben »Abflug« und »Rückflug« ein und fetten Sie diese Spaltenüberschriften.
84
Projekt 5 – Tabellen
DREAMWEAVER 4 • Einführung
4.
Die übrigen Inhalte der Tabelle können Sie nach dem gleichen Muster eingeben. Denken Sie sich ruhig ein paar Fantasiedaten aus.
Lektion 3
Die Tabelle verschönern Die Tabelle ist gefüllt. Das Ergebnis ist aber noch nicht ganz zufriedenstellend. Deshalb nehmen wir einige kosmetische Korrekturen vor.
Hinweis Eine einzelne Zelle markieren Sie, indem Sie in die Zelle klicken, eine Zeile, indem Sie an die Außenkante der Zeile klicken. Eine Spalte wird markiert, wenn Sie oben auf den Rand der Spalte klicken. Das lässt sich gut durch unterschiedliche Cursorformen auseinander halten.
Projekt 5 – Tabellen
1.
Markieren Sie die gesamte Tabelle, indem Sie den äußeren Rand der Tabelle anklicken.
2.
Wenden Sie sich dem Eigenschafteninspektor zu. Hier können Sie im Textfeld Zellauffüllung einen Wert in Pixel vergeben, der den Abstand der Objekte in der Zelle von der Umgebung angibt. Für unser Beispiel haben wir einen Wert von 5 Pixeln gewählt und mit (¢) angewendet.
85
DREAMWEAVER 4 • Einführung
Der Abstand vom Inhalt der Zellen zum Gitternetz
3. Die nächste Verschönerung betrifft den Abstand innerhalb des Gitternetzes der Tabelle. Mit dem Textfeld Zellraum schaffen Sie hier mehr oder weniger Platz. Wir haben einen Wert von 3 Pixeln gewählt.
Der Zellraum wurde vergrößert
86
Projekt 5 – Tabellen
DREAMWEAVER 4 • Einführung Tipp Die Hintergrundfarbe lässt sich nicht nur für die ganze Tabelle, sondern für jede Zelle einzeln festlegen. Allerdings unterstützen verschiedene Browser diese Funktionen unterschiedlich gut.
4.
Die nächste kosmetische Maßnahme ist eine neue Hintergrundfarbe für die Tabelle. Dazu dient das Feld HG-Farbe. Klicken Sie darauf, um in der Palette eine Hintergrundfarbe auszuwählen.
Hinweis Neben den hier beschriebenen Funktionen gibt es noch weitere Verschönerungsmöglichkeiten für Tabellen. Manche davon werden allerdings nicht von allen Browsern unterstützt. Hinweisen möchten wir Sie trotzdem noch auf die Möglichkeit, bei HG-Bild ein eigenes Hintergrundbild für die Tabelle zu vergeben. Auch die Randfarbe können Sie steuern; allerdings nur beim Internet Explorer.
Lektion 4
Zellen zusammenfassen In diesem Abschnitt erfahren Sie, wie Sie mehrere Zellen zu einer Zelle zusammenfassen können. Dazu lassen wir den Flug nach New Orleans ausfallen. Aus den zwei Tabellenzellen Abflug und Rückflug für New Orleans soll eine Zelle werden, in der steht, dass der Flug abgesagt ist. Dazu sind folgende Schritte nötig:
Projekt 5 – Tabellen
87
DREAMWEAVER 4 • Einführung
1.
Klicken Sie in die Zelle »Abflug für New Orleans«, halten Sie die Maustaste gedrückt und ziehen Sie bis zur Zelle »Rückflug«. Damit sind beide Zellen markiert.
2. Betätigen Sie im Eigenschafteninspektor das Symbol Ausgewählte Zellen mit Raum verbinden (oder kurz Zellen verbinden). Tipp Wenn Sie eine Zelle teilen wollen, funktioniert dass wie das Zusammenfügen von Zellen. Klicken Sie die Zelle an und betätigen Sie im Eigenschafteninspektor die Schaltfläche Zelle teilen, die sich neben der Schaltfläche zum Verbinden von Zellen befindet.
88
3.
Löschen Sie die Inhalte der zusammengefügten Zelle.
Projekt 5 – Tabellen
DREAMWEAVER 4 • Einführung
4.
Schreiben Sie dann in die Zelle »abgesagt«.
Ideal wäre es, wenn der Schriftzug »abgesagt« mittig in der Zelle angeordnet wäre. Dies erledigen Sie folgendermaßen:
5.
Klicken Sie in die Zelle.
6.
Wechseln Sie in den Eigenschafteninspektor und rufen Sie dort im Pull-down-Menü Horiz die Option Zentriert auf.
Damit wird der Inhalt der Zelle zentriert. Tipp Bei Horiz legen Sie die horizontale Ausrichtung des Tabelleninhalts fest. Dasselbe besorgt Vert für die vertikale Ausrichtung.
Projekt 5 – Tabellen
89
DREAMWEAVER 4 • Einführung In diesem Abschnitt haben Sie gelernt, wie man horizontale Zellen zusammenfügt, natürlich funktioniert das auch mit vertikalen Zellen. Sie können sogar horizontale und vertikale Zellen zugleich zusammenfügen.
7.
Lektion 5
Schließen Sie die Datei TABELLEN.HTM.
Unsichtbare Tabellen Tabellen werden nicht nur zur Informationsaufbereitung verwendet, sondern auch, um Objekte auf einer Seite sinnvoll zu platzieren. Dafür werden die Tabellen ohne Rahmen angezeigt und Zellräume sowie andere Abstände werden ausgeschaltet. Außerdem müssen dann die Größen einzelner Zellen exakt angegeben werden. Im Folgenden zeigen wir Ihnen, wie Sie eine Grafik 200 Pixel vom oberen und vom linken Rand des Fensters platzieren.
Vorbereitung Zuerst brauchen Sie eine neue Datei.
1.
Erstellen Sie mit Datei, Neu eine neue Datei.
2.
Vergeben Sie den Titel »Unsichtbar«.
3.
Speichern Sie die Datei unter dem Namen UNSICHTBAR.HTM.
Die unsichtbare Tabelle Die unsichtbare Tabelle entsteht mit den folgenden Schritten:
1. Fügen Sie mit Einfügen, Tabelle oder (Strg)+(Alt)+(T) eine Tabelle ein. Hinweis Eine unsichtbare Tabelle darf keine Werte haben, die eine exakte Größenbestimmung erschweren, da sonst die Platzierungsgenauigkeit nicht zu erzielen wäre. Deshalb müssen Zellauffüllung und Zellenabstand 0 Pixel betragen.
90
2.
Vergeben Sie im Dialogfenster Tabelle einfügen folgende Werte: 2 Zeilen und Spalten. Tragen Sie eine Breite von 350 Pixel ein. Geben Sie in Rahmen, Zellauffüllung und Zellenabstand jeweils den Wert »0« Pixel ein.
Projekt 5 – Tabellen
DREAMWEAVER 4 • Einführung
3.
Bestätigen Sie mit OK.
4.
Klicken Sie in die rechte untere Zelle der Tabelle.
5.
Rufen Sie mit dem Menübefehl Einfügen, Bild oder dem Tastenkürzel (Strg)+(Alt)+(I) das Dialogfenster Bild auswählen auf.
6.
Wählen Sie im Dialogfenster das Bild THEPLANT.JPG aus Ihrem Übungsordner EIGENE DATEIEN/DREAMWEAVER.
Hinweis Sollten Sie das Bild noch nicht aus dem Übungsordner von Dreamweaver in Ihren eigenen kopiert haben, so holen Sie das jetzt nach.
7.
Bestätigen Sie Ihre Wahl mit Klick auf Auswählen.
Wenn Sie an dieser Stelle eine Vorschau im Browser starten, klebt das Bild links oben in der Ecke. Die nächsten Schritte werden diesen Zustand ändern.
Projekt 5 – Tabellen
91
DREAMWEAVER 4 • Einführung
8.
Klicken Sie in Dreamweaver in die Zelle links oben.
9. Wechseln Sie in den Eigenschafteninspektor und vergeben Sie für die Zelle im Textfeld B eine Breite von 200 Pixel. Tipp Wenn Sie beim Platzieren absolut korrekt arbeiten möchten, sollten Sie eine 1*1 Pixel große GIF-Grafik verwenden. Diese Grafik skalieren Sie dann auf die richtige Größe, sodass sie die Zelle entsprechend ausfüllt. Dies führt dazu, dass auch Browser, die die Höhen- und Breitenattribute der leeren Zelle ignorieren, die richtigen Abstände anzeigen.
Die Breite der Zelle wird auf 200 Pixel gesetzt
10. Anschließend klicken Sie in das Textfeld H und vergeben ebenfalls eine Höhe von 200 Pixel.
Die Höhe der Zelle wird auf 200 Pixel gesetzt
92
Projekt 5 – Tabellen
DREAMWEAVER 4 • Einführung
11. Wenn Sie sich erneut eine Vorschau im Browser anzeigen lassen, sehen Sie, dass der Sicherheitsabstand vom linken und oberen Rand des Browserfensters eingehalten wird. Hinweis Vielleicht ist Ihnen aufgefallen, dass der Abstand nach links und oben nicht exakt 200 Pixeln entspricht. Es ist ein wenig mehr. Dies liegt daran, dass standardmässig schon ein Abstand für alle Objekte vom linken und oberen Rand vorgegeben ist. Wenn Sie absolut exakt arbeiten möchten, müssen Sie bei den Seiteneigenschaften (Menübefehl Modifizieren, Seiteneigenschaften) den oberen und linken Rand sowie Randbreite und Randhöhe auf 0 setzen.
?
Testen Sie Ihr Wissen! 1. Wie lautet das Tastenkürzel zum Einfügen einer Tabelle? 2. In welchen Maßeinheiten können Sie die Breite einer Tabellenzelle angeben?
3. Wie markieren Sie eine Tabellenzeile? 4. Wo vergeben Sie eine Randfarbe für den Tabellenrand? 5. Was ist die auffälligste Besonderheit bei einer unsichtbaren Tabelle?
Projekt 5 – Tabellen
93
DREAMWEAVER 4 • Einführung
PROJEKT
6
Formulare Mithilfe von Formularen bieten Sie den Besuchern Ihrer Webseiten die Möglichkeit, Ihnen bequem Kommentare zukommen zu lassen. Es gibt eine ganze Reihe von Formularfeldern, die unterschiedlich aussehen und verschiedene Zwecke verfolgen. In diesem Projekt lernen Sie in den folgenden Lektionen das Wichtigste über Formular:
Lektion 1
Formulare einrichten
Lektion 2
Textfelder erstellen
Lektion 3
Passwortfelder erstellen
Lektion 4
Mehrzeilige Textfelder einrichten
Lektion 5
Checkboxen hinzufügen
Lektion 6
Radiobuttons erstellen
Lektion 7
Pull-down-Menüs erstellen
Lektion 8
Formulare versandfertig machen
95
DREAMWEAVER 4 • Einführung
Lektion 1
Formulare einrichten Bevor Sie die einzelnen Formularelemente auf Ihrer Seite platzieren, müssen Sie zunächst ein Formular erstellen. Dieses Formular ist dann der Container für die Formularfelder.
1.
Wählen Sie in der Objektpalette im Pull-down-Menü den Eintrag Formulare. Tipp Auch hier gilt wieder: Wenn Sie mit der Maus über eine der Schaltflächen in der Objektpalette fahren, erscheint nach einiger Zeit die QuickInfo mit einer Beschreibung des Elements.
In der Objektpalette werden nun alle Formularelemente angezeigt. Wie üblich können Sie durch Klicken die einzelnen Elemente in das Dokument im Hauptfenster einfügen.
2. Klicken Sie links oben in der Objektpalette auf das Symbol Formular einfügen.
Formular
Achtung Sie müssen alle Formularobjekte innerhalb des Rechtecks platzieren, d.h., die Textmarke muss sich innerhalb der gestrichelten Linie befinden, wenn Sie Elemente aus der Objektpalette einfügen.
96
Im Hauptfenster erscheint ein gestricheltes rotes Rechteck, das den Formularcontainer andeutet.
3.
Speichern Sie die Datei unter dem Namen FORMULAR.HTM ab.
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
Lektion 2
Textfelder erstellen In Textfelder kann – wie der Name schon sagt – Text eingegeben werden. Textfelder sind einzeilig und können in der Breite beschränkt werden. Dabei wird zwischen der Breite der Anzeige und der maximalen Breite (= Länge) des Textes, der eingegeben werden kann, unterschieden.
1.
Erstellen Sie (innerhalb des gestrichelten Rechtecks) den Beschriftungstext »Name«.
2.
Klicken Sie auf das Symbol Textfeld einfügen in der Objektpalette.
Textfeld Beschriftung
Das Textfeld wird in das Formular eingefügt. Außerdem ist es markiert, was auch durch einen Mausklick geschehen kann. Sie können nun im Eigenschafteninspektor das Textfeld anpassen.
3.
Geben Sie im Textfeld Anfangswert im Eigenschafteninspektor den Text an, der anfänglich im Formularfeld stehen soll.
Achtung Damit legen Sie
4.
nur die Anzeigebreite fest! Ein Feld, das als Zeichenbreite den Wert 20 hat, kann mehr als 20 Zeichen aufnehmen.
5.
Im Feld Zeichenbreite im Eigenschafteninspektor geben Sie an, wie viele Zeichen das Eingabefeld breit sein soll. Die maximale Anzahl Zeichen, die in das Textfeld eingegeben werden darf, kommt in das Textfeld Max. Zeichen.
6.
Geben Sie in das Textfeld unterhalb von Textfeld eine kurze Beschreibung des Feldes an, beispielsweise »Name«.
Projekt 6 – Formulare
97
DREAMWEAVER 4 • Einführung
Feldname
Feldbreite
Maximale Zeichenzahl
Anfangswert
Die Änderungen sind sofort im Hauptfenster sichtbar. Tipp Eine alte Weisheit: Save early, save often – bald und oft speichern. Sie können sich so möglichen Frust ersparen, wenn der Rechner abstürzt.
98
7.
Speichern Sie das Dokument mit Datei, Speichern ab.
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
Lektion 3
Passwortfelder erstellen Wenn Sie an irgendeiner Stelle im Web ein Passwort eingeben müssen, beispielsweise bei Ihrer Bank oder bei einem WebmailAccount, stoßen Sie auf ein Passwortfeld. Es sieht genauso aus wie ein normales Textfeld, mit dem einzigen Unterschied, dass pro eingegebenem Zeichen ein Sternchen angezeigt wird. So soll verhindert werden, dass ein Unbefugter mit einem Blick auf den Monitor das Passwort erfahren kann.
1.
Erstellen Sie einen neuen Absatz.
2.
Fügen Sie eine Beschriftung für das Passwortfeld ein, z.B. »Spitzname«.
3.
Klicken Sie auf die Schaltfläche Textfeld einfügen in der Objektpalette.
Textfeld Beschriftung
Zunächst wird ein normales Textfeld eingefügt, wie in der vorherigen Lektion auch. Passen Sie nun wie zuvor die einzelnen Eigenschaften des Textfeldes im Eigenschafteninspektor an.
4.
Geben Sie in das Textfeld Anfangswert im Eigenschafteninspektor den Text ein, mit dem das Feld vorbelegt sein soll.
5.
Setzen Sie in das Feld Zeichenbreite die Anzeigebreite des Feldes ein.
6.
Geben Sie die maximale Zeichenzahl für das Textfeld bei Max. Zeichen an.
Projekt 6 – Formulare
99
DREAMWEAVER 4 • Einführung
7.
Geben Sie im Textfeld Textfeld als Feldbeschreibung »Spitzname« an.
8.
Aktivieren Sie unter Typ den Radiobutton Kennwort.
Passwortfeld
Achtung Versuchen Sie nicht, auf diese Art und Weise sensitive Informationen zu verbergen. Über den HTMLQuelltext der Seite lässt sich leicht herausfinden, was in dem Feld steht.
100
Auch im Editor werden nun im Textfeld Sternchen angezeigt und kein Klartext.
9.
Speichern Sie die Seite mit Datei, Speichern.
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
Lektion 4
Mehrzeilige Textfelder einrichten Bei manchen Anforderungen ist die Einschränkung der bis dato vorgestellten Textfelder auf eine Eingabezeile ein großes Manko – denken Sie beispielsweise an das zuvor schon gebrauchte Beispiel eines webbasierten Mailanbieters. Es macht keine Freude, einen Mailtext in ein einzeiliges Feld einzugeben. Dreamweaver bietet deshalb auch die Möglichkeit, ein mehrzeiliges Feld einzurichten.
1.
Erstellen Sie einen neuen Absatz und tippen Sie als Beschriftung für das neue Formularfeld den Text »Wie ich diese Seite finde: « ein.
2.
Klicken Sie auf die Schaltfläche Textfeld einfügen.
Textfeld
Ein – einzeiliges – Texteingabefeld wird in die Seite eingefügt und ist markiert; Sie können nun die Feldeigenschaften im Eigenschafteninspektor modifizieren.
3.
Klicken Sie unter Typ auf Mehrzeilig.
Das Textfeld im Hauptfenster wird zu einem mehrzeiligen Textfenster.
Projekt 6 – Formulare
101
DREAMWEAVER 4 • Einführung
4.
Klicken Sie rechts unten auf den Pfeil nach unten im Eigenschafteninspektor. Hinweis Sie können den Eigenschafteninspektor wieder verkleinern, indem Sie auf den jetzt sichtbaren Pfeil nach oben in der rechten unteren Ecke des Fensters klicken.
Der Eigenschafteninspektor wird erweitert und bietet Ihnen zusätzliche Einstellungsmöglichkeiten, die Sie im Folgenden benötigen werden.
5.
Wählen Sie im Pull-down-Menü Umbruch den Eintrag Virtuell.
Fenster verkleinern
Achtung Sogar bei einigen professionellen Websites wurde dieser kleine Kniff vergessen. Zeigen Sie ihnen, wie es richtig geht!
Dadurch geben Sie an, dass der eingegebene Text automatisch umbricht. Wenn Sie das nicht tun, erscheinen im Netscape Navigator Scrollbalken und die Texteingabe gestaltet sich schwieriger, da Zeilen eben nicht umbrechen, sondern weiterlaufen.
Hinweis Damit ist wieder
6. Geben Sie im Textfeld Zeichenbreite die Breite des Textfeldes ein.
nur die Anzeigebreite gemeint, nicht jedoch die Anzahl der Zeichen, die höchstens eingegeben werden kann.
Hinweis Hier handelt es sich wohl um einen Übersetzungsfehler; das Feld sollte mit Anzahl an Zeilen beschriftet sein.
102
7. Geben Sie im Textfeld Anzahl an die Zahl der Zeilen, also die Höhe des Textfeldes an. 8.
Geben Sie im Textfeld Anfangswert den Text ein, mit dem das Textfeld vorbelegt sein soll.
9.
Im Textfeld Textfeld können Sie einen beschreibenden Namen eingeben, beispielsweise »Meinung«.
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
mehrzeiliges Textfeld
Feldname Höhe
10.
Lektion 5
Umbruch
Anfangstext Breite
Speichern Sie das Dokument.
Checkboxen hinzufügen Checkboxen werden hierzulande auch Kontrollkästchen genannt. Gemeint sind damit die kleinen quadratischen Felder, die Sie per Mausklick ankreuzen können.
1.
Projekt 6 – Formulare
Erstellen Sie einen neuen Absatz.
103
DREAMWEAVER 4 • Einführung
2.
Klicken Sie in der Objektpalette auf die Schaltfläche Kontrollkästchen einfügen.
Checkbox
Die Checkbox wird an der Textmarkenposition in das Dokument eingefügt.
3. Wählen Sie im Eigenschafteninspektor unter Anfangsstatus die Option Aktiviert. Dadurch ist die Checkbox beim Laden der Seite angekreuzt. Beim Status Nicht aktiviert ist sie nicht angekreuzt.
4.
Geben Sie unter Aktivierter Wert »Ja« ein.
Dieser Wert wird beim Formularversand (siehe Lektion 9) übergeben, sofern die Checkbox angekreuzt ist. Falls sie nicht angekreuzt ist, wird der Wert nicht übergeben.
5. Geben Sie in das Textfeld Kontrollkästchen eine Beschreibung für die Checkbox ein, z.B. »durchgearbeitet«.
Beschreibungstext
104
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
6.
Erstellen Sie rechts von der Checkbox den Text »Ja, ich habe die Projekte 1 bis 5 durchgearbeitet«.
Neuer Text
7.
Lektion 6
Speichern Sie das Dokument.
Radiobuttons erstellen Radiobuttons bzw. Optionsschalter kennen genauso wie Checkboxen zwei Zustände: an und aus. Die Besonderheit bei Radiobuttons ist, dass immer nur einer von mehreren Radiobuttons aktiviert sein kann. Bei Umfragen im Web werden Radiobuttons gerne eingesetzt, beispielsweise wenn ein Produkt auf einer Skala von eins bis fünf bewertet werden soll.
1.
Projekt 6 – Formulare
Erstellen Sie einen neuen Absatz.
105
DREAMWEAVER 4 • Einführung
2.
Klicken Sie in der Objektpalette auf die Schaltfläche Optionsschalter einfügen.
Radiobutton
Im Eigenschafteninspektor können Sie nun den Radiobutton »feintunen«.
3. Geben Sie in das Textfeld Optionsschalter den Namen der Radiobutton-Gruppe ein, beispielsweise »Geschlecht«.
Name der Gruppe
Alle Radiobuttons mit demselben Gruppennamen gehören zu einer Gruppe. Von allen Radiobuttons einer Gruppe kann immer nur einer aktiviert sein.
4. Hinweis Zusammenfassend kann man sagen: Der Gruppenname enthält den Oberbegriff (z.B. Geschlecht), der aktivierte Wert die spezielle Bezeichnung (männlich/weiblich).
106
Im Textfeld Aktivierter Wert geben Sie den Wert »weiblich« ein.
Dieser Wert wird beim Versand des Formulars übergeben, sofern der Radiobutton aktiviert ist.
5.
Unter Anfangsstatus klicken Sie auf Aktiviert.
Das sorgt dafür, dass der Radiobutton vorausgewählt ist.
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
Radiobutton
Gruppenname
Wert
Anfangsstatus
6.
Erstellen Sie einen zweiten Radiobutton mit dem Gruppennamen »Geschlecht«, dem aktuellen Wert »männlich« und dem Anfangsstatus »Nicht aktiviert«. Gruppenname
Projekt 6 – Formulare
Wert
Anfangsstatus
107
DREAMWEAVER 4 • Einführung
7.
Platzieren Sie Text um die Radiobuttons, damit klar wird, welcher Radiobutton für welche Option steht.
Neuer Text
8.
Lektion 7
Speichern Sie das Dokument.
Pull-down-Menüs erstellen Dreamweaver ist voll von Pull-down-Menüs (hier auch Listen/ Menüs genannt). Ein Beispiel ist das Pull-down-Menü zur Auswahl der Umbruchsart bei mehrzeiligen Textfeldern. Auch Webseiten können Pull-down-Menüs erhalten. Das Konzept ist einfach: Zunächst wird ein Menü erstellt, und dann werden die einzelnen Menüeinträge nacheinander eingebaut.
1. Erstellen Sie einen neuen Absatz, und beginnen Sie ihn mit dem Text »Dieses Projekt hat mir am Besten gefallen: «.
108
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
2.
Klicken Sie auf die Schaltfläche Liste/Menü einfügen in der Objektpalette.
Pull-down-Menü
3.
Wählen Sie im Eigenschafteninspektor unter Typ den Eintrag Liste.
Tipp Insbesondere Computerneulinge haben bei der Bedienung von Pull-downMenüs oft Schwierigkeiten. Hier ist eine Liste mit mehreren gleichzeitig sichtbaren Einträgen oft die bessere Wahl.
Der einzige Unterschied zwischen Menü und Liste ist, dass bei einer Liste mehr als eine Zeile gleichzeitig angezeigt werden kann, aber nicht muss. Damit ist eine Liste flexibler als ein Menü.
4.
Geben Sie unter Höhe den Wert 2 ein.
Damit sind immer zwei Listeneinträge gleichzeitig sichtbar.
5.
Geben Sie im Textfeld Liste/Menü einen beschreibenden Namen für die Liste ein, beispielsweise »Lieblingsprojekt«. Es ist nun an der Zeit, die einzelnen Listenwerte einzutragen.
Projekt 6 – Formulare
109
DREAMWEAVER 4 • Einführung
6.
Klicken Sie auf die Schaltfläche Listenwerte.
Es öffnet sich ein Dialogfenster mit einer zweispaltigen Tabelle. In die linke Spalte, Elementbezeichnung, kommt die Beschriftung des Elements (also das, was im Browser zu sehen ist); in die rechte Spalte kommt der Wert, der beim Formularversand übermittelt wird, wenn das Element ausgewählt worden ist.
7.
Geben Sie in die linke Spalte »Projekt 1« ein.
8.
Drücken Sie (ÿ).
Der Cursor springt in die rechte Spalte.
9.
Geben Sie »p1« ein.
Beschriftung
Wert beim Versand
Sie haben damit einen Eintrag in die Liste erstellt, der mit »Projekt 1« beschriftet ist und beim Versand »p1« genannt wird.
10.
Klicken Sie auf das Plussymbol, um ein weiteres Element hinzuzufügen.
110
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
11.
Legen Sie sieben weitere Elemente (Projekt 2, ... Projekt 8) mit den Werten p2, ... p8 an. Vertauschen Sie dabei die Elemente Projekt 4 und Projekt 5 in der Reihenfolge.
Reihenfolge vertauscht
Die Liste enthält nun zwei Fehler, die korrigiert werden müssen: Die Reihenfolge der Elemente 4 und 5 ist falsch, und ein achtes Projekt gibt es in diesem Buch nicht.
12.
Klicken Sie auf das Element »Projekt 4«.
13.
Klicken Sie auf den Pfeil nach oben, um das Element eine Position weiter nach oben zu befördern. Hinweis Sie können auch »Projekt 5« anklicken und dann auf den Pfeil nach unten.
Die Reihenfolge stimmt nun wieder.
14.
Markieren Sie das Element »Projekt 8«.
Zur Erinnerung: Sie müssen es dazu anklicken.
15.
Klicken Sie auf das Minussymbol.
Das Element wurde aus der Liste entfernt.
Projekt 6 – Formulare
111
DREAMWEAVER 4 • Einführung
Lektion 8
16.
Klicken Sie auf OK.
17.
Speichern Sie das Dokument.
Formulare versandfertig machen Das Formular ist nun fertig – fehlt nur noch die Möglichkeit, das Formular zu verschicken, sowie eine Strategie, an wen das Formular verschickt werden soll.
Tipp Ein wichtiger Aspekt beim Erstellen von Formularen ist die Übersichtlichkeit!
1.
Erstellen Sie einen neuen Absatz.
2.
Klicken Sie in der Objektpalette auf die Schaltfläche Schaltfläche einfügen.
Die Schaltfläche ist eingefügt. Auf Mausklick wird das Formular verschickt – doch es muss noch eingestellt werden, wohin.
3.
Klicken Sie rechts neben die neu eingefügte Schaltfläche.
Im Eigenschafteninspektor erscheinen die Eigenschaften des Formulars.
112
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
4.
Geben Sie unter Aktion den Wert »mailto:[email protected]« ein.
Achtung In diesem Projekt wird die E-Mail-Adresse der Lektorin dieses Buchs verwendet. Sie sollten natürlich Ihre eigene E-Mail-Adresse einsetzen.
E-Mail-Adresse
Damit wird das Formular an Ihr E-Mail-Konto verschickt.
5.
Wählen Sie Ansicht, Code.
6.
Suchen Sie die Zeile, die mit