Das Homepage-Handbuch speziell für blutige Anfänger
Grundelemente einer Webseite - Die Liste
Grundsätzliches über Listen
Listen sorgen für Ordnung in einer Aufzählung. Im Folgenden gleich mal ein Beispiel an Hand einer typischen, sommerlichen Einkaufsliste
- Obst
- Würstchen
- Kartoffelsalat
- Majo
- Schaschliksoße
- Grillanzünder
Typisch für eine HTML-Liste sind die schwarzen Aufzählungspunkte und die Einrückung der Liste.
Liste erzeugen
Mit Namo WebEditor erzeugt man eine Liste am besten wie folgt:
1. Schreiben Sie den ersten Listenpunkt wie einen eigenen Absatz so:
Obst
2. Setzen Sie die Schreibmarke in diesen (Mini-) Absatz und klicken Sie nun in der Symbolleiste auf das folgende Symmbol: : 
, oder drücken sie die Tastenkombination [Strg]+[9].
Der Absatz verwandelt sich in eine Liste. Etwa wie folgt:
- Obst
Alternativ dazu können Sie auch einen Rechtsklick auf den Absatz ausführen und wählen aus dem Kontextmenü "Listeneigenschaften". Dort ändern Sie dann den Listentyp (kein) in "Aufzählung".
Abb 1: Absatz in Liste wandeln über die Listeneigenschaften
Wie Sie in der Abbildung 1 (Listeneigenschaften) schon sehen können, gibt es noch andere Listentypen mit alternativen Aufzählungs-Zeichen. Aber darauf kommen wir später.
Ich erzähle Ihnen lieber erst, wie man vorgehen muss, um die Liste zu bearbeiten, bzw. zu erweitern. Wenn Sie innerhalb der Liste die Eingabetaste betätigen, dann wird eine neue Listenzeile erzeugt. So können Sie die Liste fortsetzen.
- Obst
-
-
-
Alternativ zu dieser Vorgehensweise können Sie die ganze Liste auch erstmal untereinander schreiben (also immer die Eingabetaste nach jedem Eintrag drücken) und zum Schluss markieren Sie die ganze Auflistung und wandeln sie in eine Liste um. Etwa so:
|
Obst Würstchen Kartoffeln Majo Schaschliksoße Grillanzünder |
>>>>>>>>>>>> |
|
Im HTML-Code sieht eine solche Aufzählungsliste etwa so aus:
<ul>
<li>Obst</li>
<li>Würstchen</li>
<li>Kartoffeln</li>
</ul>
Listeneigenschaften
Rufen wir noch einmal die Listeneigenschaften auf. Markieren sie dazu die komplette Liste und führen Sie dann einen Rechtsklick darauf aus. Dann wählen Sie aus dem Kontextmenü: "Listeneigenschaften".
Abhängig vom Listentyp (Aufzählung, Numeriert oder Bildliste) kann man einen Listenstil auswählen. Dies alles sind Optionen für den schwarzen Listenpunkt, der standardmäßig vor jedes Listenelement gesetzt wird.
Listentyp 'Aufzählung'
Bei der Aufzählung verwendet man Listenpunkte. Der Standardlistenpunkt erscheint, wenn man keinen speziellen Listentyp und keinen Listenstil auswählt. Es ist ein dicker schwarzer Punkt. Alternativ dazu können Sie wählen:
|
Punkt |
Quadrat |
Kreis (keine Füllung) |
|
|
|
Mit Namo WebEditor wählen Sie den Listentyp sowie den Listenstil in den Listeneigenschaften im Dropdownmenü "Stil" aus. Die HTML-Entsprechung für die Aufzählungsliste mit den 3 Listenstilen ist wie folgt:
|
Punkt |
Quadrat |
Kreis (keine Füllung) |
|
<ul type="disc"> |
<ul type="square"> |
<ul type="circle"> |
Listentyp 'Zahl' (oder 'Nummerierung')
Mit Namo WebEditor wählt man in den Listeneigenschaften den Listentyp "Zahl" aus. Dann hat man die Auswahl zwischen 5 Stilen. Drei davon will ich hier aufführen, die anderen probieren Sie einfach selber mal aus.
|
1,2,3,4... |
A,B,C,D,.... |
I,II,III,IV,.... |
|
|
|
Wie Sie sehen, werden hier nicht einfach nur Listenpunkte verwendet. Die Elemente werden durchnummeriert. Alternativ können auch Große (oder kleine) Buchstaben verwendet werden. Und römische Ziffern stehen ebenfalls zur Verfügung.
Im Folgenden wieder der HTML-Code dieses Listentyps:
|
1,2,3,4... |
A,B,C,D,.... |
I,II,III,IV,.... |
|
<ol type="1"> |
<ol type="A"> |
<ol type="I"> |
Beliebige Listenpunkte mittels Grafik
Mit Namo WebEditor wählt man in den Listeneigenschaften den Listentyp "Bildliste" aus. Dann kann man sich eine beliebige Grafik aussuchen, die man als Listenpunkt verwenden will. Die Vorgehensweise entspricht dann der vom Einfügen von Bildern. D.h. nach Möglichkeit sollte sich die benötigte Grafik bereits in Ihrem Homepageordner befinden. Im Folgenden 3 Beispiele:
|
Beispiel 1 |
Beispiel 2 |
Beispiel 3 |
|
|
|
Wie Sie sehen, werden hier im Prinzip wieder nur Listenpunkte verwendet. Aber Sie können den Punkt durch eine Grafik ersetzen. Somit haben Sie auch keine weitere Wahl zwischen Listenstilen. Sie wählen nur die gewünschte Grafik aus.
Diesen Effekt realisiert Namo WebEditor mittels CSS. Weitere Eigenschaften der Liste können ebenfalls mittels CSS verändert werden. Im Rahmen des Anfängerkurses möchte ich darauf aber noch nicht eingehen.
Unter-Punkte in einer Liste bilden
Angenommen Sie wollen zu einem Listenpunkt einige Unterpunkte erzeugen, so wie im folgenden Beispiel.
- Obst
- Äpfel
- Birnen
- Gemüse
- Erbsen
- Bohnen
Dazu erzeugen Sie zunächst eine ganz normale Liste
- Obst
- Äpfel
- Birnen
- Gemüse
- Erbsen
- Bohnen
Dann markieren Sie die Listeneinträge, die Sie zu Unterlistenpunkten machen wollen
- Obst
- Äpfel
- Birnen
- Gemüse
- Erbsen
- Bohnen
Und nun klicken Sie in der Symbolleiste auf 
(Einzug vergrößern) oder wählen Sie aus dem Hauptmenü: Format - Einzug vergößern
- Obst
- Äpfel
- Birnen
- Gemüse
- Erbsen
- Bohnen
Wiederholen Sie das ggf. bis alle gewünschten Unterpunkte erzeugt sind. Übrigens kann das auch noch weitergehen:
- Listenpunkt
- Listenpunkt
- Unterpunkt
- Unter-Unterpunkt
- Unter-Unter-Unterpunkt....
- Und immer so weiter...
Sie müssen nur immer wieder den Einzug vergrößern. Und umgekehrt können Sie mit 
den Einzug auch wieder verkleinern. Jeder Listenpunkt kann einzeln beliebig eingestellt werden und hängt nicht von den benachbarten Listenpunkten ab.
Im HTML-Code sieht eine Unterliste aus wie eine Liste in der Liste:
<ul>
<li>Listenpunkt</li>
<li>Listenpunkt</li>
<ul>
<>Unterpunkt</li>
<ul>
<li>Unter-Unterpunkt</li>
<ul>
<li>Unter-Unter-Unterpunkt....</li>
<ul>
<li>Und immer so weiter...</li>
</ul>
</ul>
</ul>
</ul>
</ul>
Genug gelistet. Jetzt wird's 'tabellarisch'...
