Projektni Rad web dizajn

8/3/2019 Projektni Rad web dizajn

1/29

Projektni rad

Iz predmetaWeb dizajn


2/29

Prof. Profesor: Student:Dr. Damnjan Radosavljevi Nenad Gavrilovi in 100/04

Sadraj:

1. Uvod................................................................................................31.1 ta je WEB dizajn......................................................................31.2 ta je HTML...............................................................................3

2. Uvod u pravljenje web stranica........................................................42.1 Koncepti konstrukcije web stranice............................................42.2 Osnove HTML-a eristike............................................................4

2.3 Dodavanje veza na vau stranicu................................................63. Opis primenjenog softvera...............................................................73.1 Strana Start...... ....................................................................................73.2 Kreiranje i rad sa dokumentima 103.3 Rad sa panoima ..113.4 Panoi i grupe panoa ....113.5 Dostupnost Vaih strana 13

4. Rad sa tekstom .144.1 Osnove u vezi teksta ..144.2 Tekst u pretraivau ...144.3 Tekst u Dreamweaveru ..14

5. Rad sa slikama .155.1 Osnovno o slikama..155.2 Slike u Dreamweaveru ...155.3 Slike kao pozadina .16

6.Linkovi u Dreamweaver-u 176.1 Linkovi na elektronsku potu 186.2 Boja pozadine i slike u pozadini 19

7. Kreiranje tabela .207.1 Osnovno o tabelama ...207.2 Pomo u pregledu tabela 21

7.3 Umetanje tabela ..218. Linkovi .22

8.1 Upravljanje linkovima 238.2 Host Directory..258.3 Veza tipa Local/Network.26

9. Zakljuak .27LITERATURA .27

2


3/29

1.Uvod

1.1 ta je WEB dizajn?

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

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

1.2 ta je HTML?

HTML (HyperText Markup Language, jezik za oznaavanjehiperteksta) je jeziknamenjen opisu web stranica. Pomou njega se jednostavno mogu odvojiti elementi kaoto su naslovi,paragrafi, citati i slino. Pored toga, u HTML standard su ugraenielementi koji detaljnije opisuju sam dokument kao to su kratak opis dokumenta, kljunerei, podaci o autoru i slino. Ovi podaci su opte poznati kao meta podaci i jasno suodvojeni od sadraja dokumenta.

HTML je nastao uproavanjemSGML (Standard Generalized Markup

Language, standardizovani uopteni jezik za oznaavanje) standarda sa svrhom opisadokumenta koji se objavljuju na webu.U poetku je bio prilino ogranien to se oznaavanja sadraja tie i pruao je uglavnomelementarne 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 smerurazvijan i HTML standard. Tada su standardu dodate elementi za opis tabela, slika,slojeva, napredno formatiranje teksta itd.

