Zaključna naloga »Računalništvo« - Shrani.si

- 1 - 

o 

Zaključna naloga 

»Računalništvo« 

------------------------------------------ 

Oblikovanje in izdelava spletne strani 

Skripta za novice 

CMS sistemi 

------------------------------------------ 

~ Zaključna naloga za predmet računalništvo: Oblikovanje in izdelava spletne strani ter sistem za 

urejanje vsebin (CMS), skripta za novice ~ 

Klemen Konič, 4. GB 

Tehniška gimnazija 

Tehniški Šolski Center Nova Gorica 

www.tsc.si

~ ~ Kazalo 

Kazalo 

~ Kazalo............................................................................................................................ - 2 - 

~ Povzetek......................................................................................................................... - 3 - 

~ Ključne besede ............................................................................................................... - 4 - 

~ Uvod .............................................................................................................................. - 5 - 

~ Introduction.................................................................................................................... - 5 - 

~ Kaj bomo potrebovali? ................................................................................................... - 6 - 

~ Spletni strežnik............................................................................................................... - 7 - 

~ Naredimo načrt............................................................................................................... - 8 - 

Oblika strani .............................................................................................................. - 8 - 

Barve......................................................................................................................... - 9 - 

Priprava gradiva....................................................................................................... - 11 - 

~ Začnimo oblikovati....................................................................................................... - 11 - 

Glava strani (header)................................................................................................ - 11 - 

Oblikovanje strani.................................................................................................... - 15 - 

Razrez strani............................................................................................................ - 21 - 

~ Izdelava spletne strani .................................................................................................. - 23 - 

V HTML obliko....................................................................................................... - 23 - 

Orodna vrstica in naslov strani................................................................................. - 29 - 

Fotografije, besedila, črte,........................................................................................ - 31 - 

Ozadje ..................................................................................................................... - 33 - 

Naredimo strani povezane med seboj... .................................................................... - 34 - 

Vrste povezav.......................................................................................................... - 34 - 

~ Prenos spletne strani na splet preko protokola FTP ....................................................... - 35 - 

~ Optimizacija spletne strani............................................................................................ - 36 - 

~ Sistemi za urejanje vsebin (CMS)................................................................................. - 37 - 

Skripta za novice Penguins New$ ............................................................................ - 37 - 

Content Management Systems (CMS sistemi).......................................................... - 39 - 

~ Dodatna znanja............................................................................................................. - 41 - 

~ Zaključek ..................................................................................................................... - 42 - 

- 2 - 


urejanje vsebin (CMS), skripta za novice ~

~ ~ Povzetek 

Povzetek 

V moji zaključni nalogi boste spoznali, katere vrste spletnih strani poznamo, na kaj moramo 

paziti pri izdelavi spletne strani, kako si naredimo načrt za oblikovanje in izdelavo spletne 

strani, kako oblikujemo header spletne strani, kako oblikujemo spletno stran, kako moramo 

spletno stran razrezati in jo pripraviti v HTML obliko, kako pripravimo in vnašamo tekste in 

fotografije v spletno stran, kako naredimo povezave, kako naredimo gumbe in orodno vrstico, 

spoznali boste osnove Adobe PhotoShopa in Microsoft FrontPagea, povedal vam bom nekaj 

besed o moji skripti za novice in sistemih za urejanje vsebin, kako optimiziramo spletno stran 

in še kaj. Skratka, pridobili boste vsa potrebna znanja, da boste lahko z nekaj svoje volje sami 

izdelali kvalitetno in uspešno spletno stran. Na koncu sem vam napisal tudi nekaj smernic v 

obliki povezav, na katerih bo vaše znanje samo še napredovalo. 

- 3 - 



~ ~ Ključne Ključne besede 

besede 

Ključne besede v slovenščini: 

oblikovanje spletne strani, izdelava spletne strani, Adobe Photoshop, Macromedia 

Dreamweaver, Micorosoft FrontPage, optimizacija spletne strani, osnove HTML, sistemi za 

urejanje vsebin (CMS), nasveti in triki pri postavitvi spletne strani, osnove interneta, skripta 

za vnos novic, skripta za nalaganje datotek na spletni strežnik 

Keywords in English: 

web design, webpage creation, Adobe Photoshop, Macromedia Dreamweaver, Micorosoft 

FrontPage, webpage optimization, HTML basics, content management systems (CMS), tips 

and tricks involving webpages, internet basics, news script, script for file upload 

- 4 - 



~ ~ Uvod 

Uvod 

Internet je revolucionarni medij, katerega razsežnosti so svetovne. V vsakem trenutku lahko 

do neke informacije o vas, katera se nahaja v spletu, dostopa deset, sto ali celo na tisoče ljudi. 

Splošna miselnost o izdelavi internetnih strani je taka, da je to nekaj zahtevnega, nekaj, kar 

moramo prepustiti strokovnjakom. Vendar lahko z malo volje in znanja, katerega boste 

pridobili ob moji zaključni nalogi, tudi sami naredite preprosto, všečno, zmogljivo in uspešno 

lastno spletno predstavitev. S tem namenom sem se odločil, da vam bom poskusil predstaviti 

nekaj smernic pri oblikovanju spletne strani, napisal napotke, ki jih boste potrebovali, da bo 

vaša spletna stran uspešna in vam predstavil nekaj sistemov za urejanje vsebin spletnih strani 

– pa tudi mojo skripto za vnos novic. Videz spletne strani je pomemben, saj ta v prvem 

trenutku pritegne ali odvrne obiskovalca, vendar je zelo pomembno vedeti tudi to, da je 

odločilnega pomena na spletni strani vsebina spletne strani same. O temu bom več povedal v 

naslednjih poglavjih. 

Z oblikovanjem spletnih strani se ukvarjam že nekaj let, v tem času sem izdelal že približno 

100 različnih predlog (templateov – dizajnov). 

~ ~ Introduction 

Introduction 

Internet is a revolution in media. In every single moment you can access information 

anywhere in the world. And you're not the only one because millions are using internet. So, 

why wouldn't you share you informations, knowledge or just advertise your company »in the 

net«? It might seems hard but it actually isn't. I will show you how to make a simple and yet 

efficient webpage. Nice design which we'll made in a step-by-step tutorial and some tips will 

point you in the right direction. My news script will be introduced, too. Last but not least, I 

will introduce you to some of the content management systems – CMS, systems to create 

dynamic webpage. In fact, they are enabling you to insert text and photos (content) in your 

webpage directly from some kind of control panel. I'm designing webpages for about four or 

five years now, in this time I've designed probably around 100 templates and webpages for 

different companies. 

- 5 - 



~ ~ Kaj Kaj bomo bomo potrebovali? 

potrebovali? 

V moji nalogi sem uporabil programe v spodnjemu seznamu. Zraven vsakega izmed 

uporabljenih programov sem napisal tudi ostale podobne programe, s katerimi lahko na 

podoben način naredite enako kot jaz: 

- 6 - 

Grafični del (oblikovanje predloge spletne strani): 

Adobe Photoshop 7.0 

(za ta del lahko uporabite tudi brezplačnega GIMP-a ali plačljivega CorelDRAW) 

Izvedbeni del (vnašanje tekstov, povezav in fotografij): 

Microsoft FrontPage 

(za ta del lahko uporabite tudi Macromedia Dreamweaver, Mozilla Composer,...) 

Programerski del 

Spletni strežnik s podporo PHP in 1 MySQL bazo, Macromedia Dreamweaver 

(brezplačen spletni strežnik lahko dobite na naslovu http://www.pandela.com, namesto 

Macromedia Dreamweaver pa lahko uporabite kakšen PHP urejevalnik) 

Ostali programi 

Ostali programi, ki jih bom omenil v seminarski nalogi bodo manjši, brezplačni in jih 

bom opisal takrat, ko jih bomo potrebovali. 

Predznanja: 

Od vas pričakujem osnovno znanje angleščine, poznavanje uporabe interneta in 

programov za vnašanje in oblikovanje teksta (Word). Ostalo bomo začeli z osnovami. 

Na naslovu http://www.apachefriends.org/en/xampp-windows.html lahko dobite 

XAMPP, »zbirko orodij«, ki vam po preprosti namestitvi postavi spletni strežnik s 

podporo PHP, MySQL in vsem, kar bomo potrebovali... 



~ ~ Spletni Spletni strežnik 

strežnik 

Preden spletno stran izdelamo, moramo poskrbeti za to, da bo naša spletna stran gostovala na 

nekemu spletnemu strežniku. Spletni strežnik ni nič drugega kot računalnik, ki je 24 ur na dan 

in 7 dni v tednu prižgan in povezan v internet. Poleg spletnega strežnika, kjer se bo naša 

spletna stran nahajala, pa potrebujemo tudi spletno domeno, ime, preko katerega bomo lahko 

dostopali do naše spletne strani. 

Spletni strežnik si lahko izdelamo sami (npr. uporabimo XAMPP), vendar moramo potem 

poskrbeti, da bo naš računalnik čimveč časa priključen v internet. V tem primeru moramo pri 

registrarju domen za določeno obdobje (leto ali več) kupiti spletno domeno in jo »povezati« 

na DNS naslov našega strežnika. Vendar vam tega ne bom razlagal, zato bom sam uporabil 

drugo, malenkost lažjo, ampak dražjo možnost – spletni strežnik (oz. gostovanje) bom 

zakupil. 

- 7 - 

Kaj je spletna domena? 

Spletna domena je del URL (Uniform Resource Locator) naslova, preko nje 

dostopajo uporabniki interneta do našega strežnika – spletne strani (vsak strežnik 

ima lahko več domen). Tipičen primer domene je www.google.com, kjer »WWW« 

(World Wide Web) pomeni to, da je računalnik dostopen v internetu, »Google« je 

v tem primeru ime podjetja (ta del si lahko sami izberemo), »com« pa predstavlja 

