 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
|
|
|
|
|
|
|
|
 |
|
|||||||||
 |
 |
 |
 |
 |
 |
 |
 |
 |
|
|
 |
|
|||||||||
 |
 |
|
||||||||
 |
|
|||||||||
|
||||||||||
|
||||||||||
|
|
|
 |
||
|
Top im Web » Topweb Home
|
||
 |
||
Werbung
Top im Web
Webpublishing mit Dreamweaver und Fireworks
Kurs der Volkshochschule Bern
Hier gehts zurück zur Übungs-Übersicht
Übung 6: CSS - Cascading Stylesheets
Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier.
|
Vorab: Mit CSS 2 (kombiniert mit XHTML, einer Erweiterung des ursprünglichen HTML-Standards, kombiniert mit den Vorzügen von XML) kann man unheimlich viel anstellen - man braucht nicht mal mehr Tabellen fürs Layout. Abstände zwischen den verschiedenen Layoutblöcken lassen sich bequem und zentral über ein Stylesheet definieren.
Auf unserer Stufe schalten wir mit CSS 1 aber noch einen Gang zurück und benützen Stylesheets als globale Stilvorlagen für Schriftarten und Linktypen, welche für die gesamte Site Geltung haben.
CSS/XHTML (Stichwort: Trennung von Layout und Inhalt, Zugänglichkeit der Site für Behinderte) ist aber zweifellos die Zukunft im Webdesign, die bereits begonnen hat.
Ich bin der Meinung, dass für EinsteigerInnen Table-Design intuitiver zu erlernen ist. Das soll aber keine Interessierten davon abhalten, sich damit auseinanderzusetzen, z.B. hier, hier oder hier. Im CSS Zen Garden sieht man wunderbar, wie mit CSS2 Designs per Mausklick in andere geändert werden können - oder bei Bedarf auch im Webwriting-Magazin.
Nun aber zum Einstieg in CSS!
Sie kennen das vielleicht schon von Word her: Es ist möglich, z.B. alle Haupttitel mit Arial, fett, 16 Punkt zu formatieren und diese Definition als "MainTitle" abzukürzen. Den Lauftext hätten Sie gern als Times New Roman, 12 Punkt, genannt z.B. "Main". Zwischenüberschriften sind bei Ihnen Times New Roman, Kursiv, Fett, 13 Punkt - und diesen Stil nennen Sie "ZwiTi". Das heisst: Sie müssen sich keine komplizierten Kombinationen merken, sondern markieren nur noch den Text und weisen ihm einen bestimmten Stil zu. In Word heisst dies dann "Formatvorlage".
Genau so funktionieren Stylesheets im Internet.
Sie definieren in einer externen Datei mit der Endung .css (die natürlich auf dem Server auch vorhanden sein muss) die verschiedenen Schriftarten Ihrer Website. Auf jeder Seite steht im <head>-Teil ein Code, nämlich
<link href="images/topweb.css" rel="stylesheet" type="text/css">
oder
<style type="text/css">
@import url(images/topweb.css);
</style>
... wobei hier das Stylesheet "topweb.css" heisst und im Unterordner "images" liegt.
Das Stylesheet ist nun mit dem Dokument verknüpft, und Sie können einzelne Teile der Seite mit den in der CSS-Datei definierten Stilen ausstatten.
Es gibt erstens die Möglichkeit, Standard-HTML-Tags wie <p> (Text-Absätze) oder <h1> (Überschriften erster Ordnung) im Stylesheet so umzubiegen, dass sie bestimmte Formate annehmen, das ist die eleganteste Lösung.
Es gibt aber auch die zweite Möglichkeit, völlig eigene Stile (Styles) zu definieren. Im HTML-Code werden die CSS-Tags dann z.B. mit dem <span>-Tag dargstellt, eine CSS-Formatierung kann z.B. als <class> bezeichnet werden. Es gibt aber viele andere Möglichkeiten. Im folgenden Beispiel wäre also das Wort "Hallo" mit dem Style "text-big-bold" formatiert:
<span class="text-big-bold">Hallo</span>
Wenn wir annehmen, wir hätten "text-big-bold" als 14 Pixel hohe, fette Arial definiert, dann entspräche diese Formatierung in Standard-HTML in etwa:
<font size="+1" face="Arial"><b>Hallo</b></font>
Sie sehen also: Man spart so auch einiges an Code - besonders mit der ersten Methode, die ausschliesslich normale Tags benützt. Das sieht dann nämlich nur noch so aus:
<h1>Hier ist eine Überschrift</h1>
<p>Dies ist der erste Textabsatz</p>
<p>Und dies der zeite</p>
Das alles hat einen nicht zu verachtenden Vorteil. Es könnte ja sein, dass in 10 Jahren die Standardschrift im Web nicht mehr "Verdana" heisst, sondern unterdessen ein neuer Font namens "Fiona" erfunden worden ist. Dreimal dürfen Sie raten, was der Vorteil ist.
Genau: Wenn Sie nun alle Ihre Unterseiten anpassen wollen und kein CSS verwendet haben, dann dürfen Sie entweder alle Seiten manuell öffnen und korrigieren - oder ein riskantes globales "Search and Replace" ausführen.
Mit CSS öffnen Sie einfach das Stylesheet, ändern die Schriftart einmal von "Verdana" auf "Fiona", kopieren die CSS-Datei auf den Server und... sind schon fertig.
Grundregeln CSS 1
Nun gibt es - bevor wir uns darum kümmern, wie man das mit Dreamweaver macht - einige wichtige Regeln. Zuerst: Fix vergebene Schriftformatierungen sind stärker als CSS. Wenn Sie also einer Schriftart gleichzeitig im Eigenschaften-Fenster die Attribute Fett und Arial zuweisen, dann kann im Stylesheet noch so viel Normal und Verdana stehen - dann ist die "harte" Formatierung stärker.
Wenn wir einmal ein Stylesheet erstellt und ans HTML-Dokument angehängt haben, sieht das Eigenschaften-Fenster in DW MX 2004 (und nur dort, nicht in vorherigen Fassungen) so aus - vor der Auswahl von "Schriftart", "Grösse" und "Farbe" sollten Sie fortan die Finger lassen - stattdessen lediglich "Stil" (oder auch "Format", dazu später) einstellen.
Hingegen sind gewisse Kombinationen von "harten" Formatierungen und CSS möglich. Wenn Sie also ein vereinzeltes Wort fett machen möchten, die Schrift aber ansonsten durch einen Style definiert ist, ist dies kein Problem: Solange sich Style und "harte" Formatierung nicht ausschliessen, geht das. Sinnvoll ist es aber nicht, und entspricht auch nicht den Standards; definieren Sie lieber alle Styles im Stylesheet.
Dann: Wenn Sie zuviel im Style-Fenster rumklicken, verschachteln sich manchmal Styles gerne. Es sieht dann zwar OK aus, aber der Code wird unerträglich schwer, da zuviel unnötige Zeichen drin stehen. Schauen Sie also ab und zu mal rein, ob alles sauber ist.
Zudem können Sie Styles an diverse Tags anhängen - es geht auch ohne span / class. Dreamweaver bzw. später der Browser stellen aber eine Aufzählung anders dar, wenn Sie entweder als <li class="text-16">...</li> oder als <li><span class="text-16">...</span><li> dargstellt wurde.
Und zuguterletzt die beste Nachicht: Mit CSS können Sie endlich viel mehr anstellen als nur relative Schriftgrössen mit dem Standard-Zeilenabstand zu verwenden. Sie können z.B. sagen, dass Ihre Hauptschrift eine 12 Pixel hohe Verdana ist und der Zeilenabstand 1.9 Pixel betragen soll oder dass bestimmte Links nicht unterstrichen sind, sondern nur rot - beim Mouse Over (Überfahren mit der Maus) aber weiss werden, mit blauem Hintergrund (undsoweiter), andere Links aber Orange sind und beim Überfahren mit der Maus Dunkelblau werden. All dies kann man mit Standard-HTML nicht...
Bedenken Sie aber, dass nicht jeder Browser mit jeder Spielerei fertig wird! Sie werden schnell merken, dass z.B. Netscape 4.7 ein äusserst bockiger Geselle in Sachen CSS ist. Zum Glück ist der Browser praktisch ausgestorben.
Auch wichtig: CSS und XHTML sind geltende Standards des W3C (World Wide Web Consortium, weltweite Organisation zur Standardisierung im Web). Seiten, die gemäss den dort festgeschriebenen Standards hergestellt sind, sollten punkto Interoperabilität (Darstellung in verschiedenen Browsern, Darstellung in Browsern für Behinderte, Übernahme von Inhalten in ander Layouts usw.) absolut top sein - dummerweise halten sich aber auf diesem Planeten nicht alle gern an Standards.
Und ganz dumm: Vor allem der mit Abstand meistverwendete Browser "Internet Explorer" (IE) nicht - was Design mit CSS nicht unbedingt leichter macht. Es nützt nicht eben viel, wenn eingefleischte Designer sagen: "Hey, meine Seite ist valides CSS/XHTML, was kümmerts mich, wenn sie im IE schlecht aussieht - Bill Gates soll sich gefälligst an die Standards halten!" - Denn über 90% der SurferInnen ist es egal, was Standards sind; sie benützen IE und wollen ein sauberes Design sehen. Darum: CSS/XHTML ja, aber nicht um jeden Preis.
CSS 1 aber GANZ sicher - wir sehen gleich, wie wir im DW damit arbeiten können.
CSS 1 in Dreamweaver
Grund-Stile kann man auf zwei Arten festlegen:
- Man "biegt" Standard-HTML-Tags um, man sagt quasi, dass ein sogenannter "Selektor" wie der Standardabsatz <p> ab sofort "Verdana 12px, schwarz, Zeilenabstand 120%" sein soll, und dass Überschiften erster Ordnung <h1> ab sofort "Verdana 16px schwarz fett, Abstand zum oberen Textblock 20px" sein soll.
- Man kann (was in der Regel überflüssig ist) zusätzliche Styles definieren und benennen, z.B. soll der Style "text-12" bestimmte Attribute aufweisen.
Dazu ist es möglich, in Stylesheets das Aussehen von Links zu steuern.
Wer sich noch besser in die Thematik einlesen will, kann in einer ruhigen Minute einen Blick ins berühmte "Selfhtml" werfen - insbesondere in das Kapitel "Zentrale Formate definieren".
Los gehts! Stellen Sie sicher, dass DW korrekt eingerichtet ist (Site definiert). Erstellen Sie dann ein neues, leeres HTML-Dokument, beginnen Sie mit Ctrl+N (Menü "Datei / Neu"):
(oben: Screen aus MX 2004 / unten: CS3)
Speichern Sie dieses Dokument innerhalb Ihrer Site. Wie immer ist es nun am einfachsten, ein Grund-Stylesheet zu klauen und damit weiterzufahren. Sie können ein Stylesheet hier herunterladen (unbedingt mit rechter Maustaste anklicken, dann "Save Link As" bzw. "Verknüpfung speichern unter") - speichern Sie das CSS in Ihrer Site (erstellen Sie einen Ordner "css" und speichern Sie das Stylesheet-Dokument dort hinein).
Nun müssen wir "der leeren Seite sagen", dass sie die Styles unseres Stylesheets benützen soll. Zum Einbinden in der Seite gibts zwei Möglichkeiten - hier zuerst die "offizielle".
In Dreamweaver MX 2004 sind die Styles in der Bedienfeldgruppe "Design" sichtbar, die Sie aufklappen oder mittels "Fenster / CSS-Stile" einblenden können - tun Sie dies, beachten Sie vor allem das mit dem Pfeil markierte Icon "Stylesheet anfügen"
(oben: Screen aus MX 2004 / unten: CS3)
Klicken Sie auf dieses Icon und folgen Sie den Anweisungen in diesem Screenshot:
Wenn Sie sich nun den Quellcode des Dokuments anschauen, sollte das etwa so aussehen:
Sie sehen also: Dreamweaver hat den Code
<link href="topweb.css" rel="stylesheet" type="text/css">
oder
<style type="text/css">
@import url(topweb.css);
</style>
in den <head>-Teil des Dokuments geschrieben (Annahme hier: das CSS wurde nicht in einen Unterordner gespeichert).
Dies ist zugleich die "Quick'n'Dirty"-Variante, um das Stylesheet anzuhängen - Sie müssen einfach im Quellcode diese Zeile in den Bereich zwischen <head> und </head> jedes HTML-Dokuments einfügen, das aus dem Stylesheet die Formate entnehmen soll. Natürlich muss der korrekte Pfad drin sein - wenn ein Stylesheet namens "topweb.css" z.B. im Unterordner "images" Ihrer Site liegt, siehts so aus:
<link href="images/topweb.css" rel="stylesheet" type="text/css">
Egal, welche Variante wir benützen - jetzt haben wir im Dreamweaver vollen Zugriff auf die Styles! Was bedeutet das genau?
Nochmals: In Dreamweaver MX 2004 sind die Styles in der Bedienfeldgruppe "Design" sichtbar, die Sie aufklappen oder mittels "Fenster / CSS-Stile" einblenden können - und im Gegensatz zu vorhin sehen Sie nun bei einem Klick auf "topweb.css" alle Formatierungen, die Sie im Entwurfsmodus vom Dreamweaver mit einem Mausklick vergeben können:
(oben: Screen aus MX 2004 / unten: CS3)
Und noch in Klammer für User von Dreamweaver 4: Hier finden Sie dann die Styles, wenn Sie unten rechts diesen Knopf drücken...
..oder den Befehl "Fenster / CSS-Stile" wählen, sollte dieses Fenster sichtbar werden:
Zurück zu Dreamweaver MX 2004. Sie werden feststellen: Wenn Sie Text in Ihr neues Dokument schreiben, ist dieser standardmässig schon eine 12px-Verdana mit 120% Zeilenabstand. Schreiben Sie also als Test mal ein paar Zeilen und Absätze. Jeder Absatz, den Sie mit ENTER vornehmen, hat ebenfalls diese Formatierung.
Dies rührt daher, dass in der Stylesheet-Datei (in unserem Fall topweb.css) folgende Zeilen stehen:
Sie sehen hier zugleich, wie CSS-Dateien eigentlich ausschauen - es sind ganz normale Textdateien, die Sie in Dreamweaver (aber theoretisch auch in einem Textedior) ebenfalls öffnen und manuell editieren können. Sie sehen oben in Pink den HTML-Tag - und nachher in {geschweiften Klammern} die Attribute des Tags, Schriftart, Grösse, Zeilenabstand usw. - getrennt durch ein Semikolon.
Zum Glück macht es und DW aber etwas einfacher und stellt alle so in der CSS-Datei definierten Styles eben rechts oben im CSS-Fenster dar.
Wir können die einzelnen Stile auch einzeln manuell mutieren, also z.B. dem <p>-Tag eine neue Schriftgrösse verpassen wollen... easy! Wählen Sie den Tag, den Sie ändern möchten. Doppelklicken Sie dann auf den markierten Button "Stile bearbeiten":
Sie sehen im folgenden Fenster, wie <p> definiert wurde:
Wie das ganze im Stylesheet aussieht, haben Sie ja oben schon gesehen. Versuchen Sie nun aber, hier im Dreamweaver in mehreren Durchgängen die Attribute des <p>-Tag zu ändern - bestätigen Sie dies jeweils mit OK; schauen Sie, wie sich Ihr Dokument verändert.
Alternativ dazu haben fortgeschrittene User auch die Möglichkeit, den Style mit det rechten Maustaste anzuklicken, "Gehe zu Code" zu wählen und weiter unten in der Bedienfeldgruppe "Regel" detailliert zu bearbeiten:
(oben: Screen aus MX 2004 / unten: CS3)
Sie erinnern sich sicher an das oben Gesagte: Wenn Sie einmal eine grosse Site mit 1000 Dateien haben, sind Sie nicht ganz undankbar, wenn Sie eine Schriftartenänderung so einfach in einer Datei vornehmen können... es genügt, dass CSS umzustellen und neu auf den Server zu speichern.
Sie haben nun sicher gemerkt, dass CSS das Leben massiv erleichert: Ist die Standardschrift in <body> und <p> einmal festgelegt, müssen Sie gar keine Schriftarten mehr definieren - praktisch! In unserem Beispiel-Stylesheet hats aber noch viel mehr Stile - z.B. für Überschriften.
Schauen Sie sich hier einmal an, was man damit alles anstellen kann. Sie können diese Seite mittels Rechtsklick / "Ziel speichern unter" auch lokal in Ihre Site speichern und dass CSS neu verknüpfen - oben steht, wie.
Sie können aber auch selbst aktiv werden und Styles vergeben - in DW MX 2004 haben Sie alle verfügbaren Styles oben im Eigenschaftenfenster: Unter "Format" die Standard-Selektoren <p>, <h1> usw. - und unter "Stil" die weiteren verfügbaren Styles aus dem aktuellen CSS. Nochmals: von "Schriftart" und "Grösse" Finger weg - DW erzeugt dann neue, lokale, selbst benannte Styles, die nur Verwirrung stiften:
Sie sehen - netterweise bringt DW MX 2004 sogar eine Vorwahl, wie die Schrift aussieht!
Üben Sie nun weiter anhand einer eigenen Datei, wie sich Änderungen im Stylesheet auswirken und was passiert, wenn Sie Styles vergeben.
Wenn Sie später auf dem Server arbeiten: Vergessen Sie nicht, dass Sie bei der Arbeit auf dem Server das Stylesheet (CSS-Datei) immer wieder neu auf den Server laden müssen nach einer Änderung - und das dargestellte Dokument im Browser reloaden müssen.
Sie können übrigens auch ganzen Tabellenzellen einen bestimmten Style verpassen - dann müssen Sie nicht extra den ganzen Text markieren. All das finden Sie auch bequem im Beispieldokument!
Zum Nachlesen: KnowWare-Heft 12, Seite 26ff.
Hier und hier finden Sie übrigens noch mehr zu CSS!
Hier gehts zurück zur Übungs-Übersicht
Achtung: Diese Übungen werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.
blog | yakome'tt | projekte | kontakt
last update 18.05.2012 20:04 © jacomet.ch 1999-2005