26.04.23 1

Dreamweaver MX

RechenzentrumUniversität Hohenheim

Hani Sahyoun

26.04.23 Arbeiten mit Dreamweaver 2

Kursübungen

Erstellung einer eigenen Homepage mit Dreamweaver.

Tabellen und Formulare Klicksensitive Grafiken

26.04.23 Arbeiten mit Dreamweaver 3

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

26.04.23 Arbeiten mit Dreamweaver 4

Dreamweaver Funktionsbeschreibung

Macromedia Dreamweaver MX ist ein Tool zum Erstellen und Verwalten von Websites.

26.04.23 Arbeiten mit Dreamweaver 5

Online Hilfe in Dreamweaver

Wählen Sie einen der

folgenden Befehle Hilfe > Lehrgänge

oder Hilfe >

Dreamweaver verwenden

26.04.23 Arbeiten mit Dreamweaver 6

Dreamweaver OberflächeTitelleisteMenüleiste

Einfügen BedienfeldArbeitsbereich

Site Fenster

Statusleiste

Eigenschaften-inspektor

26.04.23 Arbeiten mit Dreamweaver 7

Elemente im Dreamweaver Bildschirm

Titelleiste Menüleiste Symbolleiste Einfügen mit

Registerkarten Symbolleiste Dokument Symbolleiste Standard

Symbolleiste Standard

Symbolleiste Dokument

26.04.23 Arbeiten mit Dreamweaver 8

Symbolleiste Dokument

Symbolleiste Dokument

Dokumenttitel

Entwurfsansicht

Code-Ansicht Code- und

Entwurfansicht

26.04.23 Arbeiten mit Dreamweaver 9

Symbolleiste Dokument

Symbolleiste Dokument

Vorschau im Browser

Ansichtsoptionen für Code- undEntwurfsansicht

26.04.23 Arbeiten mit Dreamweaver 10

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

26.04.23 Arbeiten mit Dreamweaver 11

Elemente im Dreamweaver Bildschirm

26.04.23 Arbeiten mit Dreamweaver 12

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

26.04.23 Arbeiten mit Dreamweaver 13

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

26.04.23 Arbeiten mit Dreamweaver 14

Launcher-Leiste einblenden

Wählen Sie den Befehl Bearbeiten > Voreinstellungen > Fenster

Aktivieren Sie die Option "Symbole in den Bedienfeldern und im Launcher anzeigen"

26.04.23 Arbeiten mit Dreamweaver 15

Der Eigenschaften-Inspektor

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

26.04.23 Arbeiten mit Dreamweaver 16

Elemente im Dreamweaver Bildschirm

Die Bedienfeldgruppen Bedienfelder werden in Gruppen

zusammengefasst Folgende Bedienfeldgruppen sind u.a. vorhanden:

Design Code Dateien Antworten Verlauf

26.04.23 Arbeiten mit Dreamweaver 17

Elemente im Dreamweaver Bildschirm

Die Bedienfeldgruppen Design

ermöglicht die Zuweisung von HTML und CSS Stilelementen für markierte Objekte im Dokumentfenster

26.04.23 Arbeiten mit Dreamweaver 18

Elemente im Dreamweaver Bildschirm

Codemit den 3 Registerkarten

Tag-Inspektor: zeigt Dokumentstruktur

Codefragmente: Ermöglicht hinzufügen von Code

Referenz: Referenz zu ausgewählten HTML, CSS und JavaScript Befehlen.

26.04.23 Arbeiten mit Dreamweaver 19

Elemente im Dreamweaver Bildschirm

Arbeiten im Referenz-Bedienfeld: Buch auswählen HTML Befehl und

Attribut auswählenim Beispiel: Befehl <FORM> und Attribut "action"

26.04.23 Arbeiten mit Dreamweaver 20

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

26.04.23 Arbeiten mit Dreamweaver 21

Voreinstellungen in Dreamweaver Befehl

Berabeiten > Voreinstellungen, Kategorie Allgemein: Aktivieren Sie die Option "Mehrere aufeinander folgende Leerzeichen zulassen"

26.04.23 Arbeiten mit Dreamweaver 22

Voreinstellungen in Dreamweaver Befehl

Berabeiten > Voreinstellungen, Kategorie Codeformat: Wählen Sie bei "Zeilenumbruch Typ" die Option:LF (UNIX)

26.04.23 Arbeiten mit Dreamweaver 23

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

26.04.23 Arbeiten mit Dreamweaver 24

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"

26.04.23 Arbeiten mit Dreamweaver 25

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.04.23 Arbeiten mit Dreamweaver 26

Nützliche Tastenkombinationen

Ähnlich wie bei MS Word Kopieren Strg + C

Ausschneiden Strg + XEinfügen Strg + VLöschen Entf

Neuer Absatz EnterZeilenumbruch Shift + Enter

Rückgängig Strg + ZWiederherstellen Strg + Y

26.04.23 Arbeiten mit Dreamweaver 27

Empfohlene Literatur Dreamweaver MX, Grundlagen des

technischen Web-Designsaus der Serie "Handbücher des RRZN "175 Seiten, beim AStA für 5,80 € erhältlich