für Einsteiger - KnowWareDreamweaver MX für Einsteiger Anleitungen und Workshops Johann-Christian...

Dreamweaver MX

für Einsteiger

Anleitungen und Workshops

www.KnowWare.de Johann-Christian Hanke

Dre

am

we

av

er

MX

Deutschland: 4,- EUR Österreich: 4,60 EURSchweiz: 8 SFR Luxemburg: 4,70 EUR Italien: 5,50 EUR

27 KnowWare PLUS

Deutschland4,-

4 *qlrujs#b-v--b* ÊÒË×

Acrobat Reader - Bestellung - Autoren gesucht

Acrobat Reader: Wie ...F5/F6 öffnet/schließt die Ansicht LesezeichenStrg+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ückAlt+ 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: Dreamweaver MX für Einsteiger - 15-02-04 - 19:39

3

InhaltsverzeichnisDie eigene Homepage mit Dreamweaver 5

Träume werden wahr 5Übungen und Kurzreferenz! 5Über den Autor 5Service-Seite zum Heft 5

Dreamweaver starten: Der erste Kontakt 6Dreamweaver starten 6Viel praktischer: Verknüpfung 6Starten per Ausführen-Dialog 6

Wichtige Werkzeuge und Grundeinstellungen 7Optimale Bildschirmauflösung 7Einfügen und Eigenschaften 7Bedienfeldgruppen einblenden 7Bedienfeldgruppen am Rand 7Alle Gruppen ein- und ausblenden 7

Die Oberfläche von Dreamweaver im Blick 8Neues Layout und integrierter Dateimanager 9

Altes oder neues Layout? 9Hintergründe zum neuen Layout 9Der integrierte Dateimanager 9

Bedienfeldgruppen verschieben und anordnen 10BFG verschieben 10BFG gruppieren 10Klappmechanik der BFG 10BFG schließen 10

ÜBUNGSTEIL A: Grundbedienung vonDreamweaver 11Alles HTML oder was? Die erste Seite inDreamweaver! 12Text erfassen, formatieren und gestalten 13

Überschriften und Absätze 13Linien einfügen 13Speichern nicht vergessen! 14Attribute: Absatz ausrichten 14Zeichenformate 14

Einfache und erweiterte Listen gestalten 15Ungeordnete Liste erstellen 15Attribute für Listen 15

Kopfbereich des Dokuments: Dokumenttitel undZeichensatz 16

Titel festlegen 16Kopfbereich anzeigen 16Meta-Tag für Zeichensatz 16

ÜBUNGSTEIL B: Text eingeben und bearbeiten 17Das FONT-Tag: Schriftart, Schriftgröße und-farbe 18

Schriftart verändern 18Schriftenbündel 18Das gesamte Dokument markieren 19Schriftgröße einstellen 19Schriftfarbe einstellen 19

Quelltextansicht und Verlaufsfunktion 20HTML-Quelltext sichtbar machen 20Die geteilte Ansicht 20Wo bleibt der alte Code-Inspector? 20Verlaufsfunktion 21

Die externe Vorschau: Dokument im Browserbetrachten 22

Dokument in Vorschau anzeigen 22Vorschaubrowser einbinden 22

ÜBUNGSTEIL C: Schriftart, Verlauf und Quelltext 23

Wichtige Grundeinstellungen von Dreamweaver 24Der Dialog Einstellungen 24Rechtschreibung 24Verlaufsschritte 24Dateiendung anpassen 24Standardkodierung (Zeichensatz) 25XHTML-kompatible Seiten schreiben 25Externen HTML-Editor einbinden 26Externen Editor starten 26Groß- oder Kleinschreibung? 26HTML-Tags umschreiben 26Ambitionierter Code-Editor 27Optionen der Statusleiste 28Verbindungsgeschwindigkeit 28Unsichtbare Elemente anzeigen 28

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

Links oder rechts? Grafik wunschgemäßausrichten 32

Ausrichtung durch den Absatz 32Ausrichtung mit Textfluss 32

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