3
http://sr.wikipedia.org/wiki/%D0%95%D0%BD%D0%B3%D0%BB%D0%B5%D1%81%D0%BA%D0%B8_%D1%98%D0%B5%D0%B7%D0%B8%D0%BAhttp://sr.wikipedia.org/wiki/HTMLhttp://sr.wikipedia.org/sr-el/%D0%A5%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82http://sr.wikipedia.org/sr-el/%D0%A5%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82http://sr.wikipedia.org/w/index.php?title=%D0%92%D0%B5%D0%B1_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0&action=edithttp://sr.wikipedia.org/sr-el/%D0%9F%D0%B0%D1%80%D0%B0%D0%B3%D1%80%D0%B0%D1%84http://sr.wikipedia.org/sr-el/%D0%9F%D0%B0%D1%80%D0%B0%D0%B3%D1%80%D0%B0%D1%84http://sr.wikipedia.org/w/index.php?title=%D0%A6%D0%B8%D1%82%D0%B0%D1%82&action=edithttp://sr.wikipedia.org/w/index.php?title=SGML&action=edithttp://sr.wikipedia.org/w/index.php?title=SGML&action=edithttp://sr.wikipedia.org/sr-el/%D0%92%D0%B5%D0%B1http://sr.wikipedia.org/w/index.php?title=%D0%A1%D0%BB%D0%B8%D0%BA%D0%B0&action=edithttp://sr.wikipedia.org/w/index.php?title=%D0%A1%D0%BB%D0%B8%D0%BA%D0%B0&action=edithttp://sr.wikipedia.org/wiki/%D0%95%D0%BD%D0%B3%D0%BB%D0%B5%D1%81%D0%BA%D0%B8_%D1%98%D0%B5%D0%B7%D0%B8%D0%BAhttp://sr.wikipedia.org/wiki/HTMLhttp://sr.wikipedia.org/sr-el/%D0%A5%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82http://sr.wikipedia.org/w/index.php?title=%D0%92%D0%B5%D0%B1_%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0&action=edithttp://sr.wikipedia.org/sr-el/%D0%9F%D0%B0%D1%80%D0%B0%D0%B3%D1%80%D0%B0%D1%84http://sr.wikipedia.org/w/index.php?title=%D0%A6%D0%B8%D1%82%D0%B0%D1%82&action=edithttp://sr.wikipedia.org/w/index.php?title=SGML&action=edithttp://sr.wikipedia.org/sr-el/%D0%92%D0%B5%D0%B1http://sr.wikipedia.org/w/index.php?title=%D0%A1%D0%BB%D0%B8%D0%BA%D0%B0&action=edit


4/29

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 oblikupomou vaeg omiljenog pretraivaa. Ove kodove morate ukljuiti na vau stranicu dabi 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 programuza ureivanje teksta kao to je "WordPad" pa je sauvati kao tekstuelnu datoteku pomoukomande Save As. Druga mogunost je da napiete obinu stranicu u Wordu iliWordPerfectu koji vam omoguuju da sauvate stranicu kao HTML datoteku. Meutim,ako razumete ta je iza prozora to e vam pomoi da razumete mogunosti web dizajnai 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. Dabiste videli kodove za odreenu stranicu pritisnite miem na View koji se nalazi na linijimenija pa izaberite stavku Source. Potom moete sei i prenositi delove koda koliko godelite. 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 iztekstuelne datoteke i trai posebne kodove ili kontrolne oznake da bi znao kako daprikae 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 (zavrna oznaka). Vano je napomenuti dazavrna oznaka sadri znak "/". Ovaj znak govori

4


5/29

pretraivau da prestane sa navedenim oznaavanjem teksta. Akozaboravite ovaj znak www pretraiva e nastaviti da oznaava ostatakteksta u dokumentu ime e se dobiti udan (i frustrirajui) rezultat.Osnovno formatiranje za korienje HTML oznake je:

tekst

5


6/29

Kostur strukture dokumenta Svaki HTML dokument treba da sadriodreene 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:

, , ,

oznake (i odgovarajue zavrne oznake). Potrebno je da stavite ove oznake usvaku datoteku. Neki pretraivai e formatirati vau HTML datoteku ak iako ove oznake ne postoje. Ali neki pretraivai to nee uiniti! Obavezno ihukljuite.

esto koriene HTML oznake:

Ovaj element govori pretraivau da datoteka sadri informacije kodirane uHTML-u.

Glavni element identifikuje prvi deo dokumenta kodiranog u HTML-u i sadrinaslov. On takoe moe sadrati naprednije kodirane opise dokumenta.

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. Naslovse takoe prikazuje na neijoj listi ili obeleivau pa izaberite opisni, jedinstveni i relativnokratak naslov. Naslov takoe koriste maine za pretraivanje da bi opisale vau stranicu.

Drugi i vei deo vaeg HTML dokumenta je telo koje sadri sadraj vaeg dokumenta (prikazujese u podruju teksta u prozoru pretraivaa). Oznake objanjene u narednom delu teksta koristese u telu vaeg HTML dokumenta.

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 . Za svaki sledeinivo gornje ive kolone uveajte broj da biste smanjili veliinu i isticanje fonta.

6


7/29