končnico – commercial. Končnico domene si lahko sami izberemo (com, net, org, 

eu, si,...). Končnica .si predstavlja našo državo v internetu. 

Zakupljeno imam domeno Lajf.net, zato jo bom v moji zaključni nalogi tudi uporabil. Sami si 

lahko zakupite svojo domeno (na iskalniku Najdi.si vtipkajte »registracija domen«). Spletna 

domena in vaša stran boste morala tudi nekje gostovati. Sam imam gostovanje že kupljeno, vi 

pa ga lahko kupite na enak način kot domeno. Lahko pa uporabite pandela.com in si naredite 

brezplačno poddomeno (karkoli.pandela.com) in tam gostujete vašo spletno stran. 

Kaj pa, če uporabim XAMPP? 

Če si s pomočjo XAMPP-a izdelate lasten spletni strežnik (za potrebe učenja je to 

dovolj), potem spletne domene ne potrebujete. Do vaše spletne strani pa dostopate 

kar preko »localhosta« (v mapo htdocs si shranite spletne strani in nato v brskalniku 

vtipkate naslov http://localhost/). Podrobnejša navodila lahko najdete na 

http://www.apachefriends.org/en/faq-xampp.html. Vaša spletna stran bo za 

obiskovalce dostopna preko vašega IP naslova. 

Ko imamo spletno domeno in spletni strežnik, lahko začnemo z izdelavo spletne strani... 

Pomembno pri izbiri gostovanja 

Število domen v paketu, število email predalov (z spam in antivirus zaščito), število 

baz, podpora PHP, prostor v megabytih (vsaj 50 MB), količina prenosa (vsaj nekaj 

GB), FTP dostop, pa ne pozabite na tehnično podporo, ki pride vedno prav. 

Cene primerljivih paketov spletnega gostovanja so v tujini lahko tudi do 80% nižje 

kot v Sloveniji. 



~ ~ Naredimo Naredimo načrt... načrt... 

načrt... 

Preden se lotimo oblikovanja, si moramo v glavi (ali na papirju) narediti načrt, kakšno spletno 

stran sploh želimo imeti. Ne vprašamo se samo o tem, kakšne barve naj bo naša spletna stran, 

ampak tudi, kje bodo orodne vrstice (menuji), kako velika naj bo naša spletna stran, kam 

bomo postavili tekste, kje bodo fotografije, kaj pravzaprav želimo,...). 

Oblika Oblika strani 

strani 

Sam razlikujem med dvemi vrstami spletnih strani: 

- celozaslonske 

- strani s fiksno širino 

Celozaslonske spletne strani so največkrat portali (ni pa to pravilo). To so strani, katerim se 

širina avtomatično prilagaja glede na ločljivost našega monitorja (večja ločljivost = širša 

stran). Take strani so malenkost zahtevnejše glede načrtovanja in same izvedbe, zato bomo mi 

naredili spletno stran, ki bo imela fiksno širino, neglede na ločljivost uporabnikovega 

monitorja. Takšne spletne strani so ponavadi oblikovno dovršenejše in nekoliko lažje za 

načrtovanje in izdelavo. 

Obe vrsti spletnih strani pa nato delim še v nekaj podskupin: 

1.) Menu levo – teksti – Menu desno 

Teksti in fotografije se nahajajo na sredini med dvemi orodnimi vrsticami (menuji). Nad vsem 

je glava spletne strani (header), spodaj 

pa noga strani (footer). 

Primer strani: Vpis.uni-lj.si 

- 8 - 

Primer strani: Had.si 



2.) Menu levo – tekst 

Teksti in fotografije se nahajajo na 

desno od orodne vrstice (menuja). Nad 

vsem je glava spletne strani (header), 

spodaj pa je lahko noga strani (footer). 

Večina spletnih strani ima zaradi 

preglednosti in uporabnosti orodno 

vrstico na levi strani, najdejo pa se tudi 

izjeme, ki imajo orodno vrstico na 

desni strani (npr. spletni dneviki ali 

blogi).

- 9 - 



3.) Menu zgoraj ali spodaj – tekst zgoraj 

ali spodaj 

Teksti in fotografije se nahajajo pod ali nad 

orodnimi vrsticami (menuji). Glava (header) 

strani se lahko nahaja kjerkoli – nad ali pod 

orodno vrstico oziroma nad ali pod tekstom. 

Primer strani: Mobitel.si 

V moji nalogi sem si izbral »tradicionalno« obliko spletne strani, z glavno orodno vrstico na 

levi strani in pomožnima na vrhu in spodaj, in prostorom za tekst in fotografije desno od 

glavne orodne vrstice. 

Vrste spletnih strani 

Obstaja tudi drugačno razlikovanje spletnih strani – recimo na statične (vsebina se 

ne spreminja) in dinamične (vsebino lahko spreminjamo – narejene v PHPju ali 

kateremu drugemu spletnemu programskemu jeziku. Uporablja se tudi Macromedia 

Flash, s katerim lahko izdelamo animirano spletno stran, ... 

Barve 

Barve 

Na vsaki spletni strani so zelo pomembne barve, saj prava kombinacija barv naredi našo 

spletno stran všečno, medtem ko napačno izbrana kombinacija barv obiskovalce naše strani 

odbija. 

Sam se držim načela, da naj spletna stran vsebuje največ 3 ali 4 različne barve. Odločiti se 

moramo, ali bomo našo spletno stran izdelali v bolj živih barvah (primer: rdeča – oranžna – 

rumena), v bolj nežnih barvah (primer: nežno rumena – bela – nežno plava), temnejših barvah 

(siva – temno modra – temno siva) ali v kakšni drugi kombinaciji. Jaz sem se odločil za 

temnejše barve (siva – temno siva – modra). Naslednje, na kar moramo pomisliti, je ozadje. 

Kakšno ozadje bomo imeli? Spletno stran lahko pustimo tudi bele barve in je ne omejujemo z 

grafičnimi elementi, tako spletna stran izgleda preglednejše. 

Primer strani z belim ozadjem:

Lahko pa se odločimo za druge vrste ozadij: 

Enobarvno 

Enobarvna ozadja nastavimo kar v urejevalniku spletnih strani (FrontPage, 

Dreamweaver) pod Page Setup/Properties -> Page Background. Ali pa v HTML kodi 

oznaki dodamo parameter bgcolor=''#šestnajstiška_vrednost_barve«. Primer: 


- 10 - 

nam bo naredilo rdeče ozadje. 

Preliv 

S pomočjo spodnjega ukaza v HTML kodi lahko naredimo za ozadje naše strani 

preliv: 

 

Kjer zamenjamo začetno (startColorstr) in končno (endColorstr) barvo preliva. Deluje 

samo v Internet Explorerju, če želimo imeti preliv tudi v drugih brskalnikih, se lahko 

poslužimo tretjega načina ozadij. 

Prelivi 

Spreminjamo lahko tudi gradientType. Če nastavimo vrednost na 1, dobimo 

horizontalni preliv. Pri prelivih moramo paziti tudi na to, da nista oba parametra 

barv enaka, saj bomo tako dobili navadno enobarvno ozadje. 

Slika kot ozadje 

Spletni strani lahko kot ozadje nastavimo tudi sliko. Pri tem moramo vedeti to, da se 

bo slika horizontalno in vertikalno ponavljala v ozadju naše spletne strani, dokler ne 

bo zapolnila celotnega ozadja. Na ta način bomo tudi mi naredili lep efekt ozadja. Če 

pa bi želeli imeti za ozadje samo eno barvo (ali sliko preliva), potem se sam 

poslužujem tega, da naredim zelo široko sliko (1200 pikslov in več), nato pa v html 

kodi pod dodam še parameter bgproperties="fixed". 

 

Previdno pri slikah 

Pri slikah, ki jih uporabljate na strani (kot ozadje ali dopolnilo teksta), morate paziti 

to, da jih izbirate iz iste mape (ali katere od podmap), v kateri imate spletno stran. 

Sicer vam jih ne bo prikazalo, ko boste stran prenesli na strežnik. 

V moji zaključni nalogi sem za ozadje uporabil tretji način (slika kot ozadje). 

Web 2.0 

Veliko se zadnje čase govori o Web 2.0. V bistvu to ni nič revolucionarnega, 

»prinesel« je samo nekatere novosti pri oblikovanju (mehkejši robovi, barve, 

zaobljenost, prelivi, tretja dimenzija...), med vidnejšimi je t.i. vodni odsev logotipov: 

Zame je Splet 2.0 uporaben predvsem na računalniku, na papirju nima tako velikega učinka. 


Ko imamo izbrane vse želje in si v glavi približno predstavljamo, kako naj bi naša spletna 

stran izgledala (lahko uporabimo tudi papir), lahko našo spletno stran začnemo oblikovati. 

Priprava Priprava gradiva 

gradiva 

Priporočljivo je tudi, da si čimprej pripravimo gradivo za spletno stran. Teksti za našo spletno 

stran naj ne bodo predolgi, vsebujejo naj čimveč(krat) ključnih besed, katere bo predstavljala 

naša spletna stran (če bo naša spletna stran predstavljala šport, potem naj bo čimvečkrat 

uporabljena beseda »šport«, vendar več o temu takrat, ko bomo govorili o optimizaciji spletne 

strani). Seveda morajo biti teksti v elektronski obliki, tako bomo imeli kasneje manj dela. 

Fotografije za spletno stran naj ne bodo prevelike (več kot 200 kB, pomembnejše fotografije 

kot so načrti ali kvalitetnejše fotografije pa največ 500 kB), saj uporabniki interneta naredi 

čakajo, da se nekaj naloži. 

~ ~ Začnimo Začnimo oblikovati 

oblikovati 

Glava Glava strani strani (header) (header) 

(header) 

Najprej si bomo izdelali glavo naše strani (header), katero bomo kasneje vključili v predlogo 

naše spletne strani. Odločil sem se, da bom v headerju strani imel motiv strele. Sledite 

spodnjim korakom: 

1.) Odprite Adobe Photoshop. Naredimo nov dokument (File -> New) s spodnjimi lastnostmi: 

