 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.
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 der Zeichen-Abstand (letter-spacing) der ersten Zeile wurden durch CSS-Anweisungen festgelegt. Die Formatierungen wurden mit dem 'class-Attribut' zugewiesen.
HTML-Code im Body
<div id="map4">
<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">
<!--
#map4 {
margin-left: 30px;
margin-bottom: 15px;
border-bottom: 1px solid #CFCFCF;
border-left: 10px solid #CFCFCF;
color: #0070C0;
display: block;
padding:10px;
background: #EFEFEF;
}
#map4 a:link {
color: #4F4F4F;
}
#map4 a:visited {
color: #4F4F4F;
}
#map4 a:hover {
color: #FF7F00;
}
#map4 .Header {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
letter-spacing:0.3em;
margin: 2px 0px 2px 0px;
text-transform: none;
display: block;
}
#map4 .Hinweis {
font: 10px Verdana, sans-serif;
color: #CCCC00;
margin: 0px 0px 3px 0px;
display: block;
}
#map4 .Datei {
font: 11px Verdana, sans-serif;
color: #8F8F8F;
text-transform: none;
margin: 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