Web pretraiva ignorie prekid reda (pritisak na Return ili Enter taster na vaoj tastaturi) ipoinje novi pasus samo kad naie na oznaku

. Sve pasuse morate oznaiti elementima

.Pretraiva ignorie sva uvlaenja teksta ili prazne redove u izvornom tekstu. Ako nema

2.3 Dodavanje veza na vau stranicu

Glavna snaga HTML-a dolazi iz njegove sposobnosti da povee tekst i/ili sliku sa drugimdokumentom ili delom dokumenta. Pretraiva naglaava odreeni tekst ili sliku bojom i/ilipodvlaenjem da bi naznaio da je to hiperveza.Pojedinana hipertekst oznaka vezana za HTML je to znai anchor (sidro). Da bisteukljuili sidro u va dokument:

1 ponite sidro sa )

unesite tekst koji e sluiti kao hipertekst veza u tekuem dokumentu

unesite zavrnu oznaku sidra: (nije potreban razmak pre zavrneoznake

Evo primera hipertekst reference:

SNOW: Special Needs OpportunityWindows

Ovaj unos pretvara rei SNOW: Special Needs Opportunity Windows u hiper vezudo lokacije dokumenta (URL) na Internetu: http://snow.utoronto.ca

Takoe moete napraviti veze do drugih datoteka uskladitenih u istom direktorijumu u kojem jedatoteka koja sadri referentni kod hiperveze. Na primer:

Stranica sa vezama karesursima

7
http://snow.utoronto.ca/http://snow.utoronto.ca/


8/29

3. Opis primenjenog softvera -DREAMWEAVER-

Prvi put kada pokrenete svoju novu kopiju Dreamweavera MX 2004, susreete se sastranom Start. Ova strana nije samo obina strana za dobrolicu, ona se prikazuje svakiput kada Dreamweaver radi, i ako nije otvoren nijedan dokument. Izaberite da otvoriteneki dokument koji ste prethodno otvarali, brzo kreirajte novi dokument i definiite sajt izsamo jednog ekrana. Ako vam se ova strana ne dopada, moete je iskljuiti u okviru zadijalog Preferences.

8


9/29

3.1Strana Start

Od verzije Dreamweaver MX 2004 imate mogunost da program otvarate sa prijateljskinastrojenom 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 izaberetedugme Dreamweaver Tutorial, otvorie se pomo iz programa. Ovo ste mogli da izaberete i izmenija Help. Ovde nema nieg to ne moete da uradite i na neki drugi nain, ali je dobro to suposlovi koje obavljate na poetku rada grupisani na jednom mestu, dostupni iz jednog centralnoginterfejsa.

Ako ne elite da se bavite poetnom stranom, izaberite opciju Dont Show Again. Ako elite daukljuite ili iskljuite prikazivanje strane Start, otvorite okvir za dijalog Preferences > General(Edit > Preferences) i potvrdite ili nemojte porvrditi opciju Show Start Page. Ako je ukljuenoprikazivanje strane Start, ona e se prikazati svaki put kada pokrenete program, i kad god nijeotvoren nijedan dokument.

9


10/29

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 stranakoju e veina korisnika najee praviti. Sa verzijom Dreamweaver MX 2004 moete da pravitebilo koju vrstu dokumenta koji je vezan za Web. Svi dokumenti mogu da se kreiraju, menjaju, paak i grafiki prikazuju u prikazu Design. To se ne odnosi samo na HTML, ve i na dokumentekoji rade sa ivim podacima, kao to su ASP, CFM, PHP i JSP, zatim dokumenti za podrku, kaoto 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, alivie ne tako jednostavna. Okvir za dijalog New Document omoguava da dokumente kreirate odpoetka, 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 NewDocument. U ovom okviru za dijalog postoji mnotvo opcija, preko kojih moete da kreiratedokumenat bilo koje vrste.

Tipovi dokumenata koji se kreiraju

10


11/29

Vei deo okvira za dijalog zauzimaju opcije za kreiranje razliitih tipova dokumenata. U krajnjojlevoj 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 levekolone 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 saopisom svake opcije, koji se nalazi u donjem desnom uglu. Iz druge kolone izaberite neki tipdatoteke i proitajte kratak opis koji se odnosi na to to ste izabrali. Za neke opcije e se ugornjem 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 onitipovi datoteka koji se koriste za kreiranje vidljivih web strana, odnosno strana koje se moguprikazati u prikazu Design. Drugi tipovi datoteka, kao to su JS, CSS i TXT moraju da seprikazuju i ureuju u prozoru Code.

3.3 Rad sa panoima

11


12/29

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

3.4 Panoi i grupe panoaBilo koji pano preko menija Windows moe da se otvori ili proiri. Tu su prikazane i listepreica za otvaranje i zatvaranje panoa. Veina panoa Dreamweavera se nalaze u grupama, priemu se pojedinanom panou pristupa preko kartice u prozoru grupe. (Tehniki govorei, svipanoi se nalaze u grupama, ali neki, kao to je CSS pano, se nalaze sami u grupi.) Grupe sulogiki 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 poslovevezane 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 proirenepanoe. Ako elite da proirite grupu panoa i promenite joj veliinu, moete da odete u meni saopcijama 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 promeniteveliinu.

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


13/29

3.5 Dostupnost Vaih strana

Vae strane izgledaju sjajno u veini pretraivaa, prole su testove provere koda. Ali, da li sustrane 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 ilinekog 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 dostupnostPostoje 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 seovaj standard primenjuje samo na sajtove vezane za federalnu dravu, mnoge vlade niihnivoa 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 pravilimaiz 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. Otvoriteovaj pano i iz padajueg menija Book izaberite opciju UsableNew Accessibility Reference. Sadana raspolaganju imate sve vrste informacija o razliitim standardima i nainu na koji se oniprimenjuju.

Opcije Dreamweavera vezane za dostupnost

Dreamweaver MX 2004 omoguava da brzo pristupite svakom od atributa vezanim zadostupnost strane. Ako elite da ukljuite atribute dostupnosti, izaberite Edit > Preferences i uokviru za dijalog izaberite kategoriju Accessibility. Opcije koje su date u listi predstavljajurazliite elemente strana koje u HTML-u imaju specijalne atribute vezane za dostupnost. Kadaovde 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 opcijamadostupnosti za pojedinane elemente strana moete vie saznati u posebnim odeljcima, ondakada budemo govorili o tim elementima).

