12.06.20151 Dreamweaver MX Rechenzentrum Universität Hohenheim Hani Sahyoun.

Präsentation zum Thema: "12.06.20151 Dreamweaver MX Rechenzentrum Universität Hohenheim Hani Sahyoun."—  Präsentation transkript:

1 12.06.20151 Dreamweaver MX Rechenzentrum Universität Hohenheim Hani Sahyoun

2 12.06.2015Arbeiten mit Dreamweaver2 Kursübungen Erstellung einer eigenen Homepage mit Dreamweaver. Tabellen und Formulare Klicksensitive Grafiken

3 12.06.2015Arbeiten mit Dreamweaver3 Schulungsunterlagen Die Schulungsunterlagen, PowerPoint Folien und Übungen, können Sie von folgender URL downloaden: http://www.rz.uni-hohenheim.de/www/lernhilfen/html-workshop/grundkurs.html

4 12.06.2015Arbeiten mit Dreamweaver4 Dreamweaver Funktionsbeschreibung Macromedia Dreamweaver MX ist ein Tool zum Erstellen und Verwalten von Websites.

5 12.06.2015Arbeiten mit Dreamweaver5 Online Hilfe in Dreamweaver Wählen Sie einen der folgenden Befehle Hilfe > Lehrgänge oder Hilfe > Dreamweaver verwenden

6 12.06.2015Arbeiten mit Dreamweaver6 Dreamweaver Oberfläche Titelleiste Menüleiste Einfügen Bedienfeld Arbeitsbereich Site Fenster Statusleiste Eigenschaften- inspektor

7 12.06.2015Arbeiten mit Dreamweaver7 Elemente im Dreamweaver Bildschirm Titelleiste Menüleiste Symbolleiste Einfügen mit Registerkarten Symbolleiste Dokument Symbolleiste Standard Symbolleiste Dokument

8 12.06.2015Arbeiten mit Dreamweaver8 Symbolleiste Dokument Dokumenttitel Entwurfsansicht Code- Ansicht Code- und Entwurfansicht

9 12.06.2015Arbeiten mit Dreamweaver9 Symbolleiste Dokument Vorschau im Browser Ansichtsoptionen für Code- und Entwurfsansicht

10 12.06.2015Arbeiten mit Dreamweaver10 Elemente im Dreamweaver Bildschirm Dokumentfenster: Hier ist das gerade bearbeitete Dokument sichtbar. Zum Einblenden eines Lineals wählen Sie den Befehl Ansicht > Lineale und aktivieren Sie die Option Zeigen Zum Einblenden des Rasters wählen Sie den Befehl Ansicht > Raster und aktivieren Sie die Option Raster Anzeigen

11 12.06.2015Arbeiten mit Dreamweaver11 Elemente im Dreamweaver Bildschirm

12 12.06.2015Arbeiten mit Dreamweaver12 Die Statusleiste Die Statusleiste befindet sich am unteren Ende des Dokumentfensters Sie beinhaltet folgende Elemente v. l. n. r. Tag-Selektor: Zeigt den HTML-Befehl zum ausgewählten Element Popup Menü zur Auswahl der Fenstergröße Launcher-Leiste

13 12.06.2015Arbeiten mit Dreamweaver13 Die Launcher-Leiste Die Launcher-Leiste wird in der Statusleiste angezeigt und enthält Schaltflächen zum Öffnen und Schließen verschiedener Bedienfelder und Fenster. Die Launcher-Leiste wird mit dem Befehl Bearbeiten > Voreinstellungen > Fenster eingeblendet (s. nächste Folie).

14 12.06.2015Arbeiten mit Dreamweaver14 Launcher-Leiste einblenden Wählen Sie den Befehl Bearbeiten > Voreinstellungen > Fenster Aktivieren Sie die Option "Symbole in den Bedienfeldern und im Launcher anzeigen"

