Sedmi čas – Šablon

Dragan Filipović Korak po korak, Kurs Comments (0)

Sve strane sajte će imati isti dizajn, po šablonu koji smo dizajnirali.

Glavni sadržaj strana nalazi se u desnoj koloni i menjaće se u zavisnosti od svrhe strane. 

Početna strana sajta (index.html) je naš šablon. Šablon je završen kada pored dizajna i svi linkovi funkcionišu. Potrebno je da glavnu navigaciju usmerimo ka ostalim stranama sajta (do sada smo koristili prazne linkove – #).

  <div id="meni">
    <ul>
      <li><a href="#">Početna</a></li>
      <li><a href="#">O meni</a></li>
      <li><a href="#">Galerija</a></li>
      <li><a href="#">Kontakt</a></li>
    </ul>
  </div>

 Linkovi se menjaju tako što kliknemo na link i u Properties panelu umesto tarabe ukucamo pravi link. Kliknemo na reč Početna, a u polju za link ukucamo index.html, obzirom da je to ime fajla početne strane. Kliknemo na tekst O meni i u polju za link ukucamo o-meni.html, što će biti naziv fajla strane O meni. Isto uradimo za galeriju i kontakt.

  <div id="meni">
    <ul>
      <li><a href="index.html">Početna</a></li>
      <li><a href="o-meni.html">O meni</a></li>
      <li><a href="galerija.html">Galerija</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </div>

 Kada završimo linkove snimimo fajl i time smo završili izradu šablona. Sada možemo napraviti ostale strane. Strane pravimo dupliranjem šablona -File –> Save as i upišemo ime nove strane. Imena novi strana moraju da budu ista kao imena koja smo koristili pri izradi navigacije. Npr. kada pravimo stranu O meni, ime fajla mora biti o-meni.html, jer smo to ime koristili pri izradi navigacije. U Files panelu možemo videti sve strane koje smo napravili.

Sve strane trenutno imaju isti sadržaj. Potrebno je dati im naslov (title) i obeležiti aktivnu stranu u navigaciji. Npr. ukoliko nam je navigacija plave boje, a hover efekat crvene, kada se otvori neka strana, dugme za tu stranu treba da ostane crvene boje.

CSS – Obzirom da smo za navigaciju koristili strukturu #meni ul li a na isti način ćemo formatirati aktivno dugme

#meni ul li a.aktivna {
background-color:red;
}

 HTML – ovu klasu ćemo dodati linkovima koji odgovaraju strani koju otvaraju.

Npr. na strani O meni (o-meni.html) to će biti link koji vodi ka toj strani 

  <div id="meni">
    <ul>
      <li><a href="index.html">Početna</a></li>
      <li><a href="o-meni.html" class="aktivna">O meni</a></li>
      <li><a href="galerija.html">Galerija</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>
  </div>

 Na strani Galerija (galerija.html)

  <div id="meni">
    <ul>
      <li><a href="index.html">Početna</a></li>
      <li><a href="o-meni.html">O meni</a></li>
      <li><a href="galerija.html" class="aktivna">Galerija</a></li>
      <li><a href="kontakt.html">Kontakt</a></li>
    </ul>

 I tako za ostale strane.

Naslov strane – Title

Tag za naslov (Title) strane se nalazi u HEAD delu sajta. Naslov se vidi u browser-u u tabu strane. Dodaje se preko Dokument toolbar-a ili direktno u kodu. Zbog slova č,ž islično bolje je koristiti toolbar. 

title-bar

 

<title>Početna strana Naslov</title>

title-browser

 

Više o Title tagu ćemo učiti kroz SEO optimizaciju.

Pogledajte Vaš sajt.

Comments (0) Trackback from your site.

Dragan Filipović

Predavač na Kursu Web Dizajna - Web edukator.

Ostavi komentar

Morate biti prijavljeni da biste dodali komentar.