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.
Ubrzajte izradu web stranica pripremom predloška
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.
Slični sadržaj:
- Zašto trebamo koristiti "blending options" u WEB dizajnu (Jako slično)
- Višestruki "span" u CSS-u (jedan jako zanimljivi logo) (Jako slično)
- 50 odličnih tutoriala za izradu ikona (Jako slično)
- Prošiveni tekst - photoshop tutorial (Jako slično)
- Moja mala planeta (Jako slično)
5 komentara
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.
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 😉
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)
Da, ja imam i šeme za photoshop – slidere, bannere u raznim veličinama, dijelove formi… sve to štedi vrijeme
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
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.