Sitemap 1
    
 HomeDiverses • SiteMap Demo  QuellCode 

 Sitemap 01

Die Sitemap kann als Navigationshilfe, als Startdatei für den "No-Frames-Bereich" und als Crowler-Hilfe für Suchmaschinen eingesetzt werden. Dort können Sie ihr Angebot außerdem ausführlicher beschreiben.
Sitemap als einfache Liste <li>

UPDATE  06.02.2011  generelle Überarbeitung + durch Gruppierung der CSS-Angaben vereinfacht

  Aufzählung als Sitemap - Demo Liste mit und ohne eigenen Grafiken 

Eine Sitemap gehört bei einer umfangreichen Web-Präsenz schon beinahe zum guten Ton. Neben der Annehmlichkeit für den Besucher erfüllt sie, geschickt eingesetzt, ganz nebenbei auch andere Funktionen.

 Beschreibung
Eine Sitemap kann den Inhalt treffender beschreiben als ein Menüpunkt. Schließlich haben sie in der Map etwas mehr Raum zur Verfügung.

 Navigationshilfe
Eine Sitemap kann als zweite Navigationshilfe mittels Textlinks entworfen werden und sollte jederzeit abrufbar sein.

 Gruppierung
Eine Sitemap könnte die Seitenthemen in alphabetischer Reihenfolge oder nach Themengruppen aufzeigen. So erfüllt sie nebenher die Aufgabe eines Index.

 Crowlerhilfe
Eine Sitemap sollte auch als Crowlerhilfe für Robots (Suchmaschinen) verwendet werden. Besonders bei Framesets! In den Noframesbereich eingebunden finden Roboter beim Indizieren der Seite auch die Unterseiten.


   Einfache Sitemap als Liste

Hier werden die beschreibenden Textlinks einfach als Listenelemente dargestellt. Die Links sind zusätzlich auch als Listenelemente notiert. Die Formatierung können Sie mit CSS festlegen.

  Beispiel der Ausgabe - Map01  
Rubriken Hauptmenü Rubrik HTML


Zuerst die Texte als Aufzählung formatieren ...
<ul>
<li>Frames Beispiele</li>
<li>JavaScript Beispiele</li>
...
</ul>
...dann als Link notieren !
<ul>
<li><a href="xyz.htm">Frames Beispiele</a></li>
<li><a href="xyz.htm">JavaScript Beispiele</a></li>
...
</ul>



   Gestaltung / Formatierung mit CSS

Den Listelementen und Links können Sie CSS-Formatierungen zuordnen! Durch die geschikte Zuordnung einer CSS-Klasse für die Aufzählungsliste (<ul>) kann man CSS-Formatierungen zuordnen, die dann für alle Unterelemente dieser Aufzählung gültig sind. Also für alle <li>- und <a>-Elemente.

Liste im Body-Bereich
<ul class="map01">
<li><a href="xyz.htm">erste Schritte mit HTML</a></li>
<li><a href="xyz.htm">Notation für Sonderzeichen</a></li>
...
</ul>
CSS-Notierungen im Head-Bereich

Auf die im Quellcode rot markierte Zeile gehe ich im nächsten Abatz näher ein.
<style type="text/css">
<!--

ul.map01{
margin: 10px 0px 10px 20px;
}

ul.map01 li{
list-style-type:disk;
padding: 0px 0px 0px 0px;
margin: 2px 0px 0px 0px;
}

ul.map01 a, ul.map01 a:visited{
color: #3F3F3F;
text-decoration: none;
text-transform: none;
font-size: 11px;
font-family: Verdana, sans-serif;
}

ul.map01 a:hover{
color: #FF7F7F;
text-decoration: none;
text-transform: none;
font-size: 11px;
font-family: Verdana, sans-serif;
}

-->
</style>


   andere Aufzählungszeichen

Durch eine Änderung des Wertes für "list-style-type" können Sie ein anders Symbol festlegen. Default-Wert ist in der Regel 'disk'. Die gängigen Browser akzeptieren:

none, circle, square, disc, decimal, lower-roman, upper-roman

Bis auf den IE und Opera aber auch:

ower-greek, decimal-leading-zero, armenian, georgian

Tragen Sie den entsprechenden Wert ein um das Aufzählungszeichen zu verändern.
list-style-type:[Wert];
  list-style-type: square 

  list-style-type: circle 


   Eigene Aufzählungszeichen  

Wenn Sie nun die in HTML zur Verfügung stehenden Pünktchen, Kreise, Vierecke, usw. vor den Listelementen durch eigene Symbole ersetzen möchten, ist dazu im CSS-Code nur eine kleine Änderung notwendig. Demos und Quellcode finden Sie auf separaten Beispielseiten zur Sitemap 01:

Sitemap 01 - Beispiel01, eigene grafische Symbole in der Aufzählung

Sitemap 01 - Beispiel02, Eigene grafische Symbole in der Aufzählung

Sitemap 01 - Beispiel03, Eigene grafische Symbole in der Aufzählung


  Demo: Eigene Grafiken 



Die verwendeten Grafiken habe ich selbst erstellt. Sie können die Grafiken durch Rechtsklick herunterladen und frei verwenden.

Mini-Grafiken für eine Site-Map finden sie in meiner "MINI_IMAGE-BOX" im Untermenü 'Site-Map'. und 'Aufzählungszeichen'. Insgesamt werden dort ca. 7000 winzige Bildchen für den Homepagebau zum Download angeboten.

Ein Projekt der Web-Toolbox  MINI-IMAGE-BOX







Sitemap als Crawlerhilfe für Suchmaschinen

Sitemap 02 - Kennzeichnung der Ebenen durch Einrückung

Sitemap 03 - detailierte Sitemap mit DIV-Containern

Sitemap 04 - Quicknavi als Sitemap (Grafiken)

Sitemap 05 - Sitemap als verschachtelte Aufzählungsliste

Zur allgemeinen Erklärung von CSS-formatierten Listen lesen sie mehr in der Rubrik CSS unter dem Menüpunkt 'eigene Aufzählungszeichen'.

Aufzählungen / Listen mit CSS formatieren (eigene Grafiken)





26.11.2004   

NACH OBEN