Navigáció vízszintes kisképekkel

Minden kiskép, egy - egy különálló html fájlra utal.
Minden html fájlban, el kell helyezni az összes kisképet, így könnyen mozoghatunk egyik html fájlról a másik html fájlra.
Minden egyes html fájlban a rá jellemző nagyképet helyezzük el.
A html fájlokban nem csak nagyképet jeleníthetünk meg, hanem leírásokat is.

Az XHTML lap tartalmát, minden egyes html fájlba be kell írni
A stílus-meghatározásoknak elég egy CSS fájl, és ezt használja az összes html fájl.

Kisképek vízszintes elhelyezésének megírása XHTML lapon

<div id="kiskepek">
<div class="kiskep">
<a href="navigakv.html"><img src="images/h_oldal75x75.jpg" alt="Mészkő" width="75" height="75" class="kiskepmargo" /> </a><br /> A mészkő
</div>
<div class="kiskep">
<a href="navigb.html"><img src="images/este75x75.jpg" alt="Az est" width="75" height="75" class="kiskepmargo" /> </a><br />
Este.
</div>
<div class="kiskep">
<a href="navigc.html"><img src="images/villany75x75.jpg" alt="Villany" width="75" height="75" class="kiskepmargo" /> </a><br />
Takarékos.
</div>
<div class="kiskep">
<a href="navigd.html"><img src="images/ledi75x75.jpg" alt="Kutya" width="75" height="75" class="kiskepmargo" /> </a><br />
Juhász.
</div>
<div class="kiskep">
<a href="navige.html"><img src="images/virag75x75.jpg" alt="Virág" width="75" height="75" class="kiskepmargo" /> </a><br />
Virág.
</div>
</div>

Nagykép vagy leírás, megírása XHTML lapon
A kék színnel kiemelt meghatározásoknak, az adott html fájlra jellemző kép elérési útját kell beírni.

<div id="nagykep">
<img src="xxxx_600x330.jpg" alt="xxxx" width="600" height="330" class="foto" />
</div>

Kisképek meghatározásai CSS lapon

#kiskepek { width: 650px; margin-top: 3px; margin-left: 150px; position: relative; text-align: center; margin-bottom: 15px;}
#kiskepek img { border: 0px;}
.kiskep {float: left; width: 100px; margin-bottom: 25px;}
.kiskepmargo {margin-bottom: 5px;}

Nagykép meghatározásai CSS lapon

#tartalomkepviz { width: 770px; margin-top: 15px; margin-left: 10px; }
.foto {border: 2px ridge #369; padding: 5px;}
.foto { float: left; margin-right: 2px; margin-bottom: 5px; margin-left: 90px;}