13


14/29

Provera dostupnostiKao to moete da proverite ispravnost koda i podrku pretraivaa, moete i da proveritedostupnost svojih strana i sajtova. U Dreamweaveru postoje razliiti alati, koji su upravo tomenamenjeni.

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 stranesagledate inenjicu da 90% vremena koje provedete kao dizajner za Web radite sa tekstom, ondaete uvideti potrebu da dobro nauite kako HTML radi sa tekstom i ta je to to moe poinaopako.

14


15/29

4.2 Tekst u pretraivau

Ako ste ikada pravili neku web stranu, onda znate osnovnu injenicu. HTML je strukturnimarkup jezik. Njegov osnovni zadatak je da opie logiku strukturu elemenata na strani, kao toje i tekst, tako da logika strane bude jasna svakoj osobi ili ureaju koji je ita. Za formatiranjeteksta 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 nivoukaraktera, koje se primenjuju na re ili nekoliko rei u okviru bloka, ime se te rei istiu uodnosu 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 zaureivanje teksta. Provera pravopisa (Text > Check Spelling) omoguava da proverite pravopisza izabrani tekst ili ceo dokument. Provera se vri na osnovu renika koji postoji uDreamweaveru, ali i prema Vaem sopstvenom reniku.

HTML strukturu ete na tekst primeniti preko Text Property Inspectora, tekstualnih objekata sapalete 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 kojatreba potovati. U ovom odeljku smo pokrili osnove, a to je kako slike funkcioniu na webstranama i kako se uklapaju u svet Dreamweavera.

Slike u pretraivau

