Klemen Konič, 4. GB Tehniška gimnazija Tehniški Šolski Center Nova Gorica

Transcription

1 o Zaključna naloga»računalništvo« Oblikovanje in izdelava spletne strani Skripta za novice CMS sistemi Klemen Konič, 4. GB Tehniška gimnazija Tehniški Šolski Center Nova Gorica

2 ~ Kazalo ~ Kazalo ~ Povzetek ~ Ključne besede ~ Uvod ~ Introduction ~ Kaj bomo potrebovali? ~ Spletni strežnik ~ Naredimo načrt Oblika strani Barve Priprava gradiva ~ Začnimo oblikovati Glava strani (header) Oblikovanje strani Razrez strani ~ Izdelava spletne strani V HTML obliko Orodna vrstica in naslov strani Fotografije, besedila, črte, Ozadje Naredimo strani povezane med seboj Vrste povezav ~ Prenos spletne strani na splet preko protokola FTP ~ Optimizacija spletne strani ~ Sistemi za urejanje vsebin (CMS) Skripta za novice Penguins New$ Content Management Systems (CMS sistemi) ~ Dodatna znanja ~ Zaključek

3 ~ 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

4 ~ Ključne 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 -

5 ~ 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 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

6 ~ Kaj bomo 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: 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 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 lahko dobite XAMPP,»zbirko orodij«, ki vam po preprosti namestitvi postavi spletni strežnik s podporo PHP, MySQL in vsem, kar bomo potrebovali

7 ~ Spletni 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. 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 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 Podrobnejša navodila lahko najdete na 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 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

8 ~ Naredimo 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 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: Had.si Primer strani: Vpis.uni-lj.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 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: - 9 -

10 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 <body> dodamo parameter bgcolor=''#šestnajstiška_vrednost_barve«. Primer: <body bgcolor=''#ff0000''> nam bo naredilo rdeče ozadje. Preliv S pomočjo spodnjega ukaza v HTML kodi lahko naredimo za ozadje naše strani preliv: <body style="filter:progid:dximagetransform.microsoft.gradient(endcolorstr='#c0cfe2', startcolorstr='#ffffff', gradienttype='0');"> 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 <body> dodam še parameter bgproperties="fixed". <body bgproperties=''fixed'' background=''pot_do_nase_slike.jpg''> 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

11 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 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 oblikovati Glava strani (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 - #

12 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). 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

13 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

14 Čestitam, glava naše spletne strani je izdelana! 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:

15 Oblikovanje 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

16 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)

17 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). 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:

21 Razrez 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

22 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. 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

23 ~ Izdelava spletne 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 ( 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 HTML 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 (v HTML kodi najdemo naslov strani med oznakama <title>naslov</title>) 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.

24 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 ). Kliknemo na gumb OK in okno»page Properties«se nam zapre. 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)

25 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. 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

26 ozadje uporabi sliko), kliknemo na gumb Browse (Prebrskaj) in poiščemo predloga_02. Kliknemo OK in zgornja orodna vrstica je dokončana. 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

28 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: 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 vrstica in naslov 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, , 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

31 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 u si lahko izberemo zavihek E- mail Address in tam vtipkamo ali pa v polje Address vtipkamo - mailto:zero@lajf.net, kjer zero@lajf.net zamenjate z vašim naslovom (ob kliku na bo odprlo novo e- sporočilo v obiskovalčevem programu (klientu) in on bo moral samo še natipkati vsebino sporočila). 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, besedila, č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: 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'). Primer nepravilnega izvora slike: 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).

33 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). 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: 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 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

34 Naredimo strani povezane med 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 povezav V HTML-ju poznamo štiri vrste povezav, ki jih lahko naredimo, vsi štirje tipi so lepo (s primerom) opisani na spletnemu naslovu - 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 <a href=''naslov.html''>prikazan tekst, nad katerim bo povezava</a>, 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'')

35 ~ Prenos spletne strani na splet preko protokola 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) 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: (FTP Commander) (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

36 ~ Optimizacija spletne 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 Matkurja.com Slovenski imenik Raziskovalec.com Še en slovenski iskalnik Vpisovalec Brezplačen vpis v kup slovenskih in tujih iskalnikov in imenikov Ruph Blog o optimizaciji spletnih strani Slovenski imeniki Lista slovenskih spletnih imenikov Optimizacija Strani o optimizaciji in z orodji za optimizacijo spletnih strani 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 katere nato vpišete kar direktno v HTML kodo med oznaki <head> in </head> Uporabljajte Najdi.si oglasno desko ( 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 ( 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 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 ~ Sistemi za urejanje vsebin (CMS) Skripta za novice Penguins 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 Programska koda skripte vsebuje komentarje, ki vam bodo pomagali pri lažjemu razumevanju, imeti morate samo malo predznanja PHP programskega jezika. Content Management Systems (CMS 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

40 Made Simple) ali manjše sisteme (npr. blogi Wordpress.org, 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: 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. Blogi Spletni dnevniki ali blogi, kateri večinoma delujejo na CMS sistemu Wordpress ( so zadnja leta zelo popularni po Technorati vsak dan na svetu na novo nastane blogov. Moj blog je na ;) 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

41 ~ Dodatna 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 Slovenska stran o oblikovanju Slovenska stran o PHPju Še ena dobra slovenska stran za Webmastre Odlična spletna stran za oblikovanju v Photoshopu, kjer sem se tudi sam mnogo naučil Dobra slovenska spletna stran za pridobivanje raznih računalniških znanj Odlična spletna stran o sistemih za urejanje vsebin (CMS) Ogromna zbirka programov v raznih programskih jezikih 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). 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 Za vsa dodatna vprašanja sem vam na voljo preko naslova zero@lajf.net. Skripto za novice pa najdete na naslovu

42 ~ 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č