Nishta,cekao sam neko vrijeme i vidim da nema raspolozenih da opisu potupak.Valjda svi misle da je to grehota objashnjavati jer je prosto. 

Ali eto ja cu opisati,cisto zbog pocetnika (sto je najgore i ja sam pocetnik) pa kako ispadne,ali mislim da ce posluziti.Da doprinesem malo forumu i temi.Ako neko nadje neku gresku,ne slazhe se  ili misli da je postupak nepravilan  neka pise,znacilo bi.

I
Dizajn Header,Body i Footer

Prije svega opisan je postupak u koracima dizajna web strane u photoshop-u cs3 i njegove implementacije u xhtml i css kod koristeci Notepad++.Podrazumeva se osnovno znanje photoshop cs3 i naravno malo vece znanje xhtml i css-a.

Ovako:

0.Sve pocinje sa idejom oko izgleda i skicom na papiru.Da dobro ste culi,jos uvijek ta famozna graficka,hemijska ili ti bilo kakva olovka moze da posluzi!.Kada smislite kako i sta idite nakorak 1.Ako ne znate da smislite,nemate inspiraciju onda uradite ovo u zagradi ispod:
{Do tada zazmurite ili crnim flomasterom na ekranu prekrizite ove korake ispod dok ne smislite dizajn.I neka bude neki za staklo alkoholni flomaster,da ga ni jedna sona kiselina ne moze skinuti sa vaseg monitora.(ako neko to napravi neka odmah napise ispod da ne mozhe da skine boju sa monitora,da znamo koga da proteramo iz zemlje!!!)}
1.Otvorite New File u Photoshop-u.
2.Izaberete opciju Transparent.Zasto transparent?Jer mozhete recimo imati sa rounded(zokrugljene na ivicama)shape(oblike) na web strani bez uskladjivanja pozadine -body- i izgleda web dizajna.Ako postavite background recimo white,uvijek ce vam biti ivice dizajna ostre(oblik kvadrata) ukoliko je body {background: razlicita od boje web dizajna;},a jako velika zajebancija  je zaokruziti ih kasnije.Eksperimentishite malo pa ce vam biti jasnije o chemu pishem.
3.E sada oko rezolucije web strane (dimenzija web strane):
a.)Pocetnicima se preporucuje width:770px (sirina) i height:800px (visine ili koliko vi zelite),mada ne treba preterivati sa visinom jer zna da smori zbog scroll-a.Kako da smori?E to imate u top temama na ovom sajtu.
b.)Zasto sirina 770px?Pa to nije full screen,ja zelim full screen!!!E pa ako zhelite u svim varijantama full screen onda vam treba poznavanje JS,PHP ili neceg slicnog.Zbog chega?Zato jer je moja rezolucija monitora trenutno 1200X800,ako bih pravio u toj rezoluciji sajt u CS3 na monitorima nize rezolucije,recimo 800X600,onda bi se pojavio horizontal scroll,sto je opet smrt za dizajn (opet na top teme ako je nejasna pogubnost horizontal scroll-a za dizajn).Zato se preporucuje nize od 800px sirine za pocetak.
c.)Ali moj dizajn je sada u rezoluciji 770X800 na potpuno levoj strani web stranice,sta sada?Batali sve i opet kreni da ucis CSS da bi ga pomerio na sredinu!!!
4.Dobro,sada pravimo dizajn u web rezoluciji 770X800.Imajte sada u vidu da morate imati tri osnovne cjeline.Header(tamo gde stoji logo,tekst firme,slogan firme...),Body(tamo gde je glavni sadrzaj) i poslednji Footer(tamo gde stoji ono copyright i mozda ponovljeni linkovi ili sta li vec...).Ovo je osnova za pocetak.Kasnije mozete to prosirivati i praviti razlicite cjeline.Obicno se podijele te cjeline nekom linijom ili nekim razgranichenjem.Najprostije nacrtajte plavi pravougaonik i sa dvije horizontalne linije linije ga podijelite i to vam je trenutno osnova sa tri glavne cjeline.Ako nije jasno opet onosa flomasterom dok ne bude jasnije.
5.Recimo da smo korake iznad ukapirali i da nam se svidja dizajn nase buduce web strane,sada je glavno pitanje kako to ubaciti u xhtml/css kod.E ovako:
a.)Neki kazu daje najbolje save as web u CS3,ali to nemojte da radite.To je glupo za sve ozbiljnije poznavaoce xhtml-a i css-a.(jer u tri div-a,imas optimizovan web dizajn u png,jpg,gif formatu sa sve header,body i footer style-om)I greota je onako kasapiti kod kroz table kako to CS3 uradi.
b.)Prvo sacuvajte(ali obavezno,PSD fajl),onda izaberite da sacuvate citav fajl kao.jpg,png,gif format(to je vas izbor,vise informacija o kvalitetu ova tri osnovna formata za web mozete lako naci).
6.Sada treba slice tool-om isjeci vasu web stranicu.To zvuci nenormalno tesko ali je toliko jednostavno da cete se smejati kada savladate to.Otvorite onaj jpg,png ili gif fajl gde ste sacuvali vas dizajn,izaberite slice tooli prevucite drzeci levi klik misa citavu prvu cjelinu i to do tik ispod one linije sto razdvaja Header i Body.Sada isto uradite sa Body,ali prevucite slice tool do tik iznad linije sto razdvaja Body i Footer(jakoje vazno da imate cistu cjelinu body u dizajnu,jer recimo mozete ga napraviti za neki tekst,a kasnije hocete tekst da prosirite i sta onda?Ovako mozete sa repeat-y za body pisati do mile volje,jasno?Ok,ajmo dalje.).I onda prevucite preko citavog Footer-a do donjeg desnog ugla strane.Sada imate slice-ovane tri osnovne cjeline.
7.Sada taj fajl sacuvajte,save as jpg,png ili gif format u prethodno predvidjenom folder-u za to.Sada imate umjesto jedne tri slike.Sta sada?Sada lagano,dje zurite?Odmorite malo uzhdite jednu cigaretu ili ti nesto jace jer ste odradili tek trecinu posla.Pa kada dodjete sebi krenite dalje.
8.E sada treba te tri slike prebaciti u  web ili ti xhtml/css.Prvo otvorite Notepad++ a onda unesite kod.
Ovako:

web.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Web Design</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<div class="header">
</div>
<div class="body">
</div>
<div class="footer">
</div>
</body>
</html>

web.css

.header {
background: url("header.png");
width: 770px; /*ovo je sirina dizajna i svuda je ista za web jer smo u CS3 tako izabrali*/
height: 300px;/*ovo je visina prve slike odnosno header-a,otvorite sacuvanu sliku header i kliknite na nju.pogledajte kolika joj je visina i upisite umesto 300px.isto tako za body i footer*/
margin-left: 220px;/*Ovo je za podesavanje dizajna na sredinu,mora na sve tri slike biti ista vrednost,ali znate to*/
margin-top: 0px;
padding: 0px;
}
.body {
background: url("body.png");
width: 770px;
height: 400px;
margin-left: 220px;
margin-top: 0px;
padding: 0px;
}
.footer {
background: url("footer.png");
width: 770px;
height: 100px;
margin-left: 220px;
margin-top: 0px;
padding: 0px;
}

9.Sacuvajte ta dva fajla iz Notepad++ u web.html i web.css formatu.Alio obavezno u folderu u kojem su slike(one tri cjeline o kojima prichamo svo vrijeme).Ako vam se razlikuju imena tri cjeline,nadam se da znate za rename fajla ili jednostavno promenite imena u kodu.
10.Sada mozete dodavati <p>,<ul>,<li>,<h1>...itd unutar <div>..Nikada ne koristite tabele.Imate table-cell...itd. u css-u.
11.Kliknite dva puta na web.html i eto dizajna prenesenog u kod,cistog i finog.
12.Uvijek podijelite sliku slice-om.Optimizujete tako ucitavanje sa servera.
13.Nikada ne radite citav sajt u photoshop-u.Gubi na zhivosti,djeluje jadno i mrtvo.
14.Budite uporni jer je nenormalno lako,samo malo truda treba.Ja ovako radim dizajn i njegovu implementaciju u kod.Ako ima pitanja tu sam.

Toliko za sada.Ostajem duzan jos linkove,da i njihov dizajn "pojasnim".

E sada stose tiche linkova i njihova izrada kao i njihovo prenoshenje iz Photoshop CS3 u XHTML/CSS kod.

