Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative

Inhaltsverzeichnis
1 Einleitung
2 Projektablauf für die Buchwebsite
3 Programmgrundlagen
4 Dreamweaver erweitern
5 Eine Site erstellen
6 Grundlegende Dokumenteinstellungen
7 Tabellen in Dreamweaver
8 Bilder im Web
9 Framesets
10 Aktionen
11 Die Zeitleiste
12 CSS in Dreamweaver
13 Ebenen
14 Hyperlinks
15 Vorlagen und Bibliotheken
16 Formulare
17 Quelltext de Luxe
18 Dreamweaver und Flash
19 Office-Daten einfügen
20 Dynamische Websites – eine Einführung
21 Einführung in PHP
22 Lokalen Webserver installieren
23 Dynamische Sites in Dreamweaver einrichten
24 MySQL-Grundlagen
25 Datenbanken mit Dreamweaver anbinden
26 PHP und Dreamweaver
27 Datenbanken abfragen
28 Daten einfügen und dynamische Formulare
29 Datensätze bearbeiten
30 Benutzer authentifizieren und Zugriffsrechte festlegen
31 Fortgeschrittene Techniken
32 Dreamweaver 8 und XML
33 Menüs für dynamische Verhalten
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Dreamweaver 8 von Richard Beer, Susann Gailus
Webseiten entwickeln mit HTML, CSS, XML, PHP und MySQL
Buch: Dreamweaver 8

Dreamweaver 8
mit CD
639 S., 39,90 Euro
Rheinwerk Design
ISBN 978-3-89842-739-5
gp 3 Programmgrundlagen
  gp 3.1 Die Programmoberfläche
    gp 3.1.1 Verschiedene Anzeigemöglichkeiten
    gp 3.1.2 Orientierung auf der Arbeitsoberfläche
    gp 3.1.3 Anpassen der Bedienfeldgruppen
    gp 3.1.4 Platz zum Arbeiten schaffen
    gp 3.1.5 Einfügeleiste anpassen
    gp 3.1.6 Das Dateifenster
    gp 3.1.7 Verschiedene Dokumentansichten
    gp 3.1.8 Die Entwurfsansicht
    gp 3.1.9 Code- und Entwurfsansicht
    gp 3.1.10 Die Codeansicht
    gp 3.1.11 Ansicht im Testserverbetrieb
  gp 3.2 Wichtige Voreinstellungen
    gp 3.2.1 Allgemeine Voreinstellungen
    gp 3.2.2 Codeformat einstellen
    gp 3.2.3 Codehinweise
    gp 3.2.4 Codeumschreibung
    gp 3.2.5 CSS-Stile
    gp 3.2.6 Dateien vergleichen
    gp 3.2.7 Dateitypen/Editoren
    gp 3.2.8 Ebenen
    gp 3.2.9 Eingabehilfen
    gp 3.2.10 Kopieren und Einfügen (Office)
    gp 3.2.11 Layoutmodus
    gp 3.2.12 Neues Dokument
    gp 3.2.13 Site
    gp 3.2.14 Statusleiste
    gp 3.2.15 Unsichtbare Elemente
    gp 3.2.16 Validator
    gp 3.2.17 Vorschau im Browser
  gp 3.3 Layouthilfen in Dreamweaver
    gp 3.3.1 Raster einstellen und anzeigen
    gp 3.3.2 Hilfslinien
    gp 3.3.3 Die Statusleiste
    gp 3.3.4 Tracing-Bilder

3 Programmgrundlagen

In diesem Kapitel werden wir Sie mit den Grundfunktionen und Einstellungen des Programms vertraut machen. Wie zeigen Ihnen auf, welchen Sinn die verschiedenen Einstellungen haben und wie Sie diese praktisch nutzen können.

Begriffserklärungen | Häufig verwenden verschiedene Programme und Autoren für identische Funktionen unterschiedliche Begriffe. Um Verwirrungen vorzubeugen, möchten wir an dieser Stelle Begriffe, die wir häufig verwenden, eindeutig definieren. Im weiteren Verlauf werden wir bei auf Dreamweaver 8 bezogenen Begriffen die von Macromedia vorgegebenen Bezeichnungen verwenden. So können Sie diese in der Hilfedatei von Dreamweaver 8 einfacher auffinden.

  • Dynamische Website
    • Bei statischen Websites sind die Inhalte fest (statisch) im HTML-Dokument verankert. Bei dynamischen Websites werden die Inhalte aus Datenquellen aller Art generiert. Es spielt dabei keine Rolle, ob dies immer beim Aufruf einer Seite (also in Echtzeit) oder nach Anweisung durch einen Administrator geschieht. Diese Datenquellen können Datenbanken, einfache Textfiles, XML-Dokumente und anderes sein.
      Nicht damit gemeint sind sich dynamisch – im Sinne von Bewegung – verändernde Websites. Diese fassen wir unter folgendem Begriff zusammen:
  • DHTML
    • DHTML ist eine Mischung aus HTML und in den allermeisten Fällen JavaScript, eventuell auch Java Applets.

