Univerzitet u Beogradu

Fakultet organizacionih nauka

Laboratorija za elektonsko poslovanje

TRELLIAN WEBPAGE 4.0.0.152

Seminarski rad iz Elektronskog poslovanja

Nastavnik: prof. dr Božidar Radenković

Saradnik: Dušan Barać

Student: Miloš Durković 02/08

Beograd, 2010. godine

Sadržaj:

1 O TRELLIAN WEBPAGE-U............................................................................................................................. 4

2 INSTALACIJA TRELLIAN WEBPAGE-A............................................................................................................6

3 RADNO OKRUŽENJE TRELLIAN WEBPAGE-A...............................................................................................11

3.1 PODEŠAVANJE PROGRAMA..............................................................................................................................123.2 RADNA POVRŠINA(WORKSPACE)......................................................................................................................143.3 GLAVNA LINIJA MENIJA (MENU BAR)................................................................................................................143.4 PROZOR ZA IZRADU WEB STRANA (EDITOR WINDOW)...........................................................................................153.5 FOOTER.......................................................................................................................................................163.6 LENJIR.........................................................................................................................................................163.7 KOORDINATNE LINIJE......................................................................................................................................16

4 RAD SA DOKUMENTIMA........................................................................................................................... 17

4.1 KREIRANJE NOVE STRANE................................................................................................................................174.2 OTVARANJE POSTOJEĆE STRANICE.....................................................................................................................174.3 ČUVANJE STRANICE........................................................................................................................................174.4 POKRETANJE STRANICE...................................................................................................................................184.5 KARAKTERISTIKE STRANICE...............................................................................................................................18

4.5.1 Meta tagovi..........................................................................................................................................184.5.2 Izgled....................................................................................................................................................194.5.3 Klizač....................................................................................................................................................204.5.4 Podešavanje linkova.............................................................................................................................214.5.5 Headings..............................................................................................................................................22

4.6 PAGE STATISTICS...........................................................................................................................................224.7 LINKOVI NA STRANICI.....................................................................................................................................234.8 DOCUMENT TREE..........................................................................................................................................234.9 SITE EXPLORER.............................................................................................................................................244.10 HTML VALIDATION.......................................................................................................................................244.11 HTML TIDY.................................................................................................................................................25

5 RAD SA TEKSTOM..................................................................................................................................... 26

5.1 FORMATIRANJE TEKSTA...................................................................................................................................26

6 RAD SA TABELAMA................................................................................................................................... 30

6.1 UMETANJE TABELA........................................................................................................................................306.2 PROMENA SVOJSTAVA TABELE..........................................................................................................................316.3 PROMENA SVOJSTAVA ĆELIJE TABELE.................................................................................................................326.4 DODAVANJE ILI BRISANJE REDOVA, KOLONA I ĆELIJA.............................................................................................326.5 POMERANJE, KOPIRANJE ILI BRISANJE TABELE......................................................................................................336.6 UPIS PODATAKA U TABELE...............................................................................................................................33

7 RAD SA SLIKAMA...................................................................................................................................... 34

7.1 UBACIVANJE SLIKE.........................................................................................................................................347.2 PODEŠAVANJE SLIKE.......................................................................................................................................357.3 ALATI ZA RAD SA SLIKAMA...............................................................................................................................36

7.3.1 Izmena slike..........................................................................................................................................377.3.2 Animacija slike - Gif animator..............................................................................................................37

2

7.3.3 Vraćanje slike u prvobitno stanje..........................................................................................................407.3.4 Transformacija, primena filtera i promena boje na slici.......................................................................417.3.5 Photoshop plagin.................................................................................................................................437.3.6 Konvertovanje slika u druge formate...................................................................................................44

8 LINKOVI I NAVIGACIJA.............................................................................................................................. 45

8.1 KREIRANJE LINKOVA UNUTAR SAME STRANE........................................................................................................458.2 KREIRANJE LINKOVA KA DRUGIM WEB STRANICAMA..............................................................................................468.3 KORIŠĆENJE SLIKA KAO LINKOVA.......................................................................................................................468.4 LINKOVANJE DOKUMENATA.............................................................................................................................468.5 KREIRANJE E-MAIL LINKOVA............................................................................................................................478.6 UKLANJANJE LINKOVA.....................................................................................................................................47

9 FORME..................................................................................................................................................... 48

9.1 KREIRANJE FORME.........................................................................................................................................499.2 DODAVANJE TEKSTUALNOG POLJA.....................................................................................................................499.3 DODAVANJE RADIO DUGMETA..........................................................................................................................509.4 DODAVANJE CHECK-BOX-A..............................................................................................................................519.5 DODAVANJE DUGMADI ZA POTVRĐIVANJE I OTKAZIVANJE......................................................................................51

10 OBJEKTI................................................................................................................................................ 53

10.1 UBACIVANJE IFRAME NA STRANICU...................................................................................................................5410.2 UBACIVANJE MARQUEE NA STRANICU...............................................................................................................5410.3 UBACIVANJE KOMENTARA NA STRANICU.............................................................................................................5510.4 UBACIVANJE JAVA APLETA NA STRANICU............................................................................................................55

11 PRIMER IZRADE WEB SAJTA.................................................................................................................. 57

11.1 KREIRANJE STRUKTURE SAJTA...........................................................................................................................5711.2 IZRADA PRVE STRANICE ZA WEB SAJT................................................................................................................5711.3 DODAVANJE OSTALIH STRANICA........................................................................................................................6611.4 CSS ILI KASKADNE LISTE STILOVA.....................................................................................................................6711.5 IZRADA GALERIJE SLIKA...................................................................................................................................7011.6 IZRADA KONTAKT FORME................................................................................................................................7411.7 PREGLEDAVANJE STRANICE U BROWSER-U..........................................................................................................7511.8 OBJAVLJIVANJE SAJTA.....................................................................................................................................76

12 REFERENCE...................................................................................................................................................78

3

1 O TRELLIAN WEBPAGE-uTrellian WebPage je program koji omogućava kreiranje sopstvenih web stranica bez prethodnog učenja kompleksnih skriptnih jezika.

WebPage ima WYSIWYG (What You See Is What You Get) interfejs koji omogućava lak rad na kreiranju i menjanju stranice kao kod bilo kog tekst procesora (Microsoft Word, OpenOffice Word). Trellian WebPage je besplatan program i može se preuzeti sa internet lokacije http://www.trellian.com/webpage .

Neke od glavnih prednosti Trellian WebPage su:

Potpuno je besplatan.

Intuitivan interfejs.

Lak je za skidanje sa interneta (oko 7 MB).

Lak je za korišćenje: nije vam potrebno prethodno znanje HTML jezika da bi kreirali svoje stranice.

Stalno se razvija, napreduje i već su najavljene neke veoma interesantne novine.

WYSIWYG obrada web strana, čini web izradu veoma jednostavnom i sličnom kucanju teksta u word okruženju.

Verodostojna izrada HTML koda koja će raditi na svim danas vodećim i popularnim web browser-ima.

Podrška za Photoshop-ove plaginove.

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.

Trellian WebPage 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 direktno preko HTML-a, i da se lako prebacuje između grafičkog izgleda i samog koda stranice. 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.

Prepoznatljiv je po ikonici . .

Neophodna konfiguracija za instaliranje ovog programa je:

Operativni sistem:Microsoft Windows 98/ME/2000/XP/Vista.

CPU/Procesor:Intel Pentium I, II, III, IV, AMD.

RAM/Memorija:64MB ili više.

Prostor na hard disku:20MB prostora na disku.

4

Web browser:Internet Explorer 5.5, Mozilla 2.0, Opera 6.0.

Ukoliko imate problema sa radom Trellian WebPage u okviru menija Resources imate nekoliko ikonica koje omogućavaju da klikom dođete do rešenja (Home, Forum i Bug Reports).

Klikom na Upgrade možete skinuti i updejtovati na poslednju ažuriranu verziju. Ikonica About daje informacije o samom programu , operativnom sistemu koji se koristi, radnoj memoriji i slobodnoj memoriji. Klikom na Manual otvara se internet stranica sa upustvom za korišćenjem programa na engleskom jeziku. Ikonica CSS nudi upustvo za korišćenje CSS-a, gde se on detaljno objašnjava.

