3.8 Gestaltung der Inhalte
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.
Innerhalb der Datei content.css werden folgende HTML-Elemente formatiert:
- Überschriften H1 ... H6
- Elemente zur Gliederung von Texten (Paragraph, Blockquote, usw.)
- Listen, Tabellen, Bilder
- das Erscheinungsbild von Hyperlinks
- Formularelemente
- usw.
Im einfachsten Fall werden die Eigenschaften all dieser Elemente global für die gesamte Webseite festgelegt. Oftmals ist es jedoch auch sinnvoll Schriftgrößen, Farben usw. für einzelne Teilbereiche des Layouts (Header, Inhaltsspalten, Fußzeile) getrennt und mit unterschiedlichen Werten vorzunehmen.
Hinweis: Das YAML-Framework enthält derzeit nur sehr wenige Standardvorgaben zur Content-Formatierung. An dieser Stelle hat der Webdesigner freien Gestaltungsspielraum.
Auszeichnung externer Hyperlinks
Die Auszeichnung externer Hyperlinks erfolgt automatisch per CSS. Dieses Vorgehen wird auf den eigentlichen Inhaltsbereich des Layouts, den Container #main begrenzt. Passen Sie dazu die URL-Bezeichnung an ihre eigene Domain an.
#main a[href^="http://www.meine-domain.de"],
#main a[href^="https://www.meine-domain.de"]
{
padding-left: 12px;
background-image: url('../img/icons/ext_link.gif');
background-repeat: no-repeat;
background-position: 0 0.45em;
}
Wenn Sie mit relativen Pfadangaben für seiteninterne Links arbeiten, können Sie sogar auf die Angabe der URL verzichten.
#main a[href^="http:"], a[href^="https:"]
{ ... }
Hinweis: Die automatische Linkauszeichnung erfordert die Unterstützung von CSS 2.1-Pseudoklassen durch den Webbrowser. Der Internet Explorer erfüllt bis zur aktuellen Version 7.0 diese Anforderungen leider nicht.
Damit ist das Basis-Layout fertig und einsatzbereit für den Bildschirm. Der nächste Abschnitt beschäftigt mit der Druckvorbereitung.
Gestaltung des Standardlayouts auf www.yaml.de
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 der Dokumentation wird beispielsweise das HTML-Element <em> in vier Varianten verwendet:
- <em>...</em> für einfache Hervorhebungen aus dem Fließtext
- <em class="mono">...</em> für Inline-Quellcode wie CSS-Eigenschaften, ID's oder Klassen
- <em class="file">...</em> zur Hervorhebung von Dateien
- <em class="directory">...</em> zur Hervorhebung von Verzeichnisse
em,i { font-style:italic; }
em.mono {
font-family: "Courier New", Courier, monospace;
font-style: normal;
padding: 0 0.3em 0 0.3em;
background: #f4f4f4;
border: 1px #ccc solid;
}
em.file {
font-family: "Courier New", Courier, 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: "Courier New", Courier, 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: "Courier New", Courier, 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;
}
Ich verwende für die Darstellung von Quellcode absichtlich nicht das Element pre denn dabei werden neben den geschützten Leerzeichen auch normale Leerzeichen dargestellt, was die Ausgabe unnötig verbreitert und im Layout mehr Schwierigkeiten verursacht, als es die Lesbarkeit erhöht.
