Erstellen interner und externer Stylesheets in Dreamweaver - Dummies

Wenn Sie neue Stile in Dreamweaver erstellen, müssen Sie entscheiden, ob Sie den Stil in einem internen oder externen Stylesheet speichern möchten. In einem internen Stylesheet wird die Stilregel oben im HTML-Dokument gespeichert, wo Sie den Stil anwenden möchten. In einem externen Stylesheet werden neue Formatvorlagen in einem separaten Dokument gespeichert, das an jede Datei in Ihrer Website angehängt werden kann.

Externe Stylesheets bieten die größten Vorteile, da die Verwendung eines Stile-Sets auf vielen Seiten effizienter ist als das Erstellen von Stilen für jede Seite in Ihrer Site. Abgesehen davon sind interne Stylesheets manchmal eine gute Wahl, z. B. wenn Sie einen Stil erstellen, der nur auf Elemente auf einer Seite angewendet wird.

Erstellen eines internen Stylesheets in Dreamweaver

Interne Stylesheets werden in derselben HTML-Datei gespeichert, in der sie angewendet werden. Daher erstellen Sie keine Datei, wenn Sie ein internes Stylesheet erstellen, wie Sie es beim Erstellen eines externen Blattes tun.

Wenn Sie ein internes Stylesheet erstellen, fügen Sie stattdessen Tags innerhalb der Tags oben in der HTML-Datei hinzu, die Sie in Dreamweaver geöffnet haben. Wenn Sie dann Stile erstellen, speichern Sie die neuen Stilregeldefinitionen in den Tags in Ihrer Datei.

Das Erstellen eines neuen internen Stils in Dreamweaver erfordert nur zwei Schritte. Klicken Sie zuerst auf das Pluszeichen (+) im Fenster "Quellen" oben im CSS Designer-Bedienfeld. Wählen Sie dann in der Dropdown-Liste die Option In Seite definieren aus. Sie sind fertig. Dreamweaver fügt die Tags in den Code Ihrer Datei ein und listet das interne Stylesheet im Fenster "Quellen" mit dem Tag auf.

Erstellen eines externen Stylesheets in Dreamweaver

Ganz oben im CSS Designer-Bedienfeld finden Sie das Fenster "Quellen". In dieser Anzeige werden der Name oder die Namen aller Stylesheets angezeigt, die für die geöffnete Seite verfügbar sind. Das gleiche Fenster wird zum Erstellen oder Verknüpfen von Stylesheets beim Erstellen oder Anwenden von Stilen verwendet.

Um ein externes Stylesheet zu erstellen, erstellen und speichern Sie zuerst eine neue HTML-Datei oder öffnen Sie eine vorhandene Datei in Dreamweaver und befolgen Sie dann die folgenden Anweisungen:

1. Klicken Sie oben im Quellenfenster auf das Pluszeichen (+). das CSS Designer-Fenster.

   Eine Dropdown-Liste mit drei Optionen wird geöffnet: Neue CSS-Datei erstellen, Vorhandene CSS-Datei anhängen und In Seite definieren.

   

2. Wählen Sie die Option Neue CSS-Datei erstellen aus der Dropdown-Liste aus.

   Das Dialogfeld "Neue CSS-Datei erstellen" wird geöffnet.

3. Geben Sie einen Namen für Ihre neue Stylesheet-Datei ein.

   Sie können Stylesheets beliebig benennen, solange Sie keine Leerzeichen oder Sonderzeichen außer dem Bindestrich (-) oder Unterstrich (_) einfügen.

   

4. Wählen Sie die Option Link aus.

   Link ist in den meisten Fällen die beste Vorgehensweise und standardmäßig in Dreamweaver ausgewählt.

   Die Option "Importieren" wird größtenteils nur verwendet, wenn mehrere externe Stylesheets auf die Seite angewendet werden sollen, die jedoch nur mit einem Stylesheet verknüpft werden sollen. In diesem Fall können Sie die Importoption verwenden, um mehrere Stylesheets mit einem zu verknüpfen.

5. Klicken Sie auf den Pfeil neben Bedingte Verwendung, um zusätzliche Einstellungen anzuzeigen.

   Die Einstellungen für bedingte Verwendung werden zum Einrichten von Medienabfragen für Stylesheets verwendet.

6. Klicken Sie auf OK.

   Das Stylesheet wird gespeichert und mit der HTML-Seite verknüpft, die Sie in Dreamweaver geöffnet haben. Hinweis: Wenn Sie an einer neuen HTML-Seite arbeiten, stellen Sie sicher, dass Sie die Seite gespeichert haben. Andernfalls können Sie keine neue CSS-Datei erstellen und verknüpfen.

Nachdem Sie ein externes Stylesheet erstellt haben, können Sie dasselbe Stylesheet mit beliebig vielen Seiten verknüpfen, indem Sie die Schritte in der unmittelbar folgenden Übung ausführen. Sie können auch beliebig viele Stilregeln zu jedem externen Stylesheet hinzufügen, das in den verschiedenen Übungen zum Erstellen von Klassen, Tags und anderen Stilen beschrieben wird.