Sitemap 03 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 03.
|
|
Beispiel: Variante der Sitemap 03
UPDATE 12.02.2011 CSS-Formatierungen (class statt DIV), eine Unterklasse entfernt
Noch was fürs Auge
Wenn sie der Sitemap 03 einen farblich seitenangepassten Farbanstrich verleihen möchten, reichen dazu wenige Änderungen im CSS-Code. Ein Beispiel ohne Grafiken: Hintergrundfarbe, Rand links + unten und ein
Sonderzeichen vor dem ersten Element.
Sonderzeichen Bullet (Punkt) in der ersten Zeile, HTML-Code: • oder •
Sitemap der HTML-Themen
Die Formatierung für Links und der Zeichen-Abstand (letter-spacing) der ersten Zeile wurden durch CSS-Anweisungen festgelegt. Die Formatierungen wurden mit dem 'class-Attribut' zugewiesen.
Bullet-Zeichen (Punkt) in der ersten Zeile: • oder •
HTML-Code im Body
<div class="map4">
<a href="dateiname.htm">
<span class="Header">• erste Schritte mit HTML</span>
<span class="Hinweis">Editor / Grundlagen / Referenz + PDF-Datei zum Download</span>
<span class="Datei">erste-schritte.htm</span>
</a>
</div>
CSS-Anweisungen im Head
<style type="text/css">
<!--
.map4 {
margin: 0 0 15px 30px;
border-bottom: 1px solid #CFCFCF;
border-left: 10px solid #CFCFCF;
color: #0070C0;
display: block;
padding:10px;
background-color: #F5F5F5;
}
.map4 .Header {
font-size: 12px;
font-family: Verdana,Arial, sans-serif;
font-weight:bold;
margin: 10px 0px 7px 0px;
padding-left:0px;
text-transform: none;
display: block;
}
.map4 a:link, .map4 a:visited {
color: #AAAA00;
font-weight: normal;
}
.map4 a:hover {
color: #5F5F5F;
font-weight:bold;
}
.map4 .Hinweis {
font: 10px Verdana, sans-serif;
text-transform: uppercase;
color: #AAAA00;
margin: 0px 0px 3px 0px;
display: block;
}
.map4 .Datei {
font: 11px Verdana, sans-serif;
color: #7F7F7F;
text-transform: none;
margin: 0px 0px 10px 0px;
display: block;
}
-->
</style>
Varianten der Sitemap 03:
Sitemap 03 Beispiel 01

Sitemap als Crawlerhilfe für Suchmaschinen
Sitemap 01 - detailierte Sitemap mit DIV-Containern
Sitemap 02 - Kennzeichnung der Ebenen durch Einrückung
Sitemap 03 - Map-Elemente in 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)

|