Index: html/index.html
===================================================================
--- html/index.html	(revision 7:11f83eac10b3)
+++ html/index.html	(revision 34:8a75d9b4f88a)
@@ -17,4 +17,16 @@
                 <div class="vnitrekBloku">
                     <p id="napovedniPole">lorem ipsum, nějaký text, něco jako latina, ale jiné…</p>
+
+                </div>
+                <div id="navigace">
+                    <form action="###">
+                        <button class="predchozi" title="Předchozí lekce">&nbsp;</button>
+                        <button class="zpet" title="Zpět v historii">&nbsp;</button>
+                        <button class="pruvodce" title="Průvodce">&nbsp;</button>
+                        <button class="model" title="Mode databáze">&nbsp;</button>
+                        <button class="vpred" title="Vpřed v historii">&nbsp;</button>
+                        <button class="nasledujici" title="Následující lekce">&nbsp;</button>
+                    </form>
+
                 </div>
             </div>
Index: html/styl.css
===================================================================
--- html/styl.css	(revision 7:11f83eac10b3)
+++ html/styl.css	(revision 34:8a75d9b4f88a)
@@ -110,4 +110,57 @@
 }
 
+#navigace {
+    background-image: url('grafika/navigace-pozadi.png');
+    height: 21px;
+    width: 300px;
+    position: relative;
+    bottom: 32px;
+    left: 10px;
+    text-align: center;
+}
+
+#navigace button {
+    height: 20px;
+    border: none;
+    margin-right: 0px;
+    margin-top: 5px;
+    padding: 0px;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    background-position: center;
+    width: 20px;
+    position: relative;
+    top: -4px;
+}
+
+#navigace button.zpet {
+    background-image: url('grafika/navigace-zpet.png');
+    margin-right: 32px;
+}
+
+#navigace button.vpred {
+    background-image: url('grafika/navigace-vpred.png');
+    margin-left: 32px;
+}
+
+#navigace button.nasledujici {
+    background-image: url('grafika/navigace-nasledujici.png');
+    margin-left: 42px;
+}
+
+#navigace button.predchozi {
+    background-image: url('grafika/navigace-predchozi.png');
+    margin-right: 42px;
+}
+
+#navigace button.model {
+    background-image: url('grafika/navigace-model.png');
+}
+
+#navigace button.pruvodce {
+    background-image: url('grafika/navigace-pruvodce.png');
+}
+
 /** Vstupně-výstupní část */
 #io {
Index: java/sql-vyuka/web/WEB-INF/casti/aplikace.jspx
===================================================================
--- java/sql-vyuka/web/WEB-INF/casti/aplikace.jspx	(revision 23:6bbbd371e813)
+++ java/sql-vyuka/web/WEB-INF/casti/aplikace.jspx	(revision 34:8a75d9b4f88a)
@@ -15,4 +15,14 @@
             <div class="vnitrekBloku" id="napovedniPole">
                 <jsp:include page="napoveda.jspx" flush="false"/>
+            </div>
+            <div id="navigace">
+                <form action="###">
+                    <button class="predchozi" title="Předchozí lekce">&amp;nbsp;</button>
+                    <button class="zpet" title="Zpět v historii">&amp;nbsp;</button>
+                    <button class="pruvodce" title="Průvodce">&amp;nbsp;</button>
+                    <button class="model" title="Mode databáze">&amp;nbsp;</button>
+                    <button class="vpred" title="Vpřed v historii">&amp;nbsp;</button>
+                    <button class="nasledujici" title="Následující lekce">&amp;nbsp;</button>
+                </form>
             </div>
         </div>
Index: java/sql-vyuka/web/styl.css
===================================================================
--- java/sql-vyuka/web/styl.css	(revision 22:e56b79cc18a9)
+++ java/sql-vyuka/web/styl.css	(revision 34:8a75d9b4f88a)
@@ -118,4 +118,57 @@
 }
 
+#navigace {
+    background-image: url('grafika/navigace-pozadi.png');
+    height: 21px;
+    width: 300px;
+    position: relative;
+    bottom: 32px;
+    left: 10px;
+    text-align: center;
+}
+
+#navigace button {
+    height: 20px;
+    border: none;
+    margin-right: 0px;
+    margin-top: 5px;
+    padding: 0px;
+    cursor: pointer;
+    background-repeat: no-repeat;
+    background-color: transparent;
+    background-position: center;
+    width: 20px;
+    position: relative;
+    top: -4px;
+}
+
+#navigace button.zpet {
+    background-image: url('grafika/navigace-zpet.png');
+    margin-right: 32px;
+}
+
+#navigace button.vpred {
+    background-image: url('grafika/navigace-vpred.png');
+    margin-left: 32px;
+}
+
+#navigace button.nasledujici {
+    background-image: url('grafika/navigace-nasledujici.png');
+    margin-left: 42px;
+}
+
+#navigace button.predchozi {
+    background-image: url('grafika/navigace-predchozi.png');
+    margin-right: 42px;
+}
+
+#navigace button.model {
+    background-image: url('grafika/navigace-model.png');
+}
+
+#navigace button.pruvodce {
+    background-image: url('grafika/navigace-pruvodce.png');
+}
+
 /** Vstupně-výstupní část */
 #io {