MIJENJANJE SADRŽAJA WEB STRANICA IZRAĐENIH S APLIKACIJOM JOOMLA 2.

5
(upute za korisnike)

Uvodne napomene: Ove upute ili tutorijal namijenjene su prvenstveno korisnicima koji su se odlučili za dinamičke web stranice svoje tvrtke, organizacije, udruge, ili svoje osobne stranice, izrađene sa sustavom za upravljanje sadržajem (CMS), a čiju su izradu povjerili nekoj od tvrtki za izradu web stranica (nadamo se da smo to bili upravo mi – EML-PROJEKT ). Za mijenjanje sadržaja web stranica izrađenih sa aplikacijom Joomla 2.5 dovoljan vam je samo vaš internetski preglednik koji i inače koristite za pristup i gledanje internetskog sadržaja. Ovdje se nalaze upute za Internet Explorer kao još uvijek najzastupljeniji internetski preglednik (browser). Postupak je skoro identičan i sa korištenjem bilo kojeg drugog preglednika – Mozzila Firefox, Google Chrome, Opera... U ovim uputama objasnit ću postupak promjene sadržaja web stranica uz korištenje standardnog editora koji kod izrade web stranica koristi EMLPROJEKT (Editor – JCE), za koji smatramo da daje najviše mogućnosti za uređivanje teksta i multimedijskog sadržaja, a bez ikakvih dodatnih znanja programiranja.

-

-

