HTML-opas pääsivu HTML-tagit:*Sivu *Teksti *Kuvat *linkit *Listat *Lomakkeet *Taulukot * Kehykset * Marquee *Muut *Värikoodit *Sivun suunnittelu

On tietenkin olemassa lukaisa joukko ihmisiä, jotka tietävät miltä hyvä sivu näyttää. Tärkeintä on kuitenkin kaikille se, että kun harkitset WWW-sivujen tekoa niin...
A. Sammuta tietokone
B. Suunnittele paperilla kaikki mahdolliset asiat valmiiksi, miten sivuilla liikutan, mitä tekstiä ja kuvia tarvitset, , minkälaisen ulkoasun haluat sivuille.
C. Aloita työskentely editorilla ja muilla sivun materiaalin tuottamiseen tarvittavilla ohjelmilla.

1. Määritä tavoitteet:

• Miksi olet tekemässä www-sivuja?
• Mihin tarkoitukseen olet niitä tekemässä?
• Onko sivuilla todella joku tarkoitus vai onko ne palvelimella huvin vuoksi?

2. Selvitä käyttäjien tarpeet

• Kuka sivujasi käyttää tai kenet haluasit käyttävän sivujasi?
• Miksi he lukevat sivujasi?
• Kuinka usein käyttäjät käyvät sivuillasi?
• Onko sinulla valmis yleisö vai pitääkö sinun vangita se?
• Ovatko satunnaiset kävijät tärkeitä?

3. Määrittele onnistuminen

• Kuinka monta vierailijaa sivuilla käy/viikko tai kuukausi?
• Mitä he tekevät sivuillasi?
• Kuinka kauan he vierailevat sivuillasi?
• Kuinka usein he tulevat takaisin?
• Raakamateriaali: käyttötilastot ja käyntiluvut
• Sisäiset vaikutukset paljonko vähenee soittelu tekniseen tukee tms. ja lisääntyykö esimerkiksi kansainväliset kontaktit

.4. Suunnittele rakenne

• Mistä pitää päästä minnekin?
• Onko tarkoitus pakottaa vierailijat kulkemaan tiettyä reittiä
• Hyvä suunnitelma vähentää itse tekovaiheen ongelmia paljon.

5. Toteuta: valmista kuvat, tekstit jne.....

6. Seuraa tuloksia ja huomioi palaute. Seuraa käyntitilastoja, sähköpostia - vastaa saamiisi viesteihin

7. Päivitä, päivitä päivitä............

Sivun suunnittelu osakohdittain

Tasapainota
Selaimilla on tapana sijoittaa kuvat ja teksti lähelle vasenta marginaalia. Tuloksena vasemmalle painottuneita sivuja. Ratkaise ongelma välttämällä peräkkäisiä lyhyitä rivejä. Käytä mielummin leveitä kuin korkeita kuvia. Käytä palkkeja, jotka osoittavat vasemmalle. Palkki, jonka väri häipyy oikealle päin mentäessä suuntaa lukijan mielenkiinnon vasemmalle.

Jaa sivu pystysuunnassa osiin.
Jaa sivu esim. vaakaviivoilla osiin. Omat osa-alueet navigointi painikkeille/sanoille, esittely osalle, varsinaiselle sisällölle, osoitelohkolle ja alareunan nagointipainikkeille/sanoille.

Vaakaviivat
Hyvä tapa rytmittää sivuja, mutta muista kohtuus - ei jokaisen rivin tai kappaleen jälkeen vaakaviivaa.

Palkit
Vaihtoehto vaakaviivoille. Tee kuvankäsittelyohjelmalla värillinen/kuvapalkki. Vältä korkeita palkkeja joiden latautuminen kestää kauan. Käytä samaa palkkia, jos mahdollista - osa selaimista tallentaa käytetyn kuvan muistiin, joten sen uudelleen lataaminen ei kestä kauan. Muista niitä, jotka eivät näe kuvia antamalla kuvalle ALT-komentoon esim.+- merkkejä (<img src=”kuva.gif” ALT=”+++++++++++++++++++++++++++”>)

Katkot
Tyhjät rivit tekstien välillä antavat tekstille ilmavuutta

Kuvat
Kuvien koko ei mielummin saisi ylittää 30 kilotavua. Jos mahdollista käytä samoja kuvia yhdellä sivulla. Kuvan uudelleen lataus nopeaa. Käytä maksimissaan kolme kuvaa yhdellä sivulla.

Tekstin ja kuvien sijoittaminen taulukkoon
Sijoittamalla tekstiä ja kuvia taulukkoon voit tehdä sivuista vaikka sanomalehden näköisiä.

Sivujen otsikot
Otsikoiden tulee kertoa ytimekkäästi mistä sivulla on kyse. Tarpeen mukaan tee tarvittavat väliotsikot.Voit käyttää otsikoissa kuvaa tai tehdä koko otsikon kuvankäsittelyohjelmassa.

Taustakuvat
Jos laitat taustalle grafiikkaa, valokuvia, niin huolehdi siitä ,että teksti jää luettavaksi. Jos käytät palkkia taustakuvana niin palkin leveys tulee olla vähintään 800 pikseliä leveä. Korkeudeksi riittää 1 pikseli. Täten saat taustakuvan latautumaan nopeammin.

	HTML-opas pääsivu HTML-tagit:*Sivu *Teksti *Kuvat *linkit *Listat *Lomakkeet *Taulukot * Kehykset * Marquee *Muut *Värikoodit *Sivun suunnittelu