Izrada web stranice FRONTPAGE skripta iz informatike za 3. razred komercijalnog smjera Tatjana Radiã, prof. Sadržaj: Ponešto o Web stranicama i njihovoj izradi ..................................................................................... 3 MS FrontPage – program za dizajniranje web stranica - osnove ...................................................... 4 Stvaranje Web sjedišta ................................................................................................................ 4 Izgled osnovnog ekrana, njegovi dijelovi i èemu služe ................................................................ 5 Struktura web sjedišta ................................................................................................................. 6 Izgled prozora web stranica ........................................................................................................ 7 Spremanje web stranica............................................................................................................... 8 Otvaranje web stranica ................................................................................................................ 9 Izrada i ureðivanje web stanice........................................................................................................ 9 Obavezne tablice ......................................................................................................................... 9 Sadržaji web stranice................................................................................................................. 10 Ureðivanje web stranice i njezinih dijelova ............................................................................... 11 Aktivni sadržaji......................................................................................................................... 11 Linkovi.................................................................................................................................. 12 Dodatak – ureðivanje slika (Microsoft Office Picture Manager) .................................................... 16 2 Ponešto o Web stranicama i njihovoj izradi Web stranice su poput stranice knjiga ili dokumenta pisanog u Wordu, koje možemo listati. Razlikuju se po tome što su pisane u posebnom jeziku kojeg zovemo HTML (Hypertext Markup Language), i omoguãuje nam sasvim novu dimenziju "listanja knjige", i to obiènim klikom pomoãu linkova koji nas vode s jednog podatka na drugi. Takve web stranice osim teksta sadrže i nepokretne i pokretne slike te zvuk. Ukoliko ne želite ili nemate vremena uèiti HTML jezik, možete se poslužiti nekim od HTML editora koji omoguãuju vizualni pregled stranice pri samoj izradi (tzv. Design), a jedan od takvih programa je i Microsoft FrontPage. Da bi web stranice bile dostupne na Internetu svima koji ih žele vidjeti moraju biti spremljene na nekom raèunalu koje je 24 h dnevno dostupno svima, a ne na našem raèunalu koje palimo kada je to nama potrebno. Takva raèunala koja su non-stop dostupna svima nazivamo serveri. Evo još nekoliko pojmova koji ãe vam biti potrebni za praãenje ove skripte: Web sjedište (Web Site) – smislena skupina nekoliko web stranica koja obraðuje odreðenu temu i èije su stranice povezane linkovima – ima svoju adresu npr. www.iskon.hr Web stranica (Web Page) – osnovni dio od kojeg se sastoji web sjedište kao npr. jedan list papira u knjizi Webmaster – osoba koja izraðuje web stranicu Link ili veza – mjesto na web stranici koje postavljanjem miša mijenja oblik iz strelice u ruku, a klikom nas vodi na drugu web stranicu na našem sjedištu, ili izvan njega Server – raèunalo na kojeg smještamo naše web sjedište, kako bi ga mogli pregledavati svi korisnici Interneta …a da ne zaboravimo, osnovna pravila pri izradi web sjedišta ukoliko želite zadržati posjetitelje su: Preglednost stranice – posjetitelj vrlo brzo gubi interes za stranicu na kojoj ne može pronaãi željeni podatak Brzo uèitavanje podataka prikazanih na stranici Zanimljiv sadržaj – informacije i podatci koje nudi stranica ne mogu biti zanimljivi baš svim posjetiteljima, ali moraju biti zanimljivi ciljanoj skupini (npr. stranica sa igrama mora biti zanimljiva mlaðoj populaciji koja takve stranice posjeãuje) Èesto ažuriranje stranice – dodavanje novih podataka ili zanimljivih sadržaja, koji ãe "natjerati" posjetitelja da se opet vrati i pogleda što ima novo Vizualna privlaènost stranice – boje koje "bodu oèi" ili su neukusno složene gube na zanimljivosti bez obzira na sadržaj koji nude Ne smije biti "puknutih" linkova koji nigdje ne vode Još samo ukratko, koji sve to poslovi ukljuèuju izradu jednog web sjedišta (životni vijek): Osmisliti strukturu web sjedišta Izrada web sjedišta (izrada pojedinih web stranica, ubacivanje sadržaja, ureðivanje i meðusobno povezivanje linkovima) Testiranje pomoãu Web preglednika (npr. Internet Explorer, ali je dobro provjeriti i druge preglednike) Postavljanje web sjedišta na server Otvaranje web sjedišta preko Interneta razlièitim preglednicima, te ponovno testiranje Eventualne izmjene i ponovno postavljanje na server izmijenjenih dijelova web sjedišta 3 MS FrontPage – program za dizajniranje web stranica - osnove Program pokreãemo iz Start izbornika: Start → Svi programi → Microsoft Office → Microsoft Office FrontPage 2003 U FrontPage-u možemo izraðivati i zasebne stranice, ali i cjelokupna web sjedišta (web site). Buduãi da je izrada zasebne stranice jednostavnija i samo je dio izrade web sjedišta u ovoj skripti ãe biti objašnjeno kako napraviti web sjedište koje se sastoji od nekoliko web stranica. Poèetna stranica koja se prva otvara obièno se naziva index.html. Ostalim stranicama možete dati ime koje god želite, ali bi se trebali držati slijedeãih pravila: 1. U imena datoteka ne stavljati hrvatska slova èãšðž, nego umjesto toga czs 2. Nije preporuèljivo stavljati niti razmake, nego umjesto njih znak podcrte _ Primjer imena: dobro: skolska_stranica – loše: školska stranica Stvaranje Web sjedišta Postupak izrade novog web sjedišta: 1. Prvo se preporuèuje napraviti praznu mapu sa imenom web sjedišta u koju ãemo spremati sve što ãe naše sjedište sadržavati (npr. trgOS). 2. Otvorimo izbornik na alatu New i odaberemo Web Site 2 3. Izmeðu ponuðenih predložaka odaberemo Empty Web Site i klikom na Browse pronaðemo i oznaèimo mapu koju smo napravili kako bismo u nju spremili cijeli web. Mapu nemojte otvoriti sa dvoklikom nego ju samo oznaèite i kliknite Open, a zatim OK. 2 1 3 4 5 4. Dobili smo novi prazno web sjedište (web site) sa jednom poèetnom stranicom index.htm 4 Izgled osnovnog ekrana, njegovi dijelovi i èemu služe 1 2 3 4 5 a b c 6 d 7 8 1. 2. 3. 4. Naslovna traka Traka izbornika Alatne trake (dvije) Kartice stranica (web site) – omoguãuje lagano prebacivanje izmeðu web site i kasnije otvorenih stranica 5. Radni prostor – web sjedište na kojem radimo 6. Razlièite vrste pogleda na web sjedište, od kojih ãemo koristiti: a. Folders – prikazuje sadržaj mape u kojoj se nalazi sve što je potrebno za web sjedište (web stranice, slike, zvukovi…) kao u Windows Exploreru b. Remote Web site – kada web sjedište bude gotovo omoguãiti ãe nam prebacivanje svih sadržaja na server c. Navigation – izrada web stranica od kojih ãe se web sjedište sastojati, njihova struktura d. Hyperlinks – shema veza (hiperlinkova) kojima su web stranice povezane 7. Alatna traka za crtanje (Drawing) – ukoliko je nema, ukljuèuje se klikom na alat alatnoj traci na vrhu prozora. 8. Statusna traka u Za poèetak ãe nam trebati pogled Navigation u kojem ãemo napraviti web stranice od kojih ãe se sastojati naše web sjedište i odmah odrediti njegovu strukturu (pogledajte prvi korak u izradi web sjedišta), kako ãemo pojedine web stranice naknadno povezati. Naravno da ãe se i kasnije u bilo kojem trenutku kada veã odmaknemo sa izradom našeg web sjedišta moãi vratiti u ovaj pogled kako bismo promijenili strukturu postojeãih web stranica ili dodali nove. 5 Struktura web sjedišta Osmisliti strukturu web sjedišta se èini vrlo jednostavno, što vam može i biti ako se do sada izraðivali mentalne mape. Bitno je odrediti jednu poèetnu stranicu (indeks.html) i onda joj dodavati podstranice (djecu) kojom dijelimo „prièu web sjedišta“ na poglavlja. Naravno da i tim prvim podstranicama možemo dalje dodavati „djecu“, te one postaju „roditelji“. Prvo ãemo se u pogledima web-site prebaciti na Navigation. Za izradu stranica koristi ãemo alatnu traku u gornjem desnom uglu: i njezin alat New Page. Najbolje je odmah (bez ikakvog klikanja sastrane) nastaloj stranici New Page desnim klikom promijeniti ime, jer ãe kasnije preimenovanje uzrokovati da ãe ime datoteke ostati isto (New Page), a promijeniti ãe se samo naslov stranice, pa ãemo morati raditi dupli posao kako bismo stranice u mapi (Folder) razlikovali. Dalje podreðene stranice pravimo na isti naèin, ali je važno da se prethodno klikom odabere stranica (roditelj) kojoj izraðujemo podstranicu (dijete). Prvi puta ãe to biti index, a kasnije može biti bilo koje njeno dijete. Evo primjera jedne strukture web sjedišta: Nakon što smo u strukturi napravili sve stranice od kojih ãe se sastojati naše web sjedište (ili barem mislimo trenutno da su to sve stranice) imajte na umu da su to tek prazni „papiri“ koje tek treba osmisliti, ispisati i urediti. Naravno da se naknadno ovako napravljena struktura može mijenjati: povlaèenjem djeteta drugom roditelju možemo premještati stranice ako smo ih krivo smjestili brisati stranice stvarati nove stranice mijenjati imena stranicama 6 Izgled prozora web stranica Kada su u strukturi nastale pojedinaène stranice, sada ih treba popuniti i urediti. Odabrati stranicu na kojoj želimo raditi vrlo je jednostavno: dvokliknemo ju u strukturi i otvara se nova kartica sa njenim imenom, te nam tako omoguãuje jednostavno prebacivanje izmeðu pojedinih stranica i cijelog web sjedišta. Trebate samo za poèetak uoèiti da se je pogled web sjedišta (site) kada smo otvorili neku od stranica promijenio u pogled web stranice koji je objašnjen na slijedeãoj slici. 1 a 2 c b 4 3 d 5 1. Kartica web site-a (trenutno ju ne gledamo), ali se možemo na nju lako prebaciti 2. Kartica otvorene web stranice index.htm koju trenutno gledamo 3. Kartica otvorene web stranice film.htm koju trenutno NE gledamo (ukoliko nije spremljena ponuditi ãe nam spremanje) 4. Zatvaranje stranice koju trenutno gledamo (dakle u ovom sluèaju indeks.htm) 7 5. Pogledi web stranica: a. Design –za ureðivanje web stranice naèinom WYSIWYG (What You See Is What You Get – što vidiš to ãeš i dobiti) b. Code – izrada web stanice u HTML-u tj. originalni HTML kôd stranice c. Split – kombinacija Design i Code pogleda, u kojem možemo vidjeti koji dio HTML koda odgovara nekom dijelu naše stranice, i uoèiti promjenu na kôdu kada nešto u Designu promijenimo (odlièno je za uèenje HTML-a) d. Preview – pregled stanice kako ãe izgledati kada se otvori na Internetu, no ima odreðena ogranièenja, pogotovo za linkove, tako da je dobar za provjeru ureðenosti stranice, ali za kasniju provjeru linkova bi stranicu trebalo otvarati u nekom od preglednika npr. IE ili Google Chrome Mi ãemo koristiti poglede Design i Preview, jer se neãemo baviti HTML kôdom. Nakon što smo bilo što upisali i/ili uredili u pogledu Preview, stanicu kao i u svakom drugom programu moramo spremiti. Spremanje web stranica Web stranica na kojoj samo bilo što mijenjali se mora obavezno spremiti i na to nas upozorava zvjezdica pored imena datoteke na njezinoj kartici. Osim toga, bitno nam je da li je stranica pohranjena ili ne kada ju želimo pogledati u nekom vanjskom pregledniku, npr. Internet Exploreru. Preglednik neãe dati stvarni izgled stranice ukoliko ona nije prije otvaranja spremljena. Dakle prvo moramo stranicu spremiti, pa tek onda pogledati u pregledniku. Isto tako ako nam je stranica veã otvorena u pregledniku, nakon što smo promijeniti i spremili stranicu, preglednik moramo osvježiti (Refresh) kako bi prikazao novonastale promjene. Ukoliko imamo više stranica na kojima radimo i sve ih treba spremiti, ne moramo to èiniti za svaku posebno, nego ih možemo sve odjednom spremiti odabirom naredbe Save All u izborniku File. VAŽNO! Sve web stranice moraju se spremati u mapu našeg web sjedišta, inaèe se neãe vidjeti ga kada prebacimo na Internet, jer se prebacuje samo sadržaj mape websjedišta, a ništa izvan nje. To takoðer vrijedi i za sve ostale sadržaje koji ãe se nalaziti na web stranicama, npr. slike, zvuk, video, dokumenti itd. 8 Otvaranje web stranica Da biste otvorili ranije napravljenu web stranicu možete kao i do sada koristiti alat , no kako svi veãinom radije otvaraju datoteku na mjestu gdje se ona nalazi, ovdje ãe se postupak razlikovati od dosadašnjih Office programa koje smo koristili. Svi znamo da ako želimo otvoriti neki npr. Word dokument, dovoljno ga je dvokliknuti. Kako mi ovdje radimo sa web stranicama, ako bilo koju od njih dvokliknete, neãe se otvoriti FrontPage, nego standardni program za pregledavanje web stranica, najèešãe Internet Explorer (IE) ili možda Google Chrome, u kojem web stranice ne možete mijenjati. Ukoliko želite mijenjati web stranicu nemojte dvokliknuti na ikonu dokumenta, nego kliknite desnom tipkom i odaberite Edit (Ureðivanje) ili ako te naredbe nema, tada naredbu Otvori s, i zatim Microsoft Office FrontPage. Izrada i ureðivanje web stanice Obavezne tablice Ako otvorite bilo koju profesionalnu web stranicu na Internetu (npr. T portal, Net, Index) vidjeti ãete da je sve uredno složeno po recima ili stupcima. Kako?!?! Prvo su podijelili cijeli prostor na nekoliko veãih podruèja, a zatim su te nastale cjeline dalje dijelili recima ili stupcima. Zapravo – rijeè je o tablicama, i tablicama u tablicama. U poèetku možete prostor web stranice podijeliti npr. tablicom 2*2 ili 2*3, a onda prema potrebi možete spajati ãelije i dijeliti novim tablicama, kako biste prostor što bolje iskoristili. Na slici je prvo crvenom tablicom prostor web stranice podijeljen na 6 dijelova, zatim su ãelije prvog retka spojene u jednu. Nakon toga su 2 ãelije dalje dijeljene zelenom i plavom tablicom. U plavoj tablici je èak jedna ãelije još dodatno dijeljena ljubièastom tablicom kako bi se još bolje iskoristio prostor i poslagali sadržaji, jer je pravilo da se nikada u istu ãeliju ne stavljaju 2 razlièita sadržaja (npr. slika i tekst, 2 slike..). Ovaj postupak se zove gniježðenje tablica (nested tables) jer se ubacuje jedna tablica u drugu. Zašto koristimo gniježðenje umjesto dijeljena ãelija? Zato što nam se ãelije granicama vodoravno ne moraju podudarati i imamo veã slobodu pomicanja sadržaja, gore-dolje, a da pri tome ne diramo neke susjedne ãelije. .. .. Zelene toèke na slici su vodoravno u istoj ravnini, ali crveno oznaèene toèke na slici kod gniježðenja tablica ne moraju vodoravno biti u istoj razini, a kod dijeljenja tablice moraju. Kada smo tablicom dobili prostor koji želimo, onda u njega ubacujemo sadržaj (sliku, tekst, link…) 9 Sadržaji web stranice Stanica može sadržavati tekst, slike, video isjeèke, glazbu i dr. sadržaje. Svaka vrsta sadržaja trebala bi biti umetnuta u svoju ãeliju tj. ne stavljati više sadržaja u istu ãeliju (npr. tekst i slike), nego u ãeliju umetnuti novu tablicu. Tekst se ne mora posebno umetati nego se piše u ãelije. Vodoravno poravnanje može se mijenjati iz lijevog u centar ili desno, a okomito poravnanje teksta je sredina. Ako želimo tekst na vrhu ili dnu ãelije možemo ga pomaknuti sa tipkom Enter (pritiskanjem iza ili ispred teksta). Slike se mogu stavljati kao podloga cijele stranice ili se pojedinaèno ubacivati u tablicu. Slike se mogu i nakon ubacivanja smanjivati, ali je bolje sliku prvo urediti pa tek onda koristiti kako bi se uštedjelo na prostoru (manja slika zauzima i manje prostora na serveru) i poveãala brzina uèitavanja slike. Evo nekoliko savjeta kojih se treba pridržavati pri umetanju slika na web: slike trebaju biti u .jpg, .gif, .png ili nekom drugom komprimiranom formatu, a nikako ne stavljati slike u .bmp formatu jer zauzimaju previše mjesta na serveru i sporo se uèitavaju smanjite slike na željenu velièinu prije ubacivanja, po potrebi isijecite dijelove koje ne trebate, što možete uèiniti pomoãu nekog programa za ureðivanje slika npr. Microsoft Office Picture Manager, IrfanView, Paint Shop… nazivi slika, kao i web stranica, ne smiju sadržavati slova žšðèã ni razmake O tome kako urediti sliku možete naãi u dodatku na kraju ove skripte, a korišten je Microsoft Office Picture Manager koji je dio Microsoft Office paketa. Slike postavljamo u odabrane ãelije pomoãu alata Insert Picture From File na donjoj alatnoj traci Drawing, a za postavljanje slike u podlogu stranice, tablice ili ãelije nešto kasnije pod slijedeãim naslovom Ureðivanje web stranice. Glazba se može koristi kao "podloga" na web stranici, koja svira cijelo vrijeme dok je web stranica otvorena ili namjestiti da se glazba ili neki drugi zvukovi pokreãu klikom na odreðene dijelove stranice. Video isjeèci se rjeðe ubacuju na amaterske web stranice zbog svoje velièine, buduãi da nam je kolièina podataka koju možemo smjestiti na server dosta ogranièena (obièno nekoliko MB), pa je ako veã želite prikazati veãu kolièinu videa bolje koristiti linkove na video koji su smješteni na nekom od on-line spremišta koji vam daju puno više prostora za pohranu datoteka. Linkovi su obavezni dijelovi svakog web sjedišta jer nam omoguãuju povezivanje pojedinaènih web stranica u cjelinu, pozivanje drugih dokumenata, pisanje e-mailova direktno sa web stranice, pa èak i listanje web stranice koju trenutno gledamo. O ubacivanju linkova takoðer govorimo kasnije pod naslovom Linkovi. Linkovi su samo jedan oblik tzv. aktivnih sadržaja koje možemo ubacivati na naše web stranice. Pod aktivnim sadržajima podrazumijevamo sve sadržaje koji ãe našim stranicama biti vezani uz neke dogaðaje ili radnje. Evo nekoliko primjera aktivnih sadržaja koji se èesto koriste na web stranicama: brojaè (counter), galerija slika, mape, Marquee… 10 Ureðivanje web stranice i njezinih dijelova Kada ureðujemo – dizajniramo web stranicu, možemo ju gledati prvo kao cjelinu, zatim pojedinaène tablice koje smo ubacili, takoðer i zasebne ãelije neke tablice, a isto tako i sadržaje koje smo umetnuli u ãelije (tekst, slike…) Stranicu možemo ureðivati na dva naèina: koristeãi postojeãe teme potpuno proizvoljno prema osobnom izboru Da bismo primijenili veã gotov dizajn (temu) u izborniku Format odaberemo naredbu Theme i odabremo jednu od ponuðenih tema, pri èemu treba paziti na vidljivost linkova (boje) i da se na web stranici ne koristi previše razlièitih tema. Kada pronaðemo temu koja nam odgovara, kliknemo na nju da bismo odabrali temu za otvorenu stranicu ili postavljanjem miša na slièicu sa desne strane se pojavljuje strelica za otvaranje padajuãeg izbornika. U tom padajuãem izborniku možemo odabrati: Apply as default theme – primjeni kao glavnu temu – tema ãe se primijeniti na sve stranice našeg web sjedišta (otvorene i ne otvorene), osim ako smo prethodno veã odabrali neku drugu temu za neku stranicu(e), tada ãe te stranice ostati nepromijenjene Apply to selected page(s) – primijeniti ãe se samo na stranice koje smo odabrali izmeðu svih stanica našeg web sjedišta u pogledu Folders Ako želimo napraviti neki svoj dizajn tada na bilo kojem praznom dijelu stranice kliknemo desnom tipkom i odaberemo Page Properties… otvara se izbornik sa 6 kartica, a možete koristiti npr: kartica General – Background sound – pomoãu tipke Browse možemo odabrati zvuk koji želimo da se èuje dok god gledamo tu stranicu kartica Formatting – Background picture – ako želimo neku sliku postaviti u pozadinu cijele stranice (manje slike ãe se ponavljati tj. kopirati vodoravno i okomito ako je potrebno kako bi popunile cijeli prostor); Colors – mijenjanje boja npr. podloge, tekstova, linkova… Ako želimo urediti neku odreðenu tablicu na stranici, i tako ju možda istaknuti, kliknemo desnom tipkom unutar tablice (pazite da niste kliknuli na u njoj ugniježðenu tablicu, jer ãete tada ureðivati tu tablicu) i odaberemo Table Properties… i otvara se novi prozor u kojem vam može biti korisno: Borders (granice) – size (debljina) i color (boja) Background (podloga) – color (boja) i Use Background picture (slika u pozadini tablice) Vrlo slièno se ureðuju i pojedinaène ãelije (ili skupine ãelija), njihovim oznaèavanjem te desnim klikom, a zatim odabirom naredbe Cell Properties… gdje možemo osim veã spomenutih granica i pozadine mijenjati npr. vodoravno i okomito poravnanje ãelije (Horizontal alignment, Vertical alignment). Aktivni sadržaji Veã smo spominjali aktivne sadržaje koji ãe našim stranicama biti vezani uz neke dogaðaje ili radnje. Evo nekoliko primjera aktivnih sadržaja koji se èesto koriste na web stranicama: brojaè (counter) – broj koji se poveãava za jedan svakim uèitavanjem stranice i time znamo koliko je posjetitelja bilo na stranici 11 galerija slika – veã gotov predložak u kojega kada ubacimo naše slike, one se prikažu u obliku kataloga, mogu se slagati u albume, listati i poveãavati (npr. na Facebook-u) mape – preuzimanje mapa gradova iz postojeãih servisa na Internetu Marquee – tekst koji se šeãe po ekranu Od ovdje navedenih aktivnih sadržaja najjednostavniji je Marquee jer nije potrebno prethodno pripremiti nikakve druge sadržaje, te galerija slika jer nam na temelju uèitanih slika u par koraka napravi jednostavnu galeriju za pregledavanje slika putem kataloga i u stvarnoj velièini. Marquee se ubacuje na odabrano mjesto (ãeliju) iz izbornika Insert – Web Component – Dynamic Effects - (1) Marquee. Klikom na tipku (2) Finish otvara se izbornik u kojem treba (3) upisati željeni tekst, (4) odrediti smjer kretanja teksta (Direction), (5) brzinu (Speed), (6) naèin kretanja (Behavior), (7) ponavljanje (Continuously) ili broj ponavljanja, te eventualno (8) boju podloge (Background color) – pogledajte u prezentaciji slajd 22. Galerija slika se takoðer nalazi u istom izborniku Insert – Web Component – (9) Photo Gallery, u kojem izaberemo (10) poèetni izgled kataloga koji prikazuje sve slike i kliknemo na (11) Finish. U novom prozoru tipkom (12) Add (Pictures from file) dodamo slike koje želimo, odredimo sa desne velièinu slièice u katalogu (13) (Thumbnail size), te možemo dodati (14) ime slike (Caption) i njezin (15) opis (Description). Na (16) kartici Layout možemo naknadno promijeniti poèetni izgled kataloga ukoliko to želimo. Linkovi Za linkove smo veã rekli da su oni jedna vrsta aktivnih sadržaja, dakle sadržaj koji omoguãuje neku radnju tj. u ovom sluèaju klikom nas vodi na neku novu adresu. Linkovi mogu voditi na druge stranice našeg web sjedišta, na stranice izvan našeg web sjedišta, zatim otvarati program za pisanje elektronièke pošte i èak odvesti na neki drugi dio web stranice koju trenutno gledamo. Najjednostavniji za izradu su tzv. obièni linkovi ili linkovi postavljeni na rijeèi ili slike. Oni mogu otvarati neke web stranice ili služiti da bismo pisali e-mail. Ovakvi jednostavni linkovi se mogu izraðivati na bilo kojoj web stranici, èak i ako ne radimo web sjedište, nego pojedinaène web stranice. Postupak za izradu je slijedeãi: 1. Oznaèiti rijeè ili klik na sliku 2. desni klik i odabrati Hyperlink a. za link na web stranicu: 1. s lijeve strane odabrati Existing File or Web Page 2. u polje Address upisati adresu web stranice ili u velikom polju odabrati neku stranicu našeg web sjedišta 3. klik na OK b. za link na e-mail adresu: 1. s lijeve strane odabrati E-mail Address 2. u polje E-mail address upisati adresu (na poèetku ãe se pojaviti mailto: nemojte brisati) 3. upisati Subject (naslov) 4. klik na OK 12 Upiši tekst ako nije odabrana Osim jednostavnih linkova postoje i linkovi u obliku gumbova na traci, koji su puno ljepši i ostavljaju bolji utisak na posjetitelja. Prva prednost im je olakšano grafièko ureðenje, odmah možemo odrediti boju i izgled, pa èak i animaciju kada preko njih prijeðemo mišem. Druga prednost je što se web stranice unutar našeg web sjedišta vrlo jednostavno povezuju linkovima zato što veã imamo strukturu koju smo napravili u navigaciji. Samo je potrebno odrediti na koje stranice linkove želimo. Nedostatak je što se mogu koristiti samo kada izraðujemo web sjedišta, a nikako kod pojedinaèno izraðenih stranica. Postupak za izradu ovih „standardnih“ linkova se može se koristiti pri izradi linkova na vanjske i unutarnje linkove. Grafièko ureðivanje potpuno je isto kako bi se ne bi meðusobno izgledom razlikovali, a razlikuje se naèin na koji naèin ãemo odrediti kamo linkovi vode. Postupak izrade linkova u obliku gumbova na traci: 1. klik na mjesto gdje želimo dobiti linkove 2. u izborniku Insert kliknemo Web Component… 3. u lijevo dijelu odaberemo Link Bars 4. u desnom dijelu izabremo: a. za izradu linkova izvan web sjedišta Bar with custom links ili b. za izradu linkova unutar web sjedišta (navigacije) Bar based on navigation structure 5. klik na Next 6. odaberemo izgled gumbova za linkove (paziti da se boja dobro istièe na pozadini koju smo veã namjestili) 7. Next 8. odaberemo okomito ili vodoravno nizanje linkova (ovisno o prostoru u kojeg ubacujemo linkove) 9. Finish 13 linkovi izvan sjedišta linkovi iz navigacije • • Odabrati stil Odabrati orjentaciju (vodoravno ili okomito) Dalje se postupak izrade razlikuje ovisno koju smo moguãnost odabrali u koraku 4. Ukoliko izraðujemo linkove izvan web sjedišta Bar with custom links Ukoliko izraðujemo linkove iz navigacije Bar based on navigation structure na kartici General biramo koje linkove želimo postaviti: upišemo ime trake npr. linkovi Parent level – "razina roditelj" – 1 razina kliknemo OK klik na gumb Add link iznad (roditelj i njihova braãa) dalje je postupak isti kao kod jednostavnih Same level – "ista razina" – susjedne linkova, ovisno o tome da li izraðujemo stranice (braãa i sestre) link na web stranicu ili e-mail Back and next – "natrag i naprijed" – samo gumbovi za pomicanje naprijed i nazad kao u web preglednicima Child level – "razina dijete" – sve podstranice (djeca) Global level – "glavna razina" – poèetna stranica Index Child pages under Home – "djeca ispod poèetne stranice" – bez obzira na kojoj smo razini može prikazati prvu razinu ispod poèetne stranice Indeks Dodatno se sastrane može odabrati i Home page (poèetna stranica) i/ili Parent page (stranica roditelj), ako ih želimo dodati uz veã odabrane stranice i na kraju kliknemo OK 14 ili poèetna stranica 1 2 3 4 5 6 Ako želimo naknadno mijenjati bilo što na izraðenim linkovima, jednostavno ih dvokliknemo i mijenjamo na kartici General ili na kartici Style (postavke ureðivanja), gdje takoðer možemo ukljuèiti moguãnost Use Active Graphics, èime ãe malo promijeniti izgled ili boja gumba, ali ãemo dobiti zanimljivu moguãnost animacije kada preko njih prijeðemo mišem. Nakon što smo napravili jednu vrstu gumbova (vanjskih ili unutar web sjedišta) tik do njih ili ispod njih možemo ponoviti postupak i napraviti drugu vrstu linkova, te ãe svi oni zajedno opet èini jednu cjelinu. 15 Dodatak – ureðivanje slika (Microsoft Office Picture Manager) Postoji velik broj programa koji nam omoguãuju obradu slike npr. Paint Shop Pro, PhotoShop (plaãaju se), Gimp (besplatan, ima puno detalja i moguãnosti). Najjednostavniji program koji se instalira zajedno sa ostalim programima Microsoft Office paketa (ukoliko ga niste posebno iskljuèili pri instalaciji) je Microsoft Office Picture Manager. U njemu je moguãe napraviti jednostavne promjene na slikama, koje se inaèe i najèešãe rabe, kao npr. smanjivanje, rezanje, rotiranje slike, pa èak i promjene boja, kontrasta i uklanjanje crvenih oèiju. Da biste otvorili sliku koju želite ureðivati u Picture Manager, potrebno je na nju kliknuti desnom tipkom miša i odabrati opciju Otvori s…, a zatim iz ponude programa koji mogu raditi sa slikama odabrati Microsoft Office Picture Manager. prebacivanje na pogled mape u kojem se vide sve ostale slike koje takoðer možemo ureðivati brza rotacija slike za 90 stupnjeva u lijevo ili desno ostala napredna ureðivanja slika Objašnjenje pojedinih moguãnosti ureðivanja: 1. Svjetlost i kontrast – samo ukoliko je slika presvijetla ili pretamna, ili su neki dijelovi previše "u sjeni" 2. Boje – ukoliko neka od boja previše dominira, prejaka je, može se pokušati smanjiti, ili neka druga osnovna boja pojaèati 3. Rezanje – omoguãuje odsijecanje rubnih dijelova slika ako smo uhvatili neki detalj koji nam smeta, imamo previše praznog prostora ili jednostavno želimo izvuãi samo neki detalj sa slike – povlaèenjem rubova odsijecamo dijelove 4. Okretanje i zrcaljenje – proizvoljno zakretanje slike i njezino zrcaljenje 5. Uklanjanje crvene boje oèiju 6. Promjena velièine slike – odabiranjem veã predviðenih velièina, ruènim unosom velièine slike u pikselima ili upisom postotka smanjenja slike 7. Sažimanje slike – kako bi zauzimala manje prostora pri slanju na server ili e-mailom 1 2 3 4 5 6 7 kada završimo sa pojedinom radnjom, na dnu stupca kliknemo Back za povratak na sve ponuðene radnje 16
© Copyright 2024 Paperzz
