Dreamweaver für Einsteiger - download.knowware.dedownload.knowware.de/dreamweaver34.pdf · Dreamweaver Nr. 14 KnowWare PLUS Beispiele und Übungen Johann-Christian Hanke für Einsteiger

Dre

am

we

ave

r

KnowWare PLUSNr. 14

Beispiele und Übungen

www.KnowWare.de Johann-Christian Hanke

für Einsteiger

Dreamweaver 3/4

4 *qlrujs#b-v--b* ÊÑËÄ

4,-€

Deutschland: 4,- EUR Österreich: 4,60 EUR

Schweiz: 8 SFR Luxemburg: 4,70 EUR Italien: 5,50 EUR

Acrobat Reader - Bestellung - Autoren gesucht

Acrobat Reader: Wie ...F5/F6 öffnet/schließt die Ansicht Lesezeichen

Strg+F sucht

Im Menü Ansicht stellst du ein, wie die Datei gezeigt wird

STRG+0 = Ganze Seite STRG+1 = Originalgrösse STRG+2 = Fensterbreite

Im selben Menü kannst du folgendes einstellen:: Einzelne Seite,Fortlaufend oder Fortlaufend - Doppelseiten .. Probiere es aus, umdie Unterschiede zu sehen.

Navigation

Pfeil Links/Rechts: eine Seite vor/zurück

Alt+ Pfeil Links/Rechts: Wie im Browser: Vorwärts/ZurückStrg++ vergrößert und Strg+– verkleinert

Bestellung und Vertrieb für den BuchhandelBonner Pressevertrieb, Postfach 3920, D-49029 OsnabrückTel.: +49 (0)541 33145-20Fax: +49 (0)541 [email protected]/bestellen

Autoren gesuchtDer KnowWare-Verlag sucht ständig neue Autoren. Hast du ein Thema,daß dir unter den Fingern brennt? - ein Thema, das du anderen Leutenleicht verständlich erklären kannst?Schicke uns einfach ein paar Beispielseiten und ein vorläufigesInhaltsverzeichnis an folgende Adresse:[email protected] werden uns deinen Vorschlag ansehen und dir so schnell wiemöglich eine Antwort senden.

www.knowware.de

Inhaltsverzeichnis

© Johann-Christian Hanke: Homepages für Einsteiger - 11.02.02 - 23:03

3

InhaltsverzeichnisDie eigene Homepage mit Dreamweaver 4Dreamweaver starten: Der erste Kontakt 5Wichtige Werkzeuge und Grundeinstellungen 6

Objektpalette und Eigenschaften 6Die Oberfläche von Dreamweaver im Blick 7Übungsteil A: Grundbedienung von Dreamweaver 8Alles HTML oder was? Die erste Seite inDreamweaver! 9Text erfassen, formatieren und gestalten 10

Überschriften und Absätze 10Linien einfügen 10Attribute: Absatz ausrichten 11Zeichenformate 11

Einfache und erweiterte Listen gestalten 12Kopfbereich des Dokuments: Dokumenttitel undZeichensatz 13Übungsteil B: Text eingeben und bearbeiten 14Das FONT-Tag: Schriftart, Schriftgröße und -farbe 15

Schriftart verändern 15Schriftgröße einstellen 16Schriftfarbe einstellen 16

Quelltextansicht und Verlaufsfunktion 17Ansicht HTML-Quelle einschalten 17Verlaufsfunktion 17

Die externe Vorschau: Dokument im Browserbetrachten 19Übungsteil C: Schriftart, Verlauf und Quelltext 20Wichtige Grundeinstellungen von Dreamweaver 21

Der Dialog Einstellungen 21Rechtschreibung: Setzen sechs 21Externen HTML-Editor einbinden 22HTML-Tags umschreiben 23Optionen der Statusleiste 24Unsichtbare Elemente anzeigen 24

Bildergalerie: Grafik in die Seite einfügen 25Grafikformate GIF, JPG und PNG 25Grafik in HTML-Datei einbinden 25Grafik skalieren 26Alternativ-Text einfügen 27Quick Tag Editor 27

Links oder rechts? Grafik wunschgemäßausrichten 28

Ausrichtung durch den Absatz 28Ausrichtung mit Textfluss 28

Hintergrundfarbe und -grafik einbinden 29Hintergrundfarbe einstellen 29Hintergrundgrafik einfügen 29

Übungsteil D: Grundeinstellungen, Grafik,Hintergrund 30Hyperlinks: Interne und externe Verweise 31

Verweise auf benachbarte Dateien 31Externe Hyperlinks einbauen 33Seite in neuem Fenster öffnen 33Bitte Feedback: Der E-Mail-Link 34E-Mail-Link mit Betreff 34

Die Dreamweaver-Kurzreferenz 35Tastenkombinationen für Dreamweaver 38Besser navigieren: Interne Anker und Verweise 39

Interne Anker setzen 39Verweise auf interne Anker setzen 40

Mehr Spaß beim Springen: Tipps und Tricks zuHyperlinks 41

Verweise auf Dateien 41Grafik als Hyperlink einbinden 41Kurzinfo auf Hyperlinks 42Farben für Hyperlinks 42

Verweissensitive Grafiken: Image Maps 43Übungsteil E: Arbeit mit Hyperlinks 44Grundlagen: Mit Dreamweaver Tabellen erstellen 45

Einfache Tabelle erstellen 45Breite und Höhe der Tabelle 46Maßeinstellung mit der Maus 46Zellauffüllung und Zellraum 47Rahmenlinien mit Border 47Zeilen und Spalten ergänzen 48Zellen teilen und einfärben 48

Tabellen für exaktes Layout 49Ausrichtung in den Zellen 50Ausrichtung der Webseiten 50

Erweiterte Layoutfunktionen in Dreamweaver 51Pixelgenau: Ebenen und Tabellen 51Der Tabellen-Layoutmodus 51

Übungsteil F: Arbeit mit der Tabellenfunktion 52Mit Style Sheets HTML-Tags gestalten 53

Vorhandene Tags nachbearbeiten 53Mehr Freiheiten: Eigene Stilklassen erstellen 54

Absatzgebundene Stilklassen 54Stil zuweisen 54Ungebundene Klasse 55

Externe Style Sheets einbinden 55Mehr Feedback durch Formularfunktion 56

Das Beispielformular 56Formular einfügen 56Ein Klapplistenfeld erzeugen 56Einfache Textfelder einfügen 57Radioknöpfe einfügen 57Kontrollkästchen 58Textfeld (textarea) 58Abschicken: Submit und Reset 58Daten empfangen � CGI oder Mail? 58

