© Seite 1 © Mag. Helmut Bauer h.bauer@sbg.at Macromedia Dreamweaver MX 1

Seite 1 © www.bauerpoint.com

© Mag. Helmut Bauerwww.bauerpoint.com

h.bauer@sbg.at

Macromedia Dreamweaver MX

1

Seite 2 © www.bauerpoint.com

VorbereitungsarbeitenVorbereitungsarbeiten

Erstellen Sie im MS-Explorereinen Hauptordner „Web“ undfolgende Unterordner:

Starten Sie Dreamweaver

Seiten definieren

Version 4

Seiten definieren

Version 4

11

22

Notizen:

Seite 3 © www.bauerpoint.com

VorbereitungsarbeitenVorbereitungsarbeiten

Erstellen Sie im MS-Explorereinen Hauptordner „Web“ undfolgende Unterordner:

Starten Sie Dreamweaver

Seiten definieren

MX Version

Seiten definieren

MX Version

Notizen:

Site – Neue Site:

Name der Site

Seite 4 © www.bauerpoint.com

Seiten definieren MX

Version

Seiten definieren MX

Version

Auswahl des Hauptordners „Web“

Fertig

Seite 5 © www.bauerpoint.com

Seiten definierenSeiten definieren

Name der neuen Homepage (frei wählbar)

Wo liegt der Ordner auf der Festplatte?Klick auf das Ordnersymbol und Ordnerauswählen.

33

44

55

66

Notizen:

Seite 6 © www.bauerpoint.com

Das Site FensterDas Site Fenster

Diese Ansicht bietet einen Überblick über sämtlicheDateien und Ordner der Homepage.

Wichtig:Änderungen der Dateinamen und der Ordner bzw. Verschiebungen von Dateien und Ordnern solltennur in diesem Fenster durchgeführt werden! Es werdensämtliche Links automatisch aktualisiert.

MXVersion:

Seite 7 © www.bauerpoint.com

Aufbau der ersten SeiteAufbau der ersten Seite

Öffnen einer neuen Seite:Datei – Neues Fenster

Hilfslinien einblenden:Ansicht – Hilfslinien anzeigen

11

22

Ergebnis: 33

44 Einblenden des Eigenschaften-Inspektors (für Formatierungen)

Seite 8 © www.bauerpoint.com

Exkurs: Der Eigenschaften InspektorDer Eigenschaften Inspektor ist, eines der wichtigsten "Tools" in Dreamweaver. Mit ihm kann man Eigenschaften von z.b. Tabellen, Bildern, Ebenen usw ändern. Wenn das Fenster nicht geöffnet ist einfach Strg + F3 drücken.

Inspektor zum Formatieren: Schriftart, Größe, Schrift-, Hintergrund- und Rahmenfarbe können hier eingestellt werden.

Inspektor für Layer: Größe, Hintergrund- und Rahmenfarbe können hier eingestellt werden.

Inspektor für Links: Ziel, Zusatztext und Abstände können hier eingestellt werden.

Seite 9 © www.bauerpoint.com

Einfache TextformatierungEinfache Textformatierung

- Überflüssige Fenster schließen (Ausnahme: Eigenschafteninspektor)- Text eingeben - markieren - Formatieren (Text - Zeichen...)

Auswahl der SchriftartAchtung: Nur einfache

Schriftarten verwenden!

(Fenster – Eigenschaften)

Auswahl der SchriftgrößeStandard: Größe 3

Schriftfarbe

Fett

Kursiv

Absatzformatierunglinks-, rechtsbündig, zentriert

Seite 10 © www.bauerpoint.com

Hintergrundfarbe oder Hintergrundbild auswählenWählen Sie einen hellblauen Hintergrund.

Titel der Seite - Statuszeile

rechte MaustasteSeiteneigenschaften

Seitenformatierung – HintergrundSeitenformatierung – Hintergrund

Seite 11 © www.bauerpoint.com

Arbeiten mit TabellenArbeiten mit Tabellen

Problem:Einrückungen, beliebige Platzierung des Textes ist auf diese Art und Weisenicht möglich.

Seite 12 © www.bauerpoint.com

Tabelle einfügenTabelle einfügen

Einfügen einer Tabelle:Einfügen - Tabelle

11

22

Festlegen der Spalten- und Zeilenanzahl

33Ergebnis

Seite 13 © www.bauerpoint.com

TabelleneigenschaftenTabelleneigenschaften

33

Mit Hilfe des Tabelleneigenschaften – Inspektors können verschiedene Einstellungen vorgenommen werden: (Ctrl + F3)

Anzahl Reihen/SpaltenNachträgliche Änderung

