Razrez spletne strani s pomočjo polj – DIV

Spletno stran lahko zgradimo tudi s pomočjo tako imenovanih DIV polj.  Osnutek spletne strani razdelimo na posamezna polja, ta polja so ponavadi glava, navigacija, vsebiski del in noga. Dodamo lahko tudi druga poljubna polja. Atribute teh polj ponavadi urejamo s pomočjo CSSja oziroma s pomočjo stilov, ki so lahko tudi znotraj HTML datoteke ali samega DIV polja. Kateri tip uporabimo je odvisno od števila strani in načina programiranja. V našem primeru bomo uporabili tip, kjer se stili določajo znotraj DIV polja. DIV polju lahko določamo širino, višino, barvo, pozicijo,… če pa želimo imeti dva polja v isti višini, se pravi enega levo enega desno pa moramo najprej uporabiti polje – DIV za okvir, kjer določimo širino, nato pa dva dodatna polja enega za levo stran enega za desno. Potrebno je še uporabiti parameter “FLOAT” – float:left, tako se polji postavita vsporedno.  Za centriranje celotne spletne strani na sredino moramo dodati stil na sam “body” – <body style=”text-align:center;”>.

Beri naprej Razrez spletne strani s pomočjo polj – DIV

Razrez spletne strani s pomočjo tabel

Izgradnjo spletne strani se lahko lotimo na več načinov. Eden izmed načinov je s pomočjo tabel. Osnutek spletne strani, ki je ponavadi v sliki razdelimo na posamezna polja s pomočjo tabel. Najprej postavimo ogrodje, to je ponavadi tabela, ki določa meje same spletne strani in polja za glavo, navigacijo, vsebinski del in nogo. Kasneje dodajamo znotraj teh polj dodatne tabele s katerimi urejamo “fine” nastavitve. Vse tabele morajo imeti atribut border nič, saj tako skrijemo meje tabele. Ponavadi uporabljamo atribute širina, dolžina, cellspacing, cellpadding in poravnave, po želji pa lahko tudi kakšne druge.

Beri naprej Razrez spletne strani s pomočjo tabel

Kako se lotiti izgradnje spletne strani

Najprej moramo vediti kaj želimo s spletno stranjo doseči oziroma moramo imeti cilj. Nato je potrebno pripraviti načrt spletnega mesta. Potrebno je zbrati vso vsebino, ki jo želimo uporabiti in jo analizirati. Na podlagi tega narediti strukturo spletne strani. Tako si postavimo začetno ogrodje na katerem bomo gradili naprej.

Naslednji korak je priprava grafičnega osnutka in postavitev vsebine na spletni strani. Osnutek se začne na papirju, ko smo zadovoljni s postavitvijo gradnikov spletne strani na papirju se lotimo grafične postavitve v grafičnem programu, ki nam je na voljo.

Po potrjeni grafični predlogi se lotimo razreza. Spletno stran v grafični predlogi razdelimo na posamezne dele, ki jih nato razrežemo v posamezne dele in shranimo, kot slike v GIF, JPG ali PNG formatu. Dele, kjer imamo samo eno barvo je bolje nadomestiti s programsko kodo, kot pa z slikicami. Razrezane dele potem sestavimo skupaj s pomočjo programskega jezika HTML. Ponavadi se uporabijo tabele, kjer si celotno spletno stran predstavljamo kot velikansko tabelo, v posamezna polja pa vstavljamo slike, barve besedilo, ki smo jih določili v razrezu. Za naprednješe uporabnike pa pride upoštev programiranje s pomočjo DIV polj. Tu je potrebno širše znanje CSS-ja in poznavanje HTML jezika. Oba načina razreza bosta podrobneje predstavljena v drugem članku. Tako smo zgradili HTML “template” na katerih lahko gradimo naprej.

Naslednji korak, je vnašanje povezav in vsebine. Potrebno je povezati vse strani med seboj in dodati ustrezne vsebine. Zaradi boljšega uveljavljanja v spletnih iskalnikih je potrebno uporabljati različne naslove spletnih strani, dobre opise in ključne besede, ki se moramjo razlikovati od strani do strani. Sama vsebina pa mora biti pregledna in uporabljati rzlične naslove – “headinge”.

Na koncu lahko še samo spletno stran popestrimo z Flash animacijami ali tako imenovanimi “bannerji”. Nato nam manjka samo še domena in prostor na strežnikih, kjer lahko objavimo spletno stran. Pa veliko uspehov pri izgradnji spletnih strani.

CSS – Cascading Style Sheets

Cascading Style Sheets – CSS – je preprost mehanizem za dodajanje stilov oziroma oblik posameznim WWW dokumentom. Te oblike so ponavadi črke, barve, presledki, velikosti,…

Stilom ponavadi določimo “klase” v katerem je več stilov oziroma ukazov, ki določajo stile. Ponavadi se klas začne z imenom nato sledi zaviti oklepaj – {. Nato si sledijo ukazi za posamezen stil, končajo pa z zavitim oklepajem – }.

Stile lahko uporabljamo na tri načine. Prvi način je v začetku dokumenta, drugi na samem objektu oziroma gradniku, tretji najpogostejši pa kot zunanja datoteka .CSS.

http://www.w3schools.com/css/
http://www.w3.org/Style/CSS/

Katere programe uporabiti?

Pri izgradnji spletnih strani lahko uporabimo veliko poljubnih programov. Vsak izdelovalec ponavadi najde svojo pot oziroma programe, ki ustrezajo njegovemu načinu dela.

Jaz osebno zagovarjam Dreamweaver v povezavi z Photoshopom. Dreamweaver nam omogoča različne poglede izvorne kode, sproti izpisuje ukaze, kar zelo pohitri delo, poleg tega pa vsebuje tudi veliko “templatov”.

Beri naprej Katere programe uporabiti?