Übungsteil G: Übungen zu CSS und Formularen 59Frames, verschiebbare Fensterteile auf Webseiten 60

Frameprojekt planen 60Beispieldokumente erstellen 60Rahmenaufteilung festlegen 61Verweise aus dem Frameset 61

Übungsteil H: Übungen zu Frames 62Multimedial: Videos und Sounds einbinden 63

Mediadateien als �Plug-In� 63Mediadateien einbinden 63

JavaScript: Rollover-Grafiken und URL-Verweisliste 64

Hover-Grafiken einbinden 64Eine URL-Verweisliste erzeugen 64

Animationen erstellen: Arbeit mit dem Timeline-Editor 65Mit den Site-Funktionen von Dreamweaverarbeiten 66

Eine Site einrichten 66Das Site-Fenster 66Vorteile des Site-Fensters 67Datei per FTP auf den Server laden 67

Das Asset-Fenster � Neu in Version 4 68Übung macht den Meister! Dreamweaver hilft 68Stichwortverzeichnis 69

Vorwort


4

Die eigene Homepage mit DreamweaverPrima, dass du da bist! Du möchtest eine eigeneHomepage ins Netz stellen? Ein komplettesWebprojekt soll es sein? Immer zu! Der Dream-weaver ist das ideale Werkzeug für deine Zwe-cke und unser Heft bringt dich hoffentlich im Nuzum Ziel.

Träume werden wahrZuerst ganz herzlichen Glückwunsch, denn derDreamweaver ist eine ausgezeichnete Wahl!Dieses Programm nimmt in der Runde der�großen Drei� (Microsoft FrontPage, AdobeGoLive) mit Abstand den Spitzenplatz ein. Unddamit auch du in Sachen Homepage bald�Spitze� wirst, lernst du in diesem Heft u.a.:• Einfache HTML-Seiten erstellen• Farben und Grafiken in die Seiten einfügen• Umgang mit Hyperlinks• Nutzen von Effekten, Sounds und

Multimedia• Tabellen, Formulare und Frames• Site-Management mit Dreamweaver• Seite mit FTP hochladen

Dreamweaver wendet sich vorrangig an den�ambitionierten� Webdesigner mit guten Quell-code-Kenntnissen. Falls du HTML (und Java-Script) lernen willst, empfehle ich dir ein Studi-um entsprechender KnowWare-Titel. Auch vonmir gibt es drei Hefte zum Thema, und zwar�Homepages für Einsteiger� (161), das neue�Homepages mit HTML und CSS� (168) undden Bestseller �Homepages für Fortgeschrittene�(PLUS 12). Auf diese Titel beziehe ich michgelegentlich, da ich sie am besten kenne. Letzt-genannte Ausgabe lehrt JavaScript, enthält einengroßen Referenzteil zu HTML und CSS undgeht auch auf XHTML und XML ein.

Zum Zeitpunkt des Erscheinens der Erstausgabelag mir eine Beta von Dreamweaver 4 vor, in-zwischen nutze ich längst die �Final�.Für diesen Nachdruck (Februar 2002) durfte ichdeshalb ein paar Seiten austauschen. Vor allemdas Frames-Kapitel habe ich überarbeitet.

Übungen und Kurzreferenz!Dieses Heft ist als Kurs aufgebaut, es besteht ausAnweisungen und Übungen. Du solltest esSchritt für Schritt am Rechner durcharbeiten.Das Heft kann sowohl als Kursmaterial als auchfür das Selbststudium eingesetzt werden. Stu-diere ruhig auch die Übungen, da ich dir hierimmer wieder etwas Neues beibringe.

Das Heft besitzt vier Seiten Kurzreferenzzum Heraustrennen!

In der Mitte des Heftes, auf Seite 35-38, findestdu vier Seiten Kurzreferenz zum Dreamweaver.Du kannst den Papierbogen geschickt heraus-trennen und zum Nachschlagen verwenden.

Über den AutorIch bin inzwischen 34 Jahre alt. Seit Herbst 1996arbeite ich als freiberuflicher Autor und schreibeBücher und Zeitschriftenartikel zu Microsoft Of-fice, Internet und Programmierung.

Bei KnowWare habe ich bisher Hefte zu Word,Windows, PowerPoint, Outlook, Outlook Ex-press, Netzwerken, Internet und HTML ver-öffentlicht, siehe www.jchanke.de/knowware.

Außerdem gebe ich Kurse zu Windows, Word,Excel, Access, Outlook, Homepage-Gestaltung,Suchen im Internet und Programmieren mitJavaScript an einer Berliner Volkshochschule.

Service-Seite zum HeftDu hast eine Frage zu diesem Heft oder denanderen Homepage-Titeln? Schaue bitte aufmeine Service-Seite. Unter der Adresse

www.jchanke.de/homepage

findest du Übungsdateien zum Download, evtl.Ergänzungen und eine Feedback-Möglichkeit zudiesem und allen anderen KnowWare-Titeln.Und nun wünsche ich dir viel Spaß und Erfolgbeim �Weben� deiner �Homepage-Träume�.

Dreamweaver starten: Der erste Kontakt


5

Dreamweaver starten: Der erste KontaktJetzt geht es aber los! Ich zeige dir, wie du denDreamweaver blitzschnell eroberst und wie dusofort mit diesem Programm loslegst.Im Heft gehe ich davon aus, dass du die Win-dows-Variante dieses Programms verwendest.Falls du die Mac-Ausgabe hast, sehen einigeDialoge gegebenenfalls etwas anders aus.

Dreamweaver startenSicher weißt du längst, wie du Dreamweaverstartest. Dafür gibt es mehrere Möglichkeiten.Die �klassische Variante� sieht so aus:

1. Du klickst auf den Knopf START, das Start-menü schnellt hoch. Nun zeigst du auf denEintrag PROGRAMME.

2. Du zeigst auf den Eintrag MACROMEDIADREAMWEAVER und klickst letztendlich aufden Programmeintrag DREAMWEAVER.

Schon startet das Programm. Geduld! DieserVorgang kann sich gerade am Anfang eine Weilehinziehen, da erst alle Dreamweaver-Modulegeladen werden müssen.

Viel praktischer: VerknüpfungNoch praktischer ist natürlich eine Verknüpfungauf dem Desktop oder in der Schnellstartleiste.So kannst du dein Lieblingsprogramm noch be-quemer und noch schneller aufrufen.Ich zeige dir fix, wie du eine Verknüpfung aufdem Desktop erstellst.

1. Du klickst noch ein einziges Mal auf denKnopf START, zeigst auf PROGRAMME,wählst DREAMWEAVER.

