Tänne voi laitella hyviä vinkkejä ulkoasun tekoon ja myös kysymyksiä saa esittää.
Kerään tähän ekaan viestiin kaikki parhaat vinkit ja usein kysytyt kysymykset.


Muokkaus:
Oma Sivu --> Ulkoasun muokkaus --> Kehittynyt CSS-muokkaus --> Luo uusi CSS-skini
Sieltä vaan muokkailemaan. Kannattaa aina välillä tallennella kopioimalla tekstin vaikka notepadiin. Myös jos vaihtaa esim. jotain värikoodia ja ei tiedä mihin se vaikuttaa kanattaa kokeilla esim. punaista (#ff0000), jonka jälkeen esikatselemalla näkee muutokset helposti kohdassa, jossa näkyy punaista. Parhaiten selviää mokailematta, kun tekee asian kerrallaan ja esikatselee.


Käskyjä ym: (ilman hipsukoita)
" background-image: url('http://kuvake.net/skins/basic/images/bg-xmas.gif'); "
Tässä on siis kyseessä uloin tausta. Taustauvan voi siis vaihtaa, kun laittaa noiden ' ' merkkien väliin sen osoitteen, jossa kuva sijaitsee. Kannattaa käyttää sellaisia kuvia, jotka näyttävät mahdollisimman selkeiltä, varsinkin, jos kuvaa toistetaan. Myös muita kuvakohtia voi muokata.

" background-repeat: repeat; "
Tässä kuvaa siis toistetaan vieri-viereen ja allekkain, eli koko alue täyttyy näillä kuvilla. Jos haluaa kuvan näkyvän vain kerran, esim. jos on yksi iso kuva, niin kannattaa ottaa muokkaukseta tuo "background-repeat: repeat;" pois.

" background-position: top center; "
Tässä kuva sijoitetaan ylös keskelle. Voit kokeilla myös muita vaihtoehtoja esim. " background-position: bottom left; "

" background-color: #f0f0f0; " ja " color: #ffffff "
Taustan väri ja tekstin tai muun kohteen väri. Värin saa muutettua värikoodilla, joita löytyy esim. täältä
http://www.w3schools.com/html/html_colors.asp

" #photocontainer img { border: 1px solid #000; } "
Omaan kuvaan kehys.

" .tblcomments .p img { border: 1px solid #000; } "
Kehys pikkukuviin.

" .site {margin-bottom: 0px; } "
Tällä käskyllä saa määritettyä footer/alatietojen alle jäävän osan suuruuden. Esimerkissä ei ole alaosaa ollenkaan altietojen jälkeen.


CSS linkkejä:
http://netti.nic.fi/~tapio1/Opetus/sivukarttaMain.php
http://appro.mit.jyu.fi/doc/css/
http://www.2kmediat.com/css/
http://www.w3schools.com/css/css_intro.asp
(jos omistat vähääkään englannintaitoa, niin kannattaa katsastaa tämä sivu)


Värikoodeja:
http://www.w3schools.com/html/html_colors.asp
http://www.colorschemer.com/online.html


Taustoja/tekstuureja:
http://www.grsites.com/textures/



Wespa muokkasi viestiä 15:20 12.01.2007

Täysin samaa mieltä. Isot puolensivun räikeät taustakuvat, jotka toistuvat näyttävät todella rumilta.

Oma Sivu --> Ulkoasun muokkaus --> Kehittynyt CSS-muokkaus --> Luo uusi CSS-skini

Sieltä vaan muokkailemaan. Ensiksi kannattaa katsoa ne kohdat, joissa on joki kuva esim. " background-image: url('http://kuvake.net/skins/basic/images/bg-xmas.gif'); " joka on siis tuo uloin tausta. Kaikki kuvat voi siis vaihtaa, kun laittaa noiden ' ' merkkien väliin sen osoitteen, jossa kuva sijaitsee. Kannattaa käyttää sellaisia kuvia, jotka näyttävät mahdollisimman selkeiltä, varsinkin, jos kuvaa toistetaan.

" background-repeat: repeat; "
Tässä kuvaa siis toistetaan vieri-viereen ja allekkain, eli koko alue täyttyy näillä kuvilla. Jos haluaa kuvan näkyvän vain kerran, esim. jos on yksi iso kuva, niin kannattaa ottaa muokkaukseta tuo "background-repeat: repeat;" pois.

" background-position: top center; "
Tässä kuva sijoitetaan ylös keskelle. Voit kokeilla myös muita vaihtoehtoja esim. " background-position: bottom left; "

" background-color: #f0f0f0; " ja " color: #ffffff "
Taustan väri ja tekstin tai muun kohteen väri. Värin saa muutettua värikoodilla, joita löytyy esim. täältä
http://www.w3schools.com/html/html_colors.asp

Tässä ei ole vielä läheskään kaikkia. Kertokaa lisää...

Jos lontoonkieli ei ole ongelma, tällä pääsee hyvin alkuun:
http://www.w3schools.com/css/css_intro.asp

Tietääkö kukaan sellaista ohjelmaa, jolla voisi tarkastella nettisivuja eri resoluutioilla ilman, että näytön resoluutio vaihtuisi, sillä harmittaa, jos laitan pienemmän resoluution päälle, niin kuvakkeet menevät työpöydällä sekasin? Joku esikatseluohjelma siis olisi tarpeen, millä olisi hyvä tarkistella omia ulkoasumodauksia.

Sitten isot kuvat hidastaa sivun latautumista. Riippuu tosin onko se ongelmana tai tuleeko olemaan.

Valojuova muokkasi viestiä 00:38 26.12.2006
Suhteellisen hyvä apu on kattoa sivun html koodia missä tiettyä tyyliä käytetään (class="...") ja sen perusteella tehdä muutoksia. Kaikkia ei ole valmiiksi kommentoitu mistä mitäkin tapahtuu. Kokeilemallakin selviää. Html koodin ymmärtämisestä on siis hyötyä.

Se on tämä:
.header .logobar { overflow: hidden; width:100%; width:980px; background-color: #1d2026; }

Opetelkaa HTMLää sen verran, et tajuutte mitä etitte modauksesta, sitten vasta miettimään mitä muokata. Suurin osa ei osaa lukea HTML:ää jonka huomaa siitä, että nuo "Etusivu" jne-kohdat jää normaaleiksi joten opetelkaas nekin muokaamaan =)

Background: transparent;

Ylläoleva toimii kaikkiin taustakuvakohtiin ja tekee niistä läpinäkyvän. Jos haluaa edellistä 'kuvaa' pitää vähän esillä, ni IE:llä ainakin toimiva opacity:t toimii

Kattokaa www.w3schools.com <-- löytyy yllättäväst hyödyllistä tietoa

Tuohon oman kuvan kehystämiseen olenkin etsinyt toimintoa, mutta ei ole tärpännyt. Kiitokset vinkistä.

Mä nyt vinisen tätä joka paikkaan, mut vatewa. Jos joku keksii, miten voi siirtää noita vasemmalla olevia bokseja ILMAN, että kuva tai kuvan boksi siirtyy mihinkään, olisin kiitollinen. Itse en sitä keksinyt vaikka kokeilin sitten melkein kaikkea jo :/

Itellä on dreamweaverissa auki css-tiedosto ja sitten profiili, johon laitan linkin css-tiedostoon. Joten aina tallennuksen jälkeen näkee miltä muutos näyttää. Toki, se ei näytä kaikkea, joten rakas F12-näppäin auttaa, ja näkee miltä tuotos näyttää selaimessa. Ite testaan aika lähellä ainoastaan firefoxilla.

Ainaki itelleni, tämä tapa on helppoa.
Niin ja Photoshop tietenki, josta otan värejä.

Tuo CSSTint ei oikein kolahda itelleni. Värit voi vaihtaa kyl mut lopputulos ei taas taida tuolla näkyä.

Niin ja aloittelijoiden kannattaa laittaa kommentit sinne css-tiedostoon, jotta oppii mitä kohtaa milläki voi muokata.

Eli kommentti:

/* Tässä välissä on kommentti */

Poke muokkasi viestiä 18:43 20.01.2007

Juu, et ole ainoa. :)
FireBug löytyy itteltäni kanssa.

