glava
     

Cilji poglavja Urejevalniki spletnih strani:

  • predstaviti osnovno zgradbo spletne strani,
  • poznati HTML oznake,
  • izdelati in vzdrževati statično spletno stran.

Uvod v svetovni splet

Značilnosti svetovnega spleta

Z razvojem servisa svetovni splet oz. World Wide Web beležimo intenziven porast strežnikov in dokumentov v internetnem omrežju. Na strežnikih svetovnega spleta se pojavljajo vse oblike računalniških datotek, prevladujejo pa datoteke, napisane v programskem jeziku Hypertext Markup Language oziroma krajše HTML s končnico HTML ali HTM. To so enostavne tekstovne datoteke. HTML nam omogoča, da lahko v enostavne tekstovne datoteke vstavljamo tudi nekatere večpredstavne datoteke, kot so grafike, video in avdio elementi. Najpomembnejša značilnost spletnih strani je, da poleg besedila vsebujejo posebne povezave, ki jim pravimo hiperpovezave.

Vrste naslavljanja

V omrežju internet uporabljamo tri vrste naslavljanja:
Internet Protocol (IP) je natančno dogovorjen sistem naslavljanja računalnikov v omrežju internet. Vsak računalnik, ki je vključen v internet, ima svoj IP naslov. IP naslov je sestavljen iz niza štirih oziroma šestih številk, ločenih med sabo s piko. Tak sistem omogoča hitro iskanje računalnikov v omrežju.
Domensko naslavljanje je označevanje računalnikov, vključenih v internet z besednimi tvorbami. Računalniki, vključeni v internet, imajo IP naslove in v večini primerov tudi domenske naslove. IP naslove v domenske naslove (in obratno) pretvarja program Domain Name System (DNS). Za uporabo domenskega naslavljanja na svojem strežniku potrebujemo registracijo domene.
Uniform Resource Locator (URL) je naslavljanje, ki se pojavlja v svetovnem spletu in omogoča, da v množici različnih protokolov lažje razpoznamo, za katerega gre v danem primeru. Kasneje bomo videli, da je uporaba URL naslovov tudi sestavni del povezovalnih dokumentov v HTML datoteki. URL naslov je sestavljen iz standardne oznake servisa interneta oz. načina prenosa podatkov po omrežju in domenskega ali IP naslova.

Internetni servisi

Standardni internetni servisi so:
htpp:// - prenos hipertekstovnih datotek oziroma servis svetovnega spleta
ftp:// - servis FTP je namenjen prenosu ostalih datotek po spletu
mailto: - servis elektronske pošte
file:/// - URL naslov datoteke na disku

Brskalniki

Za pregledovanje dokumentov HTML potrebujemo odjemalni program. Odjemalne programe za datoteke svetovnega spleta imenujemo tudi brskalniki (browsers). Najbolj razširjeni brskalniki so:
Internet Explorer
Mozilla Firefox
Netscape
Opera
Safari
.

Izdelava spletnih strani

Priporočeno je, da si najprej naredimo načrt, komu naj bi bila stran namenjena in kako naj bi izgledala. Preden začnemo z izdelavo, moramo izbrati programe, ki jih bomo uporabili za urejanje strani, delo s slikami, FTP prenašanje in preverjanje kode.

Dobro je, da si rezerviramo tudi prostor na kakem strežniku. Dandanes obstaja mnogo ponudnikov spletnega prostora in izbira je široka. Žal zastonjsko gostovanje ponavadi spremljajo reklame, kar je po eni strani čisto logično, saj vzdrževanje strežnika ni zastonj. Za gostovanje brez reklam pa bomo morali plačati.

Načrtovanje spletišča

Pri izdelavi spletišča moramo biti pozorni na tri sklope:
na vsebino
na oblikovanje in
na tehniko izdelave spletne strani

s

Vsebina spletnih strani je lahko statična, kar pomeni, da jo na spletno stran postavimo in je več ne spreminjamo. Dinamična vsebina spletnih strani pa se ažurno spreminja. V spletu je 70% statičnih spletnih strani, 30% strani pa  je dinamičnih.

Pri oblikovanju spletnih strani moramo upoštevati več elementov. Strani naj bodo na pogled všečne, ustrezno kompozicijsko postavljene in barvno usklajene. Predmeti, ki jih pri tem uporabimo, pa naj bodo zgrajeni z upoštevanjem spletnih značilnosti. Slike naj ne bodo velike in naj bodo v formatih GIF, JPEG ali PNG. Slike v formatu BMP za spletno uporabo niso primerne.

