Kreiranje Sajta Restoran Tajna

Kreiranje sajta Restoran Tajna u dreamweaver-u I deoU okviru programa Dreamweaver kreiraemo sajt Restoran Tajna koji e posedovati ukupno est stranica: O restoranu, Jelovnik, Karta vina, Dostava hrane, Galerija slika, Kontakt

Izgled sajta dat je na sledeoj slici:

Kreiranje templejta

U prvom delu tutoriala kreiraemo templej u koji e koristiti sve stranice pri svom kreiranju. Templejt e sadrati naslov sajt, meni kao i prostor za smetanje sadraja stranica.

Manage sites

Za poetak je potrebno kreirati sajt i locirati se do foldera u okviru kojeg se nalaze resursi sajta

1. Pokrenite program Dreamweaver

2. Kliknite na meni site, a zatim izaberite opciju manage sites

3. U novootvorenom prozoru Manage Sites izaberite opciju New->Site4. U polju Site name unesite ime sajta (npr.: Restoran Tajna)

5. Za stavku Local root folder potrebno je da locirate folder u kojem se nalaze resursi vaeg sajta

6. Kliknite na dugme OK7. Kliknite na dugme DoneDodavanje osnovne tabeleSajt e sadrati vie nekakvih tabela u kojima e biti organizovan sadraj sajta (Naslov sajta, meni, sadraj).

1. Dodajte novi folder sajtu sa nazivom Stranice (desni klik na root sajta otvara se meni iz kojeg treba izabrati opciju New Folder)

2. U okviru foldera Stranice dodajte stranicu sa nazivom Index.html (desni klik na folder Stranice otvara se meni iz kojeg treba izabrati opciu New File)

3. Otvorite novokreiranu stranicu dvostrukim klikom na fajl Index.html4. Izaberite Design mode

5. Izaberite meni Insert, a zatim opciju Table6. U otvorenom Table prozoru unesite vrednosti za sledea polja:

Rows 1 Columns 2 Table width - 100% Border thickness 0 Cell padding 0 Cell spacing 0

7. Kliknite na dugme OK8. Izaberite meni View, a zatim Table mode -> Expandend table modes9. Kliknite unutar prve elije tabele

10. U Properties prozoru unesite vrednost 80% za width (W)

11. Klikntine unutar druge elije tabele12. U Properties prozoru unesti vrednost 20% za width (W)

13. Sauvajte stranicu (Izaberite meni File, a zatim opciju Save)

Kreiranje tabele HeaderContent

Sada emo kreirati tabelu u kojoj e biti smeten naslov stranice, meni, kao i prostor na kojem e se smetati sadraj stranice.1. Kliknite unutar prve elije tabele

2. Unesite novu tabelu sa sledeim vrednostima:

Rows 2 Columns 2 Table width - 100 percent Border thickness 0 Cell padding 0 Cell spacing 03. Kliknite na dugme OK

4. Selektujte prvi red novokreirane tabele

5. Izaberite meni Modify, a zatim opciju Table -> Marge Cells

6. Kliknite unatar prve elije drugog reda.

7. U Properties prozoru u polje Width unesite vrednost 2208. Kliknite unutar prvog reda

9. Unesite text Restoran Tajna

Kreiranje menija

U narednom koraku kreiraemo tabelu u kojoj e biti smeten meni web sajta.1. Kliknite unutar prve elije drugog reda

2. Unesite novu tabelu sa sledeim vrednostima

Rows 6 Columns 1 Table width 100 percent Border thickness 0 Cell padding 0 Cell spacing 0

3. Kliknite unutar prvog reda novokreirane tabele

4. Unesite tekst O restoranu5. Kliknite unutar drugog reda novokreirane tabele

6. Unesite tekst Jelovnik7. Kliknite unutar treeg reda novokreirane tabele

8. Unesite tekst Karta vina9. Kliknite unutar etvrtog reda novokreirane tabele

10. Unesite tekst Dostava hrane11. Kliknite unutar petog reda novokreirane tabele

12. Unesite tekst Galerija slika13. Kliknite unutar estog reda novokreirane tabele

14. Unesite tekst Kontakt

Kreiranje linkovaPotrebno je kreirati linkove od teksta koji je dodat u tabelama.

1. Selektujte text O restoranu

2. U Properties prozoru unesite Index.html u okviru polja Link

3. Selektujte tekst Jelovnik4. U Properties prozoru unesite Index.html u okviru polja Link5. Selektujte tekst Karta vina6. U Properties prozoru unesite KartaVina.html u okviru polja Link7. Selektujte tekst Dostava hrane8. U Properties prozoru unesite DostavaHrane.html u okviru polja Link9. Selektujte tekst Galerija slika10. U Properties prozoru unesite GalerijaSlika.html u okviru polja Link11. Selektujte tekst Kontakt12. U Properties prozoru unesite Kontakt.html u okviru polja Link

Kreiranje dela za sadraj stranica

U ovom koraku emo kreirati prostor za smetanje sadraja stranica.1. Kliknite unutar druge elije drugog reda tabele HeaderContent

2. Izaberite meni Insert, a zatim izaberite Layout object -> Div tag3. U novootvorenom prozoru Insert Div Tag izaberite At insertion point za Insert opciju

4. Kliknite na dugme OK

5. Izaberite opciju exit Expendend Tables mode

