UKK
- usein kysyttyjä kysymyksiä ja vastauksia -
Täältä löydät kaikki ne kysymykset, joihin törmää useimmiten ja vastaukset niihin. Mikäli jokin askaruttaa vielä näidenkin vastausten jälkeen, lähestythän minua vieraskirjassa kysymyksesi kanssa.
Hyppää tästä haluamaasi kohtaan tai klikkaa ctrl + f kirjoittaaksesi hakusanan.
- Ulkoasut ja koodit -
Ulkoasuni ei toimi kunnolla/näyttää väärältä. Mitä teen/mitä olen tehnyt väärin?
- Varmista vielä, että olet varmasti laittanut kaikki asetukset ohjatulla tavalla. Usein painelee epähuomiossa vääriä nappeja tai lisää lukuihin vahingossa ylimääräisiä numeroita. Mikäli sivusi näyttää edelleen hassulta, käy katsomassa miltä se näyttää kävijän näkökulmasta [eli niin, ettet ole kirjautuneena ylläpitoon]. Joissain tapauksissa tekstieditori ja muut ominaisuudet, jotka ylläpitonäkymässä ovat, saattavat liikutella ulkoasun elementtejä tai vääristää niitä, vaikka kävijät näkisivätkin sivun ihan normaalina. On myös mahdollista, että jokin on mennyt vikaan, kun olet asentanut grafiikoita sivuillesi. Jollei mikään edellä mainituista keinoista auta, kokeile asentaa grafiikat uudelleen. Mikäli sivuillesi ei edelleenkään istu asentamasi ulkoasu, ole yhteydessä minuun niin koetan keksiä, mistä kiikastaa.
Saanko kopioida vain yläkuvan/sisällöt/koodin?
- Ulkoasut tulee sääntöjen mukaisesti kopioida kokonaisina. Tämä tarkoittaa siis käytännössä sitä, ettet voi ottaa vain tiettyä osaa, esimerkiksi ylägrafiikkaa, omille sivuillesi. Ainut poikkeus tässä tapauksessa on koodi, jonka saat kopioida, mutta senkin vain kokonaisena. Et siis voi napata koodista vaikkapa vain navigaatiota, vaan sitoudut sääntöjen mukaisesti kopioimaan koko koodin.
Saanko muokata ulkoasua?
- Et. Et voi lisätä grafiikoihin kuvia, tekstuureita tai filttereitä. Et voi muokata nimeäni pois alagrafiikasta. Mikäli ulkoasussa häiritsee jokin, tai haluat sen vaikkapa mielummin mustavalkoisena, sinulla ei ole ikeutta muokata sitä, vaikka kyseessä olisikin vain pieni muutos, kuten värien manipulointi. Jos haluat välttämättä ulkoasun, mutta siihen myös pienen muutoksen, kuten edellä mainitun mustavalkoisuuden, laita minulle viestiä vieraskirjaan ennen kuin lähdet suin päin muuttamaan ulkoasua. Todennäköisesti keksimme jotain, yleensä suostun siihen, että teen itse muokkauksen ja lähetän ulkoasun sitten uudelleenkäsiteltynä sinulle.
Muokkauksissa ainut asia, jonka ilman erillistä pohdintaa ja keskustelua hyväksyn, on yläkuvaan tekstin lisääminen. On ihan okei lisätä esim. sivujesi nimi tai iskulause ylägrafiikkaan, kunhan muistat lisätä mahdolliset tekijänoikeudet käyttämällesi fontille.
Saanko muokata koodia?
- Et. Et saa vaihtaa värejä, fontteja tai siirtymiä. Koodeissa pätee sama asia kuin ulkoasuissakin: jos haluat jonkin pienen muutoksen, keskustele asiasta kanssani. En halua, että ulkopuolinen osapuoli uudelleenkäsittelee tekeleitäni. Pyrin kuitenkin siihen, että alkuperäiset tekeleeni ovat myös muokattuina 100% omaa käsialaani.
Miten faviconit toimivat? Miten teen ja lisään sellaisen?
- Faviconilla tarkoitetaan sivupalkissa näkyvää pikkukuvaketta, joka on siis sivuston nimen vasemmalla puolella. Obliviaten faviconina toimii ilmansuuntaruusu. Suntuubissa faviconin pystyt vaihtamaan lisäämällä sen "favicon.ico"-nimikkeellä tiedostot -> custom-kansioon, jonka jälkeen favicon muuttuu automaattisesti lisäämäksesi kuvaksi.
Faviconeja on mahdollista joko valmistaa itse taikka kopioida tuhansien vaihtoehtojen valikoimista erilaisilta kopiointisivustoilta. Itse käytän esimerkiksi sivustoa FreeFavicon.com, josta löytyy helposti kategorioittain lajiteltuina tuhansia ja tuhansia erilaisia faviconeja, joita saa kopioida vapaasti ei-kaupalliseen käyttöön merkitsemällä tekijänoikeudet. Voit muuttaa oman kuvasi faviconiksi mm. Dan's Toolsissa ja iki-oman faviconin voit suunnitella ja piirtää osoitteessa favicon.cc. Toki Googlen ihmeellinen maailma tarjoaa vieläkin enemmän mahdollisuuksia, mutta edellä mainitut sivustot ovat sellaisia, joita itse käytän ja jotka olen todennut hyviksi. Niitä on myös helppoa ja nopeaa käyttää.
Muutama perusasia kannattaa pitää mielessä faviconia tehdessäsi tai etsiessäsi. Favicon on todella pieni (16x16 pikseliä), joten HD-laatuisia tai yksityiskohtaisia kuvia et saa näyttämään mitenkään tarkoilta tai järkeviltä. Faviconit ovat myös neliön mallisia, joten muun suhteiset kuvat venyvät outoon malliin. Kannattaa siis rajata kuvasi jo valmiiksi neliön malliseksi ennen kuin muutat sen faviconiksi.
Mitkä kuvista asennetaan tiedostoihin ja mitkä suoraan?
- Ennen ulkoasun asennusta, sinun tulee työtä nopeuttaaksesi asentaa ensitöiksesi tiedostoihin navigaation- ja sisällön taustakuvat sekä koko sivuston taustakuva. Ylä- ja alagrafiikan asennat suoraan tietokoneesi teidostojen joukosta sivuille, joten niitä sinun ei tarvitse erikseen lähteä suntuubin tiedostoihin asentamaan. Ylä- ja alagrafiikan saat vaihdettua näppärästi ylläpitopalkista: Grafiikka -> Lisää grafiikkaa yläpalkkiin -> Vaihtoehto 1: Valitse tiedosto -> Ota käyttöön. Alagrafiikka toimii samalla tavalla, mutta grafiikoiden muokkausvalikosta klikkaatkin "Lisää grafiikkaa alapalkkiin".
Miten lisään koodin? / En saa lisättyä koodia, mitä teen?
- CSS-koodin lisääminen on yksinkertaista. Kopioi koodi haluamasi ulkoasun sivulta kokonaisuudessaan. Mene sivujesi ylläpitopalkista kohtaan grafiikka ->CSS-tyylien lisäys. Tyhjennä mahdollinen vanha koodi klikkaamalla koodikentän alapuolelta "Poista". Tämän jälkeen liitä koodi koodikenttään ja paina "Päivitä". Koodi ei välttämättä näy heti oikein ylläpitopuolelta katseltuna, mutta kävijöille sen tulisi näkyä oikein. Voit päivittää sivunäkymän oikeaksi painamalla "F5", mikäli sivu ei näy oikein edes kävijöille.
Yleinen virhe koodia lisättäessä on se, että unohdetaan vaihtaa ensin yleiset asetukset oikeiksi, jotta koodien lisääminen on mahdollista. Mikäli klikattuasi "grafiikka"-linkkiä ylläpitopalkista valintavaihtoehtoihisi ei tule toisiksi alimmaksi vaihtoehtoa "CSS-tyylien lisäys" mitä todennäköisimmin asetuksesi ovat väärät tai et ole muokannut niitä ohjeistetusti. Toimi seuraavasti: yleiset asetukset -> ulkoasu -> Tarkistetaanko muokattujen tyylitiedostojen olemassaoloa?: Kyllä -> Hyväksy. Tämän jälkeen grafiikka-linkin taakaa tulisi löytyä edellä mainittu kohta, josta pääset muokkaamaan CSS-koodia.
- (Css-)Koodaus -
Mikä on CSS-koodi? Miten se toimii?
- CSS-koodi on eräänlainen koodityyppi, jolla pystytään muokkaamaan nettisivustojen visuaalista puolta, kuten otsikkoja, kohteiden värejä, siirtymiä yms. CSS-koodi ikään kuin pakottaa sivun toimimaan tietyllä tavalla. CSS-koodi on käytännössä pitkä litania erilaisia tekstipätkiä, merkkejä ja numerosarjoja, jotka palvelin tulkitsee mm. värien muutoksina. Näin sivustoa pystyy personalisoimaan ja tekemään näyttävämmäksi. Kaikki sivupohjat eivät kuitenkaan tue CSS-koodeja, vaan esimerkiksi HTML-koodeja, joka kertoo siitä, kuinka monia erilaisia koodaustyyppejä löytyy. Itseltäni löytyy kokemusta CSS-koodien lisäksi mm. HTML- ja JavaScript-koodityypeistä, joten voin kokemuksella sanoa, että CSS-koodit ovat ylivoimaisesti helpoin koodityyppi, josta esimerkiksi koodaamisesta kiinnostuneen aloittelijan on hyvä lähteä liikkeelle.
Miten (CSS-)koodataan?
- CSS-koodaaminen on käytännössä sanojen, merkkien ja numeroyhdistelmien kirjoittamista peräkkäin visuaalisesti miellyttävän ilmeen saavuttamiseksi. Jokaiselle muutokselle, kuten väreille, varjostuksille ja fonteille on jokaiselle omat koodipätkänsä, jotka kannattaa käytännössä opetella ulkoa, jotta työskentely olisi nopeaa ja sulavaa.
Jokaisen elementin muokkaamiseen on oma yhdistelmänsä, esim. otsikkoa 1 muokataan koodipätkällä h1. Jokaisen elementin koodin perään lisätään {-merkki, jonka jälkeen aletaan latoa koodipätkiä. Itse tykkään laittaa jokaisen pätkän omalle rivilleen koodin selkeyttämiseksi. Sisältöä muokkaavien koodipätkien tunnuksen (esim. värin on color) jälkeen lisätään kaksoispisteet (esim. color:), jonka jälkeen voidaan tunkea perään koodipätkää muokkaavan ominaisuuden sisältö (esim. värien kohdalla kolme- tai kuusinumeroinen värikoodi #-merkin jälkeen). Tämän koodipätkän jälkeen tulee laittaa ;-merkki, jotta sivu tunnistaa esim. värien muokkaamisen loppuvan tähän kohtaan. Esimerkkeinä voit vaihtaa siis otsikko 1'sen värin valkoiseksi koodipätkällä h1[ color: #fff;}.
Tämän laajemmin en osaa koodaamista selittää, mutta voit tutkiskella kopioitavien ulkoasujen koodeja ja niiden osia. Kokeilemalla rohkeasti oppii parhaiten, joten suosittelen luomaan harjoittelua varten kokeiluillesi oman suljetun sivuston. Lisäksi Googlettamalla löytyy läjäpäin oivallisia opetussivustoja, joiden kanssa olen itsekkin harjoitellut joten suosittelen etsimään oppaita ajan kanssa, jotta löydät itsellesi sopivan ja oikean kielisen sivuston harjoitteluun. Suurin tarjonta on toki englanniksi, mutta tietääkseni ainakin muutama vuosi takaperin oli olemassa muutamia suomenkielisiäkin sivustoja koodausopettajiksi. Tässä nyt vielä lista koodipätkistä, joita itse käytän lähes kaikissa kopioitavissa ulkoasuissa:
| h1{ |
otsikko 1 |
| h2{ |
otsikko 2 |
| h3{ |
otsikko 3 |
| b, strong{ |
lihavoitu |
| i, em[ |
kursivoitu |
| u, underline{ |
alleviivattu |
| s, strike{ |
yliviivattu |
| a:link, a:visited{ |
koskematon linkki |
| a:hover{ |
linkki kohdistettuna |
| .paalinkit, paalinkit:visited{ |
koskematon päälinkki |
| .paalinkit:hover{ |
päälinkki kohdistettuna |
| .paalinkitactive, paalinkitactive:visited{ |
aktiivinen päälinkki |
| .paalinkitactive:hover{ |
aktiivinen ja kohdistettu päälinkki |
| .tekstihtml{ |
tekstialue |
| ::selection{ ja ::moz-selcetion{ |
maalaus |
| |
|
| font-family: fontin nimi; |
elementin fontti |
| color: #värikoodi; |
elementin väri |
| text-shadow: 0px 0px 4px #värikoodi; |
tekstin varjostus |
| text-align: center/left/right; |
tekstin kohdistus |
| font-size: 20px; |
fontin koko |
| margin-bottom: 1px; |
alamarginaali |
| border-radius: 5px; |
reunan pyöristys |
| height: 20px; |
korkeus |
| weight: 150px; |
leveys |
| opacity: 0.7; |
läpinäkyvyys (1=normaali, 0=näkymätön) |
| border: 2px solid/dashed #värikoodi |
reuna |
| box-shadow: 0px 0px 4px #värikoodi |
laatikon varjostus |
| background-color: #värikoodi: |
taustaväri |
| font-style: normal/italic/bold; |
tekstin tyyppi |
| text-decoration: normal/blink |
tekstin koristelu (normaali/vilkkuva) |
| letter-spacing: 1px; |
kirjainten väli pikseleinä |
- Muuta -
Voitko opettaa minua tekemään ulkoasuja / koodaamaan / muokkaamaan kuvia?
- En todennäköisesti ehdi sen enempää opettamaan, kuin mitä olen tälle sivulle ohjeita koonnut, niin valitettavaa kuin se onkin. Suosittelen olemaan oma-aloitteinen ja kokeilemaan rohkeasti itseoppimista: niinhän minäkin olen oppinut.
Linkinvaihto? / Affeus?
- Mikä ettei! Linkinvaihtolaisiksi hyväksyn kaikenlaisia sivuja, joiden maine ja copyrightit ovat mallillaan. Lisään sivujesi linkin/buttonin linkkareille osoitetulle paikalle niin nopeasti kuin mahdollista. Mikäli sivusi vaihtavat osoitetta tai poistuvat toiminnasta, otan automaattisesti buttonisi tai linkkisi pois, ellet ilmoita asiasta erikseen. Linkinvaihdossa sitoudut laittamaan myös Obliviaten linkin, mieluiten buttonin kanssa, omille sivuillesi. Buttonit löydät "Muuta"-sivulta.
Affeja otan tällä hetkellä kolme kappaletta ja vain ja ainoastaan ulkoasujen/koodien kopiointisivuja. Affit saavat sivujensa linkin tai buttonin etusivulle ja vastaavasti sinun tulisi laittaa Obliviaten linkki, mieluiten buttonin kanssa, omille sivuillesi mahdollisimman näkyvällepaikalle.
Vaihdan mielelläni myös "Mainospaikkoja" ulkoasusivujen kanssa. Käytännössä tämä tarkoittaa sitä, että laitan linkkisi navigaatioon/muulle paikalle, jossa se on näkyvillä jokaisella sivulla ja vastaavasti laitat Obliviaten linkin näkyville niin, että se näkyy jokaisella sivulla.
Mikäli olet halukas vaihtamaan linkkejä jollain yllä mainituista tavoista, heitä ihmeessä viestiä vieraskirjaan!
