Ovo je jedan mali dio tutoriala za Web dizajnere (ljude koji to žele biti i koji marljivo uče).

Crtanje template-a

Template je u prevedenom značenju predložak ili ako vam još nije jasno, to je izgled stranice, slika cjelokupne stranice. Kako napraviti predložak to sve ovisi o vama koliko dobro baratate Photoshopom i koliko imate smisla za crtanjem. Trenutno se sad neću pisati o tome kako se crta u Photoshopu jer to bi trajalo jako dugo.

Izrezivanje Template-a

Ono što Web dizajneri koriste u Photoshopu je izrezivanje predloška kako ne bi morali svaki dio stranice posebno crtati i spremati, tu nam služi Photoshop u kojem nacrtate cijeli predložak, a zatim ga na djelove izrežete pomoću Slice Tool-a. Za ovaj tutorial ja ću koristiti gotovi template.

Izrezivanje i nije tako težak posao. Uzmite Slice Tool i označite kako i što želite odrezati. Za početak evo kako bi header ovoga templatea trebalo odrezati. Razlog zašto header nije odrezan po cijeloj dužini je taj što je pozadina crna i kad bi se rezao od ruba do ruba, slika bi bila oko 1000 px širine što je u ovom slučaju nepotrebno jer je pozadina crna i pozadinu lako dobijemo CSS-om.

Ovo isto napravite i na ostalim elementima, naprimjer navigacija. Kako ne bi rezali sve od ruba do ruba jer je to stvarno nepotrebno, možete odrezat samo dio veličine do jedan centimetar ili manje. Razlog zašto samo komad navigacije je taj što tekst možete dodati HTML kodom, a CSS-om napraviti da se ovaj mali komad slike od navigacije ponavlja od ruba do ruba.

Izrezivanje podloge za lijevi i desni stupac potrebno je izrezati samo jednom, nema potrebe za rezanjem svakog stupca posebno. Evo kako bi to trebalo napraviti. Tekst nije bitan jer se on dodaje u HTML-u. Dakle potreban je gornji dio stupca u koji dolazi naslov, jedan mali dio sredine od nekih 2 - 5 milimetara će služiti kao pozadina koja će se ponavljat i završni dio je donji rub. Dakle tri slike.

Na ovaj isti način odrezat ćemo i glavni stupac, to jest pozadinu za glavni sadržaj na stranici. Dakle tri slike, vrh, sredina i dno.

Kako bi znali koja je koja slika kad ju spremate, uzmite Slice Select Tool i kliknite dva puta na header i upišite naziv slike, npr. header i kad budete spremali sliku zvati će se header.png. Tako vrijedi i za druge slike.

Sve što sad trebate je da odete na File > Save for Web & Devices i kliknete na svaku sliku posebno i odaberete njezin format (GIF,JPEG,PNG...). Ono što trebate dobiti je dobru kvalitetu slike i koja će se brzo učitavati. U kutu dole ispod slike imate koliko će se sekundi učitavati slika na određenoj brzini. Koliko ćete spanjiti sve ovisi o vama.

Nakon što ste svakoj slici koju mislite odrezati dodali format i broj boja, potrebno je označiti slike koj mislite izrezati. Pritisnite i držite shift (u CS4 verzijama, u starijim je mislim control - ako se ne varam) i klikajte na svaku sliku koju želite spremiti. Nakon toga kliknite Save, odaberete Images Only i Selected Slices što znači da će odrezati samo označene slike,  i kliknete gdje želite da vam se slike spreme i to je to.

Sad sve što trebate je slike ubaciti u HTML pomoću CSS-a. Više o HTML-u i CSS-u na Tutorial za Web dizajnere.

Ivan M.

ovo ti je super ali bolje bi bilo da si u nekih 5 min. nactao nešto nabrzinu samo neke osnovne djelove web-a ovako bi se neki početnik zbunio oko izrezivanja u teplateu jer je web malo previše šarolik i popunjen što je dobro ali to u poćetku zbunjuje...

imam ajmo reć problem jer to baš i nije problem. Uradim template na photoshopu 1 slika bezveze sam nešto na brzinu uradio i sad save itd...i sad kad trebam otvorit na DW neznam kako stavit tekst u template jer mi se npr. side bar može razvući kao slika a ako ubacim Div tag onda se stvori iznad ili ispod sidebara.Nešto sam zajeb. ili sam nešto propustio, inaće sam radio web sa DW golim templatevima.

Ja osobno tako ne radim (upravo zbog takvih grešaka). Jednostavnije ti je napraviti templet, izrežeš ga na dijelove i onda sam dodaješ HTML i CSS kod u DW. Meni je tako jednostavnije i lakše uočim grešku jer kod sam pišem, a ne ovako kad ga importiraš da se templet sam doda HTML.

možeš li mi to rezanje i ubacivanje malo bolje objasnit ili sa skicom prikazat plz.Vdio sam na pregled templatea ispod bude HTML cod?? kad idem sačuvat

Ti si na svom templetu odrezao cijeli stupac, a mogao si samo gornji i donji dio zbog zaobljenih rubova. Sredina ti ne treba jer u poadinu možeš stavit takvu boju (bolje je jer ti se stranica brže učitava),nakon toga te slike koje si označio spremi u mapu images (to photoshop sam sprema u tu mapu, sam je kreira). Nakon toga imaš slike za web u mapi images. Sad otvoriš DW i radiš index stranicu i CSS kod. Dakle CSS-om dodaš te slike u pozadinu, napraviš strukturu, boje, slova....

