TRAINING
Dreamweaver 4 Einführung
Tobias Hauser / Christian Wenz
TRAINING
Dreamweaver 4 Einführung
Die Deutsche Bibliothek – CIP-Einheitsaufnahme Ein Titeldatensatz für diese Publikation ist bei Der Deutschen Bibliothek erhältlich. Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.
10 9 8 7 6 5 4 3 2 1
05 04 03 02 01
ISBN 3-8272-6022-1
© 2001 by Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH, Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Umschlaggrafik: circa drei GmbH, München Lektorat: Katrin Aits,
[email protected] Herstellung: Elisabeth Egger,
[email protected] Satz: mediaService – Siegen (www.media-Service.tv) Druck und Verarbeitung: Bosch Druck, Ergolding Printed in Germany
Inhaltsverzeichnis Projekt 1
Start
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Lektion 6 Lektion 7 Fragen
Dreamweaver installieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 Dreamweaver starten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Mit der Oberfläche arbeiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 Dateien speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20 Dateien öffnen und neu speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23 Webseite im Browser testen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25 Browserliste erweitern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .27 Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .31
7
Projekt 2
Text
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Lektion 6 Lektion 7 Lektion 8 Fragen
Text eingeben und formatieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34 Einen Titel vergeben und die Seiteneigenschaften ändern . . . . . . . . . . . . . . . . . . . . . . . . . .37 Textstellen fett hervorheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40 Textstellen kursiv hervorheben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41 Schriftart ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42 Schrift vergrößern und verkleinern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .44 Textausrichtung ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .45 Schriftfarbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48
33
Projekt 3
Listen & Links
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Lektion 6 Lektion 7 Fragen
Eine ungeordnete Liste anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50 Aufzählungszeichen ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52 In eine nummerierte Liste umwandeln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .54 Nummerierung ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55 Links erstellen und verstehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .57 Anker setzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Auf einen Anker verweisen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62 Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .63
49
5
Inhaltsverzeichnis
Projekt 4
Grafiken
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Lektion 6 Lektion 7 Fragen
Grafiken einbauen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Größe eines Bildes ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Einen Rahmen um ein Bild legen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Text an einem Bild ausrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Abstand zum Rand und zum Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grafik mit einem Link versehen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Eine Imagemap einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
65
Projekt 5
Tabellen
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Fragen
Eine Tabelle erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Tabelle füllen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Die Tabelle verschönern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Zellen zusammenfassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Unsichtbare Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
66 71 72 73 75 76 77 80
81 82 84 85 87 90 93
Projekt 6
Formulare
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Lektion 5 Lektion 6 Lektion 7 Lektion 8 Fragen
Formulare einrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Textfelder erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Passwortfelder erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Mehrzeilige Textfelder einrichten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Checkboxen hinzufügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Radiobuttons erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Pull-down-Menüs erstellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Formulare versandfertig machen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Projekt 7
Frames
Lektion 1 Lektion 2 Lektion 3 Lektion 4 Fragen
Frames definieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frames in der Größe verändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frames füllen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Links setzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Testen Sie Ihr Wissen! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Fragen und Antworten Projekt 1 Projekt 2 Projekt 3 Projekt 4 Projekt 5 Projekt 6 Projekt 7
115 116 116 118 120 122
123
Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listen & Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Grafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Stichwortverzeichnis
6
95
123 124 125 126 127 128 129
131
DREAMWEAVER 4 • Einführung
PROJEKT
1
Start In diesem Projekt erfahren Sie zunächst, wie Sie Dreamweaver installieren und starten. Danach stellen wir Ihnen kurz die wichtigsten Elemente der Oberfläche vor und erläutern Ihnen die Handhabung von Dateien. Zum Schluss erstellen Sie Ihre erste Webseite und schauen sie sich in einem Webbrowser an. Das Projekt gliedert sich in die folgenden Lektionen:
Lektion 1
Dreamweaver installieren
Lektion 2
Dreamweaver starten
Lektion 3
Mit der Oberfläche arbeiten
Lektion 4
Dateien speichern
Lektion 5
Dateien öffnen und neu speichern
Lektion 6
Webseite im Browser testen
Lektion 7
Browserliste erweitern
7
DREAMWEAVER 4 • Einführung
Lektion 1
Dreamweaver installieren
Hinweis Auch wenn die
In Ihrem Dreamweaver-Paket finden Sie zwei CDs: eine violette für Windows-Benutzer und eine grüne für Besitzer eines Macintosh. Wählen Sie die für Ihr Betriebssystem passende Version aus und legen Sie sie in das CD-ROM-Laufwerk Ihres Rechners.
Abbildungen in diesem Buch für die Windows-Plattform erstellt worden sind, sind die meisten Lektionen auch auf dem Macintosh nachzuvollziehen.
1.
Schließen Sie das CD-Laufwerk, und warten Sie einige Sekunden. Wenn das Installationsprogramm von Dreamweaver 4 startet, springen Sie direkt zu Schritt 8; wenn nicht, fahren Sie mit dem nächsten Schritt fort.
2.
Rufen Sie Start, Ausführen auf.
3.
Klicken Sie auf die Schaltfläche Durchsuchen.
Hinweis Je nachdem welche Programme Sie auf Ihrem System bereits installiert haben, kann Ihr Startmenü anders aussehen, beispielsweise mehr oder weniger Einträge enthalten.
Windows öffnet ein Dialogfenster, in dem Sie alle angeschlossenen Laufwerke (Diskettenlaufwerke, Festplatten, CD-ROM-Laufwerke) durchsuchen können.
8
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
4.
Klicken Sie auf den Pfeil nach unten bei der Auswahlliste Suchen in, klicken Sie auf den Eintrag Arbeitsplatz und dann auf Öffnen.
Klicken Scrollen
Windows zeigt Ihnen nun eine Übersicht aller ans System angeschlossenen Laufwerke an. Identifizieren Sie das Laufwerk, in dem die Dreamweaver-CD liegt. Sie erkennen es am Namen STUDIO 4.
5.
Klicken Sie doppelt auf das Symbol für das Laufwerk, in dem sich die Dreamweaver-CD-ROM befindet.
Projekt 1 – Start
9
DREAMWEAVER 4 • Einführung
6.
Klicken Sie doppelt auf STUDIO INSTALLATION.EXE.
Tipp Auf manchen Systemen wird der Eintrag nicht als Studio Installation.exe, sondern als Studio Installation angezeigt.
Es erscheint nun wieder das Dialogfenster Ausführen. Das Texteingabefeld ist mit dem Namen des Installationsprogramms und dem Laufwerksbuchstaben vorbelegt.
7.
Klicken Sie auf OK.
Dreamweaver-Installation Das Installationsprogramm von Dreamweaver startet. Es erscheint die Meldung »Inhalt des Pakets wird gelesen...«, und eine Fortschrittsanzeige bewegt sich von links nach rechts. Nach einiger Zeit wandert die Fortschrittsanzeige erneut, von links nach rechts. Schließlich öffnet sich ein neues Fenster, das Sie bei der Installation willkommen heißt.
10
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
1.
Klicken Sie auf Weiter.
Achtung Die Annahme des Lizenzvertrags ist Grundbedingung für den Einsatz des Programms. Wenn Sie mit Punkten der Vereinbarung nicht einverstanden sind, dürfen Sie das Produkt nicht benutzen.
Es erscheint die Lizenzvereinbarung, die Sie mit Macromedia (dem Hersteller von Dreamweaver) schließen, um das Produkt nutzen zu können.
2.
Lesen Sie die Lizenzvereinbarung durch, und bestätigen Sie mit einem Klick auf Ja.
3.
Geben Sie Ihren Vor- und Nachnamen sowie die Seriennummer für Dreamweaver 4 ein.
Tipp Das Feld Firma müssen Sie nicht ausfüllen, die restlichen Felder sind jedoch Pflichtfelder. Vorname Nachname
Seriennummer Seriennummer OK
Projekt 1 – Start
11
DREAMWEAVER 4 • Einführung Die Seriennummer finden Sie auf der Registrierungskarte. Für Windows-Nutzer beginnt sie mit WBW, für Macintosh-Benutzer mit WBM. Sobald Sie die richtige Seriennummer eingegeben haben, erscheint rechts neben dem Texteingabefeld ein grüner Haken.
4.
Bestätigen Sie mit Weiter.
Es erscheint eine Maske, in der Sie auswählen können, welche Softwarekomponenten Sie installieren möchten. Sie haben die Auswahl zwischen Fireworks 4 und Dreamweaver 4.
5.
Klicken Sie auf das Kästchen neben Fireworks 4.
Damit geben Sie an, dass nur Dreamweaver 4 installiert werden soll – das Kreuzchen im Kästchen neben Fireworks verschwindet.
6.
Klicken Sie auf Weiter.
Im nächsten Dialogfenster können Sie einstellen, wo auf Ihrer Festplatte Dreamweaver installiert werden soll.
12
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
7.
Klicken Sie auf Weiter.
8.
Warten Sie den Kopiervorgang ab.
Tipp Die Standardvorgabe, C:\Programme\Macromedia, ist in der Regel eine gute Wahl. Wenn Sie einen anderen Speicherort wünschen, klicken Sie auf Durchsuchen und wählen ein anderes Verzeichnis aus.
Fortschrittsanzeige
Das Installationsprogramm kopiert die für Dreamweaver notwendigen Dateien auf die Festplatte. Nach erfolgter Installation vermeldet Dreamweaver dies.
Projekt 1 – Start
13
DREAMWEAVER 4 • Einführung
9.
Klicken Sie auf Fertigstellen.
Damit schließen Sie die Installation ab. Es werden nun zwei Fenster geöffnet: In einem Fenster finden Sie Verknüpfungen zu Dreamweaver und dem dazugehörigen Hilfesystem, im anderen Fenster einige Informationen zu Dreamweaver und mitgelieferten oder zusätzlichen Produkten.
10.
Schließen Sie beide Fenster.
Informationen
Verknüpfung
14
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
Lektion 2
Dreamweaver starten In dieser Lektion werden Sie Dreamweaver starten und einen Blick auf die wichtigsten Elemente der Oberfläche werfen.
1.
Rufen Sie Start, Programme, Macromedia Dreamweaver 4, Dreamweaver 4 auf.
Tipp Sie müssen den Eintrag erst suchen, bei vielen installierten Programmen (wie in der Abbildung zu sehen) ist das gar nicht so einfach. Die Programmeinträge im Startmenü sind normalerweise alphabetisch geordnet. Bei manchen Betriebs-systemversionen finden Sie Dreamweaver jedoch ganz unten in der Programmliste.
Mit dieser Verknüpfung im Windows-Startmenü starten Sie Macromedia Dreamweaver. Beim ersten Start erscheint ein Fenster, das Sie fragt, ob Sie Dreamweaver jetzt registrieren möchten.
2.
Tipp Im Dreamweaver-Paket liegt auch eine Registrierungskarte, die Sie per Post oder Fax an Macromedia schicken können. Wir empfehlen diese Möglichkeit der Registrierung.
Projekt 1 – Start
Klicken Sie auf Nicht mehr anzeigen.
Dadurch verzichten Sie auf die Registrierung des Produkts. Das Programm ist voll lauffähig, Sie werden aber über Produktneuheiten und Updates nicht informiert. Wenn Sie diesen Service in Anspruch nehmen möchten, klicken Sie auf Jetzt registrieren; Sie benötigen dazu jedoch eine funktionierende Internet-Verbindung.
15
DREAMWEAVER 4 • Einführung Hinweis Das Vorabfenster wird auch Splash-Screen genannt. Dieser Begriff kommt vom englischen Verb to splash, spritzen. Das Fenster spritzt bildlich gesprochen kurz auf und verkürzt somit die Wartezeit auf das Programm.
Nach einiger Zeit erscheint das Programmlogo, und wiederum etwas später sehen Sie die einzelnen Fenster von Macromedia Dreamweaver.
3. Werfen Sie einen Blick auf die verschiedenen Fenster, die geöffnet wurden.
HTML-Stile HTML-Referenz Objektpalette
Willkommensfenster Dokumentfenster Eigenschafteninspektor
Beim ersten Start werden die folgenden Fenster geöffnet:
X X X X X Tipp Die HTML-Referenz wendet sich primär an Profis, die auch »unter der Haube« von Dreamweaver arbeiten.
16
X
Das Dokumentfenster, das zentrale Fenster von Dreamweaver. Hier können Sie Seiten entwerfen, Text erfassen und Grafiken einfügen. Das Willkommensfenster, das innerhalb des Dokumentfensters angezeigt wird und einführende Hinweise enthält. Die Objektpalette; hier sehen Sie eine Übersicht über die wichtigsten Objekte von Dreamweaver, die Sie in das DreamweaverDokumentfenster einfügen können. Der Eigenschafteninspektor, der für ein im Dokumentfenster gewähltes Element weitere Eigenschaften anzeigt (z.B. die Größe einer Grafik). HTML-Stile; hier können Sie das Aussehen einzelner Textelemente verändern. HTML-Referenz; hier erhalten Sie eine Übersicht über die Programmiersprachen des World Wide Web: HTML, JavaScript und CSS.
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
4.
Schließen Sie das Willkommensfenster und die HTML-Referenz.
Hinweis Sie können einzelne Fenster auch über das Menü Fenster ein- und ausblenden.
Diese beiden Fenster benötigen wir zunächst nicht; durch das Schließen wird der Bildschirm aufgeräumter und übersichtlicher.
Lektion 3
Mit der Oberfläche arbeiten Wir werfen nun einen Blick auf die Objektpalette und auf den Eigenschafteninspektor und zeigen, wie diese zusammenarbeiten.
1.
Fahren Sie mit der Maus über das Symbol zum Einfügen einer horizontalen Linie.
Nach einiger Zeit erscheint ein erklärender Text, die so genannte QuickInfo, in diesem Fall Horizontale Linie einfügen.
Projekt 1 – Start
17
DREAMWEAVER 4 • Einführung
2.
Klicken Sie einmal auf das Symbol, über dem sich die Maus befindet. Tipp Um ein Element auszuwählen, klicken Sie einmal mit der Maus darauf.
Horizontale Linie
Eine horizontale Linie wird in das Dokument eingefügt. Diese ist schwarz hinterlegt, was bedeutet, dass sie das gerade ausgewählte Element der Seite ist. Zusätzliche Eigenschaften zu diesem Element finden Sie im Eigenschafteninspektor.
3.
Geben Sie im Eigenschafteninspektor ins Texteingabefeld B den Wert »100« ein. Damit legen Sie die Breite der horizontalen Linie fest.
18
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
4.
Geben Sie im Eigenschafteninspektor ins Texteingabefeld H den Wert »5« ein.
Linie
Breite
Höhe
Damit legen Sie die Höhe der horizontalen Linie fest. Hinweis Eine andere Bezeichnung für Pixel ist Bildschirmpunkt.
Projekt 1 – Start
Direkt nach der Eingabe werden die Änderungen sofort im Dokumentfenster sichtbar; die Linie ist nun merklich kürzer (100 Pixel), dafür aber 5 Pixel hoch.
19
DREAMWEAVER 4 • Einführung
Lektion 4
Dateien speichern Damit die gerade eben erstellte Datei nicht verloren geht, sollten Sie sie auf der Festplatte speichern.
1.
Rufen Sie im Dokumentfenster von Dreamweaver Datei, Schließen auf.
Hinweis Sie können alternativ auch die Tastenkombination (Strg)+(W) verwenden.
Tipp Sie sollten Dateien, die Sie gerade nicht bearbeiten müssen, nach Möglichkeit immer schließen. Dadurch entlasten Sie Ihren Rechner.
Damit wird die aktuelle Datei geschlossen. Zunächst überprüft Dreamweaver jedoch, ob die Datei seit der letzten Änderung gespeichert worden ist. Wenn das nicht der Fall ist (wie in diesem Beispiel), wird eine Warnmeldung ausgegeben.
2.
Bestätigen Sie die Meldung mit Ja.
Hinweis Wenn Sie stattdessen auf Nein klicken, wird die Datei geschlossen und alle Änderungen gehen unwiderruflich verloren. Wenn Sie auf Abbrechen klicken, kehren Sie zu der Datei zurück. Es öffnet sich ein Dialogfenster zum Speichern der Datei.
20
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
3.
Wählen Sie im Pull-down-Menü Speichern in den Ordner EIGENE DATEIEN aus (oberhalb von ARBEITSPLATZ).
Achtung Sollte auf Ihrem System der Ordner Eigene Dateien nicht existieren, wählen Sie einen beliebigen anderen Ordner!
Ordner Eigene Dateien
4.
Klicken Sie auf das Symbol Neuen Ordner erstellen.
Dieses Symbol ist das mittlere der fünf Symbole rechts oben im Dialogfenster Speichern unter.
5.
Geben Sie als Namen des neuen Ordners DREAMWEAVER ein, und bestätigen Sie mit (¢).
Neuen Ordner erstellen
Name des Ordners
Der neue Ordner wird angelegt. In diesem Ordner speichern wir alle Dateien, die wir in diesem Training anlegen.
Projekt 1 – Start
21
DREAMWEAVER 4 • Einführung
6.
Klicken Sie doppelt auf den Namen des Ordners DREAMWEAVER. Dadurch wechseln Sie in den neuen Ordner.
7.
Geben Sie als Dateinamen für die neue Datei LINIE.HTM an.
8.
Klicken Sie auf Speichern.
Hinweis Die Dateiendung .htm ist Standard für Webseiten.
Ordnername Dateiname
Die Datei wird unter dem Namen LINIE.HTM gespeichert. Danach schließt sich das Dialogfenster, und die Datei wird ebenfalls geschlossen. Sie erinnern sich – Sie wurden zum Speichern aufgefordert, weil Sie das Dokument schließen wollten. Um nur das Dokument zu speichern, hätte auch der Aufruf des Befehls Datei, Speichern oder Datei, Speichern unter genügt. Da Sie nur diese eine Datei geöffnet haben und demnach nach dem Schließen keine Datei mehr offen ist, fragt Dreamweaver, ob gleich das Programm beendet werden soll.
9.
Klicken Sie auf Nein.
Damit weisen Sie Dreamweaver an, das Programm weiterhin geöffnet zu lassen.
22
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
Lektion 5
Dateien öffnen und neu speichern Dateien, die abgespeichert worden sind, können auch wieder geöffnet und somit bearbeitet werden. Beim Speichern hat man die Wahl, ob man die Datei unter dem bestehenden Namen abspeichern will oder ob man einen neuen Namen wählt.
1.
Wählen Sie Datei, Öffnen.
Tipp Sie können alternativ dazu auch die Tastenkombination (Strg)+ (O) verwenden.
Es öffnet sich das Dialogfenster Datei öffnen. Als Ausgangsverzeichnis ist automatisch das Verzeichnis der letzten Speicherung ausgewählt, in diesem Falle also das zuvor erstellte Verzeichnis DREAMWEAVER. Wenn dieses Verzeichnis nicht vorausgewählt ist, gehen Sie über das Pull-down-Menü Suchen in in das Verzeichnis, in dem sich die Datei LINIE.HTM von der vorherigen Lektion befindet.
2.
Klicken Sie auf die Datei LINIE.HTM und dann auf Öffnen.
Tipp Sie können alternativ dazu auch doppelt auf den Dateinamen klicken.
Die Datei wird in Dreamweaver geöffnet.
Projekt 1 – Start
23
DREAMWEAVER 4 • Einführung
3. Tipp Dreamweaver stellt fest, dass Sie Änderungen an der Datei vorgenommen haben, und zeigt deswegen hinter dem Dateinamen in der Titelleiste des Dokumentfensters einen Stern an.
Geben Sie einen kurzen Text im Dokumentfenster ein. Titelleiste
Text
Datei erneut speichern In der vorherigen Lektion haben wir eine Datei unter einem neuen Namen abgespeichert. Dieses Mal wenden wir uns dem Fall zu, dass die Datei bereits einmal abgespeichert worden ist und Sie nur den neuesten Stand auf der Festplatte sichern wollen.
1.
Wählen Sie Datei, Speichern.
Hinweis Alternativ geht auch die Tastenkombination (Strg)+(S)
Die Datei wird nun unter ihrem alten Namen gespeichert.
2.
Wählen Sie Datei, Speichern unter.
Auch dieser Menübefehl hat ein Tastenkürzel, nämlich (Strg)+(ª)+ (S) Es öffnet sich das Dialogfenster Speichern unter, das Sie bereits aus Lektion 4 kennen.
24
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
3.
Geben Sie als neuen Dateinamen LINIE2.HTM an.
Achtung Wenn Sie als Dateinamen einen bereits bestehenden Namen angeben, gibt Dreamweaver eine Warnmeldung aus. Klicken Sie diese Meldung nicht einfach weg, sondern lesen Sie sie durch und entscheiden Sie dann, ob Sie die bestehende Datei überschreiben wollen oder nicht.
Dateiname
Das Dokument wird nun unter einem neuen Namen gespeichert.
4.
Wählen Sie Datei, Schließen.
Dreamweaver fragt Sie wieder, ob das Programm ganz beendet werden soll.
5.
Klicken Sie auf Nein.
Wenn Sie auf Ja klicken, müssen Sie das Programm neu starten.
Lektion 6
Webseite im Browser testen Dreamweaver ist ein so genannter WYSIWYG-Editor (what you see is what you get – frei übersetzt mit: So wie es im Editor aussieht, wird es auch im Browser aussehen). Aus diesem Grund ähnelt die Darstellung in Dreamweaver der endgültigen im Browser sehr stark, aber sie müssen nicht identisch sein, weswegen Sie alle Ihre Seiten im Browser testen sollten. Dazu können Sie die eingebaute Vorschaufunktion von Dreamweaver benutzen.
Projekt 1 – Start
25
DREAMWEAVER 4 • Einführung
1.
Wählen Sie Datei, Öffnen.
2.
Öffnen Sie die zuvor erstellte Datei LINIE2.HTM mit einem Doppelklick.
Die Datei wird im Editor geöffnet.
3.
Wählen Sie Datei, Vorschau im Browser, iexplore.
Hinweis Der Internet Explorer ist bei Windows dabei und deswegen hier standardmäßig eingetragen. Sie können die Vorschau auch mit der Taste (F12) aufrufen
Es öffnet sich der Internet Explorer und zeigt Ihre Seite an.
26
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
4.
Schließen Sie den Internet Explorer wieder.
Klicken Sie dazu auf das X-Symbol rechts oben, oder verwenden Sie die Tastenkombination (Alt)+(F4)
Lektion 7
Browserliste erweitern
Hinweis Nummer 3 auf
Der Browsermarkt wird von zwei Herstellern dominiert: Microsoft mit dem Internet Explorer sowie Netscape mit dem Navigator. Obwohl Microsoft momentan ein großes Übergewicht hat, gehört es zum professionellen Webdesign, Seiten mit beiden großen Browsern zu testen. Der Internet Explorer wird automatisch erkannt, der Netscape Communicator nicht (Versionen 4.x und 6.x kostenlos erhältlich unter home.netscape.com/download). Wir gehen im Folgenden davon aus, dass der Browser bei Ihnen bereits installiert ist. Falls nicht, holen Sie das nach oder überspringen Sie diese Lektion.
dem Browsermarkt ist übrigens der norwegische Opera-Browser (erhältlich unter www.opera.com), der durch eine besonders kleine Dateigröße und Schnelligkeit besticht.
Projekt 1 – Start
27
DREAMWEAVER 4 • Einführung
1.
Wählen Sie Datei, Vorschau in Browser, Browserliste bearbeiten.
Es öffnet sich das Voreinstellungen-Dialogfenster, in dem Sie unter anderem weitere Browser hinzufügen können.
28
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
2.
Klicken Sie auf das Plus-Symbol im Voreinstellungen-Fenster.
Dialogfenster
Es öffnet sich das Dialogfenster Browser hinzufügen.
3.
Geben Sie in das Texteingabefeld Anwendung Verzeichnis und Namen des Netscape-Browsers auf Ihrem System an.
Tipp Klicken Sie auf die Schaltfläche Durchsuchen, um den Browser über ein Explorer-ähnliches System zu suchen.
Normalerweise ist das C:\PROGRAMME\NETSCAPE\COMMUNICATOR\PROGRAM\NETSCAPE.EXE für Netscape 4.x bzw. C:\PROGRAMME\NETSCAPE\NETSCAPE 6\NETSCP6.EXE für Netscape 6.x.
4.
Geben Sie in das Feld Name eine Beschreibung für den Browser ein. Verwenden Sie beispielsweise den Namen und die Versionsnummer des Browsers.
5.
Klicken Sie das Kontrollkästchen Sekundärbrowser an. Name
Projekt 1 – Start
Datei
29
DREAMWEAVER 4 • Einführung Der Sekundärbrowser von Dreamweaver kann durch das Tastenkürzel (Strg)+(F12) aufgerufen werden; Primärbrowser ist bereits der Internet Explorer (was aber auch geändert werden kann).
6. Achtung Es kann nur einen Sekundärbrowser geben. Wenn Sie also erneut das Kontrollkästchen Sekundärbrowser anklicken, verliert der bisherige Sekundärbrowser diesen Status.
Bestätigen Sie mit OK.
7.
Wiederholen Sie ggf. die Schritte 2 bis 6, um weitere Browser hinzuzufügen.
8.
Klicken Sie im Voreinstellungen-Fenster auf OK.
Damit werden Ihre Eingaben aktiviert. Sie können nun Ihre Seite in einem der anderen Browser testen.
Browservorschau Den neu eingestellten Browser werden Sie im Folgenden direkt über Dreamweaver aufrufen.
1.
Wählen Sie Datei, Vorschau in Browser, NETSCAPE 4.77.
Achtung Wenn Sie eine andere Browserversion auf Ihrem System haben oder eine andere Beschriftung gewählt haben, müssen Sie natürlich an dieser Stelle den entsprechenden Menüeintrag wählen.
Es öffnet sich der ausgewählte Browser und zeigt eine Voransicht der Datei.
30
Projekt 1 – Start
DREAMWEAVER 4 • Einführung
2.
Schließen Sie den Browser.
Sie kehren damit zu Dreamweaver zurück.
3.
Wählen Sie Datei, Schließen.
Es erscheint wieder die Meldung mit der Frage, ob Dreamweaver ganz geschlossen werden soll.
4.
?
Klicken Sie auf Nein.
Testen Sie Ihr Wissen! 1. Welche der beiden mit Dreamweaver mitgelieferten CDs ist für Windows, welche für Macintosh?
2. Wie können Sie Dreamweaver nach der Installation starten? 3. Nennen Sie die wichtigsten Fenster von Dreamweaver. 4. Welche zwei Menükommandos stehen Ihnen zum Speichern einer Datei zur Verfügung und worin unterscheiden sie sich?
5. Wie können Sie eine bestehende Datei öffnen? 6. Wie können Sie die Voransicht Ihrer Seite im Browser aufrufen? 7. Wofür steht WYSIWYG?
Projekt 1 – Start
31
DREAMWEAVER 4 • Einführung
PROJEKT
2
Text In diesem Projekt zeigen wir Ihnen wie Sie einen Text auf Ihrer Webseite eingeben und formatieren können. Ihnen stehen dabei verschiedene Auszeichnungsmöglichkeiten zur Verfügung. Danach werfen wir einen Blick auf die Möglichkeiten, Schriften in Dreamweaver einzusetzen. Das Projekt ist in folgende Lektionen unterteilt:
Lektion 1
Text eingeben und formatieren
Lektion 2
Einen Titel vergeben und die Seiteneigenschaften ändern
Lektion 3
Textstellen fett hervorheben
Lektion 4
Textstellen kursiv hervorheben
Lektion 5
Schriftart ändern
Lektion 6
Schrift vergrößern und verkleinern
Lektion 7
Textausrichtung ändern
Lektion 8
Schriftfarbe
33
DREAMWEAVER 4 • Einführung
Lektion 1
Text eingeben und formatieren In dieser Lektion zeigen wir Ihnen, wie Sie Text auf Ihrer Webseite hinzufügen können. Außerdem lernen Sie, Texte hervorzuheben und als Überschrift zu formatieren.
1.
Erstellen Sie mit dem Menübefehl Datei, Neu eine neue Datei.
2.
Speichern Sie diese Datei mit Speichern Unter im Ordner Eigene Dateien, dreamweaver unter dem Namen INDEX.HTM.
3.
Geben Sie den Text »Fliegen Sie ins Paradies!« ein.
Das sieht schon ganz gut aus. Nun wollen wir allerdings den Schriftzug noch etwas auffälliger formatieren. Dazu benötigen Sie den Eigenschafteninspektor. Falls dieser bei Ihnen noch nicht eingeblendet ist, befolgen Sie den nächsten Schritt, ansonsten können Sie gleich zum übernächsten weitergehen.
4. Blenden Sie mit dem Menübefehl Fenster, Eigenschaften den Eigenschafteninspektor ein. Hinweis Alternativ können Sie den Eigenschafteninspektor auch mit dem Tastenkürzel (Strg)+(F3) ein- und ausblenden.
34
Projekt 2 – Text
DREAMWEAVER 4 • Einführung
5.
Wählen Sie im Eigenschafteninspektor unter Format den Eintrag Überschrift 2, um Ihrem Text dieses Format zuzuweisen.
6.
Gehen Sie ans Ende der Textzeile und drücken Sie (¢), um in eine neue Zeile zu wechseln.
Die neue Zeile hat das Format
. Das steht für Überschrift 2 (Headline 2). Sie erkennen dies links unten in der Infoleiste des Dreamweaver-Fensters. Dort steht . Das bedeutet, dass Sie sich im Körper der HTML-Seite innerhalb einer Überschrift 2 befinden.
7.
Die nächste Zeile soll wieder eine normale Textzeile werden. Gehen Sie dazu in den Eigenschafteninspektor auf Format und wechseln Sie auf das Format Absatz.
Ein Absatz entspricht dem HTML-Tag
(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
7.
Fügen Sie hinter
Zusätzlicher Code
Projekt 6 – Formulare
113
DREAMWEAVER 4 • Einführung
8.
Schalten Sie mit Ansicht, Entwurf wieder zur Entwurfsansicht zurück.
9.
Speichern Sie das Dokument.
Das Formular ist nun fertig, und Ihre Besucher können Ihnen nun ihr Feedback geben.
?
Testen Sie Ihr Wissen! 1. Woran erkennen Sie ein Formular in Dreamweaver? 2. Welche Arten von Formularfeldern kennen Sie? 3. Welche Formularfelder können Sie über das Symbol Textfeld einfügen erzeugen?
4. Was ist (bei Textfeldern) der Unterschied zwischen Zeichenbreite und Max. Zeichen?
5. Was ist der prinzipielle Unterschied zwischen Radiobuttons und Checkboxen?
6. Welche Vorteile hat eine Liste gegenüber einem Menü? 7. Welche zwei Werte müssen Sie für jeden Eintrag eines Pulldown-Menüs angeben?
8. Wie können Sie es einrichten, dass ein Formular an eine E-MailAdresse versandt wird?
114
Projekt 6 – Formulare
DREAMWEAVER 4 • Einführung
PROJEKT
7
Frames Frames bieten Ihnen die Möglichkeit, eine Webseite in mehrere Bereiche (Frames) aufzuteilen. So können Sie einen Bereich für die Navigation nutzen, und ein anderer Bereich dient der Darstellung des Inhalts. Das Projekt gliedert sich in die folgenden Lektionen:
Lektion 1
Frames definieren
Lektion 2
Frames in der Größe verändern
Lektion 3
Frames füllen
Lektion 4
Links setzen
115
DREAMWEAVER 4 • Einführung
Lektion 1
Frames definieren Zunächst werden die Frames definiert. Dazu muss der gesamte Browserbereich aufgeteilt werden. Es gibt hier mehrere Möglichkeiten – die horizontale und die vertikale Aufteilung sowie eine Aufteilung in mehr als zwei Bereiche.
1.
Wählen Sie im Pull-down-Menü in der Objektpalette den Eintrag Frames.
In der Objektpalette werden jetzt Symbole angezeigt, die Ihnen das Arbeiten mit Frames ermöglichen.
2. Klicken Sie in der Objektpalette oben links auf das Symbol Linken Frame einfügen.
markieren, klicken Sie auf die senkrechte Linie zwischen den Frames.
Die Webseite wird vertikal aufgeteilt, in einen kleineren linken und einen größeren rechten Frame. Wie üblich ist der Frame markiert, sodass Sie im Eigenschafteninspektor Einstellungen vornehmen können.
Lektion 2
Frames in der Größe verändern
Hinweis Um den Frame zu
Die momentane Größe der einzelnen Frames ist eine Standardeinstellung von Dreamweaver. Sie können das natürlich auch selbst anpassen. Dazu können Sie entweder die Maus oder den Eigenschafteninspektor verwenden.
116
Projekt 7 – Frames
DREAMWEAVER 4 • Einführung
1.
Ziehen Sie mit der Maustaste den linken Frame etwas größer und dadurch den rechten Frame etwas kleiner. Klicken Sie dazu auf die senkrechte Linie im Hauptfenster.
2.
Klicken Sie rechts unten auf den Pfeil nach unten im Eigenschafteninspektor.
Damit erweitern Sie das Eigenschafteninspektor, sodass mehrere Optionen sichtbar werden.
Projekt 7 – Frames
117
DREAMWEAVER 4 • Einführung
3.
Geben Sie unter Spalte/Wert »150« ein.
Breite
Der linke Frame ist nun 150 Pixel breit.
4. Klicken Sie auf den Pfeil in der linken unteren Ecke des Eigenschafteninspektors. Damit verkleinern Sie das Fenster wieder und blenden die zusätzlichen Optionen aus.
5.
Wählen Sie Datei, Frameset speichern unter.
Tipp Etwas schneller geht das mit dem Tastenkürzel (Strg)+(ª)+(S)
Es öffnet sich das bekannte Dialogfenster Speichern unter.
6.
Geben Sie als Dateinamen FRAMES.HTM an.
7.
Klicken Sie auf Speichern.
Die Framedefinition wird gespeichert.
Lektion 3
Frames füllen Die Framedefinition ist erstellt, nun müssen die einzelnen Frames nur noch gefüllt werden. Dazu erstellen wir zunächst eine Beispieldatei für den linken Frame.
118
Projekt 7 – Frames
DREAMWEAVER 4 • Einführung
1.
Öffnen Sie ein neues Dokument.
2.
Erzeugen Sie in diesem Dokument einen Link auf die Datei FORMULAR.HTM.
Link
3.
Speichern Sie das Dokument unter dem Namen NAVIGATION.HTM.
4.
Schließen Sie die Datei.
Jetzt sollte wieder das Dokument mit der Framedefinition sichtbar sein. Klicken Sie im Hauptfenster in den linken Frame.
Hinweis Die alternative
5. 6.
Tastenkombination: (Strg)+ (ª)+(O)
7.
Klicken Sie doppelt auf die Datei NAVIGATION.HTM.
Wählen Sie Datei, Öffnen in Frame.
Dadurch wird die Datei im linken Frame geöffnet.
8.
Öffnen Sie entsprechend im rechten Frame die Datei LINIE.HTM.
Der linke und der rechte Frame sind nun gefüllt.
Projekt 7 – Frames
119
DREAMWEAVER 4 • Einführung
9.
Wählen Sie Datei, Alle Frames speichern.
Damit werden die einzelnen Frames und auch die Framedefinition gespeichert.
Lektion 4
Links setzen Wenn Sie die Frames im Browser testen, werden Sie feststellen, dass sich das Feedback-Formular im linken Frame öffnet, wenn Sie auf den Link klicken. Gewünscht ist jedoch, dass dies im rechten Frame passiert.
1.
Klicken Sie mit der rechten Maustaste auf den Link im linken Frame. Das Kontextmenü klappt auf.
120
Projekt 7 – Frames
DREAMWEAVER 4 • Einführung
2.
Wählen Sie den Eintrag Zielframe, mainFrame.
Damit wird als Zielframe für den Link der rechte Frame gewählt. Tipp Es genügt, nur den Navigationsframe zu speichern, doch die Fehlerquote ist höher, da der falsche Frame markiert sein könnte.
3.
Wählen Sie Datei, Alle Frames speichern.
Jetzt werden alle Frames gespeichert, inklusive dem gerade geänderten.
4.
Drücken Sie (F12).
Damit öffnen Sie die Framedatei im Vorschaumodus.
Projekt 7 – Frames
121
DREAMWEAVER 4 • Einführung
5.
Klicken Sie auf den Link im linken Frame.
Wie gewünscht öffnet sich das Feedback-Formular im rechten Frame.
?
Testen Sie Ihr Wissen! 1. Sind über das Erstellen von zwei vertikal getrennten Frames hinaus in Dreamweaver noch andere Frameunterteilungen möglich?
2. Welche Möglichkeiten haben Sie, die Größe eines Frames zu ändern?
3. Wie legen Sie fest, welche HTML-Seite sich in einem Frame befindet?
4. In welchem Frame werden Links standardmäßig geöffnet? 5. Wie können Sie den Frame festlegen, in dem ein Link geöffnet wird?
122
Projekt 7 – Frames
DREAMWEAVER 4 • Einführung
Fragen und Antworten Projekt 1
Start 1. Welche der beiden mit Dreamweaver mitgelieferten CDs ist für Windows, welche für Macintosh? Die violette enthält die Windows-Version, die grüne die Macintosh-Version.
2. Wie können Sie Dreamweaver nach der Installation starten? Über das Startmenü: Start, Programme, Macromedia Dreamweaver 4, Dreamweaver 4.
3. Nennen Sie die wichtigsten Fenster von Dreamweaver. Hauptfenster, Eigenschafteninspektor und Objektpalette.
4. Welche zwei Menükommandos stehen Ihnen zum Speichern einer Datei zur Verfügung und worin unterscheiden sie sich? Datei, Speichern sichert die Datei unter dem bisherigen Namen, bei Datei, Speichern unter können Sie einen neuen Namen angeben. Wenn Sie eine neue Datei erstellen, hat Datei, Speichern dieselbe Wirkung wie Datei, Speichern unter.
5. Wie können Sie eine bestehende Datei öffnen? Über das Menükommando Datei, Öffnen oder die Tastenkombination (Strg)+(O)
6. Wie können Sie die Voransicht Ihrer Seite im Browser aufrufen? Wählen Sie Datei, Vorschau in Browser, Name des Browsers, z.B. Datei, Vorschau in Browser, iexplore.
7. Wofür steht WYSIWYG? Für What You See Is What You Get – die Webseite sieht in Dreamweaver annähernd so aus wie später im Browser.
Fragen und Antworten
123
DREAMWEAVER 4 • Einführung
Projekt 2
Text 1. Wie blenden Sie den Eigenschafteninspektor ein? Mit dem Menübefehl Fenster/Eigenschaften oder mit dem Tastenkürzel (Strg)+(F3). Sie erkennen an dem Haken vor dem Eintrag im Menü Fenster, ob der Eigenschafteninspektor schon eingeblendet ist.
2. Wo stellen Sie einen Absatz auf eine Überschrift 5 um? Im Eigenschafteninspektor beim Pull-down-Menü Format. Dies geht aber nur, wenn sich der Cursor in einem Absatz befindet, oder ein bestimmter Text markiert ist.
3. Mit welchem Tastenkürzel erzeugen Sie einen neuen Absatz? Mit (¢)
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? Die Schriftgröße 1. Das ist ein sehr kleiner Text.
6. Wie ist ein Text standardmäßig ausgerichtet? Die Standardausrichtung ist linksbündig.
124
Fragen und Antworten
DREAMWEAVER 4 • Einführung
Projekt 3
Listen & Links 1. Welche Möglichkeiten haben Sie, einen Absatz als ungeordnete Liste zu definieren? Dies lässt sich über den Menübefehl Text/Liste/Ungeordnete Liste, den Befehl Liste/Ungeordnete Liste im Kontextmenü (Klick mit der rechten Maustaste) und das Symbol Ungeordnete Liste im Eigenschafteninspektor vornehmen.
2. Was können Sie im Dialogfenster Listeneigenschaften einstellen? Im Dialogfenster Listeneigenschaften können Sie zuvorderst den Listentyp ändern. Bei einer ungeordneten Liste können Sie außerdem den Stil der Aufzählungszeichen und den Stil der Aufzählungszeichen für ein einzelnes Listenelement ändern. Bei einer geordneten Liste können Sie für die gesamte Liste die Art der Nummerierung und den Beginn der Zählung festlegen. Für ein Listenelement lassen sich dieselben Änderungen ebenfalls vornehmen.
3. Kann eine geordnete Liste auch aus Buchstaben bestehen? Ja, eine Zählung in alphabetischer Reihenfolge ist in Groß- und Kleinbuchstaben möglich.
4. Woran erkennen Sie einen Link auf einen Anker? Am Doppelkreuz # vor dem Namen des Ankers. Außerdem hat der Anker keine Dateiendung.
Fragen und Antworten
125
DREAMWEAVER 4 • Einführung
Projekt 4
Grafiken 1. Mit welchem Tastenkürzel binden Sie eine Grafik in eine Webseite ein? Mit (Strg)+(Alt)+(I) (I steht dabei für Image).
2. Mit welcher Option können Sie die Grundlinie eines Textes an der Grundlinie einer Grafik anordnen? Klicken Sie die Grafik an und wählen Sie im Eigenschafteninspektor im Pull-down-Menü Ausrichten die Option Grundlinie.
3. Wo können Sie sich in Dreamweaver eine Bildvorschau ansehen, bevor Sie ein Bild in die Seite einbinden? Im Dialogfenster Bild auswählen können Sie die Checkbox Bildvorschau aktivieren. Dann wird eine Vorschau des ausgewählten Bildes auf der rechten Seite des Dialogfensters angezeigt.
4. Was passiert, wenn Sie eine Grafik verlinken, der keine Rahmendicke zugewiesen worden ist? Um die Grafik wird automatisch ein Rahmen angezeigt. Da das meist nicht erwünscht ist, sollten Sie für Grafiken, die verlinkt werden, eine Rahmendicke von 0 Pixeln wählen.
5. Können Sie auch eine Weltkugel als Hotspot einer Imagemap definieren? Ja, verwenden Sie einfach das Imagemap-Werkzeug für elliptische Formen.
126
Fragen und Antworten
DREAMWEAVER 4 • Einführung
Projekt 5
Tabellen 1. Wie lautet das Tastenkürzel zum Einfügen einer Tabelle? (Strg)+(Alt)+(T) (T steht für Table)
2. In welchen Maßeinheiten können Sie die Breite einer Tabellenzelle angeben? In Prozent von der Tabellenbreite oder in Pixeln. Achten Sie darauf, dass die Gesamtbreite der Tabelle nicht von der Summe der Zellenbreiten überschritten wird, sonst bekommen Sie ein furchtbares Chaos.
3. Wie markieren Sie eine Tabellenzeile? Klicken Sie auf den rechten Rand der Tabelle, wenn der Mauscursor die Form eines nach rechts gerichteten Pfeils annimmt.
4. Wo vergeben Sie eine Randfarbe für den Tabellenrand? Im Eigenschafteninspektor beim Farbfeld Randfarbe, allerdings nur, wenn die gesamte Tabelle ausgewählt ist.
5. Was ist die auffälligste Besonderheit bei einer unsichtbaren Tabelle? Sie ist unsichtbar – nein, Scherz beiseite. Dass der Rahmen auf 0 geschalten wurde.
Fragen und Antworten
127
DREAMWEAVER 4 • Einführung
Projekt 6
Formulare 1. Woran erkennen Sie ein Formular in Dreamweaver? An einem roten, gestrichelten Rechteck.
2. Welche Arten von Formularfeldern kennen Sie? Einzeilige Textfelder, mehrzeilige Textfelder, Passwortfelder, Checkboxen, Radiobuttons, Pull-down-Menüs/Listen, Schaltflächen (zum Versand).
3. Welche Formularfelder können Sie über das Symbol Textfeld einfügen erzeugen? Einzeilige Textfelder, Passwortfelder und mehrzeilige Textfelder. Die Unterscheidung treffen Sie, indem Sie im Eigenschafteninspektor die entsprechende Option auswählen.
4. Was ist (bei Textfeldern) der Unterschied zwischen Zeichenbreite und Max. Zeichen? Die Zeichenbreite legt fest, wie breit das Textfeld in der Anzeige ist, aber damit ist keine Beschränkung für die Eingabe gegeben. Mit Max. Zeichen geben Sie an, wie viele Zeichen maximal in das Textfeld eingegeben werden dürfen.
5. Was ist der prinzipielle Unterschied zwischen Radiobuttons und Checkboxen? Checkboxen sind voneinander unabhängig, während von allen Radiobuttons innerhalb einer Gruppe höchstens eine aktiv sein darf. Ein weiterer Unterschied ist übrigens, dass man eine Checkbox per Mausklick aktivieren und deaktivieren kann, Radiobuttons kann man nur deaktivieren, indem man auf einen anderen Radiobutton derselben Gruppe klickt.
6. Welche Vorteile hat eine Liste gegenüber einem Menü? Sie können bei einer Liste angeben, wie viele Elemente auf einmal dargestellt werden sollen. Geben Sie hier 1 an, haben Sie ein Menü. Damit ist die Liste flexibler.
7. Welche zwei Werte müssen Sie für jeden Eintrag eines Pulldown-Menüs angeben? Die Beschriftung und den internen Wert, der beim Formularversand übergeben wird.
8. Wie können Sie es einrichten, dass ein Formular an eine E-MailAdresse versandt wird? Geben Sie im Eigenschafteninspektor unter Aktion den Wert »mailto:[email protected]« an.
128
Fragen und Antworten
DREAMWEAVER 4 • Einführung
Projekt 7
Frames 1. Sind über das Erstellen von zwei vertikal getrennten Frames hinaus in Dreamweaver noch andere Frameunterteilungen möglich? Ja, Sie haben mit den Symbolen in der Objektpalette mannigfaltige Möglichkeiten.
2. Welche Möglichkeiten haben Sie, die Größe eines Frames zu ändern? Entweder durch Ziehen mit der Maus (klicken Sie dazu auf die Linie zwischen zwei Frames) oder über den Eigenschafteninspektor.
3. Wie legen Sie fest, welche HTML-Seite sich in einem Frame befindet? Klicken Sie in den Frame und wählen Sie den Menübefehl Datei, Öffnen in Frame.
4. In welchem Frame werden Links standardmäßig geöffnet? Im aktuellen Frame.
5. Wie können Sie den Frame festlegen, in dem ein Link geöffnet wird? Rufen Sie das Kontextmenü zum Link auf und wählen Sie ZielFrame, Name des Frames.
Fragen und Antworten
129
Stichwortverzeichnis A Absatz 36 Anker 60 B Bildvorschau 69 Browser 27 hinzufügen 29 Internet Explorer 27 Netscape Navigator 27, 30 D Datei in Frame öffnen 119 neu 34 öffnen 23 schließen 20 speichern 20 speichern unter 24 Dokumentfenster 16 Dreamweaver beenden 22 Oberfläche 17 starten 15 E Eigenschafteninspektor 16 F Formular Checkbox 103 einfügen 96 mehrzeiliges Textfeld 101 Passwortfeld 99 Pull-down-Menü 108 Radiobutton 105 Textfeld 97
Frame Datei öffnen 119 definieren 116 füllen 118 Link setzen 120 G Grafik Abstand 75 einbinden 68 einfügen 78 Größe 71 mit Link versehen 76 Rahmen 72 Text ausrichten 73 H Hintergrund 39 Horizontale Linie 17 I Imagemap 77 Installation 8 Dreamweaver und Fireworks 12 Lizenzvertrag 11 Seriennummer 11 Windows und Macintosh 8 Zielordner 13 L Link 57 absoluter 59 als Grafik 76 auf Anker 62 erstellen 58 in Frame 120 relativer 59
131
Stichwortverzeichnis Liste Absatz umwandeln 50 Aufzählungszeichen 52 geordnet 55 nummeriert 54, 55 ungeordnet 50 O Objektpalette 16 S Schriftart 42 Schriftfarbe 46 Schriftgröße 44 Seitentitel 38 T Tabelle Breite 83 einfügen 82 erstellen 82
132
füllen 84 Hintergrundfarbe 87 unsichtbar 90 Zellauffüllung 86 Zellen zusammenfassen 87 Text Absatz 36 an Grafik ausrichten 73 Ausrichtung 45 eingeben 34 Farbe 46 Größe 44 Schriftart 42 Zeilenumbruch 37 W WYSIWYG 25 Z Zeilenumbruch 37
