NetObserver Studie
Aktuelles
Startseite
TP Wettbewerbe
Sitemap
Service
Hilfe-Forum
Kolumnen
Linktipps
Buchrezensionen
Traum-Team
Newsletter
Traumquelle
Dreamweaver
Fireworks
Photoshop
Flash
Traum-Start
gimp
GoLive
php / Apache
Sonstige
Grundlagen
Usability
CSS
Apple / Mac
3D
Intern
TP-Sponsor
TP SHOP
Bild Galerie
TP Wallpapers
Forum-Archiv
Link zu uns
Impressum
Zurück  
TP Portal > Dreamweaver > CSS Workshop Teil 2

Workshop: CSS-Formatierungen mit DW (Teil 2)

CSS Formatierungen mit DW, alles irgendwo gar nicht verständlich? Rotes Tuch? Was mach ich mit den ganzen Möglichkeiten? Keine Panik, unser Workshop wird Sie Schritt für Schritt ans Ziel bringen.

Im ersten Teil haben Sie gelernt wie man einfache Textformatierungen für eine einzelne Datei definiert. Das ist aber noch nicht die wahre Stärke von CSS. So richtig interessant wird es erst, wenn man eine einzelne Styleanweisung für alle Dateien, egal wie viele es sind verwendet.

Das ist nur möglich wenn die einzelnen Anweisungen in eine externe Datei geschrieben werden.

1. Erstellen Sie wieder ein neues Dokument und speichern Sie die Datei. Klicken Sie im Menü: Text/CSS-Stile/Neuer Stil. Nun müssen Sie nicht wie im ersten Teil bei Definieren in Nur dieses Dokument nehmen, sondern Neue Stylesheet-Datei. Alles andere machen Sie wie im Teil 1. tooltipp

2. Nach dem OK öffnet sich folgendes Fenster. Hier vergeben Sie einen Namen für die Datei (bitte .css mit angeben!) und suchen sich den Ordner wo Sie diese speichern möchten. Sinnvollerweise speichern Sie Dateien immer dort, wo sich auch das dazugehörige Projekt befindet, also zumindest im Stammordner der Site (siehe auch Site einrichten). tooltipp

3. Nach dem Klick auf Speichern können Sie wieder ganz normal die Formatierungen wählen (Arial/Größe 10). tooltipp

4. Gehen Sie nochmal im Menü Text/CSS-Stile auf Neuer Stil. Nun schauen Sie bei Definieren in: Sie sehen dort jetzt Ihre bereits angelegte externe Stylesheet-Datei. Wenn Sie text2 ebenfalls in dieser definieren möchten, brauchen Sie nur die Datei auswählen. Dreamweaver zeigt dort alle bereits angelegten Dateien eines Projektes an. Definieren Sie wieder text2 mit Arial/Größe 14. tooltipp

5. Ihre Stile können Sie nach dem OK nun ganz normal wie im Bild auswählen tooltipp

Eine Besonderheit gibt es aber noch, das einbinden dieser Stile in weitere Dateien.

6. Erstellen Sie wieder ein neues Dokument und speichern dieses, lassen Sie das erste aber offen. Klicken Sie im Menü Text, diesmal auf Stylesheet anfügen. tooltipp

Es öffnet sich folgendes Fenster. Hier wählen Sie die vorher angelegte Datei einfach aus, DW erstellt den richtigen Verweis zur Datei automatisch. Wenn Sie vor der Auswahl der Datei das Dokument nicht speichern, weist Sie DW darauf hin, dass Sie dies tun müssen, damit der Pfad zur Datei korrekt erstellt wird. Brechen Sie in diesem Fall einfach ab, speichern die Datei und wählen die externe CSS nochmal aus. tooltipp

7. Sie können nun wieder normal im Menü Text die Stile für diese Datei auswählen.

Zusammenfassung: Im ersten Teil haben Sie nur für ein einzelnes Dokument Stile erstellt. Im zweiten Teil haben Sie Stile einmal erstellt, die Sie mit Stylesheet anfügen in jede Datei Ihres Projektes einsetzen können.

 

Autor: (ar)

 

weiter zu Teil 3

Abbildungen

Abbildung 1 - Neuen CSS-Stil definieren

Abbildung 1 - Neuen CSS-Stil definieren

Abbildung 2 - Dateinamen vergeben und Ordner zum speichern auswählen

Abbildung 2 - Dateinamen vergeben und Ordner zum speichern auswählen

Abbildung 3 - Kategorie und Typ für die Formatierungen

Abbildung 3 - Kategorie und Typ für die Formatierungen

Abbildung 4 - zweiten Stil in Datei extern definieren

Abbildung 4 - zweiten Stil in Datei extern definieren

Abbildung 5 - text1 und text2 im Menü als fertige Stile

Abbildung 5 - text1 und text2 im Menü als fertige Stile

Abbildung 6 - Stylesheet anfügen

Abbildung 6 - Stylesheet anfügen

Abbildung 7 - Stylesheet auswählen

Abbildung 7 - Stylesheet auswählen

Buchrezension

Coverimage
AJAX Hacks
Dynamische Webseiten mit AJAX programmieren - dieses Handbuch bietet einen praktischen Einblick.
[mehr]
Gimahhot - Shopping
TP-Partner
Sprachreise London
Webmasterpro
Computerhilfen
Computerhilfen
Eventagentur Hamburg
it-rechtsinfo.de
Designguide
Getreidemühlen
sk-typo3
Kochkurs Berlin
Maandiko.de
d. Webdesigner
PSD Tutorials
Medizin
Handy Forum

Hier könnte Ihre Werbung stehen

 >> INFO << 

\ Startseite | Forum | Impressum | nach oben | Seite zurück /