Projektni rad Iz predmeta Web dizajn

Prof. Profesor: Dr. Damnjan Radosavljevi

Student: Nenad Gavrilovi in 100/04

Sadraj:
1. Uvod................................................................................................3 1.1 ta je WEB dizajn......................................................................3 1.2 ta je HTML...............................................................................3 2. Uvod u pravljenje web stranica........................................................4 2.1 Koncepti konstrukcije web stranice............................................4 2.2 Osnove HTML-a eristike............................................................4 2.3 Dodavanje veza na vau stranicu................................................6 3. Opis primenjenog softvera...............................................................7 3.1 Strana Start...... ....................................................................................7 3.2 Kreiranje i rad sa dokumentima 10 3.3 Rad sa panoima ..11 3.4 Panoi i grupe panoa ....11 3.5 Dostupnost Vaih strana 13 4. Rad sa tekstom .14 4.1 Osnove u vezi teksta ..14 4.2 Tekst u pretraivau ...14 4.3 Tekst u Dreamweaveru ..14 5. Rad sa slikama .15 5.1 Osnovno o slikama..15 5.2 Slike u Dreamweaveru ...15 5.3 Slike kao pozadina .16 6.Linkovi u Dreamweaver-u 17 6.1 Linkovi na elektronsku potu 18 6.2 Boja pozadine i slike u pozadini 19 7. Kreiranje tabela .20 7.1 Osnovno o tabelama ...20 7.2 Pomo u pregledu tabela 21 7.3 Umetanje tabela ..21 8. Linkovi .22 8.1 Upravljanje linkovima 23 8.2 Host Directory..25 8.3 Veza tipa Local/Network.26 9. Zakljuak .27 LITERATURA .27
2

1.Uvod

1.1 ta je WEB dizajn?

Web dizajn je meavina kreativnih sposobnosti i tehnikog znanja, a ni jedna od ovih osobina nije bitnija od ostalih...

Web dizajn (. web design) predstavlja grafiko osmiljavanj ili dizajniranje Internet srtanice koristei slke, jezik za oznaavanje i formatiranje "HTML", stardandizaciju i upotrebljivost stranice.Opte prihvaeno je da pod taj pojam spada i razvoj Internet softvera (eng. web development) ali u sutini to su dve raliite stvari.

1.2 ta je HTML?
HTML (HyperText Markup Language, jezik za oznaavanje hiperteksta) je jezik namenjen opisu web stranica. Pomou njega se jednostavno mogu odvojiti elementi kao to su naslovi, paragrafi, citati i slino. Pored toga, u HTML standard su ugraeni elementi koji detaljnije opisuju sam dokument kao to su kratak opis dokumenta, kljune rei, podaci o autoru i slino. Ovi podaci su opte poznati kao meta podaci i jasno su odvojeni od sadraja dokumenta. HTML je nastao uproavanjem SGML (Standard Generalized Markup Language, standardizovani uopteni jezik za oznaavanje) standarda sa svrhom opisa dokumenta koji se objavljuju na webu. U poetku je bio prilino ogranien to se oznaavanja sadraja tie i pruao je uglavnom elementarne stvari za oznaavanje i formatiranje teksta (paragrafi, naslovi, citati itd.). Kako je veb rastao tako je rasla i potreba za bogatijim sadrajem te je u tom smeru razvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika, slojeva, napredno formatiranje teksta itd.

2. Uvod u pravljenje web stranica

2.1 Koncepti konstrukcije web stranice

Tekst koji upisujete na web stranicu je isti kao tekst u svim drugim dokumentima. Razlika je u tome to tekst sadri kodove koji omoguuju itanje u formatiranom obliku pomou vaeg omiljenog pretraivaa. Ove kodove morate ukljuiti na vau stranicu da bi ona radila ali ako koristite HTML programe za ureivanje kao to su PageMill ili HoTMetal ne morate da pamtite kodove. Ako elite, moete napisati stranicu u programu za ureivanje teksta kao to je "WordPad" pa je sauvati kao tekstuelnu datoteku pomou komande Save As. Druga mogunost je da napiete obinu stranicu u Wordu ili WordPerfectu koji vam omoguuju da sauvate stranicu kao HTML datoteku. Meutim, ako razumete ta je iza prozora to e vam pomoi da razumete mogunosti web dizajna i pomoi vam da reite probleme u radu ako stvari ne izgledaju onako kako ste hteli. Mnogi ljudi ne znaju da mogu videti (i kopirati!) kodove iz drugih web stranica. Da biste videli kodove za odreenu stranicu pritisnite miem na View koji se nalazi na liniji menija pa izaberite stavku Source. Potom moete sei i prenositi delove koda koliko god elite. Takoe je dobro videti kako su drugi ljudi konstruisali svoju web stranicu. Pre nego to ponete da pravite stranicu razmislite o sledeem: 1 Zato pravite stranicu ? 2 ta elite da kaete ? 3 Zato e se ljudi zaustaviti na vaoj stranici ? 4 Koje grafike elite da ukljuite ? 5 Koje veze elite da ukljuite ? 6 Da li imate ivot mimo raunara ?

2.2 Osnove HTML-a

Kada web pretraiva prikae stranicu kao to je ova koju upravo itate on je ita iz tekstuelne datoteke i trai posebne kodove ili kontrolne oznake da bi znao kako da prikae tekst. HTML oznake mogu rei WWW pretraivau da podeblja tekst u polucrno, u kurziv, da ga pretvori u gornju ivu kolonu ili vezu sa drugim dokumentom. Kontrolne oznake su skoro uvek u parovima i ograene u <(poetna oznaka) i > (zavrna oznaka). Vano je napomenuti da zavrna oznaka </ime oznake> sadri znak "/". Ovaj znak govori 4