15 12.06.2015Arbeiten mit Dreamweaver15 Der Eigenschaften-Inspektor Der Eigenschaften-Inspektor (Eigenschaftenfenster): Dient zur Anzeige und Änderung der Eigenschaften eines markierten Elementes im Dokumentfenster.

16 12.06.2015Arbeiten mit Dreamweaver16 Elemente im Dreamweaver Bildschirm Die Bedienfeldgruppen Bedienfelder werden in Gruppen zusammengefasst Folgende Bedienfeldgruppen sind u.a. vorhanden: Design Code Dateien Antworten Verlauf

17 12.06.2015Arbeiten mit Dreamweaver17 Elemente im Dreamweaver Bildschirm Die Bedienfeldgruppen Design ermöglicht die Zuweisung von HTML und CSS Stilelementen für markierte Objekte im Dokumentfenster

18 12.06.2015Arbeiten mit Dreamweaver18 Elemente im Dreamweaver Bildschirm Code mit den 3 Registerkarten Tag-Inspektor: zeigt Dokumentstruktur Codefragmente: Ermöglicht hinzufügen von Code Referenz: Referenz zu ausgewählten HTML, CSS und JavaScript Befehlen.

19 12.06.2015Arbeiten mit Dreamweaver19 Elemente im Dreamweaver Bildschirm Arbeiten im Referenz-Bedienfeld: Buch auswählen HTML Befehl und Attribut auswählen im Beispiel: Befehl und Attribut "action"

20 12.06.2015Arbeiten mit Dreamweaver20 Elemente im Dreamweaver Bildschirm Anmerkungen: Über den Befehl "Fenster" steuern Sie, welche Fenster gezeigt und welche ausgeblendet werden. Über den Befehl "Ansicht" können Sie u.a. Lineal und Raster ein- uns ausblenden

21 12.06.2015Arbeiten mit Dreamweaver21 Voreinstellungen in Dreamweaver Befehl Berabeiten > Voreinstellungen, Kategorie Allgemein: Aktivieren Sie die Option "Mehrere aufeinander folgende Leerzeichen zulassen"

22 12.06.2015Arbeiten mit Dreamweaver22 Voreinstellungen in Dreamweaver Befehl Berabeiten > Voreinstellungen, Kategorie Codeformat: Wählen Sie bei "Zeilenumbruch Typ" die Option: LF (UNIX)

23 12.06.2015Arbeiten mit Dreamweaver23 Voreinstellungen in Dreamweaver Befehl Berabeiten > Voreinstellungen, Kategorie Dateitypen/Editoren: Tragen Sie bei "Externer Codeeditor" den Pfad für den externen HTML-Editor ein – Voreinstellung ist HomeSite

24 12.06.2015Arbeiten mit Dreamweaver24 Seitenvorschau im Browser Wählen Sie bei den Voreinstellungen die Kategorie "Vorschau im Browser " Füllen Sie das Feld "Name" aus und den Pfad für das entsprechende Programm in das Feld "Anwendung"

25 12.06.2015Arbeiten mit Dreamweaver25 Seitenvorschau im Browser wählen Sie den befehl Datei > Vorschau im Browser Um die Seitenvorschau zu aktivieren. Hinweis: Sie können auch mehrere Brow- ser in der Browserliste definieren.

26 12.06.2015Arbeiten mit Dreamweaver26 Nützliche Tastenkombinationen Ähnlich wie bei MS Word KopierenStrg + C AusschneidenStrg + X EinfügenStrg + V LöschenEntf Neuer AbsatzEnter ZeilenumbruchShift + Enter RückgängigStrg + Z WiederherstellenStrg + Y

27 12.06.2015Arbeiten mit Dreamweaver27 Empfohlene Literatur Dreamweaver MX, Grundlagen des technischen Web-Designs aus der Serie "Handbücher des RRZN " 175 Seiten, beim AStA für 5,80 € erhältlich Dreamweaver MXHandbücher des RRZN