Stylesheets

Hintergrund

(Technologie wird am Kurs nicht behandelt)

Ein Stylesheet legt das Aussehen einer Website fest:

  • Fonts und Farben,
  • Spalten und Positionen (Seiteneinteilung)
  • Gestaltung der Listen, Links, Formulare usw.
  • Platzierung der Bilder
  • Icons und Strichstärken

WordPress und Webdesign: interessant ist, dass man die Stylesheets wie Kleidungsstücke übereinander anziehen kann (cascading). Bei WordPress spricht man von „Themes“, z.B. TwentyTen, TwentyTwelve, Origin, UZH, und viele andere. Mit den Themes wird die Trennung von Inhalt und Form optimiert.

Diese Seite zeigt, wie die css-Technologie einige typische Stilelemente eines Newsletters festlegt. „css“ steht für Cascading Style Sheets. Alle Web-Tools und Content Management Systeme verwenden heute Stylesheets. Bevor die Stylesheets verfügbar waren, musste eine Seite mühsam mittels TABLE-Tag gestaltet werden. Auch wir kämpften früher tagtäglich mit Tabellen-Reihen und Zellen.

Typische Stilelemente

Seitenbreite gemäss Vorgaben des Grafikers festlegen, d.h. die Anzahl Pixel wird vorgegeben:

div.bodywidth
{
width: 980px;
background-color: #FFFFFF; /* weiss */
}

Die Seite ist exakt 980 Pixel breit. Ganz ähnlich werden die Spaltenbreiten bestimmt. Im html-Text steuern wir diesen Stil nun mit folgendem Tag an:

<div class="bodywidth">

Jetzt sehen Sie die Definition einer Position oben rechts:

/****** Spalte rechts ******/
#sidebar-primary {
float: right;
width: 27.7%;
}

Es ist von Vorteil, wenn wir die Breite nicht absolut, sondern relativ angeben können. Die Grafiker machen den Fehler, möglichst alles in absoluten Werten vorzugeben. Die rechte Spalte ist also knapp 28% breit. Auch die Position steuern wir mit dem div-Tag an:

<div id="sidebar-primary">Das ist oben rechts!</div>

Jede Newsletter-Seite besteht aus Seitenkopf, Hauptbereich und rechter Spalte. Das Grössenverhältnis zwischen Hauptbereich und rechter Spalte beruht auf dem WordPress-Theme „Origin“.

rechte Spalte gelb

rechte Spalte gelb gefärbt

Seiteneinteilung und Links

Vereinfacht sieht die Seiteneinteilung des Newsletters wie folgt aus:

<div class="bodywidth">
..... Seitenkopf .....
<div class="contentarea1col">
..... Brottext .....
<div id="sidebar-primary">
..... Rechte Spalte .....
</div>
</div>
</div> /* End-Tag */

Der Seitenkopf läuft somit über die ganze Breite. Die Hauptspalte wird auch „Brottext“ genannt. Jedes Tag wird zwingend durch ein End-Tag geschlossen.

Ein externer Link <a class=“www“> wird durch einen schrägen Pfeil gekennzeichnet. Für den Pfeil verwenden wir ein kleines Bild (.png) im images-Verzeichnis:

a.www
{
background-image:url(images/arrow_upright.png); /* Pfeil schräg */
padding-left:13px;
background-repeat: no-repeat;
padding-right:2px;
margin-left:0px;
}

Die ocker Farbe des Pfeils stammt aus der Farbpalette unseres Corporate Designs. Ein interner Link des Typs „uzh“ wird durch einen Rechts-Pfeil gekennzeichnet. Wir kombinieren das Tag <a> also mit der Klasse „www“ bzw. „uzh“. Wenn ein Link besucht worden ist, dann wird dieser grau gefärbt:

a:visited {
color: #777777; /* grau */
text-decoration: none;
}

Beachten Sie, dass im RGB-Farbraum ein Grauton erzeugt wird, wenn Rot=Grün=Blau gilt. Unsere Farbpalette besteht im wesentlichen aus Blau- und Grautönen sowie aus Ockerrot.

Zwischentitel im „Brottext“

… werden blau und (wenn auf dem PC vorhanden) in der Palatino-Schrift dargestellt:

.contentarea1col h2
{
font-size: 1.4em; /* em-Space */
margin-top: 1.5em;
font-family: Palatino, "Palatino Linotype", "Book Antiqua", serif;
color: #0028a5; /* blau */
font-weight: bold;
}

Im Beispiel werden einzelne Tags (h2) mit bestimmten Attributen verbunden, z.B. mit Schriftgrösse oder Farbe. Masseinheit em-Space empfohlen. Blauton und Palatino-Schrift kommen aus unserem Corporate Design. Das Beispiel gilt im Brottext (hier im Hauptbereich .contentarea1col).

Und die Typographie der Kursivschrift in Sans-Serif:

em, cite {
font-style: italic;
font-family: Arial, Helvetica, sans-serif;
}

Listen

Und nun zu den vom Corporate Design empfohlenen Listen. Wir unterscheiden zwei „unordered lists“:

  • mit runden Punkten
  • mit eckigen Punkten


ul li, ol li { line-height: 1.5em; }

ul.type1 li
{
background-image: url(images/list_bullet.gif); /* rund */
background-position: 0.5em 0.6em;
background-repeat: no-repeat;
padding-left: 1.5em;
}

ul.type2 li
{
background-image: url(images/list_square.gif); /* eckig */
background-position: 0.5em 0.6em;
background-repeat: no-repeat;
padding-left:1.5em;
}

Für die runden und eckigen Punkte verwenden wir wieder je ein Bild (.gif) aus dem images-Verzeichnis. Bei „type1“ oder „type2“ spricht man von Klassen-Selektoren. Im html-Text können wir schliesslich schreiben:

<ul class="type2">
<li>Fonts und Farben,</li>
<li>Spalten und Positionen usw.</li>
</ul>

(jedes Tag wird zwingend durch ein End-Tag geschlossen)

Hexerei?

Zum Schluss noch ein paar Kennziffern zu einer einfachen Tabelle:

/****** Tabelle ******/
table.grid td
{
width: 100%; /* ganze Breite */
font-size: 12px;
font-family: Arial, sans-serif;
border-width: 1px; /* Strichdicke */
border-style: solid;
}

Diese Attribute gelten generell bei allen TABLE-Tags. Die Schriftgrösse wird hier in Pixel angegeben; flexibler wäre die Angabe in em-Spaces, z.B. „1.0em;“ oder in typographischen Points (wegen der Skalierbarkeit). Wir empfehlen die folgende TABLE-Klasse: class «grid» für Gitter-Darstellung.

<table class="grid">

Ein Kasten wird mittels der border-Attribute konstruiert — Strichdicke beträgt 1 Pixel. Unsere Stylesheets basieren auf dem Corporate Design der Universität Zürich. Sie sehen, die Stil-Klassen sind keine Hexerei. Die Stylesheets zählen zu den wichtigsten Technologien beim Webdesign. Aber der WordPress-Benutzer braucht sich natürlich nicht mit der Programmierung herumzuschlagen; er muss lediglich ein WordPress Theme wählen. Er nutzt den visuellen Editor und kann sich dabei völlig auf seine Aussage (neudeutsch: seinen Content) konzentrieren.

Anhang: style.css (docx)

Advertisements

Eine Antwort zu Stylesheets

  1. Pingback: Ein Aufruf | Kurs für Senioren

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s