2.) Ozadje spremenimo v črno. To storimo tako, da v Orodjarni kliknemo na Paint Bucket 

Tool ali pritisnemo tipko G. Kliknemo na Foreground color (prvo barvo) kot je označeno na 

spodnji sliki s puščico 1. Nato pa lahko izberemo črno barvo tako, da povlečemo - »krogec« - 

izbirnik barve (Color picker) v črno barvo, desno spodaj. Lahko pa se poslužimo tudi tretjega 

načina (puščica 3.), kjer vtipkamo šestnajstiško vrednost črne barve - #000000. 


- 11 - 


3.) Nato izvedemo ukaz Layer from background, da nam iz ozadja (Backgrund) program 

ustvari novo plast (Layer). To storimo tako, da gremo pod Layer -> New -> Layer From 

Backgrund. Klikneme na gumb OK. 

4.) Nato gremo pod Filter -> Render -> Lens Flare (efekt leče kot pri fotografiranju). Pustimo 

privete nastavitve, edino kar naredimo je to, da premaknemo križec v zgornji desni kot (kot je 

označeno na spodnji sliki). 


- 12 - 

Ta postopek ponovimo še 4x, tako, da imamo na koncu 5 

efektov leče, postavljene tako kot na igralni kocki: 

5.) Ko to naredimo, gremo pod Filter -> Sketch -> Chrome, kjer lahko pustimo kar privzete 

nastavitve. 

Filtri 

Raziščite vse Photoshopove filtre, saj so zelo močno orodje, ki lahko polepšajo vaše 

fotografije ali dajo vaši strani umetniški/zanimiv pridih. Na sliki lahko uporabite 

tudi več filtrov. Možnosti so skoraj neomejene. 


6.) Nato gremo pod Image -> Adjustments -> Hue / Saturation (ali pa uporabimo bližnjico 

CTRL+U) in vtipkamo spodnje parametre: 

7.) Nato našo plast podvojimo. To storimo tako, da z desnim miškinim gumbom kliknemo na 

našo plast v oknu Layers. Kliknemo OK. 

8.) Nato z desnim miškinim gumbom v oknu Layers kliknemo na novo plast in izberemo 

Blending Options. Pod Blend Mode izberemo Overlay. 

9.) Dokument shranimo (File -> Save As) s končnico .psd (Photoshop) in .jpg v mapo, v 

kateri bomo imeli spletno stran. 


- 13 - 


Čestitam, glava naše spletne strani je izdelana! 


- 14 - 

Glava spletne strani 

Glava spletne strani je zelo pomemben element, zato je dobro, da se ji posvetite in 

da jo poskušate narediti čimprivlačnejšo. Raziščite tudi druge Photoshopove efekte 

in uporabljajte trike, ki jih boste spoznali v moji zaključni nalogi, tako da bodo vaši 

headerji privlačni za obiskovalca strani. V headerju spletne strani mora biti tudi 

logotip vašega podjetja, kateremu lahko naredite kakšen zanimiv efekt. 

Kako postaviti logotip v glavo strani? 

Če želimo v Photoshopov dokument dodati logotip (recimo iz spleta), potem na 

internetu z desnim miškinim gumbom kliknemo na logotip in kliknemo Copy 

(kopiraj). Nato se vrnemo v odprt dokument v Photoshopu in gremo Edit -> Paste 

(ali CTRL + V) in logotip se nam je kot nova plast dodal v obstoječ dokument. 

Sedaj ga moramo obrezati (uporabimo lahko Magic Wand Tool in kliknemo nekam 

okoli logotipa, nato pa s tipko Delete izbrišemo okolico). 

Nato logotip postavimo na željeno mesto v headerju (kliknemo nanj in vlečemo). 

Nad logotipom lahko naredimo še kakšen efekt, recimo na temnejšem ozadju, kot je 

naše, lepo izpade Outer Glow (zunanje »sevanje«), katerega naredimo tako, da 

imamo v oknu Layers označeno plast z logotipom (sicer kliknemo nanjo z levim 

miškinim gumbom) in nato gremo v orodni vrstici na vrhu pod Layer -> Layer Style 

-> Outer Glow. In eksperimentiramo... Primer z Nike logotipom: 


Oblikovanje Oblikovanje strani 

strani 

1.) Odpremo novo datoteko v Photoshopu (File -> New) in ji nastavimo velikost 800 x 500 

pikslov. 

2.) Nato v orodjarni kliknemo z levim miškinim gumbom na gumb (in držimo nekaj časa, da 

se nam odprejo vse izbire), ki je označen na spodnji sliki in kliknemo na Rounded Rectangle 

Tool (zaobljen pravokotnik). 

Nato sledimo spodnji sliki z navodili: 

Izbrano imamo orodje za risanje pravokotnikov z zaobljenimi robovi (puščica 1), nato 

kliknemo na prvo barvo (puščica dva) in ji določimo nežno sivo barvo s kodo #E2E2E2. Nato 


- 15 - 


v polje Radius vtipkamo 10 px - pikslov (puščica 3), kar pomeni, da bodo robovi 

pravokotnika bili zaobljeni kot del kroga z radijem 10 pikslov. Postavimo se v položaj puščice 

4 (zgornji levi rob), kliknemo levi miškin gumb, držimo in povlečemo miško do spodnjega 

desnega roba. Narisan imamo zaobljen pravkotnik nežne sive barve. 

3.) Sedaj bomo naredili nekaj efektov na našemu pravokotniku. V oknu Layers moramo s 

klikom označiti našo plast (Shape 1), če le ta ni označena. Nato gremo pod Layer -> Layer 

Style -> Inner Shadow (notranja senca), kjer naši plasti nastavimo notranjo senco s spodnjimi 

parametri: 

4.) Sedaj lahko v našo podlogo spletne strani vključimo glavo (header), ki smo ga izdelali v 

prejšnjem poglavju. To storimo tako, da gremo pod File -> Open in odpremo JPG sliko 

našega headerja. Izberemo orodje Rectangular Marquee Tool (orodje za označevanje v obliki 

pravokotnika). 


- 16 - 


5.) S tem orodjem si nato označimo »trak« na našemu headerju, tako kot je prikazano na 

spodnji sliki: 

Označevati začnemo pri prvi puščici, končamo pa pri drugi puščici (približno), pomembno je 

le to, da gremo označimo celotno širino in da ne označimo previsokega dela, ker bo sicer 

prevelik za našo spletno stran. Ko del označimo, lahko spustimo levi miškin gumb in gremo 

pod Edit -> Copy ali pa uporabimo kombinacijo tipk CTRL + C. Sedaj lahko ta dokument 

zapremo (majhen X desno zgoraj ali File -> Close ali CTRL + W). Spet imamo odprto našo 

predlogo strani. 

6.) V našo predlogo s sivim ozadjem sedaj prilepimo izbrani del headerja. To storimo tako, da 

gremo pod Edit -> Paste (CTRL + V) in nato del z vlečenjem miške postavimo na željeno 

pozicijo (približno tako kot na spodnji sliki). 


- 17 - 

Preprost in všečen efekt 

Odprite si nov dokument v Photoshopu, velikosti 2 x 2 piksla, pod Contents 

označite Transparent (prosojno ozadje). Nato izberite kot prvo barvo črno in 

izberete Pencil Tool in mu nastavite velikost na 1 piksel (zgoraj). 

S črno barvo narišete 2 piksla horizontalno v sliko, tako kot sta narisana spodaj: 



- 18 - 

Vse, kar morate sedaj storiti še je to, da greste pod Edit -> 

Define Pattern (definiraj nov vzorec), ga poimenujete (npr. 

Crte) in kliknete OK. Dodali ste nov vzorec, sedaj lahko 

zaprete ta dokument in nadaljujete z oblikovanjem 

predloge spletne strani. 

7.) Še vedno imamo v oknu Layer označeno plast s headerjem, nato gremo pod Layer -> 

Layer Stlye -> Pattern Overlay in izberete vaš nov vzorec, katerega ste prej sami izdelali. 

Vzorce odprete tako, da kliknete na ozek in visok gumb 

s majhno puščico (pod Pattern:). 

Ko izberemo vzorec, mu nastavimo nastavitve: 

Blend Mode: Normal 

Opacity: 25% 

Scale: 100% 

In naš header že izgleda lepše, kajne? 

Vzorci 

Vzorce in čopiče (in še nekaj drugih stvari) si lahko tudi sami izdelate in jih 

uporabljate (naredite sliko in greste pod Edit -> Define). Tako bodo vaše stvaritve 

unikatne in lepše. 

8.) Naš header bomo sedaj »obogatili« še s pol-prosojnim dodatkom, kateri so zelo moderni v 

Spletu 2.0 (Web 2.0). Za prvo barvo izberemo belo (puščica 1), izberemo orodje Rectangle 

Tool (puščica 2) in nato na naš header narišemo pravokotnik po celi širini, v višino pa naj 

meri približno za višino teksta, tako kot na spodnji sliki (puščica 3). Nato mu nastavimo še 

prosojnost na približno 50% (v oknu Layers, puščica 4). 



- 19 - 

Urejanje oblik 

Vsem oblikam v Photoshopu lahko dodajamo oporne točke »Anchor Points« in jih 

nato poljubno oblikujemo (krivimo, premikamo). 

Prekrivanje 

Če prekrijemo del s 50% Opacity z enakim delom s 50% Opacity, je enako kot če 

bi prvemu delu nastavili 75% Opacity. Prosojnost je zelo lep dodatek k fotografiji 

ali predlogi spletne strani. 

9.) Naredimo si še prostor za našo orodno vrstico... Za prvo barvo si nastavimo temnejšo sivo 