Za izdelavo spletnih strani pa potrebujemo tudi ustrezne programe. Brez primernih programov bo izdelava spletnih strani zahtevna. V množici možnosti se je kar težko odločiti za pravi program. Glede na to, da so spletne strani besedilne datoteke, jih je v celoti moč izdelati že z beležnico. A taka izdelava zahteva temeljito poznavanje kode in obilico spretnosti. Na voljo imamo kar nekaj tekstovnih urejevalnikov, ki nam omogočajo vstavljati HTML značke, kot sta na primer TextPad in Note Tab Light. Seveda pa imamo na voljo tudi programe, s katerimi spletne strani izdelujemo v grafičnem načinu. Ti programi pa so si med seboj različni, saj nekaterim uspeva izdelovanje spletnih strani bolje, drugim pa slabše. Osnovni programi tega tipa so Frontpage Express, Mozilla Composer, NVU in tako naprej, ki so brezplačni. Plačljivi in zelo zmogljivi pa so na primer MS Front Page, Adobe Dreamweaver, Adobe GoLive, .

Za uspešno izdelavo spletnih strani pa je potrebno poznati tudi HTML, CSS, ASP, ASP.NET, PHP, XML, Java Script, Java, Active Script, . Ne vseh, a nekaj izmed njih pa prav gotovo in čim več, toliko bolje.

Tudi za izdelavo slik potrebujemo ustrezne programe. Tudi na tem področju je izbira zelo pestra. Predvsem je pomembno, da uporabimo programe, ki znajo slike izvažati v formate, ki jih razumejo brskalniki in ki omogočajo izdelati optimalno velike slike. Na voljo imamo kar nekaj brezplačnih programov, kot na primer PhotFiltre, Gimp in celo vrsto bolj ali manj zmogljivih plačljivih programov. Med bolj znanimi so vsekakor Paint Shop Pro, Adobe Fireworks CS3, Adoe PhotoShop itd.

Po izdelavi je potrebno spletišče prenesti na javni strežnik, da bo dostopno vsem. Tak strežnik si seveda lahko postavimo tudi sami, a za to potrebujemo dovolj hitro povezavo v splet, precej znanja za postavitev in konfiguracijo strežnika, ki ga je tudi kasneje, med delovanjem, potrebno ves čas spremljati in nadzorovati, potrebujemo pa tudi ustrezno strojno opremo. Za prenos na strežnik potrebujemo FTP odjemalec. Nekateri programi za izdelavo spletnih strani imajo možnost prenosa spletišč na strežnik že vgrajeno.

Načrt spletišča - blokdiagram

Pred izdelavo spletišča je potrebno izdelati načrt spletišča, tako imenovani blokdigram. Začnem z izhodiščno oziroma vstopno stranjo, ki jo imenujemo tudi domača stran oz. Home Page. Zatem dodajamo še ostale strani. Pri tem ustvarjamo nivoje, da je spletišče čim preglednejše. Če je spletišče razvejano, datoteke z istovrstno vsebino združimo v mape.

Uporabniški vmesnik

Izgled uporabniškega vmesnika je odvisen od številnih kriterijev in sicer:
komu je spletna stran namenjena,
kolikšna je vsebina strani,
kateri so cilji in kaj s spletiščem želimo doseči,
od oblikovnega sloga,
itd.

Elementi spletnih strani

Na spletno stran vstavljamo različne elemente. Pri vstavljanju besedila moramo paziti na širino vrstic, odstavki naj bodo kratki, dokument naj ne bo predolg, naslove jasno ločimo od ostalega besedila s presledki oziroma z drugimi pisavami ali s kontrastom. Uporabimo primeren nabor pisav, da bo besedilo berljivo.

Uporabnike privabimo z všečno grafiko. Slike na spletni strani naj ne bodo prevelike, zmanjšajmo barve, strani naj ne bodo grafično preobložene.

Z uporabo multimedije nazorneje prikažemo določeno vsebino, pri tem uporabimo zvok, predstavitve, video in animacije. Multimedija  uporabnika pritegne bolj kot samo slika in tekst.

Na straneh uporabimo povezave, navigacija naj bo preprosta in naj uporabnika tekoče pelje po straneh.

Nasveti za izdelavo dobre spletne strani