2. Jetzt klickst du mit der rechten Maustasteauf diesen Eintrag und hältst die Maustastegedrückt.

3. Nun ziehst du den Eintrag bei gedrückterrechter Maustaste auf eine freie Stelle desDesktops.

4. Nach Loslassen der Maustaste erscheintdas Kontextmenü. Klicke auf den BefehlVERKNÜPFUNG(EN) HIER ERSTELLEN.

Schon besitzt du an dieser Stelle eine praktischeVerknüpfung. Du kannst das Programm schnellper Doppelklick starten.

Du kannst die Verknüpfung aber auch in den Be-reich neben der [Start]-Taste ziehen, in die sogenannte Schnellstart-Leiste. Dann genügt einEinfachklick zum Aufruf von Dreamweaver.

Starten per Ausführen-DialogKennst du meine Lieblings-Startmethode? Ichnutze gerne den Ausführen-Dialog. Auch dieserService funktioniert unter allen Windows-Versi-onen ab 95.

1. Du klickst auf den Knopf START, das Start-menü schnellt hoch. Nun wählst du denBefehl AUSFÜHREN. ([Win] + [R])

2. Jetzt tippst du dreamweaver hier hineinund drückst [ENTER].

Dieser Trick klappt übrigens auch mit Word(winword), Excel (excel) oder Outlook(outlook).

Dreamweaver im Überblick


6

Wichtige Werkzeuge und GrundeinstellungenAm interessantesten ist sicher, wie du dich imDreamweaver zurecht findest und welche Werk-zeuge dir hier zur Verfügung stehen.

Optimale BildschirmauflösungBeachte, dass du für das vernünftige Arbeitenmit Dreamweaver eine Bildschirmauflösung von1024 x 768 Pixeln vorsehen solltest.

Lässt dein System diese Auflösung zu? Klickemit der rechten Maustaste auf einen freien Fleckdes Windows-Desktops. Wähle den BefehlEIGENSCHAFTEN. Gehe ins Register Einstellun-gen und stelle die gewünschte Auflösung mitdem Schieberegler ein.Bei kleineren Auflösungen hast du evtl. nichtgenügend Platz für alle schwebenden Fenster.

Objektpalette und EigenschaftenDu hast den Dreamweaver gestartet? Dann siehstdu den normalen Seitenbereich. Drumherumgruppiert sich eine mehr oder weniger großeVielfalt von schwebenden Fenstern.

Du benötigst selten alle auf einmal!

Am wichtigsten sind der so genannte Eigen-schaften-Inspector und die Objektpalette. Eben-falls praktisch, aber nicht unbedingt nötig ist derLauncher.Alle anderen Symbolleisten kannst du getrostausblenden.

1. Wähle in der Menüleiste den OberpunktFENSTER. Das Fenster-Menü klappt herun-ter: Alle derzeit eingeblendeten Fenstersind abgehakt.

2. Nimm nacheinander die Häkchen derFenster weg, die du nicht mehr sehenmöchtest. Du benötigst nur die oberen zweibzw. drei Punkte:

• OBJEKTE• EIGENSCHAFTEN• (LAUNCHER)Die anderen �Schwebefenster� besprechen wirgegebenenfalls dann, wenn wir sie benötigen.

Der Launcher ist ebenfalls nicht unbedingt nötig,da es im rechten unteren Fensterbereich exaktdie gleichen Symbole in Miniaturform gibt.

LauncherDer Launcher bzw. der �Mini-Launcher� helfendir, weitere nützliche Fenster und Ansichten ein-bzw. auszublenden. So nutze ich gerne EIN-BLENDEN HTML-QUELLE, um schnell einspezielles Quellcode-Fenster einzublenden.

Beachte: Ein erneuter Klick blendet das jewei-lige Fenster wieder aus.

Alle Fenster ein- und ausblendenBesonders praktisch am Dreamweaver finde ich,dass du alle schwebenden Fenster auf einenSchlag ein- bzw. wieder ausblenden kannst.Auch hier wirst du im Menü FENSTER fündig,wähle SCHWEBENDE FENSTER ANZEIGEN.Bei eingeblendeten Fenstern lautet der Befehlnatürlich: SCHWEBENDE FENSTER AUSBLENDEN.

Merke dir dafür die Funktionstaste [F4], dasist eine Art �Wechselschalter�

Dreamweaver im Überblick


7

Die Oberfläche von Dreamweaver im BlickSchauen wir uns einmal den Dreamweaver in der Komplettübersicht an. Ich habe die wichtigstenschwebenden Fenster und außerdem das Lineal (ANSICHT/LINEALE/ZEIGEN) eingeblendet. Der neueDreamweaver 4 bietet zusätzlich unter der Menüleiste eine Symbolleiste, die zeige ich dir unten.

Hier die wichtigsten Elemente in der Übersicht:• Die Titelleiste enthält den Dateinamen und den Dokumenttitel.• Zusätzlich zur Menüleiste gibt es im neuen Dreamweaver 4 eine Symbolleiste. Hier kannst du zwi-

schen der (neuen) integrierten Quellcode-Ansicht und dem normalen �Design-View� umschalten:

• Der Launcher kann über das Menü FENSTER eingeblendet werden. Du brauchst ihn jedoch nicht, daes rechts unten in der Statuszeile einen �Mini-Launcher� mit den gleichen Schaltflächen gibt.

• Mit der Objektpalette kannst du �Objekte� wie beispielsweise Grafiken oder Tabellen einfügen. Sieenthält mehrere der so genannten �Tafeln�. Voreingestellt ist Allgemein.

• Am wichtigsten ist der Eigenschaften-Inspector. Bequem lassen sich die eingestellten Eigenschaftenmarkierter Objekte prüfen und verändern

• Ebenfalls praktisch sind die Anzeigen in der Statusleiste. Der Tag-Selektor zeigt die verwendetenTags, ein Anklicken markiert diese Passagen. Außerdem siehst du Größe und Ladezeit der Seite.

Titelzeile, enthält Dateinamen und Titel

Objektpalette

Größe und Ladezeit

»Mini-Launcher«

Vergrößern/Verkleinern

Eigenschaften-Inspector

Tag-Selektor

Menüleiste

Launcher

ÜBUNGSTEIL A: Grundbedienung von Dreamweaver


8

ÜBUNGSTEIL A: Grundbedienung von DreamweaverDu weißt inzwischen, wie man:• Dreamweaver startet• Schwebefenster ein- und ausblendet• Objektpalette, Eigenschaften-Inspector und Launcher anzeigt• alle Fenster ein- und ausblendet• den Launcher benutzt

