Das Homepage-Handbuch speziell für blutige Anfänger

Grundelemente einer Webseite - Listen

Grundsätzliches über Listen (Eigenschaften von 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
Holzkohle
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 - in etwa wie folgt:

Obst

2. Setzen Sie die Schreibmarke in diesen (einzeiligen Mini-) Absatz und klicken Sie nun in der Symbolleiste (bei Namo8 im Ribbonmenü 'Start' ) 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".

Abb1: Listeneigenschaften
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

>>>>>>>>>>>>

Alles markieren und dann
'klick'
in Liste umwandeln

>>>>>>>>>>>>

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".

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)
Äpfel Birnen Pflaumen	Äpfel Birnen Pflaumen	Äpfel Birnen Pflaumen

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"> <li>Äpfel</li> <li>Birnen</li> <li>Pflaumen</li> </ul>	<ul type="square"> <li>Äpfel</li> <li>Birnen</li> <li>Pflaumen</li> </ul>	<ul type="circle"> <li>Äpfel</li> <li>Birnen</li> <li>Pflaumen</li> </ul>

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,....
Äpfel Birnen Pflaumen Kirschen	Äpfel Birnen Pflaumen Kirschen	Äpfel Birnen Pflaumen Kirschen

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"> <li>Äpfel</li> <li>Birnen</li> <li>Pflaumen</li> <li>Kirschen</li> </ol>	<ol type="A"> <li>Äpfel</li> <li>Birnen</li> <li>Pflaumen</li> <li>Kirschen</li> </ol>	<ol type="I"> <li>Äpfel</li> <li>Birnen</li> <li>Pflaumen</li> <li>Kirschen</li> </ol>

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
Äpfel Birnen Pflaumen Kirschen	Äpfel Birnen Pflaumen Kirschen	Äpfel Birnen Pflaumen Kirschen

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-Attribut 'style'.

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.

Namo WebEditor erzeugt folgenden HTML-Code für Unterlisten (verschachtelte Listen):

<ul>
    <li>Listenpunkt</li>
    <li>Listenpunkt</li>
    <ul>
        <li>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>

Dem fortgeschrittenen HTML-Kenner wird auffallen, dass diese Schreibweise nicht ganz der Logik von W3C folgt. Die üblichen Browser kommen aber alle damit zurecht.

Damit haben wir alles Grundsätzliche über Listen aufgelistet.
Als nächstes befassen wir uns mit der Verwendung von Tabellen
Und dann sind wir mit den Grundelementen durch und kommen zu den speziellen Elementen

Seitenanfang || www.BuntesWeb.de - Startseite | Stichwortverzeichnis | Impressum

Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.