Najbolji način za kreiranje novog šablona je da se buduća Web stranica podeli na nekoliko blokova. Nakon toga vam neće biti teško da izgradite kompletnu strukturu npr. od vrha na dole. Pošto se na skici koju sam pripremio jasno razlikuju tri nezavisne celine, ja ću prvo postaviti tzv. Header koji obuhvata logotip, baner i navigaciju, a zatim preći na centralni deo na kome se nalazi glavni sadržaj. Na kraju treba još samo da dodam treći deo – Footer koji obuhvata linkove za navigaciju, kontakte i veze ka društvenim mrežama. Pošto smo ovo razjasnili, vreme je da pokrenem Dreamweaver i primenom funkcije Manage Site izaberem lokaciju na kojoj se nalaze fajlovi za vežbu. Nakon toga mogu da pređem na kreiranje nove stranice tj. da iz File menija izaberem opciju New i otvorim novi okvir. U njemu će automatski biti izabrana opcija Blank Page pa mogu da kao tip stranice prihvatim opciju HTML i sa none preskočim unapred pripremljene šablone. Jedini parametar koji u ovom trenutku treba promeniti je Doc Type. Njime se na vrh nove stranice automatski unosi nekoliko redova koji pomažu pretraživaču da lakše interpretira sadržaje koji slede. Trenutno je izabrana opcija XHTML a ja ću umesto toga izabrati HTML 4.01 jer mi u ovom trenutku više odgovara jednostavni sistem kodiranja. Čim kliknem na dugme Create, na ekranu će se pojaviti sadržaj moje budu će stranice a na prvi pogled vam se može učiniti da je ona potpuno prazna. Da bih vam dokazao da to tačno, ja ću izborom dugmeta Split preći na režim u kome se na ekranu istovremeno prikazuje kod i grafički izgled budućeg dokumenta. Kao što vidite, sa leve stane već sada postoji nekoliko redova među kojima se jasno razlikuju pojedine funkcije. Na samom vrhu je Docktype a odmah ispod njega početni html tag. Zatim sledi čitava head zona koja u sebi sadrži Meta tagove i naslov (title). Na kraju, tu je i odeljak koji je rezervisan za glavni sadržaj stranice (body) kao i završni html tag. Na desnoj polovini ekrana se može videti kako će buduća Web stranica izgledati u nekom Web pretraživaču mada se za proveru konačne verzije ipak mora koristiti pravi Browser. Ovaj odeljak je trenutno potpuno prazan jer između početnog i završnog body taga još uvek nema ničega.

Ja volim da za početak definišem naslov stranice pa ću zato kliknuti u polje koje se nalazi na vrhu i uneti nekoliko reči. Naslov i prateći komentari ne bi trebalo da budu duži od 70 znakova, jer postoji opasnost da sve preko toga jednostavno bude odsečeno i zanemareno. Naravno, čim kursor ponovo postavim u odeljak sa kodom u njemu će se automatski pojaviti tekst koji sam upotrebio kao naslov.

U ovom primeru ću vam pokazati kako se uz pomoć div tagova mogu kreirati tzv. content odeljci. U pitanju su delovi koda koji vam omogućavaju da rezervišete prostor za neke buduće sadržaje tako da se sa njima može lakše manipulisati. Za sada je dovoljno da znate da se ovakvi blokovi sa podacima mogu međusobno povezivati i to na različite načine. Kao što sam već pomenuo, na ovoj stranici su mi potrebna tri nezavisna odeljka pa ću zato prvo postaviti kursor iza body taga i tu uneti svoj prvi div. To se može uraditi na dva načina: preko Insert menija ili istoimenog panela a ja ću se odlučiti za prvi metod. Ako nakon toga iz menija izaberem opciju Layout Objects, biću u prilici da pokrenem funkciju za unos novog div taga. Nakon toga će se na ekranu pojaviti novi okvir pa mi neće biti teško da izborom odgovarajuće opcije odredim mesto na kome će biti postavljen novi element. Ja ću se zadržati na trenutnoj poziciji i iskoristiti priliku da definišem i odgovarajući ID da bih kasnije lakše mogao da ga koristim pri dodeljivanju stilova. Ako nakon toga kliknem na dugme OK, na ekranu će se pojaviti sadržaj koji potvrđuje da sam uspešno kreirao novi div tag. U ovom trenutku on samo označava mesto na koje ću kasnije da unesem konkretne podatke pa ću zato zadržati tekst koji je automatski generisan.

Isti rezultat sam mogao da postignem i upotrebom funkcija koje se nalaze u Insert panelu. Da bih vam to i dokazao, ja ću prvo kliknuti na ovo dugme a zatim izabrati opciju Layout. Nakon toga mogu da kliknem na dugme Insert Div Tag i ponovim čitav postupak. Pošto mi trenutno nije potreban još jedan ovakav element, ja ću sa Cancel zatvoriti ovaj okvir i vratiti sa na odeljak u kome je prikazan kompletan kod moje stranice.

Pre nego što dovršim ovu lekciju želeo bih da vam pokažem i kako se unose komentari. To su delovi koda koji nemaju nikakvu drugu svrhu osim da vam posluže kao podsetnik ili olakšaju orijentaciju. Ja ću iskoristiti priliku da ubacim kratak komentar odmah iza prvog div taga pa ću zato prvo uneti znak za manje od < a zatim i znaka uzvika ! koji prate dve crtice –. Sav tekst koji sledi je ustvari komentar koji neće biti vidljiv u Browser-u ali će mi pomoći u izradi ove stranice.