Zwei Tipps zum Anwenden von CSS-Stylesheets in DreamWeaver
Autor：Eve Cole
Aktualisierungszeit：2009-05-31 21:17:47
1. Entfernen Sie die Unterstreichung des Hyperlinks und ändern Sie die Farbe, wenn die Maus über den Hyperlink fährt:
Standardmäßig sind Hyperlinks auf mit DreamWeaver erstellten Webseiten unterstrichen, was nicht sehr schön aussieht. Um diese lästigen Unterstreichungen zu entfernen, besteht die in vielen Zeitungen und Zeitschriften eingeführte Methode darin, manuell einen Codeabschnitt zum HTML-Quellcode hinzuzufügen. Tatsächlich ist es einfach, die Unterstreichungen von Links in DreamWeave zu entfernen. Erstellen Sie zunächst einen zufälligen Link im Dokumentfenster von DreamWeaver. Sie können sehen, dass dieser Link unterstrichen ist. Wie entferne ich diese Unterstreichung?
1. Klicken Sie in der Menüleiste auf „Text“ | „CSS-Stile“ (oder drücken Sie direkt die Tastenkombination Strg+Umschalt+E), um das Dialogfenster „Stylesheet bearbeiten“ aufzurufen.
2. Klicken Sie auf „Neu“ und dann im Dialogfeld „Neuer Stil“ auf die Schaltfläche „CSS-Auswahl verwenden“.
3. Geben Sie a in das Feld „Selektor“ ein und klicken Sie dann auf „OK“.
4. Anschließend wird das Dialogfeld „CSS-Stildefinition“ angezeigt. Aktivieren Sie in der Dekoration der Typklasse „Keine“, klicken Sie dann auf „OK“ und dann auf „Fertig“. Sie werden sofort feststellen, dass die Unterstreichung des Links im Dokumentfenster verschwunden ist. Wie kann man also dafür sorgen, dass der Link seine Farbe ändert, wenn man mit der Maus darüber fährt? Wiederholen Sie die Schritte eins und zwei oben. Klicken Sie dann auf den Dropdown-Pfeil neben „Selektor“, wählen Sie „a:hover“ aus und klicken Sie auf „OK“. Wählen Sie im daraufhin angezeigten Dialogfeld „Stildefinition für a: Hover“ eine beliebige Farbe in der Farbe der Type-Klasse aus (wählen Sie beispielsweise Rot aus), klicken Sie dann auf „OK“ und dann auf „Fertig“, um den Vorgang abzuschließen. Drücken Sie F12, um eine Vorschau anzuzeigen, und platzieren Sie die Maus auf dem Link. Wird der Link rot? Wenn Sie gerade im Dialogfeld „Stildefinition für einen: Hover“ in der Backgroud-Klasse die Hintergrundfarbe Grün auswählen, wird der Link beim Platzieren der Maus auf dem Hyperlink nicht nur rot, sondern auch dort wird auch ein grüner Hintergrund sein. Tatsächlich können Sie jetzt über das Dialogfeld zur Definition des CSS-Stils auch weitere Spezialeffekte erzielen. Interessierte Freunde möchten möglicherweise darüber nachdenken.
2. Erstellen Sie ein wiederverwendbares externes CSS-Stylesheet, nachdem Sie DreamWeaver zum Erstellen eines CSS-Stils auf einer bestimmten Webseite verwendet haben. Wenn Sie den Stil auf eine andere Webseite anwenden möchten, müssen Sie den CSS-Stil nicht erneut erstellen Da Sie eine externe CSS-Stylesheet-Datei (externes CSS-Stylesheet) erstellen, können Sie die Stile in dieser Stylesheet-Datei in Zukunft beliebig aufrufen. Um die Verwaltung zu erleichtern, erstellen Sie zunächst einen neuen Ordner in dem Ordner, in dem sich die Site befindet, mit dem Namen CSS, der speziell zum Platzieren externer Stylesheet-Dateien verwendet wird (seine Erweiterung ist CSS).
1. Drücken Sie im Dokumentfenster Strg+Umschalt+E, um das Dialogfenster „Stylesheet bearbeiten“ aufzurufen. 2. Klicken Sie auf „Link“.
3. Klicken Sie im Popup-Dialogfeld „Externes Stylesheet verknüpfen“ auf DURCHSUCHEN und suchen Sie den CSS-Ordner, den Sie gerade erstellt haben.
4. Geben Sie in der Spalte „Dateiname“ des Fensters „Stylesheet-Datei auswählen“ *.css (* kann ein beliebiger Name sein) ein. Bitte beachten Sie, dass sich derzeit keine Stylesheet-Datei im CSS-Ordner befindet Der im Feld „Dateiname“ eingegebene Name wird zum Namen der neuen externen Stylesheet-Datei. Geben Sie beispielsweise title.css ein und klicken Sie dann auf Auswählen |.
5. Im Dialogfenster „Stylesheet bearbeiten“ wird „title.css“ (Link) hinzugefügt. Doppelklicken Sie darauf.
6. Klicken Sie im Popup-Fenster „title.css“ auf „Neu“.
7. Klicken Sie im Dialogfeld „Neuer Stil“ auf die Schaltfläche „Benutzerdefinierten Stil (Klasse) erstellen“. 8. Geben Sie einen Namen in die Spalte „Name“ ein, z. B. „myheadline“, und klicken Sie auf „OK“.
9. Nehmen Sie im folgenden Dialogfeld „Stildefinition für .myheadline in title.css“ verschiedene Einstellungen wie Schriftart und Farbe vor und klicken Sie abschließend auf „OK“. Wenn Sie einen neuen Stil erstellen möchten, klicken Sie erneut auf „Neu“, wiederholen Sie die Schritte 6, 7, 8 und 9 und klicken Sie abschließend auf „Speichern“ | Fertig. Die externe Stylesheet-Datei title.css wird erstellt. Alle Stile in title.css werden im Untermenü „TEXT“ | „CSS-Stile“ aufgelistet. Wenn Sie diese Datei title.css auf anderen Webseiten aufrufen möchten, wiederholen Sie einfach die Schritte 1 bis 3 oben und geben Sie dann title.css in die Spalte „Dateiname“ des Fensters „Stylesheet-Datei auswählen“ ein. Klicken Sie auf „Auswählen“ |. „Fertig“. Alle Stile in title.css werden im Untermenü „Text“ | angezeigt und Sie können sie anwenden zu dieser Webseite diese Stile.
