Dreamweaver – Kreirajte kalendar (II deo)

Nastavljamo sa izgradnjom našeg on-line kalendara, stali smo kod kreiranja drugog nivoa našeg kalendar-sajta. Prvo ćemo kreirati recimo stranicu za januar. Kliknite desnim tasterom miša u „Site map“ prozoru (Ctrl+F5) i izaberite „New File“, nazovite fajl „januar.htm“ (obavezno napišite malim slovima). Sada ćemo krenuti u kreiranje mreže datuma za mesec januar na samoj stranici (ako dvostruko kliknete na naziv fajla, otvoriće vam se Internet Explorer sa praznom stranicom):

  • Otvorite Dreamweaver i učitajte „januar.htm“.
  • Sa padajućeg menija izaberite „Insert> Layer“ (iskoristićemo opciju slojeva, jer nam oni daju puno više kontrole nad izgledom stranice).
  • Kliknite unutar layer-a i izaberite meni „Insert> Image“, radi ubacivanja pripremljene slike za mesec Januar.
  • Locirajte grafički fajl na vašem disku i kliknite na „OK“.
  • Kada vas Dreamweaver bude „upitao“ da li želite da kopira fajl u lokalni folder, izaberite „Yes“.
Sa slikom će se pojaviti i mreža datuma, sada možete da dodajete linkove ka drugim stranicama (trećeg nivoa). Pre nego što budemo počeli da dodajemo linkove, proverićemo da li se naš layer nalazi na pravom mestu:
  • Dovedite pokazivač miša na ivicu layer-a, tako da pokazivač promeni oblik u dvostruke strelice, tada kliknite levim tasterom miša.
  • Kada se osobine layer-a pojave u „Properties“ prozorčiću, znaćete da ste izabrali baš taj sloj. Ako ne vidite „Properties“ prozorčić, pritisnite prečicu „Ctrl+F3“.
  • Proverite da je u polje „L“ (left) upisana vrednost 0 – nula.
  • Proverite da je u polje „T“ (top) upisana vrednost 0 – nula.
Na ovaj način smo layer postavili u gornji, levi ugao. Sada ćemo da dodajemo „rođendanske“ linkove, i to tako što ćemo da u određene datume postavimo fotografije naših bližnjih. Za ovu „operaciju“ iskoristićemo ugnježđene layer-e. Ugnježđeni layer je sloj koji je ugrađen u osnovni sloj. Na ovaj način ćemo dobiti istovetan prikaz u različitim browser-ima. Kada ubacujete ugnježđene layer-e, proverite da je selektovan osnovni layer (da bi dobili bolju sliku o ovome, pritisnite F3). Potom preko menija „Insert> Layer“, ubacite novi sloj. Prevucite layer na mesto datuma gde želite da postavite fotografiju i podesite veličinu. Selektujte dati layer i pozovite meni „Insert> Image“. Pronađite na disku „thumbnail“ (umanjena slika) osobe čiji je rođendan na taj datum i kliknite na „OK“.

Sada kada smo postavili sličicu, kreiraćemo link ka stranici (trećeg nivoa) gde će se nalaziti velika slika i prigodan tekst. Pređite u prozor „Site map“ (Ctrl+F5) i kliknite desnim tasterom miša i izaberite „New File“. Dajte stranici ime po osobi, učitajte stranicu u Dreamweaver i dodajte jedan layer. U novi sloj ubacite veliku sliku („Insert> Image“) i podesite veličinu sloja prema veličini slike. Kliknite unutar sloja i dodajte neki prigodan tekst, te podesite veličinu fonta i boju fonta. Na kraju snimite fajl. Kada ste kreirali stranicu trećeg nivoa, vratite se na stranicu meseca i selektujte umanjenu sliku. U Properties prozorčiću kliknite na oznaku foldera pored link polja i izaberite stranicu koju želite da linkujete sa umanjene slike.

Ostalo je samo da ponovo snimite svoj rad, i da kreirate na isti način stranice za ostalih jedanaest meseci. Takođe, na svakoj stranici možete dodati „Back“ dugme za vraćanje na prethodni nivo. Za testiranje rada u Dreamweaver-u koristite taster F12.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.