Vsi, ki se spoznajo na razvoj spletnih mest, vedo, da običajno ne začnemo s strukturo HTML. Namesto tega z grafičnim programom ustvarite postavitev strani. (Če delate v agenciji, postavitev priskrbi grafični oblikovalec ali naročnik). Naloga je, da iz te postavitve sestavite stran. Prav o tem bomo zdaj govorili.
V zvezi s preoblikovanjem postavitve boste pogosto naleteli na izraza rezanje in kockanje ( slicing and dicing). Ta izraza pravzaprav ne pomenita nič drugega kot to, da vzamete predlogo ali zasnovo, jo razrežete v grafičnem programu in nato ponovno sestavite z uporabo HTML.
Pravi grafični program
Vsak ima svoje želje glede tega, kateri program najraje uporablja. To seveda velja tudi za grafične programe. Pri profesionalnem oblikovanju spletnih strani pa so stvari nekoliko drugačne. Tu se uporablja skoraj izključno program Photoshop. Pravzaprav je večina osnutkov oblikovanja na voljo v datotekah PSD. In prav tega formata PSD ni mogoče odpreti ali celo urediti v vseh programih.
Če nimate programa Photoshop, niste povsem izgubljeni. GIMP je možna alternativa. Program lahko brezplačno prenesete s spletne strani http://www.gimp.org/. Prikazal vam bom osnovne korake za izdelavo postavitve s programom GIMP. Vendar pa to na podoben način deluje tudi v programu Photoshop.
Ustvarite svojo postavitev
Najprej razmislite o osnovnih vidikih oblikovanja:
- Kako široka naj bo postavitev?
- Koliko stolpcev naj vsebuje?
Nato ustvarite delovni prostor prek možnosti Datoteka>Nov in določite velikost. Čeprav bo postavitev, ki sem jo ustvaril, "zapolnjevala strani", ima dejanska vsebina širino le 1000 slikovnih pik. Višino postavitve sem nastavil na 887 slikovnih pik. (Čeprav bo višina spletnega mesta pozneje tako ali tako temeljila na vsebini).
Nastavitve so potrjene z OK. Delovni prostor je zdaj na voljo in ga je mogoče zapolniti z vsebino. (Zaradi jasnosti pri oblikovanju delam s sivim ozadjem. To kasneje na spletnem mestu ne bo vidno).
Tipičen element, ki sodi na spletno stran, je logotip, ki je običajno na voljo kot grafika. Če ga želite vstaviti v postavitev, pojdite v Datoteka>Odprti in izberite logotip, ki mora biti v enem od formatov PNG, GIF ali JPEG. Izbiro potrdite z gumbom Odpri. Zdaj pritisnite kombinacijo tipk Ctrl+C, da logotip kopirate v odložišče. Nato preklopite na dejansko spletno zasnovo in pritisnite kombinacijo tipk Ctrl+V. Prilepljeni logotip še ne bo na želenem mestu. Vendar ga lahko z orodjem za premikanje enostavno premaknete na pravilen položaj.
Če slike ni mogoče premakniti, morate najprej aktivirati sloj. Ustrezne nastavitve najdete v razdelkuOkno>Pogovorna okna>Sloji.
Za boljšo postavitev morate prikazati vodilne linije. To storite tako, da z miškinim gumbom kliknete na ravnilo in ga povlečete na želeni položaj, medtem ko držite pritisnjen levi miškin gumb.
Tako lahko narišete poljubno število vodilnih črt za poravnavo elementov spletnega mesta.
Zdaj ustvarite še eno plast. Ta plast naj vsebuje zgornji meni.
Poimenujete ga lahko Zgornji meni. Ustvarite sloj z gumbom OK. Prikličite izbirni pravokotnik in povlecite območje, v katerega naj bi bila vstavljena navigacija.
V tem primeru predvidevam, da bo ozadje zgornjega menija imelo barvni gradient. To storim tako, da kliknem na Barvni gradient: Izbor z barvnim gradientom (polnilo).
Barvni gradient mora potekati od sive do črne barve. Ustrezne barve lahko nastavite s pomočjo barvnih polj. Tip barvnega gradienta nastavim na VG do HG, tako da teče od barve v ospredju do barve ozadja. Zdaj držite pritisnjeno tipko Ctrlin na izbranem območju narišite črto od zgoraj navzdol. Ko spustite levi gumb miške, ima območje želeni barvni gradient.
Načeloma imate zdaj na voljo dve možnosti:
- Navigacijsko območje lahko pustite takšno, kot je.
- Lahko vstavite posamezne elemente menija, tako da lahko natančno vidite, katere pisave itd. uporabljate pri oblikovanju.
Katero od teh dveh možnosti boste izbrali, je seveda odvisno od vas. Če pa želite na primer postavitev predstaviti svojim strankam, vam vsekakor svetujem, da vključite elemente menija. Izkušnje so pokazale, da številnim strankam pri tem primanjkuje domišljije.
Najprej morate izbrati pisavo. V programu GIMP boste ustrezne nastavitve našli v razdelku Okno>Pogovorna okna>Štiri pisave.
V tej seriji smo že obravnavali vprašanja pisav v povezavi s CSS in HTML. Navsezadnje lahko kot spletni oblikovalec teoretično določite katero koli pisavo, ki vam je všeč. Vendar pa ne veste, ali ta pisava dejansko obstaja v računalniku obiskovalca spletnega mesta in jo je zato mogoče prikazati. Zato je težko preveriti rezultate, zlasti če uporabljate zelo eksotične pisave. Vendar se bom k temu vidiku vrnil v nadaljevanju te serije, ko bo šlo za pisave na primernem spletnem mestu. Pri trenutni postavitvi sem se odločil, da bom uporabil naslednje nastavitve:
- Verdana bold
- 20 pik
- Bela barva pisave
Sedaj lahko posamezne elemente menija vstavite na ta način. Najbolje je, da plast s prvim elementom menija kopirate in jo prilepite kot novo plast. Besedilo v plasti lahko nato prilagodite. Na ta način ustvarite zgornji meni.
Zgornji meni mora imeti učinek podrsavanja. To pomeni, da se barva ozadja posameznih elementov menija spremeni, če premaknete kazalec miške nad njimi. Ta vidik je treba seveda tudi vizualizirati v oblikovanju. To storite tako, da nastavite želeno barvo hoverja in kopirate eno od obstoječih ravni menija. Barvo pripišite tej plasti. V trenutnem primeru predvidevam modri barvni gradient. Nato vstavite besedilo elementa menija. S tem dobite občutek, kako bo meni videti na koncu.
