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 verschachtele Aufzählungsliste <ul> <li>
NEU 07.02.2011 CSS-Formatierungen gruppiert, Browser-Unterschiede umgangen
Aufzählungsliste mit eigenen Symbolen
Eine verschachtelte Aufzählungsliste als Sitemap. Hier wird also eine Liste innerhalb einer anderen Liste notiert. Wenn Sie die üblichen Aufzählungszeichen vor den Listelementen durch eigene Symbole ersetzen möchten, reichen dazu wenige Zeilen CSS-Code.
Innerhalb der ersten Aufzählung wurde eine zweite eingebettet. Das nennt man eine verschachtelte Aufzählung. Für beide habe ich unterschiedliche CSS-Anweisungen festgelegt. Die Formatierung der Textlinks und das Symbol des Aufzählungszeichens unterscheiden sich. Die CSS-Anweisungen werden mit dem 'class-Attribut' zugewiesen.
Die beiden verwendeten Grafiken für Ebene 1 und 2:
Die verwendeten Grafiken (hier vergrößert dargestellt) können sie durch Rechtsklick herunterladen und dürfen frei verwendet werden. Weitere Grafiken finden sie in meiner Mini-Image-Box.
Die Textlinks für beide Ebenen wurden farblich angepasst.
Aufbau der Verschachtelung
Der Aufbau ist ein wenig tückisch: Wenn Sie sauberen HTML-Code schreiben möchten, ist die Aufzählung der zweiten Ebene Bestandteil eines <li>-Elements der ersten Ebene! Die gesamte Aufzählung der Ebene 2 steht demnach innerhalb von <li> und </li>-Tags der ersten Aufzählung.
Die Aufzählung der zweiten Ebene füge ich an der Stelle der ersten Aufzählung ein, die ich hier durch einen roten Strich markiert habe:
Durch Gruppierung der CSS-Anweisung gelingt es mir, mit nur 2 generellen CSS-Klassen (map1, map2) die Anweisungen für die Aufzählung und den untergeordneten Elementen der Links (<a>) zusammen zu fassen.
<style type="text/css">
<!--
/* CSS für Aufzählung und Textlinks Ebene 1 */
ul.map1 li {
list-style-image:url(b9x9c.gif);
padding: 0px 0px 0px 0px;
margin: 2px 0px 0px 0px;
}
ul.map1 li a, ul.map1 li a:visited {
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #0070C0;
text-transform:none;
}
ul.map1 li a:hover {
text-decoration: underline;
color:#FF007F;
text-transform:none;
}
/* CSS für Aufzählung und Textlinks Ebene 2 */
ul.map2 li {
list-style-image:url(user.gif);
padding: 0px 0px 0px 0px;
margin: 2px 0px 0px 0px;
}
ul.map2 li a, ul.map2 li a:visited {
font-family: Verdana,Arial,sans-serif;
font-size: 11px;
font-weight: normal;
text-decoration: none;
color: #00A050;
text-transform:none;
}
ul.map2 li a:hover {
text-decoration: underline;
color:#FF007F;
text-transform:none;
}
-->
</style>
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.
Home • Diverses • SiteMap 5
Quellcode
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.
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.
MINI-IMAGE-BOX 
Sitemap als Crawlerhilfe für Suchmaschinen
Sitemap 05