Hallo zusammen!
Nachdem ich mich ja bereits ausgiebiger mit den Themen bbCode und PHP beschäftigt habe, folgt nun ein Tutorial in der neu eröffneten CSS-Kategorie.
Ich möchte mich dabei einmal der Frage widmen, was das ansprechende Design einer Zeitung ausmacht, wofür man dies gebrauchen kann und wie man es erstellt.
Blogger wissen, wovon ich rede, wenn ich behaupte, dass immer mehr Online-Portale auf das Aussehen einer Tageszeitung setzen. Dieses Aussehen erzeugt in einem gewissen Sinne den Eindruck von Professionalität und Seriösität.
Gleichzeitig eignet es sich sehr gut für News-Portale und natürlich Weblogs, da der Leser so vertraute Strukturen aus der Tageszeitung wiedererkennen kann.
Neben den ohnehin bereits bekannten und inzwischen leicht überstrapazierten Formatierungsmöglichkeiten normal, fett und kursiv gibt es dabei noch hunderte anderer Varianten, einen Text ansprechend zu gestalten und Informationen so leicht zugänglich aufzubereiten. Ich greife in diesem Tutorial auf Standards aus CSS 1 und 2 zurück, die ich in den drei marktführenden Browsern IE, FireFox und Opera auf Kompatibilität getestet habe. Sollten dennoch Probleme auftreten, wäre ich für einen entsprechenden Hinweis sehr dankbar.
Als Editor zum Erstellen der CSS-Dateien nutze ich den Macromadia Dreamweaver in der Version 8 ( Testversion kostenlos zum Download verfügbar unter http://www.macromedia.com ).
Step 1 - Artikelüberschriften und Header
Schlagzeilen sollen nicht nur inhaltlich, sondern vor allem auch optisch ins Auge stechen. Damit dies 100%ig gelingt, sollte man dabei einige Dinge beachten:
- Leicht lesbare Schriftart wählen, ggf. auch seifenlose Schrift (z.B. Arial oder Verdana).
- Überschrift optisch vom Inhalt des Textes abgrenzen, durch andere Farbe, Schriftart, Unterstreichung etc.
Hierzu habe ich folgenden Vorschlag erstellt, den ihr natürlich nach euren individuellen Vorstellungen anpassen könnt:
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
color: #333333;
border-bottom: 1px solid black;
margin-bottom: 2px;
}
Wie immer ein paar Worte zur Erläuterung.
font-variant:small-caps ist ein neues Feature in CSS2 und sorgt dafür, dass alle Buchstaben als Kapitälchen 8Großbuchstaben) geschrieben werden. Dies ist dann wichtig, wenn man den Text auch als RSS-feed oder über Screenreader anzeigen lassen will, und nicht die Caps-Lock-Taste überstrapazieren will. Gleichzeitig ist man so viel flexibler und kann dieses feature (auch bei Verwendung eines CMS) einfach abändern, ohne 500 Überschriften Manuell in Normalschreibung neu tippen zu müssen.
margin-bottom:2px ist eine optionale Angabe, die den unteren Abstand u anderen Objekten regelt. Diese sollte unbedingt den eigenen Vorstellungen und optischen Ansprüchen angepasst werden.
Alternativ zur Anlage als CSS-Klasse ließen sich diese Formatierungen auch einem Überschriften-Tag zuweisen, z.B. der Überschrift h1.
Der Effekt ist jedoch nahezu der selbe.
Step 2 - Der Hingucker und Informationsvermittler
In den meisten Zeitungen und Zeitschriften werden die Überschriften durch einen Untertitel und/oder eine explizite Einleitung ergänzt. Dies lässt sich sehr einfach nachbauen, der Effekt ist grandios.
Mein Vorschlag hierzu:
.subtitle {
font-family: Arial;
font-size: 12px;
font-variant: small-caps;
text-transform: capitalize;
margin-top: none;
line-height: 90%;
}
Dieser Untertitel hebt sich optisch von der Überschrift ab. Zum Einen verwendet er eine andere Schriftart, auf der anderen Seite ist er aber auch nicht mehr kursiv. Somit entsteht eine optisch harmonische, aber dennoch deutlich abgegrenzte Textdarstellung. Auch hier behalten wir die KapitälchenVariante vorerst bei, um den Untertitel später vom eigentlichen Inhalt abzugrenzen.
Optional könnte man ein letter-spacin von 0,8 bis 1 p einfügen, um die Laufweite zu erhöhen und den Text leichter lesbar zu machen.
Step 3 - Der eigentliche Inhalt
Kommen wir nun zum Sahnestückchen.
Der Inhalt bildet den wahrscheinlich größten Textanteil, daher verbindet der Leser die meisten Schwierigkeiten oder Erleichterungen beim Lesen immer mit dem Hauptinhalt. Eine Seite, deren Hauptinhalt shlecht oder gar nicht formatiert ist, kann nicht gut sein, ist der Inhaltstext aber harmonisch auf die anderen Teile abgestimmt und fügt sich dezent in die Umgebung ein, hat man im Prinzip schon gewonnen.
p {
font-family: Georgia, Times, serif;
font-size: 12px;
text-align: justify;
letter-spacing: 0pt;
}
Um den Inhaltstext zu formatieren, wurde hier auf die Anlage einer Klasse verzichtet und schlicht und ergreifend der Absatztext-Tag verwendet (p). Hierbei gilt es zu beachten, dass man dann aber für Links entsprechende neue Formatierungen erstellen muss, da sonst einfach die p-Einstellungen im Fließtext übernommen werden. Dennoch soltle man sich hier auf eine andere Farbwahl und eine evtl. Unterstreichung beschränken und für Navigationslinks in einer Leiste o.ä. eigene Klassen anlegen.
Der Inhaltstext ist, wie ihr seht, in meinem Vorschlag eine (von mir bei falschen Einsatz absolut verachtete) Serifenschriftart. Das bedeutet, ähnlich wie in einer Zeitung oder einem Buch sind die Buchstaben hier an den Enden mit kleinen Querbalken, sogenannten Serifen versehen, die immer ein wenig an Schreibmaschinenschrift erinnern.
Hierbei sind nun erst einmal zwei Dinge interessant: Über die Eigenschaft text-align:justify erzeugt man einen Blocksatz. Dieses Feature ist seit CSS 2 dabei und erfreut sich wachsender Beliebheit, da man so gezielt Spaltenlayouts mit Text füllen kann und das Lesen dadurch extrem erleichtert wird. Obendrein siehts auch noch schick aus.
Der Wert für letter-spacing wurde hier noch auf 0 pt belassen (demnach wäre der Eintrag eigentlich überflüssig). hier könnt ihr nach Belieben durch Ausprobieren und eigenes Empfinden eigene Werte eintragen. Achtung: Nicht alle Browser können mit Dezimalzahlen bei pt-Werten ertwas anfangen, 0,6pt Abstand sehen also nicht überall nach 0,6pt aus.
Step 4 - Das optische Sahnestückchen
Einige haben mich schon gefragt, wie man so etwas erstellt, wie ich es auf meiner Webseite schon länger erfolgreich einsetze: Eingangskapitälchen.
Dieser Begriff aus der Typografie bedeutet nichts anderes, als dass der erste Buchstabe eines langen Textes oder Absatzes extragroß geschrieben ist und vom eigentlichen Text umflossen wird. Dies eignet sich inzwischen auch prima zum Nachbau mit CSS. Das Ganze funktioniert dabei über eine einfache Pseudoklasse:
p:first-letter {
font-family:arial, verdana, sans-serif;
font-size:36px;
font-weight:bolder;
color:silver;
float:left;
margin-right:3px;
}
Auch hier wird wieder eine serifenlose Schrift verwendet, um sich optisch vom Inhalt abzugrenzen.
Die Eigenschaft float sorgt für einen Textfluss um den Buchstaben, während der margin-Wert für einen gleichnmäßigen Abstand in allen Browsern sorgt. Zusätzlich könnte man noch Hintergrundbilder (z.B. Schnörkelmuster bei antiken Texten oder Rezepten) und/oder einen Rahmen hinzufügen.
Würde man statt der Formatierung den Buchstaben als Bild einfügen, wären alle blinden, Seitenbesucher, die einen Textbrowser oder einen Screenreader (Vorleseprogramm) nutzen müssen, aufgeschmissen.
Fazit - War's schwer?
Wie ihr seht, lässt sich also in sehr kurzer Zeit eine optisch anspruchsvolle und gut funktionierende Typografie-Formatierung erstellen, die als Abbild einer modernen Tageszeitung fungieren kann. Durch gezielte Änderungen der einzelnen Eigenschaften lässt sich dieser Effekt noch weiter modifizieren, wobei hier gilt: Immer die Leute beachten, die eine Schrift nicht installiert haben oder die Textbrowser benutzen - Stichwort: Barrierefreiheit.
Als andere Schriftarten wären zusätzlich denkbar:
Trebuchet MS, Courier New, Garamond, Helvetica, usw. usw.
Die möglichen Kombinationen ufern ins Unendliche aus, aber man sollte es dennoch nicht übertreiben - weniger ist oft mehr!
Solltet ihr Fragen/Kritik/Anregungen/Wünsche/Beschwerden zu diesem Tutorial, zu CSS, Grafik- und Webdesign allgemein haben, dann gilt wie immer: nutzt mein Profil-Gästebuch, schreibt mir eine PN oder eMail oder nervt mich über ICQ :wink:
Eine Beispieldatei mit den Formatierungen aus diesem Tutorial findet ihr unter:
http://www.rettungsgeil.de/testarea/zeitung.php
Viele Grüße
ssd_bonn