SKRIPTA ZA VEŽBE IZ PREDMETA ELEKTRONSKO POSLOVANJE
KompoZer 0.77 Laboratorija za elektronsko poslovanje
Beograd 2008. Sadržaj
SADRŽAJ ...... 2 1 O KOMPOZER-U ...... 4 2 RADNO OKRUŽENJE KOMPOZER-A ...... 6 3 RAD SA DOKUMENTIMA ...... 13
3.1 KREIRANJE NOVE STRANE ...... 13 3.2 OTVARANJE POSTOJEĆE STRANICE ...... 13 3.3 ČUVANJE STRANICE ...... 14 3.4 POKRETANJE STRANICE ...... 14 4 RAD SA TEKSTOM ...... 14
4.1 FORMATIRANJE TEKSTA ...... 14 4.2 PODEŠAVANJA IZGLEDA WEB STRANE (NASLOV, BOJA, POZADINSKA SLIKA) ...... 19 4.2.1 Naslov stranica ...... 19 4.2.2 Postavljanje boje i pozadine strane ...... 20 4.3 UMETANJE LISTI ...... 21 4.4 UMETANJE SPECIJALNIH ZNAKOVA ...... 23 5 RAD SA SLIKAMA ...... 24
5.1 UMETANJE SLIKE ...... 24 5.2 IZMENA SLIKE ...... 27 6 LINKOVI I NAVIGACIJA ...... 28
6.1 KREIRANJE LINKOVA UNUTAR SAME STRANE ...... 28 6.2 KREIRANJE LINKOVA KA DRUGIM WEB STRANICAMA ...... 30 6.3 KORIŠĆENJE SLIKA KAO LINKOVA ...... 31 6.4 LINKOVANJE DOKUMENATA ...... 32 6.5 KREIRANJE E-MAIL LINKOVA ...... 33 7 RAD SA TABELAMA ...... 33
7.1 UMETANJE TABELA ...... 33 7.2 PROMENA SVOJSTAVA TABELE ...... 36 7.3 PROMENA SVOJSTAVA ĆELIJE TABELE ...... 37 7.4 DODAVANJE ILI BRISANJE REDOVA, KOLONA I ĆELIJA ...... 38 7.5 POMERANJE, KOPIRANJE ILI BRISANJE TABELE ...... 39 7.6 UPIS PODATAKA U TABELE ...... 40 8 FORME ...... 41
8.1 KREIRANJE FORME ...... 43 8.2 DODAVANJE KONTROLA NA FORMU ...... 45 8.2.1 Dodavanje tekstualnog polja ...... 45 8.2.2 Dodavanje radio dugmeta ...... 47 8.2.3 Dodavanje check-box-a ...... 50 8.2.4 Dodavanje dugmadi za potvrđivanje i otkazivanje ...... 53 9 SADRŽAJ ...... 56 2 10 SLOJEVI ...... 58
10.1 UPRAVLJANJE SLOJEVIMA ...... 59 11 CSS EDITOR – KAZCADES ...... 60
11.1 RAD SA CSS EDITOROM ...... 60 11.2 DEFINISANJE STILA ZA NASLOV PRVOG STEPENA(HEADING1) ...... 66 11.3 DEFINISANJE NASLOVA DRUGOG STEPENA (HEADING2) ...... 68 11.4 PODEŠAVANJE STILOVA ZA TABELE ...... 69 11.5 DODAVANJE KLASA U STYLE SHEET ...... 70 11.6 DEFINISANJE STILOVA ZA SLIKE ...... 71 11.7 ČUVANJE STILOVA ...... 73 11.8 RAD BEZ EXPERT MODA ...... 76 11.9 LINKOVANJE POSTOJEĆEG STYLESHEET-A NA NOVU STRANICU ...... 77 11.10 BRZO “IN-LINE STYLE” EDITOVANJE ...... 79 12 TEMPLEJTI ...... 80
12.1 ŠTA SU TEMPLEJTI ...... 80 12.2 KREIRANJE NOVOG TEMPLEJTA ...... 80 12.3 ČUVANJE TEMPLEJTA ...... 82 12.4 KREIRANJE TEMPLEJTA OD STRANICE ...... 83 12.5 PODEŠAVANJE TEMPLEJTA ...... 84 12.6 KORIŠĆENJE TEMPLEJTA ...... 86 12.7 IZMENA TEMPLEJTA ...... 87 13 OBJAVLJIVANJE SAJTA ...... 88
13.1 PODEŠAVANJE OPCIJA ...... 89 14 PRIMER IZRADE WEB SAJTA ...... 92
14.1 KREIRANJE STRUKTURE SAJTA ...... 92 14.2 IZRADA TEMPLEJTA ZA NAŠ WEB SAJT ...... 92 14.3 IZRADA STRANICA ZA NAŠ WEB SAJT ...... 104 14.3.1 Kreiranje index stranice ...... 104 14.3.2 Kreiranje ostalih stranica ...... 112 14.3.3 Prikazivanje u browser-u ...... 117 14.3.4 Složenija struktura teksta i slika ...... 117 14.3.5 Izrada galerije ...... 120 14.3.6 Izrada kontakt formulara ...... 125 14.3.7 Prikaz u Site Manageru ...... 129 15 REFERENCE ...... 131
3 1 O KOMPOZER-u
KompoZer je program za pravljenje web strana kako za Windows operativni sistem tako i za Linux i Macintosh. Njegovi tvorci ga nazivaju kompletnim sistemom za web-autoring. Predstavlja solidnu zamenu za komercijalne i skupe programe poput FrontPage-a i Macromedia Dreamweaver-a. KompoZer čini da izrada web strana i web sajta bude što jednostavnija. Sada svako može da kreira svoju web stranu i upravlja svojim sajtom bez bilo kakvog predznanja ili iskustva sa HTML-om. KompoZer uključuje okruženje za izradu web stranica i upravljanje web fajlovima. Pruža editor web stranica koji ima jednostavan grafički interfejs (WYSIWYG). Sa KompoZerom početnici će brzo i jednostavno moći da kreiraju svoje web stranice i menjaju postojeće.
Kompozer je nezvanična zamena nVu editora sa ispravkom bagova. KompoZer je svakako poboljšanja verzija u odnosu na nVu, jer npr nVU je ograničen samo na jezik HTML dok KompoZer dozovoljava i druge jezike kao što je npr PHP.
KompoZer je WYSIWYG HMTL editor (“What you see is what you get”- ono što vidiš to i dobijaš), što znači da stranica koja se vidi dok je još u fazi pripreme izgleda upravo onako kako će da izgleda i kada se pokrene u web browser-u. What You See Is What You Get (WYSIWYG) HTML aplikacije imaju okruženje za 4 izradu web stranice koje korisniku daje pogled na stranicu, odnosno njen izgled u web browseru. Iako nude mogućnost direktnog pisanja HTML koda, ovakve aplikacije ne zahtevaju poznavanje HTML jezika pa su jednostavni za upotrebu.
KompoZer je 100% open source web editor baziran na nVu platformi i realizovan pod Mozilla Public License (MPL). Ima dosta prednosti i upotreba. KompoZer i njegova dokumentacija su potpuno besplatni i mogu se preuzeti sa zvaničnog sajta www.kompozer.net. To znači da svako može da koristi, kopira, distribuira i modifikuje ovaj softver kako bi se poboljšao sam softver.
KompoZer se još uvek razvija i konstantno napreduje. Ipak, neki od bagova iz nVu-a nisu ispravljeni i još uvek mogu da se pojave manji problemi. Međutim to nimalo ne ometa korišćene ovog programa koji ima itekako mnogo prednosti:
• Potpuno je besplatan • Lak je za skidanje sa interneta (oko 6 mb) • Lak je za korišćenje: ne treba vam znanje HTML jezika da bi kreirali svoje stranice • Stalno se razvija, napreduje i već su najavljene neke veoma interesantne novine • Preveden je na nekoliko jezika • Po sadašnjim standardima, može da proizvede veoma kvalitetne sajtove • WYSIWYG obrada web strana, čineći web izradu veoma jednostavnom kao što je kucanje teksta u word dokumentu • Integrisano upravljanje datotekama putem FTP-a. Jednostavno se putem lozinke uloguje na sopstveni web sajt i jednostavno se manipuliše postojećim datotekama, uz brzu obradu web strana , direktno preko web sajta. • Verodostojna izrada HTML koda koja će raditi na svim danas vodećim i popularnim web browser-ima. • Lak prelazak između WYSIWYG moda na HTML mod koristeći tabove(jezičke) • Obrada preko tabova omogućuje rad na više web strana istovremeno • Odlična podrška za forme, tabele i templejte • Najjednostavniji za korišćene od svih postojećih web editora dostupan besplatno za sve korisnike Windows-a, Macintosh-a i Linux-a.
KompoZer je za svakog, uključujući i one bez imalo znanja o HTML jeziku. Međutim ukoliko je neko poznavalac HTML-a, on može da radi direktu preko HTML-a, i da se lako prebacuje između grafičkog izgleda i samog koda stranice. 5 Zapravo ovo je dobar način da se nauči i sam HTML jer dodavajući tekst i druge grafičke elemente na stranicu, može se lako pratiti i promena u HTML kodu. Dakle, ne zahteva nikakvo poznavanje HTML-a ili CSS-a, što su dve osnovne komponente u web dizajnu danas.
KompoZer ima: • tabove (poput Firefoxa); • podršku za pisanje s leva na desno; • širok izbor posebnih znakova (special characters); • uređivač za CSS; • podršku za XHTML (sa prikladnim tagovima); • podršku za XFN; • automatsko pretvaranje svih znakova izvan ASCII-ja u numeričke entitete.
Prepoznatljiv je po ikonici ili novijoj .
2 RADNO OKRUŽENJE KOMPOZER-a
Kada se prvi put pokrene KompoZer, u pozadini će biti prikazan njegov glavni prozor i radna površina a u prvom planu pojaviće se prozor “KompoZer Tips”.
6 Ako se želi sprečiti da se ovaj prozor pokreće sa svakim novim pokretanjem aplikacije, potrebno je deštiklirati checkbox odmah pored “Show tips at startup”. Naravno, po želji ovaj prozor se opet može aktivirati podešavanjem u KompoZer Help meniju.
Da bi se proverilo da su sve linije vidljive, koristi se opcija preko menija View> Show/Hide i proverava se da li su svi elementi u listi štiklirani: Composition Toolbar, Format Toolbar, Edit Mode Toolbar, Status bar, Rulers, Site Manager.
Radna površina(Workspace) Radna površina je ono od čega se uvek kreće i što se prvo vidi kada se pokrene program:
7 KompoZer je veoma fleksibilan i omogućiće korisniku izradu web strana na onaj način koji će mu najviše odgovarati. KompoZer dolazi sa svojim Site Manager- om kako bi korisnik mogao da vlada čitavim web sajtom a ne samo pojedinačnim web stranama. Glavna linija menija (Menu Bar)
Poput svih Windows programa i KompoZer ima standardnu meni liniju sa sledećim opcijama:
8 • File- za manipulaciju sa fajlovima kao što su otvaranje, čuvanje, postavljanje. • Edit- sadrži opcije za izmenu cut, copy, paste, undo i redo. • View- određuje pogled na web strane dajući mogućnost pogleda na kod, WYSIWYG, i preview. • Insert- sadrži niz objekata koje može sadržati web strana poput slika, tabela, raznih formi, i specijalnih karaktera. • Format- omogućuje rad sa tekstom i korišćenje raznih stilova u radu sa tekstom i uopšte sa web stranama. • Table- omogućuje rad sa svim tabelama u okviru web strane. • Tools- sadrži Markup cleaner, HTML validator i CSS editor. Takođe se mogu dodavati ekstenzije ili teme i menjati razne opcije. • Help- je standardna opcija za pomoć pri radu.
Linija sa alatkama (Icon Bar)
Kako bi se rad olakšao, KompoZer je na liniju alatki izvukao najčešće korišćene opcije i alatke tako da se na primer jednostavnim pritiskom na Save ikonicu mogu sačuvati sve izmene na web strani. Postoji i opcija dodavanja drugih alatki na liniju alatki i to desnim klikom čime se dobija novi prozor sličan onom kod Mozilla Firefoxa. Radi se o drop-down meniju koji je zbog toga posebno lak za korišćenje.
Ikonice koje se po defaultu nalaze na liniji alatki su: • New - za pravljenje nove web strane ili sajta. • Open - za otvaranje postojećeg sajta. • Save - da sačuva izmene. • Publish - za objavljivanje trenutne strane na web server. • Browse - za pregled trenutne strane u web browser-u. • Anchor - za dodavanje linka. • Image - za dodavanje slika. • Table - za dodavanje tabela. • Form - za dodavanje HTML formi. • KaZcadeS - za otvaranje CSS editor-a.
9 Linija za stilizovanje (Style Bar)
Ova linija sadrži dosta ikonica za obradu sadržaja na tekućoj strani, uključujući:
• Tip teksta u padajućoj listi • CSS klase • Naglašavanje • Jako naglašavanje • Uređene i neuređene liste • Izjednačavanje teksta • Definicije i objašnjenja za iste • Lejeri i z-index vrednosti (bring-to-front i send-to-back) • Par poslednjih ikonica je namenjeno za rad sa lejerima i njihovo postavljanje na vrh, desno, na dno, levo ili u centar.
Linija za rad sa tekstom (Text Styles Bar)
Poslednja linija u gornjem delu KompoZer-a zadužena je za rad i formatiranje teksta. Ona omogućuje izmene:
•Fonta •Boju pozadine i slova •Naglašavanje boje teksta •Veličinu fonta •Bold,Italic i Uderline •Poravnanje teksta u levo, desno, centrirano ili justified
Site Manager 10 Jedna od najboljih stvari vezanih za KompoZer (i njegovog prethodnika nVu) je njegov Site Manager. On se nalazi smešten u levom delu prozora aplikacije KompoZer, ispod toolbar-ova. On omogućuje grupisanje fajlova zajedno kao Web sajta na hard disku i njegovo objavljivanje. Zatvaranjem Site Manager-a na Close ili preko tastera F9 dobija se veća radna površina.
Prozor za izradu web strana (Page window)
Otvaranjem novog dokumenta dobija se prazna stranica koja, kao i kod tekst procesora, služi za unos teksta ili grafike po vašoj želji.
11 Ovaj prozor KompoZer-a je deo gde se aktivno kreira web strana. Postoje četiri okna Normal, HTML tags, Source i Preview.
Tabovi
Ovi tabovi koji se nalaze pri dnu radne površine omogućuju četiri različita pregleda HTML fajla na kome se radi. Svaki od tih tabova omogućuje nastavak rada na dokumentu, ali sa prikazom različitih nivoa HTML tagova. Za nas u ovoj skripti najvažniji je Normal tab.
• Normal - to je WYSIWYG prozor gde se odvija najveći deo posla. Ovaj pogled treba izabrati kako bi se video dokument na kome se radi onako kako će on izgledati u browser-u. Rad u njemu najviše podseća na rad u nekom od tekst editora među kojima je najpoznatiji MS Word. • HTML Tags - koji je veoma sličan Normal-u, ali pokazuje sve HTML tagove i njegove ikonice. 12 • Source - koji je zapravo HTML editor. Ovaj tab treba izabrati kada se želi direktno raditi sa HTML kodom. • Preview- omogućuje prikaz i izmenu web strane upravo onako kako će se ona pojaviti u web browser-u, sem što naravno linkovi i Java skript neće ovde biti aktivni.
Zaglavlje pri dnu (Footer)
Ovaj deo pokazuje koji tag okružuje tekuću poziciju kursora. Klikom na taj tag može se izabrati bilo šta u tom elementu. Ili se desnim klikom na tag mogu ubaciti opcije kao što su style klase, ID ili drugi stilovi vezani za tagove.
3 RAD SA DOKUMENTIMA
3.1 Kreiranje nove strane
- preko ikonice New na liniji alatki, ili preko File> New. Ako se ide preko File> New otvara se novi prozor Create a new document or template. Potrebno je štiklirati opciju “A blank document” i “Strict DTD” i odštiklirati “Create a XHTML document”. (Bez štikliranog “Strict DTD” dokument će imati “prolazni” DTD.) Otvaranjem novog dokumenta dobija se prazna stranica koja, kao i kod tekst procesora, služi za unos teksta ili grafike po vašoj želji. Svi potrebni alati koji su inače potrebni za stvaranje stranice (unos linkova, slika i grafike, tabela, formulara, itd.) se nalaze ili u menijima, ili na vrhu korisničkog interfejsa.
3.2 Otvaranje postojeće stranice
-pod pretpostavkom da je stranica sačuvana na lokalnom hard disku u HTML formatu, preko ikonice Open na liniji alakti, ili preko File>Open file. Otvara se novi prozor Open HTML File, i preko Browse se nađe fajl i klikne se na OK.
13 Ili preko File>Recent Pages kako bi se ostvario brz pristup skoro korišćenim stranicama. Ili se koristi Site Manager koji predstavlja moćan mini-browser i veoma je lak za korišćenje.
3.3 Čuvanje stranice
- preko ikonice Save na liniji alatki. Ukoliko se radi o novom dokumentu otvara se novi prozor Page Title koji zahteva unos naslova te stranice. Ovaj naslov javlja se pri otvaranju ove stranice preko web browsera u njegovoj liniji naslova. U svakom slučaju ovde se ne radi o nazivu samog HTML fajla. Kada se klikne na OK, otvara se novi standarni prozor Save Page As koji omogućuje nalaženje direktorijuma za smeštanje fajla i njegovo imenovanje u polju File Name.
3.4 Pokretanje stranice
- Da bi se videlo kako će stranica da izgleda u browseru, pokreće se ikonica Browse sa linije alatki koja pokreće default browser sa vašeg računara.
4 RAD SA TEKSTOM
4.1 Formatiranje teksta
Prvo ćemo razmotriti same načine i metode obrade teksta.
Tekst koji se direktno kuca na stranicu koja se kreira u prozoru za obradu se po default-u pojavljuje u formatu “body text”. HTML definiše mali broj elemenata specificiranih za tekst i obično je poželjno da se oni koriste.
Da bi se tekst formatirao u standardni format potrebno ga je označiti ili kliknuti unutar njega i u prvoj padajućoj listi na liniji za formatiranje izabrati jedan od standarnih tekst formata. “Paragraph” je najpoželjniji za većinu teksta.
Kada se tekst formatira kao paragraf, ako se kuca dalje, korišćenje Enter-a dovodi do stvaranja novog bloka teksta tzv. paragrafa. Da bi se prešlo samo u novi red bez stvaranja novog paragrafa treba pritisnuti Shift+Enter, čime se generiše prelazak u novi red.
14 Drugi standardni tekst formati su Heading formati počev od Heading 1(najvećeg) do Heading 6(najmanjeg). Browseri uopšteno koriste boldirane naslove. Okviri svakog tekst bloka mogu postati vidljivi uključivanjem opcije preko View>Block outline. Blokovi obično počinju u novom redu. Blokovi se međusobno razdvajaju razmacima kontrolisanim marginama. Unutar blokova, tekst se formira u linijama. Tekst u liniji ne mora početi u novom redu.
Tekst koji se želi formatirati može se selektovati na više načina.
1. Jednostavnim postavljanjem kursora na početak i unutar bloka teksta, i tada se formatiranjem obuhvata ceo taj blok teksta. 2. Dvostukim klikom unutar bloka da se selektuje reč. 3. Trostrukim klikom unutar bloka da se selektuje ceo red ili tekst. 4. Selektovanjem samo određenog dela teksta itd.
Nad tekstom su moguće sledeće izmene preko linija za formatiranje i sređivanje teksta: font, boja teksta, boldovanje, kurziv ili podvlačenje, povećanje ili smanjenje veličine, pozadina teksta, ubacivanje lista, postavljanje teksta u levo, u desno, u centar, uvučen i izvučen tekst, naglašavanje (strogo) .... Da bi se formatirao paragraf, polazi se od samog radnog prozora. Potrebno je kliknuti iza teksta ili selektovati sam tekst kome se želi dodeliti određeni format. Zatim se izabere format iz padajuće liste u Format liniji.
• Body Text - Dodeljuje default font i stil za regularni tekst, bez pravljenja razmaka pre i posle teksta. • Paragraph - Postavlja “paragraph” tagove - da bi započeo novi paragraf. Paragrafi uključuju margine iznad i ispod. • Heading 1 je najviši nivo, a Heading 6 najniži nivo.
15 • Address - Može se koristiti kao potpis neke strane u smislu da ukazuje na autora teksta ili strane ili na osobu kojoj se treba obratiti za “dodatne informacije”, na primer “[email protected]”. Može to biti takođe i datum stvaranja, izmene ili copyright oznaka. Ovo se obično nalazi pri samom dnu strane ispod horizontalne linije. Browser prikazuje u italic formatu ovu adresu.
• Preformat - Ovo je veoma korisno za elemente kao što su primeri koda , e-mail poruke koje želite da prikažete u fontu sa fiksiranom širinom. U normalnom tekstu, većina browsera bi otklonila ekstra prostor, tabove… Međutim tekst koji koristi ovaj stil se prikazuje sa nedirnutim belim
prostorm, čuvajući izgled originalnog teksta.
Ako želimo da promenimo font, veličinu ili boju teksta potrebno je da taj tekst selektujemo a zatim da idemo na Format>Font: • Font - služi za promene fonta. Ukoliko se želi koristiti font specificiran od strane korisnikovog browser-a izaberite Variable Width ili Fixed Width. Ne pojavljuju se svi fontovi instalirani na vašem računaru. Umesto 16 korišćena nekog fonta koji možda neće biti vidljiv svima onima koji posećuju vašu web stranu, najbolje je da se izabere neki od ponuđenih fontova u meniju jer su ti fontovi vidljivi na svim računarima. Na primer, fontovi kao što su Helvetica, Arial, Times, i Courier izgledaju isto na svim računarima. Ako se izabere neki drugi font, postoji mogućnost da ga drugi računar neće videti na isti način.
• Size - se koristi ako se želi promeniti veličina fonta ili se izabere opcija za povećanje ili smanjenje veličine teksta.
• Text Style - Ova opcija se koristi za izmenu stila: italic, bold ili underline.
17 • Text Color - Ova opcija se koristi za izbor boje iz palete boja. Ako ste malo veći poznavalac HTML heksadecimalnog koda boja, možete jednostavno ukucati određeni kod ili sam naziv boje.
Da bi se otklonili svi stilovi iz teksta(bold, italic, itd.), potrebno je selektovati tekst a zatim otvoriti Format > Remove All Text Styles.
Ubacivanje teksta iz Word-a u KompoZer
Ukoliko se kopira tekst iz Word dokumenta u KompoZer, on sa sobom nosi i neke informacije o formatiranju iz Word-a koja mogu samo zbuniti KompoZer i 18 HTML kod. Da bi se to sprečilo, KompoZer ima za to jednu odličnu opciju koja se zove “Paste Without Formatting”. Do nje se dolazi preko Edit> Paste Without Formatting ili se samo stane desnim klikom miša na radni prostor i u konteksnom meniju pojavljuje se ta opcija.
4.2 Podešavanja izgleda web strane (naslov, boja, pozadinska slika)
Za podešavanje izgleda same web strane može se koristiti “Page properties” prozor koji sadrži opcije vezane za naslov, autora, i opis dokumenta na kome se trenutno radi. Ove informacije su veoma korisne ako se ta strana želi koristi na web sajtu, pošto pretraživači koriste upravo ove informacije kako bi indeksirali stranice. Ove informacije su vidljive iz browsera ako se ode na View meni i izabere “Page Info”.
4.2.1 Naslov stranica Otvorite Format>Page Title and Properties.
Svako od polja potrebno je popuniti odgovarajućim informacijama. • Title: Ovde se kuca tekst koji bi trebalo da se pojavi kao naziv te strane kada neko pokreće tu stranu u web browseru, a javlja se u liniji naslova samog browsera. 19 • Author: Tu treba da se stavi ime autora koji je kreirao stranu. Ova informacija je veoma korisna za one koji žele da pretražuju po imenima autora. • Description: Služi za jasan opis sadržaja sajta ili strane.
4.2.2 Postavljanje boje i pozadine strane Postoji mogućnost promene boje pozadine ili korišćenja slike kao pozadine za web stranicu na kojoj se radi. Upravo ovi izbori uticaće na način na koji će se vaši linkovi i tekst prikazivati korisnicima u njihovim web čitacima. Otvorite Format > Page Colors and Background za postavljanje boje trenutne strane.
Podešavaju se opcije: 20 • Reader's default colors: Koristite ovu opciju ako želite da stranica koristi podešavanja za boje za tekst i linkove sa samog browsera korisnika koji gleda stranu. • Use custom colour: Izaberite ovu opciju ako želite sami da birate podešavanja za boje. Za svaki od elemenata odaberite boju sa drop-down liste. • Background image: Ova opcija služi ukoliko želi da se umetne slika koja će predstavljati pozadinu. Potrebno je navesti ime slike ili preko “Choose file” izabrati sliku na hard disku ili mreži.
4.3 Umetanje listi
Za dodavanje liste: 1. Treba kliknuti na mesto gde treba postaviti listu 2. Izabrati Format > List 3. Izabrati stil liste • Bulleted: Stavka je neki znak. • Numbered: Stavke su brojevi. • Term and Definition: Ova dva stila rade zajedno, čineći prikaz u vidu rečnik stila. Term tag se koristi za reč koja se definiše, a Definition tag za samu definiciju. Term tekst se pojavljuje podebljan skroz levo, a Definition desno u odnosu na Term. 4. Takođe se lista može dodati i selektovanjem teksta i korišćenjem prečicama
sa toolbar linije i 5. Nakon što smo odabarali tip liste, na radnoj površini se prikazuje prva stavka liste.
21 6. Nakon što unesemo tekst posle prve stavke, kliknemo na Enter i prelazimo u novi red i sledeću stavku liste. 7. Kada se želi prekinuti lista, posle poslednje stavke potrebno je dva puta pritisnuti Enter.
Za ime stila liste (dugmad ili brojevi ) označi se lista koje se želi izmeniti, zatim se otvori Format > List > List Properties. Takođe se može dva puta kliknuti na listu i pojaviće se novi prozor List Properties. Tu se može definisati početni broj liste brojeva ili menjati izgled dugmadi.
22
Liste mogu biti i ugnježdene. Da bi se započeo novi nivo liste unutar postojeće liste potrebno je : 1. Kliknuti na kraj reda gde će biti ubačena nova ugnježdena lista 2. Pritisnuti Shift+Enter 3. Kliknuti na List ikonicu na liniji za formatiranje 4. I dalje kucati željeni tekst 4.4 Umetanje specijalnih znakova
Da bi se u tekst umetnuli specijalni znakovi kao što su oznake akcenta, copyright ili oznake novčanih valuta koristi se: • Insert > Characters and Symbols.
• Otvara se novi prozor Insert Character. • Izabere se kategorija znakova. • Zavisno od toga koja kategorija je izabrana, Letter ili Character padajuća lista postaju aktivne. Tu se bira traženi znak. • Posle toga klikne se na dugme Insert.
23 5 RAD SA SLIKAMA
5.1 Umetanje slike
KompoZer-om je veoma lako umetanje slika. Browseri mogu da prepoznaju tri formata slika gif, jpeg i png. Mogu se dodati slike koje se nalaze bilo gde na lokalnom računaru, ali zbog lakšeg održavanja sajta bolje je sve slike koje će se i koje se koriste smestiti u jedan zajednički folder unutar foldera gde se čuvaju i html fajlovi sajta.
Slike se takođe mogu koristiti kao linkovi. Najbolje je da se pre umetanja slika prvo sačuva ili objavi strana. Ovo omogućuje KompoZeru da automatski sačuva relativne reference ka slikama koje se umeću. Da bi se dodala slika: • Kliknite na mesto gde želite da ubacite sliku.
• Zatim kliknite na Image ikonicu na liniji alatki ili idite na Insert > Image. • Otvara se Image Properties prozor. • Zatim pomoću alatke “Browse” nađete sliku koju želite da umetnete na vašem hard disku ili mreži. • U polje “Alternate text” kartice Location treba napisati kratak opis slike kao alternativni tekst koji se pojavljuje na web browseru korisnika dok se slika učitava ili ako je njeno učitavanje onemogućeno.
24 • U polje “Tooltip” postavlja se naziv slike. Neko browseri omogućuju prikazivanje naziva slike kada se mišem stane iznad te slike.
Dimension kartica prozora Image Properties se koristi ukoliko je potrebno promeniti veličinu slike na web strani . Tu se može promeniti: • Actual Size: Ova opcija se selektuje ako se žele poništiti sve promene na slici ili da bi se pojavila u svojoj originalnoj veličini. • Custom Size: Ova opcija se selektuje ako se žele uneti nove mere koje se odnose na novu visinu i širinu slike na web strani. Ova promena ne menja stvarne dimenzije slike, već samo utiče na pojavnu veličinu slike na web strani. • Constrain: Ukoliko ste sami izmenili pojavne dimenzije slike, nije loša ideja da selektujete i ovu opciju kako bi se upravljalo sa aspect ratio-om (da se ne bi pojavila oštećena). Ako uključite ovu opciju onda treba da promenite samo visinu ili samo širinu, a preostalo polje se samo podešava prema ovoj promenjenoj da se ne bi narušilo aspect ratio slike.
25 Appearance kartica služi za: • Spacing: Specificira količinu prostora koja okružuje sliku, između slike i okolnog teksta. Takođe se može postaviti i određen okvir oko slike i odrediti njegova širina u pikselima. • Align Text to Image: Ako se slika umetne neposredno pored teksta, potrebno je izabrati ikonuci za poravnanje kako bi se odredila pozicija teksta u odnosu na sliku.
Link kartica služi za: • Enter a web page location : Ukoliko se želi definisati link za ovu sliku, potrebno je navesti URL adresu stranice ili izabrati imenovani “anchor” ili heading sa drop-down liste. Choose File se koristi za nalaženje slike sa hard diska ili mreže.
26 • URL is relative to page location : ukoliko je štiklirano, KompoZer pretvara URL da bude relativan za lokaciju web strane. Ova opcija omogućuje slobodu pomeranja i web stranica i slika na druge lokacije, a da ne dođe do gubitka informacija. Ovo je posebno korisno ukoliko se web strane žele objaviti na web serveru tako da se omogući i drugima da ih vide. Ukoliko se ova opcija ne štiklira pomeranjem web sajta na drugu lokaciju, stranića će pokušati da nađe sliku na originalnoj adresi. Ukliko je pak ova opcija “zaključana” to je verovatno zbog toga što web stranica još uvek nije sačuvana. Zbog toga je poželjno da se pre umetanja slika na web stranice ona prethodno sačuva.
5.2 Izmena slike
Kada se jednom slika umetne na web stranicu, moguće je lako promeniti njene opcije i izgled kao što je visina, širina, odvajanje ili poravnanje sa tekstom. To se jednostavno postiže dvostrukim klikom na sliku ili se samo klikne na sliku a zatim se izabere Image dugme sa linije alatki. Pa se otvara prozor Image Properties.
Međutim moguće je veličinu slike promeniti i bez otvaranja tog prozora tako što se samo klikne na sliku, a oko nje se tada javlja okvir sa 8 “hvataljki”(beli kvadratići) na svakom od ćoškova i na sredini svake ivice slike. Hvatanjem i prevlačenjem bilo koje od tih hvataljki podešava se veličina slike. Međutim
27 mnogo preciznije promene omogućuje prozor Image properties i kartica Dimension.
6 LINKOVI I NAVIGACIJA
Linkovi predstavljaju pravi smisao navigacije između web strana. Oni omogućuju brzo premeštanje sa jednog mesta na drugo unutar jedne strane, između različitih strana ili nekog spoljnog sajta. Link može biti bilo koji element web strane. Obično su to linkovi u vidu teksta, reči ili slike.
6.1 Kreiranje linkova unutar same strane
Da bi se napravio link unutra same strane, kako bi npr korisnik mogao da skače sa jedne sekcije te strane na drugu, mora se kreirati anchor (pozicija na koju će se odnositi link), a zatim se kreira link koji se odnosi na taj anchor (koji se jos naziva i imenovani anchor). Postupak: • Odabere se pozicija na radnoj površini koja se želi postaviti za anchor ili se selektuje neki tekst • Ide se na Insert > Named Anchor ili se izabere ikonica Anchor sa linije
alatki .
• Otvara se prozor Named Anchor Properties. Potrebno je ukucati neko jedinstveno ime za anchor unutar polja Anchor Name (najvise do 30 karaktera). Ukoliko se ukuca i razmak on se apsolutno prevodi u donju crtu (_) . Zatim se klikne na OK. 28 • Na radnoj površini pojavljuje se znak sidra koji ukazuje na uspešno postavljanje anchor-a.
• Da bi se kreirao link preko koga bi korisnici mogli da skoče do označenog sidra, potrebno je selektovati tekst ili sliku koji treba da predstavlja link ka “sidru”
• Zatim kliknuti na ikonicu Link sa linije alatki ili preko Insert>Link. • Otvara se prozor Link Properties
29 • Ukoliko se pravi link ka nekom HTML fajlu na kompjuteru, ide se na Choose File da bi se taj fajl pronašao. • Ukoliko se pravi link ka “imenovanom sidru”, treba ga izabrati sa liste trenutno dostupnih “sidara” na stranici.
• Kliknite na OK. Da bi se testirao umetnuti link pokrenite ikonicu Browse. 6.2 Kreiranje linkova ka drugim web stranicama
Takođe se mogu kreirati linkovi ka drugim stranicama na vašem računaru ili na Internetu. Da bi se postavio link ka drugoj stranici: • Kliknite na mesto na web stranici gde želite da postavite link, ili selektujte određeni tekst ili sliku koju želite da linkujete.
• Kliknite na ikonicu Link • Otvara se prozor Link Properties
30 Potrebno je definisati link preko : • Link text: Ukoliko ste već odabrali tekst ili neku sliku pre otvaranja ovog prozora, selektovani tekst ili fajl će se nalaziti u ovom polju. U suprotnom, vi morate da napišete tekst koji želite da koristite kao link. • Link Location: Napišite putanju i naziv fajla ili URL stranice do koje želite da linkujete. Ukoliko niste sigurni oko putanje do fajla, kliknite na ikonicu za pretraživanje i pronađite fajl i kliknite OK. Za URL, najbolje bi bilo da je kopirate sa samog browsera. U suprotnom možete odabrati i neko već imenovano sidro. Veoma važno: link mora sadržati http:// deo URL adrese. • URL is relative to page location: Ukoliko je ovo štiklirano, KompoZer konvertuje ovaj URL da bude relativan za lokaciju strane. Ovo je posebno korisno ukoliko želite da vaše strane objavite na web serveru kako bi i drugim korisnicima ovo bilo vidljivo.
6.3 Korišćenje slika kao linkova
Takođe i slike na web strani se mogu koristiti kao linkovi. Kada korisnik klikne na sliku, ona ga vodi do određene web strane ili “sidra”. To se postiže tako što se : • Klikne se na određenu sliku koja će biti link
• Klikne se na Link ikonicu • Koristeći Link Properties linkuje se slika do imenovanog sidra ili vrha strane ili neke druge web stranice.
31 • Ukoliko želite da otklonite plavu borduru oko slike upotrebljene kao link, otvorite prozor Image Properties, kliknite na karticu Link i deštiklirajte opciju Show border around linked image. 6.4 Linkovanje dokumenata
Dokument može biti bilo koji dokument kao što je Word dokument, Adobe acrobat dokument, Power Point prezentacija, slika i slično. U svakom slučaju, za bilo koju vrstu fajla koristi se relativno adresiranje. To znači da fajl mora biti sačuvan unutar foldera u kojem se nalazi web sajt. Potrebno je samo voditi računa da se navede ceo naziv fajla i odgovrajuća ekstenzija.
• Kada se odredi gde će se postaviti link ka dokumentu, klikne se na
ikonicu Link na liniji alatki . • Otvara se prozor Link Properties, na kome preko ikonice Choose file nalazimo dokument koji želimo da linkujemo.
• Ukoliko dokumenti nisu vidljivi u prozoru Open HTML file, potrebno je u padajućoj listi izabrati opciju All files.
32
6.5 Kreiranje E-mail linkova
Linkovanje ka e-mail adresama jedno je od specifičnih linkova. Prave se na isti način kao i svi linkovi iznad, samo što se umesto putanje do fajla na hard disku ili URL adrese web stranice napise e-mail adresa kontakt osobe. Takođe veoma je bitno štiklirati opciju “The above is an email address”.
Za uklanjanje linkova: • Selektujte linkovani tekst(obično je plave boje i podvučen) ili sliku • Idite na Format > Remove Links.
Kako bi ste prekinuli dalje linkovanje teksta, tako da tekst koji dalje pišete ne bude uključen u okvir linka : • Kliknite na mesto gde želite da se završi linkovani tekst • Idite na Format > Discontinue Link.
7 RAD SA TABELAMA
7.1 Umetanje tabela
Tabele su veoma korisne za organizovanje teksta, slika i uređivanje podataka u okviru redova i kolona. Da bi se ubacila tabela
33 • Kliknite na mesto gde želite da ubacite tabelu.
• Kliknite na ikonicu Table ili preko menija Insert>Table. • Otvara se prozor Insert Table.
Postoje tri kartice na ovom prozoru: Quickly, Precisely i Cell.
• Quickly: dozovoljava da se prevlačenjem miša preko slike tabele odredi koliko će kolona i redova imati tabela koja se želi ubaciti. Tabele kreirane ovako imaju širinu koja obuhvata 100% širine prozora.
• Precisely: dozvoljava da se neposredno upiše broj redova i kolona. Takođe se ovde može naznačiti i širina tabele i izabrati procentualno pokrivanje prozora browsera. Podešavanje širine tabele čini tabele nefleksibilnim u upotrebi i mogu rezultirati da korisnik mora da pomera horizontalno tab na svom browseru kako bi mogao da pročita sve podatke. Takođe je moguće širinu tabele ostaviti nespecificiranu. Ovo verovatno daje najbolje rezultate jer je onda browseri sami podešavaju na optimalnu širinu. Treća opcija na ovoj kartici omogućuje definisanje debljine ivice tabele(u pikselima). Ukucavanje nule omogućuje pojavljivanje tabele bez ivica tj. nevidljive tabele.
34
• Cell: omogućuje podešavanje horizontalnog i vertikalnog poravnanja elemenata unutar ćelija tabele.
Tabela 1
Tabela 2
Iznad su dva tipa tabela. Prva tabela je sa dve kolone i dva reda i ivicom debljine 1. Ova tabela će biti vidljiva na web stranici.
35 Druga tabela je takođe sa dve kolone i dva reda ali ivice 0. Ova tabela neće biti vidljiva na web stranici. KompoZer koristi crvene isprekidane linije da bi označio tabele čije su ivice debljine 0. Ova isprekidana crvena linija nestaje pokretanjem stranice u web browseru.
7.2 Promena svojstava tabele • Označite tabelu
• Kliknite na ikonicu Table na liniji alatki ili preko menija Table>Table Properties. • Otvara se novi prozor Table Properties koji sadrži dve kartice: Table i Cells • Otvorite karticu Table koja sadrži sledeća polja za izmenu: o Size: se koristi kako bi se definisao broj redova i kolona. Upisivanjem širine tabele postoji mogućnost dva izbora u padajućoj listi "% of window" or "pixels." Ukoliko se izabere procentualna širina, širina tabele će se menjati prilikom promene širine prozora KompoZera ili web browser-a. o Borders and Spacing: se koristi za definisanje , u pikselima, širine ivice, razmaka između ćelija, i razmaka između sadržaja ćelije i njene ivice(cell padding). o Table Alignment: se koristi za definisanje poravnavanja tabele u odnosu na web stranicu. Izbor se vrši iz padajuće liste. o Background Color: se koristi za definisanje pozadinske boje tabele, ili postavljanja na transparentu. o Caption: služi za dodavanje naslova tabele iznad, ispod, levo ili desno od tabele. Sve opcije biraju se u padajućoj listi. o Background color: pritiskajući ovo dugme bira se boja pozadine tabele iz palete boja.
• Da biste videli promene podešavanja kliknite na Apply bez zatvaranja prozora, ili kliknite na OK da bi ih potvrdili i zatvorili prozor.
36 7.3 Promena svojstava ćelije tabele • Selektujte red, kolonu ili ćeliju, a zatim otvorite prozor Table properties • Na novootvorenom prozoru izaberite karticu Cells da bi promenili sledeće opcije o Selection: omogućuje izbor ćelije, reda ili kolone iz padajuće liste. Klikom na Previous ili Next omogućuje se kretanje kroz redove, kolone ili ćelije. o Size: omogućuje definisanje visine i širine i izbor "% of table" ili "pixels." o Content Alignment: omogućuje horizontalno i vertikalno poravnanje teksta unutar ćelija. o Cell Style: Izborom “Header” iz padajuće liste centrira se i podebljava tekst unutar redova, kolona ili ćelija. o Text Wrap: Izbor "Don't wrap" iz padajuće liste omogućuje da tekst ne prelazi u naredni red unutar ćelije osim ako ne unesete sami razmak. U suprotnom ostavite na Wrap. o Background Color: Omogućuje izbor boje za pozadinu ćelije ili postavljanje na transparentu.
37 7.4 Dodavanje ili brisanje redova, kolona i ćelija
KompoZer omogućuje i brzo dodavanje ili brisanje jedne ili više ćelija, kolona ili redova u tabeli. Za dodavanje ćelije, reda ili kolone u tabelu: 1. Kliknite unutar tabele gde se želi dodati nova ćelija 2. Preko menija idite na Table>Insert 3. Izaberite jednu od opcija (takođe je moguće dodati i novu tabelu unutra ćelije druge tabele)
38 Brisanje ćelije, reda ili kolone ostvaruje se na sledeći način: 1. Kliknite na red, kolonu, ćeliju ili više ćelija koje želite da izbrišete. Da bi selektovali dve susedne ćelije uradite to kao da prevlačite jednu preko druge. Ako želite da selektujete dve nesusedne ćelije, držite Ctrl i kliknite mišem na željene ćelije. 2. Otvorite preko menija Table>Delete 3. I izaberite šta želite da obrišete
Za spajanje susednih ćelija: • Selektujte susedne ćelije • Preko menija Table>Join Selected Cells
7.5 Pomeranje, kopiranje ili brisanje tabele
Da bi pomerili tabelu: • Kliknite unutar tabele • Preko menija idite na Table>Select>Table
39 Da bi kopirali i pomerili tabelu koristite Edit opcije cut,copy i paste. Da bi obrisali celu tabelu idite na Table>Delete>Table.
Svaka ćelija, kada se klikne unutar nje, pruža set od šest simbola za podešavanje (trouglovi i krugovi sa iksićem unutar njih). Ovi simboli omogućuju brži metod za ubacivanje i brisanje redova i kolona oko ćelije.
7.6 Upis podataka u tabele
Unos podataka u tabelu je jadan od najlakših poslova. Unešeni tekst će biti formatiran po defaultu kao i običan tekst u “Body Text” ali se on može formatirati i u “paragraph” ili neki drugi stil. Međutim čak i najjednostavniji posao unošenja teksta iz već pripremljenog izvora i konstantno ponavljanje tog posla može postati zamorno.
40 Nakon selektovanja određene količine teksta, KompoZer nudi mogućnost pretvaranja tog teksta u tabele preko Tables > Create table from selection.
Linije teksta(bez obzira da li se završavaju pauzama ili krajem paragrafa) će biti pretvorene u redove tabela, a nova ćelija tabele formira se svaki put kada naiđe na specificirani razmak.
Koristeći ovaj metod mogu biti iskorišćene tabele iz drugih aplikacija poput MS Word-a.
8 FORME
Forme pružaju mehanizam koji posetiocu sajta omogućuje da šalje poruke. Ovo može biti jednostavan boks za pisanje e-mail poruka ili kompleksna forma poput pretraživanja za katalog i slanja porudžbine nabavljaču. Forme prikupljaju 41 podatke i prosleđuju ih serveru. Što znači da forme mogu biti aktivne samo uz odgovarajuću softversku podršku na serveru.
Forme se mogu postaviti na standardnu web stranu ili se mogu ponašati kao posebni blok elementi. U Normal modu, KompoZer prikazuje forme okružene tačkastim plavim kvadratom.
Forme mogu sadržati druge standardne elemente (paragrafe…) kao i nekoliko specifičnih elemenata poznatih kao kontrole forme koje su dizajnirane za prikupljanje podataka. Svaki podatak koji se šalje serveru je određen informacijom na koju se kontrolu odnosi. Ovo se postiže imenovanjem svake kontrole. Zbog toga dizajneri moraju da jedinstveno imenuju svaku od kontrola.
Podaci prikupljeni na formi biće poslati na URL adresu specificiranu u polju “Action URL”. Ova adresa je najčešće na serveru koji hostuje web stranicu ali ne mora da bude. Podaci će biti procesirani korišćenjem jedne od dve metode: “GET” ili “POST” koje takođe moraju biti specificirane.
Forma se postavlja na sledeći način: 1. Kursorom označiti mesto gde treba postaviti formu.
2. Izabrati ikonicu Form sa linije alatki ili preko menija na Insert>Form>Define form.
42 3. Otvara se prozor Form Properties 4. U polje Form name treba uneti naziv forme po izboru 5. U polje Action URL treba uneti tačnu adresu i izabrati u padajućoj listi odgovarajući metod (GET ili POST) 6. Kliknite na OK. 7. Na formu se postavljaju po potrebi ostali elementi: paragrafi, slike… pazeći da ima dovoljno mesta za postavljanje potrebnih kontrola. 8. Tamo gde kontrole treba postaviti, treba kliknuti na to mesto i koristeći padajuću listu kraj ikonice Form odabrati potrebnu kontrolu. 9. Svakoj kontroli treba dati jedinstven naziv. 10. Svaka kontrola zahteva posebnu informaciju koja mora biti upisana. 8.1 Kreiranje forme • Potrebno je pre svega otvoriti stranicu na koju treba smestiti formu i sačuvati je. Veoma je poželjno da se tokom rada često vrši snimanje. • Kursor treba dovesti na mesto gde treba smestiti formu. Za naslov forme se može staviti npr Članovi Sajta • Zatim se preko menija ide na Insert>Form>Define form.
43 • Otvara se prozor Form Properties . Tu treba uneti određeno ime za formu u polje “Form name”. U polje “Action URL” stavljamo npr stranicu server.php koja će upravljati dobijenim podacima sa forme. Za metod u opdajućoj listi biramo “POST”.
• Nakon toga kliknemo na OK. • Na stranici se pojavljuje mesto za formu okruženo plavim tačkicama koje nam pokazuju gde treba da definišemo osnovne kontrole forme.
44 8.2 Dodavanje kontrola na formu
8.2.1 Dodavanje tekstualnog polja
Da bi smo posetiocu pružili mogućnost da u formu slobodno unese neki tekst, definisaćemo jedno polje za tekst.
Npr. možemo tražiti od posetioca da unese sve ime. • Na formi ukucamo reč “Ime: ” koja će se odnositi na prvo polje forme.
• Preko Insert>Form>Form Field ili na liniji alatki u opadajućoj listi kod
ikonice Form izaberemo Form Field.
45 Ili
• Otvara se novi prozor Form Field Properties gde u opadajućoj listi Field Type biramo opciju Text.
• U okviru Field Settings na istom prozoru u polje Name Field pišemo npr “poljeIme”.
46 • Nakon toga klikne se na OK. Nakon ubacivanja polja na formu, iza nje se klikne Enter da bi se prešlo u sledeći red forme. • Rad je nakon toga poželjno sačuvati.
Prva kontrola na formi izgleda ovako :
Jedno ovako polje može biti dodato i za slanje e-mail adrese, komentar i slično…
8.2.2 Dodavanje radio dugmeta
Radio dugmad su karakteristična po tome što se uglavnom javljaju u grupama. Kada je jedno dugme grupe aktivno, ostala dugmad se automatski poništavaju.
47 • Na formi se npr. unese tekst “Da li vam se dopada ovaj web sajt?” A potom se klikne na Enter radi prelaska u sledeći red.
• Zatim se unese tekst “Ne sviđa mi se” koji će da odgovara prvom radio dugmetu. Potom se kursor postavi na početak ako se želi opciono dugme postaviti na početak reči. • Potom se ide preko menija na Insert>Form>Form Field ili u meniju
ikonice Form na liniji alatki se izabere Form Field. Otvara se novi prozor Form Field Properies. • U padajućoj listi Field Type se izabere Radio Button.
48 • A u polje Group Name se može napisati npr “anketa” jer nam dugmad služe za prikupljanje mišljenja posetioca sajta. Ime grupe veoma je bitno - samo jedno dugme grupe može biti selektovano i aktivno.
• Kod polja “Field Value” unese se tekst “Ne sviđa mi se” • Selektuje se opcija “Initially Selected”.
• Kliknite na Ok. A potom na Enter. Dobili smo sledeći izgled.
49 Pošto želimo da naša anketa ima tri izbora ostaje nam da napravimo još dva radio dugmeta unutar iste ove grupe. Što znači da prilikom definisanja novih opcionih dugmadi u Group Name treba staviti naziv “anketa” da bi ta dugmad bila uključena u istu tu grupu. Tako da je postupak dodavanja dugmadi isti samo što će se razlikovati:
• Reč(fraza) koja će slediti dugme • Field Value • I sama činjenica da samo jedno dugme može biti istovremeno selektovano. Što znači da se više ne sme štiklirati opcija “Initially Selected”.
Dakle nakon umetanja još dva izbora dobijamo konačan izgled ankete:
8.2.3 Dodavanje check-box-a
Za razliku od radio dugmadi, check box-ovi u jednoj grupi mogu biti svi istovremeno aktivni, može biti aktivan jedan, dva, tri ili više, ili nijedan.
Ovde ćemo razmotriti kreiranje jednog takvog dugmeta. • Na formi napišite tekst “Želim da primam obaveštenja u vezi sa sajtom”.
50 • Zatim preko Insert>Form aktivirajte opciju Form Field ili istu tu opciju
aktivirajte preko ikonice Form na liniji alatki.
• Otvara se novi prozor Form Field Properties, gde za Field type u opadajućoj listi biramo opciju “Check box”.
• U polje Field Name unosimo npr “obaveštenje” • A u polje Field Vaule unosimo vrednost “želim primati obaveštenja”. (Kada posetilac sajta štiklira ovu opciju serveru se šalje informacija da on želi da prima obaveštenja) • Nakon toga klikne se na OK.
Sada naša jednostavna forma članova sajta izgleda ovako:
51 Kada se pokrene browser ovaj plavi okvir forme se gubi. On je prisutan samo u Edit modu jer nam označava granice forme u kojoj radimo.
52 8.2.4 Dodavanje dugmadi za potvrđivanje i otkazivanje
Forma se šalje kada posetilac klikne na dugme OK - dugme za potvrđivanje. Ukoliko je to potrebno, korisnik takođe mora imati mogućnost da obriše sve ono što je uneo kako bi krenuo ispočetka. Za to mu treba dugme za otkazivanje - Cancel.
Dugme za potvrđivanje
• Insert>Form>Form Field. Otvara se novi prozor Form Field Properties. • U padajućoj listi treba izabrati opciju Submit Button.
• U polje Field Name upišite OK. • U polje Filed Value takođe to.
53 • Po završetku kliknite na OK. • Dobili smo dugme za potvrđivanje OK.
Dugme za otkazivanje
• Insert>Form>Form Field. Otvara se novi prozor Form Field Properties. • U padajućoj listi treba izabrati opciju Reset Button.
• U polje Field Name upišite Cancel. • U polje Filed Value takođe to.
54 • Po završetku kliknite na OK. • Dobili smo dugme za otkazivanje Cancel. Sada naša forma izgleda ovako.
Forma je sada završena. Naravno rad se treba sačuvati na ikonicu Save .
55 9 SADRŽAJ
Ukoliko imate veliki dokument sa odeljcima koje ste formatirali pomoći Heading 1, Heading 2 itd. KompoZer može automatski da generiše sadržaj. Sadržaj oslikava strukturu stanice. Po default-u naslovi u sadržaju biće linkovani do glava unutar stranice na koji se odnose, pružajući jednostavnu navigacuju po stranici.
Ukoliko je to potrebno, sadržaj može biti numerisan tako da će Heading1 biti numerisan sa 1 pa naviše, Heading2 sa 1 pa naviše ali ovo numerisanje se restartuje svaki put kada se nivo 1 poveća za 1.
Nije uvek potrebno sve nivoe prikazati u sadržaju, moguće je odabrati za prikaz samo prvi i drugi nivo. Takođe mnogo bitnije je da stranica ne mora posedovati neki striktno određeni nivo formatiranja npr može posedovati samo Heading5 i Heading6 i samo ovi nivoi će činiti osnovu sadržaja i omogućiti kretanje po stranici.
Sadržaj funkcioniše samo unutar strane na kojoj se nalazi. Linkovi ka drugim stranama moraju biti naknadno ubačeni.
Umetanje sadržaja:
1. Postaviti kursor na mesto gde se želi generisati sadržaj. 2. Preko menija Insert > Table of Contents > Insert.
3. Otvara se prozor Table of Content.
56 4. U koloni Tag treba izabrati tag za svaki nivo Heading1- Heading6, p ili div. Za paragraph (p) ili div u koloni Class treba ukucati zahtevanu klasu. 5. Ukoliko se želi da sadržaj bude numerisan potrebno je štiklirti opciju “Number all entries”. 6. Posle određivanja, kliknuiti na OK.
Tako se postavlja sadržaj na web stranu.
Izmena sadržaja: Nema potrebe da se označava posebno 1. Opet preko menija se ide na Insert > Table of Contents > Update. 2. Tada se otvara prozor Table of Content. 3. Posle izmena kliknuti na OK.
Za brisanje sadržaja ide se na Insert > Table of Contents > Delete. KompoZer kreira sadržaj koristeći uređene i neuređene liste. Ove liste moraju biti ugnježdene kako bi oslikavale strukturu nivoa, a rezultat je da je svaki nivo zavistan od prethodnog.
57 10 SLOJEVI
Jedna od osobina KompoZera je da se njegovi elementi mogu pomerati. Samo se postavi kursor unutar bloka teksta koje se želi pomerati i klikne se na Layer
ikonicu sa linije za formatiranje kako bi se taj blok mogao pomerati. Kreiranje slojeva: 1. Klikne se na blok koji se želi fomatirati kao sloj
2. Potom se klikne na Layer dugme
Blok postaje sloj. Sloj poseduje okvir promenljive veličine. Na vrhu sloja nalazi se ručka za podešavanja (u vidu četvorostrane strelice). Da bi se blok pomerao potrebno ga je samo uhvatiti za tu ručku i prevući na željeno mesto.
Sloj ne mora da postoji u vidu jednog bloka. Svako skup elemenata koji se može zajedno selektovati može se konvertovati u sloj. To može biti nekoliko paragrafa sa ili bez naslova, slike ili tabele. Slojevi takođe mogu biti preklopljeni jedan preko drugoga.
Tekst po defaultu ima transparentu pozadinu tako da kada se slojevi sa tekstom preklope jedan preko drugog može doći do konfuzije. Zato je poželjno da se u tom slučaju definiše određena boja pozadine teksta. Slojevi su formatirani kao “div” elementi. 58 10.1 Upravljanje slojevima
Za pomeranje, potrebno je uhvatiti ručku na vrhu sloja i pomeriti na željenu poziciju. Da bi se promenila veličina, pomeraju se kockice na samom okviru. Kada se slojevi preklope jedan preko drugog potreban je mehanizam da bi se definisalo koji od tih slojeva je ispred (tako da je komplet vidljiv) a koji je iza (tako da se delimično vidi). Dva dugmeta sa linije za formatiranje služe za to :
“Bring to front” i “Send to back” . Slojevi kada se kreiraju nemaju parametar “z-indeks”. Kada se postavi napred, z-indeks se postavlja na 1. Z- indeks pokazuje koliko “ispred” je taj sloj. Ukoliko se drugi sloj postavi ispred ovog njegov “z-indeks” se postavlja na 2, jer se nalazi ispred druga dva sloja.
59 11 CSS EDITOR – KaZcades
11.1 Rad sa CSS editorom
HTML oznake u svakom web dokumentu se koriste kako bi inicirale samu strukturu dokumenta:
• heading (
), • telo dokumenta (), • naslov najvišeg stepena (), • naslov drugog stepena (), • paragraf (
), • slike(), • tabele (