Übung A1: Dreamweaver starten und Lineal einblendenStarte bitte den Dreamweaver, und zwar auf die schnellste dir bekannte Methode. Normalerweise sinddie Lineale nicht sichtbar. Blende diese also zusätzlich ein. Tipp: Das Menü ANSICHT hilft dir dabei.

Übung A2: Alle Schwebefenster ein- und ausblendenBlende alle Schwebefenster auf einen Schlag ein bzw. aus. Verwende dafür die entsprechende Funk-tionstaste.

Übung A3: Objektpalette und Eigenschaften-Inspector einblendenBlende alle schwebenden Fenster bis auf Objektpalette und Eigenschaften-Inspector ein. Schaue imReferenzteil auf Seite 38 nach, welche Tastenkombinationen es gibt. Blende Objektpalette und Eigen-schaften-Inspector nun mit Hilfe dieser Tastenkombinationen ein und aus.

Übung A4: Eigenschaften-Inspector verschieben und vergrößernProbiere, ob du es schaffst, den Eigenschaften-Inspector (oder ein anderesschwebendes Fenster) mit der �Klick-und-Zieh-Technik� an eine andereStelle zu verschieben. Tipp: Beachte die Grafik! Probiere nun, den Eigen-schaften-Inspector auf die Maximalgröße umzuschalten. Tipp: Dieentsprechende Schaltfläche dafür habe ich dir in der Grafik auf der Vorseiteschon gezeigt!

Übung A5: Den Launcher ausprobierenProbiere ruhig einmal aus, welche Fenster sich über den Launcher starten lassen. Schalte vor allemeinmal die Quelltextansicht ein � und auch wieder aus!

Übung A6: Richtige Bildschirmauflösung einstellenIch empfehle dir, deine Seiten für eine Bildschirmauflösung von800x600 Pixel zu optimieren. Stelle also das Dokumentfenster vonDreamweaver so ein, dass dir hier die optimale Ansicht gebotenwird. Tipp: Orientiere dich an nebenstehender Grafik und derGrafik auf der Vorseite.

Übung A7: Hilfe zur SelbsthilfeDu hast ein Problem oder eine Frage, welche im Rahmen dieses Heftes nicht geklärt wurde. Finde ei-nen Weg, dir von Dreamweaver selbst helfen zu lassen. Welche Funktionstaste musst du drücken?

Die erste Seite in Dreamweaver


9

Alles HTML oder was? Die erste Seite in Dreamweaver!Ran an das erste Beispiel! Im Handumdrehen erstellst du ein Basis-Dokument und probierst dabei diewichtigsten Grundformate von HTML aus. Es geht um das Dokument magister.htm, ein in verschie-dene Überschriftsebenen eingeteiltes, kurzes Dokument.

Das Beispieldokument im BlickUnd hier zeige ich dir unser erstes Musterbeispiel, wie es im Browser erscheint:

In diesem Dokument findest du die wichtigsten HTML-Elemente wieder. Wir arbeiten mit Überschrif-ten, Absätzen, Linien und einer Liste. Die im Hintergrund verwendeten HTML-Tags habe ich zusätz-lich in die Grafik hineingeschrieben.

HTML wurde vorrangig entwickelt, um wissenschaftliche Dokumente besser anzeigen zu können. Esgibt Überschriftsebenen, Absätze und Listen. Wie schon erwähnt: Alle wichtigen Details zu HTMLkannst du den im Vorwort empfohlenen KnowWare-Ratgebern entnehmen.

Dokumenttitel <title></title>

Aufzählung <ul></ul>

Listeneinträge <li></li>

Überschrift 1 <h1></h1>

Absatz, rechtsbündig<p align="right"></p>



Absatz <p></p>Linie <hr>

Zeilenumbruch <br>

Absatz <p></p>

kursiv <i></i>

Linie <hr>

Absatz <p></p>



Text erfassen, formatieren und gestalten10

Text erfassen, formatieren und gestaltenJetzt zeige ich dir, wie du Text erfasst und dasDokument gestaltest. Dabei benötigst du vor al-lem den Eigenschaften-Inspector.

Überschriften und AbsätzeUnd so arbeitest du mit dem Dreamweaver, es istim Prinzip so wie in deiner Textverarbeitung:

1. Schreibe den Text, am besten zuerst ohneFormatierungen. Drücke auf [Enter], wenndu einen neuen Absatz erzeugen möchtest.

2. Auch ein Zeilenumbruch ist möglich. ImBeispiel steht zwischen dem Zitat und demUrheber nun solch ein �break�. Tippe[Umschalt] + [Enter].

3. Du möchtest ein Überschriftsformat zuwei-sen? Nichts leichter als das! Klicke in denAbsatz, hier beispielsweise in die Haupt-überschrift. Wähle im Feld Format des Ei-genschaften-Inspectors das entsprechendeFormat aus.

Als HTML-kundiger Computerfreund weißt dunatürlich, dass im Hintergrund die Überschrifts-formate <h1></h1>, <h2></h2>, <h3></h3>usw. zugewiesen werden, die �headings�.

Du hast nach einem Absatz mit Überschrift auf[Enter] gedrückt? Dieses Format wird an dennächsten Absatz vererbt. Schalte deshalb im Ei-genschaften-Inspector gegebenenfalls auf dasFormat Absatz um.Hinter dem Absatz-Format verbirgt sich übri-gens das Tag-Paar <p></p>.

Linien einfügenAuch das Einfügen einer Linie (<hr>) ist ein-fach. Achte zuerst darauf, dass die Objektpaletteeingeblendet ist.

1. Klicke an die Stelle, an der du die Linieeinfügen möchtest. Wenn du vor eine Text-passage klickst, wird die Linie über dieserPassage eingefügt.

2. Klicke nun in der Objekt-Palette auf dieSchaltfläche für die Linie, auf HorizontaleLinie einfügen.

3. Wenn du diese Technik bevorzugst, kannstdu die Linie auch per Drag & Drop in dasDokument einfügen. Klicken, ziehen und ander richtigen Stelle loslassen!

Text erfassen, formatieren und gestalten 11

Speichern nicht vergessen!Halt! Ehe wir weitermachen, erinnere ich dichschnell noch an das Speichern. Das hast du dochsicher schon gemacht, oder?Falls nicht, hole es fix nach. Wähle im MenüDATEI den Befehl SPEICHERN.

Oder nutze die universelle Windows-Tas-tenkombination [Strg] + [S].

Im Nu erscheint der Speichern-Dialog. Tragedeinen Dateinamen in das Feld Dateiname. Au-tomatisch hängt Dreamweaver die Endung htmfür dich an.