ÜBUNGSTEIL D: Grundeinstellungen, Grafik,Hintergrund 34Hyperlinks: Interne und externe Verweise 35

Verweise auf benachbarte Dateien 35Hyperlinks einbauen 35Home: Links zur Startseite 36Externe Hyperlinks einbauen 37Seite in neuem Fenster öffnen 37Bitte Feedback: Der E-Mail-Link 38Die Probleme des E-Mail-Links 38

Die Dreamweaver-Kurzreferenz 39Dreamweaver starten 39Alle Bedienfeldgruppen (BFG) ein- und ausblenden 39Hilfe aufrufen/Online-Lehrgänge 39BFG Einfügen und BFG Eigenschaften einblenden 39Überschriften zuweisen 39Zeichen- und Absatzformate zuweisen 39Linien einfügen 39Dokumenttitel festlegen 39In Quelltext-Ansicht umschalten 40Grafik einfügen und ausrichten 40Hintergrund gestalten 40Hyperlinks erstellen 40interne Anker und Verweise 40Image Maps erstellen 40Tabellen einfügen 40CSS in Dreamweaver nutzen 40Formulare erstellen 40Frames 41Sounds und Videos einbinden 41Hover-Grafiken 41URL-Verweisliste erzeugen 41Animation erstellen 41Site einrichten 41Site-Fenster 41Site-FTP 41

Inhaltsverzeichnis


4

Tastenkombinationen für Dreamweaver 42Besser navigieren: Interne Anker undVerweise 43

Das Prinzip interner Anker 43Interne Anker setzen 43Verweise auf interne Anker setzen 44Anker setzen mit dem „Lasso“ 44

Mehr Spaß beim Springen: Tipps und Tricks zuHyperlinks 45

Verweise auf Dateien 45Grafik als Hyperlink einbinden 45Kurzinfo auf Hyperlinks 46Farben für Hyperlinks 46

Verweissensitive Grafiken: Image Maps 47Beispiel: Landkarte 47Image Map erstellen 47

ÜBUNGSTEIL E: Arbeit mit Hyperlinks 48Grundlagen: Mit Dreamweaver Tabellenerstellen 49

Einfache Tabelle erstellen 49Kopfzeile (table head) erstellen 49Tipps zum Markieren der Tabelle 49Breite und Höhe der Tabelle 50Maßeinstellung mit der Maus 50Zellauffüllung und Zellraum 51Rahmenlinien mit Border 51Besonders dünne Rahmenlinien 51Zeilen und Spalten ergänzen 52Zellen teilen und einfärben 52

Tabellen für exaktes Layout 53Ausrichtung in den Zellen 54Ausrichtung der Webseiten 54

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

ÜBUNGSTEIL F: Arbeit mit der Tabellenfunktion 56Mit Style Sheets HTML-Tags gestalten 57

Vorhandene Tags nachbearbeiten 57Der Bereich Stile bearbeiten 58Übung: Neuen Stil für kursiv erstellen 58Externe CSS-Datei einbinden 58

Flexibel gestalten: Eigene Stilklassen erstellen 59Ungebundene Stilklassen 59Stil zuweisen 59

Mehr Feedback durch Formularfunktion 60Das Beispielformular 60Formular einfügen 60Ein Klapplistenfeld erzeugen 60Einfache Textfelder einfügen 61Radioknöpfe einfügen 61

Kontrollkästchen 62Für Kommentare: Textbereich 62Abschicken: Submit und Reset 62Daten empfangen – mit PHP! 62

ÜBUNGSTEIL G: Übungen zu CSS undFormularen 63Frames, verschiebbare Fensterteile aufWebseiten 64

Frameprojekt planen 64Beispieldokumente erstellen 64Rahmenaufteilung festlegen 65Frameset ausprobieren 65Verweise aus dem Frameset 65

ÜBUNGSTEIL H: Übungen zu Frames 66Multimedial: Videos und Sounds einbinden 67

Mediadateien als „Plug-In“ 67Mediadateien einbinden 67

JavaScript: Rollover-Grafiken und URL-Verweisliste 68