barvo s šestnajstiško kodo #C8C8C8, izberemo orodje Rounded Rectangle Tool in narišemo 

pravokotnik, tako kot je prikazano na spodnji sliki. 

Sedaj naredimo še nekaj efektov. Gremo pod Layer -> Layer 

Style. Obkljukamo Bevel and Emboss, nato pa obkljukamo še 

Gradient Overlay in nastavimo spodnje nastavitve (lahko pa 

tudi sami malo eksperimentirate in dodate še kakešn Pattern 

Overlay – pri večih efektih ne sme nobeden imeti Opacity na 

100%, ker sicer ne boste videli drugih efektov). 



- 20 - 


Sedaj moramo to plast 

postaviti pod plast s 

Headerjem, tako da se 

bo zgornji del tega 

pravokotnika skril. To 

naredimo tako, da gremo 

pod Layer -> Arrange -> 

Send Backward. Ta 

postopek ponavljamo, 

dokler se nam zgornji 

del temno-sivega 

pravokotnika ne skrije 

za header strani. 

Plasti 

S prikrivanjem in določanjem prosojnosti posameznih plasti si lahko olajšamo delo 

in pomagamo do lepših izdelkov. Razlikujemo med 4 ukazi: 

- Bring To Front (postavi plast nad vse plasti) 

- Bring Forward (postavi plast nad plast, ki trenutno leži nad njo) 

- Send To Back (postavi plast pod vse plasti) 

- Send Backward (postavi plast pod plast, ki je trenutno pod njo) 

Plasti lahko tudi kar premikamo z označitvijo in držanjem miškinega gumba v oknu 

Layers. 

10.) Tako, sedaj je predloga naše spletne strani končana. Predstavil sem vam nekaj prijemov 

in smernic, po katerih lahko sami naprej raziskujete Adobe Photoshop. Našo predlogo 

shranimo s končnico PSD (če jo bomo še kdaj urejali ali kaj spreminjali/dodajali) in kot JPG 

sliko. 

Preliv (Gradient) črte 

Lep efekt je preliv črte, tako da se le-ta izgubi v ozadje spletne strani. Narišemo črto 

in ji v Layer Style nastavimo horizontalni (0°) Gradient Overlay, ki se začne z eno 

barvo, konča pa z barvo ozadja. Primer:

Razrez Razrez strani 

strani 

Spletno predlogo smo si izdelali, vendar to zaenkrat še ni spletna stran, ampak slika v JPG 

formatu. Če želimo iz slike narediti spletno stran, moramo sliko »razrezati« in jo »zložiti« 

skupaj v enemu od programov za izdelavo spletno strani (FrontPage, Dreamweaver,...). Sam 

bom za razrez uporabil program ImageReady, katerega dobite v paketu skupaj s Adobe 

Photoshopom (isto lahko naredite tudi v samem Photoshopu, vendar je ImageReady tej nalogi 

po mojem mnenju bolj kos). Odpremo Adobe ImageReady... 

1.) Z ukazom File -> Open odpremo JPG naše predloge spletne strani. 

2.) Izberemo orodje Slice Tool, s katerimi bomo izrezovali posamezne kose naše predloge 

3.) S Slice Toolom označujte posamezne dele tako kot so označeni na spodnji sliki: 

Poskusite biti čimbolj natančni ! 

Opis, zakaj sem posamezen del tako izrezal: 

Del 1 – uporabil ga bom kot sliko, ki bo z ovalom zaključevala zgornji del 

Del 2 – uporabil ga bom kot ozadje, nanj pa bom dal manjšo verzijo »orodne vrstice« 

Del 3 – uporabil ga bom kot sliko, ki bo z ovalom zaključevala zgornji del (isto kot del 1) 

Del 4 – uporabil ga bom kot sliko, nima nobene funkcije, samo da se ga vidi 

Del 5 – uporabil ga bom kot ozadje, nanj bom napisal ime spletne strani 

Del 6 – uporabil ga bom kot sliko, tako kot del 4 

Del 7 – uporabil ga bom kot ozadje, katero se bo samodejno ponavljalo navzdol, ko se bo 

spletna stran vertikalno daljšala (ko bo več teksta ali slik). Na njemu bo tudi orodna vrstica. 

Del 8 – ta del lahko uporabim kot ozadje ali pa bom preprosteje (in prijaznejše do obiskovalca 

po hitrosti nalaganja) tej celici / tabeli nastavil ozadje na isto sivo barvo, kot bi jo imel ta del 

(#E2E2E2) 

Del 9 – uporabil ga bom kot ozadje, ki se bo samodejno ponavljalo navzdol, ko se bo spletna 

stran daljšala po vertikali (zaradi vsebine). Tako kot del 7, le da tu ne bo orodne vrstice. 

Del 10 – uporabil ga bom kot sliko, ki bo zaključevala spletno stran 


- 21 - 


4.) Sedaj samo še kliknemo na File -> Save Optimized As in izberete mapo, kjer boste imeli 

spletno stran. Pazite, da pri »Save as type« označite »Images only (*.jpg)«. Potrdite. 

5.) Sedaj bi morali imeti v tisti mapi, kamor ste razrez shranili, mapo »Images« in v njej lahko 

pregledate vse razrezane kose predloge. Ta del je končan. 


- 22 - 

Razrez spletne strani 

Načinov za razrez spletne strani je več, vsak ima lahko svojega. Vendar vsakega 

razreza še ne moremo spraviti v obliko, da bo pravilno deloval kot spletna stran 

(še posebej rado se zatakne pri ponavljanju ozadja oz. daljšanju spletne strani). 

Sam vam lahko dam nekaj smernic, vendar boste na razrezih in zlaganju le-teh v 

spletno stran morali sami vaditi, da boste dobili pravi občutek. V naslednjemu 

poglavju bom opisal (in tudi sami boste ugotovili), zakaj sem naredil posamezen kos 

tako kot sem ga. 

Save Optimized As 

Adobe ImageReady vam lahko tudi sam zloži spletno stran iz razreza, to lahko 

naredite tako, da pod »Save as type« označite »HTML and Images«, vendar boste 

vseeno morali določiti slike kot ozadje na nekaterih delih. Spletna stran bo na ta 

način bolj amatersko sestavljena kot če bi jo zložili sami, tako kot bomo storili v 

naslednjem poglavju. Tega načina (da vam ImageReady sestavi stran) ne 

priporočam najbolj, je pa uporaben za učenje, zato kar poskusite. 


~ ~ Izdelava Izdelava spletne spletne strani 

strani 

Od tukaj naprej mi lahko sledite vsi ostali, ki vas oblikovanje ne zanima, vendar pa bi si radi 

izdelali spletno stran, bodisi iz kakšne izmed brezplačnih predlog, katerih na internetu ne 

manjka (http://www.google.si/search?hl=sl&q=free+website+templates&meta=), bodisi že 

imate izdelano spletno stran, pa bi radi kaj spremenili,... 

Najprej bomo našo razrezano predlogo spravili v spletno stran, tako da bomo lahko dodali 

orodno vrstico, naredili prostor za tekste in fotografije, napisali naslov... Vsak pomembnejši 

korak, ki ga bom naredil, bom tudi opisal, zakaj sem tako naredil 

Veliko sem razmišljal o tem, kateri program naj uporabim za ta del. Izbiral sem med 

Macromedio Dreamweaverjem, Mozillo Composerjem in Microsoft FrontPageom. Za 

slednjega sem se odločil zato, ker ga ima veliko ljudi nameščenega na računalniku, vendar ga 

ne zna uporabljati (kot del Microsoft Office with FrontPage-a) in tudi zato, ker lahko na 

skoraj enak način naredimo iste zadeve v obeh sorodnih programih, le da je Mozilla 

Composer malo preveč okrnjen zame (je pa brezplačen), Macromedia Dreamweaver pa je 

izredno močno in profesionalno orodje (z njim lahko tudi programiramo), zato ga ne 

priporočam začetnikom, edino če ste zelo ambiciozni =). Menim, da bo FrontPage prava 

izbira za nas, ker bomo z njim osvojili dovolj osnov tudi za ostale programe... 

V V HTML HTML obliko 

obliko 

1.) Odpremo Microsoft FrontPage. 

2.) Kliknemo na ikono Create a new normal page. Odpre se nam prazna bela stran. 

3.) Z desnim miškinim gumbom kliknemo nekam na belo v našo stran in izberemo Page 

Properties (ali pa gremo File -> Properties). Najprej spremenimo »Title:«, tja napišemo naslov 

naše spletne strani (npr. »Tehniški Šolski Center Nova Gorica«). To je naslov, ki se pojavi v 

naslovni vrstici brskalnika, ko odpremo spletno 

stran. 


- 23 - 

(v HTML kodi najdemo naslov strani med 

oznakama Naslov) 

Premaknemo se v zavihek Background, kjer zaenkrat ozadja še ne bomo spreminjali (bomo pa 

kasneje). Poigrate se lahko s Colors, kjer si lahko nastavite privzeto barvo ozadja (tega ne 

bomo spreminjali, ker nočemo enobarvnega ozadja), barvo tekstov, barvo neobiskane 

povezave (ko še ni bila kliknjena - Hyperlink) – privezeta je modra, barvo obiskane povezave 

(Visited Hyperlink – ko je bila kliknjena) in barvo aktivne povezave (Active Hyperlink – ko 

se miškina puščica nahaja na povezavi). Sam sem tukaj pustil vse privzeto. 

Zavihek Margins (odmiki) nam pomaga pri oblikovanju, če želimo, da se naša spletna stran 

dotika levega oziroma zgornjega roba brskalnika, takrat nastavimo Top/Left Margin na 0 

pikslov. Vaša izbira, sam sem oboje obkljukal. 


Pod zavikom Custom lahko odstranimo User Variables, kjer piše, da smo spletno stran 

izdelali z Microsoft FrontPageom, to naredimo tako, da dvakrat kliknemo na gumb Remove. 