Falls du lieber die Endung html wünschst, musstdu den gesamten Dateinamen mit Endung hierhinschreiben.Ein paar Seiten weiter hinten verrate ich dir, wiedu Dreamweaver so einstellst, dass grundsätzlichdie Endung html verwendet wird.

Ich empfehle dir, alle zu einem Projekt gehören-den Dateien vorerst in einem Ordner abzuspei-chern. Wähle für die Dateinamen am bestendurchweg Kleinschreibung, verzichte auf Leer-zeichen, Sonderzeichen und Umlaute!

Attribute: Absatz ausrichtenWeiter geht�s im Text. Widmen wir uns zuerstden speziellen Absatzformaten. Wenn du HTMLkennst, weißt du, dass es zu jedem Tag Attributegibt. Und mit solch einem raffinierten Attributlässt sich auch die Absatzausrichtung verändern.Der Absatz mit dem Zitat soll rechtsbündig aus-gerichtet werden.

1. Klicke in das Element, welches du gestaltenmöchtest. Klicke im Beispiel in den Textab-satz mit dem Zitat von Werner Hegemann.

2. Achte darauf, dass der Eigenschaften-In-spector sichtbar ist. Blende ihn gegebe-nenfalls über [Strg] + [F3] ein.

3. Je nach markiertem Element zeigt dir derEigenschaften-Inspector die entsprechen-den Schaltflächen. Hier kannst du die ge-wünschten Attribute zuweisen.

4. Du möchtest den Absatz an den rechtenRand schieben? Klicke einfach auf dieSchaltfläche RECHTSBÜNDIG.

Nun wird das Absatz-Tag <p> mit dem Attributalign="right" versehen.

ZeichenformateAuf ähnliche Art und Weise gelingt auch dasZuweisen von Zeichenformaten. Du musst dieentsprechenden Textpassagen nur vorher markie-ren.

In der Abbildung wird dem Zitat gerade dasFormat kursiv zugewiesen. Im Hintergrund nutztDreamweaver das Tag-Paar <i></i>.

Aufzählung und Nummerierung12

Einfache und erweiterte Listen gestaltenWie wäre es mit schicken Listen? Egal ob Auf-zählung oder Nummerierung � Dreamweaverbietet für jeden Geschmack das Richtige.

Listen erstellenAuch im Beispiel fehlt noch die betreffendeTextstelle. Zum Zuweisen von Listenelementengibt es zwei Möglichkeiten:

1. Setze jeden Listeneintrag in einen eigenenAbsatz, drücke also nach jeder Passageauf [Enter].

2. Markiere alle Absätze, die du mit Aufzäh-lungszeichen versehen möchtest.

3. Klicke jetzt im Eigenschaften-Inspector aufdie Schaltfläche UNGEORDNETE LISTE. ImHintergrund weist Dreamweaver die Tags<ul></ul> zu. Du erkennst die Listedurch runde Aufzählungszeichen.

Du kannst aber auch anders vorgehen: Tippeeinen Listeneintrag und weise das Format zu.Der Druck auf [ENTER] vererbt das Format andie nächsten Absätze. Zweimal [ENTER] hebt dieFormatierung wieder auf, wie in Word.

Attribute für ListenUnser Beispiel ist damit schon perfekt. Als Leservon KnowWare 161 weißt du jedoch, dass es fürListen und Nummerierungen unzählige Attributegibt. Schaue auf Seite 32 nach.Wie wäre es mit hohlen Kreisen statt der gefüll-ten? Oder mit Quadraten? Soll die Nummerie-rung mit arabischen Zahlen, Großbuchstabenoder Kleinbuchstaben erfolgen?Auch mit Dreamweaver kannst du selbstver-ständlich diese HTML-Attribute zuweisen. Ichzeige es dir am Beispiel der ungeordneten Liste.Statt der Bullets wählen wir hohle Kreise.

1. Erweitere denEigenschaften-Inspectordurch Klick auf den Pfeil.

2. Klicke jetzt in einen der Listeneinträge. Mar-kiere keinesfalls die gesamte Liste, derKlick in einen Eintrag genügt. (Trotzdemwird die Einstellung für alle Einträge vorge-nommen.)

3. Wähle nun die Schaltfläche LISTENELEMENT.

4. Wähle im Feld Listeneigenschaften die ge-wünschten Eigenschaften. Stelle im FeldListentyp z.B. GLIEDERUNG ein, das steht (inVersion 3) für <ul></ul>. Suche im FeldStil KREIS heraus (type="circle").

5. Bestätige deine Einstellungen durch Klickauf [OK].

Kopfbereich: Dokumenttitel und Zeichensatz 13

Kopfbereich des Dokuments: Dokumenttitel und ZeichensatzFertig? Mitnichten! Höchste Zeit, endlich denDokumenttitel festzulegen.

In HTML besitzt jedes Dokument einen so ge-nannten Titel. Dieser Beschreibungstext steht imKopfbereich des Quelltextes (HEAD) und wirdhier zwischen den <title></title>-Tagseingetragen. Dieser Titel wird in der Titelzeiledes Browsers angezeigt und dient vielen Such-maschinen als Orientierung.

Titel festlegenUnd so gehst du dabei vor:

1. Schalte in den Kopfbereich um. Dazuwählst du im Menü ANSICHT den BefehlHEAD-INHALT.

2. Der Kopfbereich öffnet sich in einemschmalen Streifen am oberen Dokument-rand. Hier findest du für die einzelnen TagsSymbole vor.

3. Klicke auf das linke Symbol, es ist für denTitel verantwortlich. Schaue in den Eigen-schaften-Inspector. Hier steht im Titel-Feldbisher Untitled Document.

4. Trage einen aussagekräftigen Titel in dasFeld Titel ein. Schreibe beispielsweiseStadtentwicklung von London undBerlin.

Du findest den Titel jetzt neben dem Dateinamenin der Titelzeile von Dreamweaver wieder.

Auch jeder Browser zeigt dir diesen Text in derTitelzeile an.

Meta-Tag für ZeichensatzHast du dich schon gefragt, was es mit demzweiten Symbol im Kopfbereich auf sich hat?Dahinter verbirgt sich das Meta-Tag für den Zei-chensatz.

Dreamweaver setzt diese wichtige Angabegleich ganz automatisch in den Kopfbereich. Mitiso-8859-1 ist unser �westlicher Zeichensatz�gemeint. Er sichert zu, dass Umlaute und Son-derzeichen richtig im Browser dargestellt wer-den.

Trotz dieser Angabe werden Umlaute wie ü oderdas ß im Hintergrund kodiert, ü wird beispiels-weise zu ü und ß zu ß!

Schließe den Kopfbereich wieder, wähle dazuerneut ANSICHT/HEAD-INHALT.

