3.7 Formatierung der Inhalte

In der Datei base.css wurden die Container des Basis-Layout positioniert. Anschließend wurde in der Datei basemod.css der optische Rahmen des Layouts festgelegt. In diesem Abschnitt folgt nun die Formatierung der eigentlichen Inhalte — es geht um die Schriftgestaltung, Formatierung von Listen und Links, Platzierung von Bildern im Text u.v.a.m. Dafür zuständig ist die Datei content.css im Verzeichnis css/main. Darin werden folgende Eigenschaften definiert:

  • verwendete Schriften
  • alle strukturellen Textelemente (Überschriften, Absätze, usw.)
  • Listen, Tabellen, Bilder
  • das Erscheinungsbild von Hyperlinks
  • usw.

Im einfachsten Fall werden all diese Eigenschaften global für die gesamte Webseite festgelegt. Oftmals ist es jedoch auch sinnvoll Schriftgrößen, Farben usw. für die einzelnen Bereiche des Layouts (Header, Inhaltsspalten, Fußzeile) getrennt und mit unterschiedlichen Werten vorzunehmen.

Erweiterte Textformatierungen

HTML bietet grundlegende Möglichkeiten (Fettdruck, kursive Schrift, Anführungszeichen) zur Hervorhebung von Begriffen oder Textpassagen. Auch hierbei kann es sinnvoll sein, diese Hervorhebungen ggf. auch inhaltsabhängig anzupassen und zu erweitern. Innerhalb dieses Tutorials wird beispielsweise das HTML-Element <em> in drei Varianten verwendet:

  • <em>...</em> für einfache Hervorhebungen aus dem Fließtext
  • <em class="mono">...</em> für CSS-Eigenschaften, ID's oder Klassen
  • <em class="file">...</em> für Dateien
  • <em class="directory">...</em> für Verzeichnisse
em,i { font-style:italic; }

em.mono {
  font-family: monospace;
  font-style: normal;
  padding: 0 0.3em 0 0.3em;
  background: #f4f4f4;
  border: 1px #ccc solid;
}

em.file {
  font-family: monospace;
  font-style: normal;
  padding:0 0 0 14px;
  color: #000088;
  background: transparent url('../img/icons/file.gif') no-repeat left;
}

em.directory {
  font-family: monospace;
  font-style: normal;
  padding:0 0 0 15px;
  color: #000088;
  background: transparent url('../img/icons/dir.gif') no-repeat left;
}

Nach dem gleichen Prinzip wird das HTML-Elemente <code> und <blockquote> verwendet, um Auszüge aus dem (X)HTML- oder CSS-Quellcode bzw. Hinweise und Anmerkungen semantisch korrekt auszuzeichnen.

code {
    font-family: monospace;
    padding: 0.5em;
    color: #000;
    background-color: #f0f0f4;
    border-left: 8px #ccd solid;
}

code.css {
    background-image: url("../img/bg_css.gif")
    background-repeat: no-repeat;
    background-position: top right;
}

code.xhtml {
    background-image: url("../img/bg_xhtml.gif")
    background-repeat: no-repeat;
    background-position: top right;
}

blockquote {
    font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
    color: #666;
    background: transparent;
    border: 0;
}

Auszeichnung externer Hyperlinks

Die Auszeichnung externer Hyperlinks erfolgt automatisch per CSS. Passen Sie dazu die URL-Bezeichnung an ihre eigene Domain an. Die Definition der Link-Auszeichnung ist ebenfalls in der Datei content.css zu finden:

a[href^="http://www.meine-domain.de"],
a[href^="https://www.meine-domain.de"]
{
  padding-left: 12px;
  background-image: url('../img/icons/ext_link.gif');
  background-repeat: no-repeat;
  background-position: left;
}

Wenn Sie mit relativen Pfadangaben für seiteninterne Links arbeiten, können Sie sogar auf die Angabe der URL verzichten.

a[href^="http:"], a[href^="https:"] { ... }

Hinweis: Die automatische Linkauszeichnung funktioniert generell nicht im Internet Explorer bis zur aktuellen Version 6. Dieser Browser versteht die verwendeten CSS 2-Anweisungen nicht.

Damit ist das Basis-Layout fertig und einsatzbereit für den Bildschirm. Der nächste Abschnitt beschäftigt mit der Druckvorbereitung.

»»» Abschnitt 3.8: Anpassung des Layouts für Printmedien