möglich

Seitenbreite der TabelleSinnvoll: 100%

Breite zwischenden Spalten

Farbe derZellen Breite der

Linien0 = unsichtbar

Seite 14 © www.bauerpoint.com

Beispiel Zoo: Aufbau der 1. SeiteBeispiel Zoo: Aufbau der 1. Seite

Ziel ist eine Einsteigerseite mit einem Begrüssungstext, einer Graphik und verschiedenenLinks zu den Tieren. Sie soll am Ende nachfolgendes Aussehen haben:

Hinweise:Graphik: buttrfly.jpgGraufarbe: #CCCCCC

Seite 15 © www.bauerpoint.com

Aufbau der 1. SeiteAufbau der 1. Seite

Es wird eine Tabelle mit 3 Spalten und 6 Zeilen eingefügt, anschließend werden die Zellen der ersten Zeile verschmolzen.

Schritte: 3 Zellen per Maus markieren

-

11

22

Rechte Maustaste – Tabelle – Zellen verbinden

Nun werden auch die mittleren 4 Zellen verschmolzen – Ergebnis:

Seite 16 © www.bauerpoint.com

Aufbau der 1. SeiteAufbau der 1. Seite

Einfügen der ersten Graphik Schritte – Cursor wird an die entsprechende Stelle gesetzt:

22

11

Einfügen - Bild

Bild auswählen – Öffnen (Select)

Seite 17 © www.bauerpoint.com

Aufbau der 1. SeiteAufbau der 1. Seite

Rahmen ausblenden – Rahmenbreite = 0:

Äußeren Rahmen mit einem Klick markieren

22

11

Rahmen auf „0“ stellen:

Seite 18 © www.bauerpoint.com

Aufbau der 1. SeiteAufbau der 1. Seite

Zellen mit Farbe füllen:

Gewünschte Zellen markieren (mehrere markieren mit Strg. + Einzelklick)

22

11

Hintergrundfarbe „Grau“ einstellen (#CCCCCC):

Seite 19 © www.bauerpoint.com

Formatieren der 1. SeiteFormatieren der 1. Seite

Texte eingeben und formatieren:

Schriftart: ArialSchriftgröße allgemeiner Text: 3Schriftfarbe: schwarzÜberschrift: fett, Schriftgröße 5

Regelmäßige Vorschau mit

F12

Seite 20 © www.bauerpoint.com

Speichern der 1. Seite immer unter dem Namen: index

Zusatz „htm“ wird automatisch zugewiesen!

Dateispeichern

Speichern der 1. SeiteSpeichern der 1. Seite

Wichtige Regeln für Dateinamen im Web:

- keine Leerzeichen- generelle Kleinschreibung- keine Umlaute

Seite 21 © www.bauerpoint.com

Aufbau der 2. SeiteAufbau der 2. Seite

Erläuterung:Tabelle: 2 Zeilen, 3 Spalten, Rahmengröße: 1Bilder: kaefer.jpg & bug288.jpgText stammt aus der Textdatei im Ordner Sonstiges – text_insekten.docEinfügen des Textes: Text im Word Document markieren – Bearbeiten kopieren – in DreamweaverBearbeiten – Einfügen.

Titel der Seite: Insekten

Speichern im Ordner Pages unter dem Namen „insekten“

Seite 22 © www.bauerpoint.com

Aufbau der 3. SeiteAufbau der 3. SeiteTitel der Seite: Fische

Speichern im Ordner Pages unter dem Namen „insekten“

Erläuterung:Tabelle: 3 Zeilen, 2 Spalte, Rahmengröße: 1Bilder: fisch.jpg & fisch1.jpgText stammt aus der Textdatei im Ordner Sonstiges – text_fische.doc

Spe

iche

rn im

Ord

ner

Pag

es u

nter

dem

Nam

en „

inse

kten

“

Seite 23 © www.bauerpoint.com

Aufbau der 4. SeiteAufbau der 4. SeiteTitel der Seite: Geflügel

Erläuterung:Tabelle: 3 Zeilen, 1 Spalte, Rahmengröße: 0Bilder: duck2a.jpg Text stammt aus der Textdatei im Ordner Sonstiges – text_gefluegel.doc

Spe

iche

rn im

Ord

ner

Pag

es u

nter

dem

Nam

en „

geflu

egel

“

Seite 24 © www.bauerpoint.com

Aufbau der 5. SeiteAufbau der 5. SeiteTitel der Seite: Geflügel

Spe

iche

rn im

Ord

ner

Pag

es u

nter

dem

Nam

en „

haus

tiere

“

Erläuterung:Tabelle: 7 Zeilen, 1 Spalte, Rahmengröße: 1Bilder: cat.jpg & dog.jpgText stammt aus der Textdatei im Ordner Sonstiges – text_haustiere.doc

Seite 25 © www.bauerpoint.com

Link zu den einzelnen SeitenLink zu den einzelnen Seiten

11 Wort (oder Bild) markieren

22 Zieldatei suchen

33 Zieldatei auswählen

44 Fertig: Link zu „Insekten“

F12Testen der Links mit

Seite 26 © www.bauerpoint.com

Link zu den einzelnen SeitenLink zu den einzelnen Seiten

Links zu den übrigen Seiten festlegen

Ergebnis: (Links sind unterstrichen)

Testen der Links mit

F12

Seite 27 © www.bauerpoint.com

Link auf eine andere HomepageLink auf eine andere Homepage

11 Wort (oder Bild) markieren

22 Eingabe der gesamten Adresse (inkl. http://)

Seite wird in einem eigenen Explorerfenster geöffnet!(Empfehlenswert bei externen Links)

Seite 28 © www.bauerpoint.com

Link auf eine andere HomepageLink auf eine andere Homepage

Auf den einzelnen Unterseiten sollte jeweils ein Retourlink zur Hauptseite festgelegt werden

Ziel: index.htm

Seite 29 © www.bauerpoint.com

Link aus einem Bild festlegenLink aus einem Bild festlegen

11 Bild markieren

22 Hotspot auf das Bild setzen und Link festlegen

Zusatztext – erscheintbei Kontakt mit der Maus

Seite 30 © www.bauerpoint.com

E-Mail Adresse festlegenE-Mail Adresse festlegen

Objekt oder Text markieren und Eingabe: mailto:adresse@irgendwo.at

Hyperlink: „mailto:adresse@irgendwo.at - Test über F12 – Outlook Expresswird dadurch automatisch geöffnet.

11

2 Möglichkeiten:

Objekt oder Text markieren und „Einfügen – E-Mail“:22

oder:

Seite 31 © www.bauerpoint.com

Site Map – für den ÜberblickSite Map – für den Überblick

Änderungen nur in der Site Map durchführenLinks werden automatisch aktualisiert!

F8Aufruf:

Seite 32 © www.bauerpoint.com

Bild oder Text einfügen

Achtung: Format „.jpg“ verwenden

EinfügenBild

LayertechnikLayertechnik

11

22

Größe festlegen

Position festlegen

Seite 33 © www.bauerpoint.com

Von der Tabelle zum LayerVon der Tabelle zum Layer

Text wird damit völligfrei beweglich!

EinfügenTabelle

ÄndernLayout ModusTabellen in Ebenen konvertieren

Übersetzung:

Seite 34 © www.bauerpoint.com

Quickfinder - FeldlisteQuickfinder - Feldliste

Einfügen – Formularobjekt – Jump Menü

11

Festlegen der Links

22

Ergebnis:33

Seite 35 © www.bauerpoint.com

Gästebuch und CounterGästebuch und Counter

Auf diesen Seiten werden gratis Gästebücher bzw. Zähler angeboten. Eine einmaligeAnmeldung ist notwendig. Der Einbau in die Homepage erfolgt über Links.

Für Interessierte:Kostenlosen Webspace gibt es bei folgenden Adressen:www.8ung.atwww.heim.atwww.kostenlos.de

Seite 36 © www.bauerpoint.com

Ordner für die Quelle der Fotos und das Ziel(Hauptordner) angeben

Zielordner auf Server übertragen: thumbnails, pages, images

Fotoalbum einfügenFotoalbum einfügen

Doppelklick zur Vergrößerung

Ergebnis:

Seite 37 © www.bauerpoint.com

File Transfer per FTPFile Transfer per FTP

Eingabe:FTP Host – ServerHost Direcotory – Ort am Server – (kann meist ignoriert werden)

Login NamePasswort

Zuvor Anmeldung bei einemGratisserver. z.B. www.8ung.at

Seite 38 © www.bauerpoint.com

File Transfer per FTPFile Transfer per FTPDreamweaver

MX

12

Zuvor Anmeldung bei einemGratisserver. z.B. www.8ung.at

Folgende Daten müssen vorhanden sein:

FTP Hostname

Anmeldename

Kennwort

Daten werden nach Anmeldung bei einem Server per E-Mail übermittelt.

Seite 39 © www.bauerpoint.com

Zusatzinfos über...

• Sonderzeichen

• Fertige Buttons

• Anker setzen

• Bibliothek

• Frames

• Vorlagen

• CSS