Hover-Grafiken einbinden 68Eine URL-Verweisliste erzeugen 68

Animationen erstellen: Arbeit mit dem Timeline-Editor 69Mit den Site-Funktionen von Dreamweaverarbeiten 70

Eine Site einrichten 70Site, Sitemap und Elemente 70Vorteile des Site-Fensters 71Site-Vorlagen erstellen 71

Hochladen: Dateien per FTP auf den Serverladen 72

Zugangsdaten eintragen 72Verbindung herstellen 72Dateien überspielen 72

ÜBUNGSTEIL I: Abschlussübungen zuDreamweaver 73Was ist neu in Version MX? Features fürFortgeschrittene! 74

Mitgelieferte Vorlagen 74Snippets (Code-Fragmente) 74Referenzen von O’Reilly und Wrox 75HTML und XML validieren 75

Anhang für Profis: Lokalen Testservereinbinden 76Onlineshop selbst erstellen – Mit Shopmichel! 77

Das Shopskript im Überblick 77Wo bekommst du das Skript? 77

Stichwortverzeichnis 78

Vorwort


5

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 und unser Heftbringt dich hoffentlich schnell zum Ziel.

Träume werden wahrZuerst ganz herzlichen Glückwunsch, denn derDreamweaver MX ist eine ausgezeichnete Wahl!Die neue Version ist zwar teurer, dafür auchbesser als alle Vorgänger! Obwohl Layout undBedienung im Vergleich zur Vorgängerversiontlw. erheblich geändert wurden, bin ich begeis-tert. Vieles wurde einfacher und logischer – wasnicht heißen will, dass das Programm einfach zubedienen ist. Dazu ist es viel zu komplex.In diesem Heft lernst du deshalb folgendes:• Dreamweaver optimal bedienen und

einrichten• 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 MX wendet sich vorrangig an den„ambitionierten“ Webworker 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 neueste„Homepages mit HTML und CSS“ (168) undden Bestseller „Homepages für Fortgeschrittene“(PLUS 12). Letztgenannte Ausgabe lehrt Java-Script, enthält einen großen Referenzteil zuHTML und CSS und geht auch auf XHTML undXML ein. Ebenfalls erwähnen möchte ichKnowWares PHP-Titel, z.B. „PHP und mySQL“von Petra Bilke oder mein „PHP für Einsteiger“.Alle Titel wurden inzwischen tlw. mehrfachnachgedruckt und stets aktualisiert!

Ü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 39-42, findestdu vier Seiten Kurzreferenz zu Dreamweaver.Du kannst den Papierbogen geschickt heraus-trennen. Lege ihn neben deinen Arbeitsplatz undschlage immer wieder nach!

Über den AutorIch bin 35 Jahre alt und arbeite als freier Autorfür Fachbuchverlage und Zeitschriften.

Bei KnowWare durfte ich bisher mehr als20 Titel veröffentlichen. Einen Überblick bietetwww.jchanke.de/knowware.

Weiterhin gebe ich Kurse u.a. zu HTML, PHPund Dreamweaver. Dieses Heft habe ich speziellals Kursmaterial verfasst.

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/dreamweaver

findest du einige Beispiel-Dateien zum Down-load, evtl. Ergänzungen/Korrekturen und eineFeedback-Möglichkeit.

Als Treue-Bonus bekommst du zu diesem Heftdie Software für einen echten E-Shop mit Wa-renkorb und Bestellbestätigung!

Mehr Details zu dieser Offerte findest du abSeite 76! Und nun viel Spaß mit Dreamweaver!

Johann-Christian Hanke, Berlin im Mai 2003

Dreamweaver starten: Der erste Kontakt


6

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 (ALLE) PROGRAMME.

2. Du zeigst auf den Eintrag MACROMEDIA ...und klickst letztendlich auf den Programm-eintrag MACROMEDIA DREAMWEAVER MX.

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 – falls bei dir sichtbar – inder Schnellstartleiste. So kannst du dein Lieb-lingsprogramm noch bequemer und noch schnel-ler 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 BefehlHIERHER KOPIEREN (Windows XP).

