So ändern die Farben der Vorlagen in Kompozer

January 26

Vorlagen helfen Webdesignern, die Zeit sparen, indem die Wiederverwendung von HTML-Elementen. Ein Kamera-Verkaufsseite müssen beispielsweise die gleiche Überschrift und Hintergrund-Farbe auf allen Seiten auf der Website anzuzeigen. Anstatt diese Eigenschaften für jede HTML-Seite, Websiteentwickler erstellen Sie eine einzelne Vorlage und machen jede Seite dieser Vorlage verweisen. Wenn sie sich später entscheiden, Seiten mit verschiedenen Farben zu erstellen, können sie die Vorlage aktualisieren. Wenn Sie KompoZer verwenden, ein freier HTML-Editor Ändern der Farbe einer vorhandenen Vorlage mithilfe des Programms "CaScadeS"-Editor.

Anweisungen

Vorlage erstellen

1 Starten Sie KompoZer zu, und klicken Sie auf "Datei". "Neu" klicken Sie auf "Eine leere Vorlage." Eine leere HTML-Vorlage wird im Bearbeitungsfenster angezeigt.

2 Drücken Sie "Strg" und "S" und Typ "Testvorlage 1" im Feld "Page Title". Klicken Sie auf "OK". Das "Seite speichern unter"-Fenster wird geöffnet und zeigt Ordner Ihrer Festplatte. Klicken Sie auf einen der Ordner, und geben Sie dann eine "Testvorlage 1" im Textfeld "Dateiname". Klicken Sie auf "Speichern". KompoZer erstellt eine neue Vorlage und im ausgewählten Ordner gespeichert.

3 Klicken Sie auf "CaScadeS", an der Spitze der KompoZer zum Öffnen des Fensters CSS Stylesheets. In diesem Fenster können Sie ein neues Stylesheet für die Vorlage erstellen.

4 Klicken Sie auf "Internes Stylesheet", und klicken Sie auf das Dropdown-Feld befindet sich auf der rechten Seite des Fensters, um eine Liste der HTML-Elemente anzuzeigen, die Sie formatieren können. Klicken Sie das "Body"-Element und dann auf "Create Rule."

5 Klicken Sie auf "Hintergrund", und klicken Sie auf die Schaltfläche "Farbe" Color Fenster angezeigt. Klicken Sie auf eine der Farben im Fenster, und klicken Sie auf "OK". KompoZer stellt das Stylesheet Körperfarbe auf die ausgewählte Farbe. Da die Vorlage das Stylesheet verwendet wird, wird seine Farbe auch dieser Farbe angezeigt.

6 Klicken Sie auf "Einfügen". Ein Dropdown Menü wird angezeigt. Klicken Sie auf HTML, und geben Sie dann den folgenden Code in das Textfeld:

< h1 > Dies ist die Vorlage Überschrift < / h1 >

Klicken Sie erneut auf "Einfügen". KompoZer hinzugefügt die Vorlage eine Überschrift. Zu diesem Zeitpunkt enthält die Vorlage eine Überschrift und eine Hintergrundfarbe die Farbe, die Sie für das Template Stylesheet ausgewählt.

7 Drücken Sie "Strg" und "N" erstellen ein neues Dokument-Fenster zu öffnen. Klicken Sie auf "A neues Dokument basierend auf eine Vorlage", und klicken Sie auf die Schaltfläche "Ordner", um das Fenster "Datei auswählen" anzuzeigen. Suchen Sie die Vorlagendatei, die Sie erstellt, und doppelklicken Sie auf die Datei.

8 Klicken Sie auf "Erstellen". Eine neue HTML-Seite wird im Editor. Weil die Vorlage verwendet wird, wird diese Seite die Vorlage Überschrift und Hintergrundfarbe angezeigt. Jede Seite, die Sie erstellen, dass Referenzen zeigen diese Vorlage der Vorlage Überschrift und Hintergrundfarbe. Wenn Sie später entscheiden, dass man Seiten erstellen, die verschiedene Farben haben, können Sie dies durch Ändern der Vorlage, wie im nächsten Abschnitt dargestellt.

Ändern der Farben

9 Drücken Sie "Strg" und "O", um die HTML-Datei öffnen-Fenster anzuzeigen.

10 Klicken Sie auf den Dropdown-Pfeil "HTML-Dateien" und klicken Sie auf "HTML-Vorlagen." Eine Liste der vorhandenen Vorlagen wird im Fenster angezeigt.

11 Doppelklicken Sie auf die Vorlage, die Sie erstellt, um im Editor zu öffnen. Die Hintergrundfarbe entspricht die Farbe, die Sie festlegen, wenn Sie die Vorlage erstellt.

12 Klicken Sie auf "CaScadeS", um das CSS Stylesheets-Fenster öffnen. Klicken Sie auf den "Körper" im linken Bereich des Fensters, und klicken Sie auf "Hintergrund."

13 Klicken Sie auf "Farbe", um das Fenster Farbe anzuzeigen. Klicken Sie auf die neue Farbe, die Sie gerne möchten, verwenden Sie für die Vorlage und klicken Sie auf "OK". KompoZer ändert die Vorlage Farbe auf den ausgewählten. Keine neuen HTML-Dokumente, die Sie basierend auf dieser Vorlage erstellen, werden die neue Farbe verwenden.

Tipps & Warnungen

  • Dieses Beispiel erstellt eine einfache Vorlage, die Hintergrundfarbe eines HTML-Dokuments festlegt. Die gleichen Prinzipien können Sie Farben anderer Elemente wie Schaltflächen, Beschriftungen, Absätze und Textfelder festlegen. HTML-Seiten, die auf die Vorlage verweisen gelten diese Farben für die entsprechenden HTML-Elemente. Sie können die Farben der später ändern, wie in den folgenden Schritten dargestellt. Neue HTML-Dokumente, die Sie erstellen, die auf die Vorlage verweisen, werden die neuen Farben verwenden. KompoZer-Webseite