Dizajn web stranica

Kod dizajna web stranice moguće je krenuti lakšim i težim putem. Postoje mnogi gotovi predlošci u koje treba samo umetnuti svoj tekst i slike, CMS (content management system) programi omogućuju i korisnicima bez znanja web dizajna dodavanje sadržaja na stranice. Pronaći ćete i "Web Site Builder" programe, koji vas kroz "wizard" sučelje vode u izradu dizajna stranice, ubacivanjem gotovih, već definiranih modula.

Umjesto toga, možete malo-pomalo naučiti raditi u najboljim programima za tu namjenu:

  • Adobe Dreamweaver (dizajn web stranica),
  • Adobe Photoshop (obrada fotografije),
  • Adobe Flash (izrada animacija).

Na kraj stranice dodavat ćemo lekcije web dizajna. Nadamo se da će svatko pronaći nešto zanimljivo za sebe.

 

 

Dreamweaver

Po mnogima najbolji program za dizajn web stranica. Nije jednostavan, ali bolje je naučiti osnove u Dreamweaveru, nego se "snalaziti" sa lakšim rješenjima.

Download probne verzije (radi 30 dana)

Photoshop

U Photoshopu ćemo pripremati slike, pozadine, i razne druge grafičke elemente za web stranicu. Vrijedi isto pravilo kao i za Dreamweaver - na kraju će se trud isplatiti.

Download probne verzije (radi 30 dana)

Flash

Flash služi za izradu animacija bilo koje vrste - od animiranih linkova na stranici, preko bannera, do stranica koje su kompletno napravljene u Flashu. Ni bez njega se ne može...

Download probne verzije (radi 30 dana)

  
         
 
 

Lekcije web dizajna

Nakon ovih nekoliko lekcija, imat ćete dovoljno znanja da krenete u
"ozbiljan" dizajn web stranica, i dalje se samostalno usavršavate.

 
       

 

Image resize - optimizacija fotografija za Web ili e-mail.

 

 

Dizajn web stranice pomoću tablica - ovdje možete naučiti kako napraviti web stranicu na jednostavniji način. Nakon usavršavanja ove tehnike, možete otići korak dalje - u dizajn stranice bez tablica, pomoću CSS-a. Tutorial je preuzet izravno sa Adobe web stranica (Dreamweaver CS3).

 

 

FTP - upload stranice na web server - kako web stranicu napravljenu na računalu objaviti na Internetu.

 

 

Zaobljeni kutovi - kako napraviti tablice zaobljenih kutova pripremom u Photoshopu.

 

 

Flash animacija - kako napraviti jednostavnu Flash animaciju (banner).

 

 

Animirani gif - kako napraviti banner u Photoshopu.

 

 

Dizajn web stranica bez tablica - napredna tehnika dizajna web stranica. Ovo je teže savladati nego Dreamweaver CS3 tutorial, ali kasnije ćete uživati u plodovima svog truda - mogućnosti kontrole kod dizajna stranica su mnogo veće. Tutorial je preuzet izravno sa Adobe web stranica (Dreamweaver CS4).

 
 

Dreamweaver CS5 - nova verzija programa donijela je i neka poboljšanja.

  
       
 
 

In medias res

Dreamweaver lekcije su vrlo opširne, tako da ovdje možete
potražiti upute za pojedine probleme kod dizajna stranica.

 
       

 

  

Tablice - stara, dobra metoda razmještaja elemenata na web stranici

 

 

  

Expanded mode - privremeno uključite prikaz rubova tablica, radi bolje vidljivosti

 

 

  

Image placeholder - element koji "čuva" mjesto za sliku koju još nemamo završenu

 

 

  

Boje u tablici - kako odrediti boju pozadine

 

 

  

Umetanje slika - na četiri načina

 

 

  

Flash animacije - kako "oživiti" stranicu

 

 

  

Flash video - jednostavan način da dodavanje video materijala

 

 

  

Navigacija - izrada linkova pomoću CSS pravila

 

 

  

CSS dokument - odvojite sadržaj od dizajna stranice (kasnije je puno lakše...)

 

 

  

CSS ".class" pravilo - moguće ga je dodijeliti bilo kojem elementu na stranici

 

 

  

Rollover efekt - animacija izbornika kod prelaska mišem preko linkova

 

 

  

Centriranje stranice - jednostavno, ali potrebno

 

 

  

DIV tag - osnovni element modernog dizajna stranice, zamjena za tablice

 

 

  

Background image - slika kao pozadina

 

 

  

2 ili 3 stupca na stranici - pomoću div tag-ova

 

 

  

Formatiranje teksta - CSS pravilima

 

 

  

Naslovi - važan element web stranice

 

 

  

Linkovi - formatiranje linkova CSS pravilima

 

 

  

Tekst u slici - ovo je ranije bilo puno teže

 

 

  

CSS "#compound" pravilo - samo za željene elemente na stranici

 

 

  

Padding - razmak elemenata (tekst, slika) od unutarnjeg ruba (stranice, tablice, div tag-a)

 

 

  

Margin - razmak vanjskih rubova (npr. dvije kolone)

 

 

  

Određivanje položaja za div tag - potpuna kontrola

 

 

  

Spry menu (izbornik sa padajućom listom) - neophodan za stranice sa mnogo linkova

 
   

Templates - Dreamweaver CS5 donosi bitna poboljšanja kod izrade stranice pomoću predložaka (templates)

  
   

Inspect - vizualni prikaz "padding" i "margin" vrijednosti div tag-ova na stranici

  
   

Disable CSS Property - umjesto brisanja CSS pravila, sada ga možemo privremeno isključiti