Rheinwerk Computing

3.1 Die Programmoberfläche  downtop


Rheinwerk Computing

3.1.1 Verschiedene Anzeigemöglichkeiten  downtop

Dreamweaver 8 bietet Ihnen drei verschiedene Anzeigemöglichkeiten des Arbeitsbereichs. Die Designer-Ansicht (siehe Abbildung 3.2) ist die Standardeinstellung. Diese werden wir auch im Buch verwenden.

In der Coder-Ansicht (siehe Abbildung 3.3) verschiebt sich die Bedienfeldgruppe nach links und die Eigenschaftenpalette wird verkleinert. Als weitere Option können Sie ein Layout für Dual Screen (siehe Abbildung 3.4) einschalten.

Durch frei schwebende Fenster ist das Dual-Screen-Layout bestens zur Arbeit mit großen Monitoren bzw. zum Betrieb von zwei Monitoren geeignet.


Umschalten zwischen den Arbeitsbereichen
Die Anzeigemöglichkeiten bei Dreamweaver 8 können Sie schnell im Menü Fenster • Ansichtsoptionen umschalten (siehe Abbildung 3.1). Sie müssen Dreamweaver 8 nicht mehr wie in früheren Versionen neu starten, um die Einstellungen zu übernehmen. Auch eigene Anordnungen der Fenster können Sie hier speichern und bei Bedarf abrufen.

Abbildung 3.1 Umschalten des Arbeitsbereichlayouts

Abbildung 3.2 Der Startbildschirm in der Designer-Ansicht

Abbildung 3.3 Der Startbildschirm in der Coder-Ansicht

Abbildung 3.4 Layout für den Dual Screen-Betrieb


Rheinwerk Computing

3.1.2 Orientierung auf der Arbeitsoberfläche  downtop

Die Arbeitsoberfläche unterteilt sich in die Bereiche Einfügeleiste oder Einfügeinspektor , die Bedienfeldgruppen mit dem Dateifenster und das eigentliche Dokumentfenster mit dem Eigenschafteninspektor .

Bedienfeldgruppen | Die grundsätzliche Funktionsweise von Dreamweaver 8 spiegelt sich in der Aufteilung der Bereiche wider. Die Einfügeleiste fügt Ihrem Dokument ein HTML-Tag hinzu. Im Eigenschafteninspektor können Sie alle wichtigen Attribute des angewählten oder zuvor eingefügten HTML-Tags einstellen und bearbeiten. Um die Attribute eines Elementes zu bearbeiten, müssen Sie dieses mit der Maus vorher aktivieren. Weiterführende Aktionen außerhalb der Möglichkeiten, die Ihnen HTML bietet, wie zum Beispiel JavaScript, CSS und Serververhalten, finden Sie in den nach Kategorien gruppierten Bedienfeldgruppen.

Abbildung 3.5 Die Arbeitsoberfläche

Dateifenster | Die Platzierung des Dateifensters neben dem Dokumentfenster ermöglicht den schnellen Zugriff auf Dokumente. Bilder und Verlinkungen können schnell in das aktuell bearbeitete Dokument per Drag & Drop gezogen werden.


Rheinwerk Computing

3.1.3 Anpassen der Bedienfeldgruppen  downtop

Etwas ungewohnt ist die Handhabung der Bedienfeldgruppen bzw. die Veränderung der Zusammenstellungen innerhalb dieser Gruppen.

Bedienfelder, das sind die einzelnen Elemente (Karteireiter) in einer Bedienfeldgruppe, können nicht wie aus anderen Anwendungen gewohnt einfach »herausgezogen« werden, sondern müssen über ein kleines Menü am rechten Rand der Bedienfeldgruppe »umgruppiert« werden.

Abbildung 3.6 Verändern der Bedienfeldgruppen


Rheinwerk Computing

3.1.4 Platz zum Arbeiten schaffen  downtop

