Anzeige
Tutorialbeschreibung

Erweiterte Features von HTML und CSS Teil2 - Automatische Überschriftennummerierung

Erweiterte Features von HTML und CSS Teil2 - Automatische Überschriftennummerierung

Einige Aspekte von HTML und CSS wurden in Kapitel 4 bewusst nicht behandelt, weil es sich um problembehaftete oder speziellere Features handelt. In diesem Kapitel gehen wir gesondert darauf ein.


Das nun folgende Tutorial ist ein Auszug aus dem Buch: Professionelle Websites von Stefan Münz.
Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von Pearson Education.


2 Automatische Überschriftennummerierung


Insider betonen immer wieder, dass HTML und CSS keine Programmiersprachen seien, sondern Auszeichnungs- bzw. Beschreibungssprachen. Das ist korrekt. Leider hat das Fehlen von operativen Möglichkeiten aber auch Nachteile. Einer davon ist das Problem, einen Nummerierungsalgorithmus etwa für Überschriften anzugeben. Das Problem wurde vom W3-Konsortium registriert und so steht seit CSS2.0 eine Funktionalität zur Verfügung, die es erlaubt, eine individuelle Überschriftennummerierung zu »programmieren «. Doch leider hapert es mit der Browser- Unterstützung. Weder der MS Internet Explorer 6.0 noch der sonst so standardstarke Firefox- Browser 1.0 unterstützen das entsprechende Feature. Lediglich Opera ist dazu in der Lage.

Aus diesem Grund werden wir zwei Vorgangsweisen beschreiben, die sich ergänzen. Zunächst werden wir die in CSS vorgesehene Methode behandeln. Für andere Browser stellen wir anschließend eine Lösung vor, die ein wenig JavasScript-Programmierung erfordert.

2.1 Überschriftennummerierung mit CSS


Ein Beispieldokument enthält diverse Überschriften 1., 2. und 3. Ordnung. Diese sollen nummeriert werden. Der HTML-Quelltext lautet:

Listing 6.5: HTML-Dokument mit Überschriften

Bilder


Die Überschriften sollen in der Form 1, 1.1, 1.1.1 usw. nummeriert werden. Dazu wird im Beispiel im HTML-Dateikopf eine CSS-Datei namens h-styles.css eingebunden. Diese Datei hat folgenden Inhalt:

Listing 6.6: CSS-Datei mit Formatdefinitionen für Überschriftennummerierung
Bilder


Bilder

Abbildung 6.6: Mit CSS nummerierte Überschriften im Opera-Browser

Die Überschriftennummerierung benutzt das Pseudoelement :before, welches es erlaubt, einen festlegbaren Inhalt vor einem Element zu notieren. Durch die Selektoren h1:before, h2:before und h3:before wird für Überschriften 1., 2. und 3. Ordnung jeweils festgelegt, was vor einer solchen Überschrift automatisch eingefügt werden soll. Der Inhalt dessen, was einem Element automatisch vorangestellt werden soll, wird mithilfe der CSS-Eigenschaft content definiert. Das kann ein bestimmter, in Anführungszeichen zu setzender Text sein, wie z.B. content:"Abschnitt: ". In unserem Beispiel wird jedoch erst eine Funktion namens counter() notiert. Diese Funktion gibt den Wert einer Zählervariable aus. Bei h1-Überschriften hat die Zählervariable in unserem Beispiel den Namen level_1, bei h2- Überschriften level_2 und bei h3-Überschriften level_3.

Der Wert, welcher content: zugewiesen wird, wird jedoch aus zwei oder mehreren Teilen zusammengesetzt. Die Teile werden jeweils durch Leerzeichen getrennt. Bei h1-Überschriften folgt hinter dem aktuellen Zählerstand der Zählervariable level_1, ermittelt durch die Funktion counter(), einfach ein Leerzeichen (" "). Es hat die Aufgabe, die Überschriftennummer vom Überschriftentext zu trennen.
Bei h2- und h3-Überschriften ist die Zusammensetzung des Werts für content: komplexer. Bei h2-Überschriften muss ja der aktuelle h1-Zähler mit ausgegeben werden, und bei h3- Überschriften der aktuelle h1-Zähler und der aktuelle h2-Zähler. Zwischen den Zahlen soll jeweils ein Punkt stehen. Auch dieser muss explizit angegeben werden (".").
Nachdem eine Überschrift ihre korrekte Nummerierung erhalten hat, müssen jedoch noch die Zählervariablen verwaltet werden. Für diese eigentlich typischen Programmieranweisungen stellt CSS die Eigenschaften counter-increment (Zählervariable um 1 erhöhen) und counter-reset (Zähler auf 1 zurücksetzen) zur Verfügung.

Bei allen drei Überschriftentypen muss die jeweilige Zählervariable, nachdem eine Überschrift dieses Typs ihre aktuelle Nummerierung erhalten hat, um 1 erhöht werden. So erhöht counter-increment:level_1 den Wert der Zählervariablen level_1 für h1-Überschriften. Der Eigenschaft counter-increment wird also einfach die gewünschte Zählervariable zugewiesen.
Auf gleiche Weise funktioniert die Eigenschaft counter-reset. Die zugewiesene Zählervariable wird auf 1 zurückgesetzt. Dies ist wichtig, damit eine Überschriftenfolge wie h1 – h2 – h2 – h1 – h2 zu 1 – 1.1 – 1.2 – 2 – 2.1 führt und nicht zu 1 – 1.1 – 1.2 – 2 – 2.3.

2.2 Überschriftennummerierung mit JavaScript/DOM

Um die automatische Überschriftennummerierung auch für andere Browser zu ermöglichen, erstellen wir folgendes JavaScript in einer separaten Datei, die wir im Beispiel unter dem Namen enumerate.js abspeichern. Diese Datei erhält folgenden Inhalt:

Listing 6.7: Script mit Funktion enumerate() für Überschriftennummerierung von h1, h2, h3
Bilder

Das Script besteht aus einer einzigen Funktion namens enumerate(). Auf Einzelheiten der Programmierung gehen wir in diesem Kapitel nicht näher ein. Wichtig zu wissen ist an dieser Stelle nur, was die Funktion leistet. So wie hier notiert, wertet sie alle h1-, h2- und h3-Elemente eines HTML-Dokuments aus und setzt ihrem Elementinhalt die Nummerierung voran. Dabei erwartet die Funktion beim Aufruf eine Zahl. Diese Zahl interpretiert sie als die Basiszahl für die erste h1- berschrift im Dokument. Wenn Sie der Funktion also beispielsweise den Wert 4 übergeben, nummeriert sie 4, 4.1, 4.1.1 usw.
Die Funktion ist so geschrieben, dass Opera-Browser sie nicht bis zum Ende durchlaufen. Der Grund ist, dass Opera wie im vorherigen Abschnitt gesehen bereits die Nummerierung via CSS umsetzt. Falls Sie keine CSS-basierte Nummerierung verwenden möchten, sondern nur das hier vorgestellte JavaScript, dann müssen Sie in der Funktion folgende Zeile löschen:

if(window.opera) return;

Nun muss die Funktion noch im HTML-Dokument aufgerufen werden. Der vollständige Quelltext des Beispieldokuments lautet:

Listing 6.8: HTML-Dokument mit automatisch nummerierten Überschriften
Bilder


Bilder

Abbildung 6.7: Automatische Überschriftennummerierung dank JavaScript

Im Kopf des HTML-Dokuments werden sowohl die CSS-Datei h-styles.css (zu deren Inhalt siehe Listing 6.6) als auch die externe Scriptdatei enumerate.js eingebunden. Letztere enthält die weiter oben vorgestellte Funktion enumerate(). Eingebunden wird das Script über ein script-Element, das mit Anfangs- und End-Tag notiert werden muss. Im src-Attribut wird die Scriptdatei als URI angegeben.
Damit ist das Script mit der Nummerierungsfunktion zwar eingebunden, aber die Nummerierungsfunktion muss noch explizit aufgerufen werden. Das darf aber erst geschehen, nachdem der Browser alle Überschriften des Dokuments eingelesen hat. Der Funktionsaufruf erfolgt deshalb im einleitenden <body>-Tag mithilfe des Event-Handlers onLoad=. Dieser Event wird ausgelöst, wenn der Browser das Dokument vollständig eingelesen hat. Die Überschriften werden zu diesem Zeitpunkt bereits angezeigt, und zwar ohne Nummerierung. Die Funktion enumerate() erledigt ihre Arbeit jedoch blitzschnell und in den meisten Fällen wird ein Anwender gar nicht merken, dass die Überschriften zunächst einen Moment lang nicht nummeriert dargestellt werden.
Die Funktion enumerate() wird im Beispiel mit dem Wert 1 aufgerufen. Das bedeutet, die Zählung für h1-Überschriften beginnt bei 1.
Die Nummerierung via JavaScript funktioniert nur, wenn ein Anwender JavaScript in seinem Browser aktiviert hat, und wenn der Browser DOM-fähiges JavaScript interpretiert. Damit keine JavaScript-Fehler auftreten, verhindert die Funktion enumerate(), dass unfähige Browser sie vollständig ausführen. Alle heute verbreiteten und webtauglichen Browser sollten die Funktion jedoch korrekt ausführen.


 

Das Tutorial ist ein Auszug aus dem Buch von Stefan Münz:

Professionelle Websites - Programmierung, Design und Administration von Webseiten
Addison-Wesley, 2. Auflage, 1136 Seiten, gebunden, komplett in Farbe, mit DVD

Die Veröffentlichung des Kapitels erfolgt mit freundlicher Genehmigung von
Pearson Education.

Mehr Informationen zu diesem wunderbaren Fachbuch für Webmaster und Webentwickler
gibt es hier: Professionelle Websites

Alle Teile des Buches: 

1 Intro
2 HTML und CSS
3 Dynamische Seiten mit JavaScript/DOM
4 Die Server-Seite
5 PHP und MySQL
6 XML
7 Betrieb von Websites
8 Referenz
Bilder

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von MaoMao
  • 09.01.2013 - 17:09

Gute Tutorial leicht erklärt.

Portrait von TTJanis
  • 21.03.2010 - 22:20

sehr ausführlich beschrieben

Portrait von williamo
  • 21.08.2009 - 15:00

fand ich nicht so toll

Portrait von Flip_p
  • 23.06.2009 - 12:52

danke! ja, ich bin einsteiger, und es ist gut erklärt!

Portrait von skyflight1981
  • 22.04.2008 - 01:03

Schließe mich meinem Vorredner an!

Portrait von risinhigh
  • 20.04.2008 - 17:43

Wie alle Artikel von Stefan Münz gut geschrieben.

x
×
×