Näinhän se on, että mitään julkkisten kuvia tms. ei kannata taustalle laittaa ja yleensä pitäisi aina kysyä lupa kuvan/tekstuurin tms. omistajalta/tekijältä, ellei tiedä, että se on vapaasti käytettävissä oleva. Tosin on aika vaikeaa nostaa mitään oikeusjuttuja vaikka jotain kuvaa käyttäisi luvatta, sillä raha ei liiku, mutta jos taas vaikka alkaisi myymään muiden tekemiä kuvia tms; niin sitten asia olisi eri. Ja aika nopeasti laittomasti käytössä oleva materiaali häviääkin, jos esim. ylläpidolle ilmoittaa. Eipähän tainnut olla Britneynkään kuva raton profiilin taustakuvana kauaa, kun ylläpito poisti kyseisen modauksen, tosin ei itse Britneyn pyynnöstä.

Sellasta kyselisin, että tuossa kommenttiboxin yläosassa (siinä palkissa) lukee se "Kommentit", niin miten sen saa pois?

Pitäisi saada se pois, koska olen muokannut sen palkin niin, että siinä lukee "graafisesti" erilaisella fontilla se "kommentit" ja nyt se normaalifontti on ikävästi sen päällä.

Dodiin. Kiitos nyt sain toimimaan.

Joo nyt meni hermo.. Miten saan erikseen vaihdettua ton kommentit palkin >_>
Kaikki muu onnistunutkin tähän asti täydellisesti..

Toi enää niin olisi valmis! ;)

Kiitos jos joku osaisi vähän auttaa :)

Jees! Juuri se. Suuri kiitos sinulle! :)

Lisää kysyttävää…

Eli miten voin vaihtaa tuon Kuvake.net logon tuolta ylhäältä?
Ja Miten voin vaihtaa noiden Muokkaa kuvaa ja Muokkaa ulkoasua jne. siinä edessä olevaa sitä pientä kuvaketta?