Wenn Sie mit einem kleineren Monitor arbeiten, werden Sie schnell von der Unzahl an Paletten und Fensterchen genervt sein. Durch das Ein- und Ausklappen der einzelnen Bedienfeldgruppen oder ganzer Bildschirmbereiche können Sie jedoch auch mit weniger Platz sehr komfortabel arbeiten.

Abbildung 3.7 Geöffnete Bedienfelder und Dokumentenbereiche

Abbildung 3.8 Geschlossene Bedienfelder und Dokumentenbereiche


Rheinwerk Computing

3.1.5 Einfügeleiste anpassen  downtop

Die Einfügeleiste können Sie in der Ansicht als Register oder als Menü darstellen. In Abbildung 3.9 auf Seite 50 sehen Sie, wie Sie zwischen den Varianten umschalten können. Wir haben uns im Buch für die Ansicht als Registerkarte entschieden. Sollte also Ihre Einfügeleiste anders aussehen als hier im Buch, schalten Sie diese eventuell um. In beiden Ansichten stehen Ihnen jedoch alle Funktionen der Palette zur Verfügung.

Abbildung 3.9 Umschalten der Ansichtsoptionen für die Einfügeleiste


Rheinwerk Computing

3.1.6 Das Dateifenster  downtop

Für umfangreiche Dateioperationen ist das Dateifenster in der Bedienfeldgruppe zu klein. Wechseln Sie daher für diese Aktionen durch Klicken auf das Icon im Bedienfeld Dateien in die Siteverwaltung von Dreamweaver 8.

Um zurück zum Dokument zu gelangen, klicken Sie in der Siteverwaltung wieder auf das gleiche Icon oder schließen einfach das Fenster.

Die Funktionen der Siteverwaltung sind für das Arbeiten mit Dreamweaver 8 und für das Erstellen von Websites grundlegend. Wir haben diesem Modul deshalb einen eigenen, ausführlichen Abschnitt gewidmet (siehe Seite 91).

Abbildung 3.10 Umschalten zur Siteansicht

Abbildung 3.11 Siteansicht von Dreamweaver 8


Rheinwerk Computing

3.1.7 Verschiedene Dokumentansichten  downtop

Dreamweaver 8 bietet Ihnen mehrere Möglichkeiten der Dokumentansicht. Sie können am oberen linken Rand des Dokumentfensters zwischen den Ansichten Code für die reine Codeansicht, Teilen für eine geteilte Code- und Entwurfsansicht und Entwurf für die reine Entwurfsansicht oder Layoutansicht wechseln

Abbildung 3.12 Wechseln zwischen den Dokumentansichten.


Tipp: Elemente im Code auffinden
Codezeilen und HTML-Tags können Sie ganz einfach im Quelltext auffinden, indem Sie das gewünschte Element in der Layoutansicht markieren und dann in die Codeansicht wechseln. Dreamweaver 8 markiert im Quelltext die entsprechenden Befehle. Setzen Sie den Cursor im Layout an eine bestimmte Stelle, zum Beispiel innerhalb einer Tabellenzelle, wird der Cursor auch im Quelltext an diese Stelle gesetzt. So lassen sich in umfangreichen Quelltexten Elemente sehr einfach auffinden.


Rheinwerk Computing

3.1.8 Die Entwurfsansicht  downtop

Abbildung 3.13 Entwurfsansicht mit visuellen Hilfsmitteln

In der Entwurfsansicht können Sie Ihr Layout betrachten, wie es im Browser aussehen wird. Die integrierte Vorschau ist, zumindest im Bezug auf neuere Browser, sehr gut! Es werden zusätzlich einige visuelle Hilfsmittel angezeigt, um das Layouten zu erleichtern (Formulare, Tabellenrahmen, unsichtbare Elemente). Diese visuellen Hilfsmittel können Sie auch abschalten .

Abbildung 3.14 Ein- und Ausblenden visueller Hilfsmittel

Vorschau in Dreamweaver | Da es auf dem Markt nicht nur ein Browsermodell gibt und Dreamweaver nicht alle verfügbaren Browsermodelle gleichzeitig darstellen kann, muss die Vorschau zwangsläufig ein – wenn auch guter – Kompromiss zwischen den aktuellen Browsern sein. Die Vorschau innerhalb von Dreamweaver ersetzt in keinem Fall eine Layoutkontrolle in verschiedenen aktuellen Browsern.

In der Entwurfsansicht stehen Ihnen verschiedene weitere Hilfestellungen für Tabellen und CSS zur Verfügung. Wir werden in späteren Kapiteln hierauf detailliert eingehen.