Zavihek Language je kar pomemben, nastavimo Slovenian, Western European, encoding pa 

lahko pustimo Automatic ali nastavimo na Central European (ISO-8859-2). Kliknemo na 

gumb OK in okno »Page Properties« se nam zapre. 


- 24 - 

Title 

Title in meta oznake so pomembne pri optimizaciji spletne strani, o čemer lahko 

preberete v poglavju o optimizaciji spletne strani. 

4.) Začnimo z izdelavo... Kliknite Table -> Insert -> Table in nato vpišite enake parametre kot 

so na spodnji sliki: 

Opis parametrov: 

Rows – število vrstic v tabeli 

Columns – število stolpcev v tabeli 

Alignement – poravnava, sam sem nastavil na 

»Center«, kar pomeni na sredino zaslona 

Border size – debelina črt tabele (0 pomeni, da 

so črte nevidne, uporabno za oblikovanje) 

Cell padding – razmik med vsebino (tekst/foto) 

celice v tabeli in robom tabele (v pikslih) 

Cell spacing – razmik med posameznimi 

celicami v tabeli (v pikslih) 

Specify width – širina tabele (lahko v pikslih ali 

procentih (celotna širina brskalnika = 100%)). 

Sam sem nastavil širino tabele na 800 pikslov, ker je toliko široka predloga spletne strani, ki 

smo jo naredili. 

Tabele in oblikovanje spletne strani 

Kot boste spoznali, so vse spletne strani zgrajene iz serije tabel oz. njihovih celic, 

katere vsebujejo posamezne dele razrezane predloge spletne strani. Razlikujem med 

dvema tipoma celic/tabel: 

1.) Celice/Tabele, ki vsebujejo del predloge kot sliko 

2.) Celice/Tabele, ki vsebujejo del predloge kot ozadje 

Četudi vam sedaj ni prav veliko jasno, si te dve razdelitvi zapomnite, saj se vam 

bodo zadeve razjasnile ob nadaljnih primerih. 

!!! Poglejte si še enkrat razrez in njegovih 10 delov ter zakaj bomo kateri del 

uporabili. 

5.) Z desnim miškinim gumbom kliknemo v tabelo in 

izberemo ukaz »Split cells« - razdeli celico. Tako kot na sliki 

desno razdelimo na 2 vrstici (2 rows). 


6.) V zgornjo vrstico naše tabele vstavimo še eno tabelo, velikosti 800 pikslov (kliknemo z 

levim v vrstico, Table -> Insert -> Table -> enaki podatki kot prva tabela. Sedaj to tabelo 

razdelimo v 3 stolpce (isti postopek kot točka 5, samo da izberemo Columns). Ko to 

naredimo, imamo v eno spodnjo vrstico in v zgornji vrstici tri celice. Z desnim kliknemo v 

prvo celico in izberemo Cell Properties. Nastavimo širino naši celici na 23 pikslov, tako kot je 

na spodnji sliki. 


- 25 - 

Kako dobiti širino in višino slike? 

Načinov je veliko, preprost je ta, da odprete mapo 'images', katera vsebuje dele 

razrezane predloge in greste z miško preprosto preko slike, za katero želite izvedeti 

koliko je široka oz. visoka. Ali pa si ogledate Details (Podrobnosti) slike v okvirčku 

na levi strani Raziskovalca (samo Windows XP). 

Širina naše celice je 23 pikslov, širina prvega razrezanega kosa naše strani je 23 pikslov. 

Super. Z levim kliknemo v to celico, nato pa gremo pod Insert -> Picture -> From File, kjer iz 

mape 'images' izberemo prvi del naše strani (predloga_01). 

7.) Sedaj ponovimo postopek in tudi tretji celici v prvi vrstici določimo širino (15 pikslov). In 

nato vstavimo sliko z naslovom predloga_03. Sedaj pa samo še nastavimo sliko predloga_02 

kot ozadje druge celice v prvi vrstici in naša zgornja, pomožna orodna vrstica bo končana. 

Kliknemo v drugo celico v prvi vrstici (tisto med obema slikama, ki smo ju že vstavili) in 

gremo pod Cell Properties (Lastnosti celice). Tam označimo »Use background picture« (za 


ozadje uporabi sliko), kliknemo na gumb Browse (Prebrskaj) in poiščemo predloga_02. 

Kliknemo OK in zgornja orodna vrstica je dokončana. 


- 26 - 

Zakaj je predloga_02 ozadje? 

Predloga_02 sem uporabil kot ozadje zato, ker lahko na ozadja pišemo, medtem ko 

na vstavljeno sliko ne moremo pisati, delati povezav ali vstavljati fotografij. 

8.) Sedaj se spravimo na drugo vrstico... Ponovimo že znani postopek in jo razdelimo na dve 

novi vrstici (desni klik -> Split Cells) – lahko jo razdelite tudi na več vrstic, tako, da vam ne 

bo treba kasneje, a zaradi vaje raje delajmo zadeve počasneje. V drugo vrstico lahko vstavimo 

predloga_04, kar kot sliko, ker nanjo ne bomo nič pisali. Torej, z levim kliknemo v drugo 

vrstico, gremo pod Insert -> Picture -> From file in poiščemo predloga_04. Sedaj morate 

imeti nekaj takega kot je na spodnji sliki: 

9.) Tretjo (prazno, trenutno najbolj spodnjo) vrstico razdelimo v dve novi vrstici. V zgornjo 

vrstico (tretjo, ne najbolj spodnjo – tista je sedaj četrta) vstavimo novo tabelo, širine 800 

pikslov. 

Nevidna meja (border) 

V našem primeru je spletna stran ograjena kot pravokotnik že v sami osnovi (z 

zaobljenimi robovi). Sicer pa lahko našo stran ogradimo v pravokotnik tako, da 

nastavimo mejo na 1 ali 2 piksla. Čeprav novi trendi oblikovanja spletnih strani 

nekako narekujejo, da robove čimbolj mehčamo (senčimo, prelivamo). Odvisno od 

oblikovalca in same spletne strani. 



- 27 - 


Nato z desnim kliknemo v novo 

ustvarjeno tabelo (dejansko se je ne vidi, 

je pa znotraj tretje vrstice) in ji 

nastavimo višino na 30 pikslov (kolikor 

je visoka predloga_05). Tabelo moramo 

pripraviti tako, da bo pravšnje velikosti 

za predloga_05, ker bo le-ta služila kot 

ozadje in bomo na njo lahko pisali. In 

označimo »Use background picture« -> 

Browse ter poiščemo predloga_05.jpg. 

Sedaj imamo narejen prostor v headerju 

naše spletne strani, kamor bomo lahko 

napisali naslov. 

10.) Zdajšnjo četrto vrstico razdelimo v dve novi vrstici. Nato v predzadnjo vrstico (četrto, 

zadnja je po delitvi peta) vstavimo kot sliko še predloga_06. Glava naše spletne strani je 

končana, čestitam !!! 

11.) Pol poti je že za nami. Sedaj prihaja malenkost zahtevnejši del.. 

Zdajšnjo zadnjo vrstico spet razdelimo v dve novi vrstici, tokrat zadnjič, obljubim. V 

predzadnjo vrstico vstavimo novo tabelo, širine 800 pikslov, brez meje – z enakimi podatki 

kot tabela v 4. koraku. To tabelo razdelimo v 3 stolpce (desni klik v tabelo -> Split Cells -> 3 

columns), tako da dobite iste celice kot so na spodnji sliki: 

Puzzle 

Postavljanje spletne strani v HTML obliko je podobno zlaganju puzzlov. 

Pomembno je, da smo stran dobro načrtovali in si pripravili prave kose, ki bodo v 

spletni strani pravilno »delovali«. Sicer bomo morali stran še enkrat (drugače) na 

novo razrezati. V najslabšem primeru pa jo na novo načrtovati. Kar pa ni nič 

slabega, saj vaja dela mojstra.

Z desnim kliknemo v prvo celico (stolpec, ki smo ga razdelili) in gremo pod Cell Properties. 

V prvi stolpec te vrstice bomo kot ozadje vstavili sliko predloga_07, katera je široka 177 

pikslov. V Cell Properties damo naslednje podatke: 


- 28 - 

Vertical alignement (navpična postavitev/poravnava) 

moramo nastaviti na TOP, kar pomeni, da bo ta celica 

vedno na vrhu, neglede na obnašanje (dolžino) ostalih 

celic v tej tabeli. To smo naredili zato, da se nam 

orodna vrstica ne bo pomikala navzdol, ko bomo 

podaljševali sosednjo celico. Širino pa na 177 pikslov, 

kolikor je široka predloga_07.jpg, ki smo jo uporabili 

kot ozadje. 

Vertical / Horizontal alignement (navpična / vodoravna poravnava) 

Uporabljamo ju takrat, ko želimo, da se nek element v celici (npr. logotip, orodna 

vrstica,...) ne bi premikal, če bi premikali ostale celice. Spodnji primer je s sliko 

Mobitelove spletne strani (lahko bi pa tam bil tekst, orodna vrstica, tabela,...). 

Primer z nastavljenim »Top«: Primer brez »Top«: 

Vidimo, da se slika brez nastavljenega parametra TOP nahaja na sredini celice (ker 

mora le-ta biti velika toliko kot sosednja celica v tabeli). 

Horizontal alignement navadno uporabljamo pri 100% širokih spletnih straneh, 

katere se prilagajajo ločljivosti (enim celicam v tabeli nastavimo npr. Left, te se 

neglede na ločljivost »držijo« leve strani, druge pa se podaljšujejo, da zavzamejo 

100% zaslona). Tega mi ne bomo uporabili. 

Gremo v sosednjo celico (drugi stolpec), katermu 

nastavimo širino na 608 pikslov (kolikor je široka 

predloga_08.jpg). Ker je predloga_08.jpg enobarvna – siva 

s kodo barve #E2E2E2, lahko tej celici kar nastavimo za 

