Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

Ubrzajte izradu web stranica pripremom predloška

Autor/ica Webmaster

Autor Kroativ mreže. Web dizajnom se bavi već nekih desetak godina i trenutno radi u Web Inkubator dizajn studiju. Kreativac u duši stalno željan novog znanja, a u slobodno vrijeme farba pixele i šeće web stranice po Internetu.

Oglas

Ako se bavite izradom web stranica zašto si ne bi napravili jedan predložak ili možemo reći šablonu po kojoj ćete onda raditi sve ostale stranice? Princip je vrlo jednostavan i slični se članci mogu pronaći na drugim stranicama no za one koji ne znaju evo i naše verzije. Moramo napomenuti da bi trebali imati osnovno znanje web dizajna kako bi shvatili sve dijelove primjera iako smo se trudili da bude prikladan za sve nivoe znanja.

Napravite kostur foldera

Kada izrađujete web stranice većinom svaki od Vas ima svoj stil imenovanja elemenata strukture web stranice pa kreirajte u Vašem radnom direktoriju jedan novi folder te u njemu napravite sljedeću strukturu direktorija. Naravno imena su opcionalna i ovo je samo primjer, a Vi možete nazvati foldere kako god želite (mala napomena za početnike, nemojte koristiti naše znakove i razmake u imenima folder. Mi smo ih koristili samo u nazivu foldera na našem računalu u kojem se nalazi šablona – www šablona).

Znači kreirali smo jedan direktorij css za sve CSS stilove, pa jedan js za sve JavaScripte i folder img za sve slike.

Izradite predložak web stranice

Nakon kreiranja strukture direktorija u svom omiljenom programu za izradu web stranica napravite novi index.html sa sljedećim kodom:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
<title>Naslov</title>
 
<!-- Meta -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-Language" content="hr" />	
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="description" content="opis" />
<meta name="keywords" content="ključne riječi" />   
 
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />
 
<!--[if lt IE 7]>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('.png_bg');
  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]-->
 
<!-- Javascript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
 
	});
</script>
 
</head>
 
<body>
 
<div id="container">
 
</div><!--//#container-->
 
</body>
</html>

DocType, CSS i meta tagovi

Napravili smo si jedan osnovni xHTML sa strukturom koda koju najviše koristimo. Stranica je rađena u XHTML transitional Doctype-u, imamo UTF-8 charset za naše znakove i stavili smo tag za IE8 kako bi našu stranicu pročitao kao IE7 (IE=EmulateIE7 – opcionalno i stavili smo za svaki slučaj neka se nađe), imamo sve potrebne META tagove pa čak i favikonu. Ubacili smo i CSS za resetiranje svih elemenata (reset.css). Možete izraditi svoj CSS za resetiranje svih elemenata ili možete koristiti neke već gotove tipa Eric Mayer’s reset ili YUI reset (pogledajte kolekciju ostalih CSS reset metoda). Na koju god se verziju CSS reset-a odlučite samo ju spremite u folder css pod imenom reset.css. Svoje stilove spremate pod imenom style.css, a stilove za print u print.css no to sve već znate pa nećemo više o tome.

Ispravak PNG transparencije u IE6

Osim gore navedenog dodali smo i DD_belatedPNG JavaScript za PNG transparenciju u IE6. To je jedno od najpopularnijih rješenja koje mnogi web dizajneri koriste pa ga svakako isprobajte. Preuzmite najnoviju verziju sa stranice i spremite ju u svoj js folder. Trenutna verzije je DD_belatedPNG_0.0.8a pa pripazite ako izađe nova verzija da promijenite ime u Vašem index.html-u

jQuery javascript library

Naravno tu je i neizostavni jQuery kao najpopularniji JavaScript library. Ne hostamo ga lokalno već ga loadamo direktno sa Googla. Pročitajte ovdje 3 razloga zašto je bolje učitavati jQuery s Googla. U navedenom primjeru uključujemo najnoviju verziju 1.4.0, a ako Vam je potrebna neka druga verzija npr. 1.3.2 samo zamijenite verziju u adresi. Dostupne su sljedeće verzije: 1.2.3, 1.2.6, 1.3.0, 1.3.1, 1.3.2, 1.4.0

Body dokumenta

Unutar body-a stavili smo klasični div container kao početak naše nove web stranice. To je to, imate spremnu šablonu za sve Vaše buduće web stranice koja će Vam svakako uštedjeti malo vremena ;) Na slici dolje imamo prikaz naše gotove šablone:

Kako to sve izgleda na kraju?

Ovako to izgleda na kraju

Ovo nije nikakva znanost i nije ništa novo ali Vam svakako može uštedjeti vrijeme jer sve imate gotovo i uz par preinaka imate prikladni predložak za svaku web stranicu.

Označeno s: ,
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

5 komentara

  • Odličan post ;)

    tako sam si i ja prije koji mjesec napravio šablon jer samo sam se nervirao kad sam dio po dio stranice morao kopirati da uopće počnem raditi, tako da je ovo odličan savjet ;)

  • SliceMachine kaže:

    To je pravi način za ubrzati posao. Možda imati spremno i nekoliko generičkih CSS datoteka sa layoutima (2 kolone, 3 kolone i slično)

    • weberica kaže:

      Da, ja imam i šeme za photoshop – slidere, bannere u raznim veličinama, dijelove formi… sve to štedi vrijeme

  • Schtefek kaže:

    Izvrstan savjet, uštedi mnogo vremena, na početku sam se i ja maltretirao s tim, dok mi kolega nije pokazao ovakav način i olakšao mi posao, ali uvijek naučiš još nešto novo, kao ja iz ovog vašeg savjeta
    Hvala

  • Stepic kaže:

    Malo mi je ovo zadalo muke (IE=EmulateIE7 – opcionalno i stavili smo za svaki slučaj neka se nađe). Taj tag, naime onemogućava funkcioniranje padajućeg izbornika koji ste lijepo opisali ovdje i meni super dobro funkcionira. Ne znam zašto je tako i da li je to (bio) slučaj samo na ovoj mojoj stranici, ali eto, dobro je znati. Eh taj blesavi IE, svaka nova verzija, novi hack.

Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">