Arbeitsoberfläche aufräumen | Achten Sie beim Layouten darauf, dass auch visuelle Hilfsmittel »Platz« beanspruchen und schalten Sie diese bei Bedarf aus. Besonders wichtig ist dies, wenn Sie mit vielen unsichtbaren Elementen arbeiten, was sich bei dynamischen Seiten oder Seiten mit Layern und Formularen fast immer ergibt.


Rheinwerk Computing

3.1.9 Code- und Entwurfsansicht  downtop

Quelltext parallel anzeigen | In der Entwurfsansicht verliert man schnell das Gefühl dafür, dass es sich bei Dreamweaver 8 nicht um ein Layoutprogramm handelt, sondern um die grafische Oberfläche eines Programmiertools. Auch wenn Sie in der grafischen Ansicht arbeiten, erstellen Sie Quellcode. Wenn Sie mit Dreamweaver 8 anfangen Websites zu programmieren, kann es sinnvoll sein, Layout und Quelltext parallel zu sehen. Sie bekommen so ein Gefühl dafür, was tatsächlich passiert, wenn Sie etwas im Layout verändern. Sie können dies mit der geteilten Ansicht erreichen.

In der geteilten Ansicht können Sie Änderungen im Quelltext oder im Layout sofort mitverfolgen. Wenn Sie Änderungen im HTML-Quelltext vornehmen, müssen Sie Dreamweaver 8 die Möglichkeit geben, die Darstellung des Dokuments neu zu rendern. Klicken Sie daher, nachdem Sie die Änderungen vorgenommen haben, wieder mit der Maus in das Layoutfenster, um auch in der Layoutvorschau Ihre Änderungen zu sehen.

Abbildung 3.15 Code- und Entwurfsansicht parallel anzeigen


Coden lernen während der Arbeit
Die geteilte Ansicht ermöglicht es Ihnen, im Quelltext mitzuverfolgen, welche Auswirkungen Ihre Aktionen auf den Code haben. Wenn Sie HTML erlernen oder vertiefen wollen, ist dies eine hervorragende Möglichkeit, um ein Gefühl für den Aufbau eines HTML-Dokuments zu bekommen.


Rheinwerk Computing

3.1.10 Die Codeansicht  downtop

Die Codeansicht zeigt Ihnen den Quelltext des Dokuments direkt an. Die Syntax der Programmiersprachen wird sehr gut hervorgehoben und Sie können deutlich zwischen Inhalten, Befehlen und Attributen unterscheiden.

Abbildung 3.16 Codeansicht

Zwischen dieser Ansicht und der Ansicht des Quelltextes, den noch Dreamweaver 4.0 erzeugt hat, liegen Welten. Bereits in Dreamweaver MX wurde Homesite als Code-Editor integriert. Nun, in der vorliegenden Version mausert sich Dreamweaver 8 tatsächlich zum universellen Programmiertool für Websites. Über die vielen Möglichkeiten, die Ihnen beim Arbeiten mit Quelltext geboten werden, erfahren Sie in einem späteren Kapitel mehr.


Rheinwerk Computing

3.1.11 Ansicht im Testserverbetrieb  toptop

Eine hervorragende Arbeitserleichterung und Zeitersparnis ist die Anzeige dynamischer Seiten im Testserverbetrieb, die Live Data-Ansicht.

Sie können in dieser Ansicht während des Serverbetriebs durch PHP oder andere Skriptsprachen generierte Seiten direkt in Dreamweaver 8 sehen und bearbeiten. Im Testserverbetrieb steht Ihnen eine weitere Funktionsleiste zur Verfügung, die wir im Kapitel 26 über dynamische Sites genau erläutern.

Abbildung 3.17 Ansicht im Testserverbetrieb


Nur bei Serverbetrieb verfügbar
Achtung, diese Ansicht steht Ihnen nur bei dynamischen Dokumenttypen und einem installierten lokalen Webserver zur Verfügung! Wir werden in Kapitel 22 zu dynamischen Seiten sehr genau auf dieses Feature eingehen und einen Testserver installieren.



Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: Adobe Dreamweaver CS3
Die Neuauflage:
Adobe Dreamweaver CS3
Jetzt bestellen


 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: Adobe Dreamweaver CC






 Adobe
 Dreamweaver CC


Zum Rheinwerk-Shop: Adobe Dreamweaver CC Einstieg






 Adobe Dreamweaver
 CC Einstieg


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern