SKRIPTA ZA VEŽBE IZ PREDMETA ELEKTRONSKO POSLOVANJE

Size: px
Start display at page:

Download "SKRIPTA ZA VEŽBE IZ PREDMETA ELEKTRONSKO POSLOVANJE"

Transcription

1 SKRIPTA ZA VEŽBE IZ PREDMETA ELEKTRONSKO POSLOVANJE KompoZer 0.77 Laboratorija za elektronsko poslovanje Beograd 2008.

2 Sadržaj SADRŽAJ O KOMPOZER-U RADNO OKRUŽENJE KOMPOZER-A RAD SA DOKUMENTIMA KREIRANJE NOVE STRANE OTVARANJE POSTOJEĆE STRANICE ČUVANJE STRANICE POKRETANJE STRANICE RAD SA TEKSTOM FORMATIRANJE TEKSTA PODEŠAVANJA IZGLEDA WEB STRANE (NASLOV, BOJA, POZADINSKA SLIKA) Naslov stranica Postavljanje boje i pozadine strane UMETANJE LISTI UMETANJE SPECIJALNIH ZNAKOVA RAD SA SLIKAMA UMETANJE SLIKE IZMENA SLIKE LINKOVI I NAVIGACIJA KREIRANJE LINKOVA UNUTAR SAME STRANE...28 KREIRANJE LINKOVA KA DRUGIM WEB STRANICAMA...30 KORIŠĆENJE SLIKA KAO LINKOVA...31 LINKOVANJE DOKUMENATA...32 KREIRANJE LINKOVA RAD SA TABELAMA UMETANJE TABELA...33 PROMENA SVOJSTAVA TABELE...36 PROMENA SVOJSTAVA ĆELIJE TABELE...37 DODAVANJE ILI BRISANJE REDOVA, KOLONA I ĆELIJA...38 POMERANJE, KOPIRANJE ILI BRISANJE TABELE...39 UPIS PODATAKA U TABELE FORME KREIRANJE FORME DODAVANJE KONTROLA NA FORMU Dodavanje tekstualnog polja Dodavanje radio dugmeta Dodavanje check-box-a Dodavanje dugmadi za potvrđivanje i otkazivanje SADRŽAJ

3 10 SLOJEVI UPRAVLJANJE SLOJEVIMA CSS EDITOR KAZCADES RAD SA CSS EDITOROM DEFINISANJE STILA ZA NASLOV PRVOG STEPENA(HEADING1) DEFINISANJE NASLOVA DRUGOG STEPENA (HEADING2) PODEŠAVANJE STILOVA ZA TABELE DODAVANJE KLASA U STYLE SHEET DEFINISANJE STILOVA ZA SLIKE ČUVANJE STILOVA RAD BEZ EXPERT MODA LINKOVANJE POSTOJEĆEG STYLESHEET-A NA NOVU STRANICU BRZO IN-LINE STYLE EDITOVANJE TEMPLEJTI ŠTA SU TEMPLEJTI...80 KREIRANJE NOVOG TEMPLEJTA...80 ČUVANJE TEMPLEJTA...82 KREIRANJE TEMPLEJTA OD STRANICE...83 PODEŠAVANJE TEMPLEJTA...84 KORIŠĆENJE TEMPLEJTA...86 IZMENA TEMPLEJTA OBJAVLJIVANJE SAJTA PODEŠAVANJE OPCIJA PRIMER IZRADE WEB SAJTA KREIRANJE STRUKTURE SAJTA IZRADA TEMPLEJTA ZA NAŠ WEB SAJT IZRADA STRANICA ZA NAŠ WEB SAJT Kreiranje index stranice Kreiranje ostalih stranica Prikazivanje u browser-u Složenija struktura teksta i slika Izrada galerije Izrada kontakt formulara Prikaz u Site Manageru REFERENCE

4 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

5 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 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

6 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 2 ili novijoj. 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

7 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

8 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 Managerom 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

9 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

10 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

11 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

12 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

13 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 RAD SA DOKUMENTIMA 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

14 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

15 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

16 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 korisnik@primer.com. 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, 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

17 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

18 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

19 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 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

20 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 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

21 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

22 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

23 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

24 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 Image. Otvara se Image Properties prozor. na liniji alatki ili idite na Insert > 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

25 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

26 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

27 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

28 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

29 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 Otvara se prozor Link Properties ili preko Insert>Link. 29

30 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

31 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 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

32 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

33 6.5 Kreiranje linkova Linkovanje ka 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 adresa kontakt osobe. Takođe veoma je bitno štiklirati opciju The above is an 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

34 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

35 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

36 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

37 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

38 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

39 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

40 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

41 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 poruka ili kompleksna forma poput pretraživanja za katalog i slanja porudžbine nabavljaču. Forme prikupljaju 41

42 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 Insert>Form>Define form. sa linije alatki ili preko menija na 42

43 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

44 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

45 8.2 Dodavanje kontrola na formu 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

46 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

47 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 adrese, komentar i slično 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

48 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

49 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

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

51 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

52 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

53 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 Properties. U padajućoj listi treba izabrati opciju Submit Button. U polje Field Name upišite OK. U polje Filed Value takođe to. Form Field 53

54 Po završetku kliknite na OK. Dobili smo dugme za potvrđivanje OK. Dugme za otkazivanje Insert>Form>Form Field. Otvara se novi prozor Properties. U padajućoj listi treba izabrati opciju Reset Button. U polje Field Name upišite Cancel. U polje Filed Value takođe to. Form Field 54

55 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

56 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

57 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

58 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

59 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. Zindeks 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

60 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 (<head>), telo dokumenta (<body>), naslov najvišeg stepena (<h1>), naslov drugog stepena (<h2>), paragraf (<p>), slike(<img>), tabele (<table>), KompoZer dolazi sa ugrađenim CSS editorom (CSS - cascading style sheet), pod nazivom KaZcades. Za uređivanje HTML strane koja se trenutno obrađuje, CSS editor se može otvoriti preko Tools>CSS editor. Ovim se otvara CSS editor sa čije leve strane se nalazi pano Sheets and rules koji u vidu drveta pokazuje bilo koji stil ako postoji u tom HTML dokumentu. Ukoliko ni jedan stil nije linkovan za tu stranicu, novi stil može biti kreiran. Pošto se prethodno sačuva stranica u određenom folderu gde će biti smešten web sajt, prelazi se na definisanje stilova preko CSS editora. Na liniji alatki, izabere se ikonica Tools> CSS editor. Može se takođe aktivirati sa F11. ili sa glavnog menija izaberite Glavni prozor KaZcades-a se pojavljuje i izgleda ovako: 60

61 Otvara se prozor CSS Stylesheets. Pano pod nazivom Sheets and rules sa leve strane prozora je prazan, a deo prozora sa desne strane je jos neaktivan. Glavne funkcije koje će biti potrebne u daljem radu aktiviraju se ikonicom koja se nalazi na vrhu levog dela prozora. Pri dnu prozora se štiklira opcija koja stoji uz Expert mode i iz padajućeg menija pored ikone KaZcades na prozoru bira se opcija Style elt. 61

62 Unese se ime za novi stylesheet i potom se klikne na dugme Create Stylesheet. Potom se klikne na dugme Export stylesheet and switch to exported version. Otvara se novi prozor za sačuvavanje stylesheet-a, a fajl bi se trebalo završavati sa ekstenzijom.css (npr cssstil.css). Ovaj stil odnosiće se na prethodno sačuvanu stranicu u istom tom folderu. 62

63 1.1. Izmena stila za body text Klikne se na opciju Rule. U novo otvorenom delu prozora, u polje za Sector može se napisati body. A potom se klikne na dugme Create Style rule. Izabere se kartica Text. U opciji za Font Family, može se izabrati Predefined i u padajućoj listi izabrati željeni font. 63

64 U desnom delu prozora kartice Text nalazi se opcija Color za izbor boje teksta. Klikom na dugme pored može se izabrati boja iz palete boja. U opciji za veličinu fonta, može se postaviti relativna veličina fonta. Ukoliko se npr koristi 12pt za veličinu fonta, tada će ljudi koji su slabog vida biti uskraćeni da u svom browseru podese font prema svojim potrebama. Postavljanje veličine na 1em omogućuje posetiocima da slova vide u onom obliku i veličini koji njima najviše odgovara i kako su ih oni podesili. 64

65 Na kartici Background bira se boja ili slika za pozadinu (potrebno je postaviti dovoljno jasnu granicu između boje teksta i boje pozadine kako bi tekst bio uočljiv i da ne bi došlo do preklapanja boja). Da bi se postavile margine za tekst, ide se na karticu Box. Potrebno je iskucati u procentima za levi i desni Padding npr 10% a potom kliknuti na dugme OK. 65

66 11.2 Definisanje stila za naslov prvog stepena(heading1) Klikne se na ikonicu bira opcija Rule. u okviru prozora CSS Stylesheets. Ponovo se Ukoliko nije definisan nijedan stil, pojavljuje se oznaka internal stylesheet u panou Sheets and rules i aktiviraju se polja u desnom delu prozora New Style rule. Sada ćemo definisati podešavanja za stil vezan za Heading1: h1. U polju za Selector piše se h1. A potom se klikne na dugme Create Style Rule. Na panou Sheets and rules pojavljuje se pravilo za sektor h1. Dok je pravilo h1 označeno sa desne strane biramo karticu Text. Na kartici Text sada se definiše izgled slova za stil Heading1. Za Font family može se opet izabrati Predefined font u padajućoj listi. Boja se bira u paleti boja. Može se izabrati Bold u padajućem meniju Font Weight, 66

67 zatim Center kod Alignment-a. A za veličinu slova može se povećati na 1.4em. U polju Color, za boju, možemo u paleti boja da izaberemo npr cvrenu. Dugme koje vodi do palete boja sada postaje crveno a u samo polje Color se ispisuje kod za crvenu boju. Vidimo da i tekst u pozadini formatiran kao Heading1 dobija crvenu boju. Nakon rada sa KaZcades-om, klikne se na OK. 67

68 A potom se stranica sačuva. Na isti način može se menjati stil za h2, h3 itd Definisanje naslova drugog stepena (Heading2) Koristeći isti metod, objašnjen iznad, može se definisati pravilo i za Heading2: h2: Za boju može se izabrati zelena. A žuta za pozadinu. Promene se mogu posmatrati odmah na stranici iza KaZcades prozora. Posle svih promena potrebno je dokument snimiti. Kako je koje pravilo stila definisano vidi se na kartici General u desnom delu KaZcades prozora: Obično je potrebno napraviti datoteku stila sa pravilima za prvu naslovnu stranicu a potom će svakoj narednoj biti prikačena ta ista datoteka čineći tako stilizovanje stranice mnogo jednostavnijim. Tako se korišćenjem već postojećih datoteka stilova mogu izmeniti stranice bez korišćenja bilo kojih alatki za formatiranje. Za definisanje pravila za ostale elemente koriste se oznake 68

69 Za okvire (<a>) Za reference (<blockquote>) 11.4 Podešavanje stilova za tabele Da bismo definisali ponašanje za tabele, opet preko CSS editora i njegove opcije Rule pravimo stil za tabele na našim stranicama. U polje za Selector-a sada unosimo oznake vezane za tabele: table, tr, td, tbody. Ovde se sada podešavaju opcije vezane za tabele, kao što su opcije za tabele, kolone i samo telo tabele. Sve promene se mogu pratiti u pozadini 69

70 11.5 Dodavanje klasa u Style sheet Klasa u okviru nekog stila označava uticaj samo na određeni deo stranice. Na vama je da odlučite na kom delu će se te promene desiti. Sada se među opcijama za novo pravilo treba odabrati Named style. Ovo omogućuje definisanje stilova i pravila koja ćete moći da primenite samo na određene delove web stranice. U polje za naziv možemo napisati bilo sta po izboru npr BoldItalic. Obično se za ime stavi nešto po čemu će to pravilo biti prepoznatljivo. U levom panou prozora pokazuje se naziv naše klase sa tačkom ispred sebe. Podešavanja za tu klasu se postižu na isti način kao i za bilo koje drugo pravilo. Ta klasa se označi a potom se na karticama Text, Background itd biraju podešavanja. Recimo da su naša podešavanja sledeća: 70