pretraivau da prestane sa navedenim oznaavanjem teksta. Ako zaboravite ovaj znak www pretraiva e nastaviti da oznaava ostatak teksta u dokumentu ime e se dobiti udan (i frustrirajui) rezultat. Osnovno formatiranje za korienje HTML oznake je: <IME OZNAKE>tekst</IME OZNAKE>

Kostur strukture dokumenta Svaki HTML dokument treba da sadri odreene standardne HTML oznake. Svaki dokument se sastoji iz dva dela: naslovnog dela i tela teksta. Naslovni deo (HEAD) sadri naslov a telo (BODY) sadri tekst koji se sastoji od pasusa, lista i drugih elemenata. Potrebni elementi su: <html>, <head>, <title>, <body> oznake (i odgovarajue zavrne oznake). Potrebno je da stavite ove oznake u svaku datoteku. Neki pretraivai e formatirati vau HTML datoteku ak i ako ove oznake ne postoje. Ali neki pretraivai to nee uiniti! Obavezno ih ukljuite. esto koriene HTML oznake: <HTML> Ovaj element govori pretraivau da datoteka sadri informacije kodirane u HTML-u. <HEAD> Glavni element identifikuje prvi deo dokumenta kodiranog u HTML-u i sadri naslov. On takoe moe sadrati naprednije kodirane opise dokumenta. <TITLE> Naslovni element sadri naslov dokumenta i odreuje njegov sadraj u optem kontekstu. Naslov se prikazuje negde u prozoru pretraivaa (obino na vrhu) ali ne unutar podruja teksta. Naslov se takoe prikazuje na neijoj listi ili obeleivau pa izaberite opisni, jedinstveni i relativno kratak naslov. Naslov takoe koriste maine za pretraivanje da bi opisale vau stranicu. <BODY> Drugi i vei deo vaeg HTML dokumenta je telo koje sadri sadraj vaeg dokumenta (prikazuje se u podruju teksta u prozoru pretraivaa). Oznake objanjene u narednom delu teksta koriste se u telu vaeg HTML dokumenta. <H> HTML ima est nivoa gornjih ivih kolona oznaenih brojevima od 1 do 6 gde je 1 najznaajniji. Gornje ive kolone su prikazane u veim i/ili vie polucrnim fontovima od normalnog tela teksta. Prva gornja iva kolona u svakom dokumentu treba da je oznaena kao <H1>. Za svaki sledei nivo gornje ive kolone uveajte broj da biste smanjili veliinu i isticanje fonta.

<P> 6

Web pretraiva ignorie prekid reda (pritisak na Return ili Enter taster na vaoj tastaturi) i poinje novi pasus samo kad naie na oznaku <P>. Sve pasuse morate oznaiti elementima <P>. Pretraiva ignorie sva uvlaenja teksta ili prazne redove u izvornom tekstu. Ako nema <P>

2.3 Dodavanje veza na vau stranicu

