PRO*PC - Web-designta namen lahko uporabimo katerega od programov za obdelavo grafike. Slike morajo...
Transcript of PRO*PC - Web-designta namen lahko uporabimo katerega od programov za obdelavo grafike. Slike morajo...
-
PRO*PC računalniška oprema
Vodušek Miran s.p.
Hotinjska cesta 39, 2312 Orehova vas, 041/562-716,
[email protected], www.web-design.si
NAVODILA ZA
UREJANE VSEBINE
SPLETNIH STRANI
mailto:[email protected]://www.web-design.si/
-
Web-design Navodila za urejanje spletnih strani
2
Vsebina
Prijava v sistem .......................................................................................................................... 3
Urejevalnik besedil ..................................................................................................................... 3
Orodne vrstice ........................................................................................................................ 4
Urejanje vsebine ......................................................................................................................... 5
Vnos teksta ............................................................................................................................. 5
Kopiranje teksta od drugod .................................................................................................... 5
Vnos naslovov ........................................................................................................................ 5
Vstavljanje slik ....................................................................................................................... 6
Vstavljanje povezave za ogled celotnega teksta – Več…>> ................................................. 9
Vstavljanje citatov .................................................................................................................. 9
Vstavljanje tabel ..................................................................................................................... 9
Vstavljanje hiperpovezav ..................................................................................................... 11
Prikaz povečane slike ob kliku ............................................................................................. 13
Uporaba HTML kode ........................................................................................................... 14
Podatki o objavi ........................................................................................................................ 15
-
Web-design Navodila za urejanje spletnih strani
3
Prijava v sistem
Urejanje spletnih strani ni prosto dostopno vsakomur, temveč je potrebno imeti dovoljenje za
urejanje. V ta namen se je potrebno v sistem prijaviti.
V sistem urejanja se prijavite po navodilih, ki ste jih dobili od vzdrževalca spletnih strani. Na
obrazcu za prijavo je potrebno vnesti uporabniško ime in geslo, kot vam ga je dodelil
administrator spletnih strani. Ko se prijavite, se pod naslovom prispevkov kjer je dovoljeno
urejanje pojavi ikona svinčnika . S klikom nanjo vključite urejanje prispevka. Za urejanje
se uporablja poseben urejevalnik besedil.
Urejevalnik besedil
Vsa besedila so shranjena v programskem jeziku HTML, ki je skrit v ozadju. Urejanje besedil
je podobno urejanju v ostalih urejevalnikih besedil, vendar pozna tudi določene omejitve in
posebnosti. Ob vključitvi urejevalnika, se na vrhu okna pojavijo orodne vrstice z gumbi za
izvajanje različnih operacij.
Urejevalnik vsebuje sledeče elemente:
Naslov Naslov prispevka, ki ga lahko tudi spremenite
Shrani/Prekliči Gumba za shranjevanje ali preklic sprememb
[Toggle Editor] S klikom na ta napis lahko prikažete HTML kodo vsebine prispevka
Orodne vrstice Orodne vrstice so sestavljene iz gumbov, ki vsebujejo različne funkcije
za urejanje prispevkov. Opisane so v nadaljevanju.
Okno z vsebino
prispevka
Območje kjer urejate vsebino prispevka. Območje lahko razširite z
vlečenjem miške spodnjega desnega roba okna urejevalnika.
Gumbi pod
tekstom
Gumbi Prispevek, Slika, Prelom in Več pod tekstom se ne uporabljajo,
ker so na voljo v orodnih vrsticah urejevalnika.
Objava Pod oknom urejevalnika se nahaja več polj z dodatnimi podatki o objavi.
Te nastavitve so opisane v posebnem poglavju navodil.
-
Web-design Navodila za urejanje spletnih strani
4
Orodne vrstice
Tukaj so opisi najpomembnejših gumbov v orodnih vrsticah.
Pomoč - Odpre okno pomoči, ki je delno v angleščini
Razveljavi / uveljavi zadnje spremembe
Označeni tekst naredi poudarjen / ležeč / podčrtan /
prečrtan
Označeni tekst poravna obojestransko / na sredino /
levo / desno
Označeni tekst poudari kot citat
Označen tekst oblikuje s stilom iz spustnega menija.
Uporabljajte za naslove (Naslov 1,2,3)
Nastavitev vrste, velikosti in barve in barve ozadja
označene pisave
Funkcije za kopiranje: Izreži (Ctrl-x), kopiraj (Ctrl-c),
prilepi(Ctrl-v). Preberite poglavje vnos teksta glede
kopiranja teksta od drugod.
Zamakne označeni tekst desno / levo
Vključi oštevilčeni ali označeni seznam (naštevanje).
Funkcija se izključi ko 2x pritisnete Enter
Označeni tekst spremeni v podpisani (indeksi) ali
nadpisani (potence)
Označeni tekst pretvori v velike črke. Poleg je spustni
meni, ki omogoča še pretvorbo v male črke, samo prvo
veliko črko (Stavek) in vse besede z veliko začetnico
(Predmet)
Vstavljanje posebnih znakov
Vstavljanje vodoravne črte
Vklop / izklop prikaza HTML kode ( za poznavalce)
Gumbi za delo s tabelami (glejte posebno poglavje)
Vstavi sidro – točka v tekstu na katero lahko potem
skočimo s pomočjo povezave nanjo
Vstavi ali odstrani povezavo na neko spletno stran ali
dokument. Glejte posebno poglavje.
Vstavljanje slik – glejte posebno poglavje
V tekst vstavi oznako za Preberi več – glejte posebno
poglavje.
Najdi in zamenjaj tekst v članku
-
Web-design Navodila za urejanje spletnih strani
5
Urejanje vsebine
Vnos teksta
Tekst vnašate podobno kot v ostalih urejevalnikih besedil. Ko napolnite eno vrstico gre
urejevalnik avtomatsko v novo vrstico.
Za odstavke pritisnite:
Enter – nova vrsta z večjim razmikom ali
Shift-Enter – nova vrsta z majhnim razmikom.
Tekst se prikazuje s privzeto vrsto in velikostjo pisave, ki se lahko spremeni generalno za
celotne spletne strani. Priporočamo uporabo privzete pisave.
Kopiranje teksta od drugod
Tekst lahko tudi prekopirate od drugod (npr. iz Worda) s pomočjo funkcije kopiraj /prilepi
vendar izključno preko gumba Prilepi v orodni vrstici.
Na voljo sta dve vrsti lepljenja:
Prilepi – prenese tekst z oblikovanjem in
Prilepi kot navaden tekst, kjer se prenese tekst brez
oblikovanja. V obeh primerih se odpre okno, kamor prenesemo
tekst s Ctrl-V in kliknemo gumb Vstavi.
Priporočamo uporabo druge možnosti, drugače se poleg teksta prenese tudi oblikovanje
iz izvora, kar povzroči ogromno skrite, nekoristne kode, ki moti pravilni in enotni
prikaz spletnih strani!
Vnos naslovov
Za naslove uporabljajte vgrajene sloge za naslove. Najdete jih v
orodni vrstici v spustnem meniju poleg napisa Odstavek. Izberete
lahko sloge:
Naslov 1 – glavni naslovi
Naslov 2 – podnaslovi
Naslov 3 – še nižji podnaslovi.
Ti slogi so vnaprej pripravljeni in se lahko globalno spremenijo za
celotno spletno stran.
-
Web-design Navodila za urejanje spletnih strani
6
Vstavljanje slik
Če želimo, da bodo slike v brskalnikih optimalno prikazane, jih moramo ustrezno obdelati. V
ta namen lahko uporabimo katerega od programov za obdelavo grafike. Slike morajo imeti
ločljivost 72 do 96 dpi (točk na colo), kolikor je ločljivost računalniških zaslonov, in zaradi
hitrejšega nalaganja čim manjšo velikost, kar se nastavi s stopnjo stiskanja pri JPG formatu.
Za fotografije je najprimernejši JPG format, za slike z manj različnimi barvami pa GIF format
slik. Pri formatu GIF in PNG lahko nastavimo tudi prozorno ozadje.
Slikovni material morate predhodno pripraviti na domačem računalniku. Slike morajo biti
pomanjšane na ustrezno število točk. Glede na to, da je širina celotne spletne strani okrog 900
točk, se običajno giblje širina slik v prispevkih od 100-500 točk.
Priporočamo JPG format slik s čim večjo dopustno kompresijo, da posamezna slika ne
preseže 100 KB. Na ta način se bodo spletne strani odpirale dovolj hitro.
Preden lahko sliko vstavite v tekst jo morate prenesti iz vašega računalnika na spletni
strežnik.
Poimenovanje datotek in map
Pri spletnih straneh je za imena datotek strogo prepovedana uporaba šumnikov in presledkov,
ker jih potem spletni brskalniki ne znajo prebrati.
Priporoča se uporaba malih črk in številk. Dodatno lahko uporabite pomišljaj in podčrtaj (npr.
slika1, slika-1, slika_1). Enako velja za poimenovanje map.
Prenos slik v strežnik
V orodni vrstici kliknite na gumb Slika in odprlo se bo pogovorno okno za delo s slikami.
V levem delu se nahaja območje, ki prikazuje mape na spletnem strežniku. Vrhnja mapa je
označena kot Koren, pod njo pa so različne podmape. V podmapi slike se običajno shranijo
vse slike spletnega mesta. Če je slik veliko, je smiselno, da so slike organizirane v podmape
znotraj mape slike. Primer na sliki prikazuje tri podmape za slike (novice, o-drustvu in
ocenjevanja). S klikom na določeno mapo se v srednjem delu okna prikaže seznam datotek, ki
se nahajajo v mapi.
-
Web-design Navodila za urejanje spletnih strani
7
Kreiranje nove podmape
Najprej kliknite na nadrejeno mapo, da jo označite. Nato kliknite gumb zgoraj desno,
vnesite ime mape in kliknite gumb OK. Ne pozabite na pravilno poimenovanje mape (brez
šumnikov).
Preden začnete s prenosm slik kliknite na mapo v katero želite prenesti slike. Nato kliknite na
gumb za nalaganje slik iz vašega računalnika in odprlo se bo okno za nalaganje slik
Kliknite gumb Prebrskaj in izberite slike iz vašega računalnika. Lahko označite tudi več slik.
Nato kliknite gumb Nalaganje in slike se bodo naložile na spletni strežnik. Z gumbom Zapri
se okno zapre. Pri večjem številu slik je smotrno kreiranje več podmap po skupinah slik.
-
Web-design Navodila za urejanje spletnih strani
8
Vstavljanje slike
V tekstu se postavite na mesto, na katero želite vstaviti sliko. Nato v orodni vrstici kliknite
gumb Slika . Odpre se pogovorno okno za vstavljanje slik.
V spodnjem delu pogovornega okna je razvidno katere slike so na voljo za vstavljanje.
Kliknite na sliko, ki jo želite vstaviti. V zgornjem delu okna se pojavijo lastnosti slike. Tam
lahko vnesete določene parametre:
Nadomestno
besedilo
Ta tekst se pojavi, če se na spletni strani z miško postavite na sliko
Poravnava S to nastavitvijo lahko nastavite kje se bo nahajala slika glede na tekst
(Levo/Desno/Zgoraj/Sredina/Spodaj). Poskusite spreminjati poravnavo in v
desnem oknu Predogled boste videli rezultat spremembe.
Rob Če vam privzeti rob okoli slike ni všeč, ga lahko spremenite na tem mestu.
Kliknite na kljukicona desni strani, da bo izginila in nastavite število točk roba
okoli slike (Vrh, Desno, Dno, Levo)
Ko je vse nastavljeno kot želite, kliknite na gumb Vstavi. Sliko lahko poravnate
levo/desno/centrirano z gumbi za poravnavo v orodni vrstici.
-
Web-design Navodila za urejanje spletnih strani
9
Spreminjanje velikosti slike
Kliknite na sliko v tekstu in na robovih se bodo pojavile
točke za spreminjanje slike. Z vlečenjem vogalnih točk
lahko sliko pomanjšate. Povečevanje ni smiselno, ker se
izgubi kvaliteta slike. Z vlečenjem stranskih točk pa
lahko sliko tudi popačite. Urejanje zaključite s klikom
na področje izven slike.
Spreminjanje lastnosti slike
Ko ste vstavili sliko boste mogoče ugotovili, da bi bilo boljše če bi bila drugače poravnana ali
da želite drugačen rob okoli slike. V tem primeru kliknite na sliko, da jo označite in potem na
gumbek Slika v orodni vrstici. Odprlo se bo pogovorno okno z lastnostmi slike in potem
lahko nastavitve spremenite. Slike so lahko poravnane samo levo/desno in na sredino (če je
slika samostojna brez teksta). Vse druge pozicije pa lahko nastavite z določanjem robov slike
ali pa da sliko vstavite v tabelo.
Brisanje slike
Označite sliko in pritisnite tipko Delete.
Vstavljanje povezave za ogled celotnega teksta – Več…>>
Kadar imamo opravka z daljšim tekstom, na naslovni strani pa bi radi prikazali samo začetek
prispevka, je potrebno v prispevku vstaviti povezavo »Več…«, s katero lahko prikažemo
celoten tekst. Skrajšani tekst na naslovni strani bo viden samo do povezave. To naredimo
tako, da se postavimo na pozicijo, kjer želimo vstaviti povezavo, in kliknemo gumb Preberite
več v orodni vrstici.
Vstavljanje citatov
Če želite del teksta izpostaviti, ga lahko prikažete kot citat. Označite tekst in kliknite gumb
. Označeni tekst se bo obarval odvisno od dizajna spletne strani. Po želji je lahko pred
citatom poljuben znak.
Vstavljanje tabel
Tabele se uporabljajo za tabelarični prikaz podatkov in tudi v primerih, ko želimo v tekstu
doseči poravnavo v več stolpcih. Tabela ima lahko vidne ali nevidne črte. Za delo s tabelami
se uporablja več gumbov v orodni vrstici.
Pomen gumbov je sledeč (po vrsti):
vstavljanje nove tabele
brisanje tabele
nastavitev lastnosti vrstice ali celice
vstavljanje prazne vrstice nad ali pod trenutno vrstico
-
Web-design Navodila za urejanje spletnih strani
10
brisanje tekoče vrstice
vstavljanje stolpca pred ali za tekočim stolpcem
brisanje tekočega stolpca
delitev celice na več celic
združevanje več celic v eno
Najprej se postavite na mesto kjer želite vstaviti tabelo in kliknite na gumb . Pojavilo se
bo pogovorno okno o podatkih tabele.
Nastavite:
želeno število stolpcev in vrstic
št. točk razmika med celicami (neobvezno)
poravnavo tabele (levo / sredina / desno)
Obrobo (0-nevidne črte ali št. točk debeline črt)
širino tabele lahko vnesete v točkah ali procentih (npr. 80% od širine prispevka)
Nato kliknite gumb Vstavi in prazna tabela se pojavi v urejevalniku.
Z desnim klikom na tabelo se pojavi pomožni meni, ki omogoča
uporabo različnih operacij. Uporabna je izbira Lastnosti tabele, s
katero lahko spreminjamo trenutne nastavitve tabele.
-
Web-design Navodila za urejanje spletnih strani
11
Vstavljanje hiperpovezav
Hiperpovezave (linke) na druge spletne strani naredimo tako, da označimo del teksta ali ozna-
čimo sliko ter kliknemo na gumb , da se odpre pogovorno okno za nastavitev povezave.
Nastavite lahko sledeče povezave:
povezava do drugih spletnih strani (URL)
povezava do prispevkov vaših spletnih strani
povezava do datoteke na vaši spletni strani
povezava do e-mail naslova
Povezava na druge spletne strani
V polje URL prekopirate spletni (URL) naslov in kliknete na gumb Vstavi.
Svetujemo vam, da nastavite še polje Cilj, ki določa kje se naj odpre spletni naslov, če
kliknete na povezavo. Privzeto je v trenutnem oknu, včasih pa je boljše, da izberete nastavitev
Odpri v novem oknu.
Povezava do prispevka znotraj vaših spletnih strani
V osrednjem delu okna Povezava lahko odprete seznam prispevkov vaše spletne strani.
Kliknite na napis Vsebina in odpre se seznam kategorij v katere so grupirani prispevki. S
klikom na kategorijo se odpre seznam pripadajočih prispevkov. Če se kategorije ne
uporabljajo kliknite na napis Ucategorised, označite želeni prispevek in kliknite gumb Vstavi.
Povezava do datoteke na vaši spletni strani
Včasih želite s klikom na povezavo odpreti neko datoteko. Običajno je to nek dokument
(zapisnik, statut, certifikat, itd…). Za vse dokumente priporočamo, da jih shranite v formatu
-
Web-design Navodila za urejanje spletnih strani
12
PDF, ki je univerzalen in ga znajo brskalniki prikazati. Poleg tega se njihova vsebina ne da
kar tako spreminjati. Wordovih in Excelov datotek ne priporočamo. Raje jih spremenite v
PDF.
Nalaganje dokumenta
Preden nastavite pot do datoteke jo morate najprej naložiti iz vašega računalnika na spletni
strežnik. V ta namen kliknite na gumb Slika pod urejevalnikom vsebine. Odpre se
pogovorno okno. Datoteke se shranjujejo v enako območje kot slike. V zgornjem delu okna
izberite mapo, kamor se naj shrani datoteka. V spodnjem delu okna kliknite gumb Prebrskaj,
izberite datoteko iz vašega računalnika in kliknite gumb Namestitev. Počakajte, da se datoteka
prenese na spletni strežnik.
Sedaj označite del teksta, ki bo služil kot hiperpovezava, da se odpre okno Povezava. Kliknite
na gumb , ki se nahaja desno od polja URL, izberite datoteko in kliknite gumb Insert.
Nato še izberite kje se naj odpre izbrana datoteka. V polju Cilj nastavite V novem oknu. Če
tega ne nastavite se bo datoteka odprla v tekočem oknu in obiskovalec ne bo več videl vaše
spletne strani.
Povezava do e-mail naslova
Če v tekst vnesete e-mail naslov se ta avtomatsko spremeni v povezavo. Če pa želite uporabiti
kak drug način pa označite tekst, kliknite gumb za povezavo in nato še gumb , ki se
nahaja desno od polja URL. odpre se okno v katero lahko vnesete e-mail prejemnika, kopije,
skrite kopije in Zadevo. Nato vnos potrdite z OK.
Odstranjevanje hiperpovezave
Kliknite na hiperpovezavo. Z gumbom lahko nastavljeno povezavo izključite.
-
Web-design Navodila za urejanje spletnih strani
13
Prikaz povečane slike ob kliku
Pri spletnih straneh se večkrat pojavi možnost, da na spletni strani kliknemo na sliko in se ta
poveča, vsebina spletne strani pa se zatemni. V ta namen morate imeti pripravljeno sliko v
dveh velikostih: mala je za prikaz v tekstu, velika pa za prikaz, ko kliknete na malo sliko.
Priporočljiva velikost velike slike je 800 x 600 točk oz. max. 1024 x 768. Velikost slike naj
bo okoli 100kB, ker se drugače slike prepočasi odpirajo. Sliki lahko poimenujete enako, le da
pri mali sliki dodajte –m (npr. slika1-m.jpg in slika1.jpg).
To lahko naredite po sledečem postopku:
Obe sliki najprej naložite na spletni strežnik, kot je bilo že opisano.
Malo sliko vstavite v tekst po opisanem postopku.
Sedaj bomo na sliki naredili hiperpovezavo na veliko sliko.
Kliknite gumb za hiperpovezavo (kot je že opisano) in odprlo se bo okno Povezava.
Kliknite gumb , ki se nahaja desno od polja URL in izberite veliko sliko.
V oknu Povezava kliknite na zavihek Pojavna okna in v polju Pojavna okna vrsta izberite JCE
MediaBox pojavno okno.
Za zaključek kliknite gumb Vstavi. Shranite prispevek. S klikom na sliko se mora odpreti
večja slika.
-
Web-design Navodila za urejanje spletnih strani
14
Uporaba HTML kode
Celotne spletne strani so dejansko narejene s pomočjo HTML kode. To je poseben jezik za
prikaz spletnih vsebin. Vsebino prispevka lahko preklopite v HTML s pomočjo gumba v
orodnih vrsticah. Včasih je urejanje HTML kode potrebno za kake posebne stvari, npr.
vstavljanje filma iz YouTube ali prikaz slik iz Pikase.
Kodo prekopirate in jo vstavite v HTMP pogledu.
-
Web-design Navodila za urejanje spletnih strani
15
Podatki o objavi
Pod oknom urejevalnika se nahajajo nekatera polja, ki omogočajo nastavitev dodatnih
podatkov o objavi.
Kategorija To polje pride v poštev če dodajate nov prispevek. Če pri spletnih
straneh uporabljate kategorije, potem izberite ustrezno kategorijo ali pa
pustite brez kategorije (Uncategorized). Prispevek se bo avtomatično
prikazal na vrhu izbrane kategorije.
Avtorjev vzdevek Vnesete lahko ime avtorja. Če je nastavljeno prikazovanje avtorja se bo
ime prikazalo na vrhu prispevka
Stanje Nastavite lahko stanje prispevka
Objavljeno – običajna nastavitev
Neobjavljeno – skrivanje prispevka na spletni strani
Arhivirano – prenos prispevka v arhivo
Zbrisano – brisanje prispevka
Predstavljen ni pomembno
Začni objavljati Datum začetka objave
Končano
objavljanje
Datum konca objave. Običajno pustimo prazno. Če pa gre vsebino, ki po
nekem datumu ni več aktualna, lahko nastavite končni datum. Kliknite
na ikono koledarja in izberite datum.
Dostop Kdo lahko vidi prispevek
Public – vsi obiskovalci
Registered – registrirani obiskovalci
Special – uredniki spletnih strani
Jezik Uporablja se pri večjezičnih straneh za določanje jezika objave
Metapodatki
Meta opis
Ključne besede
Tukaj lahko vpišete podatke za spletne iskalnike (npr. Google)
Kratek opis vsebine prispevka
Ključne besede za vsebino prispevka