71 Ukoliko želimo da novokreiranu klasu primenimo na nekom delu teksta ili strane označimo taj tekst i u liniji za formatiranje u padajućoj listi izaberemo našu klasu Definisanje stilova za slike Da bi definisali stil za sliku: U prozoru KaZcades kreira se posebno pravilo za sliku. U padajućoj listi kraj ikonice biramo Rule. 71

72 Sa desne strane prozora, u polje za definicuju Selector-a pišemo img Nakon toga klikne se na dugme Create Style rule Sa leve stranu u panou Sheets and rules, pojavljuje se u okviru internal stylesheets i pravilo za img. Dok je ono označeno sa desne strane biramo karticu Borders da bi definisali ivice same slike na našem dokumentu. Na kartici Box definiše se odvajanje okvira od slike za 10px 72

73 Za vreme svih ovih promena može se u pozadini posmatrati i samo ponašanje slike i elemenata oko nje. Po završetku rada, stranice treba sačuvati Čuvanje stilova Veoma je bitno celokupan rad u vezi sa stilizovanjem jedne stranice sačuvati u vidu jednog fajla. Za datu stranicu otvara se CSS editor ili KaZcades. Selektuje se u panou Sheets and rules sa leve strane prozora definisani Internal stylesheets ili kako smo ga već mi definisali. Sa desne strane se ako nisu, popunjavaju polja za Media List i Title. Potpom se klikne na dugme Export stylesheet and switch to exported version. Otvara se novi prozor za čuvanje.css fajlova. 73

74 Nakon toga, u CSS editoru ostaje samo referenca ka tom css fajlu koji sadrži sve definisane stilove i pravila. Međutim, u CSS editoru sve ostaje sačuvano kao apsolutno. Sto se može videti u HTML kodu. Da bi prilikom objavljivanja web sajta na server sve radilo kako treba, ovaj apsolutni način treba prevesti u relativni na sledeći način. Preko Tools>Marcup cleaner. Treba štiklirati sve check-boxove na novootvorenom prozoru. 74

75 A potom kliknuti na dugme Clean Up. Rezultat se dobija u okviru kolone Report. Nakon odrađenog zadatka, u HTML kodu može se proveriti da li je sada putanja do fajlova apsolutna ili relativna. Ako je potrebno može se ovaj postupak čišćenja sprovoditi sve dotle dok svi rezultat u koloni ne budu 0. 75

76 11.8 Rad bez Expert Moda Kada deštikliramo ovu opciju, dobijamo novi način za izradu stilova. Kada kliknemo na ikonicu dobijamo sa leve strane u panou Sheets and rules takođe Internal stylesheets, dok sa desne strane dobijamo nove opcije za izbor. U oknu New style rule, postoje opcije za Named style i dve za Applied style. Named style je za klase. Druga opcija omogućuje posebno definisanje za elemente kao što su: body, p, pre, div,li, ol, ul. Izborom neke od ovih opcija klikne se na dugme Create Style rule. Body je telo web strane gde ide tekst, slike itd P je za paragraf, div je za kontejner. Možemo izabrati jedan ili više elemata koje želimo da definišemo. 76

77 Za sve ove elemente definišu se stilovi na karticama Text, Background 11.9 Linkovanje postojećeg stylesheet-a na novu stranicu Ukoliko se napravi nova stranica web sajta i ako se na nju želi isto primeniti već definisani css stil, to se postiže na sledeći način: Nakon što je stranica napravljena i sačuvana, ide se preko Tools>CSS editor ili se na liniji alatki klikne na ikonicu KaZcades. Potom se otvara Link elt. U desnom delu prozora CSS Stylesheets pokazuju se opcije vezane za linkovanje postojećeg css stila na novokreiranu stranicu. 77

78 Preko dugmeta Choose file, otvara se novi prozor Select CSS File za izbor postojećeg fajla sa ekstenzojom.css. Ukoliko css fajlovi nisu vidljivi, potrebno je u polju Files of type izabrati opciju All files. Kada se izabere prethodno kreiran stylesheet, klikne se na Open. U polju URL pojavljuje se putanja do tog fajla. Nakon toga klikne se na dugme Create Stylesheet i ime ugrađenog stylesheet-a se pojavljuje sa leve strane i primenjuje se na novu stranicu. 78

79 Najvažnija stvar je da se dokument sačuva pre i posle korišćenja KaZcades-a. Nakon isključivanja CSS editor-a prva stvar koja se MORA uraditi je da se stranica i dotadašnji rad sačuvaju. Ako se pak desi da stilovi nisu uključeni i posle čuvanja dokumenta, potrebno je osvežiti stranicu. Po završetku rada klikne se na OK Brzo in-line style editovanje Status bar koji se nalazi na dnu prozora KompoZer-a, pokazuje koji tag okružuje poziciju kursora na radnoj površini. Čak su prikazani i roditeljski tagovi. Desnim klikom na određeni tag dobija se konteksni meni. Mnogo se više može ovim putem uraditi nego što je to samo inline editovanje npr može se odstraniti ili izmeniti HTML tag, primeniti ID ili klasa iz unapred definisanog stila, definisati neki templejt regioni itd. Opcije ovog konteksnog menija su: Select selektovati ceo tekst okružen određenim tagom. Remove Tag odkloniti tag iz teksta. Change Tag izmeniti tag za taj tekst. In-line Styles Otvara odgovarajuće tabove iz KaZcades editora za lakše editovanje stila : o Text Properties o Border Properties o Background Properties o Box Properties o Aural Properties 79

80 o Extract and Create Generic Style Templates Može se napraviti izmenjljiva objast ili otkloniti takva iz templejta ID Dodeliti tekstu okruženom tagom ID iz stila Classes Dodeliti klasa iz stila Advanced Properties Izmeniti HTML atribute, In-line Styles i Javascript events 12 TEMPLEJTI 12.1 Šta su templejti Templejti su osnovne stranice koje uglavnom imaju neki sadržaj ( zaglavlje i slično) koje mogu biti ponovo korišćene za izradu drugih stranica koje će imati istu strukturu poput tog templejta. Oni se ne mogu izmeniti tokom korišćenja pa se zato mogu koristiti iznova i iznova. Najjednostavniji templejt može biti prazna bela stranica sa definisanim stylesheet-om koji se koristi kroz čitav sajt. Malo složeniji templejt bila bi stranica sa banerom i menijem ka ostalim stranicama. Templejt se sastoji od dva dela: Fiksiranog dela koji je isti za svaku stranicu I promenljivog dela koji dopušta izmene na svakoj stranici. KompoZer prepoznaje dva tipa izmenljivog dela: Block i flow. Block - je poput svakog drugog HTML bloka i može sadržati paragrafe itd. Flow - se nalazi unutar nekog bloka u liniji sa tekstom, npr za izmenu jedne ili više reči nekog paragrafa Kreiranje novog templejta 80

81 Pravljenje templejta u KompoZeru je poput izrade bilo koje druge stranice. Ide se preko menija na File>New. Otvara se novi prozor Create a new document or template gde štikliramo opciju A blank template a potom kliknemo na Create. Svi templejti se kreiraju sa Transitional HTML Doctype. Na tu novokreiranu stranicu dodaje se sve što bi trebalo da sadrži svaka stranica istog web sajta. Na kraju se dodaje izmenljivi deo templejta preko opcije Insert>Templates>Insert editable area 81

82 Otvara se prozor Insert an editable area na kojem biramo opcije vezane za taj izmenljivi deo. Tu možemo da izaberemo dve opcije Block ili Flow Čuvanje templejta Da bismo sačuvali templejt idemo na File > Save > Save As Otvara se prozor Save page as 82

83 Za File name izaberemo recimo template a ekstenzija mzt se sama generiše Kreiranje templejta od stranice Moguće je već postojeći dokument sačuvati kao templejt. Ide se preko menija na Format > Page Title And Properties Na novootvorenom prozoru štiklira se opcija This page is a template 83

84 Klikne se na OK. A potom se sačuva preko menija na File > Save as Podešavanje templejta Sadržaj osnovne stranice tj templejta može biti unapred struktuiran i formatiran. Ako je tekst već iskucan može se selektovati deo po deo teksta a zatim preko Insert>Templates>Insert editable area učiniti te blokove izmenljivim. U zavisnosti od potrebe biraju se blokovi ili tokovi teksta. 84

85 Na prozoru Insert an editable area, u delu Options javlaju se tri check-boxa: Area is optional dozvoljava da ova oblast bude obrisana ako to bude bilo potrebno. Ukoliko je ova opcija štiklirana pojavljuje se određena oznaka kružića koji kada se klikne na njega postaje crven i ponaša se kao dugme za brisanje. 85

86 Area is repeatable omogućuje brzo kopiranje te oblasti. Ukoliko je ova opcija štiklirana pojavljuje se određena oznaka kvadrata. Kada se klikne na ovaj kvadratić, on postaje crven i javlja se kopija ove oblasti koja nosi znak kružića koji se ponaša kao dugme za brisanje što je isti znak kao kod opcione oblasti što znači da se može po želji brisati. Area is moveable pretvara oblast u pokretljivi sloj Korišćenje templejta Da bi jednu stranicu bazirali na unapred definisanom templejtu, potrebno je prvo proveriti da li je sam templejt sačuvan i zatvoren. Otvoren templejt ne može biti korišćen. Da bi kreirali jednu takvu stranicu idemo na File > New Otvara se novi prozor na kojem označavamo A new document based on a template U opciji Enter the web location(url)of the template, or choose a local tamplate idemo na dugme: Choose File. Pranađemo naš templejt sa ekstenzijom mzt, i zatim kliknemo Open. 86

87 Kada smo ubacili templejt kliknemo na dugme Create. Stranica koju ovim putem dobijamo imaće sve opcije koju su definisane i na templejtu. Promene se vrše veoma jednostavno. Klikne se unutar svake promenljive oblasti. Selektuje se i briše već postojeći tekst dat kao primer teksta, a zatim se upiše sopstveni tekst. Kada se izmene sve potrebne oblasti, potrebno je stranicu odvojiti od templejta preko opcije Edit > Detach from template. Nakon toga na stranici ostaje samo sređeni izgled bez izmenljivih labela Izmena templejta Templejti koji su već sačuvani mogu biti otvoreni nanovo i izmenjeni u KompoZeru preko opcije File > Open File 87

88 Otvara se prozor i ukoliko mzt fajlovi nosi vidljivi u padajućoj listi Files of Type biramo opciju HTML Templates 13 OBJAVLJIVANJE SAJTA Do ovog momenta vaš web sajt postojao je samo na vašem računaru. Međutim naš cilj je da ga postavimo na Internet i tako učinimo javno dostupnim. Web server je računar konstantno konektovan na Internet. Bilo koji računar koji je konektovan na Internet može da pošalje zahtev serveru i da zahteva od njega transmit web strane i svih njenih elemenata. Server odgovara transmitovanjem svih željenih informacija. Objavljivanje sajta znači prenos web sajta (stranica, slika i css fajlova) na web server sa kojeg im se može javno pristupiti. Ovaj proces naziva se još i Uploading (Upload-ovanje web sajta). 88

89 Web sajt se može objaviti na web serveru na kome posedujete nalog. ISP obično nude ograničen prostor na webu, međutim prostor se može kupiti od profesionalnoh host provajdera. Za objavljivanje sajta obično se koriste usluge kompanija koje već održavaju nekoliko web servera i konstantno ih nadgledaju kako ne bi došlo da pada ili pucanja. Često pojedinačni korisnici koriste web prostor koji dobijaju na korišćenje od svojih Internet provajdera ili besplatne web servere koji nude svoje usluge u zamenu za publicitet dodat na stranicama postavljenog web sajta. Ukoliko se pak radi o nekoj firmi ona obično kupuje prostor na komercijalnom web serveru. Postoji čitav niz takvih kompanija koje nude svoje usluge po različitim cenama. Kako bi postavili naše stranice na Internet, neophodno je posedovati softver za ftp (File Transfer Protocol). KompoZer ima ugrađeni FTP klijent kojim se lako mogu postaviti datoteke web site-a na server Podešavanje opcija KompoZer nudi Markup Cleaner koji otklanja redundantan kod koji narušava fajlove ali pri tom ne remeti sam sadržaj sajta. On ne otklanja uvek baš sav redundantan kod, ali je veoma efikasan i pored toga. Podešavanje: Preko menija Edit> Publishing Site Settings. 89