U "civilizovanom" svijetu web dizajna linkovi se podrazumijevaju kao sastavni djelovi Headera.Shto znachi da trebate dok radite Header dizajn razmishljati i o linkovima za vashu web prezentaciju.I odmah dok osmishljavate Header osmishljate i linkove i njihov izgled u Headeru.Ja sam sklon da pravim dvije slike (recimo dva kvadrata u CS3 dimenzija 60px X 25px) i onda ih takve prenosim u kod.

Evo malog primjera kako to izgleda kada koristite dvije male slichice za linkove na mom sajtu za vjezhbu (naravno ne gubite vrijeme citajuci text na sajtu nego klikcite po linkovima):

http://users.cjb.net/pebas/index.html

Nikada u Photoshopu (osim ako bash ne zhelite) ne pravite linkove kao sliku sa tekstom u CS3 i sve zajedno prenosite u kod.To mozhete ako recimo ne razmishljate u skorije vrijeme da update-ujete linkove.Ali mozhete i tako ako ste bash navalili.Djeluje lakshe ali nije,samo je naizgled lakshe.Pravi problemi dolaze kada vlasnik sajta trazhi da promijenite tekst linka.Onda nastaje frka,gdje mi je psd fajl...itd.Ali idemo dalje.Ako ste dizajn osmislili da linkovi budu samo tekstualni sa recimo a:hover {text-decoration: underline;} onda ne dirajte nista u photoshop-u sto se slika za linkove tiche.Pogledajte iznad na sajtu skroz dole i videcete da nema dizajna.Tako je moglo biti i gore na glavnim linkovima pa mi ne bi trebale slichice.Nadam se da kapirate na shta mislim.

E ovako sada:
1.Ako ste napravili web dizajn,i napravili prostor u header-u za linkove sada treba precji na dizajn linkova.Pogledajte prostor za linkove u vashem web dizajnu.Izmjerite kolika je shirina i visina prostora predvidjenog za linkove u CS3 (pretpostavlja se da znate kako).Recimo da je shirina 500px a visina 50px.E sada vi zhelite da imate pet linkova,znachi ako zhelite linkovima da popunite ceo prostor onda ce te izabrati dimenziju slichice za link 100px X 50px.
2.Otvorite new fajl u CS3 i izaberite dimenzije 100px50px.E sada izaberite boju za taj fajl.Recimo plavu.Jednostavno sachuvajte taj fajl kao png/gif/jpg format tamo gde ste sachuvali fajlove za tu web stranu,i nazovite ga recimo -small_link.png-.Nemojte zatvarati CS3.
3.Sada isti fajl u CS3 obojite recimo u sivo i sachuvajte kao i prethodni faj i nazovite ga recimo -small_hover.png-.Sada ste zavrshili dizajn linkova.Zatvorite CS3 iobavezno prije toga napravite i kopiju dizajna linkova u .PSD formatu jer cete mozhda zheleti da promenite boju linkova danas sutra.
4.Sada dolazi deo kada treba kodirati sve to i implementirati u web stranu.Odnosno te slichice treba preneti na pet linkova u kodu.Au nutar njih odrediti text linka.recji cju da je -display: block;-,-position: absolute;- praktichno obavezna ako zhelite sve to da ispadne ok sa listama i linkovima.
5.Tu nastupate vi sa svojim znanjem u XHTML/CSS.
6.Ja cu objasniti samo kako da vam link ostane recimo drugachije bojekada ste na toj strani.A bez upotrebe JavaScript,samo u css-u.
7.Caka je u tome da za svaku stranu imate po jedan CSS fajl i da za tu stranu odredite da slika u sushtini bude kao a:hover na svim ostalim linkovima.
8.Ajde malo da pojasnim.Ovoje samo primjer za uochavanje shablona.(sve je u css,bez java script-a)

Recimo vi ste sada na HOME stranici nekog web sajta:

home.css

#home a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 235px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_hover.png") no-repeat;
}
#about a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 335px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_link.png") no-repeat;
}
#contact a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 435px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_link.png") no-repeat;
}
#home :hover {
background: url("small_hover.png") no-repeat;
}
#about :hover {
background: url("small_hover.png") no-repeat;
}
#contact :hover {
background: url("small_hover.png") no-repeat;
}

Recimo da ste sada na strani ABOUT:

about.css