Slike se generalno na web strane ubacuju preko oznake img:

Ovaj kod govori pretraivau gde treba da potrai datoteku sa slikom, kao i koliko prostora trebada ostavi. Atribut src je relativni ili apsolutni link do GIF, JPEG ili PNG datoteke. Ovo jeobavezan atribut, poto bez njega nema ni slike. Striktno govorei, ni atribut width ni atributheight nisu obavezni, ali ako ih izostavite, pretraiva nema naina da sazna koliko prostora

15


16/29

treba da ostavi za sliku, to usporava prikazivanje web strane. Zbog toga se ovi atributi uvekdaju.

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, saogranienim bojama, gde je obavezm da slike budu jasne. GIF moe da se koristi i za animacije iefekat providnosti. JPEG je najbolji za fotografije i druge slike koje sadre puno boja i suptilneprelaze u bojama.

5.2 Slike u Dreamweaveru

U Dreamweaveru se sa slikama radi veoma lako. U narednim odeljcima emo objasniti osnovneprocedure 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 Imagesa palete Insert ili preko komand Insert > Image. Ako ste definisali sajt, slike moete daprevuete sa panoa Site ili Assets direktno u prozor Document. Treba da imate na umu dapriilikom 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 stedatoteku pre umetanja zapisali, tako da moe da se izrauna relativna putanja izmeu dokumentai datoteke sa slikom.

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

16


17/29

5.3 Slike kao pozadina

Od kada su pretraivai poeli da podravaju upotrebu slika, kreatori web strana su poeli da ihkoriste, 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 daispuni odreeni prostor. Tekst ili neki drugi grafiki elementi mogu da se postavljaju ispred slikeu 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 sekoristi kao vodeni ig, baner, itd.

Pozadina u stilu ploa, staromodan nainMnogo pre nego to je CSS stupio na scenu, slike su poele da se koriste kao pozadinskielementi. To je bilo mogue zahvaljujui atributu background. Ako oznaci body dodelite atribut backgorund, onda se slika ponavlja kao pozadina na celoj strani. Ako dodelite atributbackground tabeli, vrsti tabele ili eliji, onda se ploe ponavljaju samo u tim elementima.

Sliku ete u Dreamweaveru da postavite kao pozadinu strane (kao atribut oznake body) akoizaberete Edit > Preferences, zatim izaberete kategoriju General i tamo deselektujete opciju UseCSS instead of HTML Tags. Nakon toga izaberite Modify > Page Properties i promenite bojupozadine. Ovo ete uraditi u kategoriji Appearance. Tabelama i drugim elementima strane etedodeliti pozadinu preko polja Bg image koje se nalazi u Property Inspectoru.

17


18/29

Ovaj metod definisanja pozadine je i dalje ispravan i moda e Vam biti potreban, ali uporeenju sa CSS-om, ima odreene nedostatke:

Nema naina da se kontroliu ploe sa slikom. Pretraiva automatski postavlja ploe saslikom onoliko puta koliko je potrebno, po horizontali ili vertikali i pokuava da ispuniraspoloivi 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 uglui ponavlja se odatle.

6.Linkovi u Dreamweaver-uKreiranje 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 osnovneprincipe URL putanja, spremni ste da koristite Property Inspector iz Dreamweavera i da dodajetelinkove na svoj sajt.

Kad god je u Dreamweaveru izabran neki element teksta ili neka slika, na Property Inspectoru senalaze polja za linkove, kao i za kontrolu informacija vezanih za taj link.

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

mailto:[email protected]

18
mailto:[email protected]:[email protected]


19/29

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

Ako ne elite da svaki put unosite protokol mailto: Dreamweaver ima i objekat Email Link. Evokako se on koristi:

1. Ako elite da link na elektronsku potu napravite za sliku, kliknite sliku da biste jeizabrali. Ako elite da ovakav link napravite za tekst, ili unesite tekst, ili ga izaberite ipostavite 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 dalink ukazuje (bez protokola mailto:) i kliknite OK.

