1 Macromedia Dreamweaver MX © Mag. Helmut Bauer www.bauerpoint.com h.bauer@sbg.at

Vorbereitungsarbeiten Seiten definieren Version 4 Erstellen Sie im MS-Explorer einen Hauptordner „Web“ und folgende Unterordner: 1 Starten Sie Dreamweaver 2 Notizen:

Vorbereitungsarbeiten Seiten definieren MX Version Erstellen Sie im MS-Explorer einen Hauptordner „Web“ und folgende Unterordner: Site – Neue Site: Name der Site Starten Sie Dreamweaver Notizen:

Seiten definieren MX Version Auswahl des Hauptordners „Web“ Fertig

Seiten definieren 3 4 Notizen: 5 6 Name der neuen Homepage (frei wählbar) Wo liegt der Ordner auf der Festplatte? Klick auf das Ordnersymbol und Ordner auswählen. 4 Notizen: 5 6

Das Site Fenster Diese Ansicht bietet einen Überblick über sämtliche Dateien und Ordner der Homepage. Wichtig: Änderungen der Dateinamen und der Ordner bzw. Verschiebungen von Dateien und Ordnern sollten nur in diesem Fenster durchgeführt werden! Es werden sämtliche Links automatisch aktualisiert. MX Version:

Aufbau der ersten Seite 3 Ergebnis: Öffnen einer neuen Seite: Datei – Neues Fenster 1 Hilfslinien einblenden: Ansicht – Hilfslinien anzeigen 4 Einblenden des Eigenschaften- Inspektors (für Formatierungen) 2

Exkurs: Der Eigenschaften Inspektor Der 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 Textformatierung - Überflüssige Fenster schließen (Ausnahme: Eigenschafteninspektor) - Text eingeben - markieren - Formatieren (Text - Zeichen...) (Fenster – Eigenschaften) Schriftfarbe Absatzformatierung links-, rechtsbündig, zentriert Auswahl der Schriftart Achtung: Nur einfache Schriftarten verwenden! Fett Kursiv Auswahl der Schriftgröße Standard: Größe 3

Seitenformatierung – Hintergrund Titel der Seite - Statuszeile rechte Maustaste Seiteneigenschaften Hintergrundfarbe oder Hintergrundbild auswählen Wählen Sie einen hellblauen Hintergrund.

Arbeiten mit Tabellen Problem: Einrückungen, beliebige Platzierung des Textes ist auf diese Art und Weise nicht möglich.

Tabelle einfügen Einfügen einer Tabelle: 3 Ergebnis 1 2 Einfügen - Tabelle 3 Ergebnis 1 2 Festlegen der Spalten- und Zeilenanzahl

Tabelleneigenschaften 3 Mit Hilfe des Tabelleneigenschaften – Inspektors können verschiedene Einstellungen vorgenommen werden: (Ctrl + F3) Farbe der Zellen Seitenbreite der Tabelle Sinnvoll: 100% Breite der Linien 0 = unsichtbar Anzahl Reihen/Spalten Nachträgliche Änderung möglich Breite zwischen den Spalten

Beispiel Zoo: Aufbau der 1. Seite Ziel ist eine Einsteigerseite mit einem Begrüssungstext, einer Graphik und verschiedenen Links zu den Tieren. Sie soll am Ende nachfolgendes Aussehen haben: Hinweise: Graphik: buttrfly.jpg Graufarbe: #CCCCCC

Aufbau 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 1 2 Rechte Maustaste – Tabelle – Zellen verbinden Nun werden auch die mittleren 4 Zellen verschmolzen – Ergebnis:

Aufbau der 1. Seite 1 2 Einfügen - Bild Einfügen der ersten Graphik Schritte – Cursor wird an die entsprechende Stelle gesetzt: 1 2 Einfügen - Bild Bild auswählen – Öffnen (Select)

Aufbau der 1. Seite Rahmen ausblenden – Rahmenbreite = 0: Äußeren Rahmen mit einem Klick markieren 1 2 Rahmen auf „0“ stellen:

Aufbau der 1. Seite Zellen mit Farbe füllen: 1 Gewünschte Zellen markieren (mehrere markieren mit Strg. + Einzelklick) 1 2 Hintergrundfarbe „Grau“ einstellen (#CCCCCC):

Regelmäßige Vorschau mit Formatieren der 1. Seite Texte eingeben und formatieren: Schriftart: Arial Schriftgröße allgemeiner Text: 3 Schriftfarbe: schwarz Überschrift: fett, Schriftgröße 5 Regelmäßige Vorschau mit F12

Zusatz „htm“ wird automatisch zugewiesen! Speichern der 1. Seite Speichern der 1. Seite immer unter dem Namen: index Zusatz „htm“ wird automatisch zugewiesen! Datei speichern Wichtige Regeln für Dateinamen im Web: keine Leerzeichen generelle Kleinschreibung keine Umlaute

Aufbau der 2. Seite Titel der Seite: Insekten Erläuterung: Tabelle: 2 Zeilen, 3 Spalten, Rahmengröße: 1 Bilder: kaefer.jpg & bug288.jpg Text stammt aus der Textdatei im Ordner Sonstiges – text_insekten.doc Einfügen des Textes: Text im Word Document markieren – Bearbeiten kopieren – in Dreamweaver Bearbeiten – Einfügen. Speichern im Ordner Pages unter dem Namen „insekten“

Aufbau der 3. Seite Titel der Seite: Fische Speichern im Ordner Pages unter dem Namen „insekten“ Speichern im Ordner Pages unter dem Namen „insekten“ Erläuterung: Tabelle: 3 Zeilen, 2 Spalte, Rahmengröße: 1 Bilder: fisch.jpg & fisch1.jpg Text stammt aus der Textdatei im Ordner Sonstiges – text_fische.doc

Aufbau der 4. Seite Titel der Seite: Geflügel Speichern im Ordner Pages unter dem Namen „gefluegel“ Erläuterung: Tabelle: 3 Zeilen, 1 Spalte, Rahmengröße: 0 Bilder: duck2a.jpg Text stammt aus der Textdatei im Ordner Sonstiges – text_gefluegel.doc

Aufbau der 5. Seite Titel der Seite: Geflügel Speichern im Ordner Pages unter dem Namen „haustiere“ Erläuterung: Tabelle: 7 Zeilen, 1 Spalte, Rahmengröße: 1 Bilder: cat.jpg & dog.jpg Text stammt aus der Textdatei im Ordner Sonstiges – text_haustiere.doc

F12 Link zu den einzelnen Seiten 4 Fertig: Link zu „Insekten“ 1 Wort (oder Bild) markieren 3 Zieldatei auswählen 2 Zieldatei suchen F12 Testen der Links mit

F12 Link zu den einzelnen Seiten Links zu den übrigen Seiten festlegen Ergebnis: (Links sind unterstrichen) Testen der Links mit F12

Link auf eine andere Homepage 1 Wort (oder Bild) markieren 2 Eingabe der gesamten Adresse (inkl. http://) Seite wird in einem eigenen Explorerfenster geöffnet! (Empfehlenswert bei externen Links)

Link auf eine andere Homepage Auf den einzelnen Unterseiten sollte jeweils ein Retourlink zur Hauptseite festgelegt werden Ziel: index.htm

Link aus einem Bild festlegen 1 Bild markieren Zusatztext – erscheint bei Kontakt mit der Maus 2 Hotspot auf das Bild setzen und Link festlegen

E-Mail Adresse festlegen 2 Möglichkeiten: 1 Objekt oder Text markieren und Eingabe: mailto:adresse@irgendwo.at Hyperlink: „mailto:adresse@irgendwo.at - Test über F12 – Outlook Express wird dadurch automatisch geöffnet. oder: 2 Objekt oder Text markieren und „Einfügen – E-Mail“:

F8 Site Map – für den Überblick Aufruf: F8 Änderungen nur in der Site Map durchführen Links werden automatisch aktualisiert!

Layertechnik Position festlegen 1 Größe festlegen 2 Bild oder Text einfügen Einfügen Bild Achtung: Format „.jpg“ verwenden

Von der Tabelle zum Layer Übersetzung: Einfügen Tabelle Text wird damit völlig frei beweglich! Ändern Layout Modus Tabellen in Ebenen konvertieren

Quickfinder - Feldliste 2 Festlegen der Links 3 Ergebnis: 1 Einfügen – Formularobjekt – Jump Menü

Gästebuch und Counter Auf diesen Seiten werden gratis Gästebücher bzw. Zähler angeboten. Eine einmalige Anmeldung ist notwendig. Der Einbau in die Homepage erfolgt über Links. Für Interessierte: Kostenlosen Webspace gibt es bei folgenden Adressen: www.8ung.at www.heim.at www.kostenlos.de

Fotoalbum einfügen Ordner für die Quelle der Fotos und das Ziel (Hauptordner) angeben Ergebnis: Zielordner auf Server übertragen: thumbnails, pages, images Doppelklick zur Vergrößerung

File Transfer per FTP Zuvor Anmeldung bei einem Gratisserver. z.B. www.8ung.at Eingabe: FTP Host – Server Host Direcotory – Ort am Server – (kann meist ignoriert werden) Login Name Passwort

File Transfer per FTP Zuvor Anmeldung bei einem Gratisserver. z.B. www.8ung.at Dreamweaver MX 2 1 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