Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

1 Macromedia Dreamweaver MX © Mag. Helmut Bauer

Ähnliche Präsentationen


Präsentation zum Thema: "1 Macromedia Dreamweaver MX © Mag. Helmut Bauer"—  Präsentation transkript:

1 1 Macromedia Dreamweaver MX © Mag. Helmut Bauer www.bauerpoint.com

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

3 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:

4 Seiten definieren MX Version
Auswahl des Hauptordners „Web“ Fertig

5 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

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:

7 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

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

9 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

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

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

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

13 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

14 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

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

16 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)

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

18 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):

19 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

20 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

21 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“

22 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

23 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

24 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

25 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

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

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

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

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

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

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

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

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

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

35 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:

36 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

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

38 File Transfer per FTP Zuvor Anmeldung bei einem
Gratisserver. z.B. Dreamweaver MX 2 1 Folgende Daten müssen vorhanden sein: FTP Hostname Anmeldename Kennwort Daten werden nach Anmeldung bei einem Server per übermittelt.

39 Zusatzinfos über... Sonderzeichen Fertige Buttons Anker setzen
Bibliothek Frames Vorlagen CSS


Herunterladen ppt "1 Macromedia Dreamweaver MX © Mag. Helmut Bauer"

Ähnliche Präsentationen


Google-Anzeigen