ozadje kar to barvo, namesto, da »kurimo strežnik« in ji kot 

ozadje nastavimo predloga_08.jpg. Pod Cell Properties v 

sekciji Background izberemo Color, nato pa More colors. 

Nato vstavimo kodo barve (#E2E2E2) v okno Value. 

Kliknemo OK. Tako nastavimo sivo barvo, ki je identična 

tisti na predloga_08. Še enkrat kliknemo OK in imamo sivo 

ozadje. 



- 29 - 

Top 

Tudi tej celici lahko nastavite navpično poravnavo na »Top«, tako da bomo vedno 

začeli vnašati tekste in fotografije iz vrha. 

Kako dobiti kodo barve? 

Preprosto, sliko odpremo s Photoshopom in potem z orodjem Eyedropper Tool 

kliknemo na barvo v sliki, katero želimo dobiti. Nato kliknemo na prvo barvo 

(kamor se nam shrani barva, ko nanjo kliknemo z Eyedropper Tool) in prebermo 

šestnajstiško kodo barve. 

Tukaj so nam na voljo tudi vrednosti v R(ed), G(reen), B(lue) formatu barv, CMYK, 

itd., kar nam lahko pride prav v drugih grafičnih programih (npr. CorelDRAW). 

Ostal nam je še zadnji stolpec, kateremu ni potrebno nastavljati širine, saj se je le-ta nastavila 

sama (800 pikslov – 177 pikslov (prvi stolpec) – 608 pikslov (drugi stolpec) = 15 pikslov, 

kolikor je široka predloga_09.jpg), tako da samo še celici za ozadje nastavimo 

predloga_09.jpg. V zadnjo vrstico pa vstavimo še predloga_10.jpg in naša spletna stran je v 

HTML obliki ter pripravljena na obdelavo. Čestitam !!! 

Končni izdelek sedaj izgleda tako: 

Orodna Orodna vrs vrstica vrs tica in in naslov naslov strani 

strani 

Naredimo si še orodno vrstico, tam kjer smo jo načrtovali, 

torej v prvi stolpec v predzadnji vrstici, tisti, ki ima kot 

ozadje predloga_07. V to celico vstavimo tabelo s temi 

podatki: 

Alignement (pozicija): Center (na sredini celice) 

Width: 75% (široka naj bo 75 procentov širine celice) 

Sedaj imamo na voljo dve možnosti: 

1.) to tabelo razdelimo v več vrstic in v vsako vrstici 

naredimo eno povezavo (ali gumb) 



- 30 - 

2.) Preprosto v vsako vrstico vpišemo tekst (gumb) in naredimo povezavo 

Sam sem izbral drugo možnost, ker je malenkost preprostejša. Izbral sem si pisavo Verdana, 

velikosti 2 (10 pikslov), krepko – to izberemo na isti način kot v Wordu. Začnemo vpisovati 

imena »gumbov« - Domov, Naše storitve, Kje smo, Kontakt, E-mail, seveda vsakega v svojo 

vrstico. 

O fontih in novih vrsticah 

Če želite skočiti samo eno vrstico dol, potem morate uporabiti kombinacijo tipk 

SHIFT + Enter, če boste uporabili samo Enter, vam bo znak za vnašanje skočil za 

dve vrstici navzdol. 

Pri izdelavi internetnih strani morate paziti na to, da je vaš tekst napisan v fontu, 

katerega bodo imeli tudi obiskovalci vaše spletne strani, sicer jim teksta ne bo 

pravilno prikazalo. Zato se navadno uporablja standardne fonte, kot so: 

Arial, Verdana, Tahoma, Comic Sans MS, Garamond, MS Sans Serif,... 

V del, kjer piše »NASLOV NAŠE SPLETNE STRANI« sem vpisal naslov naše spletne strani 

– Verdana, velikost 3 (12 pikslov), krepko, sredinska poravnava, naslov sem dal 

ZAKLJUČNA NALOGA ~ računalništvo. Prav na vrhu (tam kjer je pisalo »na ozadja lahko 

pišemo...«) sem naredil še eno pomožno orodno vrstico, Verdana, 1 (8 pikslov), krepko, kjer 

sem posamezne povezave (gumbe) ločil z znakom »|« (lahko uporabimo tudi kaj drugega -> /, 

::, ~, .:., ...). 

Urejanje teksta v Microsoft FrontPage 

Je podobno (skoraj identično) urejanju besedil v Microsoft Wordu, zato vam tega ne 

bom razlagal, ampak si bomo pogledali samo stvari, ki jih v MS Wordu ni. 

Sedaj izdelamo še povezave, tako da bo orodna vrstica začela 

delovati. Z levim miškinim gumbom označimo besedo »Domov«, 

desni klik nanj in izberemo Hyperlink. 


V polje Address (naslov) vtipkamo: index.html (index je prva stran, na katero bo šel 

brskalnik, ko bomo obiskali nek 

spletni naslov) 

To pomeni, da ko bo obiskovalec 

kliknil na »Domov«, ga bo 

brskalnik napotil na stran, ki bo 

imela ime index.html (naša prva 

stran) v isti mapi, kot se nahaja 

spletna stran, ki jo je obiskovalec 

obiskal. Naredili ste vašo prvo 

(notranjo) povezavo, čestitam. 

Postopek ponovimo na vseh ostalih besedah, le da v polje Address vpisujemo druga imena 

strani (npr. storitve.html, kjesmo.html, kontakt.html). Pri emailu si lahko izberemo zavihek Email 

Address in tam vtipkamo email ali pa v polje Address vtipkamo - mailto:zero@lajf.net, 

kjer zero@lajf.net zamenjate z vašim email naslovom (ob kliku na E-mail bo odprlo novo esporočilo 

v obiskovalčevem E-mail programu (klientu) in on bo moral samo še natipkati 

vsebino sporočila). 


- 31 - 

Barva povezav in imena strani (address) 

Barvo povezave (gumba) lahko spremenite (privzeta je temno modra) na isti način 

kot v Wordu spremenite barvo teksta/besede. 

Pri imenih strani ne smete uporabljati č,ž,š-jev ali posebnih znakov, namesto 

presledka pa raje napišite podčrtaj (kdo_sem.html). Enako velja za imena slik. 

Odvisno od operacijskega sistema, na kateremu teče strežnik. 

Isti postopek uporabimo tudi na zgornji, pomožni orodni vrstici (če imamo v glavni vrsti 

Domov – index.html, Storitve – storitve.html, moramo isto razmerje ohraniti tudi v pomožni 

orodni vrstici). 

Fotografije, Fotografije, besedila, besedila, črte,... 

črte,... 

Fotografije 

Omenil sem že, da ko vstavljamo fotografije ali slike v našo spletno stran, denimo v drugi 

stolpec v drugi vrstici (sivo ozadje), kjer smo predvideli prostor za tekste in fotografije, 

moramo paziti: 

- da je fotografija, ki jo vstavljamo v stran v isti mapi (ali kateri od podmap) kot je spletna 

stran, ki jo urejamo 

- da fotografije na vsebuje č,ž,š ali kakšnih drugih posebnih znakov, ker nam je sicer ne bo 

prikazalo 

Sicer pa fotografije vstavljamo na isti način kot smo vstavljali slike naše razrezane predloge 

(Insert -> Picture -> From File in izberemo sliko). Z desnim kliknite na sliko predloga_04, 

tisto ki je nad naslovom naše spletne strani in pojdite pod Picture properties in si oglejte 

zavihek General, še posebej Picture source (izvor slike). 



- 32 - 

Pravilen izvor, nepravilen izvor 

Primer pravilnega izvora slike: 

Primer nepravilnega izvora slike: 


Kar dejansko pomeni, da se slika 

nahaja v isti mapi kot spletna stran, 

ki jo urejamo. Pravilno. Lahko bi bila 

napisana tudi kakšna podmapa in 

potem slika (kot naši razrezi, ki so v 

'images/predloga_xx.jpg'). 

Vidite lahko, da ta slika izvira iz mojega C:\ diska, zato je izvor slike nepravilen, 

ker slika ne izvira iz iste mape (ali katere od podmap), kjer je shranjena spletna 

stran, ki jo urejam. Tako vstavljeno sliko vam bo na vašemu računalniku prikazalo, 

ko pa boste stran preneseli na internet, slika ne bo prikazana (bo pa znak X). 

Povezava nad sliko 

Ukaz Hyperlink lahko naredimo tudi nad sliko – na ta način lahko naredimo gumb 

(slika, na kateri piše Domov –> Hyperlink na index.html), ta način se uporablja tudi 

za povečave (naredimo eno majhno in eno večjo isto sliko), nato pa vstavimo 

majhno sliko v stran, nad njo naredimo Hyperlink in v Address vpišemo ime večje 

slike. Poskusite. 

Spodnja vrstica Microsoft FrontPage 

V spodnji vrstici se nam ob kliku na sliko prikaže orodna vrstica za urejanje slik, 

kjer je nekaj zanimivih ukazov (Bevel, Set Transparent (nastavi prozorno ozadje),...) 

Raziskujte. 

Tukaj pa najdete tudi tri zavihke -> Normal (normalen pogled), HTML (HTML 

koda) in Preview (predogled strani).

Velja omeniti še to, da če sliko pomanjšate v FrontPageu, je priporočljivo, da nad njo izvedete 

ukaz Resample, ki ga najdete v spodnji orodni vrstici Frontpagea. Tako se bo slika shranila 

manjša kot je bila prej in se bo prej naložila. 

Če želimo, da slika ni v obliki pravokotnika z belim ozadjem, ji lahko spremenimo ozadje iz 

belega v barvo ozadja, kot ga vsebuje del strani, kamor bomo sliko vstavili ali pa naredimo 

okolico brez ozadja (transparentno) in jo shranim v GIF formatu (primer logotipa 

Triglavskega Narodnega Parka). 