Ono što nije besplatno u okviru Trellian WebPage-a je korišćenje pratećih programa koji se koriste za SEO (Search Engine Optimization) optimizaciju stranica. Naime programi SubmitWolf, SeoToolkit i Keyword Discovery omogućavaju da napravljene stranice budu što bolje pozicionirane na pretraživačima. Osim u meniju Resources, mogu se naći i u meniju Tools, grupi alata SEO Tools.

5

2 INSTALACIJA TRELLIAN WEBPAGE-a

Program Trellian WebPage se veoma lako instalira u svega nekoliko koraka, svodeći se uglavnom na klik dugmeta Next. Sa internet stranice http://www.trellian.com/webpage/download.htm skinemo editor i

dvoklikom na ikonicu za instaliranje pojavljuje se Welcome to the Trellian WebPage prozor u kome

obaveštava korisnika da će se ovaj program instalirati na njegovom pačunaru i preporučuje da se zatvore sve aktivne aplikacije pre nego što se krene dalje. U donjem levom uglu može se primetiti koje sve jezike program podržava. Klikom na Next otvara se sledeći prozor.

6

U prozoru Select Destination Location možemo odaabrati mesto na hard disku gde želimo da instaliramo program, uglavnom se ostavlja već postojeća putanja koja fajlove čuva na sistemskoj particiji u okviru foldera Program Files. Klikom na Next otvara se sledeći prozor.

Prozor User Information zahteva da se unesu informacije o budućem korisniku ovog programa unoseći korisnicko ime i organizaciju. Klikom na Next otvara se sledeći prozor.

7

Prozor Select Components služi za podešavanje komponenti koje želimo da instaliramo, pored editora WebPage v4.0 tu su i programi SEO Toolbar i SEO Toolkit v3.0 koji su komercijalni i ovo su samo njihove probne verzije. Navedeni programi služe za SEO (Search Engine Optimization) sajtova i potrebno je odštiklirati pomenute programe. Klikom na Next otvara se sledeći prozor.

U prozoru Select Start Menu Folder definišemo u kom Start Menu folderu da kreiramo prečicu za program. Klikom na Next otvara se sledeći prozor.

8

Prozor Select Additional Tasks štikliranjem opcija nudi kreiranje pravljenje prečice na Desktopu i u Quick Launch baru koji se nalazi pored dugmeta Start u Task baru. Klikom na Next otvara se sledeći prozor.

U prozoru Ready to Install se prikazuje revizija onog što smo popunili i štiklirali. Klikom na Install započinjemo sa instalacijom programa na računar.

9

Po završetku instalacije pojavljuje se prozor Completing the Trellian WebPage Setup Wizard u okviru koga možemo štiklirati opciju da po zatvaranju prozora pokrene program. Klikom na dugme Finish završavamo instalaciju programa Trellian WebPage.

10

3 RADNO OKRUŽENJE TRELLIAN WEBPAGE-a

Kada se prvi put pokrene Trellian WebPage, u pozadini će biti prikazan njegov glavni prozor i radna površina a u prvom planu pojaviće se prozor “Welcome to Webpage”.

Ako se želi sprečiti da se ovaj prozor pokreće sa svakim kreiranjem nove stranice, potrebno je štiklirati checkbox odmah pored “Don’t show this wizard when creating a new page.” Klikom na dugme Next pojavljivaće se prozori vezani za podešavanje stranice, koje po mogućstvu možete popuniti ili ostaviti prazne, a sva pojavljivana podešavanja možete naknadno podesiti klikom na ikonicu Page Properties u okviru grupe alata Page u meniju View.

11

3.1 Podešavanje programa

Podešavanje programa omogućava promenu više različitih opcija za Trellian WebPage. Da biste im pristupili potrebno je kliknuti na Preferences u okviru menija View.

Podešavanja su podeljena u tri grupe: General - opšta podešavanja, FTP - podešavanja vezana za povezivanje sa serverom na kome treba da se nalazi sajt i New Document - podešavanja vezana za otvaranje novog dokumenta.

Re−open pages at startup − automatski otvara stranice na kojima je rađeno prilikom prethodnog zatvaranja programa.

Warn when opening read only files − upozorava kada se otvaraju read-only fajlovi.

Use <strong> and <em> instead of <b> and <i> − zamenjuje definisane tagove <b>(podebljano) i <i> (iskošeno) sa <strong> i <em>.

Set as default HTML editor − podešava Trellian WebPage kao osnovni HTML editor.

Make paragraph on enter − kreira novi paragraf na svaku zadatu komandu Enter.

Show outlines for tables with zero value border − uključuje prikaz tačkaste linije za elemente čija ivica ima vrednost nula.

Turn off the automatic html header insertion − onemogućava automatski unos HTML zaglavlja.

Turn off automatic style insert − onemogućava atomatski unos stilova.

Show menu − prikazuje glavni meni sa alatima nalik Microsoft Word 2003.

Use <div> tag for centering instead of <center> − zamenjuje definisane tagove <center> sa <DIV align=center>.

12

FTP client − podešavanje putanje do FTP klijenta npr. C:\ProgramFiles\TRELLIAN\ftp.exe

Parameters − podešavanje bilo kojeg parametra koji je neophodan za funkcionisanje FTP programa.

Default extension − podešavanje ekstenzije fajla.

Default Document Type (DTD) − podešavanje tipa dokumenta.

Default encoding − podešavanje tipa enkodinga, predefinisana vrednost je UTF-8.

Show wizard when creating a new page − podešavanje prikaza wizarda uvek kada se kreira nova stranica.

13

3.2 Radna površina(Workspace)

Radna površina je ono od čega se uvek kreće i što se prvo vidi kada se pokrene program:

Trellian WebPage je veoma fleksibilan i omogućiće korisniku izradu web strana na onaj način koji će mu najviše odgovarati. Trellian WebPage dolazi sa svojim Site Explorer-om kako bi korisnik mogao da vlada čitavim web sajtom a ne samo pojedinačnim web stranama.

3.3 Glavna linija menija (Menu Bar)

Trellian WebPage ima meni liniju koja dosta podseća na Word 2007, koja predstavljena u vidu kartica sa alatima za rad grupisanih u određene grupe alata:

Home - sadrži grupe alata Clipboard, Font, Paragraph, Editing i Arrange koje služe za formatiranje teksta i elemenata u okviru stranice.

Insert - sadrži grupe alata Table, Ilustration, Links, Object i Form koje služe za ubacivanje određenih elemenata u stranicu.

Tools - sadrži grupe alata Picture Tools, Tools i SEO Tools koje služe za rad na modifikaciji elemenata i SEO optimizaciju stranice.

View - sadrži grupe alata Document Views, Show/Hide, Properties, Windows, Page, Site Explorer koje služe za podešavanje radne površine i stranice.

14

Resources - sadrži grupe alata Links, Services, Update i Help koje služe za komunikaciju sa ostalim korisnicima, informacije o novostima, nadograđivanje postojeće verzije i komunikaciju sa programima koji idu kao podrška WebPage.