90 Otvara se prozor Publish Settings U polje Site Name unosimo ime našeg web sajta. U polje HTTP address of your homepage unosi se URL adresa našeg web sajta kao npr: (potrebno je voditi računa da se obavezno navede cela URL adresa zajedno sa delom na početku ). U polje Publishing Address unosi se FTP adresa web sajta. Ova adresa obično se dobija od web servera ili hosting kompanije. Ukoliko je naš sajt smešten u podfolder potrebno je navesti i kosu crtu nakon FTP adrese i navesti ime tog podfoldera. Kao npr: ftp.mywebsite.com ftp.mywebsite.com/public_html (pod pretpostavkom da je public_html podfolder) /www (pod pretpostavkom da je www podfolder) Nakon toga unose se username i lozinka koji se dobijaju takodje od web servera ili hosting komapnije. Obično se nalazi u -u koji se dobija od te kompanije odmah po traženju hosting usluga. Ova polja su casesensitive. Nakon unosa lozinke, poželjno je štiklirati opciju za čuvanje lozinke Save Password. Nakon toga može se kliknuti na OK. Zatim se sad ide preko menija na Tools> Preferences i tu se aktivira radio dugme Retain original source formatting. Po završetku rada klikne se na OK. Nakon podešavanja ovih opcija, sve što je potrebno je da se preko ikonice Publish page pokrene objavljivanje sajta na server. Otvara se prozor Publish 90

91 Ukoliko se sajt prvi put upload-uje i ako pri tom sadrži i neke slike ili koristi eksterne css fajlove, potrebno je štiklirati opciju Include images and other files. I potom se pritisne Publish, koji otvara novi prozor Publishing:NameOfSite. On pokazuje uspeh ili neuspeh u objavljivanju sajta na navedeni server. 91

92 14 PRIMER IZRADE WEB SAJTA Ovde će biti prezentovana izrada jednostavnog web sajta za ličnu prezentaciju. Realizacija ovog sajta pokazaće sve značajnije mogućnosti programa KompoZer i načine njegovog efikasnog korišćenja Kreiranje strukture sajta Pre početka bilo kakvog rada na web sajtu, potrebno je da podesimo okvir za taj web sajt na našem hard disku. Napravićemo folder pod nazivom MojWebSajt. To je folder gde ćemo čuvati sve naše web stranice, templejte, css fajlove. Takođe to je folder gde ćemo smeštati i sve resurse koje ćemo koristiti na našem web sajtu. Zato je potrebno u okviru njega kreirati još dva foldera a to su Images za sve slike koje ćemo korisiti i folder Templates_images gde ćemo smeštati resurse korišćene u templejtu Izrada templejta za naš web sajt Preko menija idemo na File>New. Otvara se novi prozor Create a new document or template. Na njemu izaberemo opciju A blank template 92

93 Potom idemo na Create. Otvara se nova čista stranica, još uvek neimenovana. Prvo što treba da se uradi je da se sačuva u lokalnom folderu. Da bi se to uradilo ide se na File>Save/Save As ili preko ikonice Save na liniji alatki. Otvara se prozor za unos imena stranice. Tu možemo da unesemo naziv npr template. Kliknemo na OK. Otvara se prozor Save Page As, i ti nađemo folder u kojem ćemo držati naš web sajt (folder pod imenom MojWebSajt ), gde možemo da smestimo i njegov templejt kao i resurse za templejt u folderu po nazivom Templates_images. Lokalni folder MojWebSajt ima još jedan podfolder pod nazivom Images gde se mogu smestiti sve slike koje će koristiti naš web sajt. Kao naziv templejta ostavimo template, a ekstenzija mzt se sama generiše. 93

94 Sada kada smo sačuvali fajl, možemo da krenemo sa njegovom obradom. Ono što treba tokom rada činiti je učestalo snimanje na ikonicu Save kako se dotadašnji rad ne bi izgubio. Prvo možemo da preko opcije Format>Page Colors and Background sredimo izgled pozadine. Otvara se prozor Page Colors and background i tu biramo boju linkova, aktivnih i posećenih linkova - sve tri stavljamo na #2AABD6. 94

95 Zatim biramo preko Choose file-a sliku za našu pozadinu. Pretpostavimo da se ona nalazi u folderu Templates_images unutar foldera MojWebSajt. (Ukoliko biramo sliku sa neta onda navodimu URL adresu). Obavezno je štiklirati opciju URL is relative to page location. Bez obzira koje je veličine korišćena slika, ona se razvlači duž cele pozadine sajta. 95

96 Kada smo odabrali sliku, kliknemo na OK. Zatim možemo da kliknemo na ikonicu Save. Sada ćemo korisiti tabelu, da bi smo napravili izgled našeg templejta. Idemo na ikonicu Table sa liniji alatki. Otvara se novi prozor Insert table, i na kartici Quickly izaberemo tabelu 3x1. 96

97 Sada se na našoj stranici pojavljuje nova tabela. Potrebno je podesiti opcije. Kliknite dva puta na tabelu ili je selektujte pa preko ikonice Table na liniji alatki, otvara se novi prozor Table Properties. Na kartici Table, potrebno je postaviti širinu tabele na 700 pixela, ivicu staviti na 0, kao i odvajanje između ćelija i sadržaja. Za poravnanje staviti centralno a za boju pozadine belu boju. Nakon podešavanja opcija vezanih za tabelu, možemo preći na ubacivanje slika u naš templejt. Slike smo unapred pripremili u folderu Templates_images. Kliknite na prvu ćeliju tabele i preko ikonice Image na liniji alatki, ubacićemo sliku za zaglavlje našeg templejta. Otvara se novi prozor Image properties i preko Choose file izaberemo sliku iz lokalnog foldera. Obavezno je štiklirati opciju URL is relative to page location. U polje Tooltip pišemo tekst koji će se pojaviti ako se mišem dođe iznad slike, a polje Alternate text označava tekst koji se pojavljuje za vreme učitavanja slike ili u slučaju nemogućnosti prikazivanja. Kada završimo kliknemo na OK. 97

98 Sačuvajte opet rad. Za sada naš rad izgleda ovako: Nakon zaglavlja, možemo uneti pripremljenu sliku i za podnožje templejta (a to je treća ćelija naše tabele), po već opisanom metodu. Naš templejt sada izgleda ovako. Ne zaboravite često snimiti vaš rad. 98

99 Sada ćemo u srednju ćeliju, koja zadržava svoju belu pozadinu napisati navigacioni tekst, koji će predstavljati naš meni za navigaciju na svim stranicama našeg sajta. Taj meni bi trebalo da sadrži nešto poput: Napisani tekst selektujemo, odaberemo poravnanje u desno(align Right), izmenimo font u Helvetica, Arial, zatim kliknemo na Bold i Italic. A boju mu postavimo na heksadecimalni kod kao i za linkove: #2AABD6. Posle formatiranja, to izgleda ovako: Sada možemo da linkujemo taj meni. Izaberemo reč Home. Izaberite jednu od četiri metoda: o Sa menija Insert > Link o prečicu Ctrl+L o desni klik na reč, i iz menija izaberite Create Link o ikonica Link sa linije alatki Otvara se novi prozor Link Properties. U polje za Link location pišemo: index.html jer uvek je naš homepage imenovan kao index.html. 99

100 Isti postupak ponovimo za Hobi, Fakultet i Galeriju-s tim što ih linkujemo ka hobi.html, fakultet.html i galerija.html respektivno. Kontakt se može vezati ili za kontakt.html ili za elektronsku poštu. Veza sa elektronskom poštom Da bismo omogućili posetiocima da nas kontaktiraju potrebno je jezičak Kontakt povezati sa našom adresom. U meniju selektujemo reč Kontakt Zatim preko menija Insert>Link U novom prozoru u polje unosimo našu adresu sa štikliranjem polja da se rade o adresi. 100

101 Zatim kliknite na OK. Zatim proverite da li je veza uspela - stavite pokazivač miša na link, pojaviće se natipis mailto koji izgleda kao : U našem slučaju Kontakt linkujemo ka kontakt.htm. Naravno, sačuvajte svoj rad. Sada smo dobili linkovani meni na templejtu. Obavezno je sačuvati rad. Da bi videli kako izgleda dosadašnji rad, to možemo učiniti jedino preko taba Preview, pošto se templejt ne može pokrenuti preko browser-a. Sada je konačno završen deo posla oko menija na našem web sajtu i uspostavljanje njegove funkcionalnosti. 101

102 Nakon toga kada dovedemo kursor iza reči Kontakt, pritisnemo Enter i stavimo poravnanje teksta u levo. Pošto ne želimo da naš glavni tekst na stranici bude suviše blizu ivice možemo da insertujemo još jednu tabelu unutar ove koja će imati samo jednu ćeliju. Postupak je isti kao gore. Preko Insert>Table unesemo jednu ćeliju u postojeću srednju ćeliju tabele. Podesimo opcije tabele : Sada kada smo napravili sutrukturu templejta koju će da deli svaka stranica našeg sajta, vreme je da napravimo oblast koja će se menjati od strane do strane i biti jedinstvena za svaku stranicu. Unutar ćelije ukucamo neki tekst. Selektujemo taj tekst, i preko Insert>Templates>Insert editable area. menija idemo na 102

103 Otvara se novi prozor Insert an editable area. U polje Area name unosimo npr text, biramo Block. Kliknemo na OK. Na taj način završili smo izradu templejta za stranice našeg web sajta. On izgleda ovako: 103

104 Sačuvamo rad Izrada stranica za naš web sajt Nakon što smo kreirali templejt za naš web sajt, trebalo bi da kreiramo i web stranice na osnovu tog templejta. Kao što smo videli, naš web templejt sadrži meni koji smo linkovali ka pet html fajlova. Prema tome, potrebno je izraditi pet web stranica u html formatu, pošto naš meni ima pet internih linkova Kreiranje index stranice Idemo na File>New. Otvara se novi prozor Create a new document or template. 104

105 Označimo opciju A new document based on a template iz dela What kind of file do you want to create?. Preko Choose file otvaramo prozor gde u našem folderu MojWebSajt biramo fajl template.mzt. Ukoliko ovaj fajl nije vidljiv potrebno je da u prozoru Choose file u padajućoj listi Files of type izaberemo opciju All files. 105

106 Kod opcije Create in u padajućoj listi može da se izabere ili New Tab ili New window. Ako se izabere New Window otvara se nova prazna strana u novom prozoru kompozera. A ako se izabere New tab otvara se strana u istom prozoru, ali novom tabu. Kada smo izabrali fajl kliknemo na OK. Otvara se nova stranica koja učitava linkovani template. Ona u svom naslovu nosi naziv template pošto još uvek nismo definisali naziv novokreirane stranice. Na ovoj stranici ništa ne može biti promenjeno sem oblasti text koju smo u templejtu označili kao promenljivu. Tokom prvog snimanja strane u KompoZeru, potrebno je pružiti dve informacije: Naslov strane: to je naslov koji se pojavljuje u liniji naslova svakog web browsera. Takođe to je ime koje se pojavljuje prilikom indentifikovanja strane u bookmark-ima ili favorite listama svakog browser-a. Ovaj naziv treba biti kratak ali i sasvim dovoljan da pruži jasno objašnjenje o stranici na koju se odnosi. Ime fajla: u kojem će se stranica sačuvati. 106

107 Sada idemo na ikonicu Save na liniji alatki. Ona otvara novi prozor Save Page As. Potražite folder koji ste kreirali pod nazivom MojWebSajt. U polje File name pišemo index jer je to naša početna stranica. Po default-u, KompoZer će u polje File name da ispiše naziv strane koje ste prethodno odredili. Ovo se ne sme koristiti. U polje File name potrebno je napisati index. (Jer glavna (banner) strana web sajta mora obavezno biti nazvana index ili default. To je strana koja se šalje onda kada neko ne specificira adresu u navigatoru. ) Sada preko Format>Page title and properties se otvara novi prozor Page properties. U polje Title unosimo tekst koji želimo da se pojavi u liniji naslova. U opciji Templates stoji da je ovaj dokument još uvek zakačen za templejt. Tako da nakon promena, treba otkačiti dokument sa templejta. 107