- 33 - 

Albumi in galerije slik 

Slike, ki jih delajo današnji fotoaparati so pogosto prevelike za spletne strani, zato 

jih moramo ustrezno zmanjšati. Za ta namen lahko uporabimo brezplačen in 

zmogljiv program EasyThumbnails, ki zmore pomanjšati celo mapo fotografij na 

željeno velikost. 

URL naslov: http://www.fookes.com/ezthumbs/ 

Besedila 

Besedila v FrontPageu oblikujemo podobno kot v Microsoft Wordu, omenil bi samo to, da se 

splača besedila deliti v tabele oz. celice, zaradi lepše preglednosti – primer lahko vidite v 

mojem končanem izdelku. 

Črte 

Z ukazom Insert -> Horizontal line vstavimo vodoravno črto, kateri lahko nastavljamo širino, 

višino in kopico drugih parametrov. Te črte so uporabne predvsem pri deljenju besedil ali 

deljenju naslova in besedila. 

Finese 

Veliko lahko na izgledu spletne strani pridobimo z majhnimi finesami kot so znaki ::, .:, ~, -, 

>, », katere lahko uporabljamo pred posameznimi povezavami v orodni vrstici, na začetku 

novih odstavkov, pri označenih seznamih,... 

Ozadje 

Ozadje 

Naši spletni strani naredimo še ozadje. V Photoshopu si narišemo spodnjo sliko, velikosti 5x5 