Titel in Dreamweaver 4Im neuen Dreamweaver ist das Festlegen desTitels nun noch einfacher geworden.Schaue in die Symbolleiste. Hier gibt es extraein Feld zum Eintragen des Titels.

Überschreibe den Platzhalter Untitled Documenteinfach mit einem Titel deiner Träume.Selbstverständlich kannst du auch im neuenDreamweaver den zuvor beschriebenen Weggehen.

Übungsteil B: Text eingeben und bearbeiten14

ÜBUNGSTEIL B: Text eingeben und bearbeitenDu weißt jetzt auch, wie man:• Text in Dreamweaver erfasst und Überschriften zuweist• Absatz- und Zeilenumbrüche erzeugt• Linien einfügt• Die Attribute ausgewählter Elemente ändert• Den Titel für eine Seite vergibt

Übung B1: Speichern unter anderen NamenDu möchtest nicht, dass die Änderungen der nächsten Übungen die Originaldatei magister.htm über-schreiben. Speichere das neue Dokument deshalb unter dem Namen magister2.htm, lege es in dengleichen Ordner wie die Datei magister.htm. Tipp: Du benötigst den Befehl SPEICHERN UNTER.

Übung B2: ÜberschriftsformateWandle die beiden Überschriften London und Berlin von einer Überschrift 3 in eine Überschrift 4 um.

Übung B3: Absatz zentrierenSetze den Absatz Wenn man sich mit der Stadtentwicklung Berlins beschäftigt ... auf zentriert.

Übung B4: Textpassagen formatierenFormatiere die Wortgruppe Werner Hegemann mit Fett.

Übung B5: Eine Nummerierung erzeugenWandle die Aufzählung Industriestadt, Zerstörung ... in eine Nummerierung um. Tipp: Du musst alleEinträge markieren, damit die gewünschte Schaltfläche auf die gesamte Liste wirkt.

Übung B6: Nummerierungszeichen anpassenÄndere die Nummerierung so um, dass statt der Zahlen Großbuchstaben als Auf-zählungszeichen verwendet werden. Tipp: Der Eigenschaften-Inspector mussdafür �ausgeklappt� sein. Außerdem darf nur ein einziger Listeneintrag markiertsein.

Übung B7: Titel ändernÄndere den Seitentitel in Seminararbeit.

Übung B8: Attribute für Linie einstellen (Zusatzübung)Per Voreinstellung ist eine Linie 100% breit. Ändere die Linien-attribute so um, dass die zwei Linien nur noch 300 Pixel breit sind.Außerdem sollen sie linksbündig stehen.

Übung B9: Zusatzaufgabe 2: Lebenslauf erstellen (Zusatzübung)Erstelle eine Seite mit deinem Kurzlebenslauf. Arbeite mit Überschriften, Listen und Linien. Speicheredie Datei unter dem Namen vita.htm.

Schriftart, -größe und -farbe einstellen 15

Das FONT-Tag: Schriftart, Schriftgröße und -farbeWeiter geht�s mit der Gestaltung deines Doku-ments. Nehmen wir uns wieder die magister.htmvor. (Arbeite mit einer Kopie des Originals.)Ändere die langweilige Standardschriftart.Bringe etwas Farbe in deine Seite! Selbst dieSchriftgröße kannst du wunschgemäß justieren.

Schriftart verändernNormalerweise zeigt der Browser dein Doku-ment mit einer Standardschriftart an.

Die Standardschrift ist in der Regel Timesbzw. Times New Roman.

Erst das so genannte <font>-Tag mit dem Att-ribut face ermöglicht dir, hier Änderungen vor-zunehmen. Falls du die Nr. 161 besitzt: AufSeite 31 kläre ich dich darüber auf.Aber in Dreamweaver brauchst du selbstver-ständlich kein HTML zu können.

Leider kann man als Gestalter der Seite nichtvorausahnen, welche Schriftarten der Betrachterinstalliert hat. Dreamweaver fügt deshalb stetsein �Schriftenbündel� mit etlichen Alternativ-schriften ein.

Ich zeige dir, wie du beispielsweise eine Über-schrift mit der Schriftart Arial (bzw. einer Alter-native) versiehst.

1. Markiere zuerst die Passage, die du gestal-ten möchtest. Im Beispiel ist es die ersteHauptüberschrift. (Reinklicken genügtnicht.)

2. Schaue in den Eigenschaften-Inspector. ImSchriftartenfeld steht bisher Standardschrift.Im Klartext: Der Browser verwendet Timesbzw. Times New Roman, es ist also keinebesondere Schriftart eingestellt.

3. Wähle jetzt in der Schriftartenliste das ge-wünschte Schriftenbündel. Entscheide dichbeispielsweise für ARIAL, HELVETICA, SANS-SERIF.

Was bedeutet das konkret? Falls der RechnerArial besitzt, wird diese Schriftart für die An-zeige gewählt. Wenn der Rechner diese Schrift-art nicht besitzt (beispielsweise ein Macintosh),sucht der Browser nach Helvetica.Falls auch Helvetica nicht vorhanden ist, wirdmit sans-serif auf eine allgemeine �serifenlose�Schriftart umgeschaltet.

Serifen sind kleine �Haarstriche� an den Buch-stabenenden. Die berühmteste Serifenschrift isteine Times oder eine �Times-Verwandte�. Sach-liche Schriftarten wie Arial oder Helvetica besit-zen keine Serifen.

SchriftenbündelDer Dreamweaver stellt dir standardmäßig fol-gende Schriftenbündel zur Verfügung. Am Endewird jeweils ein �allgemeiner� Schriftenober-begriff verwendet. Mit serif ist beispielsweise ir-gend eine Serifenschrift gemeint.• Arial, Helvetica, sans-serif• Times New Roman, Times, serif• Courier New, Courier, mono• Georgia, Times New Roman, Times, serif• Verdana, Arial, Helvetica, sans-serifDahinter verbirgt sich übrigens das <font>-Tagmit dem Attribut face. Falls du das ersteSchriftbündel wählst, weist Dreamweaver fol-gendes zu: <font face="Arial,Helvetica, sans-serif">...</font>.

Über den Eintrag SCHRIFTARTLISTE BE-ARBEITEN lässt sich die Liste anpassen.

Quelltextansicht und Verlaufsfunktion16

Das gesamte Dokument markierenDu möchtest dem gesamten Dokument eine an-dere Schriftart zuweisen? Dann wirf deinenBlick doch einmal auf den Tag-Selektor in derlinken unteren Fensterecke.Hier wird stets das <body>-Tag eingeblendet.Und BODY (Körper) steht für das gesamte Do-kument.

