ÄNderung des cSS-Layouts in Adobe CS5 Dreamweaver

ÄNderung des cSS-Layouts in Adobe CS5 Dreamweaver - Dummies

Abode Creative Suite 5 (Adobe CS5) Dreamweaver bietet mehrere Möglichkeiten zum Ändern eines Seitenlayouts für Cascading Style Sheets. Ein CSS-Layout wird vollständig von Style-Sheet-Regeln gesteuert, sodass Sie das Aussehen und Verhalten der Seite direkt im Bedienfeld "CSS-Stile" und im Eigenschafteninspektor ändern können.

Jede Spalte, jedes Feld und jeder Bereich auf Ihrer neuen Seite wird mit Hilfe von CSS-Regeln und -Eigenschaften positioniert und bemessen, die Sie entweder im Eigenschafteninspektor (im Bedienfeld "CSS-Stile") oder im CSS-Regeldefinitionsfenster anpassen können.

  1. Wenn das Bedienfeld CSS-Stile noch nicht geöffnet ist, wählen Sie Fenster → CSS-Stile, um es zu öffnen.

  2. Wählen Sie die Registerkarte Alle aus, um das Stylesheet und seine Regeln anzuzeigen.

    Das interne Stylesheet wird oben angezeigt. Klicken Sie auf den Pfeil auf der linken Seite, um ihn zu erweitern und alle darin enthaltenen Regeln anzuzeigen. Layouts, die ein angefügtes (externes) Stylesheet verwenden, zeigen den Style-Sheet-Namen (z. B. styles.css) anstelle des Tags an.

  3. Wählen Sie die Körperregel aus.

    Dieser Tag-basierte Stil steuert die allgemeine Formatierung der gesamten Seite (alles innerhalb des Tags).

  4. Klicken Sie auf das Feld neben der Hintergrundregel, um es zu bearbeiten. Anstatt die Einstellung # 4E5869 (mittelgrau) beizubehalten, geben Sie eine hexadezimale Farbe ein (z. B. # CC0000 für rot), um die Hintergrundfarbe der Seite zu ändern.

  5. Klicken Sie auf das Farbfeld neben der Farbregel, um das Farbfelderbedienfeld zu öffnen. Wählen Sie eine neue Standardschriftfarbe für den Text auf Ihrer Seite aus.

  6. Wählen Sie oben im Bedienfeld "CSS-Stile" einen anderen Stil aus (z. B. den Stil "zweiColElstHdr #container"), um dessen Eigenschaften anzuzeigen.

    Die. Der Stil "twoColHybLtHdr #container ID" steuert die Größe und Darstellung des Hauptlayoutcontainers auf der Seite.

  7. Bearbeiten Sie im Eigenschafteninspektor die Eigenschaften, um das Erscheinungsbild des Stils zu ändern.

    Sie können beispielsweise die Breite der Regel ändern, indem Sie eine neue Zahl in das Textfeld "Breite" eingeben. Wenn Sie beispielsweise 95% eingeben, erweitern Sie das gesamte Layout.

Jede Spalte und jeder Abschnitt, der Ihr Layout umfasst, wird von einem der ID-Stile gesteuert, die im Bedienfeld "CSS-Stile" aufgelistet sind. Die meisten ID-Stile verfügen über eine Breiten-Eigenschaft, mit der Sie die Größe verschiedener Bereiche auf der Seite ändern können.

Fahren Sie mit der Modifizierung verschiedener Stile fort, die im Bedienfeld "CSS-Stile" aufgelistet sind, und sehen Sie, wie sich diese auf verschiedene Elemente auf Ihrer Seite auswirken. Ändern Sie die Schriftfarbe, Schriftart und andere Eigenschaften wie Füllung und Hintergrundfarbe.

Um herauszufinden, welche ID welche Spalte oder Sektion steuert, klicken Sie innerhalb des Seitenbereichs und sehen Sie sich den Tag-Selektor unten im Dokumentfenster an.Das letzte Tag am Ende der Kette zeigt Ihnen, in welchem ​​Container Sie sich befinden, und die entsprechende ID im Bedienfeld "CSS-Stile" (z. B.).