 Sitemap 03 Beispiel 01
Auch für Sitemaps habe ich separate Beispielseiten ohne weitere Erklärungen erstellt. Im Wesentlichen handelt es sich um Varianten durch unterschiedliche CSS-Anweisungen.
Noch was fürs Auge
Wenn sie der Sitemap 03 einen farblich seitenangepassten Farbanstrich verleihen möchten, reichen dazu wenige Zeilen CSS-Code. Ein Beispiel ohne Grafiken.
Sitemap der HTML-Themen
Die Formatierung für Links und das Block-Symbol vor der ersten Zeile wurden durch CSS-Anweisungen festgelegt. Die Formatierungen wurden mit dem 'class-Attribut' zugewiesen.
HTML-Code im Body
<div id="map3">
<a class="Link" 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">
<!--
#map3 {
margin-left: 30px;
margin-bottom: 15px;
border-bottom: 1px dotted #EA0081;
color: #0070C0;
display: block;
padding:5px;
background-color: #FFF0FF;
}
#map3 a:link {
color: #BB0067;
}
#map3 a:visited {
color: #BB0067;
}
#map3 a:hover {
color: #FF007F;
}
#map3 .Header {
font-size: 12px;
font-family: Verdana,Arial, sans-serif;
font-weight: normal;
margin: 10px 0px 7px 0px;
padding-left:10px;
border-left: 10px solid #BB0067;
text-transform: none;
display: block;
}
#map3 .Hinweis {
font: 10px Verdana, sans-serif;
color: #2F2F2F;
margin: 0px 0px 3px 0px;
display: block;
}
#map3 .Datei {
font: 11px Verdana, sans-serif;
color: #1F1F1F;
text-transform: none;
margin: 0px 0px 10px 0px;
display: block;
}
-->
</style>
Zur allgemeinen Erklärung zu CSS-formatierungen lesen sie mehr in der Rubrik CSS unter dem Menüpunkt 'CSS-Einführung'. Dort gibts 13 Seiten zum Thema
 CSS-Einführung
|
WWW.WEB-TOOLBOX.NET
ZURÜCK