Postupak mijenjanja sadržaja: 1. Otvorite vaš internetski preglednik – Internet Explorer i u prozor preglednika unesite URL adresu vaše web stranice/administrator (Primjer: http://www.eml-projekt.com/administrator) kako bi pristupili administrativnom dijelu vaše stranice gdje ćete moći mijenjati sadržaj (Slika 1: Administracijska prijava - (1) ). 2. U prozoru Joomla! Administracijska prijava unesite Korisničko ime (2) i Lozinku (3) koje ste dobili od tvrtke koja je izradila vašu web stranicu (pazite na velika i mala slova). Također na padajućem izborniku Jezik (4) možete odabrati jezik po vašem izboru – pretpostavljamo Croatian (HR). Pritisnite gumb Prijava (5).

1

1

2

3

4

5

Slika 1: Administracijska prijava 3. Otvorio vam se prozor Kontrolne ploče (Slika 2: Kontrolna ploča), u kojem se nalaze gumbi i padajući izbornik koji služe kako za izradu web stranica, tako i za njihovo uređivanje. Kako se ovdje vrši i uređivanje strukture web stranice, preporučam da se držite samo onoga što je predviđeno za mijenjanje od strane korisnika. Tvrtka koja je izradila vašu web stranicu vjerojatno vam je dala pristup samo onim dijelovima koji se odnose na uređivanje sadržaja, tako da se ne trebate previše brinuti oko toga da bi napravili nešto nepopravljivo. Za nas je najzanimljiviji gumb Upravljanje Člancima (1) kako bi pristupili postojećem članku koji želimo promijeniti. Sada Pritisnite gumb Upravljanje člancima (1).

1

Slika 2: Kontrolna ploča 4. Kao što možete vidjeti na slici - Slika 3: Prikaz svih članaka web stranice otvorio vam se prikaz svih članaka koji se nalaze na vašim stranicama. Ovo je glavno mjesto gdje ćete vi vršiti izmjene već postojećih članaka na vašim

2

stranicama. Možete vidjeti da su ovdje, s obzirom da se radi o dvojezičnoj web stranici (hrvatsko/engleski), pomiješani članci na engleskom i hrvatskom jer su isti poredani po abecednom redu. Kliknite na naslov članka koji želite promijeniti (ja sam odlučio promijeniti sadržaj članka Izrada web stranica (1)).

1

Slika 3: Prikaz svih članaka web stranice 5. Na slici - Slika 4: Glavni prozor za uređivanje odabranog članka, možemo vidjeti da nam se otvorio prikaz članka na koji smo kliknuli i kojeg smo odlučili promijeniti. Cijeli okvir bismo mogli podijeliti na četiri logične cjeline:  Osnovni podatci o članku (1) – Na gornjem dijelu ekrana nalaze se osnovni podatci o članku kojega uređujemo (Naziv, kategorija, jezik i sl.), a na desnoj strani (radi preglednosti nije na slici) također vidite određene opcije prikaza, objavljivanja i sl. S obzirom da je nama cilj samo promijeniti sadržaj teksta i slika u našem članku, ovi dijelovi nas za sada ne interesiraju. Alatne trake uređivača teksta (2) – Ispod osnovnih podataka o članku nalaze se alatne trake uređivača teksta sa različitim alatnim gumbima, sličnim kao kod standardnih uređivača teksta. Onaj tko je radio sa Microsoftovim Wordom sigurno će na prvi pogled prepoznati većinu oznaka na alatnoj traci. Sadržaj naše stranice koji ćemo uređivati (3) - Ispod alatne trake nalazi se prikaz sadržaja našeg članka koji smo odlučili promijeniti. Alatna traka sa dodatnim funkcijama (4) – Na dnu našeg prozora vidimo red specijalnih oznaka koje ćemo također koristiti kod uređivanja sadržaja naše stranice.

 

3

1

2 3

5

4 Slika 4: Glavni prozor za uređivanje odabranog članka 6. Kako bi mogli imati bolji pregled sadržaja članka koji ćemo uređivati namjestite si veličinu prozora kako vam najviše odgovara. Za razvlačenje okvira sadržaja koristite oznaku u donjem desnom kutu okvira sadržaja (5). Preporučam isto tako korištenje kombinacije tipki „Ctrl“ i „+“, odnosno „Ctrl“ i „-„ (držite pritisnutu tipku „Ctrl“ i pritiskajte tipke „+“ ili „-„ na brojčanom dijelu tipkovnice i podesite si najbolju veličinu prikaza), jer na taj način ćete povećati veličinu teksta, ali i dobitii bolju vidljivost oznaka na alatnoj traci. Isto tako, ukoliko je tekst svijetliji, pa je teško vidljiv na bijeloj pozadini, možete ga privremeno promijenit u crnu boju, a na kraju vratite u originalnu boju. 7. Na narednoj slici - Slika 5: Podešeni prozor za uređivanje odabranog članka – prikazan je podešen okvir za uređivanje sadržaja stranice. Na ovaj način rad će vam biti puno ugodniji. Potrebno je napomenuti kako izgled teksta i slika koji vidite na ekranu nije isti kao što je kad otvorite vašu stranicu u pregledniku. Preglednici slažu tekst u redove prema veličini zadanog okvira, tako da kod mijenjanja sadržaja ne trebate o tome voditi računa, sve dok ne unesete potrebne izmjene.

4

Slika 5: Podešeni prozor za uređivanje odabranog članka 8. Sada možete urediti vaš članak slično kao u Microsoft Wordu ili drugim uređivačima teksta. Slobodno možete brisati i dodavati sadržaj, mijenjati veličinu i boju slova, ubacivati tablice sa podacima i sl. Smatramo da ovdje ne bi smjelo biti nikakvih problema. Slobodno isprobajte svaku od mogućnosti koje se nalaze na alatnim trakama. Princip je jednostavan, najprije označite tekst koji želite mijenjati i na alatnoj traci odaberite željenu promjenu – boju, veličinu, okvir, izgled teksta, bold, italic itd. Naravno da se potrebno malo poigrati i pomučiti kako bismo dobili baš onakav raspored i izgled kakav želimo. Preporučamo da povremeno provjerite kako izgleda izmjenjeni sadržaj tako da kliknete na Pogledaj site (1) u desnom gornjem kutu - Slika 6: Provjera izgleda stranice u pregledniku – Pogledaj site.

5

1

Slika 6: Provjera izgleda stranice u pregledniku – Pogledaj site 9. Mijenjanje ili ubacivanje novih slika je malo zahtjevnije, ali kada postupak ponovite par puta vidjet ćete da je i to u biti vrlo jednostavno. Postojeću sliku izbrišete tako da jednostavno kliknete na nju i pritisnete „Delete“. Prije ubacivanja nove slike potrebno je postaviti kursor na mjesto gdje želite da vam bude gornji rub slike. Uvijek postavite kursor na početak reda u kojemu želite da vam bude gornji rub slike, a položaj slike (lijevo ili desno) odredit ćemo poslije. Namijestite si okvir tako da vidite donji red gumbi sa posebnim mogućnostima - Slika 7: Umetanje slika na web stranicu. Jedan od najvažnijih je gumb Slika (1), koji služi za umetanje slika u sadržaj vašeg članka. Kada ste namjestili kursor na željeno mjesto slike, kliknite na gumb Slika.

1

Slika 7: Umetanje slika na web stranicu 10. Otvorio vam se prozor za umetanje slika - Slika 8: Prozor za umetanje slika na web stranicu. Ukoliko se slika koju želite umetnuti u vaš članak već nalazi na serveru dovoljno je kliknuti na nju i pritisnuti gumb Umetni (6) i slika će biti umetnuta u vaš članak koji uređujete. Ipak rijetko će biti slučaj da već imate željenu sliku na serveru. Najčešći slučaj će biti da ste vi pripremili sliku na vašem lokalnom računalu i da ju trebate „uploadati“ na server. Pod uvjetom da ste pripremili sliku odgovarajuće veličine i optimiziranu za web ovo neće biti problem. Ukoliko planirate češće mijenjati slike predlažem vam da se malo 6

detaljnije upoznate o načinu pripreme slika za web i da si osigurate odgovarajući program (predlažem vam besplatan program IrfanView http://hr.download.hr/program-irfanview.html te da instalirate „plugin“ za optimizaciju slika za web http://www.brothersoft.com/irfanview-all-plugins164981.html ).

6

3 4 1 2

5

Slika 8: Prozor za umetanje slika na web stranicu 11. Kako bi ubacili sliku koju ste prethodno pripremili na vašem računalu kliknite na gumb Pregledaj datoteke (1) (treba kliknuti dva puta) koji će vas odvesti na vaše lokalno računalo. Pronađite mjesto gdje ste spremili sliku koju želite umetnuti i kliknite na nju te nakon toga kliknite na gumb Započni upload (2). Slika je sada prebačena na server i možete je vidjeti među ostalim slikama u otvorenom prozoru. Kliknite na tu sliku i vidjet ćete da se popunio prozor URL slike, a vi ćete ispuniti polja Opis slike (3) i Naziv slike (4) (preporučamo da ispunite, iako se ništa ne bi dogodilo kad bi ostavili prazno). U padajućem izborniku Poravnanje (5) izaberite položaj slike u odnosu na tekst – Lijevo ili Desno, te kliknite na gumb Umetni (6) - (ja sam odabrao lijevo). 12. Na slici - Slika 9: Nova slika umetnuta u vaš članak - možete vidjeti da je gornji rub slike koju ste ubacili nalazi otprilike u visini reda gdje ste postavili kursor a slika se nalazi s lijeve strane teksta. Ipak primjećujete da nam je slika preblizu teksta i da nije lijepo poravnata po visini. Da bi to uredili potrebno je najprije kliknuti na našu sliku (vide se bijeli kvadratići oko slike) i na alatnoj traci uređivača teksta kliknuti na gumb za uređivanje slika (1).

7

1

Slika 9: Nova slika umetnuta u vaš članak

13. Otvorio nam se okvir za podešavanje položaja slike (i još dosta toga) kao na slici – Slika 10: Prozor za podešavanje položaja slike. Ovdje ćemo zadavanjem vrijednosti margina (1) popraviti položaj naše slike u odnosu na okolni tekst. Vidite da sam ja izabrao različite vrijednosti za gornju i donju marginu -10, a za lijevu i desnu marginu – 15, te smo na taj način riješili problem slike koja je preblizu teksta. Isto tako, ovdje možete eksperimentirati sa Poravnanjem (Alignment) slike u odnosu na tekst – lijevo, desno, gore, dolje, sredina (2). Kako izgledaju unijete promjene možete odmah vidjeti u okviru s desne strane u kvadratu s oznakom Preview. Kada ste zadovoljni s izgledom kliknite na gumb Update (3), kako bi zapamtili unijete vrijednosti. 14. Nakon što smo na ovaj način uredili cjelokupan tekst i umetnuli sve slike kliknite na gumb Spremi u desnom gornjem kutu ekrana. Kliknite na gumb Pogledaj site, isto u gornjem desnom kutu ekrana, napravite osvježenje stranice (savinuta strelica desno od adrese vaše stranice u pregledniku) i ukoliko ste zadovoljni sa izgledom vašeg članka u vašem pregledniku, vratite se u administracijsko sučelje i kliknite na Spremi i zatvori. 15. S ovime smo završili uređivanja našeg članka i spremno smo za uređivanje ostalih članaka. Vježba čini majstora.

8

2

1

3

Slika 10: Prozor za podešavanje položaja slike

9