Klicke also auf <body> und weise per Eigen-schaften-Inspector die gewünschte Schriftart zu.

Die bessere Alternative sind die so genanntenStyle Sheets, die Formatvorlagen für HTML.Auf Seite 53 zeige ich dir, wie du in Dreamwea-ver mit Formatvorlagen arbeitest.

Schriftgröße einstellenDu möchtest die Schriftgröße einstellen? Auchhier hilft dir der Eigenschaften-Inspector wiederauf ganz famose Weise. Markiere die betreffendePassage.

Stelle nun im Feld Größe die gewünschte Größeein. Im Hintergrund arbeitet Dreamweaver mitdem Attribut size des <font>-Tags.

Warum stehen dir hier unterschiedliche Mög-lichkeiten zur Verfügung? Nun, das liegt daran,dass dieses size-Attribut verschiedene Werteerlaubt. Ich empfehle dir die Angaben mit +und -. Es handelt sich um relative Größen, +3bedeutet beispielsweise : Drei Stufen größer alsnormal.

Schriftfarbe einstellenFehlt noch die Schriftfarbe. Dahinter verbirgtsich das Attribut color.

1. Markiere wie immer zuerst die Passage, diedu einfärben möchtest

2. Klicke im Eigenschaften-Inspector auf dasFarb-Symbol. Das Feld daneben ist derzeitnoch leer.

3. Nun öffnet sich die Farbpalette. Klicke ein-fach die gewünschte Farbe an.

4. Dreamweaver fügt den pas-senden hex. Farbcode ein.

Übrigens benutzt Dreamweaver ausschließlichdie Farben der so genannten sicheren Webpa-lette.

Bei den Farben der sicheren Webpalette handeltes sich um die 216 Farben, die immerhin sowohlauf dem PC als auch auf dem Mac ähnlich ange-zeigt werden. Der so genannte hexadezimaleCode dieser Farben besteht immer aus einemhex. Zahlenpaar wie 00, 33, 66, 99, cc oder ff.

Du kennst die erlaubten Farbnamen wie red,blue, silver, gray, yellow usw.?

Dann kannst du natürlich diese Namen auch di-rekt in das Farb-Feld eintragen. Mehr zu Farbenund den hexadezimalen Farbcodes findest du inHeft 161 auf Seite 30.

Quelltextansicht und Verlaufsfunktion 17

Quelltextansicht und VerlaufsfunktionDer Dreamweaver ist berühmt für die Qualitätdes im Hintergrund entstehenden Quelltextes.Aber auch handgeschriebene HTML-Dokumentekannst du bedenkenlos deinem �Traumweber�anvertrauen. Hier werden praktisch keine Ände-rungen vorgenommen.Wie wäre es mit einem Experiment? Ich zeigedir, wie du in den Quelltext umschaltest und hierÄnderungen vornimmst.

Ansicht HTML-Quelle einschaltenUnd so einfach schaltest du in die Quellcode-Ansicht um:

1. Klicke in der rechten unteren Fenstereckeauf die Schaltfläche EINBLENDEN HTML-QUELLE. Du erkennst sie an den Klammer-Symbolen (<>).

2. Nun öffnet sich das Quelltext-Fenster. Hiersiehst du den HTML-Quelltext und kannstihn bequem bearbeiten.

3. Jede Änderung im Quelltext wird sofort imLayout übernommen, hier die Änderungvon <ul> in <ol>. Dadurch wird dienormale Liste in eine Nummerierungumgewandelt.

Wenn du im Quelltext eine bestimmte Passagemarkierst, wird diese im Layout ebenfalls mar-kiert. Auch umgedreht funktioniert dieses Spiel.

Richte dir die Quelltextansicht noch komfortab-ler ein: Wenn du die Option LINIENNUMMERNwählst, werden die Zeilen im Quelltext durch-nummeriert. Ein Häkchen bei UMBRUCH sorgtdafür, dass der Text im Quelltext umbrochenwird. In Version 4 erscheinen diese Optionenerst nach Klick auf die rechte Schaltfläche.Zusätzlich gibt es in Version 4 die integrierteAnsicht, die du über das entsprechende Symbolin der Symbolleiste einschalten kannst:

VerlaufsfunktionEgal ob Layout oder Quelltext: Du hast zu vielprobiert? Du möchtest die Schritte am liebstenwieder rückgängig machen? Hier hilft die Ver-laufsfunktion. Dabei handelt es sich um diebeste Protokoll- und Rückgängig-Funktion, dieich je bei einem Programm gesehen habe.

Gerade die Konkurrenz GoLive hinkt stark hin-terher, in vielen Fällen ist es nicht einmal mög-lich, einen einzigen Schritt zurück zu gehen.

Damit nicht genug: Du kannst dieses Tool auchdazu verwenden, deine eigenen Befehlsfolgensozusagen als �Makro� zu speichern und immerwieder zu verwerten.

Quelltextansicht und Verlaufsfunktion18

Die Verlaufsfunktion aufrufenUnd wie rufst du diese tolle Verlaufsfunktionauf? Ganz einfach. Ich zeige dir bei dieser Gele-genheit gleich, wie du bestimmte Aktionen zu-rücknehmen und wiederherstellen kannst.

1. Rufe das Verlaufs-Fenster auf. Dazu wählstdu im Menü FENSTER den Befehl VERLAUF.Du kannst auch die Funktionstaste [F9]drücken, das geht schneller.

2. Das Verlaufs-Fenster präsentiert dir penibelalle Schritte, die du in der letzten Zeit vor-genommen hast

3. Du möchtest einige Aktionen zurückneh-men? Klicke auf den Anfasser. Ziehe die-sen bei gedrückter linker Maustaste nachoben.

4. Dreamweaver nimmt die Schritte zurückund zeigt dir die Veränderungen in Echtzeitan. Nur mit einem roten Kreuz verseheneÄnderungen werden übersprungen.

Ziehe den Hebel einfach wieder nach unten, umdie Schritte wieder herzustellen.

Eigene Befehle erstellenSo speicherst du mehrere Aktionen als Befehl:

1. Nimm die Änderungen vor, die du als Be-fehl speichern willst.

2. Weise einem Wort beispielsweise per Ei-genschaften-Inspector ein Schriftenbündelzu, wähle danach eine bestimmte Schrift-größe und eine Farbe usw.

3. Markiere nun im Verlaufs-Fenster alle Be-fehle, die du als �Befehls-Bündel� speichernwillst. Klicke auf die Schaltfläche AUS-GEWÄHLTE SCHRITTE ALS BEFEHL SPEICHERN.

