Pomoć - vizualni editor

Ispiši stranicu

Vizualni editor (uređivač) sadržaja programska je komponenta ugrađena u gotovo svaki logIT-ov CMS web program. Saznajte čemu služi vizualni editor.

Najvažniji gumbi alatne trake - čemu služe i kako ih koristiti za uređivanje sadržaja

VAŽNO: Desni klik mišem na bilo koji objekt u vizualnom editoru otvara dodatni kontekstualni izbornik (npr. kod slika možemo dodavati link, kod tabela možemo dodavati redove, stupce...).

Donosimo pregled nekih gumba u vizualnom editoru univerSUS CMS-a:

gumbi koji se najčešće koriste
korisni gumbi, za koje klijenti najčešće ne znaju što znače.

Ikona	Funkcionalnost
	Ubaci/promijeni link - Insert/Edit Link
	Ubaci/promijeni sliku - Insert/Edit Image
	Ubaci/promijeni tablicu - Insert/Edit Table. Rad s tablicama sličan je onome u Microsoft Office Wordu, tako da to nećemo posebno objašnjavati u ovom dokumentu.
	Zalijepi kao čisti tekst / Paste as plain text
	Zalijepi iz Worda / Paste from Word - obavezno označite "Zanemari definiciju vrste fonta" i "Ukloni definicije stilova" da ne bi došlo do narušavanja dizajna.
	Brisanje svih oblikovanja za odabrani tekst / Remove Format. Briše podebljanje, kurziv i sva ostala oblikovanja.
	Pregled trenutnog stanja / Preview. Razlikuje se od konačnog izgleda pošto ovdje tekst nije stiliziran.
	Prikazivanje editora preko cijelog zaslona / Maximize the editor size.

Linkovi (poveznice) - kako stvarati i dodavati razne vrste web linkova

Za dodavanje linka najprije je potrebno označiti tekst/sliku. Klikom na ikonu "Ubaci link / Insert Link" otvara se prozor s 3 kartice:

Link info - u polje "URL" upisujemo adresu na koju će voditi link - upisujemo bez http://. Isto tako možemo dodati i link iz našeg repozitorija (klik na "Pretraži server / Browse Server").
Target - ovdje možemo odabrati kako će se otvarati link. Ako želite da se link otvara u novom prozoru/tabu, u padajućem izborniku "Target" odaberite "Novi prozor / New Window (_blank)".
Napredno / Advanced - razne napredne stvari koje preporučujemo da ne dirate.

Link na poziciju na istoj stranici (sidro / anchor)

Desno od ikone za dodavanje linka nalazi se ikona za ubacivanje sidra. Najjednostavniji primjer korištenja sidra link je Idi na vrh/Vrh u podnožju (footeru) mnogih web stranica. Klikom na link vraćamo se na vrh trenutne stranice.

Na jednom ćemo primjeru objasniti kako se koriste sidra:

Kreiramo članak koji ima nekoliko poglavlja.
Svako poglavlje ima svoj naslov - označimo ga, kliknemo gumb "Ubaci sidro / Insert Edit Anchor" i upišemo naziv (jedinstveni identifikator s kojim ćemo razlikovati sidra, tj. poglavlja).
Na vrhu članka kreiramo listu sa svim naslovima, označimo npr. prvi naslov, kliknemo gumb "Ubaci link / Insert Edit Link", pod "Vrsta linka / Link Type" odaberemo "Sidro na ovoj stranici / Link to Anchor in the Text" i u listi "Po nazivu sidra / Select an Anchor By Anchor Name" odaberemo sidro stvoreno u 2. koraku.

Galerija fotografija - kako ručno stvoriti lijepe animirane interaktivne galerije slika

Ako ste naručili i kupili specijalizirani web program za galeriju fotografija, tada pročitajte pomoć za tu fotogaleriju. Stvaranje galerija i upload fotografija mnogo je jednostavnije i brže ako koristite baš taj web program.

Iako nije tome namijenjen, i naš vizualni editor poslužit će za stvaranje lijepe animirane galerije fotografija. U odnosu na web aplikaciju za fotogaleriju, s vizualnim editorom bit će potrebno malo više vašeg ručnog rada. Ručni rad sastoji se od sljedećih koraka, koje prava galerija slika inače radi automatski:

Prvo trebate ručno ubaciti minijaturu slike negdje u sadržaj
Zatim trebate ručno stvoriti link s minijature na originalnu, uvećanu sliku
Na kraju trebate ručno ugraditi da se uvećana slika otvara kao animirana galerija.

Kliknite neku od slika dolje da biste vidjeli kako izgleda tako stvorena animirana interaktivna fotogalerija: uvećana slika otvara se sa zatamnjenjem čitave web stranice. Ako na sadržajnu stranicu uploadate više slika, možete ih povezati u jednu galeriju i imat ćete interaktivnu galeriju slika po kojoj se možete kretati naprijed-nazad.

Ili, pogledajte odlično složen primjer našeg klijenta Akvant d.o.o. koji je samostalno ručno stvorio lijepu galeriju. Ova galerija posebno lijepo izgleda jer je klijent sve minijature najprije u grafičkom programu na lokalnom računalu obrezao na iste dimenzije točno do u piksel. Za obradu slika i fotografija vama preporučujemo besplatan i dobar grafički program Paint.NET.

Koraci za kreiranje galerije

U sadržaju CMS stranice gdje želite umetnuti slike, kliknite gumb za ubacivanje slike "Insert / Edit Image" i otvorit će se prozor s 3 kartice:

Info slike / Image Info - klikom na "Pretraži server / Browse Server" otvara se FileBrowser (detaljnije u poglavlju niže). U njemu nađite minijaturu za koju želite da se pojavi u tekstu (odaberite jednu od već generiranih slika ili uploadajte novu sliku). Preporučujemo da upišete nešto u polje "Alternativni tekst (opis) slike / Alternative Text" - zbog korisnika koji ne koriste slike, zbog slijepih korisnika kojima poseban čitač izgovara opis te slike, a i da budete bolje pozicionirani na Googleu.
Link - klikom na "Pretraži server / Browse Server" odaberite link (npr. originalnu sliku) koji će se pojaviti klikom na prethodno odabranu minijaturu.
Napredno / Advanced - ako želite da se veća slika - na koju ste u prethodnom koraku stvorili link - učita uvećana u animiranoj galeriji, pod stavkom "Rel-Tag" potrebno je upisati/odabrati clearbox[item]. Ako želite imati dvije odvojene animirane galerije slika na istoj stranici, za 2. galeriju umjesto "item" upišite neki drugi naziv, npr. item2. Dodatno, na ovoj kartici možete u polje "Stylesheet klase / Classes" dodati i naziv gotovog CSS stila.
Svi siteovi izrađeni od 1.1.2010. imaju novi način kreiranja galerije slika. Umjesto clearbox[item] potrebno je upisati clearbox[gallery=Naziv galerije,,title=Naziv fotografije] . Tekst "Naziv galerije" je poveznica za kreiranje galerija, tako prva galerija može imati naziv Prva galerija, druga Druga galerija itd.

Napomena: 3. korak se na svim siteovima kreiranim od 20.3.2011. razlikuje. Za kreiranje galerije služi gumb Umetni/promijeni Clearbox. Nakon što ste uspješno prošli prva dva koraka kliknite na sliku koju ste dodali, odaberite ikonu Umetni/promijeni Clearbox te u polje Galerije upišite naziv galerije. Uneseni naziv je poveznica za kreiranje galerije, dakle sve slike koje imaju isti naziv u polju Galerija su jedna animirana galerija. Unošenjem različitih naziva kreirat ćete više animiranih galerija.

File Browser - repozitorij uploadanih datoteka na serveru

File Browser aplikacija je pomoću koje upravljate repozitorijem, tj. datotekama i mapama na web hosting prostoru koji vam je dodijeljen. File Browser ima sličnu funkciju kao Windows Explorer u Windowsima.

Što radite s File Browserom

prenosite (uploadate) datoteke (slike, dokumente...) u vaš vlastiti repozitorij na serveru
ubacujete datoteke u sadržaj vaših web stranica.
stvarate mape (foldere, direktorije)
pretražujete datoteke i mape

Kako doći do File Browsera

Kliknite gumb alatne trake "Ubaci/promijeni link - Insert/Edit Link" ili "Ubaci/promijeni sliku - Insert/Edit Image"
Desno do polja "URL" ili ispod njega, nalazi se gumb "Pretraži server / Browse Server" - kliknite ga i učitat će se File Browser.

Pravila stvaranja naziva datoteka i mapa

ako naziv uploadane datoteke već postoji, dodaje joj se nastavak -broj (npr. naziv-slike-1.jpg)
nazivi datoteka i mapa mogu sadržavati samo znakove A-Z, 0-9, točku, podvlaku i crticu. Svi ostali znakovi brišu se.

Što se događa kod uploada datoteke na server

Kod uploada slike kreira se:

minijatora (thumbnail) za predpregled (preview)
nekoliko manjih slika koje se mogu koristiti u tekstovima. Nazivu slike pridružene su unaprijed zadane dimenzije u pikselima - minijatura dimenzija 100x100px bit će među datotekama.

Značajke File Browsera

Datoteke se sortiraju abecedno uzlazno (A-Z).
Pamćenje posljednje pregledane mape. Ako umetnete sliku iz mape /a/b/c, kod sljedećeg otvaranja File Browser će vas preusmjeriti na tu istu mapu. Ovo je posebno korisno kod stavljanja linka na originalnu sliku.
Rekurzivna pretraga. Bez obzira gdje se nalazite, pretraga će gledati cijeli repozitorij.
Rekurzivno brisanje. Ako u izbrisanoj mapi postoje slike/mape, i one će biti obrisane.
Preimenovanje datoteka i mapa.

Značenje i funkcionalnost ikona u File Browseru

Kliknite sliku desno da biste vidjeli kako izgleda File Browser u univerSUS CMS-u i da biste mogli pratiti donje upute.

Stupac (1): vrste sadržaja (datoteka)

Ikona	Funkcionalnost
	Mapa
	Slika
	Video
	Flash
	Ostalo

Stupac (2): naziv mape ili datoteke

Klikom na ikonu (1. stupac) ili naziv otvara se odabrana mapa/datoteka. Možemo vidjeti sliku u originalnoj veličini, izvor CSS datoteke i slično.

Stupac (3): pretpregled (preview) grafičke datoteke

Ako je datoteka grafika (gif, jpg, png), njena se minijatura prikazuje u File Browseru.

Stupac (4): operacije nad datotekama i mapama

Ikona	Funkcionalnost
	Preimenovanje
	Brisanje
	Umetni u tekst. Napomena: ako ste odabrali umetanje slike, ova ikona pojavljuje se samo kod slika. Ako ste odabrali unos linka, ova će se ikona pojaviti kraj svih mapa i svih vrsta datoteka.

Ikona

Funkcionalnost

Preimenovanje

Brisanje

Umetni u tekst.

Napomena: ako ste odabrali umetanje slike, ova ikona pojavljuje se samo kod slika. Ako ste odabrali unos linka, ova će se ikona pojaviti kraj svih mapa i svih vrsta datoteka.