Pri izdelavi spletnih strani upoštevajmo naslednje:
Stran naj ima privlačno obliko: zlasti prva stran naj bo privlačno oblikovana, saj uporabniki ponavadi ravno preko te vstopajo na vaše spletne strani. Če se le da, naj bodo podstrani oblikovno skladne s prvo stranjo.
Optimizirajmo spletne strani. Odstranimo odvečno kodo in pazimo na optimalen razpored predmetov in na njihovo velikost.
Neodvisnost od tipa brskalnika: ne prilagajajmo strani samo za en brskalnik, ljubitelji alternativnih brskalnikov, ki jih ni malo, strani ne bodo ravno vzljubili, če bo kje napisano npr.: Vstop samo z IE 5.5 ali novejšim.
Podpora nižjim ločljivostim (do 800x600 pik): obstajajo tudi taki obiskovalci, ki imajo majhen zaslon, oziroma jim kako drugače odgovarja nižja ločljivost. 1024x768 pik je še sprejemljiva meja.
JavaScript in Flash animacije uporabljamo ravno v pravih količinah.
Skladnost barv: nikar ne uporabljajmo kričečih barv, ker povzročajo neugodje za vsakega, ki obišče stran in se na njej zadržuje nekaj časa. Če boste uporabljali barve, ki se premalo ločijo od ozadja, lahko to povzroči zmanjšano berljivost. Priporočene so dovolj kontrastne barve, tako da se besedila in povezave vidijo na ozadju.
Če imamo na straneh več slik visoke kvalitete velikosti 200 kB ali več uporabimo majhne slikice. Stran se bo na tak način naložila mnogo hitreje.
Pravilnost kode: nam zagotovi, da stran izgleda dobro v vseh brskalnikih.
Strani objavimo le, ko bodo že končane.
Stran redno posodabljamo, stara in neažurna vsebina obiskovalce odvrne.
Pri izdelavi krmarjenja po spletni strani naj bodo povezave razvrščene tako, da bo obiskovalec čim hitreje prišel do želenih informacij.

Hipertekstni jezik HTML

Vse spletne strani so napisane v jeziku HyperText Markup Language oziroma krajše kar HTML. Kljub temu, da imajo nekatere datoteke različne končnice (kot .php, .cfm ali .asp), je njihovo jedro še vedno HTML. HTML ni programski jezik kot je C++ ali Java, je samo sistem opisa elementov v dokumentu, torej bi ga lahko imenovali opisni jezik. Brskalnik razume kodo in prikaže elemente z lastnostmi, ki so nastavljene v kodi. HTML koda je zapisana v ASCII formatu. To je velika prednost, saj lahko ASCII beremo na večini operacijskih sistemov (IBM, Macintosh, UNIX,...).

Osnova HTML jezika so tako imenovane značke oziroma TAG-i, ki določajo zgradbo in izgled HTML dokumenta. Večina značk ima začetek in konec in so zapisane v paru. Med njimi se nahaja tekst, vsebina, objekti, flash dodatki in drugo. Nekaj značk pa ni zaključenih, kot na primer značka <img>, <br>, <hr>, <input>...

Vse spletne strani imajo zaglavje (head) in telo (body). V zaglavju navedemo nekatere lastnosti, v telesu pa vsebino spletne strani

Podenote značk so parametri. Parametri omogočajo dodatne nastavitve. Na primer za slike width (širino), height (višino), alt (alternativno besedilo), src (lokacijo slike). Parametri so oblike <tag parameter="vrednost"></tag>. Tudi parametri morajo biti nujno zaključeni, sledi jim enačaj in nato vrednost v narekovajih.

Za nekatere elemente je izredno pomembna pravilna hierarhija. Tabela, ki ni razvrščena po vrstnem redu <table><tr><td></td></tr></table>, bo izgledala kot kup nesreče, če se bo sploh pokazala. Tudi pri povezavah je pomembna hierarhija, tekst oziroma slika, ki naj bi ponazarjala povezavo mora biti obvezno med <a href="http://link.html"> in </a>, ker drugače povezava veljal samo za prazen prostor.

Koda mora biti napisana jezikovno pravilno. V njej ne sme biti tipkarskih napak, pomembni so presledki med parametri, pri poimenovanju datotek pa moramo biti pazljivi na uporabo velikih in malih črk, izogibajmo se šumnikom in presledkom med besedami.

Mi bomo spletne strani izdelovali s programoma Adobe Dreamweaver CS3 in NVU-jem. Spletišče bomo gradili postopno s posameznimi tematsko obarvanimi vajami.

 

Navodila
Uvod v svetovni splet
Dreamweaver - 01 - Spoznavanje programa
Dreamweaver - 02 - Izdelava osnovne spletne strani z besedilom
Dreamweaver - 03 - Dodajanje slik
Dreamweaver - 04 - Tabele
Dreamweaver - 05 - Ogled in spreminjanje kode HTML
Dreamweaver - 06 - Definiranje spletišča
Dreamweaver - 07 - Postavitev strani
Dreamweaver - 08 - Priprava in uporaba predloge
Dreamweaver - 09 - Povezave
Dreamweaver - 10 - Izdelava slikovnih kart in navigacijskih vrstic
Dreamweaver - 11 - Dodajanje večpredstavnostnih datotek
Dreamweaver - 12 - Izdelava spletnega foto albuma
Dreamweaver - 13 - CSS
Dreamweaver - 14 - Prenos spletišča na strežnik
NVU - 01 - Spoznavanje programa
NVU - 02 - Izdelava osnovne spletne strani z besedilom
NVU - 03 - Dodajanje slik
NVU - 04 - Tabele
NVU - 05 - Povezave
NVU - 06 - CSS
NVU - 07 - Spletišče
NVU - 08 - Objava spletišča

Izhod

na vrh