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


Rheinwerk Computing

3.3 Layouthilfen in Dreamweaver  downtop


Rheinwerk Computing

3.3.1 Raster einstellen und anzeigen  downtop

Das Arbeiten mit einem Dokumentraster kann beim Layouten mit Ebenen und Tabellen eine große Hilfe sein. Sinnvoll ist das Dokumentraster, wenn Sie Ebenen frei positionieren oder beim Erstellen von Tabellen den Layouttabellen-Modus verwenden, um Tabellen zu zeichnen. Im Menü Ansicht • Raster • Rastereinstellungen können Sie, wie in Abbildung 3.36 zu sehen ist, das Raster ganz nach Ihren Wünschen anpassen.

Abbildung 3.36 Raster einstellen und anzeigen

Um das Raster zu aktivieren, klicken Sie im Menü Ansicht • Raster • Raster anzeigen oder Sie drücken gleichzeitig + + bzw. + + .

Wenn Sie möchten, dass Layoutelemente am Raster ausgerichtet werden, müssen Sie Raster • Am Raster ausrichten aktivieren oder + + + bzw. + + + drücken. Sie können die Schrittweite bzw. den Rasterabstand in diesem Menü ebenfalls genau definieren.


Rheinwerk Computing

3.3.2 Hilfslinien  downtop

Erst in der neuen Version Dreamweaver 8 ist es möglich, mit Hilfslinien zu arbeiten. Nach anfänglicher Skepsis, was denn Hilfslinien bei HTML zu suchen haben, sind wir mittlerweile begeistert und möchten dieses Tool zur schnellen Layoutkontrolle nicht mehr missen.

Hilfreiches Kontrollmittel | Es ist nicht sinnvoll, Hilfslinien zum vollständigen Aufbau des Layouts einzusetzen, wie Sie dies eventuell aus DTP-Programmen wie InDesign gewohnt sind. Das eigentliche Layout wird mit Photoshop o. Ä. erstellt.

Zur schnellen Kontrolle von Abmessungen und Abständen sind Hilfslinien hingegen hervorragend geeignet. Wer kennt es nicht: Screenshot erstellen – Photoshop öffnen – Abstand messen – in Dreamweaver 8 nachbearbeiten – erneute Kontrolle usw. Diese Arbeitsschritte können Sie sich jetzt sparen.

Abbildung 3.37 Hilfslinien erstellen

Um Hilfslinien zu erstellen, müssen Sie zunächst die Lineale aktivieren. Hierzu klicken Sie im Menü Ansicht auf Lineale und auf Lineale • zeigen oder Sie drücken gleichzeitig + + bzw. + + .

Erstellen Sie nun eine Hilfslinie, indem Sie auf die Lineale klicken und mit gedrückter Maustaste die Hilfslinie an die gewünschte Position in das Dokument ziehen. So, als wollten Sie das Lineal verschieben.

Um eine Hilfslinie wieder zu löschen, ziehen Sie diese einfach aus dem Dokument heraus.

Hilfslinien exakt einstellen | Ziehen Sie eine beliebige Hilfslinie in das Dokument und doppelklicken Sie auf die Hilfslinie . Wie in Abbildung 3.37 dargestellt, öffnet sich eine Dialogbox und Sie können die gewünschte Position pixelgenau eingeben.

Abstände schnell messen | Um Abstände innerhalb eines Dokumentes schnell zu messen, ziehen Sie eine beliebige Hilfslinie in das Dokument und verschieben diese mit gedrückter / -Taste. Wie in Abbildung 3.37 dargestellt, werden alle Abstände zum Dokumentenrand – zusätzlich zur aktuellen Hilfslinienposition – angezeigt .


Browserfenster mit Hilfslinien simulieren
Im Menü Ansicht • Hilfslinien werden Ihnen diverse Bildschirmabmessungen angezeigt. Die Auswahl einer dieser Abmessungen veranlasst Dreamweaver 8 dazu, Hilfslinien in den Abmessungen des in der ausgewählten Bildschirmgröße zur Verfügung stehenden Browserfensters anzulegen.


Rheinwerk Computing

3.3.3 Die Statusleiste  downtop

Neu in Dreamweaver 8 ist die Erweiterung der Statusleiste um einige Funktionen. Das Icon mit dem Pfeil ist die Standardauswahl und ermöglicht Ihnen das Auswählen einzelner Elemente im Dokument. Dieses Icon müssen Sie anwählen, nachdem Sie mit dem Handwerkzeug oder dem Zoomwerkzeug die Dokumentansicht verändert haben.

Abbildung 3.38 Neue Hilfsmittel in der Statusleiste

Das Handwerkzeug | Die Hand ermöglicht ein Dokument »anzufassen« und innerhalb des aktuellen Fensterbereichs am Bildschirm zu verschieben, ohne mit den Scrollleisten zu arbeiten. Besonders in Kombination mit der Lupe und einem gezoomten Dokument ist dieses Werkzeug sehr sinnvoll, um eine Stelle im Dokument aufzufinden.

Das Zoomwerkzeug | Ein Dokument können Sie, wie in Abbildung 3.39 zu sehen ist, mit der Lupe zoomen oder durch die direkte Anwahl einer voreingestellten Skalierung im Menü . In diesem Menü gelangen Sie auch wieder zur Originalansicht des Dokuments (100 %).

Bildschirmauflösung & Dateigröße | Im Menü rechts neben der Zoomfunktion können Sie das aktuelle Dokumentfenster auf die in einer bestimmten Bildschirmauflösung zur Verfügung stehenden Abmessungen skalieren. Am rechten Rand der Statusleiste finden Sie die Angaben über die aktuelle Dateigröße des Dokuments . In dieser Angabe sind alle externen Grafiken etc. enthalten. Sie können so abschätzen, ob das Dokument noch in einer akzeptablen Geschwindigkeit über das Internet geladen werden kann.

Abbildung 3.39 Ein gezoomtes HTML-Dokument


Dokumentfenster auf Bildschirmauflösung skalieren
Das Dokumentfenster kann nur auf die gewünschte Größe skaliert werden, wenn es nicht maximiert ist.


Rheinwerk Computing

3.3.4 Tracing-Bilder  toptop

Um ein Layout exakt an einer Vorlage auszurichten, können Sie in den Seiteneigenschaften ein so genanntes Tracing-Bild angeben. Ein Tracing-Bild ist eine Grafik, die in den Hintergrund des aktuellen Bildes gelegt wird, um darauf ein Raster, Hilfslinien, Ebenen oder Tabellen zu erstellen. Das Tracing-Bild wird im Browser nicht angezeigt. Damit eine Unterscheidung zwischen Tracing-Bild und bereits im Layout eingefügten grafischen Elementen möglich ist, können Sie die Transparenz des Tracing-Bildes einstellen.

Abbildung 3.40 Tracing-Bild angeben



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