© Seite 1 © Mag. Helmut Bauer [email protected] Macromedia Dreamweaver MX 1

Seite 1 © www.bauerpoint.com

© Mag. Helmut Bauerwww.bauerpoint.com

[email protected]

Macromedia Dreamweaver MX

1


VorbereitungsarbeitenVorbereitungsarbeiten

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

Starten Sie Dreamweaver

Seiten definieren

Version 4

Seiten definieren

Version 4

11

22

Notizen:


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


Seiten definieren MX

Version

Seiten definieren MX

Version

Auswahl des Hauptordners „Web“

Fertig


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:


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:


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)


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.


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


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

Titel der Seite - Statuszeile

rechte MaustasteSeiteneigenschaften

Seitenformatierung – HintergrundSeitenformatierung – Hintergrund


Arbeiten mit TabellenArbeiten mit Tabellen

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


Tabelle einfügenTabelle einfügen

Einfügen einer Tabelle:Einfügen - Tabelle

11

22

Festlegen der Spalten- und Zeilenanzahl

33Ergebnis


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


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


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:



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

22

11

Einfügen - Bild

Bild auswählen – Öffnen (Select)



Rahmen ausblenden – Rahmenbreite = 0:

Äußeren Rahmen mit einem Klick markieren

22

11

Rahmen auf „0“ stellen:



Zellen mit Farbe füllen:

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

22

11

Hintergrundfarbe „Grau“ einstellen (#CCCCCC):


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


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



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“


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

“


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

“


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


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


Link zu den einzelnen SeitenLink zu den einzelnen Seiten

Links zu den übrigen Seiten festlegen

Ergebnis: (Links sind unterstrichen)

Testen der Links mit

F12


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)


Link auf eine andere HomepageLink auf eine andere Homepage

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

Ziel: index.htm


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


E-Mail Adresse festlegenE-Mail Adresse festlegen

Objekt oder Text markieren und Eingabe: mailto:[email protected]

Hyperlink: „mailto:[email protected] - Test über F12 – Outlook Expresswird dadurch automatisch geöffnet.

11

2 Möglichkeiten:

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

oder:


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

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

F8Aufruf:


Bild oder Text einfügen

Achtung: Format „.jpg“ verwenden

EinfügenBild

LayertechnikLayertechnik

11

22

Größe festlegen

Position festlegen


Von der Tabelle zum LayerVon der Tabelle zum Layer

Text wird damit völligfrei beweglich!

EinfügenTabelle

ÄndernLayout ModusTabellen in Ebenen konvertieren

Übersetzung:


Quickfinder - FeldlisteQuickfinder - Feldliste

Einfügen – Formularobjekt – Jump Menü

11

Festlegen der Links

22

Ergebnis:33


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


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:


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


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.


Zusatzinfos über...

• Sonderzeichen

• Fertige Buttons

• Anker setzen

• Bibliothek

• Frames

• Vorlagen

• CSS

Documents

© Seite 1 © Mag. Helmut Bauer [email protected] Macromedia Dreamweaver MX 1