Nakon to ste na ovaj nain ubacili email link, ako pogledate Property Inspector, videete da se upolju Link prikazuje apsolutni URL, isto kao da ste ga sami uneli.6.2 Boja pozadine i slike u pozadiniTabele, vrste i elije mogu da imaju podeene boje pozadine, kao i definisane slike koje seprikazuju kao pozadina. Sve to moe da se uradi preko CSS stilova. Napravite novi stil i u okviruza 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 okviruelementa. Opcije su Repeat, Horizontal Position i Vertical Position.

19


20/29

irina i cell paddingSirina tabele i elija, kao i cell padding se mogu kontrolisati preko CSS osobina. Ovimosobinama moete da pristupite ako u okviru za dijalog CSS Style Definition izaberetekategoriju 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 neesvi pretraivai tretirati na pravi nain, tako da pre nego to ovo upotrebite treba paljivo daproverite kako to izgleda u ciljnom pretraivau. Cell spacing se takoe bolje kodira bez primeneCSS-a.

Ravnanje sadraja elijeSadraj elije moete da ravnate preko CSS osobina vezanih za blokove. Ovim osobinama etepristupiti ako u okviru za dijalog CSS Style Definition izaberete kategoriju Block. Horizontalnoravnanje 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, takoda je rad sa tim elementima u Dreamweaveru i pretraivau sloen proces.

20


21/29

Tabele u Dreamweaveru

Poto su tabele toliko bitne, u Dreamweaveru postoji niz alata i komandi koje se mogu koristitiza 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 tabelamaNaravno da je prva odluka koju treba doneti, kao i sa bilo im drugim u Dreamweaveru, da li satabelama elite da radite u prikazu Code ili Design. ak i u okruenju prikaza Design imate naraspolaganju vie mogunosti. Kako bi trebalo da izgleda interfejs za rad sa tabelama? Koja jevizuelna pomo potrebna?

Izbor reima rada sa tabelamaAko elite da izaberete reim rada sa tabelama, idite u meni View i izaberite neku od podopcijaiz 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 kakobi izgledale u pretraivaima. Ovo je reim koji iskusni korisnici najvie vole, ali moebiti nezgrapan, ako tabela ima sloenu strukturu, ili ako postoje male i tanke elije,

Expanded (View > Table Mode > Expanded Tables Mode) Ovaj reim, koji jenovost u verziji Dreamweaver MX 2004, tabele prikazuje sa vetaki dodatim prostoromizmeu i unutar elija. Dodata je i vidljiva granica tabele, ak i ako tabela nemadefinisanu granicu. U ovom reimu se rtvuju neki od WYSIWYG (ono to vidi je onoto dobija) kvaliteta koji postoje u reimu Standard. Sa druge strane, struktura tabele selake 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 vrlointuitivan i atraktivan za poetnike u web dizajnu, tu postoji niz opasnosti, tako damoete dobiti strane sa loom strukturom.

7.2 Pomo u pregledu tabelaBez obzira da li radite u reimu Standard ili Expanded, postoji dodatna vizuelna pomo, kojumoete 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 nadnu ili vrhu izabrane tabele. Linija ukazuje na dimenzije tabele ili elije. Ako klikneteikonu u obliku trougla, dobiete dodatnu pomo za izbor elemenata i podeavanjeosobina tabela. Ova pomo funkcionie i u reimu Standard i u reimu Expanded.

21


22/29

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 uprikazu Design moe videti struktura tabele, iako se to u pretraivau nee videti. Potose u reimu Expanded uvek prikazuju ivice, to ova pomo u tom reimu nije potrebna.

7.3 Umetanje tabelaAko elite da ubacite tabelu (osim ako radite u reimu Layout), moete da koristite objekat Tablesa palete Layout Insert, ili da izaberete Insert > Table. U oba sluaja se otvara okvir za dijalogInsert Table. U ovom okviru za dijalog moete da definiete osnovnu strukturu tabele. Kadakliknete OK, tabela e se ubaciti. Primetiete da osim definisanja broja vrsta i kolona, drugeosobine 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 steikad pogledali kod potpuno nove tabele i u njemu videli ? 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 praznueliju, Dreamweaver stavlja ovaj razmak. im u tu eliju stavite neki sadraj, Dreamweaverbrie taj razmak. Obriete sadraj, a razmak se vrati. Ovo je sjajna pomo u rukovanju koju Vamprua Dreamweaver.

