Responsive Webseiten-Vorlage

Startseite > Aufzählungslisten

Aufzählungslisten erstellen

• ⇓ Ungeordnete (unsortierte) Aufzählungsliste
• ⇓ Geordnete (sortierte) Aufzählungsliste
• ⇓ Verschachtelte geordnete Aufzählungsliste
• ⇓ Hierarchische Nummerierung ab 2. Listenebene
• ⇓ Navigations-Linkliste in langen Seiten mit viel Inhalt

Ungeordnete (unsortierte) Aufzählungsliste

Für ungeordnete Aufzählungslisten gibt es das HTML-Element ul. Als Aufzählungszeichen vor den Listenelementen li wird standardmäßig ein kleiner gefüllter Kreis angezeigt, der aber je nach Browser leicht verschieden aussehen kann.

(Beispiel-Liste:) Wer eine Website selbst erstellen will, braucht ...

• ein Thema, über das er schreiben, oder Bilder, die er zeigen, oder Erzeugnisse, die er darstellen will
• die Fähigkeit, sich schriftlich auszudrücken (das kann man üben)
• die Bereitschaft, sich Grundkenntnisse in Webtechniken wie zB HTML und CSS anzueignen (wenn man Kenntnisse schon hat: umso besser)
• für die Webtechniken: Referenzen und Anleitungen im Netz, in denen er nachschlagen und weiter informieren kann, zB das SelfHTML-Wiki
• Rechner und Bildschirm, Netzanschluß, (mindestens) einen Browser, einen UTF8-fähigen Editor, ein (einfaches) Bildverwaltungsprogramm und ein FTP-Programm
• eine Layout-Vorlage wie diese mit Beispielseiten als Hilfestellung und Kopiermuster (muß ja nicht jeder das Rad neu erfinden ;-)

HTML-Quelltext:

<ul>
  <li>ein Thema, über ...</li>
  <li>die Fähigkeit ...</li>
  <li>die Bereitschaft ...</li>
</ul>
  

Geordnete (sortierte) Aufzählungsliste

Für geordnete Aufzählungslisten gibt es das HTML-Element ol. Die Aufzählungszeichen vor den Listenelementen li werden hinsichtlich Typ und Anfangswert über Attribute beim Element ol festgelegt (zugleich Beispiel-Liste für Kleinbuchstaben als Aufzählungszeichen):

1. Attribut type="a": als Aufzählungszeichen werden Kleinbuchstaben beginnend mit a verwendet. Das Attribut start ist hier funktionslos.
2. Attribut type="A": als Aufzählungszeichen werden Großbuchstaben beginnend mit A verwendet. Das Attribut start ist hier funktionslos.
3. Attribut type="1": als Aufzählungszeichen werden arabische Zahlen verwendet. Mit dem Attribut start="1" wird der Anfangswert bestimmt (üblicherweise 1).
4. Attribut type="I": als Aufzählungszeichen werden römische Zahlen verwendet. Mit dem Attribut start="1" wird der Anfangswert bestimmt (üblicherweise 1).

HTML-Quelltext:

<ol type="a">
  <li>Attribut ...</li>
  <li>Attribut ...</li>
</ol>
  

(Beispiel-Liste für arabische Zahlen als Aufzählungszeichen:) So erstellen Sie mit dem Editor SynWrite ein neues Projekt (beachten Sie, daß der Projektname erst im letzten Schritt vergeben wird):

1. die Projekt-Ansicht in der linken Seitenleiste anzeigen über (Hauptmenü:) Fenster -> Fenster -> Projektverwaltung
2. über die Schaltfläche Ordner hinzufügen (am oberen Rand der Projekt-Ansicht) Inhalte aus dem Dateisystem für das Projekt auswählen
3. über die Schaltfläche Projekt anpassen die Eigenschaften des Projekts festlegen (siehe Hilfedatei: Dialogfenster -> Projekt-Eigenschaften)
4. über die Schaltfläche Projekt speichern das neue Projekt speichern und dabei den Projektnamen festlegen nach dem Schema [Projektname].synw-proj

HTML-Quelltext:

<ol type="1" start="1">
  <li>die Projekt-Ansicht ...</li>
  <li>über die Schaltfläche ...</li>
</ol>
  

Verschachtelte geordnete Aufzählungsliste

Geordnete Aufzählungslisten (egal ob mit Buchstaben oder Zahlen als Aufzählungszeichen) können auch ineinander verschachtelt werden. Dazu wird innerhalb eines Listenelements li eine weitere Liste mit dem Element ol angelegt. Leider kann mit dem start-Attribut der inneren Liste kein hierarchisch richtiger Startwert (im Beispiel wäre 2.1 richtig gewesen) festgelegt werden. Daß ich als start-Wert hier 21 definiert habe, ist nur ein Notbehelf.

(Beispiel-Liste:) Bildverwaltungs-Programm XnView: Bilder speichern: Optionen für das JPG-Format:

1. über Datei -> Speichern unter ... den Dialog Bild speichern aufrufen
2. im Dialog-Fenster Bild speichern ...
   21. Verzeichnis (Speicherort) auswählen
   22. Dateinamen eintragen
   23. als Dateityp JPG auswählen
   24. auf die Schaltfläche Optionen klicken
3. unter Optionen -> Schreiben ...
   31. Progressiv und / oder Huffmann-Tabelle einschalten
   32. gewünschte Qualität festlegen
   33. Haken entfernen im Kästchen vor EXIF-Daten beibehalten
   34. Haken entfernen im Kästchen vor Eingebettete Miniaturansicht ...
4. (geänderte) Bilddatei unter neuem Namen Speichern

HTML-Quelltext:

<ol type="1" start="1">
  <li>über Datei -> Speichern ...</li>
  <li>im Dialog-Fenster Bild speichern ...
    <ol type="1" start="21">
      <li>Verzeichnis (Speicherort) ...</li>
      <li>Dateinamen eintragen</li>
      <li>als Dateityp JPG auswählen</li>
      <li>auf die Schaltfläche Optionen ...</li>
    </ol>
  </li>
  <li>unter Optionen -> Schreiben ...
    <ol type="1" start="31">
      <li>Progressiv und / oder Huffmann ...</li>
      <li>gewünschte Qualität festlegen</li>
      <li>Haken entfernen im Kästchen ...</li>
      <li>Haken entfernen im Kästchen ...</li>
    </ol>
  </li>
  <li>(geänderte) Bilddatei unter neuem ...</li>
</ol>
  

Hierarchische Nummerierung ab 2. Listenebene

Der Fehler aus dem vorhergehenden Beispiel (kein hierarchisch richtiger Startwert für die innere Liste möglich) läßt sich mit ein wenig Aufwand beheben: Meine CSS-Klasse zaehler für das HTML-Element ol schaltet die standardmäßigen Aufzählungszeichen aus, errechnet die hierarchisch richtigen Nummerierungswerte mit der CSS-Funktion counter() und zeigt sie als Pseudoelemente vor dem Inhalt des jeweiligen Listenelements an. Die Attribute type und start werden nicht benötigt. Für Sie als Nutzer reicht es aus, den Listen ol die Klasse zaehler zuzuweisen.

Zur besseren Übersicht zeige ich außerdem links neben den verschachtelten Listen jeweils eine gepunktete Linie an. Das kann bei längeren Listen (als hier im Beispiel) für Besucher ganz hilfreich sein.

(Beispiel-Liste:) Bildverwaltungs-Programm XnView: Bilder speichern: Optionen für das JPG-Format:

1. über Datei -> Speichern unter ... den Dialog Bild speichern aufrufen
2. im Dialog-Fenster Bild speichern ...
   1. Verzeichnis (Speicherort) auswählen
   2. Dateinamen eintragen
   3. als Dateityp JPG auswählen
   4. auf die Schaltfläche Optionen klicken
3. unter Optionen -> Schreiben ...
   1. Progressiv und / oder Huffmann-Tabelle einschalten
   2. gewünschte Qualität festlegen
   3. Haken entfernen im Kästchen vor EXIF-Daten beibehalten
   4. Haken entfernen im Kästchen vor Eingebettete Miniaturansicht ...
4. (geänderte) Bilddatei unter neuem Namen Speichern

HTML-Quelltext:

<ol class="zaehler">
  <li>über Datei -> Speichern ...</li>
  <li>im Dialog-Fenster Bild speichern ...
    <ol class="zaehler">
      <li>Verzeichnis (Speicherort) ...</li>
      <li>Dateinamen eintragen</li>
      <li>als Dateityp JPG auswählen</li>
      <li>auf die Schaltfläche Optionen ...</li>
    </ol>
  </li>
  <li>unter Optionen -> Schreiben ...
    <ol class="zaehler">
      <li>Progressiv und / oder Huffmann ...</li>
      <li>gewünschte Qualität festlegen</li>
      <li>Haken entfernen im Kästchen ...</li>
      <li>Haken entfernen im Kästchen ...</li>
    </ol>
  </li>
  <li>(geänderte) Bilddatei unter neuem ...</li>
</ol>
  

CSS-Quelltext:

article ol.zaehler {list-style: none; ...}
article ol.zaehler > li::before {margin: ...}
article ol.zaehler li ol {list-style: none; ...}
article ol.zaehler ol li::before {margin: ...}
  

Navigations-Linkliste in langen Seiten mit viel Inhalt

HTML-Quelltext:

<ul class="links" id="a0">
  <li>⇓ <a title="zum Abschnitt 1" href="#a1">Linktext 1</a></li>
  <li>⇓ <a title="zum Abschnitt 2" href="#a2">Linktext 2</a></li>
</ul>
  

CSS-Quelltext:

article ul.links {width:100%; margin:...; list-style:none; ...}
article ul.links li {font-size:.8em; line-height:1.25em; ...}
article ul.links li a {font-weight:bold;}