pisklov, z barvama: svetlo siva (#F2F2F2) in temno siva (#666666) in jo shranimo v mapo, 

kjer imamo spletno stran, z imenom ozadje.jpg. V FrontPageu kliknemo nekam v prazno, 

izberemo Page Properties, zavihek Background, kjer obkljukamo Background Picture in 

poiščemo ozadje.jpg. Kliknemo OK. 

Problem pri zaobljenih robovih naše strani 

Če dobro pogledate, lahko vidite, da so 

zaobljeni robovi naše strani beli, ker nanje 

ozadje ne vpliva. Z orodjem Set transparent 

color (spodaj v FrontPageu) kliknemo na 

tisto belino in zadeva je rešena. Sam sem 

robove namerno pustil bele, da boste 

vedeli, kaj mislim. Druga rešitev bi pa bila, 

da bi vse 4 robove odprli v Photoshopu, jim odvzeli ozadje (jih prekopirali na transparentno 

ozadje) in shranili kot GIF ter jih še enkrat vstavili v spletno stran. 


Naredimo Naredimo strani strani povezane povezane med med seboj seboj... seboj ... 

Ko smo si pripravili prvo stran (po kateri se bodo zgledovale vse ostale), lahko kar v 

Raziskovalcu naredimo kopijo te strani (desni klik na index.html -> Copy) in jo nato 

prilepimo v isto mapo (desni klik v prazno -> Paste). Preimenujemo v eno od podstrani (npr. 

storitve.html), jo odpremo z Microsoft FrontPageom in jo uredimo, shranimo, končano. Isti 

postopek ponovimo za vse spletne strani (podstrani), iz katerih je sestavljena naša stran. 

Vrste Vrste povezav 

povezav 

V HTML-ju poznamo štiri vrste povezav, ki jih lahko naredimo, vsi štirje tipi so lepo (s 

primerom) opisani na spletnemu naslovu - 

http://www.htmlcodetutorial.com/linking/_A_TARGET.html 

Sam največkrat uporabljam ukaz target=''_blank'', kateri nam povezavo odpre v novem oknu 

brskalnika (uporaben za povezave na druge spletne strani). Sicer pa uporabljam ukaz Prikazan tekst, nad katerim bo povezava, brez nobenega parametra 

(tako smo ga uporabili v orodni vrstici in pri povečavah fotografij). Tako nam povezavo 

odpre v istemu oknu brskalnika, v katerem je trenutno odprta stran. Če želimo v FrontPageu 

določiti vrsto povezave, gremo v Hyperlink Properties (desni klik na označeno besedo s 

povezavo) in nato gumb Target frame (New window = target=''_blank''). 


- 34 - 


~ Prenos spletne spletne spletne strani strani na na splet splet preko preko protokola protokola FTP 

FTP 

Če želimo spletno stran prenesti na spletni strežnik je eden od načinov (po mojem mnenju 

najpogosteje uporabljen) s pomočjo protokola FTP (file transfer protocol). Potrebujemo 

program, ki nam bo deloval kot FTP klient in se bo povezal na naš FTP strežnik (lahko pa to 

naredimo tudi z Windowsovim Raziskovalcem, kamor v naslovno vrstico vpišemo ftp 

naslov). 

Od gostitelja naše spletne strani bomo potrebovali te podatke: 

- FTP naslov strežnika (navadno ftp://ftp.ime-domene.com) 

- uporabniško ime za FTP dostop 

- geslo za FTP 

(- številko vrat, če je različna od 21) 


- 35 - 

Brezplačni FTP klienti 

Obstaja veliko dobrih brezplačnih FTP klientov – sam imam najraje FTP 

Commander, katerega bom tudi uporabil, in Smart FTP. 

URL naslov: http://www.internet-soft.com/ftpcomm.htm (FTP Commander) 

http://www.smartftp.com/ (Smart FTP) 

Med plačljivimi pa velja omeniti CuteFTP. 

Ko imamo nameščen FTP klient, ga odpremo, vpišemo podatke našega FTP strežnika, se nanj 

povežemo in nato v mapo na strežniku, katera je namenjena internetu, prenesemo vse datoteke 

(spletne strani, slike in dokumente), ki jih naša spletna stran uporablja oz. je iz njih zgrajena. 

V naslov brskalnika vpišemo naslov do naše spletne strani in če stran dela, potem je vse OK. 


~ ~ Optimizacija Optimizacija spletne spletne strani 

strani 

Če spletno stran postavimo na internet in je ne vpišemo v noben spletni imenik, potem naša 

stran ne bo dosegala kakšnih večjih obiskov, saj ne bo skoraj nihče vedel zanjo. Zato moramo 

spletno stran vpisati v čimveč spletnih imenikov in iskalnikov, saj bodo le-tako obiskovalci 

našli našo spletno stran. 

Iskalnik Opis Naslov 

Najdi.si Najboljši slovenski iskalnik http://www.najdi.si/service.jsp?submenu=addurl 

Matkurja.com Slovenski imenik http://www.matkurja.com/si/katalog/vpis/stran/ 

Raziskovalec.com Še en slovenski iskalnik http://www.raziskovalec.com/add_regije.html 

Vpisovalec Brezplačen vpis v kup slovenskih in 

tujih iskalnikov in imenikov 

http://www.raziskovalec.com/vpisovalec.htm 

Ruph Blog o optimizaciji spletnih strani http://ruph.sopca.com/ 

Slovenski imeniki Lista slovenskih spletnih imenikov http://ruph.sopca.com/slovenski-spletni-imeniki/ 

Optimizacija Strani o optimizaciji in z orodji za 

optimizacijo spletnih strani 


- 36 - 

http://www.nasvet.com/ 

http://www.optimiziraj.si 

Google, pajki 

Google in razni ostali iskalniki (tudi Najdi.si) uporabljajo za iskanje in indeksiranje 

spletnih strani t.i. iskalne pajke, ki obiščejo vašo spletno stran vsake toliko časa 

(odvisno od ranga vaše spletne strani – popularnosti). Zato ne smete obiskovalcev 

pričakovati kar čez noč, pogosto se rezultati optimizacije poznajo šele čez nekaj 

tednov ali celo mesecev. 

Nekaj mojih nasvetov glede optimizacije spletne strani: 

Ključne besede (tiste, po katerih bi želeli, da vas obiskovalci najdejo) uporabite na 

strani čimvečkrat (najbolje, da jih daste v obliko Headinga ali jih odebeljujete). Ne pa 

pretiravat, ker boste s tem odganjali obiskovalce. 

Uporabljajte meta oznake na vaših spletnih straneh (generator meta oznak najdete na 

http://www.optimiziraj.si/meta.php), katere nato vpišete kar direktno v HTML kodo 

med oznaki in 

Uporabljajte Najdi.si oglasno desko (http://www.najdi.si/oglasna-deska/) 

Preverite, kakšna je konkurenca pri posameznih ključnih besedah, povsod ne morete 

biti prvi, zato lahko izberete tudi kakšne druge ključne besede (kjer ni take 

konkurence) 

Orodne vrstice (ali strani), ki so narejene v Flashu, spletni pajki ne vidijo. Rešitev: 

imejte poleg Flash orodne vrstice tudi orodno vrstico v HTMLju 

Upoštevajte pravilo: več zadetkov (Hits) -> višje mesto v iskalniku. Izmenjujte 

povezave in pasice s čimveč drugimi (ne s konkurenco) stranmi, kar vam bo prineslo 

več zadetkov. 



- 37 - 

Na strani imejte čimveč povezav, lahko imate tudi povezave do spletnih iskalnikov. 

Ponudite obiskovalcem zanimive, ažurne informacije. Strani, ki vsebujejo dinamične 

vsebine (npr. Novice), so bolj obiskane od spletnih strani, ki so ob vsakem obisku 

enake. 

Učinkovita, a malce goljufiva metoda: poznate koga, ki ima v lasti spletno stran z 

večjim številom dnevnih obiskovalcev? Vprašajte ga, če bi na strani lahko nekaj 

tednov imel na strani vašo manjšo pasico, ki se nahaja na vaši strani, on pa samo 

naredi izvor slike iz direktno iz vaše strani (t.i. hot-linkanje). Trik? Ob vsakem 

nalagnju njegove strani boste tudi vi dobili zadetek. 

Vašo spletno stran pravilno promovirajte (vizitke, promocijski material,...), omenite jo 

čimveč ljudem, podpisujte se z njo na raznih forumih in ostalih spletnih straneh, 

čimvečkrat jo omenite na internetu, boljše je 

Vsaki fotografiji dodajte ALT tekst (http://www.webcredible.co.uk/user-friendlyresources/web-accessibility/image-alt-text.shtml) 

Spletno stran je lahko izdelati, težje je narediti spletno stran, ki DELUJE 

Odlična spletna stran za vse SEO-jevce (Search Engine Optimization) je 

http://www.seochat.com 

Zaslužek z optimizacijo 

Z optimizacijo se da lepo služiti. Če imate nekaj mesecev prostega časa, si lahko 

izberete nišo (npr. »used ferrari cars« ali kaj podobnega), zberete čimveč informacij 

in podatkov o niši, nato naredite spletno stran, ki vsebuje ogromno informacij o vaši 

niši, jo optimizirate, nadzorujete statistiko, na stran namestite Google Ads (oglase) 

in čez nekaj mesecev (če imate malo sreče in nekaj znanja) lahko pričakujete svoj 

prvi ček v dolarjih. Samo tako vam to omenim, mimogrede. :) 

Tako, sedaj smo z oblikovanjem in izdelavo spletne strani končali, predstavil vam bom še 

skripto za novice, katero sem razvil s sošolcem v letu 2006. 

~ Sistemi Sistemi Sistemi za za urejanje urejanje vsebin vsebin (CMS) 

(CMS) 

Skripta Skripta za za novice novice Penguins Penguins Penguins New$ 

New$ 

Skripta (»program v spletnem programskem jeziku PHP«) za novice z imenom »Penguins 

New$« je nastala pri učenju programskega jezika PHP. V principu vam omogoča dinamično 

urejanje spletne strani z novicami. 

Omogoča: 

Dve tipa uporabniških računov: uporabniški (mrož) in administrativni (pingvin) 

Vnos novic, urejanje in brisanje lastnih novic (uporabnik) 



- 38 - 

Vnos novic, urejanje in brisanje vseh novic (administrator) 

Sortiranje novic po datumu, imenu uporabnika, naslovu (padajoče/naraščajoče), 

filtriranje novic po uporabnikih ali kategorijah 

Komentiranje novic in brisanje lastnih komentarjev (uporabnik) 

Komentiranje novic in brisanje vseh komentarjev (administrator) 

Komentiranje novic kot gost (anonimnež) 

Pregled seznama vseh uporabnikov (gost/uporabnik) 

Pregled seznama, dodajanje in odvzemanje administratorskih pravic uporabnikom, 

odstranjevanje uporabnikov (administrator) 

Registracijo novih uporabnikov 

Prijavo in odjavo iz sistema 

WYSIWYG (What You See Is What You Get) urejevalnik za dodajanje novic 

Za delovanje uporablja 4 tabele – kategorija, komentar, news, users, avtentikacija uporabnika 

po posameznih straneh pa je vzpostavljena s pomočjo seje (session). 

Skripte 

Tovrstne skripte nam olajšajo delo z urejanjem spletne strani, saj nam spletne strani 

ni potrebno več urediti na računalniku in jo nato prenesti na strežnik, temveč se 

prijavimo v sistem in stran uredimo kar direktno na strežniku. Pri izdelavi/izbiri 

skript za našo spletno stran je poglavitnega pomena varnost. 

Glavna stran novic 

Prijavna stran z registracijo 



- 39 - 

Okno z registracijo 

Seznam uporabnikov kot ga vidi administrator 

Komentarji in novica 

Skripto za novice lahko preizkusite na naslovu http://www.zakljucna.lajf.net/penguins/ 

Programska koda skripte vsebuje komentarje, ki vam bodo pomagali pri lažjemu 

razumevanju, imeti morate samo malo predznanja PHP programskega jezika. 

Content Content Management Management Systems Systems (CMS (CMS sistemi) 

sistemi) 

CMS sistemi so zelo uporabni, če sami nimate dovolj znanja, nimate časa ali pa niste 

prepričani v zanesljivost delovanja svojih skript. CMS sistemi so dejansko orodje, ki teče za 

podobo vaše spletne strani (katero naredite sami, nato pa vanjo vgradite CMS sistem). 

Odločite se lahko za večje sisteme, katerim pravimo portali (npr. e107, Mambo/Joomla, CMS 


Made Simple) ali manjše sisteme (npr. blogi – Wordpress.org, www.cmsiple.dk,...). Te 

sistemi imajo skupen namen – urejanje spletne strani preko brskalnika (direktno preko 

interneta) s pomočjo WYSIWYG urejevalnikov. Nekateri ponujajo tudi nekatere druge 

»priboljške« - ankete, sistem povezav, nalaganje datotek na internet, sortiranje datotek, 

forume,... 

Priporočam vam ogled spodnjih dveh povezav: 

www.opensourcecms.com 

www.hotscripts.com 

Večina CMS sistemov za svoje delovanje potrebuje podatkovno bazo (najpogosteje MySQL). 

Za namestitev in vgraditev sistema v spletno stran je potrebno osnovno poznavanje HTML in 

PHP, svetujem pa vam tudi, da vedno, preden se česarkoli lotite, preberete navodila. 

Primer nadzorne plošče CMS sistema Wordpress (blog) 

CMS sistemi za urejanje uporabljajo nadzorno ploščo, v katero se moramo prijaviti, nato pa 

imamo dostop do vseh strani in funkcij, katere lahko urejamo. Tako kot pri skriptah, tudi pri 

CMSjih velja, da je zelo pomembno, da izberemo CMS sistem, kateri bo imel redne 

nadgradnje in bo čimbolj varen, sicer se nam lahko zgodi, da nekega dne naša stran zaradi 

vdora ne bo takšna kot bi morala biti. 


- 40 - 

Blogi 

Spletni dnevniki ali blogi, kateri večinoma delujejo na CMS sistemu Wordpress 

(www.wordpress.org), so zadnja leta zelo popularni – po Technorati vsak dan na 

svetu na novo nastane 140.000 blogov. Moj blog je na www.klemen.fraj.net ;) 

Spletni portali 

Med spletnimi portali sta zadnje leto najpopularnejša Mambo in Joomla! (v principu 

sta oba sistema enaka), zaradi svoje prilagodljivosti, varnosti in vsestranskosti. Več 

spletnih portalov lahko najdete na spletni strani www.opensourcecms.com 


~ ~ Dodatna Dodatna znanja 

znanja 

Če vas je moj vodič pritegnil in vas splet zanima bolj kot ste sami mislili, potem si poglejte 

spodnje spletne strani, kjer boste lahko dopolnjevali svoje znanje (ta naloga vam je po mojem 

mnenju dala dovolj podlage za razumevanje). 

Naslov strani Opis 

http://www.3delavnica.com/ Slovenska stran o oblikovanju 

http://www.pehape.si/ Slovenska stran o PHPju 

http://www.bandrej.com/ Še ena dobra slovenska stran za Webmastre 

http://www.good-tutorials.com/ Odlična spletna stran za oblikovanju v Photoshopu, kjer sem 

se tudi sam mnogo naučil 

http://www.zmaga.com/ Dobra slovenska spletna stran za pridobivanje raznih 

računalniških znanj 

http://www.opensourcecms.com/ Odlična spletna stran o sistemih za urejanje vsebin (CMS) 

http://www.hotscripts.com/ Ogromna zbirka programov v raznih programskih jezikih 

http://sourceforge.net/ Odprtokodni programi in programi v razvoju 

Obstaja še veliko drugih spletnih strani in knjig, katere lahko obiščete in preberete. Lahko pa 

poskusite tudi preurediti kakšen obstoječi brezplačen dizajn, ki ga dobite na spletu (free 

webpage templates). 


- 41 - 

Spletna stran iz zaključne naloge 

Spletno stran iz zaključne naloge, skupaj z vsemi primeri, tem vodičem in 

datotekami lahko najdete na URL naslovu http://www.zakljucna.lajf.net. Za vsa 

dodatna vprašanja sem vam na voljo preko email naslova zero@lajf.net. Skripto 

za novice pa najdete na naslovu http://www.zakljucna.lajf.net/penguins/ 


~ ~ Zaključek 

Zaključek 

Predstavil sem vam enega od postopkov za izdelavo spletne strani od začetka do konca. 

Načinov (tako oblikovanja, razreza, sestavljanja in izdelave) je ogromno, sčasoma boste 

videli, kateri vam je najbolj pisan na kožo. Vem, da bodo nekateri rekli, da bi to lahko naredil 

tudi drugače in na preprostejši način, vendar sem hotel v tej nalogi predstaviti moj način dela 

in tudi vse, kar je bilo napisano, je popolnoma plod mojega razmišljanja oz. dosedanjih 

izkušenj. Poskusil sem se izogniti tradicionalnim predstavitvam, ki jih lahko preberete v vsaki 

knjigi o HTMLju, spletnem oblikovanju (za telebane) in podobnih temah – le teh knjig sem 

prebral (in pokupil) kar precej. Predstavil sem vam predvsem tisto, kar sem jaz v teh knjigah 

pogrešal – učenje ob praksi in razne rešitve in trike, katere sem sam v teh letih spoznal. 

Osredotočil sem se na to, da sem vam posredoval tista znanja, katerih sam nisem imel in sem 

jih kot začetnik pogrešal, ko mi ni bilo še nič jasno (po branju knjig mi ni bilo prav veliko več 

jasno), znanja, ki sem se jih sam mukoma naučil. Verjamem, da sem vam vsaj malo pomagal 

pri razumevanju oblikovanja, izdelave in delovanja spletnih strani ter vam predstavil nekaj 

osnov Adobe Photoshopa. 

Podlage imate dovolj, sedaj lahko pot nadaljujete sami... 

Hvala, ker ste prebrali mojo zaključno nalogo oz. vodič ! 

Klemen Konič 


- 42 -

Zaključna naloga »Računalništvo« - Shrani.si

Create successful ePaper yourself

Delete template?

Save as template?