Schon besitzt du an dieser Stelle eine praktischeVerknüpfung. Starte das Programm schnell undeinfach per Doppelklick.

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.

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


7

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 mindestens eine Bildschirm-auflösung von 1024 x 768 Pixeln vorsehensolltest. Alles andere reicht nicht aus!

Sicher lässt dein System diese Auflösung zu!Klicke mit der rechten Maustaste auf einenfreien Fleck des Windows-Desktops. Wähle denBefehl EIGENSCHAFTEN. Gehe ins RegisterEinstellungen und überprüfe bzw. stelle diegewünschte Auflösung per Schieberegler ein.

Einfügen und EigenschaftenDu hast den Dreamweaver gestartet? Dann siehstdu zum einen den normalen Seitenbereich.Oben, unten und am Rand wurde eine mehr oderweniger große Vielfalt von so genannten Be-dienfeldgruppen (BFG) angeordnet.

Bedienfeldgruppen sind eine Neuerung inDreamweaver MX, sie ersetzen die alten

„Schwebefenster“!

Am wichtigsten sind die beiden Bedienfeldgrup-pen Einfügen (oben angeordnet) und Eigen-schaften (unten angeordnet).

Diese Bedienfeldgruppen lassen sich durchKlick auf ihren Namen auf- und zuklappen.Teste es: Klicke zur Probe auf EINFÜGEN.

Info für Umsteiger: Die Bedienfeldgruppe Ein-fügen entspricht der alten „Objekt-Palette“ undEigenschaften dem „Eigenschaften-Inspector“.

Bedienfeldgruppen einblendenBei dir sind diese beiden Bedienfeldgruppennicht zu sehen? Blende sie ein!

1. Wähle in der Menüleiste den OberpunktFENSTER. Das Fenster-Menü erscheint:

2. Achte darauf, dass die oberen beidenPunkte abgehakt sind:

• EINFÜGEN: [STRG] + F2• EIGENSCHAFTEN: [STRG] + F3Merke dir am besten die jeweiligen Tastentricks!

Bedienfeldgruppen am RandSchaue nun zu den Bedienfeldgruppen am Rand.Du findest sie (normalerweise) ganz rechts. Hierhat Macromedia unzählige Elemente gruppiert,die früher einzeln in Fenstern angezeigt wurden.Das alte „Site-Fenster“landete beispielsweisein der Bedienfeldgrup-pe Dateien. Dort findensich auch die „Elemen-te“ wieder.Die anderen Bedien-feldgruppen interes-sieren uns derzeit nicht.Einige schauen wir uns erst später genauer an!

Alle Gruppen ein- und ausblendenBesonders praktisch am Dreamweaver finde ich,dass du alle Bedienfeldgruppen auf einen Schlagein- bzw. wieder ausblenden kannst. Auch hierwirst du im Menü FENSTER fündig, wähleFENSTER AUSBLENDEN.Bei ausgeblendeten Fenstern lautet der Befehlnatürlich: FENSTER EINBLENDEN.

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

Dreamweaver im Überblick


8

Die Oberfläche von Dreamweaver im BlickSchauen wir uns den Dreamweaver nun in der Komplettübersicht an. Ich habe die wichtigstenBedienfeldgruppen (BFG) und außerdem die Lineale (ANSICHT/LINEALE/ZEIGEN) eingeblendet. DieGrafik gibt Hinweise auch zu Funktionen, die ich bisher nicht erwähnt hatte.

Hier die wichtigsten Elemente in der Übersicht:• Die Titelleiste enthält den Dateinamen und den Dokumenttitel.• Zusätzlich zur Menüleiste gibt es eine Symbolleiste. Hier kannst du z.B. zwischen der voreinge-

stellten „Entwurfsansicht“, der „Codeansicht“ oder einer „geteilten Ansicht“ umschalten:

• Mit der Bedienfeldgruppe (BFG) Einfügen kannst du Elemente wie beispielsweise Grafiken oderTabellen einfügen. Die BFG enthält mehrere Register. Voreingestellt ist das Register Allgemein.

