dwcc_04-4585214

Copyright © Link group

4. Fajlovi i struktura sajta

Pre nego što krenemo u kreiranje projekata i fajlova u Dreamweaveru, moramo se podsetiti nekih osnovnih pojmova koji se tiču interneta, WWW-a i HTML/CSS jezika.

URL i DNS Kada govorimo o sajtovima iz ugla korisnika, tj. posetioca, uočavamo osnovnu adresu (URL) sajta. Na primer, adresa jednog sajta je http://www.it-akademija.com/. Ali, šta se dešava kada tu adresu unesemo u browser? Iz ugla prosečnog korisnika, praktično momentalno (zavisno od brzine interneta) otvara se stranica koja sadrži određeni sadržaj. U malopre pomenutom slučaju to je početna stranica sajta ITAkademije. Dok smo na sajtu, možemo pratiti razne linkove koji će nam otvarati druge stranice uz istovremenu promenu trenutne url adrese u browseru. Iz drugog ugla, ako pogledamo kako sve to funkcioniše, svaki sajt u osnovi poseduje root ili koreni folder. U njemu se nalaze svi fajlovi sajta i oni koji su relevantni za njegovo funkcionisanje. Taj folder se nalazi na računaru koji nazivamo server ili web server. Serveri su specijalizovani računari koji su stalno uključeni i konstantno povezani sa internetom u svrhu opsluživanja sajtova i njihovih korisnika. Kada unesemo željenu adresu u browser, pomoću DNS sistema (Domain Name System) browser dobija informaciju o IP adresi servera, odnosno sajta koji je potrebno učitati. IP adresa je tačna adresa gde se željeni sajt nalazi. Drugim rečima, mi koristimo URL (adresu sajta) kako bismo olakšali pamćenje, dok sami računari sajtove pronalaze pomoću IP adresa. Na primer, lakše je zapamtiti www.google.com, nego njegovu IP adresu: 74.125.224.72, iako možemo ukucati taj IP u browser i dobiti isti rezultat (probajte, možete otvoriti bilo koji browser i u adress bar uneti malopre pomenutu IP adresu u obliku: http://74.125.224.72/). Pošto browser od DNS servera dobije informaciju o IP adresi sajta, on pristupa njoj, otvara root folder i traži index.html (ili default.html), te ih onda prikazuje korisniku.


slika 4.1 - proces pristupanja sajtu

Osnovna struktura i organizacija sajta Kada počinjemo sa kreiranjem sajta, kreiramo root folder. U njemu ćemo kreirati i postavljati naše fajlove. Pošto završimo sajt, iskopiraćemo ceo root folder na server. S tim na umu, možemo razlikovati dva, odnosno tri osnovna dela:

1. Lokalni folder (engl. Local Folder) - U njemu se nalaze svi fajlovi, slike i ostali elementi web sajta. Najjednostavnije rečeno, root nivo je početna tačka koju browseri koriste da pronađu objekte sajta.

2. Udaljeni folder (engl. Remote Folder) - Ovo je folder gde publikujemo sajt i on se nalazi na serveru.

3. Testing server folder - Ovo je folder gde Dreamweaver procesira dinamičke fajlove da bi kreirao dinamički sadržaj i gde se konektuje sa bazom podataka dok kreiramo i testiramo sajt. Server za testiranje može biti na lokalnom računaru i ne preporučuje se korišćenje udaljenog foldera kao testing server foldera.

Dakle, pri kreiranju sajta sve stranice i ostale fajlove kreiramo/postavljamo u za to namenski kreiran folder na lokalnom računaru. Po završetku kreiranja sajta, taj folder kopiramo na server, gde on postaje dostupan svima. Ukoliko sajt ostane u lokalnom folderu, niko osim nas ga neće nikad videti i zato ga moramo postaviti u udaljeni folder na serveru. Da bismo možda lakše objasnili, napravićemo analogiju sa slikanjem. Umetnik radi u svom ateljeu (lokalni folder) gde stvara umetnička dela (sajtove). Kada završi određeno delo, njega