22


23/29

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 bitiusmeren na bilo koji dokument bilo gde na internetu, ukljuujuci i na slike, kao i na neku e-mailadresu.

Ukoliko kreiramo link na dokument koji se nalazi u istom folderu gdje i dokument izkojega taj link pozivamo, tada nije potrebno navoditi putanju (path) do tog dokumenta, ve samonjegov 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 moramonavesti puni naziv te web adrese, staviti kosu crtu "/", i navesti taan naziv dokumenta. U sluajuda 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) tadamoramo navesti taan naziv e-mail adrese.

23


24/29

8.1 Upravljanje linkovima

Ve ste videli prilino dobar nain za upravljanje linkovima, kada Dreamweaver aurira linkoveprilikom promene strukture datoteka. Ovo je ipak samo prvi korak u sloenom sistemu zaupravljanje linkovima. Ako koristite mapu sajta, razliite komande iz menija panoa Site, kao SiteReports, strukturu linkova na sajtu moete da imate u svojim rukama.

Opcija Point to File iz datotekeAko ste otvorili datoteku i ako je pano Site bar delimino vidljiv na ekranu, moete da napravitelink 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 ividljiv.

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 dalink 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/29

25


26/29

FTP

FTP je skraenica za File Transfer Protocol i on je verovatno najrasprostranjeniji metod zaprebacivanje web strana na web server. Vi ete verovatno koristiti ovaj metod kada budetepravili organizaciju web strana. Slino kao kod Hypertext Transfer Protocol (HTTP, koji sekoristi 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 ponaakao FTP server. Ako kao metod pristupa u Dreamweaveru izaberete FTP onda u okviru zadijalog Site Definition treba da unesete sledee informacije :

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

26
http://www.htdocs/http://www.htdocs/


27/29

povezivanja, obriite vrednost u polju Host Directory. Nakon to se poveete, moete daproverite 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 omoguavaDreamweaveru da podesi FTP sesiju umesto da to radi FTP server. Ako niste sigurni taovde treba uneti, ostavite polje nepotvreno i proverite sa svojim mrenimadministratorom.

Use Firewall Ovo diktira da li e Dreamweaver koristiti podeavanja firewalla zapovezivanje sa FTP serverom. Ako je potrebno da podesite ovu vrednosti, pitajte svogmrenog administratora.

Use Secure FTP Ovim se omoguava da ifrujete svoje informacije o nalogu. Neifruju se datoteke koje se prebacuju.

Use Check In /Check Out Ovim se ukljuuje softver Dreamweavera za proveru verzija.

8.3 Veza tipa Local/NetworkOvakva veza se koristi kada se web server na koji publikujete svoje strane nalazi u istoj lokalnojmrei (LAN) kao i vi. Ova opcija se esto koristi kada pravite intranet sajt ili ako nudite dizajn ismetaj tuih sajtova. Kod ovakvog tipa veze, morate da zadate putanju do udaljene fascikle. Teinformacije moete da unesete ili preko dugmeta Browse moete da pronaete fasciklu naudaljenom sajtu.

27


28/29

Kod ovakvog naina povezivanja imate mogunost automatskog osveavanja liste datoteka naudaljenom 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 sedodaju 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


29/29

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 saWeb dizajnom.Moj savet je da polako sami ponete da kreirate vau web stranicu , ali imajte u vidu i to da vaaprva web stranica ne mora odmah da lii na stranice velikih svetskih korporacija. Vaaprezentacija u poetku ne mora imati neke komplikovane stvari.,ali to svakako ne znai da jevremenom ne moete dopunjavati. Meutim bilo bi korisno da na pocetku razmislite ta svehoete 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.