Kreiranje novih stranica uz pomoć šablona je vrlo jednostavan proces koji može znatno da ubrza izradu kompletnog sajta. Osim toga, upotreba šablona sa izmenjivim segmentima (Editable Regions) vam omogućava da jednim potezom menjate sadržaje koji se pojavljuju na više različitih stranica. U ovoj lekciji ću vam pokazati kako se to radi.

Za početak ću izborom funkcije New otvoriti novi dokument a zatim sa leve strane odabrati opciju Page from Template. Nakon toga će se u prvoj koloni pojaviti naziv mog sajta a u drugoj bi trebalo da budu prikazani svi šabloni. Pošto mi je trenutno na raspolaganju samo jedna stavka ja ću kliknuti na dugme Create i preći na sledeći korak. Ovaj šablon već sadrži sve elemente koji treba da se pojave na osnovnoj stranici mog sajta. Zato ću odmah pokrenuti funkciju Save i kreirati novi fajl pod nazivom index.html. Na isti način mogu da kreiram i ostale sadržaje pa ću ponoviti ovaj postupak i za naziv fajla uneti about.html. Pošto je za ovu stranicu ipak predviđen drugačiji sadržaj, ja ću odmah promeniti ovaj naslov a ostatak teksta preuzeti iz posebnog dokumenta. On se nalazi među primerima za vežbu pa moram da pređem na Word i iz njega iskopiram nekoliko paragrafa. Ako se nakon toga vratim na Dreamweaver, neće mi biti teško da uklonim postojeće sadržaje i na njihovo mesto postavim novi tekst.

Ukoliko se ispostavi da je na njemu potrebno uneti određene izmene, ni to neće biti problem, jer su mi sada na raspolaganju sve funkcije Dreamweaver-a. Ja ću iskoristiti ovu priliku da definišem par linkova i to na sledeći način. Prvo je potrebno da selektujem odgovarajući deo teksta a zatim da u ovo polje upišem naziv stranice sa kojom želim da se povežem. Pošto u ovom slučaju na ciljnoj stranici postoje dva segmenta, mogu da dodam i tzv. Anchor tag i na taj način još preciznije definišem ovu vezu. Da bi ovaj link bio kompletan, neophodno je da u polje pod nazivom Title unesem odgovarajući naslov i aktiviram opciju Target. Ja ću ove podatke iskoristiti i za drugi link, ali pri tome moram da promenim Anchor tag i unesem novi naslov. Ukoliko niste sigurni kako glasi tačan naziv ciljne stranice, u polje za link možete uneti samo Hash Tag (#), a to će biti dovoljno da se izabrani element u Dreamweaver-u prikaže kao pravi link. Naravno, ovaj podatak se mora kompletirati i to pre nego što objavite konačnu verziju sajta, jer će u protivnom doći do greške.

Ja želim da se na početku drugog paragrafa pojavi jedna fotografija pa ću zato postaviti kursor na odgovarajuću lokaciju i iz Insert menija pokrenuti funkciju Image. Čim se na ekranu pojavi sadržaj foldera u kome se nalaze slike, neće mi biti teško  da kliknem na neku od njih i sa OK potvrdim svoj izbor. Nakon toga treba još samo da unesem propratni tekst i dovršim ovu operaciju.

Pošto sam planirao da ovu sliku postavim tako da bude paralelna sa tekstom, neophodno je da za tu svrhu kreiram novi stil. Zato ću prvo kliknuti na poslednju stavku sa ove liste i preći na unos parametara. Da bih ovaj stil mogao da primenim na bilo koju ilustraciju, neophodno je da iz ove liste izaberem opciju Class i da mu dodelim odgovarajuće ime. Ono treba da bude opisno, jer se na taj način olakšava kasnija primena i dodeljivanje samog stila. Pošto sam na ovaj način obavio prvi deo posla, mogu da pređem na parametre i da za početak za Float i Clear izaberem opciju Left. Nakon toga mogu da postavim okvir od nekih 10 piksela i da mu unosom odgovarajućeg koda dodelim plavu boju. Da bi tekst bio dovoljno odmaknut od slike, desnu marginu treba postaviti na 20 piksela jer je to sasvim dovoljno da se postigne željeni efekat.

Pošto sam na ovaj način definisao novi stil, preostaje još samo da ga primenim. U tom cilju mogu da sa ove liste izaberem odgovarajuću stavku ali moram da pazim jer se lako može dogoditi da kliknem na neki drugi stil.

Ovo nije ispalo tako loše, ali bi bilo još bolje ako bi uglovi bili malo zakrivljeni. Da bih to postigao, neophodno je da otvorim odgovarajući stil, a to se najjednostavnije može postići direktnim izborom opcije koja se nalazi u vrhu ekrana. Dreamweaver će mi odmah omogućiti da pristupim kompletnom kodu pa mi neće biti teško da unesem nove parametre. To konkretno znači da treba da unesem sledeći tekst: border-radius: 15 px; Da bi ova promena bila pravilno protumačena u svim Browser-ima, neophodno je da dodam još jedan red i to sa sledećim sadržajem: -moz-border-radius: 15 px;. Ova promena neće biti vidljiva u Preview odeljku nego moram da pokrenem pravi Browser i u njemu proverim šta sam postigao.

Pre nego što dovršim ovu lekciju, želeo bih da vam skrenem pažnju na jedan mali ali bitan detalj. Naime, pošto smo naizmenično menjali različite parametre, najbolje bi bilo da se umesto komande Save za čuvanje podataka upotrebi slična funkcija – Save All. Na taj način se pored osnovnog dokumenta, snimaju i sve promene koji ste napravili na stilovima i drugim elementima koji čine vašu prezentaciju.