izlaže u galeriji (udaljeni folder) i tada je delo dostupno javnosti. Kada ne bi izložio određenu sliku u galeriji, niko nikada ne bi saznao za nju. Dakle, dobro zapamtite: Svi fajlovi sajta moraju biti u jednom folderu koji namenski kreiramo za sajt i koji se naziva root folder. Ovo podrazumeva sve html stranice, slike, video-fajlove, jquery skripte potrebne za stranice i tako dalje. Ne možemo i ne smemo ostaviti neki potreban fajl za sajt, npr. na desktopu. Kada kopiramo sajt u udaljeni folder (postavljamo na net) ili ga samo šaljemo na drugi računar, kopiramo uvek ceo folder, nikako samo neke fajlove. Ukoliko bi koleginici/kolegi iskopirali samo, na primer, html fajlove, izgubili bismo pritom sve slike, svu stilizaciju, fontove i tako dalje. U root folderu sajta ne postavljamo suvišne fajlove. To znači da Photoshop i Illustrator fajlove sa dizajnom za sajt, Word fajlove sa tekstovima koje smo prekopirali u html stranice i tako dalje, nema potrebe da čuvamo u root folderu. Oni nisu direktno vezani za rad sajta i shodno tome samo prave gužvu. Ipak, ukoliko niste sigurni da li je neki fajl potreban ili ne, ostavite ga. Manja je šteta to, nego da obrišete neki bitan. Onda proverite. Ne brišite automatski kreirane fajlove iz sajta. Dreamweaver će sigurno u nekom trenutku sam kreirati dodatne fajlove unutar sajta. Mnogi početnici dolaze u iskušenje da obrišu sve te fajlove, ali nemojte to raditi. Dw često kreira dodatne skripte, CSS fajlove i sl, da bi uradio ono što Vi želite. Na primer, kreiranje fluid grid layouta kreira automatski jedan CSS i jedan js fajl, i uz to drugi CSS fajl za čije ime će nas pitati (o tome detaljno kasnije). Svaki sajt je nezavistan od drugih sajtova. Ukoliko je potrebno da dva sajta koriste isti materijal (sliku, CSS fajl, skriptu itd.), iskopirajte taj materijal u oba root foldera, nemojte pozivati iz jednog sajta, objekat iz root foldera drugog sajta.

Konvencije u imenovanju fajlova Kod kreiranja fajlova za web od vitalnog je značaja pratiti pravila za imenovanje fajlova. Ako nisu ispravno imenovane, izvesne stranice mogu postati nedostupne ili jednostavno neće raditi pravilno. Ova pravila su prilično jednostavna i trebalo bi ih se uvek pridržavati.

1. Ne koristiti razmake u imenima fajlova - Ako je potrebno razdvojiti više reči, koristi se donja crta (_) (engl. Underscore) ili crtica (-) (engl. Hypen). Na primer: o_nama.html ili o-nama.html Većina servera će dozvoliti razmake u imenima fajlova, ali ovo može biti nepodesno jer će neki serveri prikazati %20 umesto razmaka i može dovesti do zabune prilikom slanja linka te strane. Oznaka za razmak je %20 (space).

2. Kraća imena fajlova su bolja - Bolje je imenovati fajl o-nama.html nego pogledajte-

vise-o-nama-i-o-nasim-proizvodima.html. Naslov i sav tekst koji je vidljiv na stranici nije povezan sa nazivom fajla.

3. Ne koristiti specijalne karaktere #, $, %, *, & - Ovi karakteri imaju neka druga značenja, kao što su na primer URL perimetri, koje možete slučajno aktivirati. Brojevi se mogu koristiti u imenima fajlova, ali treba izbegavati korišćenje brojeva kao prvi karakter u imenu.

4. Ne mešati velika i mala slova - Koristite uvek mala slova u imenima fajlova. Trebalo bi napisati index.html, a ne Index.html, niti INDEX.HTML. Mnogim web serverima neće


smetati, ali neki UNIX serveri prave razliku između velikih i malih slova (Case Sensitive) i linkovi se neće pravilno razrešiti.

