Podsjetnik

Layout stranice je struktura ili raspored elemenata na stranici. U okviru ove domaće zadaće prisjetit ćemo se kako pomoću elementa DIV složiti strukturu stranice. Potrebno je izraditi layout kao što je prikazano na slici:

Prikazani layout/strukturu u HTML-u možemo zapisati kao:

<div class="container">
      <div class="zaglavlje"></div>
      <div class="navigacija"></div>
      <div class="sadrzaj"></div>
      <div class="podnozje"></div>
 </div>

Bitno je samo potrebne sadržaje dodati unutar početne i završne oznake odabranog elementa. Znači sve što ide u element koji smo nazvali "sadrzaj", staviti unutar početne oznake i završne oznake za taj isti element, kao što je prikazano:

<div class="container">
      <div class="zaglavlje"></div>
      <div class="navigacija"></div>
      <div class="sadrzaj">
            <h1>Naslov</h1>
            <p>Odlomak</p>
            <img src="slika.jpg">
            ...
      </div>
      <div class="podnozje"></div>
</div>

Ukoliko želimo imati fiksne dimenzije kontejnera, tada je potrebno DIV elementima zadati i visinu i širinu u koje ćemo smještati sadržaj, a ukoliko ne stavimo visinu tada će se visina elemenata prilagođavati sadržaju koji se u njima nalazi.

To smo sve već radili i u školi, ali samo kao podsjetnik!

Upute za izradbu domaće zadaće

Na temelju prikazane strukture, koja se sastoji od zaglavlja, navigacije, sadržaja i podnožja, samostalno odredite dimenzije DIV elementima te izradite web sjedište na temu neke videoigre po izboru. Sjedište, uz početnu, treba sadržavati još 3 stranice.

Web sjedište treba sadržavati:

• pozadinsku sliku u bodyu
• naslove i slike poravnate po sredini
• ugrađen videozapis s YouTubea
• horizontalnu navigaciju (primjer izrade navigacije možete pogledati i u videu)
• fotogaleriju s efektom prozirnosti (primjer izrade fotogalerije možete pogledati i u videu)
• i ostale elemente po izboru.

Ovaj praktični zadatak bit će ocijenjen pa uz tehničku izvedbu, boduje se i vizualni izgled (dizajn) stranice - odabir boja, fontova, oblikovanje elementa i navigacije itd. U pravilu gornji i donji dio stranice se vizualno ne mijenja, već sve dodajete u div element koji je namijenjen sadržaju.

Rok za grupu A je do 18. ožujka u 23.55, a za grupu B do 13. travnja u 23.55.

Rješenje ne smije biti kopija neke prethodne vježbe! Plagirana rješenje bit će ocijenjena negativnom ocjenom (i za onog koji je ustupio svoju vježbu i za onog koji je tu vježbu kopirao).