You are on page 1of 4

IV GRUPA  ISPIT IZ PRIMENE RAČUNARA – GRAFIKA 2 

Web dizajn 

1. U datom folderu na Desktopu napraviti sajt prema priloženim ekranima (videti na kraju dokumenta). 
Formatiranje i uređenost definisati u odvojenoj CSS datoteci pod nazivom ispit.css.  
2. Sajt treba da sadrži stranice (index.html, sezona.html, egzotika.html, proslava.html) i u svima odgovarajuću 
navigaciju. Svaka stranica sastoji se od headera i sadržaja koji je specifičan za datu stranicu. U header‐u se nalazi 
naslov h1, navigacija i eventualno naslov h3 (samo za stranicu korpice.html – pogledati ekrane na kraju). 
3. U tagu <title> upisati „GRUPA 4“. Zajednička formatiranja i pozadine svih stranica treba da bude definisana 
prema sledećem:  
a. Veličina fonta je 8pt  
b. Pozadina je obojena horizontalnom gradacijom prema sledećem kodu: 
background:‐webkit‐linear‐gradient(left, #fBB 0%, white 47%, white 53%, #fBB 100%); 
background:‐moz‐linear‐gradient(left, #fBB 0%, white 47%, white 53%, #fBB 100%); 
background:linear‐gradient(left, #fBB 0%, white 47%, white 53%, #fBB 100%); 
c. sve margine su 0; 
d. u četiri ugla postavljena su četiri <div> elementa tako da se uvek nalaze u tim uglovima bez obzira na 
veličinu prozora browsera (koristiti klase radi efikasnijeg pozicioniranja po uglovima). Slike za uglove su: 
i. gornji levi ugao – cvet_red.png 
ii. gornji desni ugao – cvet_dred.png 
iii. donji levi ugao – cvet_dlred.png 
iv. donji desni ugao – cvet_ddred.png 
4. Element header leži centriran uz gornju ivicu prozora (gornja i donja margina je 0, leva i desna su auto), padding 
sa svih strana je 20px, širine je 500px, relativno pozicioniran sa tekstom centriranim u boji pink i sa sivom 
senkom teksta postavljenom 2px ispod teksta i širine 2px (text‐shadow: 0px 2px 2px gray;). 
Header sadrži naslov stranice „Cvetni Aranžmani“ formatiran kao h1 i centriran, a takođe sadrži i navigaciju 
postavljenu u <nav> element sa marginama 0 i auto, unutrašnje odbijanje je 0 a visina ovog elementa je 20px i 
prikazan je kao blok (display:block;). 
5.  Navigaciju čini nenumerisana lista <ul> čiji su elementi <li> postavljeni u levi blok (float:left), prikazani bez 
simbola i sa senkom postavljenom po celom boksu (box‐shadow:0px 2px 2px gray;) 
6. Ankori u svakoj stavki prvog nivoa u navigaciji <li> prikazani su kao block, širine 90px, sa paddingom 5x i 8px, 
pozadinom boje pink, zelenom bojom teksta i bez podvlačenja. 
7. Podlista je takođe nenumerisana lista (<ul> drugi nivo) koja je sakrivena (display:none), širine 100px sa bojom u 
pozadini strawberry. Prilikom prelaska mišem preko linkova (stavki) iz prvog novoa (prve liste) trebalo bi da se 
prikazuje podlista (nav li:hover ul) sa sledećim stilovima: prikaz je kao block, apsolutno pozicioniran sa 
marginama 0 i paddingom 0, i transparencijom 20%. Sve stavke podliste trebalo bi da se prikazuju jedna ispod 
druge (float:none) kada kursor miša prelazi preko stavki iz prve liste (nav li:hover li). 
8. Linkovi definisani stavkama podliste (nav li:hover li a) su: bez podvlačenja, ispisani zelenom bojom sa donjom 
bordurom debljine 1px punom linijom žute boje, boja pozadine je strawberry. Kada kursor miša pređe preko 
linkova u podlisti (nav li li a:hover), boja pozadine se menja drugačije kod sva tri linka. Te boje su: #C8E, #F99 i 
#FF9 (napomena: kreirati tri klase za ovaj hover) 

Tačke od 1 do 8 odnose se na telo i formatiranje svih stranica kao i na navigaciju koja je zajednička za sve tri stranice 
ovog sajta. Tačke 9 i 10 odnose se na formatiranje sadržaja stranica: index.html i korpice.html (pogledati ekrane).  
9. Stranica index.html sadrži sliku ikebana_01.png postavljenu u element <figure> i centrirana je na sredini 
stranice. Takođe, visina ove slike iznosi 70% od visine prozora browsera. 
10. Na stranici korpice.html, ispod navigacije nalazi se podnaslov h3 koji glasi „Cvetne korpice“ ispisan u boji 
crimson. Ispod naslova je tabela sa jednim redom i tri polja. Tabela je širine 400px, a leva i desna margina su 
automatske kako bi tabela bila horizontalno centrirana. Sve tri slike u tabeli su visine 200px, i proporcionalne 
širine. 
 
Slika 1 Prikaz stranice index.html 

 

 

 

  Različiti „hoveri“  
(primenjeni preko klasa) 
 

 

 

 
 

 

 
Različiti „hoveri“  
  (primenjeni preko klasa) 

 

 

 

 

 

 

   
Različiti „hoveri“  
  (primenjeni preko klasa) 

 

 
 
 
 
Slika 2 Prikaz stranice korpice.html