• Am wichtigsten ist die BFG Eigenschaften am unteren Rand. Bequem lassen sich die eingestelltenEigenschaften markierter Objekte prüfen und verändern.

• Rechts sind in einer Art „Randstreifen“ etliche Bedienfeldgruppen angeordnet. Am nützlichsten istdie BFG Dateien, blende hier das Register Site (Funktionstaste [F8]) ein!

• 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

BFG Einfügen

Randstreifen wegklappen

Größe und Ladezeit

Symbolleiste

Vergrößern/Verkleinern

BFG Eigenschaften

Wechseln zwischen mehreren Dateien

Tag-Selektor

Menüleiste

hier klicken, um BFG ein- und auszublenden BFG Dateien mit Register Site

Neues Layout und integrierter Dateimanager


9

Neues Layout und integrierter DateimanagerAn dieser Stelle halte ich ein paar Tipps undinteressante Hintergrundinformationen zurBedienung für dich bereit.

Altes oder neues Layout?Viele Dreamweaver-Freunde wundern sich zuRecht über das neue Layout des Programms.Denn bisher kam man mit den Schwebefensternund Paletten ziemlich gut zurecht.Beim allerersten Start fragt Dreamweaver des-halb auch, ob man weiterhin das von Dream-weaver 4 bekannte alte oder das neue Layouteinstellen möchte. Das ist eine Art Zugeständnisan treue „Updater“.

Du kannst das Layout auch nachträglich um-stellen. Wähle BEARBEITEN/VOREINSTELLUN-GEN. Achte darauf, dass links die KategorieALLGEMEIN markiert ist. Klicke dann auf dieSchaltfläche [ARBEITSBEREICH ÄNDERN].

Ich empfehle jedoch auf jeden Fall denneuen Dreamweaver MX-Arbeitsbereich!

Durch die neuen übersichtlichen Bedienfeld-gruppen wird die Bedienung durchaus erleich-tert. Im Heft bleiben wir beim neuen Layout!Was bedeutet eigentlich die Option HomeSite/Coder-Stil? Diese würde lediglich bewirken,dass der Randstreifen mit den unzähligenBedienfeldgruppen von rechts nach linksmarschiert. So, wie es im Quelltext-EditorHomesite der Fall ist. Per Voreinstellung wirdauf diese Option verzichtet und auch wirverzichten in diesem Kurs auf diese Option.

Hintergründe zum neuen LayoutWarum eigentlich solche tiefgreifenden Verän-derungen beim Layout? War das nötig?Das hat, so vermute ich, etwas mit einemRechtsstreit zwischen Adobe und Macromediazu tun. Auf Betreiben der KonkurrenzfirmaAdobe (Hersteller von GoLive) war MacromediaAnfang Mai 2002 zu einem Schadensersatz von2,8 Millionen Dollar verurteilt worden.Die Firma Macromedia hätte unrechtmäßig dieAdobe-Technologien für verschachtelte Palettenbenutzt, so hieß es. Zwar blieb Macromediaweiterhin auf dem Standpunkt, dass diesePaletten nicht durch Patente zu schützen seien.Trotzdem musste Macromedia offenbar handelnund stellte kurzerhand das Layout um. Du fin-dest diese neuen Bedienfeldgruppen deshalbübrigens auch in anderen Macromedia-Produk-ten wie Flash oder Fireworks vor.

Man hat aus der Not eine Tugend gemacht, denndas neue Bedienkonzept ist durchaus gelungen!

Der integrierte DateimanagerEs gibt eine weitere Neuerung, die mich richtigbegeistert hat! Mit dem neuen integrierten Datei-manager aus der SITE-Ansicht kannst du deineDokumente noch einfacher öffnen und bear-beiten. Das gelingt – und das ist die Neuerung –auch wenn du noch keine so genannte Site ein-gerichtet hast.Die Site-Ansicht findestdu in der Bedienfeld-gruppe DATEIEN, undzwar im Register Site.

Zum Einblenden der Site-Ansicht kannst duauch die Funktionstaste [F8] benutzen.

