Koodi Opas

Eli nyt oli siis jo jonkin aikaa toivottu koodi opasta ja tässä se nyt on. Jos ongelmia tai kysymyksiä tulee, niin otakaa ihmeessä yhteyttä Howsessa eaet :hen. :)

Koodaus on loppujen lopuksi hyvin yksin kertaista, sitä pitää vain harjoitella muutaman kerran, niin siitä se alkaa sujua. Parhaiten koodauksen oppii vai kokeilemalla mitä mistäkin luvuista tapahtuu, mutta tässä nyt sitten yksinkertaiset neuvot koodaukseen.

Aluksi on tehtävä ulkoasun pohja eli tausta. Pohjan voit tehdä esim. näillä kahella ilmaisella ohjelmalla, mutta voit käyttää lähes mitä muuta tahansakkin. -->  http://pixlr.com/express/  /   http://www.sumopaint.com/app/

Ulkoasun pohjan teko sumopaintilla

Tässä pieniä vienkkejä ulkosun pohjan tekemiseen sumopaintilla.

Kuvan leikkaaminen taustasta irti:

Jos tahdon leikata jonkin kuvan irti tausta, kumitan yksinkertaisesti kaiken muun pois. Mutta jos yritän tuosta noin vain kumittaa taustan pois, tulee alta esiin valkoista, joka ei ole läpinäkyvää, joten teen näin: 

1.Luon toisen tason/layerin oikeasta alanurkasta. 

2. Laitan tyhjän tason/layerin alemmaksi kuin se missä on kuva oikeassa alanurkassa olevatsa alaspäin osoittavasta nuolesta.

3. Tämän jälkeen yhdistän tasot oikeassa alanurkassa olevasta mutterista --> margen layer down

Tämän jälkeen voin kumittaa taustan pois niin, että taustata tulee läpinäkyvä. (Harmaa valkoinen ruudukko tulee esiin)

Kuvan liittämin toiseen kuvaan:

Kirjoituslaatikon tekeminen:

Laatkon asetuksia voi muokta ylös aukeavasta palkista.


Tässä nyt esimerkki pohja :

Jos tulee jotain kysyttävää, niin minulle (eaet) voi lähettää Howrsessa yksityisviestiä, autan parhaani mukaan! :)

Koodaus:

Itse teen koodauksen esittelyn muokkaamis tilassa, sillä silloin on kaikkein helpoin kokeilla ja katsoa ovatko laatikot oikeilla paikoilla ja täsmääkö kaikki muukin.

Kun pohja/taustakuva on tehty sinun pitää laittaa kuva jonnekkin niin, että voit kopioidan pohjan URL osoitteen. Pohjan URL osoite laitetaan yllä olevassa kuvassa vihreelle alueelle sulkeisiin. Muista pitää sulkeet. sillä muuten koodi ei toimi!

Sen jälkeen kun pohja on koodissa, sovitetaan koodi pohjaan, pohjan korkeuden ja leveyden mukaan. Yllä olevaan kuvaan on merkitty sinisellä kohdat joista veleyttä (width) ja korkeutta (height) muokataan.

Kun pohja on saatu sopimaan koodiin, koodiin lisätään kirjoituslaatikot sen mukaan kuinka monta niitä tulee olla.

Yllä olevaan kuvaan on merkitty vihreällä kohdat joista voit säätä laatikon levyttä (width) ja korkeutta (height).
Sinisellä merkitystä kohdasta (margin-top) säädetään kuinka kaukakana laatikon yläreuna on pohjan yläreunasta, kun taas violetilla merkitystä kohdasta (margin-left) säädeään kuinka kaukana laatikosi vasen reuna on pohjan vasemmasta reunasta.
Näiden kahden avulla saat säädettyä laatikon oikeaan kohtaan.
Punasella merkitystä kohdasta voit säätää tekstin kokoa.

Kuvaan on ympyröity myös Normaali tila painike, siitä kun painat voit aina koodauksen välissä sitä, voit katsoa miltä ulkoasu näyttää ja mihin päin laatikoita pitää siirrellä.

Tässä nyt vielä alustava koodi, jota voit käyttää ulkoasussasi, lisäät siihen vain oman pohjasi URL-osoitteen ja säädat luvut oikeiksi. Jos ulkoasussa on enemmän kuin yksi laatikko, kopioidaan alla olevasta koodista vinottain kirjoitettu koodin osuus, niin monta kertaa kuin laatikoita on.

Alustava koodi:

<div style="width:800px; height:481px; margin: auto;text-align:center;background-color:transparent;">
<div style="margin: 0 auto; background: url(KUVASI URL-OSOITE TÄHÄN); 
width:779px; height:585px; top: 0px; left: 0px;">

<div style="width: 315px; height: 420px; margin-top: 500px; margin-left: 30px; text-align: justify; float: left; overflow: auto; background-color: transparent; padding: 5px; border: 0px; line-height: 13pt; font-size: 10px; font-family: verdana;"><font color="#ffffff">teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän teksti tähän&nbsp;</font></div>


</div></div>

Tässä on harjoitus pohja johon saa harjoitella koodausta. :)

Tässä pohjan URL-osoite:  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh966xFznp9fDuGQg3YUShNFwfYJtiu-UAaCBE0GaXf1uWv0hdBoAoWNybAmPdDQST-FPgS9oZnsHHxXcQAmBxcxul7ah2qGH3FWLGWREd7m_GVxVy_xSYdlf4bJpua5RzezArtBkCpIa8/s1600/Harjoitus+pohja.png


Toivottavasti edes joku ymmärsi. Mutta minulta eaet :lta saa tulla rohkeasti kysymään apua, jos jokin ei onnistu. Kokeilkaa ihmeessä!

- eaet