108 Sada se pojavljuje naslov na tabu iznad radne površine onako kako smo ga definisali: Ako preko ikonice Browse pokrenemo ovu stranicu tada će u liniji naslova na samom browseru pisati isto to: Sada možemo da sredimo sam izgled ove početne stranice. Sada je sve stvar kreacije. Na početnoj strani može se staviti sve što ukazuje na vašu ličnost.. Mi ćemo staviti samo neke osnovne detalje radi prezentacije prvenstveno rada u KompoZeru Za naslov možemo staviti tekst Moja prva online prezentacija. Naravno raspored teksta, naslova, podnaslova, slika i svih ostalih objekata da je samo stvar kreacije, potreba Naslov U našem slučaju tekst Moja prva online prezentacija biće naslov. Kucamo ga u promenljivu oblast. Dodeljujemo mu nivo Heading1. Ukoliko kursor nije na kraju novog teksta potrebno ga je tamo dovesti, nije potrebno selektovati ceo tekst, bitan je kursor. Na padajućoj listi stilova izaberite Heading1. 108

109 Izaberite ikonicu za izbor boja sa linije za rad sa tekstom, i odaberite boje. Centrirajte naslov koristeći ikonicu Sačuvajte rad. Umetanje slika Na početnu stranu ubacićemo neku sliku. Poželjno je da ne bude veća od 200x250 pixels. Prvo je potrebno željenu sliku presnimiti u folder Images u okviru foldera našeg projekta MojWebSajt. Kursor dovedite ispod naslova, pritiskajući Enter. Preko menija se ide na Insert> Image. 109

110 Otvara se prozor za ubacivanje slika, kliknite na ikonu fotografiju u folderu iznad navedenom. Kada se izabere slika, prozor Image Properties prikazuje dimenzije slike. Polje Alternate tekst predstavlja tekst koji će se pojaviti ukoliko slika ne može biti prikazana na browser, usled slabe konekcijone veze ili neke druge greške. Polje Tooltip predstavlja tekst koji se javlja kada se mišem stane iznad te slike. Ukoliko su vam dimenzije slike prevelike ili premale postoji jezičak na prozoru koji se zove Dimensions koji poseduje mogućnost da štikliranjem opcije Custom size naknadno promenite veličinu slike. Te promene odnosiće se samo na veličinu prikaza slike u browseru ali ne i na veličinu slike na samom hard disku. kako bi pronašli 110

111 Ispod slike, možemo da stavimo npr datum, ime autora ili slično. Nakon što ispišemo tekst, na isti način kao i kod naslova, dodeljujemo mu format Address. Kada su završene sve izmene, potrebno je stranicu odvojiti od templejta a to se radi preko menija Edit>Detach from Template. Da li je akcija uspešno izvršena proveravamo preko Format>Page Title and Properties. Pod opcijom Templates više ne stoji da je dokument zakačen za templejt. 111

112 Na kraju je obavezno sačuvati rad. Time je završena izrada index.html fajla Kreiranje ostalih stranica Sada je na redu stranica za prezentovanje fakulteta. Ubacićemo sliku i neki tekst vezan za fakultet. Sa zvaničnog sajta pozajmićemo slike i tekst. Naravno sve slike koje se koriste na sajtu trebaju biti sačuvane u folderu Images unutar foldera našeg projekta MojWebSajt. Idemo opet preko File>New, a zatim na isti način ko malopre, izaberemo opciju kreiranja nove stranice bazirane na templejtu. Preko Choose file-a opet biramo naš templejt. 112

113 Kada se otvori nova stranica, idemo na Format>Page Title and Properties, i za naslov stranice kucamo Moj fakultet. Kliknemo na OK. Otvara se prozor Save Page As i stranicu zapamtimo pod imenom fakultet.html u naš folder MojWebSajt (ako se setimo to je jedan od fajlova koje smo hipotetički vezali za naš meni u templejtu). 113

114 Sada smo spremni na unos teksta i sređivanje objekata stranice. Naravno i ovde se može menjati samo deo označen u templejtu kao promenljiv. Za naslov možemo da stavimo Fakultet organizacionih nauka Dodeljujemo mu stil Heading1 i centriramo ga. U naredni red prelazi se pritiskanjem Enter. Ubacivanje slike 114

115 U liniji alatki izaberemo ikonicu slike na web strani. Otvara se novi prozor: koja omogućuje ubacivanje i promene Da bi pronašli sliku koju želimo da ubacimo biramo ikonicu U polje Alternative text kucamo kratak tekst koji se pojavljuje u browseru na mestu slike ukoliko dođe do greške ili nemogućnosti učitavanja (download-ovanja) slike. U polje Tooltip pišemo tekst koji se aktivira pokazivačem miša. Sliku ćemo postaviti u levi deo strane, kako bi se sa njene desne strane nalazio tekst vezan za Fakultet organizacionih nauka. Naravno zbog toga potrebno je odrediti ponašanje i prikaz slike u odnosu na tekst. Zato otvaramo u prozoru Image properties jezičak Appearance. 115

116 Naznačimo levo i desno razdvajanje po 15 pixela od slike, i od 10 pixela od vrha i dna. Okvir (Border) nećemo naznačiti. Potrebno je još naznačiti da će tekst biti raspoređen desno od slike( Wrap to the right ). Zatim ćemo koristeći karticu Link preko slike da ostvarimo vezu sa drugim sajtom. Da bi ostvarili vezu sa drugim sajtom, neophodno je da upišemo kompletnu url adresu. Potražite potpunu URL adresu web sajta koji se želi linkovati (u našem slučaju to je ). 116

117 Nakon izmene svih delova koji se žele promeniti, ide se na Edit>Detach from template. Po završetku rada, obavezno sačuvajte izmene. Nakon toga, ubacite neki tekst vezan za temu. I jednostavna web strana je već gotova Prikazivanje u browser-u Kada se jednom napravi web strana, nije s goreg s vremena na vreme prilikom izrade pokrenuti tu stranu u browser-u kako bi se proverilo kako ta strana zaista izgleda. Sem pregleda strane u Normal i Preview tabu same KompoZer aplikacije, da bismo videli šta smo odradili, treba pokreniti ikonicu Browse, koja pokreće default web browser sa vašeg računara. U browser-u klikajući na jezičke menija na početnoj strani, krećemo se kroz sajt. Na taj način može se proveriti da li linkovi funkcionišu Složenija struktura teksta i slika Sada ćemo se pozabaviti nešto složenijom struktorom teksta i slike. Taj deo prikazaćemo kroz postavljanje tri celine na jednu stranu koje će predstavljati npr naša tri hobija. Prvo, bitno je osmisliti strukturu tih objekata na strani. Pretpostavimo da ćemo staviti naslov i još tri podnaslova. Potrebno je kreirati dokument hobi.html. Idemo opet preko File>New, a zatim na isti način ko malopre, izaberemo opciju kreiranja nove stranice bazirane na templejtu. Preko Choose file-a opet biramo naš templejt. 117

118 Kada se otvori nova stranica, idemo na Format>Page Title and Properties, i za naslov stranice kucamo Moj Hobi. Kliknemo na OK. A potom na Save ikonicu na liniji alatki. Otvara se prozor Save Page As i stranicu zapamtimo pod imenom hobi.html u naš folder MojWebSajt(ako se setimo to je jedan od fajlova koje smo hipotetički vezali za naš meni u templejtu). 118

119 Sada smo spremni na unos teksta i sređivanje objekata stranice. Naravno i ovde se može menjati samo deo označen u templejtu kao promenljiv. Kao naslov stavite npr Moj Hobi i dodelite mu Heading1 stil. Ispod glavnog naslova, napišite naslov za prvi hobi i stavite ga kao Heading2 a ispod toga i par rečenica o tom hobiju. Na isti način dodajte jos dva naslova i ispod svakog od njih po par rečenica o istom. Svakom od naslova dodeljujete Heading2. Kada smo odradili deo vezan za sam tekst potrebno je za svaki od hobija, da ubacimo i odgovarajuće slike Dobre slike možete potražiti na internetu. Svaku od slika potrebno je sačuvati u folderu MojWebSajt/Images Svaku od slika insertujte kraj teksta na koji se odnosi prema već gore navedenom postupku. Naravno podesite i položaj slike u odnosu na tekst i same dimenizije slike. Kada ste razmestili po stranici polažaj svih objekata, sačuvajte vaš rad i pokrenute u browseru da biste videli šta ste do sada uradili. Ne sme se zaboraviti da na kraju rada, preko opcije Edit>Detach from template odvojite stranicu od templejta. 119

120 Izrada galerije Galeriju možemo da izradimo korišćenjem tabela. Kao primer rada sa tabelama u programu KompoZer, na strani galerija ubacićemo jednu tabelu sa više redova i kolona, i razmotriti opcije vezane za rad sa tabelama. Potrebno je kreirati dokument galerija.html. Preko File>New otvara se novi prozor Create a new document or template. Tu izaberemo opciju kreiranja nove stranice bazirane na templejtu A new document based on a template. Preko Choose file-a opet biramo naš templejt. Kliknemo na Create. Kada se otvori nova stranica, idemo na Format>Page Title and Properties, i za naslov stranice kucamo Moja Galerija. 120

121 Kliknemo na OK. A potom na Save ikonicu na liniji alatki. Otvara se prozor Save Page As i stranicu zapamtimo pod imenom galerija.html u naš folder MojWebSajt(setimo se da je to jedan od fajlova koje smo hipotetički vezali za naš meni u templejtu). Sada možemo da ubacujemo slike i tekst na stranicu. 121

122 Naslov može da bude Moja galerija. Dodelite mu stil Heading1, i centrirajte ga koristeći ikonu. Izaberite odgovarajuću pozadinu i boju, font, veličinu, stil itd. Pređite u sledeći red pritiskom na Enter gde ćemo umetnuti tabelu koja će sadržati slike naše galerije. Tabela Da bismo u već postojeću tabelu umetnuli novu, ugnježdenu tabelu ide se preko Insert>Table. U prozoru Insert table koji se pojavljuje podešavaju se osnovne opcije vezane za same tabele. Jezičak Quickly vam omogućuje brzo definisanje i insertovanje tabele, bez nekih finijih podešavanja. Jezičak Precisely omogućuje finija podešavanja. Izaberite jezičak Precisely. Za početak možemo da ubacimo tabelu sa 4 reda i 2 kolone. Za širinu možemo da odaberemo da pokriva 90% ćelije. A za okvir stavimo da bude 0. Kliknite potom na Advanced edit. Otvara se novi prozor. Za Polje Attribute u padajućoj listi izaberite svojstvo tabele align, a zatim sa desne strane u padajućoj listi izaberite Centar (da bi postigli centralno poravnanje tabele). Kliknite na OK. 122

123 Dobija se centrirana tabela, sa 4 reda i 2 kolone. Tekst u tabelu i njegovo sređivanje radi se na isti način kao i da sada. U svaku ćeliju ubacujemo sliku i ispod nje naziv te slike. Kliknemo na ćeliju, zatim na Insert>Image. 123

124 U prozoru Image Properties, preko ikonice tražimo sliku u folderu Images gde smo prethodno smestili sve naše slike za galeriju. Odgovarajućim tekstom popunjavamo polja Tooltip i Alternate text. Na kartici Dimensions podešavamo veličinu slike na stranici. Moramo imati u vidu da se ovde podešava samo prikazna veličina slike, a da zapravo slika ostaje u svojoj originalnoj veličini, jer browser samo linkuje sliku. Tako da kada posetilac sajta bude želeo recimo da sačuva sliku u punoj veličini biće dovoljan samo desni klik i opcija Save image as. 124

