![]() |
Neuerungen der Layout-Richtlinien 2006-09-05 |
|
| |
Das neue Stylesheet ist http://src.selfhtml.org/selfhtml-aktuell-2006-09-05.css. Das Datum »2006-09-05« in diesem Dateinamen bezeichnet die Version der
neuen Layout-Richtlinien. Ein Dokument sollte immer konform zu der Version sein, auf die es durch das Stylesheet verweist. Eine neue Version der Richtlinien bringt dann ein anders lautendes Stylesheet mit sich. Der Verweis auf das Stylesheet ist damit gleichzeitig eine Meta-Angabe zu den verwendeten Layout-Richtlinien.
Alle Dokumente sollen mit der Zeichenkodierung ISO-8859-1 (Latin-1) gespeichert werden. Diese Zeichenkodierung wird auch ausgenutzt, das heißt, deutsche Umlaute, ß sowie Buchstaben mit französischen Accents werden direkt im Quellcode notiert. Die überflüssige Maskierung durch Entities (ä für ä, ß für ß usw.) entfällt.
bodyAlle Dokumente haben die Klassen selfhtml-aktuell für das body-Element und weiterhin eine Klasse ihrem Seitentyp (selfhtml-aktuell-kapitelseite oder selfhtml-aktuell-inhaltsseite). Dies dient der unterschiedlichen Formatierung im Stylesheet.
Die wichtigen funktionalen Bereiche haben sprechende IDs und Klassen oder sind anderweitig einheitlich, eindeutig und wiedererkennbar ausgezeichnet. Siehe
Aufbau des SELFHTML-Layouts.
Die Kopftabelle bleibt als Layouttabelle erhalten, der Code wurde aber konsequent aufgeräumt und enthält keine Angaben zur Präsentation wie bgcolor, align, valign oder nowrap (lediglich cellpadding und cellspacing). Mehrere Layouttabellen im Kopf wurden zu einer verschmolzen. Das Schema der Tabelle ist:
| kopf-navigation | |
| kopf-logo | kopf-titel |
| kopf-links | kopf-haupt |
| kopf-down-link | |
Die Bezeichner sind die IDs der jeweiligen td-Elemente.
Mehrspaltigkeit in der kopf-haupt-Tabellenzelle, wie z.B. auf den Seitentypen Portal- und Startseiten vorkommen, wird vorerst weiterhin mit blinden Layouttabellen gelöst.
h1 auszeichnenDer Dokumenttitel steht immer in einem h1-Element in der kopf-haupt-Tabellenzelle ohne eine Klasse.
Der graue Navigationsbalken zwischen zwei Abschnitten wird nicht mehr mit einer Layouttabelle gelöst, sondern ist ein p-Absatz mit der Klasse abschnitttrenner (ja, drei »t«, mir fiel kein besserer Name ein).
Datentabellen im klassischen SELF-Look bekommen die Klasse reftable. Sie sollten ohne bgcolor, align, valign, nowrap usw. auskommen, da diese Formatierung zentral erfolgt. Kopfzellen werden mit th ausgezeichnet. (Einige Artikel verwenden besondere Tabellen, z.B.
Live-Connect und
Druck-Layout. Diese verbleiben erst einmal. Die entsprechenden Styles wurden noch nicht ins zentrale Stylesheet aufgenommen.)
Die Layouttabelle im Seitenfuß wurde aufgelöst, die Teilbereiche sind nun p-Absätze mit id="fuss-up-link", id="fuss-navigation" sowie dem Impressums-Absatz <p><a name="bottom">. Die Sequenznavigation im Fuß (Sprung zur vorigen und nächsten Seite) ist ein div mit id="sequenznavigation" und zwei p-Absätzen darin. Die Formatierung erfolgt komplett mit CSS.
Der Code zur Einbindung von Hyperlinks mit Symbolgrafiken wurde vereinheitlicht. Es sind keine b-Elemente mehr nötig und es gibt bei den Symbolgrafiken kein border-Attribut mehr. Das allgemeine Schema ist:
<img src="http://src.selfhtml.org/NAME.gif" width="BREITE" height="HÖHE" alt="ALTERNATIVTEXT"> <a href="ADRESSE">LINKTEXT</a>
target-Attribut nur noch bei Popup-SeitenObwohl die alten Layoutrichtlinien es nicht vorsahen, wurden bisher externe Links vereinzelt mit target="_top" oder gar target="_blank" versehen. Diese target-Attribute fallen nun weg, sodass nur noch bei Links zu Popup-Seiten (»Anzeigebeispiel: So sieht's aus«) target="_blank" verwendet wird.
class="an" bei Ankern und class="Sh2" bei Überschriften fallen weg<a class="an"> bei Ankern fällt weg. Ebenso fällt class="Sh2" bei h2-Überschriften weg. Eine Zwischenüberschrift sieht nun so aus:
<h2><a name="ANKER">ÜBERSCHRIFT</a></h2>
pre auszeichnenGrößere Codepassagen, Datei-Listings, Programm-Ausgaben, Shell-Beispiele und andere Texte, die Monospace-Formatierung erfordern, werden mit einem einfachen pre-Element ausgezeichnet. Die Layouttabelle drumherum entfällt.
<pre> /* Code */ </pre>
Die Netscape-4-Anpassung font-size:13.4px im Stylesheet wird durch ein einfaches font-size:13px; ersetzt. Durch den Wegfall von Transitional-Markup bei den Layouttabellen (vor allem bgcolor und width) sehen diese bescheiden im Netscape aus.
Die Reihenfolge von Attributen im Start-Tag ist vorgegeben und sollte eingehalten werden. Es sind exakt die Codeschnipsel zu verwenden, die in den Layoutvorgaben und den Musterseiten beschrieben werden.
index.htmRelative Links mit index.htm sind redundant und sollen vermieden werden zugunsten von ./, ../, / und so weiter. Dies führt leider dazu, dass das Navigieren der lokalen Subversion-Projektkopie von SELFHTML aktuell nicht mehr wie früher funktioniert. Andererseits hat es auch noch nie korrekt funktioniert, da der tatsächliche Verzeichnisbaum nicht immer mit der URI-Struktur korrespondiert (z.B. /artikel/index.htm ist tatsächlich /artikel/dokumente/index.htm).
q statt cite auszeichnenInline-Zitate werden ab jetzt korrekt mit dem q-Element ausgezeichnet, nicht länger mit dem unangemessenem Element cite. (Eine entsprechende globale Ersetzung wurde aber noch nicht vorgenommen.)
code statt tt auszeichnenDas tt-Element wurde endgültig durch code ersetzt. (Dies ist keine Änderung gegenüber den alten Richtlinien, auch diese schrieben schon code vor. Es hielten sich aber viele Dokumente nicht daran.)
»Feature-Artikel« sowie »Tipps & Tricks« gibt es seit geraumer Zeit nicht mehr, anstelle wird nur noch der Begriff »Artikel« verwendet. Alle Hyperlinks (a- und auch link-Elemente) auf die Tipps & Tricks werden gestrichen.
Abstände mit <p> </p>, <br> oder auch zwischen oder am Ende von Blockelementen sollen zugunsten von CSS vermieden werden. Allgemein soll darauf beschränkt sein, zwischen Hyperlinks und zugehörigen Symbolgrafiken zu stehen. Zwischen den Links in der oberen und unteren Navigationsleiste stehen normale Leerzeichen.