Sitemap 01
    
 Home • Diverses • SiteMap  

 Sitemap 01   Beispiel 02

Auch für Sitemaps habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen. Hier Beispiele zur Formatierung der Sitemap 01.
Beispiel: Variante der Sitemap 01

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

   Noch was fürs Auge

Wenn sie die üblichen schwarzen Pünktchen etc. vor den Listelementen nun noch durch eigene Symbole ersetzen möchten, reicht dazu eine einzige Änderung in den CSS-Angaben des Beispiels für die Sitemap 01.

Ich ersetze die Angabe für den Typ des Aufzählungszeichens (list-style) 
list-style-type:[Wert];
duch Anweisungen für eine eigene Grafik 
list-style-image:url([Wert]);
  Beispiel der Ausgabe mit: list-style-image:url(doc13-11.gif) 
HTML-Themen


Die Formatierung für Links und das Symbol des Aufzählungszeichens werden durch CSS-Anweisungen festgelegt. Die Formatierungen für die gesamte Liste werden mit dem 'class-Attribut' zugewiesen.



Die verwendete Grafik (hier vergrößert dargestellt) können sie durch Rechtsklick herunterladen und darf frei verwendet werden. Weitere Grafiken finden sie in meiner Mini-Image-Box.








HTML-Code im Body 
<ul class="map08">
<li><a href="dateiname.htm">Textlink</a></li>
<li><a href="dateiname.htm">Textlink</a></li>
<li><a href="dateiname.htm">Textlink</a></li>
</ul>
CSS-Anweisungen im Head 
<style type="text/css">
<!--

/* map08 */

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

ul.map08 li{
list-style-image:url(doc13-11.gif);
padding: 4px 0px 0px 0px;
margin: 2px 0px 0px 0px;
}

ul.map08 a, ul.map03 a:visited{
color: #5F5F5F;
text-decoration: none;
text-transform: none;
font-size: 12px;
font-family: Verdana, sans-serif;
}

ul.map08 a:hover{
color: #0090E0;
text-decoration: none;
text-transform: none;
font-size: 12px;
font-family: Verdana, sans-serif;
}

-->
</style>




   Beispiel

  list-style-image:url(minidot8x8-13.gif) 



   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 01 (einfache Sitemap als CSS-formatierte Liste)

Sitemap 02 (Kennzeichnung der Ebenen durch Einrückung)

Aufzählungen / Listen mit CSS formatieren

NACH OBEN