#home a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 235px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_link.png") no-repeat;
}
#about a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 335px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_hover.png") no-repeat;
}
#contact a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 435px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_link.png") no-repeat;
}
#home :hover {
background: url("small_hover.png") no-repeat;
}
#about :hover {
background: url("small_hover.png") no-repeat;
}
#contact :hover {
background: url("small_hover.png") no-repeat;
}

contact.css

Recimo da ste sada na CONTACT web strani:

#home a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 235px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_link.png") no-repeat;
}
#about a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 335px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_link.png") no-repeat;
}
#contact a {
position: absolute;
padding-top: 16px;
font-size: 8px;
font-weight: bold;
color: #cccccc;
font-family: verdana;
margin-left: 435px;
margin-top: 278px;
list-style: none;
text-align: center;
display: block;
width: 100px;
height: 38px;
text-decoration: none;
outline: none;
background: url("small_hover.png") no-repeat;
}
#home :hover {
background: url("small_hover.png") no-repeat;
}
#about :hover {
background: url("small_hover.png") no-repeat;
}
#contact :hover {
background: url("small_hover.png") no-repeat;
}


9.Nadam se da kapirate kod,ne chitav naravno vecj samo shablon koji se koristi da bi linkovi ostajali drugachije boje dok ste na toj strani (bold-ovao sam bitno).
10.Sve ovo iznad i prethodni tutorijal su male bebe za tutorijale na koje sam ja nailazio.Morate nauchiti engleski.Koliko to god u nashim glavama mentalitetu zvuchalo glupo,ili ljudi misle "nacju ja na srpskom(ili ti nekom jeziku koji cjemo svi  ex-yu razumjeti)" grdno se varaju,jednostavno imate 500% prednosti u odnosu na one koje ne zhele da znaju ili nauche taj jezik.
11.Ova dva tutorijala sluzhe da se zainteresujete i trazhite dalje po google-u,ovakve stvari mozhete nacji u video formatu,tekstualno,ilustrovano i objashnjeno do "tankih creva" ali morate znati engleski people.

Eto toliko za sada.Pitajte ljudi slobodno stogod hocete. 

 

 

Hvala u svakom sluchaju mada ne mislim da je tutorijal previshe dobar za pochetnike,vishe je onako za srednji nivo a i nije bog zna kako objashnjen.Vishe je kao putokaz.

Ali kada bi samo 10% ljudi koji posjecjuju ovaj sajt davalo bar malo,a ne samo uzimalo,napravili bi riznicu znanja ovdje.
Ima ovdje dosta jako dobrih tutorijala,smjernica,objashnjenja,odgovora na najozbiljnije i najnebuloznije stvari itd,znam to.
Ali te sitnice "zlata vrijedne" ne mozhesh  nacji nigdje,a bez gledanja u source po sto puta neke strane koja ima slichne efekte,funkcije itd.Neshto tako "jednostavno" ljudi preskachu da pojasne.
Ali kada se oko nechega pomuchish na google-u da pronadjesh,nauchish i shvatish pa to prenesesh ovdje ili na nashe sajtove jednostavno pravish doprinos za buducje generacije da ne prolaze kroz istu muku,olakshavash im bar malo.Makar imaju nagovjeshtaj kako i shta.A kasnije cje sami lako trazhit kada udju u shtos.

Ova objashnjenja iznad su samo mali doprinos kao zahvalnost shto postoji ovakav forum koji je i meni kao pukom pochetniku zaista nenormalno pomogao da ukapiram neke osnove u oblasti CS3,HTML,XHTML,CSS,JAVASCRIPT,DOMENI,ZARADA,HOSTING,IDEJE,DIZAJNA,ODGOVORA,PITANJA,LINKOVA itd.Mada sam i dalje 100% siguran da ga samo par ljudi na ledjima nosi i daje,dok ostali samo uzimaju.Ne znam...valjda cje biti bolje (ne valjda MORA biti bolje) 

Mozhe li izgled JavaScript-a (style) da se kontrolishe sa CSS-om ili je obavezno da se kontrolishe sa JavaScript-om?

Josh

http://www.java2s.com/Code/HTMLCSSReference/CSS-Attributes-and-Javascript-Style-Properties/CatalogCSS-Attributes-and-Javascript-Style-Properties.htm

Hvala Vodish li na pivo...ja izgleda pogreshno google-am