5. Konzistentnost u dužini ekstenzije fajlova – Iako HTML dokumenti imaju dve ekstenzije, trebalo bi koristiti ili .html ili .htm, nikako obe u okviru istog sajta. Preporučuje se .html.

Linkovi (hyperlinks) Linkovi ili hiperlinkovi (engl. hyperlinks) nam omogućavaju povezivanje i prelazak sa strane na stranu, kao i povezivanje fajlova, emailova i td. Svi smo koristili linkove na internetu jer bez njih bismo morali svaki put ručno da ukucavamo adresu koju želimo da otvorimo. Postoje dve osnovne kategorije. Linkovi mogu biti relativni i absolutni. Sami relativni linkovi se dele na dve pod-kategorije, tako da govorimo praktično o tri tipa linkova u zavisnosti od putanje koje sadrže: 1. Apsolutne putanje Apsolutna putanja je ceo URL do linkovanog fajla ili stranice, kao u sledećim primerima: http://upload.wikimedia.org/wikipedia/commons/2/23/NoviBG_Nov30_2005.jpg ili http://www.it-akademija.com Apsolutni linkovi su možda najjednostavniji za unos, ali mogu biti najproblematičniji za kasniju izmenu. U svakom slučaju, kod ovog tipa linkova, bitno je samo na koju stranicu (ili drugi element) vodi link, dok nije bitno na kojoj stranici se sam link i nalazi (odakle kreće). Ova vrsta putanja se mora koristiti kada se linkuju fajlovi koji se nalaze na drugim serverima, kao na primer link sa vašeg sajta ka index stranici sajta ITAkademije. Ovakve putanje se ne preporučuju u okviru stranica istog sajta, jer su mnogo teže za naknadnu izmenu. 2. Putanje relativne u odnosu na dokument Ovaj tip linka specificira putanju i ime dokumenta na koji se linkuje, kao na primer about.html ili products/catalog.html. Kod ovog tipa linkovanja ideja je da ne moramo da dodajemo apsolutni (ceo) URL, uključujući i http:// da bi linkovi radili, jer se svi linkovani fajlovi nalaze na Root nivou, ili u Root lokalnom folderu, ili u nekom podfolderu. Drugim rečima, nasuprot apsolutnim linkovima kod kojih je bitna samo destinacija, kod relativnih linkova je veoma bitno i gde se sam link nalazi, tj. odakle usmerava posetioca sajta. To je zbog toga što ovaj tip linkova postavlja relaciju između početne i krajnje tačke. Na primer, putanja products/catalog.html kazuje čitaču da se pomeri jedan nivo ispod u hijerarhiji foldera, od trenutnog nivoa do foldera products i tu pronađe fajl koji se zove catalog.html. Dakle, link govori browseru: prvo otvori folder products i u njemu nađi catalog.html. Ako bismo želeli da na stranici catalog.html postavimo link koji će voditi ka stranici index.html, dodaćemo dve tačke i slash (../) ispred imena fajla: ../index.html. Ove dve tačke kazuju čitaču da se pomeri nivo iznad u hijerarhiji foldera i da otvori index.html. Dakle, izađi iz trenutnog foldera, i tu potraži index.html.


Sledeća tabela prikazuje različita scenarija i može pomoći radi malo boljeg razumevanja strukture putanja.

slika 4.2 - primer strukture sajta

Link od X do Y Primer linka

Od index.html do about.html about.html

Od about.html do index.html index.html

Od index.html do catalog.html products/catalog.html

Od catalog.html do archive.html archive.html

Od catalog.html do index.html ../index.html

tabela 4.2 - primeri putanje linkova na osnovu strukture iz slike 4.2