125 Kada završimo sa podešavanjem slike, kliknemo na OK. Potom odmah pritisnemo Enter, i pišemo odgovarajući tekst ispod slike, koji na regularan način možemo i da formatiramo. Na isti način unosimo i ostale slike i tekst u galeriju. Kada dođemo do zadnjeg reda u tabeli a ako nam je potreban jos jedan, pritiskajući taster Tab sa tastature dobija se još jedan red u toj tabeli. U poslednji red unosimo upustvo za skidanje slika. Poslednje što treba da uradimo je da i u ovom dokumentu odvojimo web stranicu od njenog templejta preko opcije Edit>Detach from template. Kada smo i ovo uradili, ostaje nam još samo da sačuvamo stranicu Izrada kontakt formulara Idemo na File>New. Otvara se novi prozor Create a new document or template. 125

126 Označimo opciju A new document based on a template. Preko Choose file otvaramo prozor gde u našem folderu MojWebSajt biramo fajl template.mzt. Kada smo izabrali fajl kliknemo na OK. Otvara se nova stranica koja učitava linkovani template. 126

127 Sada idemo na ikonicu Save na liniji alatki. Ona otvara novi prozor Save Page As. Potražite folder koji ste kreirali pod nazivom MojWebSajt. U polje File name pišemo kontakt jer je to naša nova stranica. Sada preko Format>Page title and properties se otvara novi prozor Page properties. U polje Title unosimo tekst koji želimo da se pojavi u liniji naslova. 127

128 Za naslov možemo da stavimo Kontakt formular. Izaberite ikonicu za izbor boja sa linije za rad sa tekstom, i odaberite boje. Centrirajte naslov koristeći ikonicu Sačuvajte rad. Formu i kontrole unutar nje postavićemo kao prema odeljku 8.1. i 8.2. Od kontrola možemo da stavimo dva tekst polja (jedan za ime i prezime, drugi za adresu), jedno polje Text area za upis komentara posetilaca, jedan check box za slanje obaveštenja i jednu anketu preko radio dugmadi. Na kraju nam trebaju dugmad za poništavanje i potvrđivanje. Pošto ovde nije obrađen server, dugme Pošalji možemo da linkujemo ka nekoj stranici npr ka index.html. Time je završen naš kontakt formular. Posle rada obavezno je sačuvati dokument. 128

129 Sa ovim završen ja naš prvi web sajt. Sada preko browser-a pokrenite sajt i proverite da li sve izgleda i radi onako kako ste vi zamislili Prikaz u Site Manageru Ukoliko nije vidljiv, aktivirajte Site Manager korišćenjem tastera F9. Kliknite na dugme Edit sites u okviru Site Managera. Otvara se novi dijalog. 1. U polju Site name upišite Moj web sajt. 2. Kliknite na dugme Select directory i nađite folder koji ste kreirali za svoj prvi web sajt MojWebSajt. 129

130 3. Kliknite na dugme New site. Kreirani sajt se pojavljuje u prozoru Publishing Sites. Kliknite na OK dugme. pojavljuje vaš projekat. Sada se u Site Manager-u 130

Biznis scenario: sekcije pk * id_sekcije * naziv. projekti pk * id_projekta * naziv ꓳ profesor fk * id_sekcije

Biznis scenario: sekcije pk * id_sekcije * naziv. projekti pk * id_projekta * naziv ꓳ profesor fk * id_sekcije Biznis scenario: U školi postoje četiri sekcije sportska, dramska, likovna i novinarska. Svaka sekcija ima nekoliko aktuelnih projekata. Likovna ima četiri projekta. Za projekte Pikaso, Rubens i Rembrant

More information

Podešavanje za eduroam ios

Podešavanje za eduroam ios Copyright by AMRES Ovo uputstvo se odnosi na Apple mobilne uređaje: ipad, iphone, ipod Touch. Konfiguracija podrazumeva podešavanja koja se vrše na računaru i podešavanja na mobilnom uređaju. Podešavanja

More information

Eduroam O Eduroam servisu edu roam Uputstvo za podešavanje Eduroam konekcije NAPOMENA: Microsoft Windows XP Change advanced settings

Eduroam O Eduroam servisu edu roam Uputstvo za podešavanje Eduroam konekcije NAPOMENA: Microsoft Windows XP Change advanced settings Eduroam O Eduroam servisu Eduroam - educational roaming je besplatan servis za pristup Internetu. Svojim korisnicima omogućava bezbedan, brz i jednostavan pristup Internetu širom sveta, bez potrebe za

More information

IZDAVANJE SERTIFIKATA NA WINDOWS 10 PLATFORMI

IZDAVANJE SERTIFIKATA NA WINDOWS 10 PLATFORMI IZDAVANJE SERTIFIKATA NA WINDOWS 10 PLATFORMI Za pomoć oko izdavanja sertifikata na Windows 10 operativnom sistemu možete se obratiti na e-mejl adresu esupport@eurobank.rs ili pozivom na telefonski broj

More information

NIS PETROL. Uputstvo za deaktiviranje/aktiviranje stranice Veleprodajnog cenovnika na sajtu NIS Petrol-a

NIS PETROL. Uputstvo za deaktiviranje/aktiviranje stranice Veleprodajnog cenovnika na sajtu NIS Petrol-a NIS PETROL Uputstvo za deaktiviranje/aktiviranje stranice Veleprodajnog cenovnika na sajtu NIS Petrol-a Beograd, 2018. Copyright Belit Sadržaj Disable... 2 Komentar na PHP kod... 4 Prava pristupa... 6

More information

Otpremanje video snimka na YouTube

Otpremanje video snimka na YouTube Otpremanje video snimka na YouTube Korak br. 1 priprema snimka za otpremanje Da biste mogli da otpremite video snimak na YouTube, potrebno je da imate kreiran nalog na gmailu i da video snimak bude u nekom

More information

GUI Layout Manager-i. Bojan Tomić Branislav Vidojević

GUI Layout Manager-i. Bojan Tomić Branislav Vidojević GUI Layout Manager-i Bojan Tomić Branislav Vidojević Layout Manager-i ContentPane Centralni deo prozora Na njega se dodaju ostale komponente (dugmići, polja za unos...) To je objekat klase javax.swing.jpanel

More information

SIMPLE PAST TENSE (prosto prošlo vreme) Građenje prostog prošlog vremena zavisi od toga da li je glagol koji ga gradi pravilan ili nepravilan.

SIMPLE PAST TENSE (prosto prošlo vreme) Građenje prostog prošlog vremena zavisi od toga da li je glagol koji ga gradi pravilan ili nepravilan. SIMPLE PAST TENSE (prosto prošlo vreme) Građenje prostog prošlog vremena zavisi od toga da li je glagol koji ga gradi pravilan ili nepravilan. 1) Kod pravilnih glagola, prosto prošlo vreme se gradi tako

More information

Tutorijal za Štefice za upload slika na forum.

Tutorijal za Štefice za upload slika na forum. Tutorijal za Štefice za upload slika na forum. Postoje dvije jednostavne metode za upload slika na forum. Prva metoda: Otvoriti nova tema ili odgovori ili citiraj već prema želji. U donjem dijelu obrasca

More information

- Vežba 1 (dodatan materijal) - Kreiranje Web šablona (template) pomoću softvera Adobe Photoshop CS

- Vežba 1 (dodatan materijal) - Kreiranje Web šablona (template) pomoću softvera Adobe Photoshop CS - Vežba 1 (dodatan materijal) - Kreiranje Web šablona (template) pomoću softvera Adobe Photoshop CS 1. Pokrenite Adobe Photoshop CS i otvorite novi dokument sa komandom File / New 2. Otvoriće se dijalog

More information

SAS On Demand. Video: Upute za registraciju:

SAS On Demand. Video:  Upute za registraciju: SAS On Demand Video: http://www.sas.com/apps/webnet/video-sharing.html?bcid=3794695462001 Upute za registraciju: 1. Registracija na stranici: https://odamid.oda.sas.com/sasodaregistration/index.html U

More information

Pravljenje Screenshota. 1. Korak

Pravljenje Screenshota. 1. Korak Prvo i osnovno, da biste uspesno odradili ovaj tutorijal, morate imati instaliran GOM Player. Instalacija je vrlo jednostavna, i ovaj player u sebi sadrzi sve neophodne kodeke za pustanje video zapisa,

More information

Babylon - instalacija,aktivacija i rad sa njim

Babylon - instalacija,aktivacija i rad sa njim Babylon - instalacija,aktivacija i rad sa njim Babilon je vodeći svetski prevodilac brzog online i offline rečnika sa prevođenjem u preko 75 jezika jednim jednostavnim klikom misa i koriste ga miloni privatnih

More information

1. Instalacija programske podrške

1. Instalacija programske podrške U ovom dokumentu opisana je instalacija PBZ USB PKI uređaja na računala korisnika PBZCOM@NET internetskog bankarstva. Uputa je podijeljena na sljedeće cjeline: 1. Instalacija programske podrške 2. Promjena

More information

3D GRAFIKA I ANIMACIJA

3D GRAFIKA I ANIMACIJA 1 3D GRAFIKA I ANIMACIJA Uvod u Flash CS3 Šta će se raditi? 2 Upoznavanje interfejsa Osnovne osobine Definisanje osnovnih entiteta Rad sa bojama Rad sa linijama Definisanje i podešavanje ispuna Pregled

More information

za STB GO4TV in alliance with GSS media

za STB GO4TV in alliance with GSS media za STB Dugme za uključivanje i isključivanje STB uređaja Browser Glavni meni Osnovni meni Vrsta liste kanala / omiljeni kanali / kraći meni / organizacija kanala / ponovno pokretanje uređaja / ponovno

More information

UPUTSTVO. za ruter TP-LINK TD-854W/ TD-W8951NB

UPUTSTVO. za ruter TP-LINK TD-854W/ TD-W8951NB UPUTSTVO za ruter TP-LINK TD-854W/ TD-W8951NB Uputstvo za ruter TP-Link TD-854W / TD-W8951NB 2 PRAVILNO POVEZIVANJE ADSL RUTERA...4 PODEŠAVANJE KONEKCIJE PREKO MREŽNE KARTE ETHERNET-a...5 PODEŠAVANJE INTERNET

More information

Pokretanje (startovanje) programa Microsoft Word

Pokretanje (startovanje) programa Microsoft Word Šta je Microsoft Word? Microsoft Word je korisnički (aplikativni) program - tekst procesor, za unos, promenu, uređenje, skladištenje (čuvanje, arhiviranje) i štampanje dokumenta. Word je sastavni deo programskog

More information

Uvod u relacione baze podataka

