Mun Grafiikat on suoraan sanottua, sieltä p. Joten Te teette tietenkin paremmat grafiikat.. älkää antako huononi grafiikkojen pilata opasta.. Esimerkiksi tällä oppaalla voi saada samanlaisen lopputuloksen kuin:
www.jezu.org , tämä ei ole matkimista vaan tässä opetetaan tekemään sivupohja photoshopilla ja koodaamaan se.. perus´asia on tämä.. mut' sikku osaa tämän niin avot, osaat kaikkea, tee opas niin etenet hyvin koodaukses yms .
Tässä opetellaan:
-
Photoshopilla tehdään sivupohja, pilkotaan, koodataan Idea on sivupohjan teko. Joten tästä alkaa opas:
Tämän näköinen sivupohja pitäisi olla lopputulos :
http://s12.imagehosting.us/uploadpoint/imagehosting_upload_storage/nouser_1811/T0_-1_1811149.gif Aloitetaan itse tekoa.:
1. Mene
File ->
New Laita asetukset tällein :
Width: 700px ja
Height: 700px Muihin asetuksiin ei tarvitse koskea.
Tässä vielä vaihe missä
NYT pitäisi olla:
http://show.imagehosting.us/show/1811166/0/nouser_1811/T0_-1_1811166.gif 2. Värjää pohja omalla värillä minkä haluat sivupohjan bgcoloriks, eli taustaväriksi, itse käytin valkoista. Värjää pohja valkoiseksi, eli
#ffffff. Sitten ota käyttöön:
Rectancular Marquee tool tee tuolla siihen sellaiseet tarpeeksi isot NELIÖ joka esittää ns. borderia eli reunaa .. sitten sinulla pitäisi olla siinä sellainen neliö ja valkoinen pohja tai sivupohjasi värinen pohja, eikö ?..
Tässä vielä kuva:
http://show.imagehosting.us/show/1811184/0/nouser_1811/T0_-1_1811184.gif 3. Sitten uusi LAYER jonka saat
Layer ->
Layer New Nytten sinä olet uudessa layerissä ja sinulla on tuosta
Rectancular Marquee toolilla tehty se neliön muoto ?..
Hyvä jos on niin olet pysynyt selityksieni perässäsä ..
mutta ei hätää jos oot vähä " marjapensailla " ,
mutta nytten kun olet uudessa layerissä niin värjää se layerissa oleva neliön muotoinen pohja valkoiseksi ..
Sitten kun olet sen värjännyt niin etene seuraavasti:
Layer ->
Layer Style sitten siitä tulee sellanen missä lukee:
Drop Shadow .. niin mene siihe ja laita siitä asetukset seuraavasti:
Blend mode: laita se: multiplyeksi
Opacity: 75
Angle: 120
Distance: 0
Spread: 0
Size: Sitten Klikkaa OK !
Kuvasi pitäisi olla nytten lähes tän tyyppinen:
http://show.imagehosting.us/show/1811196/0/nouser_1811/T0_-1_1811196.gif Hyvä jos on meinaan nytten olemme tehneet reunat ja sitten pääsemme grafiikan pariin.. Itse teen vaan jonkunmoiset.. Tehkää te hienommat.. Mä teen vaan että se ois niinku sen tyylinen .. Kun teen näin tonne sisälle eri hommia, niin voittehan toki tehdä erinlailla kun minä jos osaatte vaan.. : = )
4. Tehdäänpä sille navi ylös. Tee uusi layeri,(
osaathan jo tehdä layerin ? ).. noniin nytten sinulla on layeri siinä .. Tee tarkasti sillä
Rectancular Marquee toolilla Omasi haluamasi kokonein navigaatio, eli missä on, etusivu, info jne.. yms. Koristele hienoksi navigaatio
Tässä on vähäsen kuvaa:
http://show.imagehosting.us/show/1811208/0/nouser_1811/T0_-1_1811208.gif 5. Logon vuoro. Koristele logosi, tee siitä hieno, valitse logon kokosi, ei ole tarkkaa kokoa, sellainen 135 px.. voisi olla melko hyvä.. Mutta sen päätät sinä ..
Pysyppäs ajantasalla, tässä vielä kuva, että olet varmasti oikeassa kohdassa .
:
http://show.imagehosting.us/show/1811224/0/nouser_1811/T0_-1_1811224.gif6. Tee tähän pieni koriste, se voisi olla 25 px (pixel) Sitten photoshoppaat siihen hienon pohjan ..
7. Tässä kohtaa on sisältösi, älä tee tälle mitään jollet välttämättä halua ..
8. Tee copyrighti kuvineen ja päivineen, tai jätä se aivan tyhjäksi ..
Nytten olemme piirtäneet sivupohjan, seuraavaksi pilkomme sen ja koodaamme sen .. 9. Nyt pilkomme navin.. Ota
Rectancular Marquee tool käyttöösi ja reviiraa se sopivaksi..
KUVA, että ymmärsit: http://show.imagehosting.us/show/1813826/0/nouser_1813/T0_-1_1813826.gifsitten kopioi kuvat
control c ja sitten avaa uusi:
File ->
New ja OK.. Sitten liität sen kuvan
Control v Nytten voit tallentaa kuvasi.. tallenna nimellä.. "navi.gif".. Homma valmis.. Navi pilkottu ja leikattu ja tuunattu ... Nytten tajuat miten pilkotaan ?.. pilkoppa samalla tyylillä, logo, se koriste, sisältö, copy.. Tallenna ne haluamallisi nimellä..
10. Siinä oli photoshopin opas.. Nytten siirrymme muistion ja koodauksen pariin ..
11. Nytten alkaa: Tässä kohtaa aloitamme sen koodaamisen ..
Avaa muistio, itsekäytän: Notepad ++, Kirjoita koodi
itse Älä kopioi koodia, jotta oppisitkin jotain .. Kirjoita se omalla käsialallasi.
Jotta tajuaisit seuraavanlaisen koodin, on sinun omaan tarpeeseen lukea kunnon HTML -koodi.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title> SIVUPOHJASI NIMI </title>
<link rel="stylesheet" media="screen" type="text/css" href="tyyli.css" />
</head>
<body>
<div id="sivupohja">
<div id="navi"></div>
<div id="logo"></div>
<div id="ylasisa"></div>
<div id="keskisisa">
<div id="kirjoitukset">
sisalto
</div>
</div>
<div id="alasisa"> </div>
</div>
</body>
</html>
Jos ymmärsit koodin niin osaat HTML..mutta jos et ymmärtänyt lue sellainen opas ; )
Tässä alapuolella käsittelemme tämän sivupohjan koodauksen tyyleissä.. Opettele css jonkun oppaasta .. body{
background-color: #393939;
margin: 0; /* Jotta rungon marginaalit eivät häiritsisi työtämme, niin ne pitää nollata */
padding: 0; /* KS. ylempi */
text-align: center; /* KS. Seuraava kappale (IE korjaus) */
color: #999999;
font: 9px verdana; /* Perusfontti */
margin-top: 0px;
margin-bottom: 0px;
}
#sivupohja{
margin-top: 0px;
margin-top: 0px; /* Asetetaan ulkoasu 10 pikseliä yläreunasta */
margin-bottom: 0px;
text-align: left; /* KS. Seuraava kappale (IE korjaus) */
margin-left: auto; /* Ulkoasun keskitys sivun keskelle, KS. seuraava kappale */
margin-right: auto; /* Ulkoasun keskitys sivun keskelle, KS. seuraava kappale */
width: 810px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
}
#navi{
margin-top: 0px;
height: 77px; /* Logon alueen korkeudeksi 120 pikseliä */ /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
width: 727px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
border: 0px solid #ffffff; /* Annetaan laatikoille yhden pikselin musta raja */
background-image: url('navi.gif');
color: white; /* logo-alueen tekstin väriksi vaalea */
margin-bottom: 0px;
}
#logo{
height: 124px; /* Logon alueen korkeudeksi 120 pikseliä */ /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
width: 727px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
border: 0px solid #ffffff; /* Annetaan laatikoille yhden pikselin musta raja */
background-image: url('logo.gif');
color: white; /* logo-alueen tekstin väriksi vaalea */
margin-bottom: 0px;
}
#ylasisa{
height: 35px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
width: 727px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
border: 0px solid #ffffff; /* Annetaan laatikoille yhden pikselin musta raja */
background-image: url('ylasisa.gif');
color: black; /* logo-alueen tekstin väriksi vaalea */
margin-bottom: 0px;
}
#keskisisa{
width: 727px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
height: 400px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
border: 0px solid #ffffff; /* Annetaan laatikoille yhden pikselin musta raja */
background-image: url('keskisisa.gif');
color: black; /* logo-alueen tekstin väriksi vaalea */
margin-bottom: 0px;
}
#alasisa{
height: 60px; /* Logon alueen korkeudeksi 120 pikseliä */ /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
width: 727px; width: 600px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
border: 0px solid #ffffff; /* Annetaan laatikoille yhden pikselin musta raja */
background-image: url('alasisa.gif');
color: black; /* logo-alueen tekstin väriksi vaalea */
margin-bottom: 0px;
}
#keski{
width: 600px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
float: left; /* Asetetaan vasen sarake "kellumaan" vasemmalle */
}
#oikea{
width: 210px; /* Nää laitat omasi sivupohajsi sopivaksi.. katso niiden koko vaikka photoshopilla*/
float: left; /* Asetetaan vasen sarake "kellumaan" vasemmalle */
}
/* Annetaan yhteiset tyylit jokaiselle luokkaan box kuuluville diveille */
.box{
border: 0px solid #ffffff; /* Annetaan laatikoille yhden pikselin musta raja */
border-top: 0px; /* Poistetaan yläpuolen raja */
background-color: #ffffff /* Taustaväriksi taivaansininen */
}
/* Annetaan yhteiset tyylit jokaiselle luokkan btop kuuluville diveille */
/* Annetaan tyylit jokaiselle box ja btop luokkiin kuuluville diveille keskimmäisessä sarakkeessa */
#keski .box, #keski .btop{
width: 710px; /* Leveys 710 pikseliä. Huom! Muista aina vähentää leveydestä rajan(border) leveys kertaa 2
Tässä tapauksessa se on kaksi pikseliä sillä rajan leveys on 1 pikseli */
margin-bottom: 0px;
margin-right: 10px;
}
.padding{
padding: 4px; /* Reunojen ja tekstin väliin neljän pikselin tyhjä tila */
}
p{
margin: 0; /* Ensin nollataan marginaalit */
margin-top: 5px; /* Sitten annetaan niille 7px marginaalia yläpuolelle */
}
hr{
margin: 0; /* Ensin nollataan marginaalit */
border: 0px;
background-color: #1F8400;
}
Olet saanut onnellisesti oppaan loppuun ja tässä vaiheessa sinun lopputuloksesi pitäisi olla valmiina - Lähettäkää teoksianne - Goldendragon .. Huomasit kai jotain ?.. koodi on sinun oppaastasi vähäsen.. olen käyttänyt tota koodia omassa sivupohjassani.. joten tää on vähän minun ja sinun koodinpoikasta, toivottavasti et laita pahakseen 