3.4 Prozor za izradu web strana (Editor 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.

Ovaj prozor Trellian WebPage je deo gde se aktivno kreira web strana. Postoje četiri načina pregleda HTML fajla Editor, Source, Preview i Split. Ovi tabovi se mogu aktivirati iz gonjeg levog

ugla programa klikom na određeni tab. Prva tri taba se mogu aktivirati i klikom na meni View i odabirom potrebne ikonice iz grupe alata Document Views.

Dok se tab Split aktivira klikom na ikonicu Split u okviru grupe alata Windows iz menija View.

15

Pored ikonice Split nalaze i ikonice New Window koja omogućava otvaranja novog prozora, Ikonica Arrange All koja omogućava smanjivanje prozora da svi stanu jedan ispod drugog na ekran, kao opcija Tile Windows Horizontaly u OS Windows i ikonica Switch Windows koja omogućava kretanje po prozorima.

Za nas u ovoj skripti najvažniji je Editor tab.

Editor - 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.

Source - koji je zapravo HTML editor. Ovaj tab treba izabrati onda 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.

Split - omogućuje kombinovani Editor/Source način rada.

3.5 Footer

Ovaj deo pokazuje karakteristike elementa koji je označen ili deo koda gde se kursor trenutno nalazi.

3.6 Lenjir

Služi kao pomoć za podešavanje položaja elemenata, može uključiti odnosno isključiti klikom na ikonicu Ruler u grupi alata Show/Hide u meniju View.

3.7 Koordinatne linije

Koordinatne linije se mogu uključiti odnosno isključiti klikom na ikonicu Gridlines gde će se otvoriti podmeni sa tri opcije. Prva Gridlines uključuje/isključuje koordinatnu mrežu, druga opcija Snap to Grid omogućava „lepljenje“ elemenata stranice za koordinatnu mrežu. Treća opcija Grid Size omogućava podešavanje veličine koordinatne mreže.

16

4 RAD SA DOKUMENTIMAPostoje dva načina na koji se može kreirati, otvarati već postojeći i čuvati dokument.

4.1 Kreiranje nove strane

Novu stranicu se može kreirati preko ikonice New na liniji alata, ili preko > New. 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.

4.2 Otvaranje postojeće stranice

Pod pretpostavkom da je stranica sačuvana na lokalnom hard disku u HTML formatu, preko

ikonice Open na liniji alata, ili preko >Open. Otvara se novi prozor Open, pronađe se traženi fajl sa .html ekstenzijom i klikne se na Open.

Ili preko >Recent Documents kako bi se ostvario brz pristup skoro korišćenim stranicama. Ili se koristi Site Explorer koji predstavlja moćan mini-browser i veoma je lak za korišćenje.

4.3 Čuvanje stranice

Čuvanje stranice se postiže preko ikonice Save na liniji alata. Ukoliko se radi o novom dokumentu otvara se novi prozor Save As koji omogućava nalaženje direktorijuma za smeštanje fajla i njegovo imenovanje u polju File Name.

17

4.4 Pokretanje stranice

Da bi se videlo kako će stranica da izgleda u browseru, pokreće se >Preview in Browser

ili u desnom delu linije menija se nalaze ikonice koje omogućavaju brži pristup datoj opciji.

4.5 Karakteristike stranice

Podešavanje stranice omogućava da se definiše boja pozadine, podešavanje fontova, podešavanje linkova, meta tagova i margina.

Ukoliko želimo da otvorimo prozor za podešavanje stranice potrebno je kliknuti na ikonicu Properties u okviru grupe alata Page u meniju View.

4.5.1 Meta tagovi

Meta tagovi su HTML tagovi koji nisu vidljivi na stranici, ali pružaju informacije koje opisuju sadržaj stranice. Meta tagovi se koriste doduše u manjoj meri da pomognu pretraživačima da indeksiraju i rangiraju web sajt na Internetu. Ukoliko ne postoje meta tagovi neki pretraživači kreiraju opis i ključne reči koje indeksiraju na osnovu prvih nekoliko linija teksta na stranici.

18

Da bi uneli meta tagove potrebno je kliknete na Meta Tags u okviru prozora Page Properties.

Title − potrebno je uneti ime stranice. npr. Prodavnica igracaka DEX.

Author − potrebno je uneti autora. npr. Janko Mirković.

Owner − potrebno je uneti vlasnika stranice. npr Kompanija DEX.

Copyright − potrebno je uneti nosioca autorskih prava. npr. Copyright Kompanija DEX.

Rating − potrebno je uneti rang za stranicu. npr. Opšta (bezbedna za decu, ograničena).

Charset − potrebno je odrediti skup znakova koji se koriste na stranici. Obično se koristi utf-8 za jezik koji nije engleski.

Description − potrebno je uneti opis sadržaja stranice. npr. Kompanija DEX je firma koja je specijalizovana za uvoz igračaka za decu.

Keywords − potrebno je uneti nekoliko ključnih reči koje opisuju sadržaj stranice, reči razdvojiti zarezom. npr igracke za decu, barbika, hitmen...

Revisit after − potrebno je uneti broj dana posle kojeg bi pretraživač trebalo da ponovo poseti stranicu. Većina pretraživača će ignorisati ovaj tag.

4.5.2 Izgled

Podešavanje izgleda omogućava korisniku da definiše izgled pozadine, font i margine.

Da bi uneli meta tagove potrebno je kliknete na Appearance u okviru prozora Page Properties.

19

Font − služi za odabir stil fonta klikom na ... i odabirom fonta sa liste. Potrebno je odabrati nekoliko fontova u slučaju da korisnik nema font koji je prvi izabran na njegovom računaru. Da biste izabrali podebljani i/ ili iskošeni font potrebno je kliknuti na dugme B za podebljano, a na dugme I za iskošeno.

Size − služi za definisanje veličine fonta. Takođe može da se odabere jedinica mere kao što je : piksel, point, %, cm...Color − služi za podešavanje predefinisane boje stranice. Vrednost određene boje se može uneti u heksadecimalnom zapisu ili da se odabere iz palete boja.Image − služi za ubacivanje slika kao pozadine. Može ostati nepopunjeno. Unesite putanju do slike klikom na dugme ... i vodite računa da slika bude u folderu koji će biti zajedno sa HTML stranicama prebačen na server radi hostovanja.Repeats − služi za definisanje načina na koji će se slika ponavljati u okviru stranice. Postoje četiri opcije: repeat - ponavlja se i vertikalno i horizontalno, repeat-x - ponavlja se samo horizontalno, repeat - y - ponavlja se samo vertikalno i no-repeat - bez ponavljanja.Background color − služi za određivanje boje pozadine stranice. To se može učiniti direktnim unosom heksadecimalne vrednosti boje ili klikom na dugme ... i odabirom tražene boje.Left Margin − služi za definisanje leve margine, mereno u pikselima.Top Margin − služi za definisanje gornje margine, mereno u pikselima.Right Margin − služi za definisanje desne margine, mereno u pikselima.Bottom Margin − služi za definisanje donje margine, mereno u pikselima.

4.5.3 Klizač

Podešavanje klizača omogućava da se definiše boja klizača. Podešavanja se nalaze u okviru prozora Page Properties klikom na opciju Scroll.

20

Boje se unose u heksadecimalnom zapisu kao #CC9966 ili klikom na dugme ... i izborom odgovarajuće boje.

4.5.4 Podešavanje linkova

U okviru ovog podešavanja vršimo definisanje fonta, njegove boje, veličine i stila samog linka. Podešavanja se nalaze u okviru prozora Page Properties klikom na opciju Links.

Link color − služi za podešavanje boje neposećenog linka.Rollover color − služi za podešavanje boje linka koja se javlja kada kursor pređe preko linka.

21

Visited links − služi za podešavanje boje posećenog linka.Active links − služi za podešavanje boje aktivnog linka (u trenutku od klika na njega do odlaska na specificiranu lokaciju).Underline Style − služi za podešavanje podvučene linije linka i ima četiri opcije: None - bez podvlačenja, Underline - podvučeno, Underline on rollover - podvučeno prilikom prelaska kursora preko njega and Hide underline on rollover - sakriva podvučenu liniju prilikom prelaska kursora.

4.5.5 Headings

Podešavanje heading-a omogućava definisanje boju fonta, veličine i stila. Ova podešavanja mogu ostati prazna i WebPage će upotrebiti predefinisana podešavanja za heading. Heading 1 je najveći heading, a heading 6 je najmanji.

Podešavanja se nalaze u okviru prozora Page Properties klikom na opciju Headings.

Heading 1 do 6 − služi za definisanje veličine fonta i izbor merne jedinice. Zadnje polje služi za unos boje heading-a u heksadecimalnom zapisu (#0099FF) ili klikom na dugme ... i izborom željene boje.

4.6 Page Statistics

Da biste videli koliko slika, linkova, formi, reči, karaktera i dr. ima na stranici potrebno je kliknuti na ikonicu Page Statistics u okviru grupe alata Page u meniju View.

22

4.7 Linkovi na stranici

Da biste videli koliko linkova ima na stranici i gde oni vode potrebno je kliknuti na ikonicu Page Links u okviru grupe alata Page u meniju View.

Svaki link se u ovom prozoru može izmeniti dvoklikom na postojeći link i unosom željenog linka.

4.8 Document Tree

Da biste videli strukturu dokumenta, potrebno je kliknuti na ikonicu Document Tree u okviru grupe alata Page u meniju View.

23

Struktura dokumenta prikazuje raspored HTML tagova na stranici. HTML kod za svaku stranicu može biti vidljiv klikom na ime taga.

4.9 Site Explorer

Site Explorer služi za pregledavanja fajlova na lokalnom računaru. Da biste otvorili Site Explorer potrebno je kliknuti na istoimenu ikonicu u okviru menija View.

Da biste se kretali kroz foldere koristi se dvoklik ili uneti putanju foldera. Pored toga ima mogućnost da se odabere traženje fajlova određene ekstenzije (.htm, .html, .pl, .php, .asp, .txt) u padajućem meniju pored polja koje pokazuje putanju do foldera.

4.10 HTML validation

Validacija HTML koda web stranice može se postići klikom na ikonicu Validate u okviru menija Tools.Validacija je proces provere koda web stranice u skladu sa standardom koji je propisao World Wide Web Consortium (W3C) za HTML.

24

4.11 HTML tidy

Uređivanje HTML koda može se postići klikom na ikonicu Tidy u okviru menija Tools. To se postiže primenom željene opcije filtriranja.

25

5 RAD SA TEKSTOM

5.1 Formatiranje teksta

Prva grupa alata koja se pojavljuje u meniju Home je Clipboard koja ima tri funkcije Paste, Cut i Copy i svaka ima svoju ikonicu, a naravno može se koristiti i prečice Ctrl+V za Paste, Ctrl+X za Cut i Ctrl+C za Copy.

Druga grupa alata Font se koristi za podešavanje fonta i veličine. Takođe može se podesiti Font style tako da tekst bude podebljan-B, iskošen-I ili podvučen-U.

Pored stila može se definisati i boja fonta klikom na opcione boje ili ikonicu pored koja omogućava izbor boje iz palete ili samostalno određivanje boje.

Takođe ukoliko pogrešimo prilikom kucanja i UNESEMO SVA VELIKA SLOVA UMESTO malih slova koristimo ikonicu kako bi to ispravili, važi i obrnuto.

Ikonice A+ i A- koristimo ako želimo da povećavamo ili smanjimo font označenog teksta.

Treća grupa alata Paragraph se koristi za podešavanje teksta u smislu formatiranja. Naime tekst se može poravnati levo, centralno i desno.Takođe pozadina teksta se može obojiti u određenu boju klikom na ikonicu pored ikonica za poravnjanje.

Umetanje listi se vrši preko prve dve ikonice sa slike, tako što se kursor postavi na željeno mesto i klikne na Bulleted list ili Numbered list.

26

Takođe možemo izvršitit i uvlačenje reda koristeći druge dve ikonice, dok zadnja ikonica u obliku okrenutog slova P daje detalje o paragrafu.

Tekst koji se direktno kuca na stranicu koja se kreira u prozoru za obradu se po default-u pojavljuje u formatu “normal”. HTML definiše mali broj elemenata specificiranih za tekst i obično je poželjno da se oni koriste.

Drugi standardni tekst formati su Heading formati počev od Heading 1(najvećeg) do Heading 6(najmanjeg). Browseri uopšteno koriste boldirane naslove.

Postoji i ikonica Change Style koja objedinjava već postojeće ikonice i u podmeniju sadrži Font Style (Plain, Bold, Italic i Underline), Font Size (8, 10, 12, 14, 18, 24, 36, A+ i A-), Font Color ( Foreground Color i Background color) i Charset (Upper Case i Lower Case).

27

Editing je grupa alata koja služi za pronalaženje delova teksta, njegovu zamenu, kao i za selektovanje čitavog teksta, odnosno deselektovanje.

Prozor koji se javlja klikom na Find ili Replace ima izgled kao na slici i u okviru njega se mogu podesiti opcije za pretragu teksta.

Četvrta grupa alata je Arrange koja služi za podešavanje elemenata stranice.

Properties # 1 - nam daje informacije o elementu i njegovim karakteristikama.

28

Float Element # 2 - omogućava da se element izvede iz prirodnog toka i postavi ga desno ili levo od nekog drugog elementa.

Send Below Text # 3 - omogućava da se element postavi iza teksta.

Bring Above Text # 4 - omogućava da se element postavi ispred teksta.

Lock Element # 5 - Lock Element zaključava element.

Send to Back # 6 - šalje element iza elemenata koji se nalaze ispod njega.

Bring to Front # 7 - šalje element ispred elemenata koji se nalazi iznad njega.

Send Backward # 8 - šalje element iza elementa koji se nalaze ispod njega.

Bring Forward # 9 - šalje element ispred elementa koji se nalaze iznad njega.

Snap to Grid # 10 - poravnava element sa gornjim levim uglom zadate mreže linija.

29

6 RAD SA TABELAMA

6.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 treba kliknuti na mesto gde želite da ubacite tabelu, zatim kliknuti na

ikonicu Table , nakon toga će se otvoriti prozor Table Wizard.

30

U okviru Table Wizard prozora može se podesiti širina i visina tabele, broj kolona i redova, razmak između ćelija i debljina ivice.

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. Druga tabela je takođe sa dve kolone i dva reda ali ivice debljine 0. Ova tabela neće biti vidljiva na web stranici. Trellian WebPage koristi crne isprekidane linije da bi označio tabele čije su ivice debljine 0 i vrlo je korisna kada treba precizno organizovati sadržaj stranice. Ova isprekidana crna linija nestaje pokretanjem stranice u web browseru.

6.2 Promena svojstava tabele

Promenu svojstva tabele možete realizovati kada označite tabelu klikom u gornji levi ugao kada se pojavljuje četvorostrana strelica, zatim desnim klikom na nju se otvora padajući meni u kome treba kliknuti na Properties nakon toga će se otvoriti prozor Table Properties.

31

U okviru prozora Table Properties postoje tri dela Layout, Colors i Background Image. U delu Layout definišemo širinu i visinu tabele, razmak između ćelija i debljinu ivice. U delu Colors definišemo boju

pozadine tabele i ivica. U delu Background Image može se umesto boje postaviti određena slika kao pozadina.

6.3 Promena svojstava ćelije tabele

Promenu svojstva ćelije tabele možete realizovati kada označite ćeliju tabele, zatim desnim klikom na nju će se otvoriti padajući meni u kome treba kliknuti na Properties nakon toga će se otvoriti prozor Cell Properties.

32

U okviru prozora Cell Properties postoje četiri dela Layout, Colors, Text Formating i Background Image. U delu Layout definišemo širinu i visinu ćelije. U delu Colors definišemo boju pozadinu ćelije i ivica. Deo Text Formating služi za podešavanje poravnjanja teksta u okviru ćelije. U delu Background Image može se umesto boje postaviti određena slika kao pozadina.

6.4 Dodavanje ili brisanje redova, kolona i ćelija

Dodavanje ili brisanje redova, kolona i ćelija možemo uraditi na dva načina. Prvi je preko kartice sa alatima Insert, u okviru koje se nalazi grupa alata Table na kojo se nalaze ikonice koje služe za brzo dodavanje i brisanje redova, kolona i ćelija.

Insert cell # 1 - dodavanje ćelije tabele.

Insert column # 2 - dodavanje kolone tabele.

Insert row # 3 - dodavanje reda tabele.

Delete row # 4 - brisanje reda tabele.

Delete column # 5 - brisanje kolone tabele.

Split cell # 6 - deljenje ćelije.

Merge cells # 7 - spajanje ćelija.

Drugi način je da označimo mesto u tabeli u odnosu na koje se želi dodati ili obrisati red, kolona ili ćelija, zatim desnim klikom se otvara padajući meni u okviru koga se mogu izabrati iste opcije.

33

6.5 Pomeranje, kopiranje ili brisanje tabele

Pomeranje tabele se vrši tako što se označi tabela i desnim klikom otvorimo padajući meni u okviru koga se klikne na Float element kako bi tabela mogla da se postavi bilo gde na stranici. Nakon toga se tabela pomera u zavisnosti od toga gde se želi postaviti.Takođe ukoliko želimo da kopiramo tabelu desnim klikom otvorimo padajući meni u okviru koga se klikne na Copy, postavimo kursor van menija i ponovimo radnju s tim da ovoga puta kliknemo na Paste. Ono što malo zbunjuje je to što Web Page kopira element preko elementa, tako da se može učiniti da niste ništa uradili, ali označavanjem tabele i pomeranjem uvidećemo da se ispod nalazi još jedna tabela.

Tabelu možemo obrisati tako što označimo tabelu i zatim pritisnemo taster Delete na tastaturi ili pojedinačnim brisanjem redova ili kolona.

6.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 Normal ali se on može formatirati i u drugi stil.

7 RAD SA SLIKAMA

7.1 Ubacivanje slike

34

Umetanje slika Trellian WebPage-om je veoma jednostavno. 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 bi bilo da se pre ubacivanja slika prvo sačuva ili objavi strana. Ovo omogućuje Trellian WebPage-u da automatski sačuva relativne reference ka slikama koje se ubacuju.

Postavimo kursor na mesto na koje želimo da ubacimo sliku. Slika se ubacuje klikom na ikonicu

, kada se otvara prozor Open u okviru koga se bira slika koja se želi ubaciti.

Takođe može se ubaciti i Rollover Image (pojavljivanje slike prelaženjem kursora preko orginalne slike) klikom na strelicu ispod ikonice Image i padajućem meniju odabrati Insert Rollover Image.

Nakon toga se pojavljuje prozor u kome je potrebno definisati sve potrebne parametre kao što su ime slike, lokaciju slika, alternativni tekst i eventualno link ka stranici u okviru sajta ili na internetu.

35

7.2 Podešavanje slike

Kada se jednom slika ubaci 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 desni klik, pa zatim iz padajućeg menija se izabere 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. Karakteristično je i opcija Use Map koja definiše koju mapu koristimo za određenu sliku, ona obuhvata područje na slici koje je klikabilno, tj može nas odvesti na drugu stranicu, sliku, tekst koji je definisan.Naime ukoliko želimo da kreiramo mapu, označimo sliku na kojo želimo da kreiramo mapu, zatim kliknemo na ikonicu Image Map.

36

Zatim se otvara prozor koji nam nudi da koristimo već postojeću mapu ili da kreiramo drugu. Unosom imena u polje i klikom na CREATE aktiviramo prozor u kome možemo napraviti mapu.

Mapa se na slici kreira tako što se u gornjem levo uglu može izabrati oblik kojim ćemo označiti deo slike koji će biti aktivan klikom miša na taj deo slike i vodiće na određenu lokaciju.

Takođe klikom na karticu Preview možemo videti kako zadata mapa radi, a na kartici Source možemo videti kao izgleda kod za tu funkcionalnost.

7.3 Alati za rad sa slikama

U meniju Tools nalazi se grupa alata Picture Tools koja se koristi za obradu slika. Među alatima se nalazi veliki broj opcija za izmenu boje, oblika, položaja, veličine, izgleda slike što omogućava

37

njhovo brzo i jednostavno editovanje unutar radnog okruženja, bez pokretanja drugih programa slične namene.

7.3.1 Izmena slikeUkoliko nismo zadovoljni slikom koju smo ubacili na stranicu možemo je izmeniti. Označimo sliku i klikom na ikonicu Edit u meniju Tools otvaramo sliku u programu koji je u Windows-u definisan za otvaranje slika (Photoshop, Paint, Office Picture Menager, Picasa).

7.3.2 Animacija slike - Gif animatorTrellian Web Page ima opciju za pravljenje animacije pomoću programa Gif animator koji se otvara klikom na ikonicu Animate u meniju Tools.

Kada se otvori Gif Animator potrebno je ubaciti nekoliko frejmova i podesiti kako bi dobili jednostavan efekat.

38

Frame origin

Left Position/Top Position − služi za pozicioniranje frejmova .

Undraw Method

Undefined/Leave − Frejm će ostati, novi frejm će biti prikizan iznad njega.

RestoreBackground − Pozadina će biti prikazana nakon svakog završenog frejma.

RestorePrevious − Prethodni frejm će biti vrćen ako je postavljen kao „ Leave.“

Frame Delay − služi za podešavanje kašnjenja prikazivanja frejma u milisekundama.

Background Color − služi za promenu boje pozadine.

Insert Blank Frame − služi za ubacivanje praznog frejma.

Insert Image − služi za ubacivanje slike.

Movie Properties − služi za prikazivanje karakteristika animacije..

GIF Animator Menu Options

New − služi za kreiranje nove animacije.

Open − služi za otvaranje već postojeće animacije.

Save − služi za sačuvavanje postojeće animacije.

39

Save As − služi za čuvanje postojeće animacije pod drugim imenom.

Export Compressed GIF − služi izvoženje (eksportovanje) animacije u fajl sa ekstenzijom .gif.

Live Dragging − automatski označen i omogućava prevlačenje slika.

Close − služi za zatvaranje GIF Animator.

Play Movie − služi za prikazivanje animacije.

Stop Movie − služi za zaustavljenje animacije.

Cut − služi za isecanje frejma.

Copy − služi za kopiranje frejma.

Paste − služi za lepljenje frejma.

Delete − služi za brisanje frejma.

Duplicate − služi za dupliciranje označenog frejma.

Crop to Frames − služi za isecanje frejma na istu veličinu kao animacija.

Resize Canvas − služi za promenu veličine pozadine animacije.

Goto − služi za kretanje po frejmovima.

Full Screen Preview − služi za pregledavanje animacije preko celog ekrana.

Movie Properties − služi za prikazivanje karakteristika animacije.

40

Image − služi za ubacivanje slike.

Text − služi za ubacivanje teksta.

Blank Frame − služi za unošenje praznih frejmova u animaciju.

Create HTML Code − služi za kreiranje HTML koda za ubacivanje animacije.

Apply Transition − služi za definisanje načina promene frejmova.

Flatten Current Frame − služi za Flattens currently selected frame.

Resize Frame − služi za promenu veličine frejma.

Rotate Frame − služi za rotiranje frejma.

Adjust Brightness − služi za podešavanje osvetljenja.

Adjust Gamma − služi za podešavanje boja.

Movie Frames − služi za prikazivanje toolbara sa frejmovima.

Movie Properties − služi za prikazivanje toolbara sa podešavanjima vezanim za animaciju.

7.3.3 Vraćanje slike u prvobitno stanje

Da biste vratili sliku u prvobitno stanje, u okviru menija Tools kliknite na ikonicu Restore.

41

7.3.4 Transformacija, primena filtera i promena boje na slici

Slike možemo izložiti efektima koji mogu biti pozvani iz grupe alata Picture Tools.

Sliku možemo zarotirati, okrenuti, odnosno risemplovati čime se smanjuje odnosno povećava rezolucija piksela u slici, nakon toga se izabere odgovarajući risemplujući algoritam. Klikom na ikonicu Transform u okviru menija Tools, otvara se padajući meni u kojem treba izabrati efekat koji se želi.

WebPage uključuje niz različitih filtera za slike koji dodaju specijalne efekte na slike. Filtere možemo aktivirati klikom na ikonicu Filter u meniju Tools, gde otvara padajući meni sa mnoštvom filtera od kojih treba izabrati onaj koji najviše odgovara.

U okviru padajućeg klikom na Real Time Filters otvara se novi prozor u kojem možemo podesiti neke nove efekte.

42

Jedan od njih je i Wave koji primenom na sliku daje talasastu sliku.

Parametri koji su definisani su učestanost, intezitet svetla, intezitet oscilacija.

U okviru grupe alata Picture Tools imamo ikonicu Modify Color, klikom na nju otvara se padajući meni sa opcijama za izmenu boje slike. Boju možemo promeniti u crno-belu, suprotnu od postojećih, sami da izaberemo, podesimo osveteljenj i kontrast.

Korišćenjem opcije Gamma možemo promeniti boje na slici koristeći se prozorom koji se pojavljuje klikom na opciju.

43

Unošenjem kore pomenutih vrednosti u RGB (Red Green Blue) formatu i dobijamo sledeću razliku u slikama.

7.3.5 Photoshop plaginUkoliko želimo da primenimo neke od plaginova iz programa Photoshop, treba označiti sliku i kliknuti na ikonicu Plugin u meniju Tools.

Da bi koristili plaginove iz programa Photoshop potrebno je podesiti putanju do plagina (C:\Program Files\Adobe\Photoshop\Plugins) i zatim kliknuti na OK

44

Trellian WebPage će uvesti sve Photoshop plaginove nađene u označenom direktorijumu. Da bismo primenili plagin potrebno je da označimo sliku, kliknemo na Plugin u meniju Tools, izaberemo plagin sa liste i kliknemo na Apply.

7.3.6 Konvertovanje slika u druge formate

Ukoliko želimo da konvertijumo određenu sliku u neki drugi format, označimo sliku i kliknemo na ikonicu Convert u meniju Tools, gde će se otvoriti padajući meni sa dostupnim formatima na koji trebamo da kliknemo.

45

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

8.1 Kreiranje linkova unutar same strane

Da bi se napravio link unutra same strane, kako bi korisnik mogao da prelazi 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.

Anchor se kreira tako što se označi element kojem želimo da dodamo Anchor i klikne se na ikonicu Anchor u kartici Insert, grupe alata Links.

Nakon toga se pojavljuje prozor u koji se unosi ime Anchor-a.

Zatim se označi element koji će biti linkovan na element kome je dodeljen Anchor. Link se postavlja klikom na ikonicu Hyperlink iz grupe alata Links.

Linkovanje se vrši tako što se na kraju linka doda znak „#“ i ime Anchor-a koji smo uneli.

46

8.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 potrebno je kliknuti na ikonicu Hyperlink iz grupe alata Links i u otvoreni prozor uneti željenu adresu.

8.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 označi slika i klikne na ikonicu Hyperlink iz grupe alata Links i upiše željeni URL.

8.4 Linkovanje dokumenata

Dokument može biti bilo koji dokument kao što je Word dokument, PDF 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.

Da bi se linkovao dokument potrebno je kliknuti na ikonicu Hyperlink iz grupe alata Links i u polje URL uneti adresu tačnu lokaciju i ime fajla vodeći računa o ekstenziji fajla.

47

8.5 Kreiranje E-mail linkova

Linkovanje ka e-mail adresama jedno je od specifičnih linkova. Prave se na isti način kao i svi linkovi iznad, samo što se umesto putanje do fajla na hard disku ili adrese web stranice napise e-mail adresa kontakt osobe.

Potrebno je u polje URL napisati mailto: i onda uneti e-mail adresu kontakta.

8.6 Uklanjanje linkova

Ukloniti link sa linkovanog elementa možemo uraditi desnim klikom na linkovani element otvoriće se padajući meni u okviru koga treba kliknuti na Unlink.

48

9 FORME

Peta grupa alata koja se pojavljuje u meniju Insert je Form, koja ima za cilj da pomogne korisniku u kreiranju raznih vrsta formi.

Forme pružaju mehanizam koji posetiocu sajta omogućuje da šalje poruke. Ovo može biti jednostavan boks za pisanje e-mail poruka ili kompleksna forma poput pretraživanja za katalog i slanja porudžbine nabavljaču. Forme prikupljaju 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.

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”. 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.

Ono što je vrlo važno svaki element forme ima svoje ime i svoju vrednost. OBAVEZNO upišite ime elementa, jer to ime trebate da koristite prilikom obrade forme.

49

9.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.

Zatim je potrebno kliknuti na ikonu 1 (Insert form) sa slike i ubaciti formu na stranicu. U zavisnosti kakva formu želimo možemo kombinovati različite funkcionalnosti.

Insert Form # 1- služi za ubacivanje forme na stranicu.

Radio Button # 2 - služi za ubacivanje radio dugmeta.

Check Box # 3 - služi za ubacivanje check polja.

Text Field # 4 - služi za ubacivanje tekstualnog polja u koje možemo unositi kratke tekstualne sadržaje (ime, prezime, korisnicko ime).

Password Field # 5 - služi za ubacivanje polja u koje će se ukucavati lozinke, tj. prilikom kucanja slova neće biti vidljiva.

File Upload File # 6 - služi za ubacivanje polja za uploadovanje fajlova.

Insert Fieldset # 7 - služi za ubacivanje delova forme čiji podaci će biti posebno obrađeni.

Submit Button # 8 - služi za ubacivanje potvrdnog dugmeta čijim klikom se šalju podaci iz forme na obradu.

Reset Button # 9 - služi za ubacivanje dugmeta za otkazivanje čijim klikom se brišu svi podaci iz forme.

Text Area # 10 - služi za ubacivanje tekstualnog polja u koje možete uneti više redova teksta (komentar, primedba, napomena, pitanje).

Drop Down Selection # 11 - služi za ubacivanje polja sa predefinisanim vrednostima u kome se može izabrati samo jednu vrednost (dan u mesecu, godina rođenja)

List Box Selction # 12 - služi za ubacivanje polja sa predefinisanim vrednostima u kome se može izabrati više vrednosti istovremeno.

9.2 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.

50

Na formi ukucamo reč “Ime i prezime: ” koja će se odnositi na prvo polje forme i zatim kliknemo na ikonicu # 4 i dobijemo sledeći rezultat.

Jedno ovako polje može biti dodato i za slanje e-mail adrese, komentar i slično…

9.3 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.

Unesite rečenicu „Da li zelite da primate naš newsletter?“ i ispod toga unesite radio dugme klikom na ikonicu # 2, zatim unesite tekst „Da“, odnosno „Ne“.

Ono što je veoma bitno je da svim radio dugmadima date isto ime npr. „newsletter“ kako bi pripadali istoj grupi i mogli da se međusobno isključuju.

51

U slučaju da želimo da jedan od radio dugmeta bude označen štikliraćemo opciju Checked koja se nalazi u okviru prozora Input Properties.

9.4 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.

Unesite rečenicu „Oblasti koje Vas zanimaju:“ i ispod toga unesite check dugme klikom na ikonicu # 2, zatim unesite tekst „Mobilno računarstvo“, „Internet marketing“ i „Internet tehnologije“.

U slučaju da želimo da jedan od check dugmeta bude označen štikliraćemo opciju Checked koja se nalazi u okviru prozora Input Properties.

9.5 Dodavanje dugmadi za potvrđivanje i otkazivanje

Forma se šalje kada posetilac klikne na dugme Submit - 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 - Reset.

52

Dugme za potvrđivanje se dodaje klikom na ikonicu #8 i služi za slanje forme na obradu.

Dugme za otkazivanje se dodaje klikom na ikonicu #9 i služi za brisanje svih unetih podataka u formu.

Dodavanjem još nekih funkcionalnosti ona bi popunjena na kraju trebala da izgleda ovako:

Forma je sada završena. Naravno rad se treba sačuvati na ikonicu Save.

53

10 OBJEKTI

Četvrta grupa alata koja se pojavljuje u meniju Insert je Object, koja ima za cilj da pomogne u prilikom ubacivanja eksternih i internih skripti, metapodataka, komentara i drugih funkcionalnosti.

Objekti koje koristimo su uobičajene zahtevi koji se javljaju pred korisnika prilikom kreiranja web stranica. Vrlo često se koristi IFrame, External Script, DIV Element...

IFrame # 1 - služi za ubacivanje ifrejma na stranicu, tj dela druge stranice u okviru postojeće stranice.

Horizontal Rule # 2 - služi za ispisivanje horizontalne linije.

DIV Element # 3 - služi za formiranje posebnih elemenata u okviru stranice.

Time/Date # 4 - služi za unošenje trenutnog vremena i datuma.

TITTLE Tag # 5 - služi za ubacivanje naslova koji će se prikazati prilikom otvvaranja stranice na vrhu prozora browser-a

META Tag # 6 - služi za unos reči koji najbliže opisuje stranicu, oni naime nisu vidljive, ali omogućavaju pretraživačima indeksiraju određene pojmove vezane za tu stranicu

Marquee # 7 - je opcija koja je na početku HTML-a bila veoma popularna, pa onda veoma kritikovana, a zatim poslata u zaborav. Međutim ima još uvek praktičnih primena na sajtovima. Ova ikonica služi za unos teksta koji se kreće po ekranu u zavisnosti od definisanog smera.

Comment # 8 - služi za unos komentara u kod same HTML stranice, naime unosi se opis određenog dela koda na osnovu kog će neki drugi programe prilikom dorade koda shvatiti šta je tu zapravo rađeno.

Embedded plugin # 9 - služi za ubacivanje plaginova ili interfejsa nekog programa preko koga otvaramo i manipulišemo fajlom ( Windows media player plugin, JW plugin).Insert HEAD Tag # 10 - služi za ubacivanje HEAD taga u kome se definišu naslov stranice, meta tagovi, upotreba eksternih fajlova za definisanje izgleda stranice, upotreba eksternih aplikacija na stranici ...Insert Script # 11 - služi za ubacivanje scripti na stranicu koje mogu biti interne i eksterne skripte, Java apleti, kao i već postojeće skripte zabrane desnog klika ili zabrane selektovanja teksta.HTML markup # 12 - služi za ubacivanje cele HTML stranice ili dela HTML koda zapisanog u okviru eksternog fajla ekstenzije .html ili .htm.

ActiveX Control # 13 - se koristi za umetanje multimedijalnih i drugih objekata na stranici.

54

Line Break # 14 - se koristi za ubacivanje taga <BR>, odnosno <BR clear=all> koji se odnosi na razmak između teksta.

10.1 Ubacivanje IFrame na stranicu

IFrame je prikazivanje sadržaja sa drugog URL-a na stranici. IFrame možete ubaciti klikom na IFrame #1 u Insert meniju.

URL se može podesiti dvoklikom na IFrame gde se otvara prozor u kome se može uneti eksterna stranica bila da je ona u okviru samog sajta ili sa www-a

10.2 Ubacivanje Marquee na stranicu

Marquee je tekst koji klizi preko stranice. Da bi ubacili marquee na stranicu potrebno je da kliknemo na Marquee # 7 u Insert meniju i pojaviće se tekst „ Insert text here“ koji trebamo izmeniti.

55

Takođe u okviru prozora Marquee Properties možemo podesiti tekst, smer kretanja teksta, brzina prolaska i ponovnog pojavljivanja.

10.3 Ubacivanje komentara na stranicu

Komentari su tekst koji je vidljiv u kodu stranice i ne može se videti prilikom pregledavanja. Za unos komentara koristi se meni Insert i klikne se na ikonicu Comment # 8.

Unesete komentar u prozor Comment Properties i kliknete na OK. Komentar će biti vidljiv u izvornom kodu stranice.

10.4 Ubacivanje Java apleta na stranicu

Da biste dodali Java Appletna stranicu, potrebno je da u meniju Insert kliknete na padajući meni ikonice Insert Script # 11 i izaberete Java Applet.

56

Zatim u prozoru Open pronađete željeni fajl sa ekstenzijom .c lass i kliknete na Open, kada se otvara fajl Applet Properties u okviru koga se nalaze dve kartice Settings i Parameters.

Code - Putanja do fajla sa ekstenzijom .c lass.

Code base - Putanja do apleta ako je relativna putanja definisana u parametru koda.

Archive - Putanja do Java archive ili zip fajla.

Alt HTML - Tekst koji se prikazuje u slučaju da aplet ne može da se pokrene odnosno da se vidi.

Width - Definiše širinu apleta.

Height - Definiše dužinu apleta.

Ako su apletu potrebni određeni parametri klikne se na Parameters karticu i u okviru nje se definišu unosom imena i vrednosti parametara koje aplet zahteva.

57

11 PRIMER IZRADE WEB SAJTA

Ovde će biti prezentovana izrada jednostavnog web sajta za prezentaciju prodavnice muzičkih instrumenata. Realizacija ovog sajta pokazaće sve značajnije mogućnosti programa Trellian WebPage i načine njegovog efikasnog korišćenja. Radi što bolje izrade sajta potrebno je prvo samu strukturu i sve ideje staviti na papir.

11.1 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 Trellian. To je folder gde ćemo čuvati sve naše web stranice i ostale potrebne resurse koje ćemo koristiti na našem web sajtu. Zato je potrebno u okviru njega kreirati još jedan folder „Images“ za sve slike koje ćemo korisiti, a nakon toga folder „js“ i folder „css“.

11.2 Izrada prve stranice za web sajt

Prva stranica koja se kreira je takozvana index stranica sa ekstenzijom .html i potrebno je istu smestiti u folder Trellian.

Stranicu kreiramo tako što kliknemo na ikonicu New, gde će nam se pojaviti prozor „ Welcome

58

to Webpage“ koji predstavlja uvod u podešavanja stranice.

Klikom na Next dolazimo do sledećeg prozora u kome definšemo ime stranice, autora, kratak opis i ključne reči.

59

Ime stranice je često vrlo bitno za pretraživače i poželjno je da se u samom imenu da opis te strane ili same firme u nekoliko reči. Ponekad je dobro staviti i adresu firme ili broj telefona radi lakšeg pronalaska lokacije i kontakta date firme.

U sledećem prozoru definišemo font i pozadinu.

60

Klikom na Next dolazimo do četvrtog prozora u kome definišemo podešavanja vezana za linkove.

A u poslednjem petom prozoru definišemo podešavanja vezana za Heading-e.

61

Prilikom kreiranja stranice možemo ostaviti sva polja blanko i potrebne podatke i vrednosti uneti naknadno klikom na ikonicu Properties u okviru grupe alata Page u meniju View.

Sada je potrebno sačuvati stranicu klikom na Save As i unosom imena stranice „index” i odabirom ekstenzije .html.

Ukoliko nismo u wizardu „ Welcome to Webpage“ definisali izgled pozadine to možemo uraditi na sledeći način. Klikom na ikonicu Properties u meniju View otvara se prozor Page Properties i

njemu smo definisali font (Calibri, 12, # 000000) i pozadinsku sliku bg.jpg unošenjem relativne putanje do nje (images/bg.jpg) i boju (#1A2857).

62

Nakon čega stranica izgleda ovako.

Slike se dodaju klikom na ikonicu Image u okviru menija Insert. i ono što je posebno bitno je da

desnim klikom na sliku označimo funkciju Float koja omogućava raspoređivanje slike bilo gde na stranici.

63

Na ovaj način unosimo sledeće slike iz foldera images. Prvo unosimo logo firme na stranicu, a

zatim i okvire u koje ćemo smestiti tekst i slike.

Dodavanjem unapred pripremljenih grafičkih elemenata stranica je dobila ovakav izgled.

Meni možemo kreirati upotrebom tabele.

Tabela se kreira klikom na karticu menija Insert i u okviru nje ikonicu Table, gde će se otvoriti prozor Table Wizard u okviru koga ćemo definisati broj kolona (4) i redova (1). Desnim klikom na označenu tabelu otvara se padajući meni u kome aktiviramo opciju Float i pozicioniramo tabelu gde nam to odgovara.

64

U svaku ćeliju tabele ubacujemo unapred pripremljenu sliku dugmeta. Ubacujemo Rollover Image što predstavlja pojavljivanje druge slike prelaskom kursora preko orginalne slike.

Dobijamo sledeći meni na stranici koji ujedno i linkovan ka drugim stranicama.

Sada dolazi na red dodavanje tekstualnih i grafičkih elemenata koji će dati smisao stranice.

Prvo što radimo dodajemo naslov stranice. To se radi na sledeći način. Kliknemo na stranicu gde želimo da postavimo naslov stranice i ukucamo sam naslov.

65

a nakon toga označimo naslov i dodelimo mu veličinu Heading 1.

Nakon toga na isti način dodajemo uvodni tekst na stranicu i sva podešavanja vršimo u okviru kartice Home.

Ostalo je da dodamo sliku gitare (p4.gif) iz foldera images.

66

Dodavanjem grafičkih i tekstualni elemenata dobijamo konačan izgled prve stranice.

11.3 Dodavanje ostalih stranica

Ostale stranice se prave na isti način. Kako bismo uštedeli na vremenu i naravno kako ne bismo ponovo pravili sve ponovo nakon stvorenog okvira stranice potrebno je istu kopirati više puta i preimenovati ih u sledeće stranice onam.html, proizvodi.html i kontakt.html.

67

Time smo uštedeli na vremenu i sledeći korak je dodavanje grafičkih i tekstualnih elemenata do konačnog izgleda stranice.

11.4 CSS ili Kaskadne Liste Stilova

Ovaj program kao što je već pominjano nema podršku za CSS (Cascading Style Sheets). CSS predstavlja set instrukcija ili pravila koji su smešteni u odvojenom fajlu ili u samom source kod-u web stranice. CSS objašnjava web čitaču (browser-u) kako da prikaže (render-uje) elemente koji se nalaze na web stranici. CSS fajl je ima ekstenziju .css i smešta se najčesće u folder css ili style.

68

U primeru je prikazan jedan CSS kako bismo pokazali način na koji on funkcioniše i time zainteresovali da pročitate više o tome klikom na ikonicu CSS u meniju Resources ili pretraživanjem Interneta. Klikom na ikonicu CSS se otvara prozor u kome se nalazi upustvo za CSS na engleskom jeziku.

Da bi smo kreirali css fajl potrebno je otvoriti Notepad ili neki drugi HTML editor (preporučujem Notepad++) i njemu uneti potreban kod. U prikazanom kodu smo definisali izgled stranice i to sledeće elemente: body - telo stranice, h1 - heading 1, p - paragraf i td - ćelije u okviru tabele. CSS sintaksta se sastoji od: SELEKTORA, OSOBINE i VREDNOSTI ili kako se to u kodu prikazuje SELEKTOR { OSOBINA: VREDNOST; }.

Dakle možemo primetiti da sektor BODY ima osobinu BACKGROUND i vrednost URL(../IMAGES/BG.JPG) REPEAT-X TOP #1A2858; zatim osobinu FONT-FAMILY koja ima vrednost CALIBRI, ARIAL, HELVETICA, SANS-SERIF;...

Osobine i moguće vrednosti imate u prilogu uputstva u dokumentu CSS_komande.pdf.

69

Ovim kodom je definisan izgled svake stranice koja u kodu između HEAD tagova ima sledeću liniju koda <LINK media=all href="css/standard.css" type=text/css rel=stylesheet> koji linkuje fajl sa ekstenzijom CSS.

Ovo predstavlja eksternu listu stilova, a postoje još i interna (kada se stil ubaci između HEAD tagova) i inline ( kada dodajemo određeni stil samo jednom elementu).

U samom radu je primenjena predstavljena lista stilova na stranicama Naslovna, O nama i Proizvodi, dok je na stranici Kontakt grafički elementi su podešeni preko samog programa. Kao što se vidi nema uočljivih razlika.

70

11.5 Izrada galerije slika

Galerija slika se može napraviti pomoću tabele i ubacivanja slika unutar polja tabele. Međutim da bi poboljšali izgled galerije koristićemo gotov JavaScript kod Lightbox2 (može se preuzeti na adresi http://www.huddletogether.com/projects/lightbox2/#download ) i reflect.js (može se preuzeti na adresi http://cow.neondragon.net/stuff/reflection).

71

Refleksija

Potrebno je kreirati js folder u kojem će se nalaziti JavaScript kodovi u fajlovima sa ekstenzijom .js i oni se ubacuju na stranicu putem unosa koda direktno na stranicu ili klikom na ikonicu JavaScript u okviru grupe alata Tools u meniju Tools.

Potrebno je uneti sledeći kod između <HEAD> i </HEAD> taga u Source kodu stranice.<script src="js/reflection.js" type="text/javascript" ></script>ili unosom preko interfejsa samog programa.

Da bi dobili efekat refleksije potrebno je svakoj slici da dodamo „class=reflect“ u Source kodu. Klikom na tab Source prikazuje se kod stranice, pritisnemo CTRL+F i otvara nam se prozor Find, unesemo ime slike i kliknemo na Find Next. Kada smo pronašli sliku potrebno je da iza taga „IMG“ unesemo „class=reflect“.

72

Unošenjem taga prilikom pregleda stranice možemo primetiti da svaka slika ima refleksiju.

Lightbox

Kada smo preuzeli fajlove potrebno ih je raspakovati i postaviti u odgovarajuće foldere css, js i images.

73

U js folderu se nalaze JavaScript kodovi u fajlovima sa ekstenzijom .js i oni se ubacuju na stranicu putem unosa koda direktno na stranicu ili klikom na ikonicu JavaScript u okviru grupe alata Tools u meniju Tools.

Potrebno je uneti sledeći kod između <HEAD> i </HEAD> taga u Source kodu stranice.<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script><script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script><script src="js/lightbox.js" type="text/javascript"></script>ili unosom preko interfejsa samog programa.

Posto postoji već folder images potrebno je uneti slike u već postojeći folder.

74

Lightbox omogućava da klikom na sliku se otvori veća slika sa više detalja ili možda neka druga slika tog proizvoda.

Jako je bitno da svi elementi na stranici budu „iza teksta“, a to postižemo klikom na ikonicu Send Below Text u grupi alata Arrange u meniju Home.

Sada je potrebno da svaku sliku linkujemo ka željenoj slici. Kada smo to podesili, na red dolazi unos atributa „ rel="lightbox" “ iza linka ka slici koja se otvara klikom na sliku.

Klikom na sliku otvara se novi prozor u kome je prikazana linkovana slika, a pozadina se zatamljuje.

75

11.6 Izrada kontakt forme

Kontakt forma je jedan od bitnih elemenata svakog sajta. Preko nje se ostvaruju kontakti, protok informacija i potencijalno poslovna saradnja.

Ima raznih oblika forme i uglavnom zavisi od projekta u kom obliku će se ona pojaviti.

Ovde smo konkretno primenili funkcionalnosti koje su objašnjene u glavi 8 ovog upustva. Prvo smo kliknuli na ikonicu Insert Form iz grupe alata Form u meniju Insert. Zatim smo uneli tekstualni deo (Ime i prezime, Adresa, Kompanija, Email adresa), a ispod uneli smo polja klikom na ikonicu Text Field.

Nakon toga klikom na List Box Selection otvorio nam se prozor Selection Properties u koji su unešene vrednosti i označeno je polje Multiple Selection.

76

Zatim smo dodali „radio“ dugme i uneli tekst pored njega.

Kada smo to uradili klikom na ikonicu Text Area unosimo polje u kojoj se vrši ispisivanje poruke.

I na kraju smo uneli dva dugmeta klikom na ikonice Submit Button i Reset Button koje služe za obradu i slanje forme. Dvoklikom na dugme otvara se prozor Input Properties u kome se definišu vrednosti dugmeta.

11.7 Pregledavanje stranice u browser-u

Stranice se mogu pregledavati u browser-u na nekoliko načina. Prvi i najednostavniji je iz samog programa, naime Trellian WebPage ima podršku za pregledavanje stranice u Internet Exploreru i Firefox-u. To činimo tako što kliknemo na logo programa i kliknemo na Priview in Browser

ili jednostavno klikom na ikonicu za Internet Explorer ili Firefox.

77

11.8 Objavljivanje sajta

Trellian WebPage ima svoj FTP program koji možete da prebacite stranice na server, potrebno je da znate hostname (ftp.mdur.net), username i password. Ove podatke dobijate od kompanije

koja hostuje sajt. Kada se konektujete to izgleda ovako.

Sada je potrebno pomocu strelica na sredini prozora da prebacimo fajlove.

78

Nakon završetka ukucamo adresu sajta u browser i proverimo da li sajt funkcioniše.

79

12 REFERENCE

1. http://www.trellian.com/webpage/

2. http://www.trellian.com/forum/viewforum.php?f=11

3. http://www.w3schools.com/

4. http://www.lokeshdhakar.com/projects/lightbox2/

5. http://cow.neondragon.net/stuff/reflection/

80