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


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.


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


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.


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.


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.


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.


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


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.


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


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.


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.


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.


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

pro*pc - web-designta namen lahko uporabimo katerega od programov za obdelavo grafike. slike morajo...

Documents