Mislim da ste svi čuli za dvije stvari, a to su Web 2.0 i da se tablice polako izbacuju iz dizajnova. Ako netko od vas nezna definicija Web 2.0 je:
„Filozofija uzajamnog povečanja kolektivne inteligencije i dodane vrijednosti za svakog sudionika dinamičkim stvaranjem i djeljenjem informacija.“
Web 2.0 lekcija: „Posložiti stvari tako da samousluga kupca i algoritamsko upravljanje podacima dosegnu cijeli web, sve do rubova, a ne samo do centra, do dugačkog repa, a ne samo do glave.“
Sam pojam postaje značajan nakon prve Web 2.0 Konferencije O’Reilly Media 2004. godine. Dopredsjednik tvrtke Tim O’Reilly termin definira kao: „Web 2.0 je poslovna revolucija u kompjutorskoj industriji uzrokovana tretiranjem mreže kao platforme i nastojanje da se shvate pravila uspjeha na toj novoj platformi.“
Isto tako tablični dizajnovi se ne smatraju kao Web 2.0 te se je njih počelo izbjegavat zbog toga te zato što se ne prikazuju dobro u svim web browserima.
Sada kada sam vam objasnio što je Web 2.0 i zašto se izbjegavaju tablični dizajnovi bilo bi vrijeme da prijeđem na samu temu, a to je Kako napraviti CSS dizajn?
Prvo ćemo napraviti dvije datoteke, a to su index.html i still.css u koje ćemo pisati HTML i CSS kod.
Otvorite index.html u Notepad-u ili u nekom editoru za tekst koji vi koristite. Prvo ćemo dodati doctype i cijeli header. Ovaj dio nemam ništa posebno objašnjavati tako da ću samo napisati što treba staviti u header.
<!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>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”stil.css” />
<title>CSS Dizajn</title>
</head>
Jedino što možda iz ovog ovdje dijela neznate je učitavanje css datoteke stil.css u html dokument. To radimo ovim: <link rel=”stylesheet” type=”text/css” href=”stil.css“ /> . Podebljanim slovima je napisano ime datoteke koju moramo učitati.
Sada moram napraviti osnovnu CSS strukturu tog dizajna. Otvorite vaš stil.css fajl u notepad-u i upišite ovo. Ispod koda ću objasniti što svaki tag znači.
body {
background-color:#FFFFFF;
}
a:link {
color: #0066FF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #0066FF;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #0066FF;
}
Body tag je tag koji vrijedi za cijeli dokument. U njemu možemo odrediti pozadinsku boju (određena je sa tagom background-color), margine, veličinu/boju fonta…
Drugi tag koji sam uvrstio ovdje je “a” tag. To je tag kojim određujemo stil linkova. On može imati više vrijednosti, a neke od njih su: a:link (za linkove koji nisu posjećeni te na kojima se ne nalazi miš), a:visited (za linkove koji su već posjećeni), a:hover (za linkove na kojima se nalazi miš) i a:active (za linkove koji su aktivni tj. kliknulo se na njih i nije se više klikalo po stranici). Ovdje sam odredio da je boja linkova plava osim kada je miš preko linka (hover). Tada je link crvene boje.
Isto tako ako vam se ne sviđa to što vam je link podcrtan onda možete odrediti text-decoration:none; te vam tada link neće biti podcrtan (što je napravljeno u ovom dokumentu).
Sada kada sam prijašnji dio koda objasni bilo bi vrijeme da odredimo stil H1 tagova tj. naslova. U ovom tutorijalu ću odrediti samo H1 i H2 tag (koliko ja znam ima ih 6).
h1 {
font-size: 20px;
color: #0099FF;
margin:4px;
}
h2 {
font-size: 16px;
color: #0066FF;
margin:4px;
}
Mislim da ovdje nema puno filozofije. Jedina stvar koju vam možda nebude jasno zašto sam stavio je margina od 4pixela. To sam stavio zbog toga što je H tag bez te margine previše udaljen od rubova stranice tako da to izgleda veoma ružno.
#omot {
width:800px;
height:auto;
margin-left:auto;
margin-right:auto;
}
#header {
width:800px;
height:120px;
float:left;
border-bottom:1px solid #000000;
background-color:#999999;
}
#lijevastrana {
clear:left;
width:170px;
height:100%;
float:left;
background-color:#CCCCCC;
}
#sadrzaj {
width:629px;
height:auto;
float:right;
background-color:#FFFFFF;
}
#footer {
width:800px;
height:20;
clear:both;
background-color:#FFFFFF;
}
Ovdje sam odredio cijeli layout tj. pozicije “modula” na stranici. Sada ću vam objasniti korak po korak što koji modul znači.
Odredili smo div omot. U njemu smo stavili da je maksimalna veličina stranice 800pixela i da je visina stranice automatska tj. povećava se. Ako se pitate što mi ovo margin-left:auto; i margin-right:auto; znače onda ću vam odgovoriti da ću tako stranicu pozicionirati u sredinu tj. stranica će stajati na sredini ekrana.
Header je veoma jednostavno odrediti. Obično je on širine kao i omot te neke manje visine recimo 100-150 (veće izgleda ružnije). Isto tako headeru sam dodao float i odredio mu vrijednost left tj. header je pozicioniran na lijevoj strani.
Isto tako sam napravio za lijevistupac samo sam na početak dodao clear:left;. Ovom naredbom ćemo “očistiti” lijevu stranu tj. lijevi stupac će biti ispod headera dok bi bez ove naredbe bio uz njega.
Na ovom principu sam napravio sve ostale divisione tj. odredio im poziciju sa float naredbom i za drugi division ispod toga sam očistio tu poziciju. Ukoliko želite očistiti lijevu i desnu stranu koristite: clear:both;.
Evo sada samo ispod onog HTML koda dodajte ovaj u kojemu ćemo odrediti div-ove.
<body>
<div id=”omot”>
<div id=”header”>
<h1>CSS Dizajn </h1>
<p>Može li biti jednostavnije?</p>
</div>
<div id=”lijevastrana”>
Izbornik ili nešta tako
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div id=”sadrzaj”>
<h1>Naslov stranice</h1>
<div id=”lipsum”>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse consequat metus nec orci. Quisque at odio. Suspendisse risus diam, molestie eu, suscipit vitae, molestie ac, ligula. Donec elit metus, porttitor a, aliquet nec, consectetuer id, orci. Morbi at eros vitae sem pellentesque fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed luctus blandit massa. Sed egestas. Curabitur a pede. Etiam turpis quam, molestie in, egestas et, condimentum sed, ante. Morbi lacinia ultrices urna. </p>
<p>Duis odio. Mauris ultricies. Donec enim urna, volutpat id, pulvinar ac, pellentesque consectetuer, dui. Integer vulputate. Sed magna ante, volutpat nec, aliquet non, facilisis quis, nisl. Nulla mattis nulla sit amet urna lacinia laoreet. Nunc metus nunc, vehicula non, euismod tincidunt, tincidunt a, tortor. Proin eu enim. Phasellus sodales enim tempor libero. Sed felis magna, facilisis lacinia, facilisis non, fringilla porta, augue. Aliquam consequat, dui at vulputate consequat, orci nunc tincidunt est, vitae rhoncus neque dui sed sem. Ut lacinia elementum odio. Aenean nibh quam, fermentum non, commodo a, placerat quis, lorem. In sit amet urna et elit ornare malesuada. In sit amet orci non est convallis ullamcorper. </p>
</div>
<p> </p>
</div>
<div id=”footer”>
Ovo je neki footer
</div>
</div>
</body>
</html>
Evo kako dizajn izgleda u akciji
Isto tako kada radite neku web stranicu pripazite na par stvari. Neke od njih su:
- Web standardi (neka vam je kod XHTML i CSS validan prema W3C Validatoru)
- Užitak korištenja
- Jednostavnost korištenja
- Brzina učitavanja
- Omjer teksta i slika
- Dizajn
Eto nadam se da će ovaj post pomoći nekima od vas da naprave dobru web stranicu i dobar dizajn.
Pozdrav!
2006. godine na Hrvatskoj internet sceni pojavio se novi IT news portal tj. CroPC.net. Kada sam prvi put otvorio portal dobio sam veoma loš dojam. Prvo što me je “ugrizlo” za oči jest Joomla CMS u kojem je sajt napravljen. Sama tehnička izvedba sajta je veoma loša. Običan Joomla CMS bez optimizacije na tražilice, bez jednostavnih linkova (koji se u Joomla CMS-u mogu veoma lako i brzo izraditi), RocketTheme template (vjerovatno ukraden ali neću u to ulaziti). Nadao sam se ako je barem predložak komercijalan da je stranica XHTML validna ali nije. Pogledajte rezultate validacije na ovom linku.
. Mislili ste da će se posjetitelji sami doći i dovesti svoje prijatelje ali to nije tako i sada neznate što napraviti. U ovom postu ću vam pokušat objasniti kako “dovući” posjetitelje na svoju web stranicu.