Putanje relativne u odnosu na Root folder sajta Linkovi koji koriste putanje relativne u odnosu na Root sajt prikazuju putanju i ime dokumenta na koji se linkuje, ali one usmeravaju čitače da počnu pretragu za putanjom počev od Root nivoa sajta. Da bismo napisali ovu putanju, dodaćemo Forward slash ispred prvog foldera ili imena fajla kao u sledećem primeru: /kontakt.html /galerija/planine.html Ovakve putanje su bolje ukoliko se koristi više servera za isti sajt, ili više sajtova na istom serveru, ali za početak preporuka je da koristite putanje relativne u odnosu na dokument. Za ovaj tip linkova potreban je pravilno konfigurisan web server i oni ne funkcionišu u lokalu (na našim računarima). Apsolutni vs Relativni linkovi Da bismo dodatno pojasnili linkove zamislite sledeću situaciju. Nalazite se na keju u Zemunu i potrebno je da dođete do prostorija ITAkademije. Ukoliko pitate slučajnog prolaznika za pravac, možete dobiti npr. ovakav odgovor: Pođite ovom


poprečnom ulicom do kraja. Na raskrsnici skrenite desno i pratite ulicu narednih par stotina metara. Sa desne strane ćete ugledati objekat. Na ovaj način, prolaznik je znao gde se nalazi željena lokacija i uputio Vas je do nje sa tačke na kojoj se oboje nalazite. Praktično, dao Vam je relativni link. Isto tako, mogao je reći: ITAkademija se nalazi u Cara Dušana 34, 11080 Zemun, Beograd, Srbija. U ovoj varijanti, dobili smo apsolutnu putanju. Zamislićemo da imamo mapu (ili GPS navigaciju) i pomoću nje ćemo isto tako lako naći željenu lokaciju, ali na drugačiji način. A sada, zamislite šta bi se desilo da se umesto na toj konkretnoj lokaciji, nalazimo npr. na Tajms skveru u Njujorku, a da dobijemo potpuno iste odgovore? Sa apsolutnom putanjom (konkretnom adresom) bismo se nekako i snašli. Tačno je da bismo morali bi da putujemo dosta daleko i dosta dugo, ali bismo našli lokaciju jer znamo i zemlju i grad i tačnu adresu. Ali sa relativnom putanjom (do kraja ulice pa desno) ne bismo išlo sve tako glatko. Završili bismo u Central parku, daleko od željenog odredišta. Ako se vratimo na našu temu i linkove, verujem da je jasno da apsolutni linkovi ne zavise od početne pozicije, što nije slučaj sa relativnim. Sada se verovatno pitate, zašto onda ne bi stalno koristili samo apsolutne linkove? Iako to na prvi pogled deluje logično, to nije najsrećnije rešenje. U okviru jednog sajta uvek treba koristiti relativne linkove jer se sve veze odvijaju unutar root foldera, a koji, podsetiću, uvek se ceo kopira gde god da se nalazio. Zbog toga možemo na svojim računarima razvijati sajtove i postavljati linkove, a onda kada prekopiramo na net, sve i dalje funkcioniše kako treba. Da bi to pojasnio, vratiću se na primer od malopre. Zamislite da sada ceo grad Beograd prebacimo na Mesec (nemoguće je, ali hipotetički zamislite). Da li će tada linkovi postavljeni pre preseljenja grada i dalje funkcionisati? Relativni, kreirani unutar grada hoće, jer se sam grad nije promenio (gde god se nalazio), ali će svi apsolutni biti pogrešni (jer Beograd više nije u Srbiji, a ni na Zemlji). Ovo je karikirani primer, ali dobro predstavlja analogiju sa linkovima. Relativni i apsolutni imaju svoje mesto i koristimo ih po potrebi. Relativne za veze unutar sajta, a apsolutne za veze ka drugim sajtovima i lokacijama na njima. U nastavku kursa ćemo se vratiti na linkove i njihovo kreiranje u Dreamweaveru. Pitanje: Putanja http://www.google.com/ je:

• apsolutna • relativna • i apsolutna i relativna istovremeno

Sažetak Sajtove razvijamo u lokalnom folderu na računaru. Kada završimo sa izradom, prebacujemo ceo root folder na server na kome će se sajt nalaziti. Postoje dve vrste linkova, relativni i apsolutni. Relativne koristimo za veze unutar sajta, a apsolutne za veze ka drugim elementima i stranicama van sajta.

dwcc_04-4585214

Documents