dakle to nije insert>image>itd ...kad uradim index i CSS .kako ću CSS-om dodat sliku-dali to treba ovako staviš sliku dako backgound ili pozadina ,i onda napravit strukturu ...sad kako treba napravit strukturu?? ako ti se neda objašnjavat možeš li mi bar dat link u kojem to detaljno objašnjuje.

Sve ovisi kako radiš stranicu i što koristiš. Naprimjer za header ja to ovako radim.

CSS

#stupac {
    background-color:#666;
    width:250px;
}

#stupac_top {
    background-image:slika.jpg;
}

#stupac_bottom {
    background-image:slika2.jpg;
}

HTML

<div id="stupac">
<div id="stupac_top"></div>
<p>Glavni teskt u stupcu </p>
<div id="stupac_bottom"></div>
</div>

I tako sam znaš kako si pisao kod i meni je puno jednostavnije, nego da mi samo ispiše kod za strukturu. Dakle CSS, HTML i obične jpg slike koje si izrezao photoshopom.

thx...btw ako radim na DW i tamo upisujem HTML moželi se upisivat na hrvatski?

U css kodu možeš nazvat kako hoćeš, samo bez kvačica i razmaka. NPR: uvodna rečenica - uvodna_recenica ili sa - ili bez crta.

Ne mogu se upotrebljavati hrvatska slova. Samo a-Z, A-Z iliti engleski alfabet.

Evo ja cu samo dodat da se osim u <div></div> meze koristiti tablica kojoj das velicine redka i stupaca onoliko koliko si izrezao dijelove stranice u photoshopu, maknes sve padding-e i margin-e tj stavis ih na nulu tako da nema razmaka izmedju pojednih dijelova tablice. Nekad je to bolje jer imas fixno kako ti je stranica pozicionirana dok kod div-ova moras paziti na npr. float: left/right/none,position:absolute/relative itd., pa ovisno o pregledniku kako ce se prikazat i ostale neke sitnice koje pocetniku mogu stvarat puno muke.

Nadam se da ste me shvatitli ako treba pomoc, pojasnit cu.

biloobi dobro da pojasniš...jer mi div-tag stvara probleme

Kad se radi site, najbolje je ubacit "reset css" file koji to sve radi, tj postavlja vrijednosti na nulu. I još puno toga.. :D

evo jedan..

i ovoo bi trebao copy-paste u CSS ?? što se time dobiva

za definirane elemente se postavljaju vrijednosti koje se prikazuju jednako u svim browserima.

e baš mi je to trebalo THX

<html>
<body>

<table border="0" width="900px" cellpadding="0">
<tr>

<td width="50%" height="200px" valign="top" id="head1">
</td>

<td width="50%" height="200px" valign="top" id="head2">
</td>

</tr>
</table>

</body>
</html>

Gore iznad vidimo jednu tablicu koja se sastoji od jednog redka<tr></tr> i dva stupca<td></td>, postavljena širina tablice je 900px, border=0, cellpadding=0 radi razmaka izmedju dijelova tablice.

Dana je sirina stupaca na 50%(širina može biti i u nekoj drugoj mjeri npr. px kao što sam ja postavio visinu stupca i širinu tablice). Visina stupca je postavljena fixno na 200px, ovisno o slici ako ti je visina slike 300px stavi na 300px itd. Inace ako je text u pitanju mozda je bolje ostaviti bez zadane visine jer ce se onda sam redak povecavati ovisno o kolicini texta.

svakome smo stupcu dali id da bi mogli tome id-u pridruziti neke vrijednosti preko css-a, ako hocemo neke iste vrijednosti iz css-a primjeniti na vise elemenata onda korisitite class da nebi morali pisati nekoliko puta.

U css file-u class elemet se oznacava kao (class="klasa"):

.klasa

{

   color:black;

}

a id (id="head1")

#head1

{

    color:white;

}

css file koji ide uz tablicu

napomena: imamo znaci u tablici jedan redak koji je razdvojen na dva stupca, pa cemo recimo nas logo prepoloviti sa slice tool-om na dva dijela jednaka. nazvat cemo slike logo_1.jpg,logo_2.jpg

#head1

{

background-image:url(logo_1.jpg)

background-repat:no-repeat;

background-position:top left;

}

#head2

{

background-image:url(logo_2.jpg)

background-repat:no-repeat;

background-position:top left;

}

P.S.

Ovo sam sve napamet pisao pa ako ima koja greska sorry

Samo da nadodam da se u tablice još može ubacit i TH tag koji označava table header. Puno jednostavniji način definiranja headera za neku tablicu.

Više nisu u modi tablice. To se polako izbacuje.

Naravno, nisu u modi što se tiče layouta stranice. Tu ulogu su preuzeli "<div>" elementi koji pružaju mogućnost kreiranja puno fleksibilnijeg sitea. Naravno, ti to znaš ali piše za one koji ne znaju. :)

ok, ali opet ovisi za sto je kome potrebno. Ja isto koristim div-ove, ali za pocetak sam ucio na tablicama i lakse je bilo skontat.

e ljudi ove sve stvari koje ste mi dali za CSS dali se to može prosto copy paste ili treba neki redosljed

U pravilu:

body element ide na pocetku css file-a(nije nuzno ali se preporuca), a sve ostalo iza.

teško mi je radit Div tag u HTML pa sam napravio Tutorial za Div tag na lakši način po mom.

tema se zove Dreamweaver CS4 tutorial

Čekaj, teško je radit div tag u HTML-u?????

Ovo je tebi teško:

<div id="element_id" class="element_class">Tag content</div>

Teško mu je kad treba u CSS napravit da se stranica prikazuje pravilno i da se ne razbija. Nije teško, sve se da savladat.