Glavna snaga HTML-a dolazi iz njegove sposobnosti da povee tekst i/ili sliku sa drugim dokumentom ili delom dokumenta. Pretraiva naglaava odreeni tekst ili sliku bojom i/ili podvlaenjem da bi naznaio da je to hiperveza. Pojedinana hipertekst oznaka vezana za HTML je <A> to znai anchor (sidro). Da biste ukljuili sidro u va dokument: 1 ponite sidro sa <A (stavlja se razmak posle A) odredite dokument koji povezujete unoenjem URL-a ili imena putanje HREF="ime_datoteke" nakon ega sledi zavrna oznaka u obliku desne uglaste zagrade (>) unesite tekst koji e sluiti kao hipertekst veza u tekuem dokumentu unesite zavrnu oznaku sidra: </A> (nije potreban razmak pre zavrne oznake Evo primera hipertekst reference: <HREF=http://snow.utoronto.ca>SNOW: Special Needs Opportunity Windows</A> Ovaj unos pretvara rei SNOW: Special Needs Opportunity Windows u hiper vezu do lokacije dokumenta (URL) na Internetu: http://snow.utoronto.ca Takoe moete napraviti veze do drugih datoteka uskladitenih u istom direktorijumu u kojem je datoteka koja sadri referentni kod hiperveze. Na primer: <A HREF="veze_ka_resursima.html">Stranica sa vezama ka resursima</A>

3. Opis primenjenog softvera -DREAMWEAVERPrvi put kada pokrenete svoju novu kopiju Dreamweavera MX 2004, susreete se sa stranom Start. Ova strana nije samo obina strana za dobrolicu, ona se prikazuje svaki put kada Dreamweaver radi, i ako nije otvoren nijedan dokument. Izaberite da otvorite neki dokument koji ste prethodno otvarali, brzo kreirajte novi dokument i definiite sajt iz samo jednog ekrana. Ako vam se ova strana ne dopada, moete je iskljuiti u okviru za dijalog Preferences.

3.1Strana Start
Od verzije Dreamweaver MX 2004 imate mogunost da program otvarate sa prijateljski nastrojenom poetnom stranom Start. Pored linkova koji vode u tutorijal za Dreamweaver, moete brzo pristupiti i sledeim stavkama: Otvaranje dokumenata sa kojima ste poslednji put radili (alternativa opciji File > Open iz menija). Kreiranje novih dokumenata razliitih tipova (alternativa za File > New i okvir za dijalog New Document, tako da ne morate da se borite sa okvirom za dijalog New Document). Ako izaberete opciju More Documents, otvorie se okvir za dijalog New Document. Kreiranje novog sajta (alternativa za Site > Manage Sites, pa dugme New). Kreiranje novih dokumenata na bazi razliitih primera (isti primeri su dostupni i u okviru za dijalog New Document). Provera novih dodataka u Dreamweaver Exchangeu (alternativa za Help > Dreamweaver Exchange). Ako izaberete dugme Dreamweaver Tour, otii ete na web sajt Macromedie. Ako izaberete dugme Dreamweaver Tutorial, otvorie se pomo iz programa. Ovo ste mogli da izaberete i iz menija Help. Ovde nema nieg to ne moete da uradite i na neki drugi nain, ali je dobro to su poslovi koje obavljate na poetku rada grupisani na jednom mestu, dostupni iz jednog centralnog interfejsa. Ako ne elite da se bavite poetnom stranom, izaberite opciju Dont Show Again. Ako elite da ukljuite ili iskljuite prikazivanje strane Start, otvorite okvir za dijalog Preferences > General (Edit > Preferences) i potvrdite ili nemojte porvrditi opciju Show Start Page. Ako je ukljueno prikazivanje strane Start, ona e se prikazati svaki put kada pokrenete program, i kad god nije otvoren nijedan dokument.

3.2 Kreiranje i rad sa dokumentima

Osnovni pojmovi vezani za kreiranje dokumenata

Dreamweaver nije namenjen samo za kreiranje HTML strana, iako je to verovatno vrsta strana koju e veina korisnika najee praviti. Sa verzijom Dreamweaver MX 2004 moete da pravite bilo koju vrstu dokumenta koji je vezan za Web. Svi dokumenti mogu da se kreiraju, menjaju, pa ak i grafiki prikazuju u prikazu Design. To se ne odnosi samo na HTML, ve i na dokumente koji rade sa ivim podacima, kao to su ASP, CFM, PHP i JSP, zatim dokumenti za podrku, kao to su CSS i JS dokumenti, kao i razliiti drugi dokumenti, kao to su XML, XHTML i WML. Usled ovih novih mogunosti, kreiranje dokumenta u Dreamweaveru je i dalje osnovna stvar, ali vie ne tako jednostavna. Okvir za dijalog New Document omoguava da dokumente kreirate od poetka, kao i da ih uvozite iz nekih drugih izvora.

Okvir za dijalog New Document

Kada izaberete opciju File > New, ili pritisnete Ctrl+N, otvorie se okvir za dijalog New Document. U ovom okviru za dijalog postoji mnotvo opcija, preko kojih moete da kreirate dokumenat bilo koje vrste. Tipovi dokumenata koji se kreiraju

10

Vei deo okvira za dijalog zauzimaju opcije za kreiranje razliitih tipova dokumenata. U krajnjoj levoj koloni su prikazane kategorije sa osnovnim tipovima dokumenata. To su: Basic, Dynamic, Template, itd. Veinom ovih tipova se neemo baviti u ovom poglavlju. Ako elite da kreirate standardnu HTML stranu, izaberite opciju Basic > HTML. Iz krajnje leve kolone izaberite opciju Basic, a iz desne kolone opciju HTML.

Poto u okviru za dijalog postoji tako mnogo opcija, sa kojima je teko snai se, postoji i deo sa opisom svake opcije, koji se nalazi u donjem desnom uglu. Iz druge kolone izaberite neki tip datoteke i proitajte kratak opis koji se odnosi na to to ste izabrali. Za neke opcije e se u gornjem desnom uglu prikazati i slika. Treba da znate da iako se Dreamweaver moe koristiti za kreiranje skoro svih tipova dokumenata, ipak nisu svi ti tipovi prikazani u prozoru Design. Ovde su prikazani samo oni tipovi datoteka koji se koriste za kreiranje vidljivih web strana, odnosno strana koje se mogu prikazati u prikazu Design. Drugi tipovi datoteka, kao to su JS, CSS i TXT moraju da se prikazuju i ureuju u prozoru Code.

3.3 Rad sa panoima

11

injenica je da ovde ima mnogo panoa. S vremena na vreme svaki od njih postaje koristan, ali su tu i oni koji tog trenutka nisu potrebni, tako da je onaj potreban teko pronai. Mnogi poslovi u Dreamweaveru zahtevaju panoe.

3.4 Panoi i grupe panoa

Bilo koji pano preko menija Windows moe da se otvori ili proiri. Tu su prikazane i liste preica za otvaranje i zatvaranje panoa. Veina panoa Dreamweavera se nalaze u grupama, pri emu se pojedinanom panou pristupa preko kartice u prozoru grupe. (Tehniki govorei, svi panoi se nalaze u grupama, ali neki, kao to je CSS pano, se nalaze sami u grupi.) Grupe su logiki organizovane, tako da intuitivno moete da zakljuite koji se pano gde nalazi. Zaglavlja panoa i grupa imaju i meni sa opcijama, preko kojeg moete da obavljate poslove vezane za panoe. Na slici su prikazane tipine grupe panoa sa istaknutim osobinama.

Ako elite da proirite ili samete grupu panoa, kliknite strelicu za saimanje ili proirivanje, koja se nalazi u zaglavlju panoa. Ako je potrebno, prozor panoa se iri da bi prihvatio proirene panoe. Ako elite da proirite grupu panoa i promenite joj veliinu, moete da odete u meni sa opcijama i izaberete opciju Maximize Panel Group. Ako elite da podesite relativnu visinu dve grupe panoa u okviru prozora, postavite kursor izmeu njih. Kursor e dobiti oblik dvosmerne strelice. Tada uhvatite granicu i promenite veliinu. Ako elite da zatvorite grupu panoa, otvorite meni sa opcijama i izaberite Close Panel Group. Grupu panoa moete ponovo da otvorite ako neki od panoa izaberete iz menija Window.

12

3.5 Dostupnost Vaih strana

Vae strane izgledaju sjajno u veini pretraivaa, prole su testove provere koda. Ali, da li su strane dostupne? Strane koje su dostupne su one koje mogu da koriste i ljudi sa vizuelnim, motornim, slunim ili nekim drugim nedostacima. Tu spadaju ljudi koji preko itaa ekrana ili nekog drugog specijalnog softvera i hardvera pristupaju Internetu. Da bi World Wide Web bio u potpunosti univerzalan, strane treba da budu dostupne i njima.

Standardni vezani za dostupnost Postoje razliiti standardi koji odreuju da li su web strane dostupne. Najvaniji od njih su: Section 508 U pitanju je federalni dekret koji svi sajtovi koje koriste vladini slubenici, kao i sajtovi koji distribuiraju informacije vezane za vladu moraju potovati. Premda se ovaj standard primenjuje samo na sajtove vezane za federalnu dravu, mnoge vlade niih nivoa su ih prihvatile i za sajtove pod njihovom nadlenosti. Mnoge korporacije su takoe prihvatile ove standarde. W3C Web Accessibilitv Initiative (WAI) WWW Konzorcijum (W3C) je napravio detaljan skup pravila koja su vezana za dostupnost. Mnoga od njih odgovaraju pravilima iz standarda Section 508, ali ovaj standard je generalno iri od standarda Section 508. Pomou panoa Reference moete da nauite vie o standardima vezanim za dostupnost. Otvorite ovaj pano i iz padajueg menija Book izaberite opciju UsableNew Accessibility Reference. Sada na raspolaganju imate sve vrste informacija o razliitim standardima i nainu na koji se oni primenjuju. Opcije Dreamweavera vezane za dostupnost Dreamweaver MX 2004 omoguava da brzo pristupite svakom od atributa vezanim za dostupnost strane. Ako elite da ukljuite atribute dostupnosti, izaberite Edit > Preferences i u okviru za dijalog izaberite kategoriju Accessibility. Opcije koje su date u listi predstavljaju razliite elemente strana koje u HTML-u imaju specijalne atribute vezane za dostupnost. Kada ovde izaberete neku stavku, svaki naredni put kada kliknete objekat, da biste ga ubacili na stranu, u njegovom okviru za dijalog se prikazuju i njegovi atributi vezani za dostupnost. (O opcijama dostupnosti za pojedinane elemente strana moete vie saznati u posebnim odeljcima, onda kada budemo govorili o tim elementima).

13

Provera dostupnosti Kao to moete da proverite ispravnost koda i podrku pretraivaa, moete i da proverite dostupnost svojih strana i sajtova. U Dreamweaveru postoje razliiti alati, koji su upravo tome namenjeni. Ako elite da dobijete izvetaj u vezi dostupnosti tekueg sajta, treba da uradite sledee: 1. Izaberite Site > Reports. 2. Kada se otvori okvir za dijalog Site Reports, izaberite Accessibilty. Moete izabrati opciju da se izvetaj napravi za tekui dokument, ili za izabrane datoteke sa sajta. 3. Pre nego to napravite izvetaj, kliknite dugme Report Settings i izaberite standard prema kojem elite da se provera vri. Kliknite OK da biste zatvorili okvir za dijalog. 4. Klikntie Run da biste napravili izvetaj. Dreamweaver e pregledati Vae strane i rezultate prikazati u prozoru Results.

4. Rad sa tekstom
4.1 Osnove u vezi teksta
Na web strani ne moete da dobijete mnogo vie od osnovnog teksta. Ako sa druge strane sagledate inenjicu da 90% vremena koje provedete kao dizajner za Web radite sa tekstom, onda ete uvideti potrebu da dobro nauite kako HTML radi sa tekstom i ta je to to moe poi naopako. 14

4.2 Tekst u pretraivau

Ako ste ikada pravili neku web stranu, onda znate osnovnu injenicu. HTML je strukturni markup jezik. Njegov osnovni zadatak je da opie logiku strukturu elemenata na strani, kao to je i tekst, tako da logika strane bude jasna svakoj osobi ili ureaju koji je ita. Za formatiranje teksta HTML koristi oznake na nivou bloka, koje se primenjuju na delove teksta i time ukazuju na ulogu tog teksta na strani. Pored oznaka na nivou blokova, koriste se i oznake na nivou karaktera, koje se primenjuju na re ili nekoliko rei u okviru bloka, ime se te rei istiu u odnosu na ostatak teksta.

4.3 Tekst u Dreamweaveru

Tekst se u Dreamweaveru kreira kucanjem ili prebacivanjem iz nekog drugog programa. Funkcije za kucanje, ureivanje i selektovanje teksta su iste kao i u bilo kom programu za ureivanje teksta. Provera pravopisa (Text > Check Spelling) omoguava da proverite pravopis za izabrani tekst ili ceo dokument. Provera se vri na osnovu renika koji postoji u Dreamweaveru, ali i prema Vaem sopstvenom reniku. HTML strukturu ete na tekst primeniti preko Text Property Inspectora, tekstualnih objekata sa palete Insert, kao i razliitih komandi iz menija Insert.

5. Rad sa slikama

5.1 Osnovno o slikama

Rad sa slikama u pretraivau nije komplikovan, ali kao i uvek, postoje odreena pravila koja treba potovati. U ovom odeljku smo pokrili osnove, a to je kako slike funkcioniu na web stranama i kako se uklapaju u svet Dreamweavera.

Slike u pretraivau
Slike se generalno na web strane ubacuju preko oznake img: <img src="fido.gif" width="100" height="100"> Ovaj kod govori pretraivau gde treba da potrai datoteku sa slikom, kao i koliko prostora treba da ostavi. Atribut src je relativni ili apsolutni link do GIF, JPEG ili PNG datoteke. Ovo je obavezan atribut, poto bez njega nema ni slike. Striktno govorei, ni atribut width ni atribut height nisu obavezni, ali ako ih izostavite, pretraiva nema naina da sazna koliko prostora 15

treba da ostavi za sliku, to usporava prikazivanje web strane. Zbog toga se ovi atributi uvek daju. Datoteke koje sadre slike moraju biti u formatu koji pretraiva moe da prepozna i prikae. Trenutno su to formati GIF, JPEG PNG (premda je podrka za PNG nedosledna, tako da mnogi dizajneri odustaju od ovog formata). Format GIF je najbolji za slike koje nisu fotografije, sa ogranienim bojama, gde je obavezm da slike budu jasne. GIF moe da se koristi i za animacije i efekat providnosti. JPEG je najbolji za fotografije i druge slike koje sadre puno boja i suptilne prelaze u bojama.

5.2 Slike u Dreamweaveru

U Dreamweaveru se sa slikama radi veoma lako. U narednim odeljcima emo objasniti osnovne procedure za rad sa slikama u Dreamweaveru. Usput emo istai i potencijalne zamke. Umetanje slika Slike se u Dreamweaver mogu ubaciti na razliite naine. Moete ih ubaciti preko objekta Image sa palete Insert ili preko komand Insert > Image. Ako ste definisali sajt, slike moete da prevuete sa panoa Site ili Assets direktno u prozor Document. Treba da imate na umu da priilikom umetanja slike, Dreamweaver ne ugrauje sliku, kao to to radi sa listama ili tabelama, ve se ubacuje relativna putanja do datoteke sa slikom. Ako koristite relativne putanje u odnosu na dokument Dreamweaver najbolje radi ako ste datoteku pre umetanja zapisali, tako da moe da se izrauna relativna putanja izmeu dokumenta i datoteke sa slikom.

Rad sa slikama Veina osobina slika se u Dreamweaveru mogu podesiti preko Image Property Inspectora. Za podeavanje drugih osobina treba da koristite Selection Inspector ili komandu Edit Tag.

16

5.3 Slike kao pozadina

Od kada su pretraivai poeli da podravaju upotrebu slika, kreatori web strana su poeli da ih koriste, i zloupotrebljavaju, kao elemente pozadine. Slike se kao pozadina dodeljuju stranama, tabelama i nivoima. Slika u pozadini moe da se ponavlja po horizontali ili vertikali, tako da ispuni odreeni prostor. Tekst ili neki drugi grafiki elementi mogu da se postavljaju ispred slike u pozadini, bez ikakvih CSS tehnika za rad sa nivoima. Slika u pozadini moe biti jednostavna, kao to je ponavljanje tapeta u pozadini, ali moe biti i znatno sloenija i skrivenija, kada se koristi kao vodeni ig, baner, itd. Pozadina u stilu ploa, staromodan nain Mnogo pre nego to je CSS stupio na scenu, slike su poele da se koriste kao pozadinski elementi. To je bilo mogue zahvaljujui atributu background. Ako oznaci body dodelite atribut backgorund, onda se slika ponavlja kao pozadina na celoj strani. Ako dodelite atribut background tabeli, vrsti tabele ili eliji, onda se ploe ponavljaju samo u tim elementima. <body background="flowers. jpg"> <table background="polkadots.gif"> Sliku ete u Dreamweaveru da postavite kao pozadinu strane (kao atribut oznake body) ako izaberete Edit > Preferences, zatim izaberete kategoriju General i tamo deselektujete opciju Use CSS instead of HTML Tags. Nakon toga izaberite Modify > Page Properties i promenite boju pozadine. Ovo ete uraditi u kategoriji Appearance. Tabelama i drugim elementima strane ete dodeliti pozadinu preko polja Bg image koje se nalazi u Property Inspectoru.

17

Ovaj metod definisanja pozadine je i dalje ispravan i moda e Vam biti potreban, ali u poreenju sa CSS-om, ima odreene nedostatke: Nema naina da se kontroliu ploe sa slikom. Pretraiva automatski postavlja ploe sa slikom onoliko puta koliko je potrebno, po horizontali ili vertikali i pokuava da ispuni raspoloivi prostor. Iako ovo nije uvek loe, nee se uvek uklapati u Vae elje. Nema naina da se kontrolie pozicija slike. Poploavanje poinje u gornjem levom uglu i ponavlja se odatle.

6.Linkovi u Dreamweaver-u
Kreiranje linkova je zadatak sa kojim ete se prilikom definisanja web sajtova esto suoavati. Sreom, Dreamweaver omoguava da to radite brzo i lako. Sada kada ste shvatili osnovne principe URL putanja, spremni ste da koristite Property Inspector iz Dreamweavera i da dodajete linkove na svoj sajt. Kad god je u Dreamweaveru izabran neki element teksta ili neka slika, na Property Inspectoru se nalaze polja za linkove, kao i za kontrolu informacija vezanih za taj link.

6.1 Linkovi na elektronsku potu Linkovi na elcktronsku potu (email link) su druga vrsta apsolutne putanje. U Dreamweaveru postoji nekoliko razliitih mogunosti za kreiranje ovakvih linkova. Najjednostavnije je da koristite Property Inspector. Izaberite tekst ili sliku koju elite da koristite kao link, i u polju Link Property Inspectora unesite adresu, zajedno sa protokolom mailto: mailto:youraddress@domainname.com

18

Na slici je prikazano ono to se deava. Obratite panju na to da iza dve take nema praznog prostora.

Ako ne elite da svaki put unosite protokol mailto: Dreamweaver ima i objekat Email Link. Evo kako se on koristi: 1. Ako elite da link na elektronsku potu napravite za sliku, kliknite sliku da biste je izabrali. Ako elite da ovakav link napravite za tekst, ili unesite tekst, ili ga izaberite i postavite kursor tamo gde elite da se tekst nae. 2. Sa palete Insert izaberite objekat Email Link (kategorija Common), ili izaberite Insert > Email Link iz glavnog menija Dreamweavera. 3. Kada se pojavi okvir za dijalog Insert Email Link, unesite email adresu na koju elite da link ukazuje (bez protokola mailto:) i kliknite OK.

Nakon to ste na ovaj nain ubacili email link, ako pogledate Property Inspector, videete da se u polju Link prikazuje apsolutni URL, isto kao da ste ga sami uneli. 6.2 Boja pozadine i slike u pozadini Tabele, vrste i elije mogu da imaju podeene boje pozadine, kao i definisane slike koje se prikazuju kao pozadina. Sve to moe da se uradi preko CSS stilova. Napravite novi stil i u okviru za dijalog CSS Style Definition, izaberite kategoriju Background. Ako izaberete sliku u pozadini, moete da podeavate i kako se postavljaju ploe sa slikom i kako se slika postavlja u okviru elementa. Opcije su Repeat, Horizontal Position i Vertical Position.

19

irina i cell padding Sirina tabele i elija, kao i cell padding se mogu kontrolisati preko CSS osobina. Ovim osobinama moete da pristupite ako u okviru za dijalog CSS Style Definition izaberete kategoriju Box. U polju width moete da unesete bilo koji broj u pikselima ili procentima. Ako elite da podesite cell padding, podesite opcije Padding. Upozorenje: Osobinu CSS padding nee svi pretraivai tretirati na pravi nain, tako da pre nego to ovo upotrebite treba paljivo da proverite kako to izgleda u ciljnom pretraivau. Cell spacing se takoe bolje kodira bez primene CSS-a. Ravnanje sadraja elije Sadraj elije moete da ravnate preko CSS osobina vezanih za blokove. Ovim osobinama ete pristupiti ako u okviru za dijalog CSS Style Definition izaberete kategoriju Block. Horizontalno ravnanje ete podesiti preko polja Text Align, a vertikalno preko polja Vertical Alignment.

7. Kreiranje tabela
7.1 Osnovno o tabelama
Tabele same po sebi nije teko shvatiti, ali se one sastoje od mnotva razliitih elemenata, tako da je rad sa tim elementima u Dreamweaveru i pretraivau sloen proces.

20

Tabele u Dreamweaveru
Poto su tabele toliko bitne, u Dreamweaveru postoji niz alata i komandi koje se mogu koristiti za rad sa njima. Neke je sigurnije koristiti od drugih, a neke se koriste intuitivnije od drugih. Bez obzira na to koja je Vaa strategija, bez sumnje ete ih negde koristiti. Interfejsi za rad sa tabelama Naravno da je prva odluka koju treba doneti, kao i sa bilo im drugim u Dreamweaveru, da li sa tabelama elite da radite u prikazu Code ili Design. ak i u okruenju prikaza Design imate na raspolaganju vie mogunosti. Kako bi trebalo da izgleda interfejs za rad sa tabelama? Koja je vizuelna pomo potrebna? Izbor reima rada sa tabelama Ako elite da izaberete reim rada sa tabelama, idite u meni View i izaberite neku od podopcija iz podmenija Table Mode. Moete i da sa palete Layout Insert izaberete neko od tri dugmeta Tab Mode. U svakom sluaju, na raspolaganju imate tri mogunosti: Standard (View > Table Mode > Standard Mode) Ovo je podrazumevani reim za rad sa tabelama. U ovom sluaju se tabele u prikazu Design prikazuju priblino isto kako bi izgledale u pretraivaima. Ovo je reim koji iskusni korisnici najvie vole, ali moe biti nezgrapan, ako tabela ima sloenu strukturu, ili ako postoje male i tanke elije, Expanded (View > Table Mode > Expanded Tables Mode) Ovaj reim, koji je novost u verziji Dreamweaver MX 2004, tabele prikazuje sa vetaki dodatim prostorom izmeu i unutar elija. Dodata je i vidljiva granica tabele, ak i ako tabela nema definisanu granicu. U ovom reimu se rtvuju neki od WYSIWYG (ono to vidi je ono to dobija) kvaliteta koji postoje u reimu Standard. Sa druge strane, struktura tabele se lake prati, a elementi tabele se lake biraju i sa njima se lake radi. Rad u reimu Expanded je isti kao u reimu Standard, ali sa dodatnom pomoi u radu. Layout (View > Table Mode > Layout Mode) Ovaj reim ne samo da razliito prikazuje tabele, u pitanju je potpuna alternativa za rad sa tabelama. Iako je vrlo intuitivan i atraktivan za poetnike u web dizajnu, tu postoji niz opasnosti, tako da moete dobiti strane sa loom strukturom. 7.2 Pomo u pregledu tabela Bez obzira da li radite u reimu Standard ili Expanded, postoji dodatna vizuelna pomo, koju moete dobiti od interfejsa u prikazu Design. Table Widths (View > Visual Aids > Table Widths) - Ovo je novost u verziji Dreamweaver MX 2004. Kada se izabere ova opcija, prikazuje se horizontalna linija na dnu ili vrhu izabrane tabele. Linija ukazuje na dimenzije tabele ili elije. Ako kliknete ikonu u obliku trougla, dobiete dodatnu pomo za izbor elemenata i podeavanje osobina tabela. Ova pomo funkcionie i u reimu Standard i u reimu Expanded.

21

Table Borders (View > Visual Aids > table Borders) Ako radite u reimu Stadnard, ova vizuelna pomo prikazuje ivice tabele, koja nema definisane ivice, tako da se u prikazu Design moe videti struktura tabele, iako se to u pretraivau nee videti. Poto se u reimu Expanded uvek prikazuju ivice, to ova pomo u tom reimu nije potrebna.

7.3 Umetanje tabela Ako elite da ubacite tabelu (osim ako radite u reimu Layout), moete da koristite objekat Table sa palete Layout Insert, ili da izaberete Insert > Table. U oba sluaja se otvara okvir za dijalog Insert Table. U ovom okviru za dijalog moete da definiete osnovnu strukturu tabele. Kada kliknete OK, tabela e se ubaciti. Primetiete da osim definisanja broja vrsta i kolona, druge osobine tabele ne moete da zadajete na ovom mestu. Struktura tabele i atributi se mogu kasnije menjati preko Property Inspectora, tako da nita to ovde podesite nije nepromenljivo.Da li ste ikad pogledali kod potpuno nove tabele i u njemu videli &nbsp;? ta se tu deava? U pitanju je HTML entitet za razmak. Neki pretraivai nee pravilno prikazati prazne elije, tako da Dreamweaver ne dozvoljava da pravite takve elije. Svaki put kada naie na praznu eliju, Dreamweaver stavlja ovaj razmak. im u tu eliju stavite neki sadraj, Dreamweaver brie taj razmak. Obriete sadraj, a razmak se vrati. Ovo je sjajna pomo u rukovanju koju Vam prua Dreamweaver.

22

8. Linkovi
Linkove najee koristimo za povezivanje nae web stranice s drugim web sadrajima, kako bi olakali pristup drugim web stranicama. Oni sadre podatke o tanoj web adresi i nazivu dokumenta na koji se odnosi, i moe biti usmeren na bilo koji dokument bilo gde na internetu, ukljuujuci i na slike, kao i na neku e-mail adresu. Ukoliko kreiramo link na dokument koji se nalazi u istom folderu gdje i dokument iz kojega taj link pozivamo, tada nije potrebno navoditi putanju (path) do tog dokumenta, ve samo njegov taan naziv. Dok ukoliko kreiramo link na dokument koji se nalazi u nekom od niih foldera (subfolderu) u odnosu na dokument iz kojega taj link pozivamo, tada moramo navesti naziv subfoldera, staviti kosu crtu "/", i navesti taan naziv dokumenta. Ako izvodimo link na dokument koji se nalazi na nekoj drugoj web adresi, tada moramo navesti puni naziv te web adrese, staviti kosu crtu "/", i navesti taan naziv dokumenta. U sluaju da pozivamo dokument pod nazivom "index.html", onda nije potrebno navoditi njegovo ime. Kreiranje linka ka e-mail adresi, (npr. svojoj, da bi nas posetioci mogli kontaktirati) tada moramo navesti taan naziv e-mail adrese.

23

8.1 Upravljanje linkovima

Ve ste videli prilino dobar nain za upravljanje linkovima, kada Dreamweaver aurira linkove prilikom promene strukture datoteka. Ovo je ipak samo prvi korak u sloenom sistemu za upravljanje linkovima. Ako koristite mapu sajta, razliite komande iz menija panoa Site, kao Site Reports, strukturu linkova na sajtu moete da imate u svojim rukama. Opcija Point to File iz datoteke Ako ste otvorili datoteku i ako je pano Site bar delimino vidljiv na ekranu, moete da napravite link koji vodi od te datoteke do neke druge, preko opcije point to file. Evo kako se to radi. 1. Otvorite datoteku u kojoj elite da se nalazi link. Proverite da li je pano Site otvoren i vidljiv. 2. Izaberite tekst ili sliku koji e postati link. 3. U Property Inspectoru pronaite polje Link, ali umesto da kliknete dugme Browse ili da unosite ime datoteke u odgovarajue polje, pronaite dugme Point to File. 4. Izaberite ovo dugme i prevucite na pano Site. (Ako je pano Site slobodan, samo prevucite preko nekog njegovog dela i on e se prikazati u prvom planu, tako da moete da vidite ceo prozor. ) Nastavite da vuete sve dok se ne naete iznad datoteke na koju elite da link vodi. Kada se naete na pravoj lokaciji, datoteka e biti istaknuta. 5. Ostavite dugme mia. Ako Vam koordinacija ruke i oka radi kako treba, u otovrenom dokumentu se sada nalazi link na stavku koju ste pokazali.

24

25

FTP
FTP je skraenica za File Transfer Protocol i on je verovatno najrasprostranjeniji metod za prebacivanje web strana na web server. Vi ete verovatno koristiti ovaj metod kada budete pravili organizaciju web strana. Slino kao kod Hypertext Transfer Protocol (HTTP, koji se koristi za transfer web strana preko Interneta), i FTP zahteva klijentsku i serversku aplikaciju. U ovom sluaju Dreamweaver se ponaa kao FTP klijent. Softver na udaljenom serveru se ponaa kao FTP server. Ako kao metod pristupa u Dreamweaveru izaberete FTP onda u okviru za dijalog Site Definition treba da unesete sledee informacije :

8.2 Host Directory Ovim se definie fascikla na serveru gde e se nalaziti prebaeni sajt. To je isto kao facscikla na lokalnom rauinaru. Dosta servera ima osnovnu adresu sajta www.htdocs ili public_html. Ako niste sigurni koja je fascikla domain, ostavite ovo polje prazno. Ovo je podrazumevano glavna fascikla FTP hosta. (Neki host raunari koriste kombinaciju korisniko ime/lozinka da Vas automatski prebace u odgovarajuu fasciklu.) Ako je u polju host directory neispravna putanja, Dreamweaver moda nee uspeti da se povee. ak i ako je FTP informacija ispravna, a vi preko nje moete da se poveete sa drugim klijentima. Ako imate problema kod

26

povezivanja, obriite vrednost u polju Host Directory. Nakon to se poveete, moete da proverite koja je prava fascikla. Login Ovo je korisniko ime Vaeg naloga. Password Ovo je lozinka koja se koristi za proveru identiteta za va nalog kod pristupa FTP serveru. Use Passive FTP Ovo je potrebno kod nekih firewall-ova, a omoguava Dreamweaveru da podesi FTP sesiju umesto da to radi FTP server. Ako niste sigurni ta ovde treba uneti, ostavite polje nepotvreno i proverite sa svojim mrenim administratorom. Use Firewall Ovo diktira da li e Dreamweaver koristiti podeavanja firewalla za povezivanje sa FTP serverom. Ako je potrebno da podesite ovu vrednosti, pitajte svog mrenog administratora. Use Secure FTP Ovim se omoguava da ifrujete svoje informacije o nalogu. Ne ifruju se datoteke koje se prebacuju. Use Check In /Check Out Ovim se ukljuuje softver Dreamweavera za proveru verzija. 8.3 Veza tipa Local/Network Ovakva veza se koristi kada se web server na koji publikujete svoje strane nalazi u istoj lokalnoj mrei (LAN) kao i vi. Ova opcija se esto koristi kada pravite intranet sajt ili ako nudite dizajn i smetaj tuih sajtova. Kod ovakvog tipa veze, morate da zadate putanju do udaljene fascikle. Te informacije moete da unesete ili preko dugmeta Browse moete da pronaete fasciklu na udaljenom sajtu.

27

Kod ovakvog naina povezivanja imate mogunost automatskog osveavanja liste datoteka na udaljenom sajtu. Ako je ova opcija ukljuena, Dreamweaver osveava tu listu za Vas (na primer, povezuje se sa udaljenim raunarom i ponovo pravi listu udaljenih datoteka) svaki put kada se dodaju ili briu udaljene datoteke. Ako ne ukljuite ovu opciju i dalje to moete da uradite runo, ako kliknete dugme Refresh u panou Site, ili ako izaberete View > Refresh u meniju panoa Site.

28

9. Zakljuak

Ovo je bio jedan kolski primer pravljenja web sajta. Treba imati u vidu da je DREAMWEAVER program u kom mozete raditi iako nemate nekog velikog znanja u vezi sa Web dizajnom. Moj savet je da polako sami ponete da kreirate vau web stranicu , ali imajte u vidu i to da vaa prva web stranica ne mora odmah da lii na stranice velikih svetskih korporacija. Vaa prezentacija u poetku ne mora imati neke komplikovane stvari.,ali to svakako ne znai da je vremenom ne moete dopunjavati. Meutim bilo bi korisno da na pocetku razmislite ta sve hoete da sadri vaa web stranica jer ete sebi olakati u daljem radu. Nemojte da vam bude prepreka to to neke stvari ne znate....raspitajte se...i pitajte za savet....

LITERATURA
1. Web dizajn skripte 2. Dragan Stojanovic, Dreamweaver prirucnik, Beograd 2006. 3. Milo Duki, Dreamweaver, Primatron, Novi Sad, 2005. 4. Igo Pobran, Front Page, Primatron, Novi Sad, 2004. 5. N. Desimirovi, M. Ranelovi, Web dizajn, PC Knjiga, Beograd, 2005. 6. Danijel Short, Garo Green, Dreamweaver 8, Komjuter biblioteka, aak 2006. 7. Damnjan Radosavljevi, Nenad Markovi, Kompjuterska grafika, Sven, Ni, 2004.

8. Khristine Annwn, Macromedia Dreamweaver MX iz prve ruke, Mikro Knjiga 2002.

29