 Sitemap 02
Hier werden CSS-formatierte HTML-Anweisungen für Aufzählungen benutzt. Der Trick besteht darin, einfache Listen zu verschachteln. Die Einrückung der Aufzählungspunkte sorgt für Übersichtlichkeit.
Zeitgemäß: Verschachtelte Listen als Sitemap
Dazu werden übliche HTML-Anweisungen für Aufzählungen benutzt. Der Trick besteht darin, Listen zu verschachteln. Die Einrückung der Aufzählungspunkte ist hier sehr nützlich.
Eine strukturierte, navigierbare Sitemap, natürlich mit CSS formatiert. Navigierbar bedeutet hier (was man ohnehin von einer Sitemap erwartet), dass die Auflistung als Navigation genutzt werden kann und nicht nur als bloße 'map' (Übersichtstafel) der Seiten dient.
|
Das Beispiel der Seite Sitemap 01 ...
|
(hier ohne CSS-zugewiesene Grafiken)
|
... wird mit wenig Aufwand erweitert! Dazu werden die Links zu den Unterseiten (die den Links ihres Menüs entsprechen können) als separate (Unter)Liste in die erste Liste eingefügt. Diese 2. verschachtelte Liste erhält eine eigene, von der 1. unterschiedliche, CSS-Formatierung. So kann man die Struktur und den Aufbau der Webseite schnell erfassen. Die vorgegebene Einrückung leistet hier einen guten Dienst.
Es werden 2 CSS-Klassen für Listelemente definiert, die unterschiedliche eigene Listsymbole haben. Auch die Textlinks in den beiden Listen können eigene CSS-Unterklassen für eine farbliche Unterscheidung besitzen (so wie hier).
Wenn man dann der inneren der beiden verschachtelten Listen noch einen oberen und unteren Abstand zuordnet (padding), ist die Sitemap als Liste in der Gliederung noch deutlicher.
(Den Quellcode entnehmen sie bitte der Textdatei - Link oben im Kopfbereich)
Wir legen noch eins drauf ...
... und stecken eine 3. Liste in die bereits verschachtelte Liste.
Natürlich, auch eine 4. Liste wäre möglich, wenn ihre Seitenbreite das zulässt.
Letzter Feinschliff
Und wenn sie ihre Kreativität nicht zügeln können, dürfen sie das alles noch mit einer Hintergrundgrafik hinterlegen. Warum nicht? Hier habe ich zu allem Überflüss die ganze Angelegenheit in einer Tabelle untergebracht und den Rand mit einer gepunkteten Linie versehen.
style="border:1px dotted #8F8F8F; background:url(bg-sitemap.gif);"
Verwendete Images zum Download:
  
und einige zusätzliche
          
Mini-Images für eine Site-Map finden sie in meiner "MINI_IMAGE-BOX" im Untermenü 'Site-Map'. Insgesamt werden dort ca 7000 winzige Bildchen für den Homepagebau zum Download angeboten.  MINI-IMAGE-BOX
|
|
 Sitemap als Crawlerhilfe
Sitemap 01
|
HOME
Quellcode 
ZURÜCK