Ukoliko ste savladali prethodnu lekciju idemo dalje sa školicom uredjivanja blog dizjana. Red je da malo prošaramo fontove na blogu. Svi vi koji ste u prethodnoj lekciji uspeli da izmenite pozadine, a da ste pri tom stavili neku novu, tamnu, uvideli ste da je praktično vaš blog nečitljiv jer su fontovi po defoultu crni, pa tako na crnoj pozadini ste dobili šipak.
Nećemo ni sada ulaziti u suštinu html-a, već ćemo se pozabaviti praktičnim delom, u prevodu, i ova je lekcija namenjena za totalne lajke, koji će bez ikakvog poznavanja html-a uspeti da svoj blog sredjuju prema sopstvenoj želji.
Za početak vam predlažem da ponovo učitate dizajn leptirica, jer sam ga u medjuvremenu modifikovao zbog potrebe ove lekcije. Ukoliko jeste, vežite se polećemo.
1. Kao prvo, da bi smo uopšte krenuli sa ovom lekcijom, moramo se upoznati sa osnovnom koncepcijom označavanja boja u html-u. Svaka boja je izražena u obliku heksadecimalne vrednosti. Tako na primer bela boja ima oznaku #ffffff, crna #000000 i tako dalje. Kako će te znati koje su ostale vrednosti boja ? Vrlo jednastavno u sledećem postu na help blogu imate kompletan pregled osnovnih boja sa njihovim vrednostima kao i alat sa kojim možete vrlo precizno da odretite heksadecimalnu vrednost bilo koje boje. Ako ste ukapirali ovo, onda prelazimo na suštinu.
2. Otvorite sada kod svog dizajna. Svaki blog dizajn se sastoji iz recimo 2 osnovna dela. Prvi je stil (to je ono što nas u suštini sada zanima) a drugi je programski deo u kome se nalaze sve neophodne komande kako bi blog pravilno funkcionisao.
Stil bloga u kodu kreće linijom:
Sve linije ispod, su linije koda koje upravljaju izgledom vašeg bloga. Obično u tom delu definišemo odredjene stilove sa parametrima koje će mo primenjivati u svom dizajnu.
Evo konkretnog primera
Stil h2 u kodu bloga je iskorišćen za naslov posta
h2 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 20pt;
color: #E78883;
margin-bottom: 12px;
Stil h3 je iskoriščen za tekst posta
h3 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 15pt;
color: #ffffff;
margin-bottom: 2px;
Stil h4 je iskorišćen za naslov bloga
h4 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 40pt;
color: #CC0000;
margin-bottom: 12px;
Stil h5 za komentare
h5 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 10pt;
color: #ffffff;
margin-bottom: 12px;
Stil za linkove
a:link { color: #F3C5C2; }
a:visited { color: #F3C5C2; }
a:hover { color: #ffffff; }
U svakom od njih vidite četiri parametra koje možete proizvoljno da menjate,
font-family - označava vrstu fonta
font-size - je veličina fonta
color - boja fonta
margin-bottom: margine
Stilovi mogu da sadrže i druge parametre, boldiranje fonta, prored, kao i niz drugih komandi, ali mi ćemo se zadržati na ove osnovne parametre. Dakle krenite sa eksperimentisanjem, sve što treba da uradite jeste da u svom kodu blog dizajna pronadjete navedene linije iz primera i da izmenom njihovih vrednosti dobijete veličinu i boju fonta koji želite. Ovo Vam je sasvim dovoljno za početak. Jer sa prethodnom lekcijom i ovom imaćete punu kontrolu na izgled svog bloga. Srećno u eksperimentisanju, a ako nešto nije jasno, ko pita - ne skita !
Nećemo ni sada ulaziti u suštinu html-a, već ćemo se pozabaviti praktičnim delom, u prevodu, i ova je lekcija namenjena za totalne lajke, koji će bez ikakvog poznavanja html-a uspeti da svoj blog sredjuju prema sopstvenoj želji.
Za početak vam predlažem da ponovo učitate dizajn leptirica, jer sam ga u medjuvremenu modifikovao zbog potrebe ove lekcije. Ukoliko jeste, vežite se polećemo.
1. Kao prvo, da bi smo uopšte krenuli sa ovom lekcijom, moramo se upoznati sa osnovnom koncepcijom označavanja boja u html-u. Svaka boja je izražena u obliku heksadecimalne vrednosti. Tako na primer bela boja ima oznaku #ffffff, crna #000000 i tako dalje. Kako će te znati koje su ostale vrednosti boja ? Vrlo jednastavno u sledećem postu na help blogu imate kompletan pregled osnovnih boja sa njihovim vrednostima kao i alat sa kojim možete vrlo precizno da odretite heksadecimalnu vrednost bilo koje boje. Ako ste ukapirali ovo, onda prelazimo na suštinu.
2. Otvorite sada kod svog dizajna. Svaki blog dizajn se sastoji iz recimo 2 osnovna dela. Prvi je stil (to je ono što nas u suštini sada zanima) a drugi je programski deo u kome se nalaze sve neophodne komande kako bi blog pravilno funkcionisao.
Stil bloga u kodu kreće linijom:
Sve linije ispod, su linije koda koje upravljaju izgledom vašeg bloga. Obično u tom delu definišemo odredjene stilove sa parametrima koje će mo primenjivati u svom dizajnu.
Evo konkretnog primera
Stil h2 u kodu bloga je iskorišćen za naslov posta
h2 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 20pt;
color: #E78883;
margin-bottom: 12px;
Stil h3 je iskoriščen za tekst posta
h3 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 15pt;
color: #ffffff;
margin-bottom: 2px;
Stil h4 je iskorišćen za naslov bloga
h4 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 40pt;
color: #CC0000;
margin-bottom: 12px;
Stil h5 za komentare
h5 {
font-family: "Trebuchet MS"; verdana, arial, sans-serif;
font-size: 10pt;
color: #ffffff;
margin-bottom: 12px;
Stil za linkove
a:link { color: #F3C5C2; }
a:visited { color: #F3C5C2; }
a:hover { color: #ffffff; }
U svakom od njih vidite četiri parametra koje možete proizvoljno da menjate,
font-family - označava vrstu fonta
font-size - je veličina fonta
color - boja fonta
margin-bottom: margine
Stilovi mogu da sadrže i druge parametre, boldiranje fonta, prored, kao i niz drugih komandi, ali mi ćemo se zadržati na ove osnovne parametre. Dakle krenite sa eksperimentisanjem, sve što treba da uradite jeste da u svom kodu blog dizajna pronadjete navedene linije iz primera i da izmenom njihovih vrednosti dobijete veličinu i boju fonta koji želite. Ovo Vam je sasvim dovoljno za početak. Jer sa prethodnom lekcijom i ovom imaćete punu kontrolu na izgled svog bloga. Srećno u eksperimentisanju, a ako nešto nije jasno, ko pita - ne skita !
Pošalji komentar
Komentari:
...sad moradoh na brzinu da savladam prethodnu lekciju...da ne budem zaostala...vise nego sto jesam..:)))
ha! a ja se patim sa Hex color kodovima :) Šalam se, ali mislim da je na tom tvom help blogu čak i preglednije
Moze ovo malo krace da se objasni? Mislim nisam nista ukapirala ja ;)))) ma daj..znam da moze...;)))
Procitala sam do pola, zurim, ali i ovo pola mi govori da sam konacno na pravom mestu, nisam znala za ovu skolicu i potrazicu posle I deo i sve natenane prouciti, POGLAVICO TI SI GENIJE , hvala ti, ne moram vise da zovem komsiluk u pomoc i sestrice, bratice... kada naucim kako se ubacuje ono crveno srce, poslacu tu a sada ovo prosto cmok // cmok
ma Poglavica je SUPER!!!
samo ja jos nisam naucila ni prvu lekciju, on presao na drugu...(:
samo ja jos nisam naucila ni prvu lekciju, on presao na drugu...(:
nikad nije kasno.... da se krene od prve lekcije ;)
@Poglavice, hvala, sad si me utesio, to - da nikada nije kasno..., kad bi savladala to kompjutersko znanje
al bi pravila lepe blogove, osecam da bi bili zaista sjajni...:)
al bi pravila lepe blogove, osecam da bi bili zaista sjajni...:)
ja tju ipak da ostavim to za avgust ... tradicija :)))
e ovako Vrhovni,ovu lekciju sam davno savladala ali mene muci nesto drugo,pa bih ti bila vrlo zahvalna ako jedna od sledecih lekcija bude tema ubacivanja muzike u html,ali bez plejera,tacnije(vid' plavusu sto se spetljala:))),interesuje me sta treba da pobrisem sve od karakteristika plejera, a da sve ostalo funkcionise kada se stranica otvori tj.da muzika svira. Izbor pleyera je prilicno nemastovit i vec mi se popeo na glavu...Ma mogu ja i sama da eksperimentisem,ali me, iskreno, mrzi:)))) A ovako ce biti prosvecene i sire blogerske mase:)
nije problem, ne treba lekcije... sve shto ti je potrebno jeste jedna linija u kodu dizajna...koja bi isla recimo ovako.. i muzika tje svo vreme da shiba u pozadini...
<embed src=http://www.angelfire.com/jazz2/zaratustra/cave.mp3 height=1 type=audio/mp3 loop="true" autostart="true" volume="100%" width="1" align="right" style="border: 0px solid #000000; background-color: #000000">
e sad sve shto treba da uradish jeste da pronadjesh mesto
na kome tjesh aploudovati pesmu, evo recimo u ovom primeru upotrebljen je za tu svrhu www.angelfire.com ...
E sad ima tu nekih ogranichenja, koliko znam, to sve super radi u Internet Exploreu, Operi itd ali u Mozilli netje... Medjutim ako se pesma iz mp3 formata prebaci u swf
to ide bez problema u svim browserima...
Nadam se da tje odgovor biti od pomotji :)))
<embed src=http://www.angelfire.com/jazz2/zaratustra/cave.mp3 height=1 type=audio/mp3 loop="true" autostart="true" volume="100%" width="1" align="right" style="border: 0px solid #000000; background-color: #000000">
e sad sve shto treba da uradish jeste da pronadjesh mesto
na kome tjesh aploudovati pesmu, evo recimo u ovom primeru upotrebljen je za tu svrhu www.angelfire.com ...
E sad ima tu nekih ogranichenja, koliko znam, to sve super radi u Internet Exploreu, Operi itd ali u Mozilli netje... Medjutim ako se pesma iz mp3 formata prebaci u swf
to ide bez problema u svim browserima...
Nadam se da tje odgovor biti od pomotji :)))
