Operation Manual

Nach oben
Auf ein Div-Tag angewendete Regeln anzeigen und bearbeiten
1. Führen Sie einen der folgenden Schritte aus, um das div-Tag auszuwählen:
Klicken Sie auf den Rahmen des div-Tags.
Suchen Sie die Markierung, damit Sie den Rahmen sehen können.
Klicken Sie in das div-Tag und drücken Sie zweimal Strg+A (Windows) oder Befehl+A (Macintosh).
Klicken Sie in das div-Tag und wählen Sie das div-Tag im Tag-Selektor unten im Dokumentfenster aus.
2. Wählen Sie ggf. „Fenster“ > „CSS-Stile“ aus, um das Bedienfeld „CSS-Stile“ zu öffnen.
Die auf das div-Tag angewandten Regeln werden im Bedienfeld angezeigt.
3. Bearbeiten Sie die Regeln nach Bedarf.
Einfügemarke in einen Div-Tag setzen, um Inhalt hinzuzufügen
Klicken Sie auf eine beliebige Stelle innerhalb des Div-Tags.
Platzhaltertext in einem Div-Tag ändern
Markieren Sie den Text und überschreiben Sie ihn oder drücken Sie die Entf-Taste.
Hinweis: Sie können dem div-Tag genau wie einer Seite Inhalt hinzufügen.
Die Markierungsfarbe von Div-Tags ändern
Wenn Sie den Zeiger in der Entwurfsansicht über die Kante eines div-Tags führen, hebt Dreamweaver die Tag-Rahmen hervor. Sie können die
Markierungsfunktion nach Bedarf aktivieren oder deaktivieren oder die Markierungsfarbe im Dialogfeld „Voreinstellungen“ ändern.
1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh).
2. Wählen Sie in der Liste links die Kategorie „Markierung“.
3. Führen Sie einen der folgenden Schritte aus und klicken Sie auf „OK“.
Um die Markierungsfarbe für div-Tags zu ändern, klicken Sie in das Farbfeld „Mouse-Over“ und wählen Sie mit dem Farbwähler eine
Markierungsfarbe aus (oder geben Sie den Hexadezimalwert für die Markierungsfarbe im Textfeld ein).
Um die Markierung von div-Tags zu aktivieren bzw. zu deaktivieren, aktivieren bzw. deaktivieren Sie das Kontrollkästchen „Anzeigen“ für
„Mouse-Over“.
Hinweis: Diese Optionen wirken sich auf alle Objekte aus, wie beispielsweise auf Tabellen, die in Dreamweaver hervorgehoben
werden, wenn Sie den Zeiger darüber bewegen.
CSS-Layout-Blöcke
CSS-Layout-Blöcke visualisieren
In der Entwurfsansicht können Sie CSS-Layout-Blöcke visualisieren. Ein CSS-Layout-Block ist ein HTML-Seitenelement, das Sie an einer
beliebigen Stelle auf der Seite positionieren können. Genauer gesagt ist ein CSS-Layout-Block entweder ein div-Tag ohne display:inline oder ein
anderes Seitenelement, das die CSS-Deklaration display:block, position:absolute oder position:relative enthält. Im Folgenden finden Sie einige
Beispiele von Elementen, die in Dreamweaver als CSS-Layout-Blöcke angesehen werden:
Ein div-Tag
Ein Bild, dem eine absolute oder relative Position zugewiesen wurde
Ein a-Tag, dem der Stil display:block zugewiesen wurde
Ein Absatz, dem eine absolute oder relative Position zugewiesen wurde
Hinweis: Damit CSS-Layout-Blöcke visuell wiedergegeben werden können, enthalten Sie keine Inline-Elemente (d. h. Elemente, deren Code in
einer Textzeile enthalten ist) und auch keine einfachen Blockelemente (wie z. B. Absätze).
Dreamweaver bietet eine Auswahl an visuellen Hilfsmitteln zum Anzeigen von CSS-Layout-Blöcken. Sie können beim Entwerfen z. B. Konturen,
Hintergründe oder das Box-Modell für CSS-Layout-Blöcke aktivieren. Sie können außerdem die QuickInfo anzeigen, die Eigenschaften zu einem
ausgewählten CSS-Layout-Block anzeigt, indem Sie den Mauszeiger über den Layout-Block führen.
Die folgende Liste mit visuellen Hilfsmitteln für CSS-Layout-Blöcke beschreibt, welche Elemente Dreamweaver für jeden Layout-Block wiedergibt:
CSS-Layout-Konturen Zeigt die Konturen aller CSS-Layout-Blöcke auf der Seite an.
CSS-Layout-Hintergründe Zeigt vorübergehend zugewiesene Hintergrundfarben für einzelne CSS-Layout-Blöcke an und blendet andere
Hintergrundfarben oder Bilder aus, die normalerweise auf der Seite angezeigt werden.
Wenn Sie das visuelle Hilfsmittel zum Anzeigen der Hintergründe von CSS-Layout-Blöcken aktivieren, weist jedem CSS-Layout-Block
Dreamweaver automatisch eine separate Hintergrundfarbe zu. (Dreamweaver wählt die Farben anhand eines Algorithmus aus, d. h., Sie haben
keine Möglichkeit, die Farben selbst zuzuweisen.) Die zugewiesenen Farben sind visuell auffällig und sollen Ihnen die Unterscheidung zwischen
CSS-Layout-Blöcken erleichtern.
248