V několika kapitolách si ukážeme, jak si můžete vytvořit Vaši první jednoduchou, ale moderní webovou šablonu za použití jazyků html a css.

Kapitola osmá – další stránky

Další stránky

Někomu se může zdát, že naše webové stránky nejsou úplně hotové. Ve skutečnosti máme opravdu hotovou jen úvodní stránku a web většinou obsahuje stránek daleko více.

V PSPadu si oevřeme index.html a provedeme změny, které jsme si už naznačili.

     <div id="menu">
        <a href="index.html">Úvod</a>
        <span class="sub-menu">
          <a href="sluzby.html">Služby</a>
          <span>
            <a href="sluzba-1.html">Služba 1</a>
            <a href="sluzba-2.html">Služba 2</a>
            <a href="sluzba-3.html">Služba 3</a>
            <a href="sluzba-4.html">Služba 4</a>
          </span>
        </span>
        <a href="historie.html">Historie</a>
        <a href="fotogalerie.html">Fotogalerie</a>
        <a href="kontakt.html">Kontakt</a>
     </div>

Uložíme. V podstatě jsme dokončili menu. Aby vše fungovalo, je třeba jednotlivé soubory ještě vytvořit.
Základní kostru a podobu stránek naštěstí už máme, takže nám stačí vzít úvodní stránku a smazat z ní obsah určení jen pro úvod. Zatím neukládat.

     <img id="poutac" src="img/foto.jpg" alt="foto">
     <div id="nadpis">
      <h1>Hlavní nadpis</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>
     <div id="obsah">
      <!-- vše v tomto poli musí být prázdné -->
     </div>
     <div id="zapati">
      <hr>
      <a href="http://moderniweb.com" target="_blank">moderniweb.com © 2015
     </div>
    </div>
  </body>

V PSPadu zadejte Soubory – Uložit jako… a uložíte jako sluzby.html.

Pak znova a uložit jako:

1. sluzba-1.html
2. sluzba-2.html
3. sluzba-3.html
4. sluzba-4.html
5. historie.html
6. fotogalerie.html
7. kontakt.html

Vše do složky, kde už máme i index.html.

Výsledek by měl vypadat takto:

Služby

Dále by jsme měli jednotlivé stránky zpracovat a doplnit jim obsah. Začneme od začátku. Tedy souborem služby.html. Otevřete si jej smažeme komentáře a doplníme…

     <div id="obsah"> 
       <!-- vše v tomto poli musí být prázdné --><!-- smazat -->  
       <a href="sluzba-1.html" class="sluzba sluzba-1">
        <h3>Služba 1</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-2.html" class="sluzba sluzba-2">
        <h3>Služba 2</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-3.html" class="sluzba sluzba-3">
        <h3>Služba 3</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
      <a href="sluzba-4.html" class="sluzba sluzba-4">
        <h3>Služba 4</h3>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
      </a>
     </div>

Každého určitě napadá, že jsou třeba styly. Přejdeme tedy k rozšíření souboru style.css a doplníme.

.sluzba {
  display: block;
  float: left;
  text-decoration: none;
  color: white;
  width: 250px;
  margin: 10px;
  padding: 10px;
  font-size: 18px;
}

V celku povedený. Žádná z vlastnotí pro nás není nová. Snad jen využití řádkového prvku <a> jako blokový prvek. Díky čemuž funguje celá oblast jako jedno velké tlačítko či odkaz.

Zlobí nás tam zápatí. Řešení je několik, ale aby jsme zase nemuseli mazat části zdorojového kódu což se v praxi děje často. Použijeme pro zatím toto řešení, kde doplníme do exitujícího zápisu dva příkazy.

#zapati {
  padding: 20px;
  text-align: center;
  color: silver;
  float: left;
  width: 96%;
}

Dále upravíme hlavní nadpos, aby jsme hned věděli, kde jsme.

<div id="nadpis">
      <h1>Služby</h1>
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc auctor. Aliquam in lorem sit amet leo accumsan lacinia. Praesent in mauris eu tortor porttitor accumsan.
        </p>
      </div>
     </div>

Původně jsem chtěl udělat něco propracovanějšího, ale pro zatím si myslím, že toto stačí.

---

Soubory z lekce ke stažení: lekce-8.zip