Doppelklicke hier auf den Eintrag DESKTOP.Jetzt siehst du auch das Laufwerk für die Fest-platte. Wie vom Windows-Explorer (Finder)gewohnt, kannst du nun deine Dateien undOrdner öffnen, umbenennen oder sogar löschen.Auf der Vorseite bilde ich diesen integriertenDateimanager im rechten Bereich gleich mit ab!

Bedienfeldgruppen verschieben und anordnen


10

Bedienfeldgruppen verschieben und anordnenSo praktisch diese neuen Bedienfeldgruppenauch sind – bei diesen vielen „Symbol-Riegeln“kann man sehr schnell den Überblick verlieren.Deshalb verrate ich dir an dieser Stelle ein paarTipps und Tricks zum sinnvollen Umgang mitdiesen Bedienfeldgruppen.

Im Heft kürze ich das WortBedienfeldgruppe(n) stets mit BFG ab.

Wer den Kinderbuchautor Roald Dahl in Origi-nalsprache gelesen hat, kennt sicher den Titel„The BFG“ – the Big Friendly Giant. UnsereBFG sind auch ein Art „freundlicher Riese“ – siebesitzen ein „riesiges Potenzial“ und sind rechtbedienfreundlich.

BFG verschiebenZum einen lassen sich diese BFG ganz wunder-bar verschieben – egal wo sie gerade stecken.

Klicke auf die gepunktete Stelle in der linkenEcke, halte die linke Maustaste gedrückt.Ziehe die BFG an die gewünschte Position. Duhast nun eine frei schwebende BFG, die du dirdorthin ziehen kannst, wo du sie brauchst. Es isteine Art „schwebende Symbolleiste“.

Dreamweaver merkt sich die neue Position derBFG und zeigt diese stets an der von dir gewähl-ten Stelle an.

BFG gruppierenWusstest du, dass du diese BFG auch gruppierenkannst? Backe zwei oder mehr BFG zu einem„Monster“ zusammen. Ziehe die eine BFG mitviel Gefühl in die andere hinein.

Die BFG am rechten Rand sind übrigens alle aufdiese Art „zusammengebacken“.

Auch die BFG am rechten Rand kannst dunatürlich wieder „vereinzeln“. Ziehe dir – fallsmöglich – die wichtigsten BFG in den Arbeits-bereich und schließe die anderen.

Klappmechanik der BFGAußerdem besitzen die BFG eine Art „Klapp-mechanik“. Klicke auf den kleinen Pfeil vor demNamen der BFG. Sie klappt sich ein, ohne ganzzu verschwinden.

BFG schließenDu hast die Nase voll von einer BFG? Sie nimmtdir Platz weg auf dem Bildschirm? Weg damit!Klicke mit der rechten Maustaste auf die punk-tierte Stelle der BFG.

Das Kontextmenü erscheint. Wähle hier den Be-fehl Bedienfeldgruppe schließen.

Du kannst die jeweilige Bedienfeldgruppe nunnur noch über den entsprechenden Befehl imMenü FENSTER hervorholen. Oder natürlich mitder entsprechenden Tastenkombination.

ÜBUNGSTEIL A: Grundbedienung von Dreamweaver


11

ÜBUNGSTEIL A: Grundbedienung von DreamweaverDu weißt inzwischen, wie man:• Dreamweaver startet• Bedienfeldgruppen ein- und ausblendet• Einfügen-Bedienfeldgruppe und Eigenschaften-Bedienfeldgruppe anzeigt• Die Site-Ansicht einblendet

Ü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 Bedienfeldgruppen ein- und ausblendenBlende alle BFG ein bzw. aus. Und zwar auf einen Schlag! Wie geht das? Verwende dafür die entspre-chende Funktionstaste.

Übung A3: integrierten Dateimanager ein- und ausblendenBlende nur die BFG Einfügen und Eigenschaften aus und ein. Welche Tastenkombinationen nimmst dudafür? Informiere dich in der Übersicht der Tastenkombinationen weiter hinten im Heft.