Uvod u relacione baze podataka Uvod u relacione baze podataka 25. novembar 2011. godine 7. čas SQL skalarne funkcije, operatori ANY (SOME) i ALL 1. Za svakog studenta izdvojiti ime i prezime i broj različitih ispita koje je pao (ako

More information

INSTALIRANJE SOFTVERSKOG SISTEMA SURVEY

INSTALIRANJE SOFTVERSKOG SISTEMA SURVEY INSTALIRANJE SOFTVERSKOG SISTEMA SURVEY Softverski sistem Survey za geodeziju, digitalnu topografiju i projektovanje u niskogradnji instalira se na sledeći način: 1. Instalirati grafičko okruženje pod

More information

Ulazne promenljive se nazivaju argumenti ili fiktivni parametri. Potprogram se poziva u okviru programa, kada se pri pozivu navode stvarni parametri.

Ulazne promenljive se nazivaju argumenti ili fiktivni parametri. Potprogram se poziva u okviru programa, kada se pri pozivu navode stvarni parametri. Potprogrami su delovi programa. Često se delovi koda ponavljaju u okviru nekog programa. Logično je da se ta grupa komandi izdvoji u potprogram, i da se po želji poziva u okviru programa tamo gde je potrebno.

More information

KAPACITET USB GB. Laserska gravura. po jednoj strani. Digitalna štampa, pun kolor, po jednoj strani USB GB 8 GB 16 GB.

KAPACITET USB GB. Laserska gravura. po jednoj strani. Digitalna štampa, pun kolor, po jednoj strani USB GB 8 GB 16 GB. 9.72 8.24 6.75 6.55 6.13 po 9.30 7.89 5.86 10.48 8.89 7.30 7.06 6.61 11.51 9.75 8.00 7.75 7.25 po 0.38 10.21 8.66 7.11 6.89 6.44 11.40 9.66 9.73 7.69 7.19 12.43 1 8.38 7.83 po 0.55 0.48 0.37 11.76 9.98

More information

AMRES eduroam update, CAT alat za kreiranje instalera za korisničke uređaje. Marko Eremija Sastanak administratora, Beograd,

AMRES eduroam update, CAT alat za kreiranje instalera za korisničke uređaje. Marko Eremija Sastanak administratora, Beograd, AMRES eduroam update, CAT alat za kreiranje instalera za korisničke uređaje Marko Eremija Sastanak administratora, Beograd, 12.12.2013. Sadržaj eduroam - uvod AMRES eduroam statistika Novine u okviru eduroam

More information

Kako instalirati Apache/PHP/MySQL na lokalnom kompjuteru pod Windowsima

Kako instalirati Apache/PHP/MySQL na lokalnom kompjuteru pod Windowsima Kako instalirati Apache/PHP/MySQL na lokalnom kompjuteru pod Windowsima 1. Uvod 2. Preuzimanje programa i stvaranje mapa 3. Instalacija Apachea 4. Konfiguracija Apachea 5. Instalacija PHP-a 6. Konfiguracija

More information

Desna strana menija sadrži spisak nedavno otvaranih dokumenata.

Desna strana menija sadrži spisak nedavno otvaranih dokumenata. Radno okruženje Informatička pismenost Obrada teksta Ikone za brz pristup alatima Dugme Office Radna površina Traka sa alatima Statusna linija Dugme Office Desna strana menija sadrži spisak nedavno otvaranih

More information

Poglavlje 1 POČETAK RADA SA MICROSOFT OFFICE-OM 2016

Poglavlje 1 POČETAK RADA SA MICROSOFT OFFICE-OM 2016 Poglavlje 1 POČETAK RADA SA MICROSOFT OFFICE-OM 2016 Premda je Microsoft Office 2016 jednostavan i lak za upotrebu, vredi uložiti nekoliko minuta na istraživanje njegovog interfejsa i njegovih alata za

More information

Jelena Radić, Bane Popadić, Marko Gecić, Vladimir Milosavljević, Vladimir Popadić, Vladimir Rajs, Jovan Bajic Softverski praktikum

Jelena Radić, Bane Popadić, Marko Gecić, Vladimir Milosavljević, Vladimir Popadić, Vladimir Rajs, Jovan Bajic Softverski praktikum Jelena Radić, Bane Popadić, Marko Gecić, Vladimir Milosavljević, Vladimir Popadić, Vladimir Rajs, Jovan Bajic Softverski praktikum FTN Izdavaštvo, Novi Sad, 2016. Sadržaj 1 WINDOWS 7-OSNOVNI POJMOVI...

More information

Ikone za brz pristup alatima. Slovne oznake kolona. ime. Traka sa alatima. Dugme Office Brojčane oznake redova

Ikone za brz pristup alatima. Slovne oznake kolona. ime. Traka sa alatima. Dugme Office Brojčane oznake redova Radno okruženje Informatička pismenost Tabelarni proračuni Polje za ime Dugme Office Brojčane oznake redova Polje za formule Ikone za brz pristup alatima Kartice (jezičci) radnih listova Traka sa alatima

More information

mdita Editor - Korisničko uputstvo -

mdita Editor - Korisničko uputstvo - mdita Editor - Korisničko uputstvo - Sadržaj 1. Minimalna specifikacija računara... 3 2. Uputstvo za instalaciju aplikacije... 3 3. Korisničko uputstvo... 11 3.1 Odabir File opcije iz menija... 11 3.2

More information

4.1 Korišćenje aplikacije Ćelije Rukovanje radnim listovima... 32

4.1 Korišćenje aplikacije Ćelije Rukovanje radnim listovima... 32 S A D R Ž A J 4 Tabelarni proračuni... 4 4.1 Korišćenje aplikacije... 4 4.1.1 Rad sa radnim sveskama... 4 4.1.1.1 Pokretanje i zatvaranje aplikacije za tabelarne proračune. Otvaranje i zatvaranje radnih

More information

Upute za korištenje makronaredbi gml2dwg i gml2dgn

Upute za korištenje makronaredbi gml2dwg i gml2dgn SVEUČILIŠTE U ZAGREBU - GEODETSKI FAKULTET UNIVERSITY OF ZAGREB - FACULTY OF GEODESY Zavod za primijenjenu geodeziju; Katedra za upravljanje prostornim informacijama Institute of Applied Geodesy; Chair

More information

Direktan link ka kursu:

Direktan link ka kursu: Alat Alice može da se preuzme sa sledeće adrese: www.alice.org Kratka video uputstva posvećena alatu Alice: https://youtu.be/eq120m-_4ua https://youtu.be/tkbucu71lfk Kurs (engleski) posvećen uvodu u Java

More information

CJENIK APLIKACIJE CERAMIC PRO PROIZVODA STAKLO PLASTIKA AUTO LAK KOŽA I TEKSTIL ALU FELGE SVJETLA

CJENIK APLIKACIJE CERAMIC PRO PROIZVODA STAKLO PLASTIKA AUTO LAK KOŽA I TEKSTIL ALU FELGE SVJETLA KOŽA I TEKSTIL ALU FELGE CJENIK APLIKACIJE CERAMIC PRO PROIZVODA Radovi prije aplikacije: Prije nanošenja Ceramic Pro premaza površina vozila na koju se nanosi mora bi dovedena u korektno stanje. Proces

More information

KONFIGURACIJA MODEMA. ZyXEL Prestige 660RU

KONFIGURACIJA MODEMA. ZyXEL Prestige 660RU KONFIGURACIJA MODEMA ZyXEL Prestige 660RU Sadržaj Funkcionalnost lampica... 3 Priključci na stražnjoj strani modema... 4 Proces konfiguracije... 5 Vraćanje modema na tvorničke postavke... 5 Konfiguracija

More information

Windows Easy Transfer

Windows Easy Transfer čet, 2014-04-17 12:21 - Goran Šljivić U članku o skorom isteku Windows XP podrške [1] koja prestaje 8. travnja 2014. spomenuli smo PCmover Express i PCmover Professional kao rješenja za preseljenje korisničkih

More information

KatzeView Uputstvo. verzija Novi Sad Josifa Marinkovića 44. Tel: +381 (0) Fax: +381 (0) Mob: +381 (0)

KatzeView Uputstvo. verzija Novi Sad Josifa Marinkovića 44. Tel: +381 (0) Fax: +381 (0) Mob: +381 (0) KatzeView Uputstvo verzija 3.2.2 21000 Novi Sad Josifa Marinkovića 44 Tel: +381 (0)21 443-265 Fax: +381 (0)21 443-516 Mob: +381 (0)63 513-741 http://www.cardware.co.yu info@cardware.co.yu Sadržaj: 1 Sistemski

More information

MRS MRSLab09 Metodologija Razvoja Softvera Vežba 09

MRS MRSLab09 Metodologija Razvoja Softvera Vežba 09 MRS MRSLab09 Metodologija Razvoja Softvera Vežba 09 LAB 09 Fizički model podatka 1. Fizički model podataka Fizički model podataka omogućava da se definiše struktura baze podataka sa stanovišta fizičke

More information

Da bi se napravio izvještaj u Accessu potrebno je na izborniku Create odabrati karticu naredbi Reports.

Da bi se napravio izvještaj u Accessu potrebno je na izborniku Create odabrati karticu naredbi Reports. IZVJEŠTAJI U MICROSOFT ACCESS-u (eng. reports) su dijelovi baze podataka koji omogućavaju definiranje i opisivanje načina ispisa podataka iz baze podataka na papir (ili PDF dokument). Način izrade identičan

More information

Primer izrade dinamičkog sajta

Primer izrade dinamičkog sajta Primer izrade dinamičkog sajta U ovom odeljku opisademo postupak izrade jednostavnog dinamičkog sajta elektronske prodavnice. Struktura sajta Sajt se sastoji iz četiri celine. Prvi deo, početna strana,

More information

Primer-1 Nacrtati deo lanca.

Primer-1 Nacrtati deo lanca. Primer-1 Nacrtati deo lanca. 1. Nacrtati krug sa Ellipse alatkom i sa CTRL tasterom. 2. Napraviti kopiju kruga unutar glavnog kruga (desni klik za kopiju). 3. Selektovati oba kruga pa onda ih kombinovati

More information

OSNOVI PRIMENE RAČUNARA PROGRAM NASTAVE U LETNJEM SEMESTRU

OSNOVI PRIMENE RAČUNARA PROGRAM NASTAVE U LETNJEM SEMESTRU 1. 2. 27.02. (pon) 28.02. (uto) 01.03. (sre) 02.03. (čet) 03.03. (pet) 06.03. (pon) 07.03. (uto) 08.03. (sre) 09.03. (čet) 10.03. (pet) OSNOVI PRIMENE RAČUNARA PROGRAM NASTAVE U LETNJEM SEMESTRU 2016-17.

More information

- Vežba 2 - OPTIMIZACIJA GRAFIKE ZA WEB UPOTREBA ALATKE SLICE TOOL IZRADA WEB GALERIJE

- Vežba 2 - OPTIMIZACIJA GRAFIKE ZA WEB UPOTREBA ALATKE SLICE TOOL IZRADA WEB GALERIJE - Vežba 2 - OPTIMIZACIJA GRAFIKE ZA WEB UPOTREBA ALATKE SLICE TOOL IZRADA WEB GALERIJE OPTIMIZACIJA GRAFIKE ZA WEB Upotreba slika za dizajn web sajta je uobičajena praksa. Pomoću slika definišemo izgled

More information

MICROSOFT WORD. Word pokrećete iz START - PROGRAMS menija ili klikom na prečicu na desktopu. Ruler / Lenjir. Tekstualni kursor.

MICROSOFT WORD. Word pokrećete iz START - PROGRAMS menija ili klikom na prečicu na desktopu. Ruler / Lenjir. Tekstualni kursor. MICROSOFT WORD WORD je programski proizvod iz kategorije PROCESORA TEKSTA. To znači da je namijenjen obradi raznovrsnih tekstova, publikacija, obrazaca i sl. Dolazi u Microsoft Office paketu. Word pokrećete

More information

PowerPoint deo Umetanje oblika (shapes)

PowerPoint deo Umetanje oblika (shapes) PowerPoint 2010 2. deo Umetanje oblika (shapes) Vrši se preko Insert menija: Insert Illustrations Shapes. Bira se jedan od ponuđenih oblika, kliknemo na mesto gde želimo da ga stavimo i vučemo dok se ne

More information

Gimnazija u Kuršumliji. Maturski rad iz Računarstva i informatike. МS FrontPage. Kuršumlija, Мај 2011.

Gimnazija u Kuršumliji. Maturski rad iz Računarstva i informatike. МS FrontPage. Kuršumlija, Мај 2011. Gimnazija u Kuršumliji Maturski rad iz Računarstva i informatike МS FrontPage Mentor: Milomir Ilić Učenik: Ivona Jovanović Kuršumlija, Мај 2011. Sadržaj Sadržaj... - 2-1. Uvod... - 3-2. Struktura sajta

More information

CJENOVNIK KABLOVSKA TV DIGITALNA TV INTERNET USLUGE

CJENOVNIK KABLOVSKA TV DIGITALNA TV INTERNET USLUGE CJENOVNIK KABLOVSKA TV Za zasnivanje pretplatničkog odnosa za korištenje usluga kablovske televizije potrebno je da je tehnički izvodljivo (mogude) priključenje na mrežu Kablovskih televizija HS i HKBnet

More information

OSNOVI PRIMENE RAČUNARA RASPORED U LETNJEM SEMESTRU Nedelja Datum Tema Prvi čas - Uvod

OSNOVI PRIMENE RAČUNARA RASPORED U LETNJEM SEMESTRU Nedelja Datum Tema Prvi čas - Uvod OSNOVI PRIMENE RAČUNARA RASPORED U LETNJEM SEMESTRU 2014-2015. Nedelja Datum Tema Prvi čas - Uvod 1. 2. 02.03. (pon) 03.03. (uto) 04.03. (sre) 05.03. (čet) 06.03. (pet) 09.03. (pon) 10.03. (uto) 11.03.

More information

Univerzitet u Nišu Građevinsko-arhitektonski fakultet. Informatika 1. Word. Milica Ćirić

Univerzitet u Nišu Građevinsko-arhitektonski fakultet. Informatika 1. Word. Milica Ćirić Univerzitet u Nišu Građevinsko-arhitektonski fakultet Informatika 1 Word Milica Ćirić Obrada teksta Većina ljudi koji svakodnevno koriste računar koristi veštine za obradu teksta. Ove veštine nam omogućavaju

More information

Tema 2: Uvod u sisteme za podršku odlučivanju (VEŽBE)

Tema 2: Uvod u sisteme za podršku odlučivanju (VEŽBE) Tema 2: Uvod u sisteme za podršku odlučivanju (VEŽBE) SISTEMI ZA PODRŠKU ODLUČIVANJU dr Vladislav Miškovic vmiskovic@singidunum.ac.rs Fakultet za računarstvo i informatiku 2013/2014 Tema 2: Uvod u sisteme

More information

Struktura indeksa: B-stablo. ls/swd/btree/btree.html

Struktura indeksa: B-stablo.   ls/swd/btree/btree.html Struktura indeksa: B-stablo http://cis.stvincent.edu/html/tutoria ls/swd/btree/btree.html Uvod ISAM (Index-Sequential Access Method, IBM sredina 60-tih godina 20. veka) Nedostaci: sekvencijalno pretraživanje

More information

Microsoft Excel 2010 PRVI DEO

Microsoft Excel 2010 PRVI DEO Nenad Šljivić, M.Sc. Microsoft Certified Trainer MCP, MCITP, MCTS, MCSA, MCSE Microsoft Excel 2010 PRVI DEO Opis Excel prozora Excel 2010 možete pokrenuti preko Start menija. Levim tasterom miša kliknite

More information

P R O J E K T N I R A D

P R O J E K T N I R A D Elektrotehnički fakultet Banja Luka P R O J E K T N I R A D iz predmeta: M U L T I M E D I J A L N I S I S T E M I zadatak: Virtuelna multimedijalna biblioteka Studenti: Vladimir Javorina, 80/02 Milan

More information

Port Community System

Port Community System Port Community System Konferencija o jedinstvenom pomorskom sučelju i digitalizaciji u pomorskom prometu 17. Siječanj 2018. godine, Zagreb Darko Plećaš Voditelj Odsjeka IS-a 1 Sadržaj Razvoj lokalnog PCS

More information

Mindomo online aplikacija za izradu umnih mapa

Mindomo online aplikacija za izradu umnih mapa Mindomo online aplikacija za izradu umnih mapa Mindomo je online aplikacija za izradu umnih mapa (vrsta dijagrama specifične forme koji prikazuje ideje ili razmišljanja na svojevrstan način) koja omogućuje

More information

JEDINSTVENI PORTAL POREZNE UPRAVE. Priručnik za instalaciju Google Chrome dodatka. (Opera preglednik)

JEDINSTVENI PORTAL POREZNE UPRAVE. Priručnik za instalaciju Google Chrome dodatka. (Opera preglednik) JEDINSTVENI PORTAL POREZNE UPRAVE Priručnik za instalaciju Google Chrome dodatka (Opera preglednik) V1 OPERA PREGLEDNIK Opera preglednik s verzijom 32 na dalje ima tehnološke promjene zbog kojih nije moguće

More information

2. Kreiranje nove baze podataka

2. Kreiranje nove baze podataka 2. Kreiranje nove baze podataka Stvaranje strukture za bazu podataka je lako. Međutim, prazna baza nije ništa korisnija od praznog dokumenta u Microsoft Word-u ili praznog radog lista Microsoft Excel-a.

More information

Sadržaj. WORDPRESS OSNOVE e-book v 1.2

Sadržaj. WORDPRESS OSNOVE e-book v 1.2 Sadržaj Uvodna reč... 3 Instalacija WordPress-a na online server... 3 Pristup admin panelu sajta... 5 Unos članaka... 8 Unos fotografija i multimedije... 10 Ažuriranje stranica... 11 Komentari... 12 Instalacija

More information

Klasterizacija. NIKOLA MILIKIĆ URL:

Klasterizacija. NIKOLA MILIKIĆ   URL: Klasterizacija NIKOLA MILIKIĆ EMAIL: nikola.milikic@fon.bg.ac.rs URL: http://nikola.milikic.info Klasterizacija Klasterizacija (eng. Clustering) spada u grupu tehnika nenadgledanog učenja i omogućava grupisanje

More information

16 IZRADA WEB STRANICA

16 IZRADA WEB STRANICA 16 IZRADA WEB STRANICA Kako Internet kao mreža postoji već tridesetak godina tek je sa pojavom World Wide Weba Internet postao ono što je danas. Ono što je Internetu na njegovim počecima nedostajalo bila

More information

KORISNIČKO UPUTSTVO ZA SVR MANAGER SAMSUNG

KORISNIČKO UPUTSTVO ZA SVR MANAGER SAMSUNG KORISNIČKO UPUTSTVO ZA SVR MANAGER SAMSUNG UVOD SVR Manager je softver dizajniran za upravljanje samsungovim digitalnim video rekorderom (DVR) oznake SVR-1630. Ovaj paket aplikacija se sastoji od tri nezavisna

More information

TRAJANJE AKCIJE ILI PRETHODNOG ISTEKA ZALIHA ZELENI ALAT

TRAJANJE AKCIJE ILI PRETHODNOG ISTEKA ZALIHA ZELENI ALAT TRAJANJE AKCIJE 16.01.2019-28.02.2019 ILI PRETHODNOG ISTEKA ZALIHA ZELENI ALAT Akcija sa poklonima Digitally signed by pki, pki, BOSCH, EMEA, BOSCH, EMEA, R, A, radivoje.stevanovic R, A, 2019.01.15 11:41:02

More information

Office 365, upute za korištenje elektroničke pošte

Office 365, upute za korištenje elektroničke pošte Office 365, upute za korištenje elektroničke pošte Naša ustanova koristi uslugu elektroničke pošte u oblaku, u sklopu usluge Office 365. To znači da elektronička pošta više nije pohranjena na našem serveru

More information

ENR 1.4 OPIS I KLASIFIKACIJA VAZDUŠNOG PROSTORA U KOME SE PRUŽAJU ATS USLUGE ENR 1.4 ATS AIRSPACE CLASSIFICATION AND DESCRIPTION

ENR 1.4 OPIS I KLASIFIKACIJA VAZDUŠNOG PROSTORA U KOME SE PRUŽAJU ATS USLUGE ENR 1.4 ATS AIRSPACE CLASSIFICATION AND DESCRIPTION VFR AIP Srbija / Crna Gora ENR 1.4 1 ENR 1.4 OPIS I KLASIFIKACIJA VAZDUŠNOG PROSTORA U KOME SE PRUŽAJU ATS USLUGE ENR 1.4 ATS AIRSPACE CLASSIFICATION AND DESCRIPTION 1. KLASIFIKACIJA VAZDUŠNOG PROSTORA

More information

- Vežba 3 - UVOD U FLASH ANIMACIJA FRAME-BY-FRAME SHAPE TWEEN MOTION TWEEN

- Vežba 3 - UVOD U FLASH ANIMACIJA FRAME-BY-FRAME SHAPE TWEEN MOTION TWEEN - Vežba 3 - UVOD U FLASH ANIMACIJA FRAME-BY-FRAME SHAPE TWEEN MOTION TWEEN UVOD U FLASH Dizajneri Web strana najčešće koriste slike da bi privukli pažnju posetilaca Web lokacija. Priznaćete da slika može

More information

LabVIEW-ZADACI. 1. Napisati program u LabVIEW-u koji računa zbir dva broja.

LabVIEW-ZADACI. 1. Napisati program u LabVIEW-u koji računa zbir dva broja. LabVIEW-ZADACI 1. Napisati program u LabVIEW-u koji računa zbir dva broja. Startovati LabVIEW Birati New VI U okviru Controls Pallete birati numerički kontroler tipa Numerical Control, i postaviti ga na

More information

Idejno rješenje: Dubrovnik Vizualni identitet kandidature Dubrovnika za Europsku prijestolnicu kulture 2020.

Idejno rješenje: Dubrovnik Vizualni identitet kandidature Dubrovnika za Europsku prijestolnicu kulture 2020. Idejno rješenje: Dubrovnik 2020. Vizualni identitet kandidature Dubrovnika za Europsku prijestolnicu kulture 2020. vizualni identitet kandidature dubrovnika za europsku prijestolnicu kulture 2020. visual

More information

INFORMATIKA II AutoCAD 9. deo. Rudarsko-geološki fakultet Rudarski odsek

INFORMATIKA II AutoCAD 9. deo. Rudarsko-geološki fakultet Rudarski odsek INFORMATIKA II AutoCAD 9. deo Rudarsko-geološki fakultet Rudarski odsek Raspoređivanje i štampanje crteža Štampanje iz AutoCAD-a je komplikovanije nego iz drugih programa zašta postoje i sasvim određeni

More information

EUnet dial-up konfigurator

EUnet dial-up konfigurator Dubrovačka 35/III 11000 Beograd tel/fax: (011) 3305-678 office@eunet.yu Tehnička podrška: tel: (011) 3305-633 support@eunet.yu EUnet dial-up konfigurator - korisničko uputstvo - Ovaj program namenjen je

More information

Univerzitet u Novom Sadu. Fakultet tehničkih nauka. Odsek za računarsku tehniku i računarske komunikacije. Uvod u GIT

Univerzitet u Novom Sadu. Fakultet tehničkih nauka. Odsek za računarsku tehniku i računarske komunikacije. Uvod u GIT Univerzitet u Novom Sadu Fakultet tehničkih nauka Odsek za računarsku tehniku i računarske komunikacije Uvod u GIT Šta je git? Sistem za verzionisanje softvera kao i CVS, SVN, Perforce ili ClearCase Orginalno

More information

Struktura i organizacija baza podataka

Struktura i organizacija baza podataka Fakultet tehničkih nauka, DRA, Novi Sad Predmet: Struktura i organizacija baza podataka Dr Slavica Aleksić, Milanka Bjelica, Nikola Obrenović Primer radnik({mbr, Ime, Prz, Sef, Plt, God, Pre}, {Mbr}),

More information

VODIČ ZA PISANJE SEMINARSKIH RADOVA U PROGRAMU MICROSOFT WORD 2007

VODIČ ZA PISANJE SEMINARSKIH RADOVA U PROGRAMU MICROSOFT WORD 2007 VODIČ ZA PISANJE SEMINARSKIH RADOVA U PROGRAMU MICROSOFT WORD 2007 ili Kako napisati lep seminarski rad? Qué pasa? Internet platforma Društva hispanista za studente hispanistike quepasa.drustvohispanista.rs

More information

MICROSOFT EXCEL SKRIPTA ZA INTERNU UPOTREBU

MICROSOFT EXCEL SKRIPTA ZA INTERNU UPOTREBU MICROSOFT EXCEL SKRIPTA ZA INTERNU UPOTREBU Autor, Mijatović Zvonko, dipl.ing.el. MICROSOFT EXCEL SKRIPTA ZA INTERNU UPOTREBU Bar, Oktobar 2007. Sastavio, Mijatović Zvonko, dipl.ing.el. Naslov: Microsoft

More information

Uvod u MS Word. Nova znanja. Novi pojmovi

Uvod u MS Word. Nova znanja. Novi pojmovi Uvod u MS Word Na početku učenja novog programa najbolje ga je pokrenuti i malo prošetati po njemu. Pogledati osnovni izgled prozora, proanalizirati što sadrži, otvarati izbornike i pogledati koje naredbe

More information

Bušilice nove generacije. ImpactDrill

Bušilice nove generacije. ImpactDrill NOVITET Bušilice nove generacije ImpactDrill Nove udarne bušilice od Bosch-a EasyImpact 550 EasyImpact 570 UniversalImpact 700 UniversalImpact 800 AdvancedImpact 900 Dostupna od 01.05.2017 2 Logika iza

More information

VEŽBA 4 TOOLS - RAD SA ALATIMA

VEŽBA 4 TOOLS - RAD SA ALATIMA VEŽBA 4 TOOLS - RAD SA ALATIMA Tools (opis i rad sa alatima) Alati (Tools) Ovde ćemo objasniti alate koji se upotrebljavaju u Premiere Pro programu: Tool Bar - Alati 1: (V na tastaturi) Selection (strelica)

More information

UPUTE ZA INSTALACIJU PROGRAMA FINBOLT 2007 tvrtke BOLTANO d.o.o.

UPUTE ZA INSTALACIJU PROGRAMA FINBOLT 2007 tvrtke BOLTANO d.o.o. UPUTE ZA INSTALACIJU PROGRAMA FINBOLT 2007 tvrtke BOLTANO d.o.o. Šta je potrebno za ispravan rad programa? Da bi program FINBOLT 2007 ispravno i kvalitetno izvršavao zadaću koja je postavljena pred njega

More information

VEB APLIKACIJA ZA IZBOR KOKTELA

VEB APLIKACIJA ZA IZBOR KOKTELA ELEKTROTEHNIČKI FAKULTET UNIVERZITETA U BEOGRADU VEB APLIKACIJA ZA IZBOR KOKTELA Diplomski rad Kandidat: Milorad Radojković 2009/258 Mentor: doc. dr Zoran Čiča Beograd, Oktobar 2015. SADRŽAJ SADRŽAJ...

More information

PROJEKTNI PRORAČUN 1

PROJEKTNI PRORAČUN 1 PROJEKTNI PRORAČUN 1 Programski period 2014. 2020. Kategorije troškova Pojednostavlj ene opcije troškova (flat rate, lump sum) Radni paketi Pripremni troškovi, troškovi zatvaranja projekta Stope financiranja

More information

POSTUPAK IZRADE DIPLOMSKOG RADA NA OSNOVNIM AKADEMSKIM STUDIJAMA FAKULTETA ZA MENADŽMENT U ZAJEČARU

POSTUPAK IZRADE DIPLOMSKOG RADA NA OSNOVNIM AKADEMSKIM STUDIJAMA FAKULTETA ZA MENADŽMENT U ZAJEČARU POSTUPAK IZRADE DIPLOMSKOG RADA NA OSNOVNIM AKADEMSKIM STUDIJAMA FAKULTETA ZA MENADŽMENT U ZAJEČARU (Usaglašeno sa procedurom S.3.04 sistema kvaliteta Megatrend univerziteta u Beogradu) Uvodne napomene

More information

Vježba 4. Zadatak Ispod naslova napisati sljedeći tekst (bez okvira):

Vježba 4. Zadatak Ispod naslova napisati sljedeći tekst (bez okvira): Vježba 4 Zadatak 1 PRETVARANJE TEKSTA U TABLICU 1. U novootvoreni dokument na početku stranice napisati naslov: TABLICE i pritisnuti Enter. Zatim, označiti redak naslova i dodijeliti mu stil prve razine

More information

Priprema podataka. NIKOLA MILIKIĆ URL:

Priprema podataka. NIKOLA MILIKIĆ   URL: Priprema podataka NIKOLA MILIKIĆ EMAIL: nikola.milikic@fon.bg.ac.rs URL: http://nikola.milikic.info Normalizacija Normalizacija je svođenje vrednosti na neki opseg (obično 0-1) FishersIrisDataset.arff

More information

NAZIV SEMINARA (ARIEL 28pt)

NAZIV SEMINARA (ARIEL 28pt) ZAVOD ZA ELEKTRONIKU, MIKROELEKTRONIKU, RAČUNALNE I INTELIGENTNE SUSTAVE FAKULTET ELEKTROTEHNIKE I RAČUNARSTVA SVEUČILIŠTE U ZAGREBU NAZIV SEMINARA (ARIEL 28pt) autori seminara, imena i prezimena (Ariel

More information

''Serbia'' Serbia MATURSKI RAD. Učenik: Serbia Predmet: Informatika i Računarstvo Profesor: Serbia

''Serbia'' Serbia MATURSKI RAD. Učenik: Serbia Predmet: Informatika i Računarstvo Profesor: Serbia SERBIA ''Serbia'' Serbia maj,1999 MATURSKI RAD Učenik: Serbia Predmet: Informatika i Računarstvo Profesor: Serbia WINDOWS 98 Uvod......................4 Istorija Operativnih Sistema i Windows-a Instaliranje

More information

STINGRAY MUSIC - MOBILNA APLIKACIJA

STINGRAY MUSIC - MOBILNA APLIKACIJA STINGRAY MUSIC - MOBILNA APLIKACIJA Uputstvo za korisnike Januar 2016 UPUTSTVO ZA BRZO STARTOVANJE 1 Preuzmite sa App Store-a ili Google Play-a mobilnu aplikaciju Stingray Music, a zatim je pokrenite.

More information

Slobodni softver za digitalne arhive: EPrints u Knjižnici Filozofskog fakulteta u Zagrebu

Slobodni softver za digitalne arhive: EPrints u Knjižnici Filozofskog fakulteta u Zagrebu Slobodni softver za digitalne arhive: EPrints u Knjižnici Filozofskog fakulteta u Zagrebu Marijana Glavica Dobrica Pavlinušić http://bit.ly/ffzg-eprints Definicija

More information

STRUČNA PRAKSA B-PRO TEMA 13

STRUČNA PRAKSA B-PRO TEMA 13 MAŠINSKI FAKULTET U BEOGRADU Katedra za proizvodno mašinstvo STRUČNA PRAKSA B-PRO TEMA 13 MONTAŽA I SISTEM KVALITETA MONTAŽA Kratak opis montže i ispitivanja gotovog proizvoda. Dati izgled i sadržaj tehnološkog

More information

Hot Potatoes. Osijek, studeni Jasminka Brezak

Hot Potatoes. Osijek, studeni Jasminka Brezak Hot Potatoes JQuiz - izrada kviza s pitanjima za koje treba izabrati jedan ili više točnih odgovora ili upisati kratki odgovor JCloze - izrada zadatka s tekstom za dopunjavanje, korisnik mora prepoznati

More information

Wordpress. Instalacija WordPress-a. Da bi ste instalirali WordPress na localhost pratite sledeće korake:

Wordpress. Instalacija WordPress-a. Da bi ste instalirali WordPress na localhost pratite sledeće korake: Instalacija WordPress-a Wordpress Da bi ste instalirali WordPress na localhost pratite sledeće korake: 1. Instalirajte XAMPP server (verovatno već instaliran, prilikom instalacije Joomla-e), I pokrenuti

More information

Upute za VDSL modem Innbox F60 FTTH

Upute za VDSL modem Innbox F60 FTTH Upute za VDSL modem Innbox F60 FTTH Default Login Details LAN IP Address User Name Password http://192.168.1.1 user user Funkcionalnost lampica LED Stanje Opis Phone USB Wireless Data Internet Broadband

More information

TEHNOLOGIJA, INFORMATIKA I OBRAZOVANJE ZA DRUŠTVO UČENJA I ZNANJA 6. Međunarodni Simpozijum, Tehnički fakultet Čačak, 3 5. jun 2011.

TEHNOLOGIJA, INFORMATIKA I OBRAZOVANJE ZA DRUŠTVO UČENJA I ZNANJA 6. Međunarodni Simpozijum, Tehnički fakultet Čačak, 3 5. jun 2011. TEHNOLOGIJA, INFORMATIKA I OBRAZOVANJE ZA DRUŠTVO UČENJA I ZNANJA 6. Međunarodni Simpozijum, Tehnički fakultet Čačak, 3 5. jun 2011. TECHNOLOGY, INFORMATICS AND EDUCATION FOR LEARNING AND KNOWLEDGE SOCIETY

More information

PRIRUČNIK ZA POČETNIKE U INFORMATICI

PRIRUČNIK ZA POČETNIKE U INFORMATICI PRIRUČNIK ZA POČETNIKE U INFORMATICI ~ I ~ SADRŽAJ 1. Prikaz tipkovnice s osnovnim funkcijama... 1 2. Prikaz radne površine... 2 3. MS Word... 3 3.1. Vrpca... 4 3.1.1. Rad s vrpcom... 5 3.1.2. Minimiziranje

More information

EKONOMSKI FAKULTET UNIVERZITETA U BEOGRADU copyright by A.Bradi & G. Petri, as. Windows 98.

EKONOMSKI FAKULTET UNIVERZITETA U BEOGRADU copyright by A.Bradi & G. Petri, as. Windows 98. 1 as Windows 98. Operativni sistem (OS) je skup programskih modula (vrsta softvera) koji vrši upravljanje i kontrolu raunarskih resursa. OS, prema tome, upravlja svim hardverskim komponentama sistema,

More information

Univerzitet u Zenici UN I V E R Z I T E T U Z E N IC I U N I V E R S I TA S I C A E N S I S Z E N S T U D I O R U M

Univerzitet u Zenici UN I V E R Z I T E T U Z E N IC I U N I V E R S I TA S I C A E N S I S Z E N S T U D I O R U M Univerzitet u Zenici UN I V E R Z I T E T U Z E N IC I U N I V E R S I TA S S T U D I O R U M I C A E N S I S Z E N Pedagoški fakultet Katedra za matematiku i informatiku Aplikativni softver v.as.mr. Samir

More information

IZRADA TEHNIČKE DOKUMENTACIJE

IZRADA TEHNIČKE DOKUMENTACIJE 1 Zaglavlje (JUS M.A0.040) Šta je zaglavlje? - Posebno uokvireni deo koji služi za upisivanje podataka potrebnih za označavanje, razvrstavanje i upotrebu crteža Mesto zaglavlja: donji desni ugao raspoložive

More information

Deo II. Priprema datoteke s podacima

Deo II. Priprema datoteke s podacima Deo II Priprema datoteke s podacima Priprema datoteke s podacima za analizu obuhvata više koraka. Prvo se napravi prazna datoteka i u nju unesu podaci dobijeni u istraživanju, u obliku definisanom u šifarniku

More information

Microsoft Office PowerPoint 2007 korak po korak

Microsoft Office PowerPoint 2007 korak po korak M Microsoft Office PowerPoint 2007 korak po korak Joyce Cox i Joan Preppernau CET Computer Equipment and Trade Microsoft Office PowerPoint 2007 korak po korak ISBN 978-86-7991-310-4 Autorizovan prevod

More information

TEHNIKA I INFORMATIKA U OBRAZOVANJU

TEHNIKA I INFORMATIKA U OBRAZOVANJU TEHNIKA I INFORMATIKA U OBRAZOVANJU Konferencija 32000 Čačak 9-11. Maja 2008. UDK: 371.333::62/69 Stručni rad KREIRANJE OAE TUTORIJALA PRIMENOM ALATA CAMTASIA STUDIO Danijela Milošević 1, Maja Božović

More information

U sledećem koraku birate traženi program:

U sledećem koraku birate traženi program: Do programa Mystat, koji je potpuno besplatan, najlakše je doći preko nekog od najzastupljenijih programa za pretraživanje (Google ili Yahoo) jednostavnim ukucavanjem naziva istog, a zatim odlaska na sajt

More information

COREL DRAW. Predstavljanje crteža u računaru

COREL DRAW. Predstavljanje crteža u računaru COREL DRAW Predstavljanje crteža u računaru Postoje dva osnovna načina predstavljanja crteža: vektorski i rasterski. Kod programa koji vektorski predstavljaju slike pamte se linije od kojih je sastavljena

More information

- Vežba 5 - UVOZ SLIKA I RAD SA SLIKAMA RAD SA SEKVENCAMA I KADROVIMA OBJAVLJIVANJE FILMA

- Vežba 5 - UVOZ SLIKA I RAD SA SLIKAMA RAD SA SEKVENCAMA I KADROVIMA OBJAVLJIVANJE FILMA - Vežba 5 - UVOZ SLIKA I RAD SA SLIKAMA RAD SA SEKVENCAMA I KADROVIMA OBJAVLJIVANJE FILMA UVOZ SLIKA I RAD SA SLIKAMA U Flash-u možete da koristite dve vrste slika: Vektorske slike one su matematički definisane

More information