4. Trage in das Dialogfenster Befehl speicherneinen aussagekräftigen Namen für deinenBefehl ein. Klicke auf [OK].

Befehlsfunktion nutzenDu kannst deinen Befehl jetzt jederzeit wiederverwerten.Du möchtest erneut eine Passage mit Arial for-matieren, um eine Stufe vergrößern und rot ein-färben?

1. Markiere die betreffenden Passage.

2. Wähle aus dem Menü BEFEHLE deinenerstellen Befehl aus. Du findest ihn in derRegel ganz unten.

Nach der Auswahl des Befehls werden alle Ak-tionen nacheinander ausgeführt.

Dokument im Browser betrachten 19

Die externe Vorschau: Dokument im Browser betrachtenZugegeben, die Layoutansicht vom Dreamwea-ver zeigt fast alles wie im Original. Die Beto-nung liegt dabei jedoch auf fast.Deshalb empfehle ich dir, dein Dokument abund zu in der Browservorschau anzuzeigen.

Dokument in Vorschau anzeigenDas Anzeigen des Dokuments in der Vorschauist ganz einfach.

1. Wähle den komplizierten Weg über dasMenü: Entscheide dich im Menü DATEI fürden Befehl VORSCHAU IM BROWSER. Suchedir den entsprechenden Browser heraus.

2. Viel schneller geht es jedoch, wenn du dirgleich die entsprechende Funktionstasteeinprägst. Drücke einfach auf [F12].

Häufig listet der Dreamweaver einen einzigenBrowser als Voreinstellung auf. Das ist der In-ternet Explorer.Obwohl ich auf meinen Rechnern auch mehrereNetscape-Versionen installiert hatte, wurde die-ser Fakt ignoriert. Eins zu Eins für GoLive, denndieses Programm findet die Browser (in der Re-gel) automatisch.

Binde die Vorschaubrowser von Hand ein!

Vorschaubrowser einbindenUnd so bindest du einen oder mehrere Vorschau-browser ein:

1. Wähle im Menü DATEI den Befehl VOR-SCHAU IM BROWSER. Entscheide dich für denEintrag BROWSER-LISTE BEARBEITEN.

2. Das Fenster Voreinstellungen erscheint. Dulandest in Kategorie Vorschau im Browser.

3. Klicke in der Browser-Liste auf die Hinzufü-gen-Schaltfläche, sie sieht aus wie einPlus-Zeichen.

4. Nun erscheint das Fenster Browser hinzu-fügen. Trage den Namen des hinzuzufü-genden Browsers in das Feld Name. Tippebeispielsweise Netscape 4.

5. Im Feld Pfad muss der Pfad zur Startdateides jeweiligen Browsers eingetragen oderüber die Schaltfläche DURCHSUCHEN her-ausgesucht werden.

Der Pfad für Internet Explorer lautet meist:C:\Programme\Internet Explorer\iexplore.exe

Der Pfad für Netscape 4.x kann lauten:C:\Programme\Netscape\Communicator\Program\netscape.exe

Und Netscape 6 liegt oft unter dem PfadC:\Programme\Netscape\Netscape 6\netscp6.exe

Falls du die Pfade nicht findest, nutze die Such-funktion und fahnde nach den Dateieniexplore.exe, netscape.exe und netscp6.exe.Vergiss nicht, die Einstellungen durch [OK] zusichern.

Zum Schluss empfehleich dir, einen zweitenBrowser zum Sekundär-Browser zu machen.Hake die entsprechende

Option ab. Der Effekt: Du kannst diesen Sekun-där-Browser nun per [STRG] + [F12] bequemaufrufen.

Übungsteil C: Schriftart, Verlauf und Quelltext20

ÜBUNGSTEIL C: Schriftart, Verlauf und QuelltextDu weißt jetzt auch, wie man:• Schriftart, -größe und farbe festlegt• in die Ansicht HTML-Quelle umschaltet• Dokumente im Quelltext bearbeitet• die Verlaufsfunktion nutzt• eigene Befehle erstellt• Dokumente in der Browservorschau anzeigt

Übung C1: Schriftart für Überschriften verändernWeise allen Überschriften das Schriftartenbündel zu, welches mit Georgia beginnt.

Übung C2: Schriftart und -größe anpassenStelle die Schriftart aller Absätze auf Arial. Weise außerdem eine Schriftgröße zu, die eine Stufe kleinerals die Normalgröße ist.

Übung C3: Schriftfarbe verändernFärbe die Hauptüberschrift (Überschrift 1) grau ein. Wähle als Schriftfarbe für die Unterüberschriften(Überschrift 2) die Farbe rot.

Übung C4: Veränderungen im Quelltext vornehmenMarkiere die Hauptüberschrift (Überschrift 1) in der Layoutansicht. Schalte jetzt in die Quelltextan-sicht um. Suche die Tags, die die Hauptüberschrift umschließen (<h1></h1>) und suche <font>. Lö-sche den hex. Farbcode (das, was nach color= zwischen den Gänsefüßchen sitzt.) Tippe zwischen dieGänsefüßchen den Farbnamen teal. Schaue im Layout, welche Farbe sich dahinter verbirgt.

Übung C5: Befehl erstellenErstelle einen Befehl, der markierten Passagen die Schriftart Courier New in der Größe -1 und derFarbe �dunkles Blau� zuweist. Probiere ihn aus.

Übung C6: Vorschau im BrowserZeige dein Dokument sowohl im Internet Explorer als auch im Netscape-Browser an. Nutze dafür dieentsprechende Funktionstaste bzw. Tastenkombination.

Übung C7: Font-Eigenschaften löschen (Zusatzübung)Du hast in deinem Dokument magister.htm zu viel experimentiert? Setze die Eigenschaften Schriftartund Größe auf die Standardwerte zurück. Tipp: Markiere dazu das gesamte Dokument (<body> imTag-Selektor). Stelle jetzt im Eigenschaften-Inspector bei beiden Posten die Standardwerte ein.(STANDARDSCHRIFT, Größe: KEINE)

Übung C8: Farbeinstellungen zurücksetzen (Zusatzübung)Normalerweise kannst du Farbeinstellungen nur einzeln zurücksetzen. Finde eineMöglichkeit, bei Markierung des gesamten Dokuments alle Farbeinstellungen auf ei-nen Schlag zurückzusetzen. Tipp: Fahnde in der Farbpalette nach einer �Radier-gummi�-Schaltfläche.

Documents

Dreamweaver für Einsteiger - download.knowware.dedownload.knowware.de/dreamweaver34.pdf · Dreamweaver Nr. 14 KnowWare PLUS Beispiele und Übungen Johann-Christian Hanke für Einsteiger