Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

© Seite 1 © Mag. Helmut Bauer Macromedia Dreamweaver MX 1.

Ähnliche Präsentationen


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

1 © Seite 1 © Mag. Helmut Bauer Macromedia Dreamweaver MX 1

2 © Seite 2 Vorbereitungsarbeiten Erstellen Sie im MS-Explorer einen Hauptordner Web und folgende Unterordner: Starten Sie Dreamweaver Seiten definieren Version 4 Seiten definieren Version 41 2 Notizen:

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

4 © Seite 4 Seiten definieren MX Version Auswahl des Hauptordners Web Fertig

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

6 © Seite 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 © Seite 7 Aufbau der ersten Seite Öffnen einer neuen Seite: Datei – Neues Fenster Hilfslinien einblenden: Ansicht – Hilfslinien anzeigen 1 2 Ergebnis: 3 4 Einblenden des Eigenschaften- Inspektors (für Formatierungen)

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

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

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

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

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

14 © Seite 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 © Seite 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: 3 Zellen per Maus markieren Rechte Maustaste – Tabelle – Zellen verbinden Nun werden auch die mittleren 4 Zellen verschmolzen – Ergebnis:

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

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

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

19 © Seite 19 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 © Seite 20 Speichern der 1. Seite immer unter dem Namen: index Zusatz htm wird automatisch zugewiesen! Datei speichern Speichern der 1. Seite Wichtige Regeln für Dateinamen im Web: - keine Leerzeichen - generelle Kleinschreibung - keine Umlaute

21 © Seite 21 Aufbau der 2. Seite 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. Titel der Seite: Insekten Speichern im Ordner Pages unter dem Namen insekten

22 © Seite 22 Aufbau der 3. Seite Titel der Seite: Fische 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 Speichern im Ordner Pages unter dem Namen insekten

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

24 © Seite 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 © Seite 25 Link zu den einzelnen Seiten 1 Wort (oder Bild) markieren 2 Zieldatei suchen 3 Zieldatei auswählen 4 Fertig: Link zu Insekten F12 Testen der Links mit

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

27 © Seite 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 © Seite 28 Link auf eine andere Homepage Auf den einzelnen Unterseiten sollte jeweils ein Retourlink zur Hauptseite festgelegt werden Ziel: index.htm

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

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

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

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

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

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

35 © Seite 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 © Seite 36 Ordner für die Quelle der Fotos und das Ziel (Hauptordner) angeben Zielordner auf Server übertragen: thumbnails, pages, images Fotoalbum einfügen Doppelklick zur Vergrößerung Ergebnis:

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

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

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


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

Ähnliche Präsentationen


Google-Anzeigen