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 index (početna) stranica sajta IT Akademije. 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.

 

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. O zakupu prostora na serveru ili celog servera će biti više reči u daljem toku kursa.
  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, ako bismo rezimirali sve ranije rečeno, 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.

 

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):

    o_nama.html
    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.
  3. Ne koristiti specijalne karaktere #, $, %, *, & - Ovi karakteri imaju neka druga značenja, kao na primer URL perimetri, koja 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 - 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 – Trebalo bi koristiti ili .html ili .htm ekstenzije, nikako zajedno. Preporučuje se .html.

 

Linkovi (hyperlinks)

Linkovi ili hiperlinkovi (eng. hyperlinks) nam mogućavaju povezivanje i prelazak sa strane na stranu, kao i povezivanje fajlova, emailova etc. Svi smo koristili linkove na internetu jer bez njih bismo morali svaki put ručno da ukucavamo adresu koju želimo da otvorimo.

Postoje tri osnovne kategorije u zavisnosti od putanje koje sadrže:

  • 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.

    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. 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. Sledeća tabela prikazuje različita scenarija i može pomoći radi malo boljeg razumevanja strukture putanja.

 

 Link od X do YPrimer 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

 

  • 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.

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 IT akademije. Ovakve putanje se ne preporučuju u okviru stranica istog sajta, jer su mnogo teže za izmenu.

 

Definisanje novog sajta

Da bismo definisali novi sajt na lokalu (lokalnom računaru - računar na kome radimo) uradićemo sledeće:

1. Izabraćemo iz padajućih menija Site > New Site...

 

Site setup dijalog

 

Novi sajt možemo kreirati i iz application bara, kao i iz manage sites dijaloga.

Pošto se otvorio novi dijalog za kreiranje sajta, primetićemo da su njegove opcije podeljene u četiri grupe prikazane sa leve strane, pri čemu poslednja grupa ima dodatne kategorije. Počećemo od prve, site grupe, koja je po defaultu i selektovana.

 

2. Unećemo u polje Site Name željeno ime za novi sajt. Ja ću uneti ime DW site. Kad birate ime za definiciju sajta, koristite nešto smisleno što će podsećati na taj projekat. Ovo ime je vidljivo samo nama, odnosno korisnicima DW-a i nije vidljivo na samom sajtu.

Ukoliko ste radili u ranijim verzijama DW-a, primetićete da je od CS5 ovaj dijalog drastično izmenjen, ali su sve stare opcije i dalje tu, samo malo logičnije organizovane.

 

3. U polju Local Site Folder DW je predložio novi folder za naš novi sajt. Da podsetimo, taj folder će biti root folder našeg sajta i ne bi trebalo koristiti postojeći, već kreirati novi, prazan (osim ukoliko ne nastavljamo rad na već postojećem sajtu).

Kliknućemo levim tasterom miša na ikonicu foldera pored polja. Otvara se standardni win dijalog za izbor foldera. Odabraćemo ili kreirati novi root folder i potvrditi klikom na select dugme1.

Izbor root direktorijuma

 

4. Prethodnim koracima smo definisali osnovu, ali se nećemo zadržati na tome. Za sada ćemo zanemariti opcije Servers i Version Control (njima ćemo se pozabaviti u poslednjem modulu kursa) i izabraćemo grupu opcija Advanced settings iz stabla levo. Otvoriće nam se dodatne kategorije u okviru te grupe i po defaultu je izabrano Local Info.

Prva stavka je Default Images Folder. DW nam ovde nudi odmah na početku rada, da izaberemo folder u kome će biti smeštene slike.

Iako nije obavezno, dobra praksa u kreiranju sajtova je da različite tipove fajlova čuvate u posebnim podfolderima. Na primer, mnogi sajtovi imaju foldere za slike, css fajlove, pdf dokumenta i tako dalje. Kao i u svakom poslu, pravilna organizacija je važna jer u suprotnom može se doći u situaciju gde bi 100+ fajlova različitih tipova, namena i upotreba bilo u root folderu. Tada održavanje i izmene postaju noćna mora.

Kao i kod izbora root foldera, klikom na ikonicu foldera pored polja otvaramo dijalog za izbor foldera. DW nas odmah postavlja u root folder i u njemu kreiramo folder images.

 

5. Sledeća bitna stavka u istom dijalogu je Links relative to. Ta opcija je po defaultu postavljena na document. 

Ranije u tekstu smo pojasnili linkove i ostavićemo izabranu opciju document jer želimo linkove koji su relativni na dokument.

Default folder za slike i links relative

 

6. Sada ćemo izabrati Save i time zatvoriti dijalog za kreiranje/definisanje novog sajta. Ostalim opcijama ćemo se pozabaviti kasnije u toku kursa. Trenutno imamo kreiranu osnovu za sajt sa svim parametrima podešenim. Panel files bi trebalo da izgleda kao na slici, ako je sve urađeno kako treba.

 

Panel files pošto smo kreirali novi sajt

 

Za sada naš sajt sadrži samo osnovni root folder i u njemu podfolder images, koji je prazan. U narednim lekcijama ćemo kreirati prve fajlove.

1 Ukoliko se umesto select dugmeta pojavljuje open dugme, to znači da je selektovan neki od foldera u trenutnom dijalogu. Potrebno je da željeni folder bude otvoren, ali ništa selektovano u njemu. 

Dodaj komentar Sviđa mi se - (0) Ne sviđa mi se - (0)    

  • Osnovna struktura sajta 1
  • Osnovna struktura sajta 2
  • Osnovna struktura sajta 3