Übung A4: BFG Dateien mit dem Register Site einblendenBlende nun den integrierten Dateimanager ein. Dieser verbirgt sich in der BFG Dateien, und zwar imRegister Site. Welche Funktionstaste kannst du dafür verwenden?

Übung A5: Richtige Bildschirmauflösung einstellenIn der rechten unteren Ecke des Dokumentfensters gibt es das Listenfeld für die Bildschirmauflösung.Diese stellt das Dokumentfenster von der Größe her richtig ein. Klicke es an!

Ich 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 Seite 8.

Geht nicht? Dann musst du das Dokumentfenster erst vom Hauptfenster „loslösen“. Dazu klickst du inder rechten oberen Ecke des Hauptfensters auf die untere Schaltfläche Wiederherstellen ( ).

Übung A6: 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?

Übung A7: BFG Eigenschaften „abdocken“ und verschiebenProbiere, ob du es schaffst, die BFG Eigenschaften am unteren Randmit der „Klick-und-Zieh-Technik“ an eine andere Stelle zu verschie-ben. Klicke auf den speziellen geriffelten Bereich in der linkenoberen Ecke. Ziehe die BFG bei gedrückter linker Maustaste an diegewünschte Position. Versuche nun, die BFG so wieder zurückzu-ziehen, dass sie an der Ursprungsstelle einrastet! Es ist ganz schönkniffelig!

Die erste Seite in Dreamweaver


12

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. Der Dreamweaver hält sichan den HTML-Standard und berücksichtigt die neuesten Empfehlungen.

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 <em></em>

Linie <hr>

Absatz <p></p>



Text erfassen, formatieren und gestalten


13

Text erfassen, formatieren und gestaltenJetzt zeige ich dir, wie du Text erfasst und dasDokument gestaltest. Dabei benötigst du vor al-lem die BFG Eigenschaften. Also die am unterenRand!