Dodavanje CSS stila bodyU narednim koracima definisaemo CSS stilove koji e uticati na izgled stranica.1. Dodajte novi folder sa nazivom Stilovi (desni klik na root sajta otvara se meni iz kojeg treba izabrati opciju New Folder)2. U okviru foldera Stilovi dodajte novi fajl sa nazivom TajnaStyle.css (desni klik na folder Stilovi otvara se meni iz kojeg treba izabrati opciu New File)

3. Otvorite novokreirani fajl TajnaStyle.css

4. Otvorite CSS panel5. Selektujete stil TajnaStyle.css6. Kliknite na opciju New CSS Rule

7. Izaberite Tag u okviru stavki Selector Type, a u polju Name unesite vrednost body

8. U Category listi izaberite stavku Background9. Unesite sledee vrednosti: za Background Color izabrite crnu boju (#000000) za Background Image izaberite sliku Pozadina-Desno.JPG koja se nalazi u okviru foldera Slike -> Tajna izaberite no-repeat za opciju Repet izaberite fixed za opciju Attachment izaberite right za opciju Horizontal position izaberite top za opciju Vertical position

10. Kliknite na dugme OK11. Otvorite stranicu Index.html12. Kliknite na dugme Attach Style Sheet u okviru CSS panela

13. U novootvorenom prozoru kliknite na dugme Browse koje se nalazi pored opcije File/URL i izaberite stile TajnaStyle.css koji se nalazi u okviru foldera Stilovi


Dodavanje CSS stila glavniHeader1. Selektuje TajnaStyle.css u okviru CSS panela2. Kliknite na dugme New CSS Rule3. Izaberite Class u okviru stavki Selector Type4. U polje Name unesite .glavniHeader


6. U novootvorenom prozoru izaberite stavku Type iz Category liste7. Izaberite opciju Edit Font List u okviru stavke Font

8. U novootvorenom Edit Font List prozoru izaberite font French Skript MT u okviru liste Available fonts9. Kliknite na dugme Tajna izaberite no-repeat za opciju Repet izaberite fixed za opciju Attachment izaberite left za opciju Horizontal position izaberite top za opciju Vertical position

8. Kliknite na dugme OK9. Kliknite unutar elije gde se nalazi tekst Restoran Tajna, a zatim izaberite tag koji se nalazi odmah pored taga

10. U Properties prozoru izaberite stavku glavnaTabela u okviru Style (Class) liste

Dodavanje CSS stila Meni1. Selektuje TajnaStyle.css u okviru CSS panela

2. Kliknite na dugme New CSS Rule3. Izaberite Class u okviru Selector Type stavki4. U polje Name unesite .meni5. U novootvorenom prozoru izaberite stavku Box u okviru Category liste6. U okviru opcije Margin cekirajte opciju Same for all7. U polje Top unesite vrednost 10 pixels

8. Kliknite na dugme OK9. Selektuje TajnaStyle.css u okviru CSS panela

10. Kliknite na dugme New CSS Rule11. Izaberite Advanced (Compound) u okviru Selector Type stavki12. U polje Name unesite .meni a13. U novootvorenom prozoru izaberite stavku Type u okviru Category liste14. Unesite sledee vrednosti:

izaberite French Script MT, Verdana u listi Font unesite 30 pixels u polju Size izaberite belu boju u polju Color (#FFFFFF)


17. Kliknite na dugme New CSS Rule18. Izaberite Advanced (Compound) u okviru Selector Type stavku19. U polje Name unesite .meni a:hover20. U novootvorenom prozoru izaberite stavku Type u okviru Category liste

21. Izaberite ljubiastu boju u polju Color (#FF00FF)


24. Kliknite na dugme New CSS Rule25. Izaberite Advanced (Compound) u okviru Selector Type stavki26. U polje Name unesite .meni td27. U novootvorenom prozoru izaberite stavku Box u okviru Category liste

28. U okviru Padding opcija odekirajte opciju Same for all29. Unesite sledee vrednosti za padding Top 10 pixels Right 0 pixels Bottom 10 pixels Left 30 pixels

30. Kliknite na dugme OK31. Kliknite u eliju u kojoj se nalzi link O restoranu32. Izaberite tag

33. U Properties prozoru izaberite stavku meni u okviru Style (Class) liste

Dodavanje CSS stila Sadrzaj1. Selektuje TajnaStyle.css u okviru CSS panela

2. Kliknite na dugme New CSS Rule3. Izaberite Class u okviru Selector Type stavki4. U polje Name unesite .sadrzaj5. U novootvorenom prozoru izaberite stavku Type u okviru Category liste

6. Izaberite belu boju za Color opciju (#FFFFFF)

7. Izaberite stavku Block u okviru Category liste

8. Izaberite top iz liste Vertical alignment, a left iz liste Text align

9. Izaberite stavku Box u okviru Category liste

10. U okviru Padding opcija odekirajte opciju Same for all11. Unesite sledee vrednosti za padding Top 30 pixels Right 10 pixels Bottom 10 pixels Left 0 pixels

12. Kliknite na dugme OK13. Kliknite unutar div taga, a zatim izaberite tag

14. U Properties prozoru izaberite stavku sadrzaj u okviru Style (Class) liste

Prikaz stranice u browser-u

1. Kliknite na dugme F12 kako bi se vaa stranica prikazala u browser-u

Documents

Kreiranje Sajta Restoran Tajna