Your SlideShare is downloading. ×
Dreamweaver cs6 korak po korak
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dreamweaver cs6 korak po korak

988

Published on

Dreamweaver step by step

Dreamweaver step by step

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
988
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 1 DREAMWEAVER CS6- Korak po korak JELINEK ZORAN
  • 2. 2 SADRŽAJ: 1.Dreamweaver-korak po korak 2.Sadržaj 3.Html programski jezik 4.Rad sa frejmovima u Html-u 5.Programski paker DREAMWEAVER 5.1 Projektovanje Web prezentacije 5.2 Interfejs programa DW CS6 5.3 Izrada Test page 6.Izrada Web sajta 6.1 Izrada prve(home)strane 6.2 Izrada druge stranice 7.Izrada tamplete(šablona)i njegova primena 7.1 Kreiranje šablona(template) u DW CS6 8.Povezivanje stranica(linkovi) 8.1 Povezivanje prve i druge stranice i izrada treće i četvrte strane. 8.2 Imenovana sidra 9.Formatiranje texta 10.Ubacivanje slika na stranicu 10.1 Funkcija multiscrean 11. Rad sa tabelama 12.Slojevi i CSS Layout 13.Koncept slojeva u Dreamweaver-u
  • 3. 3 14.CSS stilovi u HTML-u 15. Kaskadni stilovi CSS u DW-u 16. Izrada novog CSS pravila 17.Korišćenje Spray menija. 18. Validacija i provera linkova 19. Izrada forme i validacija forme 20. Izrada formi u DW CS6 21.Ubacivanje multimedijalnih sadržaja na stranicu 22.Code Inspector,Code toolbars i Code hint(upotreba) 23.Kreiranje formulara 24.Behavior(ponašanja) 25.Postavljanje sajta na server
  • 4. 4 3.HTML PROGRAMSKI JEZIK je osnovni jezik za definisanje Web stranice,a sastoji se iz mnoštva tagova i sadržaja.Tagovi su elementi HTML koda.Kada se ukuca željeni HTML kod, potrebno je sačuvati stranicu pod .html ekstenzijom.Takav fajl može se pregledati u svim internet pretaživačima ,kao i programima za izradu sajtova.Tako, ako recimo u Dreamweaveru CS6 ukucamo:Hallo World u Dizajn prikazu , u Code prikazu dobijamo: Ovde vidimo osnovnu strukturu HTML dokumenta,koji počinje sa <!DOCTYPE html,zatim sledi <html i završava sa </html>(slash- kraj), a između je početak <head u kome je naslov Untitled document ,pa kraj</head>,zatim početak<body> između je tekst koji smo napisali Hallo world i kraj</body>, i na kraju </html>.Vidimo da korišćenjem određenih tagova definišemo željenu stranicu,prikazujemo slike,pravimo linkove,raspoređujemo sadržaj.Specifično za tagove je da moraju biti otvoreni( <) ili zatvoreni(>). 1.1 Osnovni tagovi u HTML jeziku su:: 1).html govori pretraživaču da se radi o HTML dokumentu 2).head – u head tagu se ostavlja informacija o imenu stranice kao i linkovi ka eksternim fajlovima.Sadržaj iz head taga nije vidljiv na samoj stranici,ali utiče na njen izgled.
  • 5. 5 3).body- Glavni deo stranice koju vidi svaki posetilac sajta 4).h1,h2,h3,h4,h5,h6 – su tagovi za naslove,pri čemu je h1 tag sa najvećim tekstom a h6 tag sa najmanjim tekstom. 5)div- deli stranicu na delove-blokove.Koristi se kako bi se sadržaj raspodelio na željeno mesto 6).br- novi red,gde god da postavite br.tag,naredni sadržaj pisaćete u sledećem redu. 7).hr- linija koja se koristi za razdvajanje sadržaja radi bolje preglednosti. 8).title— naslov stranice.Ono što napišete u title tagu biće ispisano plavim slovima kao naslov stranice u pretraživaču,na tabu u kome je otvorena stranica. 9).meta- služi da na stranici definiše ključne reči 10).link- koristi se za povezivanje stranice sa drugim elementima koje pozivamo u stanicu. 11).script -povezuje se sa skriptama koje su potrebne stranici12).style -sadrži stilove koje definišu dizajn stranice. 13)Liste .li – element liste Postoje dve vrste liste:određene I neodređene liste. ol-određena lista(ordered list) 1.Prva stavka 2.Druga stavka 3.Treća stavka ul-neodređena lista(unordered list)  Prva stavka  Druga stavka  Treća stavka
  • 6. 6 Postoje tagovi koji služe za formatiranje teksta.Pomoću njih govorimo, koju funkciju ima tekst koji se nalazi unutar određenih tagova. 14).a- koristi se za link 17).strong ili b- definiše podebljan tekst. 18).em ili i- definiše ukošen tekst 19).u - definiše podvučen tekst 19).sub- definiše potpisan tekst 20).sup- definiše natpisan tekst. Vrlo bitna opcija tagova je da oni mogu imati svoje atribute.Dakle najprostiji izgled div taga izgleda ovako:<div>Ovo je sadržaj div taga</div> Ipak to nije dovoljno, jer treba još definisati izgled(klasu) kojoj pripada i td.Zato koristimo i sledeće tagove: 21).id -identifikator elementa 22).class -uz pomoć class atributa element svrstavamo na jednu ili više podklasa 23).title- dodeljuje naziv elementa 24.)href- povezuje dokument sa nekim spoljašnjim linkom 25.)src- postavlja sliku na stranicu,odnosno putanju do slike 26).style -definiše umetnute stilove elemenata   Dakle sada ćemo ponoviti osnovne tagove: div – koristi se za postavljanje strukture sajta 1 <div>Struktura sajta</div>, span – u principu univerzalni kontejner, ali pretežno služi za stilizaciju teksta 1 <span>Sadržaj sajta</span>,
  • 7. 7  p – paragraf tag – isključivo se koristi kao kontejner za tekst 1  <p>Sadržaj sajta</p> a – link tag – služi za povezivanje stranica unutar sajta ,ili linkovanje ka sadržajima na drugim sajtovima 1 <a href="http://www.google.com">Tekst koji je link i koji vodi na google.com</a>  b – bold tag – služi za stilizaciju teksta 1  i – italic tag – takodje služi za stilizaciju teksta 1  <i>ovaj tekst je okružen italic tagom</i> img – ovaj tag služi za prikazivanje željene slike u browser-u, odnosno na sajtu 1  <b>ovaj tekst je okružen bold tagom</b> <img src="url(putanja/do-slike.jpg)" alt="Kratki opis slike" /> br – break tag – ovaj tag služi za “lomljenje teksta” , odnosno pravljenje novog reda u tekstu npr. kao u ovom primeru 1 <br /> Obavezni tagovi su:  Doctype - tag koji definiše tip dokumenta, u ovom slučaju taj tip dokumenta je HTML. Piše se na samom početku dokumenta u sledećoj formi: 1 <!DOCTYPE html>  html - u ovom tagu se nalazi apsolutno sve što postoji na jednom sajtu i sledi odmah nakon Doctype taga. 1 <html></html>
  • 8. 8  head - head tag služi za definisanje parametara strane i uključivanje eksternih CSS file-ova i java skripti 1 <head></head>  body - unutar body taga se nalazi sam code koji definiše strukturu i sadržaj sajta, kao i svi ostali tagovi, između ostalog i html tagovi koji su navedeni na početku ove lekcije 1 <body></body> Dakle osnovna struktura web prezentacije sadrži ove glavne tagove koje smo pomenuli <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Naslov ove stranice</title> </head> <body> </body> </html> HTML koristi tagove da pomoću njih ukaže pretraživaču kako neki tekst ili slika treba da budu prikazani na ekranu. Tagovi se stavljaju unutar < > zagrada. U većini slučajeva, tagovi se postavljaju na početak nekog dela dokumenta, a na kraju tog dela dokumenta postavlja se tag završetka. Na primer da napravite naslov dokumenta koristimo sledeći opis: <title>Moj prvi HTML Dokument</title> Uočite ova dva taga, <title> i </title> između kojih se nalazi tekst naslova dokumenta. Vidite da se tag završetka razlikuje od taga početka po kosoj crti (/). Tag HTML
  • 9. 9 <html> tag označava početak HTML programa (koda). <html> tag se obično postavlja na početak dokumenta, kao prva naredba za pretraživače. Na kraju dokumenta postavlja se tag završetka </html> . Između ova dva taga nalaziće se svi ostali tagovi kao i sam sadržaj dokumenta. Tag HEAD <head> tag je tag koji služi za početak jednog posebnog dela dokumenta koje se naziva zaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu.Ono služi da se unutar njega definišu neke karakteristike dokumenta, kao što je naslov. Zaglavlje se opisuje između tagova <head> i </head>. Primer dokumenta koji sadrži zaglavlje u kojem je definisan naziv dokumenta tagovima <title> i </title>: <html> <head> <title>Moj prvi HTML dokument</title> </head> TITLE tag title tag vam omogućava da definišete naziv vašeg dokumenta. To se postiže na sledeći način: <title>Moj prvi HTML dokument</title> Naziv dokumenta, pošto se nalazi u zaglavlju, neće biti prikazan na ekranu, ali će se pojaviti u na raznim drugim mestima (na vrhu prozora, u bukmark-u stranica i sl.) BODY tag
  • 10. 10 <body> i </body> tagovi definišu početak i kraj sadržaja vašeg dokumenta. Sav tekst, sve slike i linkovi na druge dokumente nalaziće se unutar ovih tagova. <body> se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica može izgledati ovako: <html> <head> <title>My First HTML Document</title> </head> <body> Ovde se nalazi sadržaj vašeg dokumenta: tekst, slike, grafika itd. </body> </html> h tagovi h tag se koristi za izbor veličine slova koja će se koristiti za naslove i podnaslove u vašem dokumentu. Postoji šest nivoa veličine od h1 do h6. Najveća slova se dobijaju tagom h1 a najmanja tagom h6. Slede primeri za svih 6 nivoa. Tagovima za naslove se ne postiže samo promena veličine slova, već su naslovi i boldovani, a takođe ispred i iza naslova se dodaje po jedna prazna linija. PARAGRAFI
  • 11. 11 U HTML, paragraf se označava tagom tag <p> i postavlja se na kraj svakog paragrafa "normalnog" teksta (pod normalnim se podrazumeva tekst koji nema upotrebljene neke druge tagove). <p> ovaj tag prouzrokuje postavljanje teksta u novu liniju uz dodavanje jedne prazne linije ispred <br> ovaj tag je sličan prethodnom sa razlikom što se ne dodaje jedna prazna linija ispred (nema završni tag </br>) BOLD I ITALIK TAGOVI Možete posebnim tagovima označiti da vaš tekst bude u bold i/ili italic obliku. Ne možete koristiti istovremeno oba taga (za bold i za italic). Ako greškom to pokušate onaj poslednji unet će biti primenjen. Bold i italikse javljaju u dva oblika: fizičkom i logičkom, i možete koristiti oba prema vašoj želji. Upotreba ovih tagova vidi se u sledećim primerima: FIZIČKI TAGOVI Ovo je <b>boldovano</b> Ovo je boldovano Ovo je <i>italic</i> Ovo je italic LOGIČKI TAGOVI Ovo je <strong>jako istaknuto</strong> Ovo je jako istaknuto Ovo je <em>istaknuto</em> Ovo je istaknuto Postoji mala razlika između fizičkog i logičkog taga. Kod fizičkog se menja samo oblik slova, a logički je zavisan od pretraživača i može uneti i druge promene ( recimo promenu boje) Jedan od jako korisnih elemenata, koji se nalazi u elementu svakog sajta ,.jeste tag koji uključuje eksterni CSS fajl: <link href="global.css" type="text/css" rel="stylesheet" />
  • 12. 12 4.RAD SA FREJMOVIMA U HTML -u Napravićemo prezentaciju koja sadrži dva frejma,levi i desni.Na levoj strani biće dugmad za navigaciju,a veb strane će se učitavati u desnom frejmu.Prezentacija sadrži tri glavna dela 1.index.html koji sadrži tzv.“FRAMESET“ 2.navigator.html koji se učitava u levi frejm i sadrži navigacionu dugmad za linkove 3.home.html koji se učitava u desni frejm i predstavlja naslovnu stranu prezentacije. Prvo ćemo napraviti index.html u kojem se nalazi FRAMSET,to je prva stranica koja se učitava u brauser i ona ne sadrži nikakav poseban sadržaj u vidu teksta ili grafike.Ona služi samo za to da se definiše veličinu i položaj frejmova pomoću taga<FRAMESET>,kao i da kaže brauseru koji HTML dokumente da učita u koji frejm.U ovoj prezentaciji napravićemo dva frejma kolone:prvi frejm širine 160 px,i drugi koji će popuniti ostatak slobodnog prostora.U levi frejm se učitava strana navigator.html,a u desni frejm home.html.Kod ove stranice ima sledeći oblik <HEAD> <TITLE> HTML dokument</TITLE> </HEAD> <FRAMESET COLS="160*"> <FRAME NAME="levo" SRC="navigator.html"> <FRAME NAME="desno" SRC="home.html"> </FRAMESET> </HTML Kao što se na donjoj slici vidimo dve kolone odnosno FREJMA koji smo kreirali.Ovde ne postoji body tag već mesto njega<FRAMESET> tag koji dešiniše kako će delovi prozora biti podeljeni na frejmove.Vidimo da je prvi atribut ovog taga COLS=“160*“ što znači da će frejmovi biti postavljeni u obliku dve kolone,tj da će prozor brausera biti podeljen na 2 kolone,tj da će prozor biti podeljen na dva vertikalna frejma.Za prvi frejm je određena
  • 13. 13 160px širine,a drugi frejm ima*“ što znači da njegova širina nije ekplicitno određena i da će zauzeti preostali prostor.Širina tog prostora zavisi od rezolucije. Zatim slede dva <Frame> taga.Prvi definiše koji se HTML dokument učitava u levi frejm, a drugi koji se učitava u desni frejm.Ovo se postiže pomoću SRC atributa.Vidimo da su frejmovi prazni jer nismo ništa napravili od HTML dokumenata, koji bi trebalo da se učitaju u ova dva frejma(navigator.html i home.html).Sada treba da napravimo ove dve stranice kao što se one inače prave,sačuvati ih ,recimo na jednoj u body tagu upišemo Hello people a u drugoj stranici u body tagu Welcome to Serbia i obe sačuvamo,one će se automatski učitati levo i desno . Pazljivi citalac prethodnih redova se seća da smo svakom frejmu dali odgovarajuce ime ("levo" i "desno"). Čemu nam ovo sluzi ako browser i ovako zna da u levi frejm ucitava "navigator.html" a u desni "home.html"? Medjutim, s obzirom da smo u levom frejmu napravili navigacionu dugmad ,čijim se pritiskom menja sadržina desnog frejma, ovo smo morali na neki nacin da objasnimo browseru, inace bi on sve linkove otvarao u istom frejmu u kome se nalaze i dugmad. Zaboravimo na trenutak dugmad i zamislimo da se radi o obicnim tekstualnim linkovima tipa: <a href="boje.html"> Dakle, ovakav link ne smemo postaviti u levom frejmu (tj. stranici "navigator.html"), jer bi klikom na njega stranicu "boje.html" otvorili u levom frejmu, a ne u desnom kao sto smo zeleli. Ovaj problem se resava dodavanjem TARGET atributa u ovaj tag, i to na sledeci nacin: <a href="boje.html" target="desno"> Kao sto vidite, vrednost TARGET atributa je upravo ime frejma u kome zelimo da se stranica "boje.html" otvori. Sva navigaciona dugmad na levoj strani moraju u svom <a> tagu sadrzati Target="desno" atribut kao bi se sve stranice otvarale u desnom frejmu, dok levi ostaje nepromenjen. Na ovaj nacin se znatno ubrzava kretanje kroz prezentaciju, jer se leva strana ne mora svaki put iznova ucitavati, vec se učitava samo novi sadržaj desnog frejma.
  • 14. 14 (slika sa dva frejma) Vežba br 1 ,. Napisati program sa hederom i dve kolone . <HTML> <HEAD> <TITLE>Primer tri frejma</TITLE> </HEAD> <FRAMESET ROWS="20%,80%"> <FRAME NAME="gore" SRC="banner.html"> <FRAMESET COLS="15%,85%"> <FRAME NAME="levo" SRC="navigator.html"> <FRAME NAME="desno" SRC="home.html"> </FRAMESET> </FRAMESET> </HTML>
  • 15. 15 Prvo smo gornjim frejmsetom izvrsili horizontalnu podelu na dva dela od 15% i 85% respektivno, a zatim smo donjim frejmsetom izvrsili vertikalnu podelu na 20% i 80%. Na ovaj nacin možete nastaviti da delite browser na jos sitnije frejmove. Evo spiska svih mogucih atributa <FRAMESET> i <FRAME> tagova i njihovog kratkog opisa: FRAMESET TAG: BORDER Odredjuje debljinu granice izmedju frejmova u frejmsetu izrazenu u pikselima. BORDERCOLOR Odredjuje boju granice izmedju frejmova. COLS Odredjuje broj i sirinu frejmova - kolona. Vrednosi se zadaju ili u pikselima ili u procentima sirine stranice. Broj kolona je odredjen brojem zadatih vrednosti koje se medjusobno odvajaju zarezima. FRAMEBORDER Ako je vrednost ovog atributa YES granica izmedju frejmova ce biti trodimenzionalna, a ako je vrednost NO bice obicna neispupcena
  • 16. 16 granica. ROWS Odredjuje broj i sirinu frejmova - redova. Vrednosi se zadaju ili u pikselima ili u procentima visine stranice. Broj redova je odredjen brojem zadatih vrednosti koje se medjusobno odvajaju zarezima. FRAME TAG: BORDERCOLOR Odredjuje boju okvira frejma. Ako je vrednost ovog atributa YES granica frejma ce biti FRAMEBORDER trodimenzionalna, a ako je vrednost NO bice obicna neispupcena granica. MARGINHEIGHT Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od gornje i donje granice frejma. MARGINWIDTH Odredjuje koliko ce piksela sadrzaj frejma biti odmaknut od leve i desne granice frejma. NAME Odredjuje referentno ime frejma. NORESIZE Zabranjuje korisniku da menja velicinu frejma. SCROLLING Ima tri moguce vrednosti: YES - Frejm ce imati Scrollbar, NO - frejm nema Scrollbar i AUTO - Scrollbar se pojavljuje samo po potrebi. SRC URL stranice koja se ucitava u frejm. 5.PROGRAMSKI PAKET DREAMWEAVER 5.1PROJEKTOVANJE WEB PREZENTACIJE Postoje četiri osnovna principa koji predstavljaju temelje za projektovanje kretanja na webu, kao i sadržaja web prezentacije. Ti principi su: · Podela informacija na grupe – grupisanje informacija u male delove od 4-6
  • 17. 17 elemenata · Relevantnost – u istu grupu uključiti samo one elemente koji su isti; izuzetii nebitne elemente · Označavanje – označiti svaku grupu Konzistentnost – predstavljati informacije na konzistentan način
  • 18. 18 Podela na grupe - Potrebno je da se prezentacija organizuje u grupe koje su vidljive - Vidljiva struktura web prezentacije i putanje kretanja moraju da budu usaglašeni sa opažajnim ograničenjima Relevantnost - Svaki deo ili grupa web prezentacije treba da sadrži samo one elemente koji su bitni za tu grupu ili deo - Nebitni elementi se prebacuju na neko drugo mesto ili se brišu Označavanje - Iskoristiti označavanje da se napravi arhitektura prezentacije koja će za korisnika biti jasna i intuitivna - Izbegavati oznake kao što su prethodni, sledeći, gore, dole, jer mogu dovesti do toga da korisnik zaluta Konzistentnost - Koristiti konzistentno kretanje, na primer dugme Kontakt treba da bude iste veličine i na istom mestu na svakoj stranici web prezentacije Najbitniji detalj kod izrade web prezentacija je voditi računa o potrebama korisnika lokacije. Ključ uspešno dizajnirane upotrebljive web lokacije je da se ona posmatra sa gledišta korisnika. „Dizajniranje sa aspekta korisnika jeste izraz koji se odnosi na proces dizajniranja koji uvek u prvom planu ima korisnika.“ KORISNOST I UPOTREBLJIVOST Korisnost je funkcionalnost web prezentacije koja izlazi u susret potrebama korisnika, a upotrebljivost se odnosi na sposobnost korisnika da koristi lokaciju kako bi postigao odreneni cilj. Upotrebljive lokacije se mogu definisati kao efikasne, na njima se snalazi
  • 19. 19 lako, omogućavaju korisnicima da bez grešaka i zadovoljavajuće postignu svoj cilj. Upotrebljivost (engl. Web usability) čine sledeće komponente: Mogućnost brzog korišćenja (pregledanja) web stranice – Koliko jednostavno korisnik postiže jednostavne zadatke na web stranici koju prvi put pogleda? Efikasnost – Posle početnog upoznavanja sa dizajnom web stranice, koliko brzo korisnik može izvoditi zadatke pretraživanja informacija na stranici? Memorabilnost – Ako se korisnik vrati na web stranicu nakon odrenenog vremenskog perioda nekorišćenja iste, koliko jednostavno može ponovno iskoristiti stečena znanja/veštine na web stranici? Minimiziranje grešaka – Koliko grešaka čine korisnici, koliko su ozbiljne te greške i mogu li se korisnici jednostavno i brzo oporaviti od tih grešaka i nastaviti koristiti web stranicu? Zadovoljstvo – Da li je ugodno koristiti grafički interfejs web stranice Najbitnije stavke koje je potrebno obezbediti u web prezentaciji da bi ona bila uspešna: Jasno prezentovati najbitnije sadržaje stranice – Na početnoj stranici (engl. home page) treba prezentovati jasno i kvalitetno najbitnije sadržaje Gde, šta, kako i zašto? – Na početnoj stranici korisnik treba dobiti odgovore na ova pitanja: Gde sam? Koje sadržaje mogu ovde pronaći? O čemu je reč na ovoj stranici? Šta mogu raditi na ovoj stranici? Kako mogu pronaći odrenenu informaciju? Konzistentnost – Najbitnije elemente na stranici npr. logo, navigacija, footer, search page i sl. prikazati na konzistentan način - uvek na istom mestu na stranici i na isti vizuelni način Samo čitljiv tekst je koristan tekst – Koristiti tamni tekst na beloj pozadini za maksimalan kontrast odnosno maksimalnu čitljivost
  • 20. 20 Pozadina stranice (engl. Page background) – Koristiti jednostavne i blage pozadine na stranicama Opisati svaku sliku – Koristiti ALT tagove za sve slike, a najviše za navigaciju koja je napravljena u slikama Navigacija je ključ – Postaviti navigaciju na isto mesto na svakoj web stranici Preglednost - Poravnati sve elemente na stranici (tekst, logo, navigacija i sl.) zbog bolje čitljivosti i preglednosti Jezik pisanja jasan i razumljiv – Koristiti jasan i razumljiv jezik pisanja sadržaja Web standardi - pridržavati se web standarda (XHTML, CSS, JavaScript, DOM, XML) Svaka od ovih stavki je uspešno primenjena na web lokaciju Fakulteta za primenjenu ekologiju Futura. PRISTUPAČNOST Pristupačnost Web sadržaja se ogleda u dostupnosti tog sadržaja ljudima sa invaliditetom ili nekim drugim funkcionalnim ili situacionim ograničenjima. Pristupačan sadržaj mora biti kompatibilan sa pomoćnim tehnologijama koje koriste ljudi sa invaliditetom, posebno sa ekranskim čitačima. Mora postojati alternativa za vizuelni sadržaj, za ljude koji ne vide, i alternativa za audio sadržaj, za ljude koji ne čuju. Konzorcijum W3C je zagovornik projektovanja što pristupačnijih web lokacija i podržava inicijativu za pristupačnost na Webu – WAI (Web Accessibility Initiative). Ova inicijativa ne preporučuje samo pristupačnost lokacija hendikepiranim osobama već i pravljenje lokacija pristupačnih bilo kome ko radi u uslovima drugačijim od onih koje je web dizajner usvojio kao „normalne“. Pod ovim se podrazumeva da možda korisnici nemaju monitor iste veličine kao dizajner, možda nemaju toliko brz Internet kao dizajner a i obrnuto.
  • 21. 21 Iz WAI uputstva proizilazi da je potrebno uvek misliti na to da korisnici mogu da imaju ograničenja u radu drugačija od dizajnera web sajta. Preporučeni elementi W3C konzorcijuma primenjeni na dizajn web sajta su DEKLARISANJE TIPA I JEZIKA HTML DOKUMENTA Meta jezik kojim se opisuje Web strana je HTML (Hypertext Markup Language). On se sastoji od tagova <imeTaga>. Većina tagova ima i svoj par, koji označava kraj taga </imeTaga>. Sadržaj je smešten izmenu otvorenog i zatvorenog taga. Tip dokumenta se navodi kroz DOCTYPE tag, koji se piše pre otvorenog html taga. Najnoviji standard za tip dokumenta je: <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Ovaj dokument je definisan kao XHTML 1.0 Strict i taj tip obuhvata niz pravila i preporuka za pisanje ispravnog koda. Neki od najvažnijih odlika su odvajanje sadržaja od prezentacije i pravilna struktura. 1.0 Strict dokument . Tekstualni ekvivalenti za slike Svaki HTML tag koji prikazuje sliku <img> tag, treba da sadrži alternativni tekstualni opis i on se zadaje preko „alt“ atributa. Vrednost alt atributa će biti korišćen u sledećim slučajevima: ekranski čitač će tu vrednost pročitati naglas ili poslati brajevom displeju, biće prikazana umesto slike u grafičkom pretraživaču, u slučaju da slika nije pronanena na zadatoj lokaciji, biće prikazana umesto slike u grafičkom pretraživaču ako je učitavanje slika isključeno, alt tekst koriste Web spajderi, pri indeksiranju sajta, što može doprineti boljem rangu na pretraživačima.
  • 22. 22 Boja može da poboljša doživljaj koji korisnik ima kada poseti sajt. Ona se koristi da skrene pažnju, da naglasi, da odvoji celine. Pa ipak, ima slučajeva kada nepažljivo korišćenje boja može biti uzrok nepristupačnosti sajta. Web lokacija može biti nepristupačna ljudima koji ne mogu da razlikuju boje, ili imaju problema sa opažanjem boja, ali i ljudima koji imaju slabiji vid. Obezbenivanje pristupačnosti ovde ne zahteva prestanak korišćenja boja na stranici. Boja svakako doprinosi upotrebljivosti sajta, ako je dobro primenjena. Samo boja ne treba da bude jedino sredstvo kojim se ističe neka informacija. Bitno je osigurati da su svi objekti od značaja na web stranici jasni i bez upotrebe boje. Objekti od značaja su:          tekst, linkovi, navigacija, delovi interfejsa (kao što su slikovna dugmad), slike koje prenose neke informacije, a nisu samo čisto dekorativne. korišćenje dodatnih elemenata za isticanje informacije, korišćenje vidova isticanja kao što su veličina, raspored elementa, izbegavanje korišćenja naziva boja kao reference na element pažljiv odabir boja. Kontrast Pored brige o korišćenju samo boje za isticanje informacije, treba voditi računa i o kontrastu na stranicama. Ako su nijanse pozadinske boje i boje slova bliske, te stranice neće imati dovoljno kontrasta. To može da postavlja problem ljudima sa poremećajima u opažanju boja ili korisnicima sa monohromatskim displejom. Takone treba posebno voditi računa o tome da korisnici mogu podesiti njihove pretraživače za prikazivanje boja nekih elemenata strane (pozadina, tekst..) i zbog toga
  • 23. 23 obavezno treba uz pomoć CSS dokumenta odrediti boje i teksta i pozadine. Kod za pozadinsku belu boju: html { background: #fff; } Kod za tekst na web stranicama tamno sive boje: body { color:#666666; } 5.2 INTERFEJS PROGRAMA DREAMVEAVER CS6 Po pokretanju programa dobija se uvodni ekran ovog orograma ili Welcome Screan kao na slici.Interfejs se sastoji iz sledećih delova(MENI BAR ,APPLICATION TOOLBAR,DOKUMENT TOOLBAR,STATUS BAR I PANELI)
  • 24. 24 MENI BAR se sastoji iz nekoliko dugmadi: FILE,EDIT,VIERW,MODIFY,FORMAT,COMMANDS,SITE,WINDOWS i HELP .Pogledati sadržaj svakog od njih. APPLICATION TOOLBAR , Sastoji se iz nekoliko dugmadi:LAYOUT DUGME za selektovanje raznih prikaza stranice,EXTEND DREAVEAVER koristi se za pristupu menadžeru ekstenzije.SITE DUGME za brzo upravljanje i editovanje već postojećih sajtova.DUGME WORKSPACE LAYOUT služi za prebacivanje između raznih radnih površina i na kraju je SEARCH za pomoć . DOKUMENT TOOLBAR, Nalazi se na vrhu svakog otvoreno dokumenta. Prikazuje sve opcije i detalje vezane za aktivan dokument.Postoji pet vrsta prikaza:      CODE prikaz .SPLIT PRIKAZ .DESIGN PRIKAZ .LIVE PRIKAZ LIVE CODE 1).Pritiskom na dugme CODE prikazuje se kod aktivne sranice u kome možemo i da kodiramo ručno u HTML –u,CSS-u,JAVA SCRIPT-u, ili ako radimo sa dinamičkim stranicama u PHP-u ili ASP-u
  • 25. 25 2).SPLIT prikaz se koristi da bi se istovremeno videli i kod stranice i dizajn stranice u dva prozora,a može se podesiti pogled i po vertikali ili kome je lakše po horizontali. 3).DIZAJN pogled daje nam vizuelni prikaz koda koji je u Body tag-u,i vrlo je sličan onome što će se videti u čitaču 4.)LIVE prikaz nam omogućuje vidimo kod zajedno sa dinamičkim sadržajem,slično prikazu u samom čitaču. Paneli su smešteni na desnoj strani i to paneli:INSERT,CSS STILOVI,FILE i ASSETS. 5.)LIVE CODE nam omogućuje da selektujemo elemente u dizajn prikazu i brzo otkrijemo odgovarajući kod u levom prozoru,ili ako selektujemo jednu reč u CODE prikazu,ta ista reč će biti selektovana i u DIZAJN pogledu,što je korisno. Sledeći elemenr toolbara je mesto za naslov,koji nam omogućuje da brzo dodamo naslov našem dokumentu,a koji će se pojavljivati u Title baru samog browser-a. Sledeća ikonica u redu je File menagment ,koristi se za preuzimanje i prenos fajlova na sam server. Preview/Debug in browser koristi se za prikaz stranice u čitaču. W3C VALIDATiON vrši validaciju stranice na kome trenutno radite ili celog sajta. CHECK BROWSER COMPATIBILITY provera va kompatibilnost vašeg fajla na kome trenutno radite sa drugim čitačima. VISUAL AIDS.koriste za razne alate koji mogu da asistiraju kod postavljanja nekih parametara, bitni Paneli su smešteni na desnoj strani i to paneli:INSERT,CSS STILOVI,FILE i ASSETS. PANELi smešteni na desnoj strani. mogu minimizirati pritiskom na dugme u desnom uglu svih panela i tako napraviti veću radna površinu. STATUS BAR , Status bar sadrži dosta priručnih alata.
  • 26. 26 U levom delu Status bara nalazi se Tag selector<body> koji nam omogućuje da selektujemo sadržaj određenog taga.U desnom delu SELECT TOOL,I HAND TOOL kao i veličina prozora u pikselima a na kraju UNCODE UTF-8 LENJIRI,MREžA I VOĐICE Pojavljuju se u levoj i gornjoj ivici prozora dokumenta. Desnim klikom miša možete odrediti da li će lenjiri Lenjiri su odličan alat koji može da vam asistira kod merenja i postavljanja elemenata na Web stranicu. biti prikazani u pikselima, centimetrima ili inčima. X/Y koordinate lenjira koje predstavljaju 0/0 tj. početak za obe ose po difoltu je postavljen u gornjem levom uglu fajla. Ovaj početak se može pomeriti na bilo koju lokaciju na stranici tako što ćemo kliknuti levim tasterom miša na kvadratić u gornjem levom uglu i povući do željene lokacije na stranici. X/Y koordinate se tada pomeraju na 0/0 na novoj poziciji. Vraćanje na staru poziciju se može izvršiti preko opcije Reset Origin. Isključivanje lenjira se vrši preko opcije Hide Rulers. Mreža Linije mreže se protežu duž celog dokumenta u jednakim intervalima, s leve na desnu stranu i od vrha ka dnu dokumenta. One vam mogu pomoći za tačno pozicioniranje objekata na Web stranici. Možete uključiti Snap to Grid (privlačenje mreži) opciju za još bolje poravnanje. U podešavanjima mreže (View>Grid>Grid Settings) možete odrediti koje boje će biti linije u mreži, zatim možete odrediti koliki će biti razmak između tih linija i da li će se mreža prikazivati u vidu linija ili tačkica. Vođice Postoje horizontalne i vertikalne vođice koje možete dovući u otvoren dokument da bi vam pomogle u merenju i postavljanju novih objekata na Web stranicu. Da biste kreirali vođice, potrebno je da je prvo lenjir uključen, zatim ćete kliknuti levim dugmetom miša na lenjir i povući vođicu do željene lokacije na stranici. Na primer, ako želite da postavite AP Div na stranicu, 250px od leve ivice dokumenta i 300px od gornje ivice dokumenta, postavićete vođice na tu lokaciju i uključićete Snap to Guides (View>Guides>Snap to guides), zatim ćete samo privući Div ka toj lokaciji i on će se sam „zalepiti” za to mesto.
  • 27. 27 Vođice su vidljive samo na radnoj površini u Dreamweaver-u, a ne vide se na Web stranici u čitaču.Na slici ispod prikazani su lenjir i vođice.Ako postavimo AP div možemo ga lepo namestiti na odgovarajuće mesto. 5.3 IZRADA (TEST PAGE) STRANE Program DREAMVEAVER koji je vrlo ozbiljan zahtevan program ,koji nam omogućuje visoki kvalitet izrade dinamičkih veb sajtova. Kada otvorimo File>New >Blank page>HTML>None>Create.otvoriće se potpuno prazan dokument koji je prikazan na slici ispod.Ako radimo u okruženju design,upisaćemo na ekranu Hello World. (slika ispod)
  • 28. 28 : Ako pređemo u CODE prikaz videćemo sledeće:u levom prozoru je program kreiran jedan HTML dokument na način kako je to objašnjeno u prvom poglavlju, u kome dominiraju uvodni deo koji je standardan za svaki dokument head sekcija i body sekcija.Code je veoma kratak jer nema mnogo sadržaja.Ako pogledamo SPLIT pogled ( slika ispod)
  • 29. 29 Tekst Hello World možemo formatirati, jer se uključio Prosperiti Inspektor.Za format levo,možemo staviti Heading 1,2 ili3 I svaki put će se font promeniti.Takođe ako selektujemo Hello World biće selektovane iste reči u Code prikazu,ili ako izbrišemo sadržaj u Code prikazu u sekciji <body> on će nestati iz desnog prozora.
  • 30. 30 Da bi promenili naslov u title boxu u test page,mesto heading 3 upisaćemo 2 sa jedne i druge strane,pritisnuti refresh i ime će se pojaviti u boksu za naslov.
  • 31. 31 Test stranu možemo pogledati kako izgleda u pretraživaču sačuvati je,ali pošto je u pitanju proba prve stranice,sada je nećemo sačuvati.. 6.IZRADA WEB SAJTA Za izradu samog sajta potrebno je odrediti root folder i podfoldere.Sve u vezi sajta biće unutar ovog foldera.Otvorićemo folder na desktopu i nazvati ga Spring Park.U programu kliknemo na Site<Menage site >New site izaberemo putanju do lokalnog Root foldera kao što je prikazano dole u Set up for spring Park .Upišemo ime sajta koje se neće nigde pojavljivati,racimo ime klijenta,a sa browse dolazimo da foldera Spring Park koji smo prvobitno napravili I u kome će stajati sve što je vezano za ovaj sajt.Otvorićemo u njemu folder za slike,folder za CSS i kasnije i druge sub foldere,koji nam budu potrebni.Ovo je prvi korak ka pravljenju sajta.Ujedno će se ime koje smo dali sajtu pojaviti u Files panelu.
  • 32. 32 Pre izrade glavnog dizajna potrebno je skicirate želju izgleda stranice :
  • 33. 33 Dizajn prve strane poštujući želju klijenta.Sa File<New i izabrati BLANK PAGE HTML i iz layouta 2 kolone heder i futer i levi sajd bar a zatim pritisnuti create
  • 34. 34 Ovo je konfiguracija koja nam odgovara naručiocu projekta ,i sada treba pristupiti ispunjavanju sadržajem(content).Pre toga treba napomenuti da je važna širina dokumenta,i da se ona mora podesiti za razne uređaje:smart fonove,tablete ili PC računare,jer se protibno deo sadržaja neće prikazati na ekranu uređaja.Tako ako bi želeli
  • 35. 35 da stranicu rendiramo u recimo smart phonu rezolucija bi bila 320x480px Ova podešavanja nam omogućuju alatke iz STARTU bara na desnoj strani gde klikom na ikonicu phona,tableta ili PC dobijemo izgled I veličinu stranice u pxelima. Za uređenje sadržaja promenimo reč INSTRUCTION u WELCOME TO SPRING PARK.Otvorimo split pogled i selektujemo ceo pasus između<p sadržaj>/p.Zatim ga obrišemo na isto mesto u Code prikazu upišemo:Our park is a great location for family day out.
  • 36. 36 Sada to isto treba da uradimo i sva dva ostala paragrafa.U split prikazu stavimo kursor iza <p> taga u CODE prikazu koji počinje sa Because i dilitujemo ceo pasus,upišemo:Our marine exhibits include new panguis from South America.We also have some new arrivals from warmer climates.Naslov ćemo takođe obrisati ( to Clearin Method u New arrivals).Posle svih promena naslova i paragrafa ukucavanjem novog teksta u CODE prikazu koristi REFRESH svaki put.Dobićemo preuređenu prvu stranicu,bez teksta i naslovaDopisati I poslednji paragraf kao na slici ispod.Sada stranica ima prilagođen izgled našim potrebama i prikazana je na slici ispod.
  • 37. 37 Sada možemo srediti sajd bar i isprazniti njegov sadržaj.Uradićemo to opet u SPLIT prikazu u delu za CODE pogled.Selektovati prvi paragraf (uključujući oba paragraf taga),pa delete i refesh ,pa,to isto uraditi i sa drugim paragrafom:
  • 38. 38 Vidimo da se početna dosta promenila i da prati naš dizajn sajta koji je tražio klijent.Sačuvaćemo stranicu pod index.html(to je obavezno za home stranicu). Dizajn druge stranice . Sada imamo stranicu index.html i treba napraviti novu drugu stranicu,. Ovu stranicu preuređujemo od izgleda prve strane,prvo je sačuvamo sa Save as kao new_arrivals.html,a u Title naslovu upišemo Spring_Park new Arrivals page. . Kada preuredimo gornji izled sa novin podnaslovima ,dobijamo izgled druge stranice(slika dole).Kasnije ćemo to uraditi I sa trećom I sa četvrtom stranicom na potpuno isti način, i svaku ćemo sačuvati pod svojim imenom.Ovaj deo nije težak i sve ide od prve stranice.Ako bi prvu stranicu sačuvali kao tamplete stranicu(što je objašnjeno u sledećem poglavlju) onda bi pravljenje treće I četvrte stranice bilo još efikasnije.i lakše.Izgled druge stranice pošto je sve dopisano,što trebate i vi uraditi dat je na slici ispod.
  • 39. 39 7.IZRADA TEPMLETA(ŠABLONA) I NJEGOVA PRIMENA , Stvaranje template stranice pomoći će nam da takvu stranicu,tzv.šablon koristimo i kod izrada drugih stranica.U meniju izaberemo File>New>Blank templete>HTML Templete>Layout>none i pritisnite Create.(na slici ispod).Kada ovo uradimo dobijemo
  • 40. 40 prazan prostor na kome treba formirati stranicu. HTML tagovi sami po sebi ne donose mnogo mogućnosti za izgled same stranice,zato služi CSS(kaskadna lista stilova),koja nam omogućuje da svakom tagu dodelimo zaseban izgled i poziciju.Najlakše je da napravimo prvu stranicu , ali je nismo sačuvali kao šablon stranicu. Ovde ćemo pokazati kao se pravi stranica sa hederom,futerom i dve kolone direktno pišući kod,kako bi polaznici vežbali HTML i CSS jezik.Koristićemo ranije pomenuti div tag za pravljenje blokova.
  • 41. 41 Vežba br.2 , Kreirati stranicu u HTML-u sa hederom,futerom i dve kolone <div style="width:960px;"> <div style="border:1px solid blue;height:40px;margin-bottom:10px;"> Header </div> <div style="height:600px;margin-bottom:10px;"> <div style="border:1px solid green;height:600px;float:left;width:710px;"> Leva kolona </div> <div style="border:1px solid dark Red;height:600px;float:right;width:210px;"> Desna kolona </div> </div> <div style="border:1px solid red;height:20px;"> Footer </div> </div> Kada stranica sačuvamo kao index.html dobićemo šta smo uradili- na sledećoj strani. Raspored koji smo želeli je: heder,futer i dve kolone.To je tek prvi korak ka izradi web stranice šablona u koju možemo unositi elemente i formatirati ih po našoj potrebi.Raspored je prikazan na slici ispod.Tu možemo primetiti da je naš sajd bar sa
  • 42. 42 logom bio na levoj strani ,a sadržaj u desnoj koloni.To se može lako promeniti u samom kodu, tako što levu kolonu napravimo užom recimo širine 210 px ,a desnu podesimo na 710px.Ali pošto mi u projektu ne nastavljamo dizajn po ovom šablonu,ostaće kako jeste.Vi ako želite možete to da uradite i da napravite prvu stranicu kao šablon sa tekstom i naslovima naše prve stranice,a onda je iskoristiti za pravljenje treće i četvrte stranice. U našem slučaju imamo jedan glavni div,koji predstavlja kontejner u kome smo definisali da širina bude 960px,a zatim u njega postavili ostale elemente . Stilovi koje smo u ovoj konstrukciji web strane koristili su sledeći:   width – definiše širinu elementa i piše se: width:710px; gde je 710px primer vrednosti širine u pikselima height - definiše visinu elementa i piše se: height:600px; gde je 600px primer vrednosti visine u pikselima
  • 43. 43    border – ovaj stil željenom elementu daje borduru i piše se: border:1px solid red; gde je 1px debljina linije, solid tip linije (moze biti solid, dotted, dashed itd.), a red boja bordure margin – predstavlja razmak između elemenata. Piše se: marginright:10px; gde right predstavlja stranu elementa koja će dobiti zadati razmak, a može biti margin-top, margin-right, margin-bottom, margin-right float – float u kratkim crtama “lepi” jedan element za drugi po horizontali. Postoje float:left; i float:right;   Primer 1: Ukoliko bismo npr. postavili 2 div elementa, dakle <div>sadržaj</div> i još jedan element <div>sadržaj</div> i prvom ili oboma dali parametar float:left; prvi element bi bio zalepljen za levu ivicu, a drugi za njega. Moguće je koristiti i njegovu drugu opciju - float:right; i u tom slučaju, element sa stilom float:right; bio bi zalepljen za desnu ivicu. Za sada, elemente koje postavljamo da float-uju, obavezno se postavlja u div koji ima definisanu visinu. . 7.1 KREIRANJE ŠABLONA U DW CS6    1.Definišite veb sajt i otvorite stranicu koju ćete upotrebiti za kreiranje šablona 2.Pošto smo kreirali stranicu u predhodnoj vežbi, trebamo je sačuvati sa File>Save as a tamplete      3.Otvoriće se mali prozor u kome smo izabrali sajt Spring park na koji možemo da primenimo ovaj šablon,i dati ime šablonu Tamplete1.
  • 44. 44  4.Kreirajte etabilni region tako što će te u meniju izabrati Insert>Templete object>Editibilan region  Ovi regioni su okviri za sadržaj koji je jedinstven za svaku stranicu na kojoj je primenjen šablon. 5.Otvoriće se mali prozor( slika gore) u koji treba uneti ime regiona.Isto treba uraditi I sa ostalim delovima kreirane strane svakoj oblasti dodeliti drugi nazive. 6.Sada otvorite stranicu na koju želite da primenite šablon 7.Izaberite Modifay>Template>Apply templete to Page, Izaberite šablon koji želite da primenite na tu stranicu u pritisnite Select. 8.U prozoru Inconsistent Region Names izaberite šablon kliknite Use to all. 9.Kliknite na OK Sve što će se kasnije menjati pri upotrebi šablona za izradu strane mora biti u promenjivoj oblasti, uključujući i hiperveze. Ako pravite hiperveze u samom šablonu, za pronalaženje hiperveze upotrebite ikonicu direktorijuma ili alatku Point to File koje se nalaze na panelu Properties. Hipervezu ne smete upisivati neposredno u odgovarajuće polje na panelu Prosperties, jer tada hiperveze neće raditi!. Dreamweaver automatski formira putanje ,kada koristite jednu od ove dve metode. Na kraju snimite datoteku. Menjanje promenjivih oblasti šablona možete kasnije da onemogućite. Iz menija Modify izaberite Templates, a zatim Remove Template Markup. Nestaće kontura koja označava oblast kao promenjivu i sada je taj deo šablona zaključan i ne može se menjati u stranama napravljenim pomoću ovog šablona.Šabloni se mogu praviti i od gotovih stranica.,što je najlakše da uradite jer imamo index.html
  • 45. 45 stranu.,koja je prikazana na slici icpod(header,footer,levi sajd bar i glavni deo). Sačuvamo šablon kao template 1.Mi ćemo nastaviti kreiranje sajta nešto kasnije,bez upotrebe šablona koristeći prvu stranu našeg sajta na klasičan način. Vežba br 3 Napraviti šablon stranicu od prve stranice index.html i iskoristite je da napravite drugu stranicu sajta,po postupku koji je objašnjen!
  • 46. 46 ALATI ZA RASPORED STRANICE Glavni alati za raspored elemenata na web stranici su <frame>, <table>, i <div>. Okviri (engl. Frames) i njihovo korišćenje je danas veoma sporno, i većina stručnjka ih više ne koristi. Jedan od glavnih razloga je zato što pretraživači kao što su Google, Yahoo i drugi imaju problema sa takvim stranicama jer ne mogu da ih vide, ili šalju posetioce na stranice na neprikladno prikazanim tekstom ili bez teksta. Tabele (engl. Tables) su sve manje u upotrebi danas, razlozi su sledeći: Kada čitači (engl. Browsers) dođu do tabele i krenu da je čitaju, oni moraju dvaput da je pročitaju pre nego što prikažu njen sadržaj, jednom da izrade strukturu tabele a drugi put da utvrde sadžaj. Prilikom učitavanja ostalih web stranica na istoj lokaciji, ponavlja se postupak Tabele se ne prikazuju na ekranu deo po deo, već se čeka da se cela tabela učita i onda tek prikaže Layers ili slojevi (engl. Divs) su elementi HTML jezika pomoću kojih se uz kaskadne stilove prave moderni, pristupačni i upotrebljivi rasporedi elemenata na stranici. 1. CSS generalno zahteva manje koda nego tabele 2. Ceo CSS kod je u jednom eksternom fajlu koji se samo jednom učitava, zatim se kešira na korisnikovom računaru 3. Preko CSS-a može da se kontroliše redosled po kojem će se učitavati pojedini elementi – prvo je bitno da se učita sadržaj ,pa tek onda elementi koji se sporije učitavaju, npr. slike, zvuk, video. 8.LINKOVI ( link relativne putanje u odnosu na sopstveni sajt) 1.Link sa druge na prvu stranu.
  • 47. 47 . u Drugu stranu New Arrivals stranu prikaži u SPLIT pogledu:selektovan je kod koji odgovara hiper linku.Svaki hiperlink ima dva dela: Link one na kome napišemo recimo Home i pod navodima“#“, koji kaže gde link vodi.Ispred je a tag i na kraju spleš tag.U dizajn prikazu selektujete Home<Insert<Hiper link i za link upišemo index.html. .
  • 48. 48 Za Target izaberemo _self I OK. Uradili smo da link HOME vodi sa druge stranice na početnu stranu.Sada se vratimo u dizajn pogled. Vidimo da link ne radi kada pređemo preko njega.Ali ako pređemo na LIVE pogled i kada pređemo preko linka on se promeni, pa klikom na Home(uz pritisnuto control dugme) prešli bi na matičnu stranu ,koja je ispod New Arrivals-,a to je matična strana.
  • 49. 49 Takođe link radii u pretraživaču pošto uključimo taj prikaz(znak za Internet pa izaberete pretraživač,i kada kliknemo na link HOME on nas prebaci na Spring _Park to jest home page. 2.Link sa prve na drugu stranu. Sada ćemo napraviti LINK koji sa matične strane vodi na drugu stranu.Selektujemo link 1 na drugoj stranici u polje tekst upišemo New Arrivals,kliknemo na browse pored linka i nadjemo putanju i upišemo new _arrivals.html za target selfi na kraju OK . Ako pređemo na split view- link će raditi uz CONTROL plus klik na link. . Ako otvorimo stranicu u brauzeru link če postati aktivan i prebaciće nas na prvu stranu.Jasno je da će raspored linkova biti :Home;New Arrivals;Opening times;Admission prices ,što ćemo kasnije uraditi koristeći Java script i Spray meni.Za sada smo samo probali da povežemo strane sa relativnim linkovima u odnosu na dokument i root folder.
  • 50. 50 .. Sada ćemo se pozabaviti FUTEROM i obrisaćemo text na obe strane u CODE prikazu.Selektujemo sadržaj futera u kodu,kliknemo na footer u Prosperiti Inspektoru(na vrhu sa leve strane) i pritisnemo delete.U footeru upišemo:©Spring Park Inc.Last update Wednesday July 4,2013.Na slici ispod ovaj tekst nije upisan pa ga vi dodajte i tako za svaku stranu.
  • 51. 51 Dizajn treće stranice ,krenućemo od druge stranice na kojoj je promenjen naslov New Arrivals, sačuvali je pod novim imenom openining_times.html,napravili jedan red prostora sa enter.Želimo da ubacimo tablicu koja obaveštava posetioce o rasporedu rada parka koji posećuju.Predhodno smo u Notepad-u napravite raspored: Opening Times 2012 Open Close Monday 08.00 17.00 Tuesday 08.00 17.00 Wednesday ClosedClosed Thursday 08.00 17.00 Friday 08.00 19.00 Saturday 08.00 19-00 Sanday 08.00 17.00 Zatim smo ubacili tablicu koju smo sačuvali na desktopu kao.txt fajl.Zatim iz menija File<Import<Tabula data i u novom prozoru došli do putanje gde se tekstualni dokument nalazi(desktop) i na kraji OK ubacuje tablicu odmah ispod naslova, kao na slici ispod :
  • 52. 52 Dream weaver ima dosta mogućnosti za opcije copy/paste.Ako postavimo miša ispred rečenice these kangaroosi kliknemo na <p> na statusnoj liniji rečenica će biti selektovana.Sa copy /paste iz menija edit može se katovati ili zalepiti na drugo mesto.Ako sada pređemo na split pogled možemo izbrisati ceo paragraf između dva velika naslova,sa tim ako ostavimo kod za novi red &nbsp ,po brisanju blinker ostaje između redova, jer kod čuva prored,.međutim ukoliko izbrišemo sve dobićemo sledeći izgled:
  • 53. 53 Ako stavimo kursor recimo ispred reči These i držimo Shift selektovaće se ceo tekst do kraja.Jedna reč se selektuju jednim klikom, a cela rečenica troklikom. LINK(apsolutne putanje) Možemo napraviti link na samoj stranici,i preko njega prebaciti se na neki URL adresu recimo Wikipidiju(ovo se zove apsolutna putanja).Na matičnoj strani pri dnu selektujemo reč here i ubacite Hiper link.
  • 54. 54 Pošto smo uneli podatke stisnuti OK.Reč here postaje super link koji nas vodi na Wikipidiju. U sledećem izlaganju modifikovaćemo link u odnosu na raniji postupak.Na stranici Opening times selektujemo drugi link pa Insert i dobijamo prozor za dijalog.U prvi upišemo New Arrivals, u drugo polje, dođemo do stranice
  • 55. 55 new_arrivals.html I kliknemo na nju.U Polju TARGET imamo nekoliko opcija :blank otvoriće novu stranicu u veb čitaču.Izbor SELF otvoriće stranicu na istoj stranici u čitaču.Podesićemo BLANK.( sa ovom opcijom otvaramo i novi tab).U polje TITLE upisaćemo tekst koji će se pojaviti kada mišem prelazimo preko linka.Upisaćemo Click to see our latest new arrivals.i za ključ K,pa OK Sada možemo da otvorimo čitač I sve ovo proverimo! Dizajn četvrte stranice . Postupimo kao sa trećom stranicom,polazeći od druge stranice ,uradimo potrebne ispravke jer ne koristimo šablon o kome je bilo reči ranije, sačuvamo je sa Save as
  • 56. 56 kao admission _ price.html,i podesimo futer.Posle ispravki ostaće: IMENOVANA SIDRA . Ako na stranici New Arrivals dopišemo tekst Find out all about kanfaroos on Wikipedia by clicking here.Ako na Web stranici kliknemo na početak tog reda ,pa Insert>Name Anchor na početku reda pojaviće se znak imenovanog sidra,tj linkujemo direktno na kraj te stranice na to sidro.
  • 57. 57 Na stranici ubacujemo novi red :To find out about kangaroos,see here,i od reči here napravićemo link do imenovanog sidra. Ako kliknemo na OK pređemo na LIVE VIEW kliknemo na here odlazimo na kraj stranice,jer je tamo postavljeno imenovano sidro. LINK se ukljanja ako ga selektujemo Modifay>Romove link.Za proveru linkova koristimo Site<Check Link Sidewide gde na dodatnom panelu vidimo da li ima izbrisanoh linkova,koliko je spoljašnjih linkova i sl. Posebna vrsta linkova su email linkovi.Na stranici Opening times dopisaćemo tekst:To confirm todays opening times:send email to our office.Selektovaćemo send an email to our office,popunimo šta se traži upišemo eksterni link pošte ,možete upisati email svoje firme kao na slici dole. Klikom na link prebacujemo se na email poštu.
  • 58. 58 9.FORMATIRANJE TEKSTA se vršI na više načina,i to što se može formatirati jedna reč recimo many ,koja se selektuje i pritisne dugme bold.U split pogledu se može videti da je na mestu umetanje,kursora u tom paragrafu napisano STRONG za boldovanu reč.Takođe reč ATTRACTIONS se može centrirati komandama Format<Align<Center kao na slici.Takođe ako postavimo kursor na kraju paragrafa i pritisnemo enter, program postavlja kursor u položaj novog paragrafa.Ali ako pritisnemo Shift<Enter kursor se postavlja na početak novog reda!.
  • 59. 59 Na stranicui možemo ubaciti liniju koju možemo i formatirati.Ako prvo centriramo Welcome to Spring park i želimo da ubacimo liniju iznad: Insert>html>horizontal rule.Linija je tanka,ali nam Prosperiti Inspektor dopušta da je popravimo,tako što za visinu upišemo 10 piksela a za širinu100px.
  • 60. 60 Kada podešavamo width možemo podesiti i procente recimo 50% a linija će biti pola dužine od cele. Ubacićemo text za futer na stranicu home page.Kliknemo na footer Insert>Html>Specijal caracter i izaberemo Copyright i upišemo tekst.Ako želimo da ubacimo i datum Insert>Data , recimo izaberemo datum, i čekiramo Update automatacally on save. Pojaviće se današnji datum u futeru. Još nam ostaje da ubacimo na futeru iste podatke za sve stranice koje smo napravili. Na drugoj stranici smo izvršili neke promene u tekstu tao što smo ARRIVALS stavili u ITALIC font.Ako uđemo u Windows>History pojaviće se sedeća slika:
  • 61. 61 U History panelu vidimo koje smo sve promene i formatiranja vršili na stranici.Ako mišem pomeramo klizač na gore AUTOMATSKI se vraća prvobitni izgled strane pre formatiranja,znači briše se reč koja je dopisana i gubi se italic.Ako bi klizač pomerali do kraja- pojavio bi se PRVOBITNI IZGLED STRANICE,što znači da program beleži sve promene koje smo uradili na toj stranici od samog početka.Ako se to uradi sa našom stranicom dobićemo: Takođe za vraćanje upisanog teksta ili reči koristimo UNDO typing i REDO backspace. 10.UBACIVANJE SLIKA vršI se tako što prvo u glavnom folderu otvorimo podfolder images..Po otvaranju foldera idemo na Site>Manage site>Spring Park I otvori se novi prozor,klikne na Advanced Settings
  • 62. 62 i odredi se putanja do odgovarajućeg foldera za slike. Istovremeno se u FILE panelu prikaže da je folder images operativan.Sada samo treba u njega staviti slike.Pošto je postavljena slika “Tri pingvina u svađi” idemo na Insert>Image i pronađemo putanju do slike.Zatim se selektuje slika i pritisne OK. Pojavljuje se prozor koji treba da opiše datu sliku.
  • 63. 63 U polje alternativnio tekst ,koji opisuje datu sliku,ostavimo za sada empty i OK.Pojaviće se slika Slika je određene veličine u pikselima ,ali je možemo obraditi za početak u Properti Inspektoru.Pošto je slika prevelika smanjićemo širinu na 300 px i kliknuti u prostor za visinu slike.On će se automatski podesiti na 233 px jer program
  • 64. 64 automatski podešava vrednost.Sada je slika umanjena. Sada možemo u samom programu kropovati sliku sa Modify>Image>Crop Slika je dobila okvir i sada možemo birati veličinu slike ako nam je to potrebno,ili deo slike.Slika posle smanjenja ako to želimo može da se razvuče,ali će REZOLUCIJA biti loša.Slika se može editovati pomoću nekog drugog programa recimo pomoću Microsoft Painta sa Modify>Image>Edit width .Slika se
  • 65. 65 pojavljuje u Paintu.Ovde se može dalje editovati,kao što se to radi u programima za obradu slika(kontrast,oštrina,jačina osvetljenosti i td).Iz dreamweavera možemo takođe sređivati sliku preko Modifay>Image>Optimaze ( scharpen ili contrast.)Formati koji se koriste kod slika su: GIF ili skraćeno Graphic Interchange Format.Ovaj format podržava 8-bitne slike sa najviše 256 boja.Koriste se za crteže,crno bele slike.GIF podržava transparetnost,pri čemu se jedna ili više boja podešavaju tako da budu providne I da se kroz njih vidi veb boja strane ispod nje.Format GIF se smatra formatom bez gubitaka,što znači da će slika prikazana u čitaču biti istog kvaliteta kao I kada je napravljena. JPEG je skraćeno od Joint Photographic Expert.Format je predviđen za 24 bitne slike i milion boja.JPEG format se mora kompresovati pa ima gubitke,što znači da kompresija žrtvuje kvalitet slike-radi smanjenja veličine fajla.Ovo je standardan format za Internet.Slike u ovom formatu ne podržavaju transparentnost. PNG skraćeno Potable Netvork Graphic je naslednik GIF formata.Za razliku od GIF-A IMA POBOLJŠANU KOMPRESIJU I POHRANJIVANJE TEXTA U SLICI.Prednost ovog formata što on omogućava slike sa milionima boja i daje providnost pozadine.Mana mu je što ne prikazuje slike u starim čitačima pre verzije 4.0.Format prikazuje isti kvalitet slike i u Windows sistemima i u Mac sistemima.Programi Adobe Fireworks i Adobe Flash za osnovni format koriste PNG format,gde je transparentnost sasvim podržana. Pogledajmo sada kako će stranica našeg dizajna izgledati na različitim uređajima,što omogućuje Funkcija multiscrean
  • 66. 66 Ovde vidimo prikaze strana Phone(320*3oopx) Tablet(768*300) Desktop(1126*276) Ako pritisnemo dugme Viewport Size i za phone promenimo širinu na 400 px videćemo da je prikaz za telefon bolji jer se vide oba ljenjira.
  • 67. 67 Veličinu prikaza koji odgovara nekom uređaju možemo podesiti i preko Edit<Preferences Alo u prozoru preferances označimo Windows size i na njemu pritisnemo dugme + i dodamo phone Sony PSP 400*270px
  • 68. 68 Po pritiskanju OK pojaviće se prikaz na Sony uređaju.
  • 69. 69 11.RAD SA TABELAMA Raspored u dokumentu može da se radi sa tabelama, ali danas primat preuzima CSS.Tabela se ubacuje sa Insert>Table.Kada se podese svi parametri stisnuti OK
  • 70. 70 U tablicu se podaci unose direktno.Kod ubacivanja tablice postoje dva moda 1.STANDARD MODE 2.EXPANDID MODE Red se selektuje kao u Excelu klikom na red sa leve strane,kolona se selektuje klikom na kolonu sa gornje strane.Nova kolona se ubacuje tako što se obeleži kolona ispred koje će doći nova kolona ,klikne se desnim klikom i pritisne Insert <Column Vidimo da se kolona ubacuje levo od selektovane kolone.Tabela se briše tako što se prvo označi I pridisne DELETE..Da se povrati Edit>Undo resizeTakođe tabela se može formatirati I preko Prosperiti Inspektora i to:poravnjanje,broj kolona i redova,poravnjanje teksta,border kao i širina u px.Takođe ćelije se mogu I spajati
  • 71. 71 (merge).komandom Modify<Table<Merge cells(predhodno se ćelije selektuju(control dugme I klik na svaku,takođe i odrediti boju pozadine.Ovo je ujedno tabela koju ćemo koristiti na stranici Admission prices. 12.SLOJEVI I CSS LAYOUT Slojevi(Layers)su strukturni elementi Web stranice.Oni služe kao konejneri za razne elemente..U kodu se obeležavaju sa <div>,a mogu da sadrže tekst,slike,filmove i sl.Zovu se i Layout objekti jer se mogu postaviti bilo gde na stranici,jedan pored drugih ili jedni u drugima,što omogućava da se izrađuju dobri dinamički sajtovi,kao đšto je objašnjano detaljno u tekstu koji sledi: Smještaj layer-a i clipping layer-a najviše se koristi u DHTML aplikacijama. DHTML je kombinacija HTML, CSS i javascript-a i mnogo se koristi za dinamične web stranice. Takođe može se iskoristiti i za dodavanje bloka texta. Layer-i nije ništa drugo nego block određene širine i visine. Koji pomoću CSS –a može biti postavljen na određenom mestu.Pogledajte naredni primer. Svaki style element biti će objašnjen.Sa crvenim je deo koda iz CSS koji je pridodat HTML-u.Primer 1 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock { position:relative; width:500px; height:200px; background:#0000ff; color:#ffffff } </style> </head> <body> <div id="mainblock"> Ovo je mainblock </div>
  • 72. 72 </html> Ovo je mainblock U prethodnom primeru kreiran je layer (block) od 500 pixela širine i 200 pixela visine. To je urađeno sa width: i height: style elementima. Pozicionirali smo layer relativno (position:relative) što znači da će biti pozicioniran prema normalnim postavkama stranice. Ako stavimo position:absolute onda će layer biti pozicioniran prema prozoru browsera ili ruba layera unutar kog je smešten. Dakle ako promenimo "relative" u "absolute"u našem primeru layer će biti smješten u gornji lijevi ugao browsera. Isprobajte i vide ćete o čemu se radi. Primer 2 . Naredni primer pokazuje kako smestiti layer na x-os (horizontalno) i y-os (vertikalno). <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff } </style>
  • 73. 73 </head> <body> <div id="mainblock"> Ovo je mainblock. </div> </html> Daje: Ovo je mainblock. Layer se može smestiti gde god hoćete ako upotrebite left: i top: style elemente. left: definiše horizontalan razmeštaj, top: vertikalni. Layer je smešten 100 px od levo i 30 pixela od vrha. .Primer3 . Takođe može staviti layer na layer... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title>
  • 74. 74 <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff } #yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 } #greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000 } </style> </head> <body> <div id="mainblock"> Ovo je mainblock. <div id="yellowblock"> Ovo je yellow block. <div id="greenblock"> Ovo je green block. </div> </div> </div> </html> Ovo je mainblock. Ovo je yellow block. Ovo je the green block Rezultat je: e
  • 75. 75 Yellow block je smešten na 30 pixels od leva, 50 pixela od vrha donjeg layera (parent layer). Green block smešten je 30 pixela od leva 30 pixela od vrha yellow blocka. NAPOMENA : .Primer 4 . Negativne vrednosti za left: i top: style elemente mogu se također koristiti. U tom slučaju layeri će biti smešteni "izvan" ekrana pa će deo ili celi block biti nevidljiv. Primer: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock { position:relative; left:-110px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff } </style> </head> <body> <div id="mainblock"> Ovo je the mainblock. </div> </html> Dobijamo:
  • 76. 76 This is the mainblock. Primer 5 . Clipping layers Clipping layeri ne znači ništa drugo nego odsecanje dela layera. Primer: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock1 { position:relative; left:0; top:0; width:300px; height:200px; background:#000000; color:#ffffff } #mainblock2 { position:relative; left:0; top:10px; width:300px; height:200px; background:#000000; color:#ffffff } #yellowblock1 { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 } #yellowblock2 { position:absolute; left:30px; top:50px; width:250px; height:100px; clip:rect(0,100px,45px,0); background:#00c000; color:#000000 } </style> </head> <body> <div id="mainblock1"> Ovo je mainblock1. <div id="yellowblock1"> Ovaj layer nije odrezan </div> </div> <div id="mainblock2"> Ovo je mainblock2. <div id="yellowblock2"> Ovaj layer jeste odrezan </div> </div> </html>
  • 77. 77 Ovo je mainblock1. Ovaj layer nije odrezan Ovo je mainblock2. Ovaj layer jeste odrezan U mainblock1 žuti layer nije odrezan. Ali u mainblock2 žuti layer je smanjen na 100 pixela širine i 45 pixela visine. Ako želimo skresati layere upotrebiticlip:rect(top value, right value, bottom value, left value). Za naš prethodni primer: clip:rect(0,100,45,0) će značiti: skrati desnu ivicu žutog layera za 150 pixela ,a donju za 55 pixela. Primer 6 . z-index Ovaj style element defini[e položaj iznad ispod (z-os). Drugim rečima, definiše koji će layer biti gornji ,a koji donji. Pretpostavimo da imamo layere koji se preklapaju: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title>
  • 78. 78 <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff } #yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000 } #greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000 } </style> </head> <body> <div id="mainblock"> Ovo je mainblock. <div id="yellowblock"> Ovo je yellow block. </div> <div id="greenblock"> Ovo je green block. </div> </div> </html> Ovo je mainblock. Ovo je yellow block. Ovo je green block.
  • 79. 79 Kao što vidite, green layer (zeleni) je iznad yellow (žutog). Primer 7 . Ako želimo da žuti bude iznad zelenog upotriebiti z-index: style element. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } #mainblock { position:relative; left:100px; top:20px; width:500px; height:200px; background:#000000; color:#ffffff } #yellowblock { position:absolute; left:30px; top:50px; width:250px; height:100px; background:#ffff00; color:#000000; z-index:2 } #greenblock { position:absolute; left:30px; top:30px; width:100px; height:50px; background:#00c000; color:#000000; z-index:1 } </style> </head> <body> <div id="mainblock"> Ovo je mainblock. <div id="yellowblock"> Ovo je yellow block. </div> <div id="greenblock"> Ovo je green block. </div> </div> </html>
  • 80. 80 : Ovo je mainblock. Ovo je yellow block. Ovo je green block. 13. KONCEPT SLOJEVA U DREAMWEAVERU , U DW postoje dva tipa slojeva koje možete nacrtati I ubaciti u dokument:regularni <div> i AP Div koji se kontroliše preko AP elements Panela.Oba sloja se ubacuju sa Insert>Layout Object, a zatim odabirom Div tag ili AP tag.
  • 81. 81 Lada kliknete na Div tag otvoriće se Insert Div tag dijalog box(slika ispod).U njemu postoje razna mesta umetanja: 1.Before end of a tag 2.At insertion point 3After start of tag 4.Before and of tag. 1.Ako odaberte ovo polje bira se posle kog završnogtaga elementa ubacujete sloj.Recimo ako je u pitanju Body Tag program će uneti ovaj kod: <body> <p>neki sadržaj</p> <div>Sadržaj za novi div ide ovde</div> </body> 2.Odabirom ove opcije sloj se ubacuje na mestu kursora u dokumentu. 3.Odabirom ove opcije birate posle kog početnog Taga elementa ćete ubaciti sloj.Na primer ako izaberete Body Tag DW će uneti sledeći kod: <body> <div>Sadržaj za novi Div ide ovde</div> <p>neki sadržaj</p> </body>
  • 82. 82 Ako već postoji neki sadržaj na stranici na kojoj želite da postavite sloj,selektujter taj sadržaj I automatski se otvara nova opcija u Insert Div Tag dijalog boxu:Wrap around selection(ova opcija postavlja div oko . Selekciji Hello World .Predhodno treba odrediti klasu class I atribut ID, Class-Ova opcija dodeljuje već postojeću klasu div elementu ID-Ova opcija dodeljuje ID atribut div elementu New CSS rules klikom na ovo dugme možete da napravite novu klasu u vašem CSS fajlu I dodelite ga div elementu dok ga unosite u dokumenat. Kada ubacujete AP Div DW automatski unosi unutrašnji CSS u Head sekciju dokumenta,sa velićinom I pozicijom elementa.U kodu elementa se unosi div Tag sa atributom ID<div id=”Apdiv1”></div>,a takođe se postavlja i marker u AP Elements panelu.Svaki sledeći AP elemenat dobija ID automatski sa vrednošću Ap Div2,I td. Ovaj div možemo namestiti gde želimomzaokrenuti ga za 90 stepeni ili bilo koji ugao,upisati tekst,uneti sliku I slično.Pogodan je za sajtove koji imaju informacije koje trebaju da se istaknu. 14.CSS STILOVI U HTML-u CSS je jezik sadrži sve one podatke (sintakse), koji imaju zadatak da odrede dizajn elementa jedne web strane.
  • 83. 83 • Stilovi definišu izgled html elemenata • Stilovi su dodati u HTMLv 4.0 • Razni nivoi definicije stilova: – Stil na nivou elementa (najniži nivo) – Stil na nivou html strane – Spoljašnji stil (eksterni file) – Podrazmevani prikaz u browser-u (najviši nivo) • Različiti nivoi definicije stilova za jedan isti html elemenat, na web strani će imati različite prioritete u zavisnosti od nivoa – najniži nivo ; najviši prioritet Problematika html-a • Html tag-ovi su prvobitno zamišljeni da definišu sadržaj web strane • Prikaz dokumenta je trebalo da bude zadatak browser-a • Dva sukobljene firme su dodavala nove html tag-ove i atribute originalnoj specifikaciji html-a, što je bitno otežavalo striktno razdvajanje sadržaja i način prikazivanja – na pr. <font> tag i color atribut . Kao odgovor na takvo stanje, W3C – neprofitna organizacija za standardizaciju web-a je kreirala stilove – styles u html-u V 4.0! Prikaz preko CSS-a • CSS određuju način prikaza html elemenata • Stilovi su najčešće smešteni u posebnim file - ovima sa ekstenzijom CSS, mada mogu biti i na web strani • CSS u posebnim file-ovima omogućavaju da se veoma lako( centralizovano) može i po potrebi menjati način prikaza html elemenata na čitavom web site-u, koji može imati veliki broj strana.
  • 84. 84 • CSS omogućavaju da se jednom definisani izgled web strane koristi na velikom broju drugih web strana što doprinosi ujednačenom vizuelnom izgledu i prikazu web strana na site-u CSS syntacs – sintaksa • Osnovna sintaksa definicije stila se sastoji od tri osnovna elementa: SELECTOR PROPRETY VALUE. • Selector je html element / tag za koji se definiše stil • Property je svojstvo / atribut kojim se stilom podešava • Value je vrednost atributa Primeri stilova: • body {color: black} (<body>) • • p {font-family: "sans serif"} (<p> navodnici ako se vrednost atributa sastoji iz više odvojenih reči) • • p {text-align:center; color:red} (podešavanje više svojstava jednog elementa) • Da bi se olakšalo kodiranje i optimatizacija stilova koji su primenjeni na HTML tagove, a koji čine strukturu svakog sajta osmišljen je CSS(kaskadni stil) .U sledećem kodu vidi se gde treba da se nalaze tagovi koji čine strukturu sajta(div,a,span,p…):
  • 85. 85 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Naslov ove stranice</title> <link href="global.css" type="text/css" rel="stylesheet" /> </head> <body> <!-- glavni kontejner sa ID-jem "wrapper" --> <div id="wrapper"> <!-- kontejner sadržaja sa vrha sajta sa ID-jem "header", unutar koga će se naći LOGO i navigacija --> <div id="header"> <!-- IMG - image tag koji će prikazati Logo --> <img src="url(slika.jpg)" alt="Naziv sajta" /> <!-- kontejner za "meni" - navigaciju sajta sa ID-jem "nav" (skraćeno od navigation) --> <ul id="nav"> <li> <a href="nav2.html">nav 2</a> </li> <li> <a href="nav3.html">nav 3</a> </li> </ul> </div> <!-- kontejner središnjeg dela sajta sa ID-jem "body" --> <div id="body"> Slike i tekst </div> <!-- kontejner sadržaja sa dna sajta sa ID-jem "footer" --> <div id="footer"> npr. ponovljena navigacija, copyright, godina itd ...
  • 86. 86 </div> </div> </body> </html> Tagovi koje smo koristili tiču se formatiranja i razdvajanja delova HTML-a.Problem je samo u tome što kada razdvojimo HTML na neki od načina ,mi unapred te delove stilski formatiramo.Ali ako želimo da naznačimo da neka logička podela postoji,ali da pri tom ne želimo da je stilski identifikujemo,ovi tagovi nam nisu korisni.Umesto toga koriste se tagovi div i span Span tag je najprostiji vid logičkog razdvajanja sadržaja,i prilikom korišćenja nema UTICAJA na sadržaj ,sve dok to ne naglasimo eksplicitno stilovima-
  • 87. 87 Pogledajmo primer: Vidimo da se SPAN uopšte ne primećuje na strani sve dok se ne pogleda izvorni kod HTML-a.Ipak ako u taj span unesemo Like most Mbuna, <span style="border: 1px solid #000000; padding:3px; background-color:#FF0000; color: #FFFFFF;">demasoni are vegetarians</span> and should be fed foods high in spirulina and other vegetable content. Rezultat bi bio: Jasno je da smo span tag iskoristili da izolujemo celinu na koju želimo da primenimo određene korekcije Ako bi u sadržaj umesto span taga koji nema uticaj na sadržaj ubacili div tag on vrši određena formatiranja u odnosu na span tag: Like most Mbuna, <div>demasoni are vegetarians</div> and should be fed foods high in spirulina and other vegetable content. : Ova matrijalna osobina div taga važna je za njegovu upotrebu kod izrade dinamičkih sajtova.Postoje još dva atributa koje poseduju HTML dokumenti .Prvi atribut je: id (ovaj atribut je ono čime ćemo nalaziti elemente kada im budemo pristupali u toku izvršavanja strane ) Drugi atribut je class -( on omogućava dodeljivanje CSS klase sadržaju elementa) 5.1 Umetanje Cascading Style Sheet-a u HTML Cascading Style Sheet može se umetnuti u HTML na 3 načina. Prvo, style
  • 88. 88 elementi mogu se dodati direktno u HTML tag, što se zove "inline" style sheet. Drugo, style sheet može biti deo HTML dokumenta ("internal" style sheet), a to podrazumeva direktno upisivanje u HTML dokument u <head> područje. Na kraju, može biti odvojeni "external" style sheet koji će se pozivati pomoću web adrese (URL-a) svaki put kad se HTML dokument bude učitavao. Link za odvojeni external style sheet takođe će se smestiti između <head> tagova. 1.Inline Style Sheet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Document's title</title> </head> <body> <p style="style elements go here"> </p> </body> </html> 2.Internal Style Sheet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Document's title</title> <style type="text/css"> style elements go here </style> </head> <body> Content's goes here </body> </html>
  • 89. 89 Deo napisan u boldu je CSS: <style type="text/css"> style elements </style> 3.External Style Sheet <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Document's title</title> <LINK href="filename.css" rel="stylesheet" type="text/css"> </head> <body> Content's goes here </body> </html> Spoljni (external) file povezan je s našim HTML dokumentom pomoću: <LINK href="filename.css" rel="stylesheet" type="text/css"> Svi style elementi biti će smešteni u poseban, odvojeni CSS dokument te mu se dodaje .css extenzija! UOČITE : Ako external style sheet nije u istom direktoriju gdje je HTML dokument onda to morate odrediti bilo apsolutnim, bilo relativnim putem do fajla: LINK href="http://myaddress.com/filename.css" rel="stylesheet" type="text/css" . 5.2 Background & Color
  • 90. 90 Background color: Predefinisana boja pozadine kod većine browsera je bela. No vrlo lako je možemo promeniti. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#00ff00; color:#ffffff } </style> </head> <body> Sadržaj ide ovde ... </body> </html> body { background:#00ff00 } pozadina će pozeleniti. Takođe može i: body { background:green } . Oznake pojedinih boja. #33ffff #33ccff #3399ff #3366ff #3333ff #3300ff #00ffff #00ccff #0099ff #0066ff #0033ff #0000ff #ffff66 #ffcc66 #ff9966 #ff6666 #ff3366 #ff0066 #ccff66 #cccc66 #cc9966 #cc6666 #cc3366 #cc0066
  • 91. 91 Background-image: Takođe može se upotrebiti slika za pozadinu. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background-image: url("image.gif") } </style> </head> <body> Sadržaj ... </body> </html> body { background-image: url("image.gif") } će koristiti "image.gif" za pozadinu. Naravno to može biti i neki drugi fajl s nekom drugom extenzijom npr. "image.jpg". Pri upotrebi slika za pozadinu možete iskoristiti dosta trikova u CSS-u. Pogledajte sledeći style element. UOČITE : Ukoliko slika nije na istom serveru gde je i HTML dokument morate upotrebiti apsolutni put do fajla npr.: body { background-image: url("http://somewhere.com/image.gif") } . Primer 6 .
  • 92. 92 U jedan style element može se staviti više atributa. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background-image: url("image.gif"); background-repeat: repeat-y; background-attachment: fixed } </style> </head> <body> Sadržaj ... </body> </html> Takođe dopušteno je koristiti i sledeće oblike. Primer: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background-image: url("image.gif"); background-repeat: repeat-y; background-attachment: fixed } </style> </head> <body> Sadržaj ... </body> </html>
  • 93. 93 Ili skraćeni oblik: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background-image: url("image.gif"); repeat-y fixed } </style> </head> <body> Sadržaj ... </body> </html> Color Takođe i boja texta se može promeniti. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffff00 } </style> </head> <body> Sadržaj ... </body> </html>
  • 94. 94 body { background:#000000; color:#ffff00 } označava crnu pozadinu i žuti text. Boju možete promeniti sa color:#ffff00 atributom. Dozvoljeno je i upotrebiti background:black; color:yellow . VEOMA VAŽNO : U svakom style elementu koji definiše boju pozadine definišite obavezno i boju texta. To vredi i obratno. Pa npr. background: i color: bi trebali uvek ići zajedno. To je ujedno i preporuka W3C standarda. Color vrednosti određene u body style elementu uticaće na ceo dokument, tj. celi text u HTML dokumentu koristiti će tu boju. Takođe možemo upotrebiti različite boje u textu. Pretpostavimo npr. da želimo da naš header bude crven, a italic text plav. To će izgledati ovako: Primer 7 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffff00 } h1 { background:#000000; color:red } em { background:#000000; color:blue } </style> </head> <body> <h1>A red header</h1> This is yellow text but <em>italic text is blue</em> </body> </html> Ovo izgleda ovako:
  • 95. 95 Crveni header Normalan text je žut italic text je plav Primer 8 .: GROUPISANJE style elementa takođe je moguće. Pretpostavimo da želite sve header-e i italic text u istoj boji. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffff00 } h1, h2, h3, h4, h5, h6, em { background:#000000; color:red } </style> </head> <body> <h1>Header</h1> <h2>Header</h2> <h3>Header</h3> <h4>Header</h4> <h5>Header</h5> <h6>Header</h6> <em>italic text</em> </body> </html> Ovo izgleda ovako: Header
  • 96. 96 Header 5.3 Selectori Class selector: Class selector se dosta primenjuje u CSS-u. Pretpostavite da koristite nekoliko <h1> tagova u našem HTML dokumentu, ali im želimo pridružiti različite boje. Ako upotrebimo vaj oblik: h1 { color:yellow; background:#000000 } svi <h1> tagovi će biti žuti. No šta ako želimo imati i žutu, plavu i crvenu? Upotrebi ćemo "class". Pogledajte naredni primer: Primer 9 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } .yellow { color:yellow; background:#000000 } .blue { color:blue; background:#000000 } .red { color:red; background:#000000 } </style> </head> <body>
  • 97. 97 <h1 class="yellow">Header</h1> <h1 class="blue">Header</h1> <h1 class="red">Header</h1> </body> </html> Rezultat je: Header Header Header NAPOMENA 1: Kad se definiše class ispred MORA biti tačka (.). Naziv class-a može biti bilo kakav. Taj naziv će se kasnije upotrebiti u HTML tagu i MORA biti isti kao u Style Sheet-u! Dakle, ako defininišite class: .yellow { text-color:yellow; background:#000000 } onda MORATE upotrebiti: <h1 class="yellow"> NAPOMENA 2: Jednom kada definišite class možete ga upotrebiti u različitim tagovima. Primer: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff }
  • 98. 98 .yellow { color:yellow; background:#000000 } </style> </head> <body> <h1 class="yellow">Header</h1> <em class="yellow">neki text</em> <p class="yellow">pisanje na zidu...</p> </body> </html> Rezultat je: Header neki text pisanje na zidu... Primer 9 . Class se može primeniti i samo na jedan class element . Primer: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } h1.yellow { color:yellow; background:#000000 } </style> </head> <body> <h1>Ovaj header nije žut</h1>
  • 99. 99 <h1 class= "yellow">Ovaj header jeste žut</h1> </body> </html> : Ovaj header nije žut Ovaj header jeste žut ID selector: Vrlo je sličan class selectoru. Jedina razlika je da ID mora ispred imati # u style sheet-u dok HTML tag mora sadržavati "ID". Primer 10 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } #yellow { color:yellow; background:#000000 } #blue { color:blue; background:#000000 } #red { color:red; background:#000000 } </style> </head> <body> <h1 id="yellow">Header</h1> <h1 id="blue">Header</h1> <h1 id="red">Header</h1>
  • 100. 100 </body> </html> Rezultat je: Header Header Header Kad definišite ID ispred MORA biti znak # . Naziv može biti bilo kakav. Naziv koji upotrebite za ID i koji dodate u HTML tag MORA biti isti kao u Style Sheet-u! Primer: #yellow { text-color:yellow; background:#000000 } pa MORATE napisati <h1 ID="yellow">. Pseudo Class selector A:link A:visited A:hover A:active Ove pseudo class-e koriste se za linkove (HTML tag:<a> ). One određuju kako će linkovi u dokumentu izgledati. Primer 11 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head>
  • 101. 101 <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffff00 } A:link { color: red; background:#000000 } A:visited { color: blue; background:#000000 } A:hover { color: green; background:#000000 } A:active { color: lime; background:#000000 } </style> </head> <body> Posetite nas <a href= "http://myaddress.com">click</a> </body> </html> Posetite nas click A:link { color: red; background:#000000 } link će biti crven. A:visited { color: blue; background:#000000 } posećeni link će biti plav. A:hover { color: green; background:#000000 } link će postati crven kad stavimo miš na njega. A:active { color: lime; background:#000000 } link postaje lime boje kad kliknemo na njega. NAPOMENA 1: MORATE upotrebiti pseudo class-e po takvom redu! NAPOMENA 2: Takođe može se upotrebiti i ovakav oblik: A:link { color: red; background:#000000 } = :link { color: red; background:#000000 }
  • 102. 102 A:visited { color: blue; background:#000000 } = :visited { color: blue; background:#000000 } A:hover { color: green; background:#000000 } = :hover { color: green; background:#000000 } A:active { color: lime; background:#000000 } = :active { color: lime; background:#000000 } 5.4 Margine, padding i border 'Margin-top', 'margin-right', 'margin-bottom', 'margin-left' i 'margin' Margine određuju veličinu margin okvira. Pogledajte margin okvir (slika uzeta iz W3C CSS2 Specification): LM = levamargina, LB = levi border, LP = levi padding itd. Dimenzije svih margina mogu biti izražene u jedinicama ili procentima. Apsolutne vrednosti mogu biti: em (font veličina odgovarajućeg fonta) ex (visina od slova x odgovarajućeg fonta) px (pixel) in (inche) cm (centimeter) mm (millimeter) pt (point) pc (picas = 12 points) Nemojte da vas ovo sve uplaši. Slobodno isprobajte sve veličine i koristite onu za koju smatrate da je najpogodnija. Procenti se izražavaju pomoću % znaka. Objasnimo sada pojam margine.
  • 103. 103 Primer 12 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } h1 { margin-left: 10px; margin-top:20px } </style> </head> <body> <h1>Header 1</h1> </body> </html> Izgleda ovako: Header 1 Margina je udaljenost merena od crnog ruba . Primer 13 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { margin-top:25pt; margin-right:25pt; margin-bottom:25pt; marginleft:25pt } </style> </head> <body> <p>neki text</p>
  • 104. 104 </body> </html> izgleda ovako: neki text NAPOMENA : Postoji i skraćeni oblik p { margin-top:25pt; margin-right:25pt; marginbottom:25pt; margin-left:25pt }. Na ovaj način: p { margin:25pt } . U ovom slučaju sve margine će biti 25pt. Ostale mogućnosti su: p { margin:25pt 30pt } označava top & bottom 25pt - right & left 30pt p { margin:25pt 30pt 35pt } označava top 25pt - right 30pt - bottom 35pt -left 30pt 'padding-top', 'padding-right', 'padding-bottom', 'padding-left' i 'padding' Padding određuju dimenzije padding područja . Primer 14 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff }
  • 105. 105 h1.padding { background:#c00000; padding-top:20px; padding-right:20px; padding-bottom:20px; padding-left:20px } </style> </head> <body> <h1>Header 1</h1> </body> </html> Izgleda ovako: Header 1 Padding područje je udaljenost između ruba crvenog pravougaonika i pravougaonika unutar kog je sadržaj. NAPOMENA: Skraćeni oblik je sličan kao za marginu h1 { padding-top:20px; padding-right:20px; padding-bottom:20px; paddingleft:20px } je isto kao h1 { padding:20px } . Sav padding je 20px. Border Border width: 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width' i 'border-width' Border-width određuje debljinu okvira. Vrednosti mogu biti: thin, medium, thick ili fixed. Border style: 'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style' i 'border-style' Border-style određuje izgled okvira. Vrijednosti su: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
  • 106. 106 Border color: 'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color' i 'border-color' Border-color određuje boju. Isprobajmo sada sve border style elemente: Primer 15 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } h1 { border-width: thick; border-color:#00ff00; border-style:double } </style> </head> <body> <h1>Header</h1> </body> </html> Prikazat će: Header Primer 16 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } h1 { border-width: 20px; border-color:#0000ff; border-style:outset } </style>
  • 107. 107 </head> <body> <h1>Header</h1> </body> </html> Dobićemo: Header 5.5 Font font-familija Font-family style element omogućava izmenu fonta na web stranici. Primer 17 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { font-family: Verdana, Arial, 'Times New Roman', serif } </style>
  • 108. 108 </head> <body> <p>Ovo je verdana text</p> </body> </html> A izgleda ovako: Ovo je verdana text NAPOMENA 1: U gornjem primeru upotrebljeni su različiti fontovi: Verdana, Arial, Times New Roman, Serif. Nije potrebno koristiti više od jednog fonta no dobro je fontfamily attribut završiti sa "generic" family. "generic" family može biti: serif, sans-serif, cursive, fantasy ili monospace. Ako browser pročita ovaj style sheet: p { font-family: Verdana, Arial, 'Times New Roman', serif } uzima prvi font u nizu, tj. font Verdana. Ako takav font ne postoji na korisnikovu računaru, browser uzima naredni, Arial itd. Ako ne nađe niti jedan, upotrebiti će "generic" font koji je u normalnim okolnostima uviek prisutan na računaru. Zato je preporuka uvek završiti sa "generic" fontom. NAPOMENA 2: Fontovi u čijem nazivu postoje razmaci (više od jedne reči) moraju se staviti u navodnike: npr. 'Times New Roman', 'Book Antiqua'. font-style Ovaj style element ima 3 moguće vrednosti: normal, italic ili oblique (normal ili italic se najčešće koriste). Primer 18 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html>
  • 109. 109 <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { font-size:italic } h1 { font-size:normal } h2 { font-size:italic } </style> </head> <body> <h1>Header 1</h1> <p>Ovo je neki text</p> <h2>Header 2</h2> </body> </html> Dobićemo: Header 1 Ovo je neki text Header 2 font-variant Ovaj style element ima 2 moguće vrednosti: normal ili small-caps. Primer 19 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { font-variant:small-caps } h1 { font-variant:normal } </style>
  • 110. 110 </head> <body> <h1>Header 1</h1> <p>Neki text</p> </body> </html> Da će: Header 1 NEKI TEXT font-weight Moguće vrednosti: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | Primer 20 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { font-weight:bold } em { font-weight:200 } </style> </head> <body> <p>neki bold text</p> <em>ovo je light text</em> </body> </html> U vašem browseru će izgledati ovako:
  • 111. 111 neki bold text ovo je light text font-stretch Moguće vrednosti: normal | wider | narrower | ultra-condensed | extracondensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | NAPOMENA : Ovaj style element radi samo ukoliko određeni font-family podržava ove vrednosti. font-size Omogučava promenu veličine fonta. Moguće vrednosti: apsolutne: [ xx-small | x-small | small | medium | large | x-large | xx-large ] relativne: [ larger | smaller ] daljina procenat Primer 21 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { font-size:xx-large } em { font-size:10px } </style>
  • 112. 112 </head> <body> <p>malo extra extra veliki text</p> <em>ovo je 10px text</em> </body> </html> Izgleda ovako: malo extra extra veliki text ovo je 10px text 5.6 Text text-indent Ovaj style element određuje uvlačenje prve linije texta u bloku. Vrednosti su: daljina ili procenti. Primer 21 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { text-indent:30pt } </style> </head> <body> <p>ovaj text je uvučen za 30 pt-a</p>
  • 113. 113 </body> </html> Izgleda ovako: ovaj text je uvučen za 30 pt-a text-align Ovaj style element koristi se za poravnanje texta. Moguće vrednosti: left | right | center | justify Primer 22 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { text-align:center } div { text-align:right } </style> </head> <body> <p>centrirani text</p> <div>ovaj text je poravnat udesno</div> </body> </html> Daje: centrirani text ovaj text je poravnat udesno
  • 114. 114 text-decoration Određuje dekoraciju texta. Vrednosti none | underline | overline | line-through | blink Primer 23 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { text-decoration:underline } div { text-decoration:line-through } h5 { text-decoration:overline } </style> </head> <body> <p>podcrtani text</p> <div>precrtani text</div> <h5>nadcrtani text</h5> </body> </html> Rezultat je: podcrtani text precrtani text nadcrtani text letter-spacing and word-spacing
  • 115. 115 Vrednosti: normal | daljina Primer24 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } p { letter-spacing:5pt } em { word-spacing:10px } </style> </head> <body> <p>sva slova imaju razmak 5 point-a</p> <div>sve reči imaju razmak od 20 pixel-a</div> </body> </html> Daće: sva slova imaju razmak 5 point-a sve reči imaju razmak od 20 pixel-a text-transform Ovaj atribut kontroliše velika i mala slova. Vrednosti: capitalize | uppercase | lowercase | none Primer25 . <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
  • 116. 116 <html> <head> <title>Naslov</title> <style type="text/css"> body { background:#000000; color:#ffffff } h1 { text-transform: uppercase } p { text-transform:capitalize } div { text-transform:lowercase } </style> </head> <body> <h1>header velikim slovima</h1> <p>prvo slovo svake reči veliko</p> <div>SVA SLOVA MALA<div> </body> </html> Vide ćete: HEADER VELIKIM SLOVIMA Prvo Slovo Svake Reči Veliko sva slova mala 15.KASKADNI STILOVI U DREAMWEAVER-u Već smo videli da Cascading style sheets (CSS) nudi mnogo više kontrole na izgledom i pojavljivanjem elementa na Web stranicama, tako što implementira niz pravila koji opisuju ove elemente. Korišćenjem stilova , preventivno spreĉavamo da se pojavljivanje teksta na stranici određuje politikom
  • 117. 117 preglednika (browser-a) koji prikazuje stranicu. Videli smo da možeme da koristime stilove za izgled teksta (boja, veliĉina i stil) za razliĉite naslove, podnaslove, napomene,tablice itd. Čak i da browser prikaže tekst u drugom fontu, ostala podešavanja će ostati nepromenjena, odnosno onakva kako ste ih vi definisali. Konaĉno uz stilove možemo da kreiramo i svoje klase , koje nam praktiĉno omogućavaju da stvaramo sopstvene tagove.Poćićemo od praznog dokumenta,čiji kod je prikazan na slici.Kreiraćemo glavni paragraf i jedan div I to: atributom class i imenom main_paragraf ,i još jedan div sa atributom ID koji definiše ovaj paragraf..ID paragram je prvi fudamentalni koncept CSS-a.Drugi isto važan koncept je unutar body sekcije.Zatim smo ubacili DIV što u prevodu znači konejner<div> i na kraju sleš</div>.Vidimo da svaki div ima svoju indentifikaciju.Ako pređemo u design pogled,slika ispod:vidimo dva diva,
  • 118. 118 prvom piše Hallo World i u statusnoj liniji liniju tekst za prvi div.Ako kliknemo na prostor drugog diva dobićemo slično: Ž Sada ćemo se pozabavi hederom ,prvo smo stavili naslov CSS title i dodali stil.Zatim smo sa .body{backgraund-color:#3CF;} promenili pozadinu u svetlo plavu,kao na slici ispod.. CSS stile čine kao što smo već objasnili dva glavna dela 1. SELECTOR u našem slučaju body i 2. DEKLARACIJA koju ubično dele na dva dela:SVOJSTVO(backgraund- color) i SAMU VREDNOST value “3CF Body {backgraund-color:#3CF;} Definisaćemo css stilove za part 1 i part 2.,što se vidi u 8 i 9-om redu CODE prikaza.
  • 119. 119 Promenili smo boju diva 2 u crvenu #F33i .Ako za svaki div dodamo po dva paragrafa i u prvom divu postavimo centralno poravnjanje, a iza paragrafa stavimo zarez( p,) svi će se poravnati. To se može videti na slici ispod:
  • 120. 120 Vratićemo se na naš sajt.Predhodno smo uveli nove stilove u dokument i pokazali kako se menja pozadina,poravnjanje I slično.Ako se vratimo na matičnu stranu našeg sajta i uđemo u Code pogled vidimo da je program ubacio naš stil. text/css(slika iznad šesti red).Da bi promenili boju pozadine stranice idemo u Code pogled nađemo .conteiner Po unošenju promena za širinu 800px promenom boja iz paleta boja koji sam otvara program, uzeli smo boju #6F6,stranica menja svoju pozadinu.
  • 121. 121 To međutim ne znači da će sve stranice promeniti boju.Da bi to uradili moramo da napravimo Svoj Css stil i da ga zatim primenimo na ostale stranice.Za sada ćemo ponovo podesiti širinu kontejnera na 960 px.Otvorićemo CSS panel i na kartici All selektovati sva pravila koja smo koristili.Desni klik na njih pa kliknemo Move to folder i izaberemo A new sheet stayle
  • 122. 122 i pritisnemo Save.Ako sada u CSS panelu kliknemo na svoj CSS koji smo napravili,vidimo da se pojaviou naslovnoj liniji dokumenta. . Vratićemo se na home page stranicu.Ako uđemo u Code pogled, vidimo celu sekciju za STILOVE!Pošto nam više neće trebati obrisaćemo je.
  • 123. 123 Pređimo sada na drugu stranicu New Arrivals.Ako selektujemo sve od style title do kraja završno sa >/head> i obrišemo, pa uđemo na MODIFY>CSS otvoriće se panel u kome pritisnemo ikonicu Attach External Style Sheet.Pronađemo svoj stil sa browse u prozoru i pritisnemo OK.U CODE pogledu vidimo da se pojavio link koji je naša veza sa našim springpark01.css.,slika iznad,selektujemo liniju sedam .Ako se vratimo u Design pogled vidimo da jer STIL delovao na stranicu sa svim našim postavkama iz CSS-a-To sada treba uraditi i sa ostalim dvema stranicama. Ostale dve stranice istim postupkom dobijaju svojstva našeg stila,kao i dve predhodne. ZAKLJUČAK :U ovom postupku vidimo smisao CSS kaskadnog stila.Pošto smo napravili novi eksterni CSS springpark01.css i primenili ga na HOME stranicu, morali smo postupak da ponovimo za svaku stranicu zasebno.Ne postoji način da se bez ubacivanja linka koji vodi do kreiranog stila ,promeni izgled stranice ,kako mi želimo.Mora se raditi sa svakom stranicom kao kaskadom.
  • 124. 124 16.IZRADA NOVOG CSS PRAVILA , mogu Ova pravila koja pravimo važiće za tabele,mada mogu važiti za slike,tekst I td..Ako u CSS panelu kliknemo na dugme New CSS Rules dobićemo prozor koji smo popunili kao na slici,zatim kliknemo OK. Pošto smo kliknuli OK dobićemo novi prozor:
  • 125. 125 Tablica ispod je modifikovana, a u CSS panelu pojavilo se info_table.Klikom na ovaj stil vidi se koje su promene uvedene.Ako želimo da napravimo klasu idemo na split pogled ,kliknemo na tabelu i obrišemo sve u redu gde su osobine za Weight i Border i na tom mestu dodamo CLASS=”,pojaviće se padajući meni na kome dva puta kliknemo na info_table što se automatski unosi u kod i, na kraju Refresh.Tablica home dobija nov izgled.Sve ovo treba da ponovimo i na 121stranici , gde je tablica Addmision price. Ovo je novi izgled tablice home sa 103 strane ,a ispod novi izgled stranice Addmision Price:
  • 126. 126 17.KORIŠĆENJE SPRAY MENIJA SPRAY vidžet je sastavni deo ovog programa i napisan je u JAVA SCRIPTU.Pomoću ovog programa napravićemo nov izgled linkova i posle toga proveriti da li oni rade.Ovo možemo raditi za svaku stranicu zasebno,ili kada napravimo za jednu stranicu,samo treba kopirati i ubaciti Code u Java script na pravo mesto.
  • 127. 127 Prvo u izvornom kodu obrišemo deo programa od sidebar1 do kraja .,ili predhodno selektujemo linkove a program će sam u code pogledu označiti deo koji se odnosi na linkove.Zatim idemo na Insert>Spray>Spray meni bar.Prvo moramo da otvorimo novi folder,kliknemo dva puta na Spring park- glavni folder u CSS panelu, i otvorimo novi folder Spray Assets,i sada treba sačuvati ovaj folder sa:Manage Site>Edit>Advance settings>Spray pronađemo folder u pu Vidimo da se Spray meni bar se pojavio u CSS panelu tanji>Save >Done Pojavio se nov meni linkova na stranici, a u Prosperiti baru i boksovi za uređenje linkova,gde možemo dodati novi link,ili neki ibrisati sa navigacijom ,koja ide uz njega.Linkovi koji imaju strelicu desno,pokazuje da se na njih može dodati sub link.
  • 128. 128 Izgled Prosperiti bara u kome smo podesili prvi link je ovakav,item 1,2,3 ,uklonimo sa minusom -;sa plusom dodajemo nove pod linkove. Međutim stranica New Arrivals ima pod link:Kangaroos ,pa treba samo dodati + i upisati sve , samo na mestu linka dodati #Kangaroo_Wikipedia.html. Kada smo ovo uradili treba isti odraditi i za ostale dve stranice,pa će svaka stranica dobiti iste linkove i jedan podlink Kangaroos:Sledeći korak je srediti prostor oko Spray menija.,što će nam pomoći Prosperiti inspector.!
  • 129. 129 Da bi uklonili oker boju okolo, koristićemo Prosperiti Inspektora sa klikom Live>Inspect i pređemo mišem preko te površine.U CSS panelu u delu Prosperities u jednom redu prikazana je oker boja.Selektujemo taj red i dilitujemo,dobićemonovi izgled oko linkova,slika dole. Program će automatski( jer imamo externel CSS pravila) napraviti izmene i u ostalim stranicama.Sad nam prestoji da sredimo izgled dugmadi u Spray baru.Ponovo pređemo u LIVE uključimo Prosperiti Inspektora i selektujemo dugme recimo Opening time.Na Current kartici panela u dnu se pojavljuje red sa kockicom u plavoj boji,klikenmo na nju i izaberemo tamno zelenu #030.Ukoliko ne želimo belu pozadinu Spray menija, idemo klik recimo na neko dugme,pređemo u SPLIT pogled,a na kartici CSS panela uđemo u All i čekiramo Meni Bar vertical a,zatim promenimo boju u #096.Automatski sa Save all,čuvamo promene istog i sada na svim stranicama imamo uređen bar.
  • 130. 130 Sada nam predstoji da uklonimo logo jer želimo sliku preko cele dužine, a to je 960 px.Logo se uklanja tako što se obeleži,uđe se u SPLIT pogled i dilituje taj script. Pošto je uklonjen- na isto mesto ubacujemo već spremljenu sliku,Insert>image izaberemo putanju i kada se slika ubacu ,sredimo je ,što smo ranije pokazali u Prosperitis oknu,tako što prvo otključamo bravicu pa podesimo širinu na 960.Kada kliknemo na visinu program automatski podešava visinu. Od oko 200px,međutim slika je razvučena I loše je revolucije.Za to nam je potrebna slika rezolucije 3500*700px,a ako je nemamo može se odabrati odgovarajuća baner slika recimo 960*200,što je kasnije i urađeno.Ova slika baner- ispod je privremena.
  • 131. 131 Kod uklanjanja loga važno ga je selektovati i obavezno kliknuti na tag a u statusnoj liniji dokumenta dole,iznad linije Prosperiti bara.Kada kliknemo na tag a kursor se u izvornom kodu postavi tačno NA MESTO OD KOGA DILITUJEMO SCRIPT!Isto važi i za druge tagove,mada isto to možemo raditi i ručno.Uvek, ako se nešto pogreši imamo EDIT>UNDO,ili korišćenje HISTORY PANELA,o čemu je bilo govora ranije. 18.VALIDACIJA I PROVERA LINKOVA Da bi proverili linkove idemo na Windowss>Results>Link Checker.Pojaviće se nov pano na dnu na kome ima više opcija.Ako kliknemo na link checker i zatim pritisnemo malu zelenu strelicu levo u vrhu ,dobićemo koji su linkovi na kojoj strani prekinuti.
  • 132. 132 Vidimo da je na matičnoj strani u pitanju link koji vodi do New Arrivals, a sa nje na Wikipediju, pritiskom na link na toj strani.Kada kliknemo na broken links pojaviće se fascikla u kojoj treba da odredimo novu putanju i problem je rešen.Zatim se ovo ponovi za svaku stranicu.Provera linkova je veoma važna ,jer kada uplodujemo sajt na server ,najveći problem je da ne radi neki link!Sledeći korak je validacija.Ako kliknemo na Validation dugme I zatim na zelenu strelicu gore desno -pojaviće se šta u KODU nije dobro.Grešku treba ispraviti za svaku stranicu.U našem slučaju postoji problem u 16 redu koda. Prijavljeno je da je potrebno da se atribut alt specificira.Uđemo u kod i u redu 16 ispravimo grešku.Isto se treba ponoviti za svaku stranicu.Zatim je potrebno izvršiti proveru sajta sa Site>Reports Čekirali smo potrebne provere I WRC centar šalje izveštaj.Važan je na kraju i izveštaj Clean up HTML,koji će sam izvršiti potrebna čišćenja i potom datiizveštaj.Ovo se radi komandom Commands>Clean up HTML
  • 133. 133 Pre postavljanja sajta, ako imate hosting uplaćen možete testirati sajt,ali o tome će biti reči kasnije. 19.IZRADA FORME I VALIDACIJA FORME . HTML Forme HTML forma je deo dokumenta koji u sebi može da sadrži elemente forme kao što su razna polja za unos potataka, razne vrste dugmića za pokretanje akcije i sl. Forma se kreira tagom <form> a pojedinačni elementi forme tagovima <input>. Evo jednog jednostavnog primera forme koja sadrži dva elementa: <form> <input> <input> </form> U pretraživaču bi to izgledalo ovako: Tag <form> i tagovi <input> mogu imati niz atributa koji ih bliže definišu. Primer: <form>
  • 134. 134 Ime : <input type="text" name="ime"> <br> Prezime: <input type="text" name="prezime"> </form> U pretraživaču će to izgledati ovako: Ime : Prezime: Tag <input> se koristi i za definisanje dugmića (buttons) koji imaju različite oblike i upotrebu. Akciono dugme Akciono dugme se koristi za pokretanje neke akcije, recimo brisanje svih polja u formi, startovanje nekog javsript programa i sl. Akciono dugme se kreira na način prikazan u sledećem primeru: <form> <input type="button" name="dugme" value="Start" onClick="Akcija"> </form> Ovako bi to izgledalo u pretraživaču: Radio dugme Radio dugme se koristi kada želite da pravite izbor između malog broja opcija , kao u sledećem primeru. <form>
  • 135. 135 <input type="radio" name="pol" value="muski"> Muski <br> <input type="radio" name="pol" value="zenski"> Zenski </form> Ovako to izgleda u pretraživaču:: Muski Zenski Uočite da samo jedna od dve opcije može biti odabrana kada kliknete na dugme. Checkbox dugme Checkbox dugme se koristi kada želite da odaberete jednu ili više opcija iz nekog manjeg skupa kao što to pokazuje sledeći primer: <form> Šta sve imam? Imam bicikl: <input type="checkbox" name="vozilo" value="Bicikl"> <br> Imam auto: <input type="checkbox" name="vozilo" value="Auto"> <br> Imam avion: <input type="checkbox" name="vozilo" value="Avion"> </form> A evo kako bi to izgledalo u pretraživaču: Šta sve imam? Imam bicikl: Imam auto : Imam avion:
  • 136. 136 Uočite da kod checkbox dumića možete da birate više od jedne opcije (za razliku od radio dugmića gde birate samo jednu opciju). Slanje sadržaja forme serveru Forme se najčešće koriste za slanje podataka ka serveru. Za slanje podatka se koristi dugme tipa "submit" a u tagu <form> se dodaje atribut "action" kojim se definiše koji će program na serverskoj strani preuzeti poslate podatke. Atributom "method" definiše se metod slanja podataka koji može biti "get" ili "post". Evo primera: <form name="input" action="http://osnove-programiranja.com/vezbe/login.php" method="get"> Korisnik: <input type="text" name="korisnik"> <input type="submit" value="Submit"> </form> Ovako to izgleda u pretraživaču: Korisnik: Submit Ako sada u input polje ukucate niz slova i kliknete na dugme "Submit" pretraživač će poslati vaš podatak serveru na kojem će se aktivirati program login.asp koji će preuzeti poslati podatak i sprovesti odgovarajuću akciju.
  • 137. 137 20.IZRADA FORME U DREAMWEAVERU -Ubacićemomo formu sa imenom,telefonom,emailom,komentom i dugmetum potvrdi(submit).Prvo treba ubaciti Tabelu, jer pomoću nje je bolji dizajn i izgled ubačene forme.Kada se ubaci tabela kliknite na strelicu leve kolone ,pa column left i centrirajte je udesno pomoću ikone align right na Prosperiti baru.Zatim to isto uradite sa desnom kolonom ,samo nju centrirajte ulevo.Kliknite u prvu ćeliju pa Insert>Form>Insert text field Za ID upišite name,za Label Name
  • 138. 138 Za telefon izaberite text field za ID ipišite phone, za Label name Phone i OK.Za i meil text fild polje,ID stavite email za Label stavite Email pa OK.Za poruke izaberite text area za ID stavite comment ,za Label name stavite Comment.U petoj ćeliji insert>form>butons OK,pojaviće se dugme submit.Pošto se i ime i polje smešteni u celoj ćeliji,selektujte Name belo polje prevucite u susednu desnu ćeliju kada se pojavi roze blinker u toj ćeliji.otpustite miša..To isto uradite i sa ostalim poljima. Sada sledi validacija ove stvorene forme.Selektujte bilo gde u tablici,pa naStatusnoj liniji dokumenta pritisnite form form 1.Zatim idite na Windows>Behevior.Pritisnite znak plus . Pa Validate form.
  • 139. 139 Sada za svaku stavku potvrdite Required i za: Name- upišite 0anything Phone-number Email-email addres Coment-anything Pređite na vaš pretraživač da vidite da li forma deluje.Ako ne ubacite ništa dobićete poruku šta je potrebno,a kada pritisnete submit automatski će biti izbrisana sva polja I spremna za novi unos. 21.UBACIVANJE MULTIMEDIJA Dreamweaver lako unosi Flash fajlove,muzičke i video fajlove,pri čemu program sam usklađuje atribute,koji određuju kako će ti fajlovi biti prikazani na Web stranici.Postoji nekoliko tipova Fleš fajlova koji se ubacuju na stranicu: 1.Flash fajlovi ili Flash filmovi sa exstenzijom.fla
  • 140. 140 2.Fajlovi sa extenzijom .swf(small web format) ,ovo su kompresovane verzije .fla fajlova koje se mogu prikazati u DW-u u pustiti da rade u Web čitačima.Takođe ove fajlove koriste i Flash buttons o Flash tekst. 3.Fajlovi sa ekstenzijom .flv(Flash video fajlovi) sadrže enkodirane audio i video podatke koji omogućavaju da ih emituje Flash player. 1.UBACIVANJE FLASH FILMOVA Pre nego što ubacite Flash fajlove u DW morate prvo kreirati fajlove sa. swt extenzijom u nekom programu,recimo ja koristim program Free video to Flash convertor.Dodate fajl recimo u mp4 formatu,i pritisnite Convert.Program edituje fajl sa ekstenzijom .swf ili .flv,sačuvajte video fajlove a, kasnije ih možete ubaciti u DW. Da biste ubacili .swf fajl u DW postavite kursor tamo gde želite da ubacite fajl, pa zatim Insert>Media>swf ,
  • 141. 141 Dobro je da bar date ime filmu ,ali ako pritisnite Cancel. film će se ipak ubaciti na stranicu,što nije slučaj recimo sa slikom. Da biste videli kako izgleda film zajedno sa sadržajem stranice kliknite na sliku iznad I pojaviće se Properti Inspektor koji ima dugme Play.Film će se pokrenuti u dizajn prikazu.
  • 142. 142 U Prosperiti Inspectoru ima doste opcija gde se može kontrolisati podešavanje Flash filmova.U levom gornjem uglu prikazuje se tip fajla i veličina ,a program sam ubacije ID, i to Flash ID.Ovo je polje editabilno tako da možete da upišete i svoj ID.Ostale opcije su: Weght I Haight-širina i visina ubačenog objekta u pikselima. File-ovo polje prikazuje putanju do swf objekta. Src-ovo polje pokazuje lokaciju originalnog .fla fajla koji je korišćen pri kreiranju swf objekta. Bg-Ova opcija unosi parametar u <object>Tag i podešava pozadinsku boju swf objekta(boja koja se vidi u pozadini filma) Edit- Ova opcija otvara .fla fajl za editovanje,ali da bi radila,src polje MORA BITI POPUNJENO. Class-Omogućuje da primenite CSS klasu na<object> Tag Loop-Ova opcija vrti film neprekidno,po završetku počinje ponovo. Autoplay-Film se automatski pokrećr kada se Web stranica prvi put pokazuje. V Space i H space-Ova opcija postavlja vertikalan i horizontalan prostor oko filma,ove atribute je poželjno dodeliti preko CSS fajla. Quality-Ova opcija kontroliše izgled filma za vreme plejbeka,pri čemu postoje sledeća podešavanja: High-Određuje najbolji kvalitet filma,ali troši resurse AutoHigh - Ova opcija daje jednak prioritet u izgledu i brzini, ali žrtvuje izgled ako je potrebno više brzine. Low-Selektujte ovu opciju ako vam je značajnija brzona od kvaliteta. AutoHigh - Ova opcija daje prioritet u izgledu i brzini, ali žrtvuje izgled ako je potrebno više brzine o  o AutoLow - Prioritet je na brzini, ali kad god je moguće popravlja kvalitet filma Scale - Određuje kako se film prikazuje u H i W dimenzijama. Default (Show All) - Ceo film se prikazuje sa svojih 100%.
  • 143. 143 o o   o o o No Border - Bilo koji delovi filma koji se pružaju preko podešenih W i H dimenzija su isečeni. Exact Fit - Zbija film u specificirane dimenzije bez obzira na originalnu veličinu filma. Align - Određuje poravnanje filma relativno u odnosu na stranicu. Wmode - Ova opcija postavlja Wmode filma u prozoru čitača, što preventuje konflikte sa DHTML elementima kao što su Spry Widgets. Postoje sledeće opcije: Window - Forsira swf iznad svih elemenata stranice. Opaque - Difoltna opcija, dozvoljava DHTML objektima kao što su na primer padajući meniji da se korektno prikazuju preko filma. Transparent - Forsira DHTML elemente da se prikazuju ispod filma. DW postavlja svetao plavi okvir iznad swf objekta u dizajn prikazu sa ikonicom otvorenog oka u desnom uglu Taba.Kada kliknete na tu ikonicu otvara se sadržaj da korisnik nema odgovarajuću verziju Flash Playera. 2.UBACIVANJE FLASH VIDEO FAJLOVA Flash video fajl je drugačiji od regularnog swf objekta jer ima .flv ekstenziju što vam omogućava da dodate već gotov film na Web stranicu. Potrebno je samo da enkodirate druge formate video fajlova u .flv format i insertujete ga tako što ćete kliknuti na Insert stavku u meniju aplikacije, zatim na Media, zatim na Flv opciju. Ova opcija vam omogućava da unesete .flv fajl bez korišćenja Flash aplikacije i omogućava da Web čitači pokrenu unešeni video sa prikazanim playback kontrolama. Otvoriće se Insert Flv dijalog boks sa malo drugačijim opcijama u zavisnosti ,da li za Video Type birate Progressive Download ili Streaming Video.
  • 144. 144 Klikom na browse pronađemo željeni fajl.Skin ćemo promeniti u skin1,a za dugmad desno levo,stop pauza podesimo nove vrednosti 400*300 što će biti širina i visina samog plejera, čekiramo auto play ako želimo da ide video odmah pri učitavanju strane čekiramo Auto play.Pritisnemo OK I na stranici će biti ubačen video fajl. 22.CODE INSPECTOR,CODE TOOLBAR I CODE HINT Code Inspector možete otvoriti tako što ćete izabrati Windows>Code Inspector dugme iz menija aplikacije,a takođe i prečicom F10 sa tastature. Code Inspector vam omogućava da vidite tekući kod stranice u posebnom prozoru.
  • 145. 145 Dostupne opcije su većinom opcije koje takođe postoje u prozoru Code prikaza dokumenta. 1.Coding Toolbar. Po difoltu Coding Toolbar je prikazan na levoj strani dokumanta u Code prikazu stranice. Takođe je dostupan u Code Inspector-u i nalazi se isto na levoj strani prozora. Coding Toolbar se ne može otkačiti i premestiti na neko drugo mesto, ali se može isključiti preko opcije View->Toolbars->Coding. U Coding Toolbar-u postoje sledeće opcije:   Open Documents - Kada kliknete na ovo dugme, izlistaće vam se svi trenutno otvoreni dokumenti zajedno sa njihovim putanjama. Ovo je korisna opcija ako imate više otvorenih File-ova sa istim imenom, pa preko putanje možete lako odrediti koji je File. Klikom na njega on postaje dostupan. Nije više potrebno da pogađate File. Show Code Navigator - Ova opcija prikazuje Code Navigator koji se koristi za prikazivanje liste CSS pravila koja su primenjena na selektovani element na stranici zajedno sa detaljnim kodom koji dobijate u vidu Pop up prozora kada pređete mišem preko određenog pravila. Kada kliknete na neko od pravila u Code Navigator-u, otvara vam se CSS File sa postavljenim kursorom tačno na početak tog pravila.
  • 146. 146  Collapse Full Tag - Ova opcija selektuje blok koda u kome se trenutno nalazi vaš kursor i kolapsira sav kod koji je u njemu.   Collapse Selection - Ova opcija kolapsira selektovani kod.   Expand All - Kliknite na ovu opciju da biste proširili sve kolapsirane sekcije.    Select Parent Tag - Ova opcija selektuje Parent tag trenutno selektovanog elementa ili elementa gde god je kursor trenutno lociran.   Balance Braces - Ova opcije selektuje ceo kod koji se nalazi unutar zagrada, vitičastih zagrada i ugaonih zagrada.   Line Numbers - Ova opcija uključuje/isključuje prikaz broja linija u Code prikazu.   Highlight Invalid Code - Dreamweaver ističe žutom bojom nekorektno ugnježdene Tagove. Ovo dugme uključuje/isključuje žutu boju u Code prikazu. Difoltna opcija je OFF.   Syntax Error Alerts - Ova opcija prikazuje greške u Java Script kodu u vidu žute trake na vrhu prozora dokumenta. Ovo dugme uključuje/isključuje ovu opciju.   Apply Comment Tag - Ova opcija omogućava unos različitih tipova Comment u tekuću liniju ili selekciju. Tag-ova   Remove Comment Tag - Pomoću ove opcije uklanjaju se uneseni komentari iz tekuće linije ili selekcije.   Wrap Tag - Ova opcija omogućava brz način za primenu Tag-a oko tekuće selekcije.
  • 147. 147  Recent Snippets - Ovde se prikazuju svi poslednje korišćeni Snippet-i iz Snippets panela.   Move or Convert CSS - Ova opcija omogućava brzo prebacivanje CSS pravila u CSS File.   Indent Code - Ova opcija pomera otvoreni Tag elementa u desno. Tab dugme ima istu ulogu.     Outdent Code - Ova opcija pomera otvoreni Tag elementa u levo (Shift + Tab) . Format Source Code - Kada kliknete na ovo dugme, otvara se meni sa opcijama pomoću kojih možete da primenite difoltno formatiranje na stranicu ili trenutno selektovan kod, zatim imate brz pristup kategoriji Code Format u Prefernces panelu. Tag Library Editor vam omogućava kontrolu nad formatiranjem svakog HTML elementa u vašem kodu. 2.Code Hint . Po difoltu Dreamweaver prikazuje Content-sensitive code Hint-ove u Code prikazu. Na primer, ako krenete da otvarate ugaonu zagradu posle otvorenog <body> Tag-a, otvoriće se sadržajni meni i prikazaće vam sve validne HTML Tag-ove. Možete skrolovati dole da biste pronašli odgovarajući Tag i dvoklikom na njega uneti ga u kod dokumenta. Druga opcija je da nastavite sa kucanjem, na primer ako unosite div Tag, ukucajte slovo d zatim i, selektovaće se div u meniju, pritisnite Enter na tastaturi i Tag će biti unesen u dokument.
  • 148. 148 Kada pritisnete Space bar na tastaturi, otvoriće se drugi Context meni, samo što će ovog puta prikazati sve validne atribute za tekući element. Ako unosite ID elemente, Dreamweaver će uneti id=““ i postaviti kursor između znaka navoda da biste vi uneli vrednost za ID. Ako unosite klasu koja je već definisana u CSS-u, Dreamweaver će automatski prikazati sve dostupne klase koje možete da izaberete. Context meni nastavlja da se pojavlju sve dok ne zatvorite ugaonu zagradu. Ako se slučajno ovaj meni izgubi, pritisnite Ctrl + Spacebar da bi se opet pojavio. 23.KREIRANJE FORMULARA . Da biste kreirali formular u Dreamweaver-u, postavićete kursor na mesto gde želite da unesete formular. Kliknite na Insert dugme u meniju aplikacije, zatim izaberite opciju Form, zatim opet Form. Drugi način je preko Insert panela, izabraćete kategoriju Form i kliknete na Form dugme.
  • 149. 149
  • 150. 150 Ako se nalazite u Code prikazu, otvoriće se Tag editor – Form dijalog boks. Ako se nalazite u Design prikazu, Dreamweaver će uneti crvenu isprekidanu liniju u obliku pravougaonika, a u Code prikazu sledeći kod. <form id="form1" method="post" action=""></form> Property Inspector će prikazati opcije za formular.     Form ID - U ovom polju unesite jedinstveno ime formulara . Action - U ovom polju unosite ima skripte koja će procesirati formular. Kliknite na folder ikonicu da biste pronašli lokaciju skripte. Na primer dosta formulara koristi CGI skripte koje se nalaze na serveru unutar CGI foldera .
  • 151. 151  Method - Ovde birate kojim ćete metodom poslati serveru sakupljene podatke iz formulara.  o Default - Ova opcija koristi difoltna podešavanja čitača da bi poslala informacije sa formulara. Difoltni metod je obično, ali ne i uvek GET metod. Zato je bolje da specificirate ili GET ili POST metod, a ne difolt. o o GET - Podaci iz fome se ovom opcijom šalju na server kao dodatak URL-u. Pošto je omogućen Bookmarking kod ovog URL-a, tada su i informacije podložne napadima hakera. Pošto URL može da ima maksimum 8192 karaktera, ovaj metod nije podesan za duže formulare. o o POST - Ovaj metod krije podatke formulara unutar HTTP zahteva čime se sprečava Bookmarking stranice. Ipak podaci nisu šifrovani i stoga su podložni napadima hakera, tako da ako neko sakuplja personalne informacije kao što su korisnička imena, lozinke ili brojevi kreditnih kartica, budite sigurni da koristite bezbednu konekciju do sigurnog servera. o  Enctype - Ovo polje je opciono i po difoltu je prazno. Za POST metod izaberite application/x-www-form-urlencoded ili kada imate File upload polje u formularu izaberite Multipart/form-data tip.   Target - Omogućava da odredište bude drugi prozor ili ram (Frame) u odnosu na tekući. U tom drugom prozoru ili ramu se prikazuje HTML strana koja se dobija nakon obrade podataka. Formular možete organizovati na stranici pomoću tabela ili preporučljivo pomoću CSS-a. U formulare možete ubacivati objekte kao što su tekstualna polja, polja za potvrdu, radio dugmad, Submit dugmad itd. Takođe, unutar formulara možete ubacivati i elemente koji nisu vezani za formulare kao što su slike, tekst ili tabele. Svaki objekat formulara ima svoje opcije u Property Inspector-u. Posebnu pažnju treba obratiti na imena objekata formulara, pošto skript koji obrađuje tu formu može zahtevati određene konvencije u imenovanju. Ne treba koristiti razmake i specijalne karaktere. Zatim, nije loše da koristite imena koja jasno identifikuju ulogu frormulara ili objekta formulara. Korisno je da napravite svoje konvencije za zadavanje imena i pridržavajte se toga. Ili nemojte uopste koristiti velika slova, ili ih koristite na konzistentan način, ili koristite povlake između reči ili ih spajajte zajedno. Na taj način ćete lakše upamtiti
  • 152. 152 imena koja zadajete i izbeći greške u kucanju. Takođe, treba da znate da skrptovi koji se koriste za procesiranje formulara imaju rezervisane reči, koje imaju specijalno značenje, a koje mogu dovesti do problema. 24.BEHAVIORS(PONAŠANJA) . Instalacija Dreamweaver-a dolazi sa oko 20 predinstaliranih ponašanja (engl. Behaviors) koje možete da koristite kako biste ugnjezdili Client Side Java Script kod u vaš dokument. Većina ovih skripti dozvoljava korisniku da interaguje sa sadržajem na vašoj stranici. Behaviors su tipično sastavljeni od događaja i akcija, koje pokreću te događaje. Behaviors se mogu dodati na Web stranicu koristeći Behaviors Panel. Svi imaju svoj dijalog boks koji vas vodi kroz proces unosa potrebnih podataka. Da biste otvorili Behaviors panel, kliknite na Windows dugme u meniju aplikacije i izaberite opciju Behaviors. U Dreamweaver-u CS6 Behaviors panel je ugnježden sa Attributes panelom unutar Tag Inspector panela.Do panela se dolazi sa Windows>Behaviors.
  • 153. 153 Behaviors panel postaje aktivan kada imate otvoren dokument u prozoru radnog prostora. Da biste saznali nešto više o već primenjenim ponašanjima, selektujete element ili Tag na koji je primenjen Behavior na Web stranici, i on će se pojaviti u listingu Behaviors panela. Kada se događaj sastoji od više akcija, one su izazvane prema redu u kome se nalaze na listi. Tipično Behaviors su pridodati Tag-ovima za tekst, slike, ali možete i da ih primenite na <body> elemente, linkove, polja formulara. Meni akcija u Bahaviors panelu se dobija klikom na + dugme. Tada će se izlistati sva presetovana ponašanja. Dva faktora utiču na to koja će ponašanja biti dostupna, a koja nedostupna: 1. Koji objekat ili element na stranici je selektovan pre nego što kliknete na + dugme. 2. Koji čitač je slektovan na dnu Actions menija u opciji Show Events For. Čitač koji je selektovan određuje koji su događaji podržani i prema tome prikazuje akcije koje su dostupne.
  • 154. 154 1.Kako se dodaje Behavior (ponašanje)? Dodavanje Behavior-a elementu u Dreamweaver-u je prilično jednostavno i sastoji se iz nekoliko koraka. Najkraće rečeno, selektujete objekat ili tekst na stranici, izaberete Behavior u Behaviors panelu, popunite polja u dijalog boksu tog Behavior-a koje ste izabrali i proverite da li Event Hendler odgovara vašim potrebama. Editovnje i brisanje Behavior-a se vrši u Behaviors panelu desnim klikom miša na Behavior. 2.Drag AP Element Behavior Ako koristite AP Div slojeve na vašim Web stranicama, postoji jedan interesantan Behavior Drag AP Element koje omogućava da posetioci Web sajta pomeraju i repozicioniraju ove slojeve u prozoru čitača. Ovo je odličan Behavior koji može da se iskoristi u kreiranju interaktivnih igrica, i drugih interfejs kontrola. Ovo ponašanje omogućava da korisnici vuku slojeve gore, dole, levo, desno i dijagonalno u prozoru čitača. Pored ostalih stvari možete i postaviti ciljnu destinaciju za sloj i odrediti da li će se taj lejer privuću cilju (Snap to target) prema specificiranom broju piksela. Da biste dodali ovo ponašanje na vašem Web sajtu potrebno je da:     Unesite AP div lejer u dokument. Insert>Layout Objects>AP Div Selektujte <body> Tag da biste primenili ovaj Behavior. Kliknite na + znak u Behaviors panelu i izaberite opciju Drag AP Element. Otvoriće se Drag AP Element dijalog boks koji se sastoji od dva taba: Basic i Advanced. Basic kartica:
  • 155. 155 U Basic Tab -u selektujete AP element na kome ćete primeniti Behavior. Zatim određujete da li će pomeranje biti ograničeno (kada želite da kontorlišete kretanje) ili neograničeno (kod puzli i igrica na primer). Ako izaberete Constrained tj. ograničeno, tada ćete uneti vrednosti u pikselima za parametre: gore, dole, levo i desno. Zatim ćete uneti za levo i gore polje vrednosti u pikselima za željenu krajnju poziciju sloja, relativno u odnosu na gornji desni ugao čitača. Snap if within _ Pixels of drop target je opciono polje, ali možete uneti vrednost u pikselima ako želite da se lejer privuče za već određenu krajnju destinaciju kad se približi za unetu vrednost u ovo polje. Na primer, ako uneste 10 px u ovo polje, i krenete da vučete lejer po stranici, kada se približite na 10 px od krajnje pozicije, lejer će se automatski privući U Advance tabu možete postaviti dodatne parametre i pozvati JavaScript za sloj. Advance kartica: Postoje sledeće opcije:
  • 156. 156  Drag handle - Po difoltu je selektovana opcija Entire element što znači da se ceo sloj ponaša kao ručica za povlačenje. Ako želite da samo jedan deo sloja predstavlja ručici za povlačenje, unesite kordinate u pikselima u polja Left, Top, Width, Height   While dragging Bring the element to front, then... Ako čekirate ovu opciju, dok povlačite sloj preko prozora čitača, možete da izaberete da li ćete ostaviti taj sloj povrh svih elemenata ili ćete vratiti Z-index.   Call Java Script - Ovde unesite ako želite JavaScript kod koji će se izvršavati dok se sloj povlači.     When dropped Call Java Script - Unsite kod za dodatni JavaScript koji će se izvršiti kada sloj dođe do ciljne pozicije ili kada se pusti . Only if snapped - Ako je ova opcija čekirana, Java Script se izvršava jedino kada sloj stigne do ciljne pozicije. Kliknite na OK da biste sačuvali promene i zatvorili Drag AP Element dijalog boks. 3.Rollover Image, U ovoj lekciji upotrebićemo posebne skriptove. Da bi napravili rolover sliku na izabranom mestu na strani pritisnite dugme Rollover Image na traci Common panela Insert. Otvoriće se prozor Insert Rollover Image Daćemo smislena imena koja ukazuju na namenu slika. U imenima ne sme biti razmaka i specijalnih karaktera. 1. Prvo ćemo uneti koja će biti original slika, koja će biti na strani pre nego što posetilac dovede pokazivač miša iznad nje. 2. Zatim treba da unesete sliku koja će se pojaviti kada posetilac pređe pokazivaĉem preko originalne slike (dugme Browse do polja Rollover Image). Savet: Slika koja se pojavljuje na poĉetku i ona koja je zamenjuje treba da imaju iste dimenzije, inače ćedruga slika biti smanjena ili uvećana u skladu s dimenzijama prve slike i zato izobličena. Zato ove slike treba da budu jako sliĉne a opet dovoljno različite da korisnici uoče prelaz. Možemo i odmah definisati link unoseći u polje 'When Click, Go To URL' URL adresu. Ako ne upišemo ništa u ovo polje, Dreamweaver će upisati znak #, u polje link na panelu Properties. Taj znak saopštava browseru da pokazivaĉ miša pretvori u šaku kada ga korisnik dovede iznad slike, ali i da ga ostavi na toj strani
  • 157. 157 kada korisnik klikne na nju. Naravno moguće je i slici koja je već na strani dodati prelaze i to pomoću panela Behaviors iz grupe panela Design (tag). Selektujemo sliku kojoj želimo dodati zamenu, na panou Behaviors pritisnemo dugme sa znakom (+) i izaberemo opciju Swap Image. 3. Pojaviće se prozor Swap Image gde u spisku Images treba izabrati sliku koja će biti zamenjena (original). Izuzetno je važno slikama dati odgovarajuća imena, u suprotnom kako ćemo između bezimenih slika izabrati onu koja nam treba?. Sada pritiskom na dugme Browse do polja Set Source to: izabraćemo sliku koja će zameniti originalnu. Uobičajeno je (radi lakšeg snalaženja) imenu početne (originalne slike) dodati sufiks _off ili _out, a imenu slike koja zamenjuje originalnu sufiks _on ili _down. 4. Nakon izbora slike za zamenu, u spisku Images do imena originalne slike (slike kojoj je pridružen skript, odnosno prelazak na drugu sliku) stoji zvezdica. Opcije Preload Image i Restore Image onMouseOut obavezno potvrdite. Opcijom Preload Image obezbeđujemo da se slike uĉitaju bez obzira da li su prikazane na stranici i tako eliminišemo kašnjenje koje bi uzrokovalo uĉitavanje zamenske slike tek kada posetilac pređe preko originalne. Opcijom Restore Image onMouseOut obezbeđujemo da se zamenska slika zameni poĉetnom kada se smakne pokazivaĉ miša izvan slike. 5. Pritisnite OK. Kad selektujemo slike u panelu Behaviors vidi se spisak akcija - Actions koje izvršava Dreamweaver, u zavisnosti od određenog događaja – Events u browseru posetioca. Na primer, Swap Image je akcija, a on Mouse Over je događaj. 25.POSTAVLJANJE SAJTA NA SERVER .
  • 158. 158 Provera sajta na Testing serveru . Otvorimo File Panel u programu.Na njemu vidimo sve stranice i sve fajlove koje smo izradili prilikom pravljenja sajta.Ovo je u stvari lokalna kopija ovih fajlova,i oni smešteni na našem kompjuteru.Da bi publikovali naš sajt ove kopije treba kopirati na server. Pri tome imamo dve opcije,da ih kopiramo na Testing server I proverimo sajt,dok je druga opcija da ih kopiramo na Remote server.
  • 159. 159 Potrebno je proveriti i podesiti sajt na Testing serveru pre nego što ih smestimo Na Remote server za publikovanje na Internetu-U Dreamweaveru idemo na Site>Manage Site>Advance settings na kartici Basic podesimo lokalni server recimo Navidad,pri čemu smo izabrali lokalnu mrežu i pratili putanju u Root direktorijumu doSpring _Parka imena našeg sajta .
  • 160. 160 I pritisnemo Save.Na prozoru iznad čekiramo Testing server. Sledeći korak je prikazan na File Panelu gde pritisnemo Put file to”Testing server”.i program će sada kopirati fajlove: na server.Pre toga treba selektovati ceo sajt kao na slici gore,jer možemo preneti i svaki fajl pojedinačno.U našem slučaju prenećemo Site-Spring Park(C:.Po završetku transfera naTestingserveru videćemo: :
  • 161. 161 Izveštaj kao na slici koji pokazuje da su fajlovi preneti na server za testiranje.Ako otvorimo IE browser i ukucamo gornju adresu ,otvoriće se stranica Home Welcome to Spring Park. Provera sajta na Remote serveru . Da bi postavili fajlove na remote server treba sada podesiti karticu Site Set Up Spring _Park.Ide se na Site>Menage site>Server>Ad server.Tu treba upisati podatke ,koje daje web hosting pošto predhodno kupite domen,i uplatite za hostovanje.Besplatan hosting može se naći i na Internetu,kao što je urađeno u ovom slučaju.Sada se unose . potrebni podaci kao što je prikazano na slici:
  • 162. 162 Sada su na slici gore prikazana oba servera i Testing i Remote server.Pre publikovanja sajta na Internet treba još sprovesti određene provere.Prva je check spelling.Proveru možemo vršiti za ceo sajt ili za neku stranicu.Pošto su naši sajtovi na srpkom jeziku izostavićemo ovu proveru.Druga stvar je proveriti da li je sve u redu sa linkovima.Ide se na Windows>Result>Link Checker. Pritiskom na strelicu u levom uglu koja pozeleni kada je pritisnemo izaberemo opciju za proveru celog sajta,program je izbacio da je na Home stranici problem sa linkom koji vodi na stranicu new_arrivals.html#Kangaroos_Wikipedia.Kada se klikne dva puta desno na link pojavi se fascikla u kojoj izaberemo pravu putanju i rešimo problem.Zatim treba proveriti Browser Compapability ,odnosno šta će prijaviti program.Kada se sve ovo odradi predstoji publikovanje fajlova na Internet.Uđemo na File panel.
  • 163. 163 Da bi dobili File Panel prikazan na ovaj način u desnom gornjem uglu File Panela je dugme,koje pritisnemo i dobijemo New>Expand,panel će sada biti prikazan sa desnim sadržajem,a levo neće biti ništa.Sada se pritisne ikonica Remote server,i onda ikonicu Conect Remote Server i fajlovi se prebace na server,što se može pratiti.Rezultat je prikazan na slici.Na slici vidimo da na strani Remote servera postoje dva nova foldera.Jedan je cgi-bin a drugi webalizer.Prvi sadrži fajlove koji su bitni za rad sajta ,a drugi pruža mogućnost da administrator proveri koliko je posetilaca postilo određeni sajt.Sada selektujemo naš sajt Spring_Park i pritisnemo strelicu kao na slici-
  • 164. 164 Posle izvesnog vremena fajlovi su prebačeni na Remote server,i sada je vreme da se pogleda kako sajt izgleda na Internetu.Ovo su izgledi stranica sa početka kursa,dok nismo imali uplaćen hosting.
  • 165. 165 Ovako izgleda home stranica i sada treba proveriti sve linkove i rad sajta u svim pretraživačima. Ovako izgleda druga stranica:
  • 166. 166 Ovako izgleda treća stranica: Ovako izgleda četvrta stranica:

×