Suntuubi-palvelussa käytetään evästeitä. Palvelua käyttämällä hyväksyt evästeiden käytön. Lue lisää. OK

Tässä kerrotaan, kuinka yksinkertaisten toimenpiteiden ja suunnittelun avulla Suntuubi- sivusi muuttaa ulkonäköä sellaiseksi, kun sinä haluat.

1. oppitunti | 2. oppitunti | 3. oppitunti | 4. oppitunti


1. oppitunti

Onneksi olkoon, olet siis rekisteröinyt uuden sivuston Suntuubi.comiin. Sivu näyttää tältä (esimerkkisivun osoite http://oppitunti.suntuubi.com):


alkusivu


En aio puuttua ollenkaan sivujen sisältöön. Sanomattakin on selvää, että kannattaa nämä asiat miettiä mahdollisimman pitkälle ennen kuin ryhtyy tekemään mitään grafiikkaa. Sitä paitsi grafiikka yleensä riippuu hyvin paljon itse sisällöstä, joten suunnittelu pitäisi olla pitkällä ennen toteuttamista.

Koska tulemme tekemään mahdollisimman täydellisen makeoverin, kaikki graafiset elementit uusitaan.

Suuri osa suntuubissa pyörivistä sivuista ovat omistettu lemmikkeille, joten esimerkkinä käytetty sivukin muokataan lemmikkikoirasta kertovaksi sivustoksi.

Aloitamme taustaväristä ja yläpalkin kuvasta. Taustaväriä pääsemme muuttaamaan klikkaamalla "sivujesi ylläpito"-osiossa linkkiä "yleiset asetukset" ja sen jälkeen "ulkoasu".



Vieritään sivua alas ja muutetaan varsinaista sisältö-ossutta ympäröivän tilan värin harmaaksi, jonka koodi on 777777

Alkuperäisen sivun leveys (vihreällä merkattu) voidaan säilyttää, mutta jos sen muuttaa, niin ylä-ja alapalkin grafiikat säädetään yhtä leveiksi, eli tapauksessamme 780 pikselia.


On tärkeää ymmärtää, mistä elementeista sivu koostuu, ja kuinka nämä sovitetaan yhteen. Muokattavina ovat ylä-ja alapalkki, navigaatiopalkki, sekä sisältöikkuna. Koesivumme leveys 780 pikselia sisältää navigaatiopalkin ja sisältöikkunan. Olen määritellyt navigaatiopalkin leveydeksi 220 pikselia oletuksena olleen 22 prosentin sijaan, jolloin sisällön osuudeksi jäi 780-220=560 pikseliä. Näin siksi, että tulemme visuaalisesti erottamaan navigaatiotilan varsinaisesta sisällöstä.


2. oppitunti

Koska kaikki websivun objektit ovat neliskulmaisia, kaikki pyöreät tai pyöristetyt muodot sekä liukuvärit, varjot yms. on piirrettävä käsin ja sovitettava yhteen. Suntuubista löytyy lukuisia hyviä esimerkkejä siitä, kuinka tämä toimii käytännössä, esimerkiksi aina yhtä suosittu Viivi Avellanin sivusto, tai vaikkapa Hylätyt Lapset ry. Katsotaan, mistä osista jälkimmäinen on kasattu:



Punaisella värillä peitetty alue on graafinen yläpalkki. Keltainen alue näyttää, mitä kuvassa näkyvää osaa on käytetty navigaation taustakuvana. Vastaavasti vihreän alla on sisällön taustakuva (molemmat taustakuvat ovat toistuvia y-akselilla, eli pystysuunnassa). Vaaleanpunaisella värillä on merkattu navigaatioelementtien taustakuvat, jotka toistuvat myös y-akselilla niin monta kertaa, kun mitä itse navigointilinkkejakin on. Huomaa, että yläpalkin grafiikka sisältää myös navigaation ja sisällön alueisiin liittyvät elementit. Ne on piirretty yläpalkkiin, koska pyöreitä kulmia sekä varjoja ei muuten voida sivulle muodostaa. Muiden elementtien vaaka- ja pystykoko on vaan valittu niin, että kaikki yhdessä ne liittyy toisiinsa saumattomasti ja luovat illuusion erikokoisista varjostetuista kentistä.

Esimerkkikuvaan ei mahtunut alagrafiikkapalkki, joka myös sisältää navigaatio-ja sisältökenttien pyöristetyt muodot.


3. oppitunti

Teemme hieman erilaisen sivun, joka noudattaa kuitenkin samaa periaatetta.

Aloitamme tekemällä ylä- ja alagrafiikkapalkit. Halutessa voitte kysyä tarkempia ohjeita niiden luomiseen, muuten esitän ne vain pääpiirteisesti. Kuvankäsittelyohjelmalla luodaan uusi kuva, jonka leveys on 780 pikselia. Korkeus voi olla mikä tahansa ja sitä voi muokata myöhemmin, kun elementtien ja kerrosten sommittelu on takana. Peitevärinä käytämme samaa harmaan värin sävyä, jonka koodi #777777. Kaikki elementit sijoitetaan tarpeeksi kauas reunoista, jotta grafiikkapalkki liittyy saumattomasti sivun taustaväriin.

Yläpalkin alareunaan sijoitetaan navigaation ja sisällön yläreunat pyöreine kulmineen. Nämä nätyvät sen verran, että kulman pyöreä osa loppuu. suoran niiden alla alkavat navi- ja sisältökenttien suorat "seinät". Sekä navigoinnin että sisältökentän osalta nämä pikkukuvat tehdään erikseen ja liitetään sitten varsinaisen grafiikkapalkin alareunaan.



Samat toimenpiteet toistetaan alapalkin kanssa, mutta tietysti, navi- ja sisältöpalat ovat peilikuvana ylösalaisin.



Itse asiassa, helpoin tapa luoda täydellisesti toisiinsa sopivat yla-ja alagrafiikat, on ensin tehdä yhtenäinen kuva, joka sitten leikataan sopiviksi osiksi ja tallennetaan eri nimellä.

Tässä vaiheessa navigoinnin taustaväriksi muutetaan valkoinen väri, jonka html -koodi on #ffffff. Nyt sivy näyttää jo melko hyvältä, mutta navigoinnin ja sisällön toisistaan erotteleva pystysuora viiv puuttuu. Tämä korjataan sisällön taustakuvan avulla. Tapauksessamme sen tekeminen on helppoa. Luodaan uusi kuva, jonka koko on 560 * 2 pikselia. liuskan taustaväri on valkoinen #ffffff, ja sen vasen reuna värjätään harmaaksi (#777777) viiden pikselin matkalta. Tulos näyttää tältä:



On tärkeää muistaa kertoa sivumoottorille, että kuva esitetään toistuvana pystysuunnassa, muuten näet sivullasi saman valkoisen viivan kun oheisessa esimerkissäkin.

Enää tarvitsee vain määritellä, mitä kuvaa näytetään missäkin ja ulkoasu on valmis!


4. oppitunti

Navinäppäimet ovat periaatteessa myös suorakulmioita, jotka on laitettu toistensa päälle. Näiden suorakulmioiden sisälle kuitenkin voidaan piirtää minkä näköinen tahansa kuva, jonka sisälle moottori lisää navigointilinkin. Koesivullamme käytetty näppäin näyttää tältä:



Jos navigoinnin taustavärinä olisi ollut jokin muu väri, kun valkoinen, nappäimen ympärille jäävät valkoiset kulmat olisi pitänyt värittää samalla värillä.

Navigoinnin leveydeksi olimme määränneet 220 pikseliä. Tämä leveys sisältää navigointinäppäimen taustakuvan, sekä marginaalit. Koska 220 pikseliä ei voi navigoinnin osalta ylittyä, mikäli taustakuvan leveys yhteenlaskettuna marginaalien kanssa ylittää kuitenkin 220 px, marginaalit piirretään kuvan päälle, eli riippuen siitä, mikä marginaali on kyseessä, kuvan vasemmasta tai oikeasta reunasta ikään kuin leikataan pala, mikä ei näytä hyvältä. Siksi tämä on tärkeää ottaa huomioon jo silloin, kun taustakuva piirretään (ja kun sivun ulkoasuasetukset määritellään). Myös navigointielementin korkeus täytyy muuttaa taustakuvan korkeutta vastaavaksi.


Palaa alkuunLisää aihe / kysely foorumiin


©2017 Pakopaikkani - suntuubi.com