Überschriften und AbsätzeSchreibe los, es ist im Prinzip so wie in deinerTextverarbeitung:

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 solch ein „break“. Tippe dafüreinfach [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 der BFGEigenschaften das entsprechende Formataus. Wähle im Beispiel ÜBERSCHRIFT 1.

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? Dreamweaver schaltet nacheiner Überschrift auf das Format ABSATZ um.Überzeuge dich in der BFG Eigenschaften!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 BFG Ein-fügen eingeblendet ist, die am oberen Rand.Drücke ggf. [STRG] + [F2]! Du musst dich imRegister Allgemein befinden, im ersten Register.

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 BFG auf die Schaltflächefür die Linie, auf HORIZONTALE LINIE.

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


14

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-Tastenkombination [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 die Endung html bevorzugst, musst duden gesamten Dateinamen mit Endung hierhineinschreiben.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. Jetzt benötigst du wieder die BFGEigenschaften am unteren Rand.

3. Je nach markiertem Element zeigt dir dieseBFG die entsprechenden Schaltflächen.Hier kannst du die gewünschten Attributezuweisen.

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 <em></em>.

Aufzählung und Nummerierung


15

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.

Ungeordnete Liste 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 in der BFG Eigenschaften 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. Dochwusstest du, dass es für Listen und Nummerie-rungen noch einige weitere Attribute gibt?Möchtest du ein quadratisches Aufzählungs-zeichen? Soll die Nummerierung mit arabischenZahlen, Großbuchstaben oder Kleinbuchstabenerfolgen? Probiere es aus!Statt der Kreise wählen wir einfach Vierecke!

1. Erweitere zuerst die BFG Ei-genschaften durch Klick aufden Pfeil in der rechten unte-ren Ecke.

2. Klicke in einen der Listeneinträge. Markierekeinesfalls die gesamte Liste, der Klick ineinen Eintrag genügt. (Trotzdem wird dieEinstellung für alle Einträge vorgenommen.)

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

4. Wähle im Feld Listeneigenschaften die ge-wünschten Eigenschaft. Oben belasse esbei AUFZÄHLUNGS-LISTE. Suche im Feld StilQUADRAT heraus (type="square").

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

Probiere auch die Eigenschaften für eine Num-merierung. Dafür wählst du im Feld Listentypden Eintrag NUMMERIERUNG aus und schaust,was im Feld Stil so angeboten wird!

Kopfbereich: Dokumenttitel und Zeichensatz


16

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.

Im Dreamweaver ist das Ändern des Titels ganzeinfach!

Titel festlegenSchaue nach oben in die Symbolleiste. Hier gibtes ein Feld zum Eintragen des Titels.

Überschreibe den Platzhalter UnbenanntesDokument einfach mit einem Titel deiner Wahl.

Der Titel wird übrigens im Kopfbereich desHTML-Dokumentes notiert, im Head. Neu-gierig, was noch alles im Kopfbereich steckt?

Kopfbereich anzeigenBlende den Kopfbereich ein. Das geht so:

1. Du wählst 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 die BFGEigenschaften ganz unten. Hier kannst duden Titel ebenfalls ablesen und ändern!

Nimm stets einen aussagekräftigen Titel, imBeispiel lautet dieser Stadtentwicklung vonLondon und Berlin und nicht Willkommen onlineoder Hallo Surfer.

Du findest den Titel jetzt neben dem Dateinamenin der Titelzeile des Dokuments bzw. vonDreamweaver 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.

Übungsteil B: Text eingeben und bearbeiten


17

Ü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. Dahinter verbirgt sich übrigens das Tag-Paar<strong></strong>.

Ü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: Du darfst nur in einen einzigenListeneintrag geklickt haben - nicht alles markieren. Die BFG muss „ausge-klappt“ sein. Denke an die Schaltfläche Listenelement und suche den Stil heraus!

Ü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 Beispiel-Linie nur noch 300 Pixel breit ist.Außerdem soll sie linksbündig stehen.

Übung B9: 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


18

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 HTML kennst, weißt duBescheid!Aber in Dreamweaver brauchst du selbstver-ständlich kein HTML zu können.

Leider kann man als Gestalter der Seite nichtwissen, welche Schriftarten der Betrachterinstalliert hat und welche nicht. Dreamweaverfügt deshalb stets ein „Schriftenbündel“ mitetlichen Alternativschriften 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 die BFG Eigenschaften amunteren Rand. Im Schriftartenfeld stehtbisher Standardschrift. Im Klartext: DerBrowser verwendet Times bzw. Times NewRoman, es ist also keine besondereSchriftart eingestellt.

3. Wähle jetzt in der Schriftartenliste das ge-wünschte Schriftenbündel. Entscheide dichz.B. 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-serif• Geneva, Arial, Helvetica, sans-serifDahinter verbirgt sich das <font>-Tag mit demAttribut face. Falls du das erste Schriftbündelwählst, weist Dreamweaver folgendes zu:<font face="Arial, Helvetica, sans-serif">...</font>.

Über den Eintrag SCHRIFTLISTE BEARBEITENkannst du die Liste anpassen!

Schriftart, -größe und -farbe einstellen


19

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-BFG die gewünschte Schriftart zu.

Die bessere Alternative sind die so genanntenStyle Sheets, die Formatvorlagen für HTML. AbSeite 57 zeige ich dir, wie du in Dreamweavermit Formatvorlagen arbeitest.

Schriftgröße einstellenDu möchtest die Schriftgröße einstellen? Auchhier hilft dir die BFG Eigenschaften wieder aufganz 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. Diese wird durchdas Attribut color gesteuert.

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

2. Klicke in der BFG Eigenschaften 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 in der Regel dieFarben der so genannten sicheren Webpalette.Klicke ggf. auf den Pfeil nach rechts und hakedie Option WEBSICHER EINRASTEN ab.

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 dieseNamen auch direkt in das Farb-Feld eintragen. (Mehr Infos zu Farben und denhexadezimalen Farbcodes findest du z.B. in mei-nen Homepage-Heften.)

für Einsteiger - KnowWareDreamweaver MX für Einsteiger Anleitungen und Workshops Johann-Christian...

Documents

Transcript of für Einsteiger - KnowWareDreamweaver MX für Einsteiger Anleitungen und Workshops Johann-Christian...