Sitemap 03
    
HOME
QuellCode  ZURÜCK SITEMAP  

 Sitemap 03

Eine Variante, die neben der Übersicht detailierte Informationen bereitstellt. Hier werden die einzelnen Infos innerhalb von DIV-Containern angeordnet.

Eine Sitemap gehört bei einer umfangreichen Web-Präsenz schon beinahe zum guten Ton. Neben der Annehmlichkeit für den Besucher erfüllt sie geschickt eingesetzt, ganz nebenbei auch andere Funktionen. Hier z.B. zusätzlich eine kurze Beschreibung anzuzeigen.

Durch die Darstellung innerhalb von DIV-Containern bietet sich die Möglichkeit die einzelnen Blöcke mit zusätzlichen Formatierungen zu versehen. Hier wurden die Blöcke nach rechts eingerückt und mit einer gestrichelten Linie (unten) versehen. Der Abstand zum darunter folgenden HTML-Objekt ist durch margin-bottom mit 15 Pixel festgelegt.


Für die Inhalte der DIV-Container sind 3 unterschiedliche Textformatierungen definiert:
  • Header
  • Hinweis
  • Datei
Sitemap der HTML-Themen




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 eines DIV-Blocks

Der DIV-Block hat die ID 'Block'. Alle 3 Textzeilen dienen als Verweis auf die Datei. Daher sind sie in <a>-Tags eingeschlossen. Für die Header-Zeile wurde am Ende eine Grafik eingebunden. 

<div id="Block">

<a class="Link" href="../../html/erste-schritte.htm">

<span class="Header">
Erste Schritte mit HTML
<img src="24.gif" width="12" height="12" border="0" alt="">
</span>

<span class="Hinweis">
Editor / Grundlagen / Referenz + PDF-Datei zum Download
</span>

<span class="Datei">
Datei: erste-schritte.htm
</span>

</a>

</div>



   CSS-Anweisungen im Head 


#Block {
        margin-left: 30px;
        margin-bottom: 15px;
        border-bottom: 1px dashed #D6D6D6;
        color: #0070C0;
        display: block;
}

#Block a:link {
        color: #0070C0;
        text-transform: none;
}

#Block a:visited {
        color: #0070C0;
        text-transform: none;
}

#Block a:hover {
        color: #FF007F;
        text-transform: none;
}


#Block .Header {
        font-size: 12px;
        font-family: Arial, sans-serif;
        font-weight: normal;
        margin: 10px 0px 2px 0px;
        text-transform: none;
        letter-spacing:0.2em;
        display: block;
}

#Block .Hinweis {
        font: 10px Verdana, sans-serif;
        margin: 0px 0px 3px 0px;
        display: block;
}


#Block .Datei {
        font: 11px Verdana, sans-serif;
        color: #000000;
        text-transform: none;
        margin: 0px 0px 15px 0px;
        display: block;
}











NACH OBEN