Sommittelumallit - WWW-julkaiseminen

• Palstat
• Blogi
• Laatikot

WWW-julkaiseminen -kurssin harjoitustyön lohkojen sommittelumallit. Tarkemman ulkoasun (värit, lohkojen leveydet ja korkeudet jne.) voi päättää itse.

Huomioita kaikkiin malleihin:

• Mallin ulkoasu ei tarkoita, että sivun pitää koko ajan näyttää täsmälleen samalta. Sivun pituus ja selainikkunan koko pitää muistaa ottaa huomioon.
• Kuvissa kaikilla lohkoilla on taustavärit. Taustavärejä ei ole kuitenkaan pakko käyttää kaikkiin lohkoihin, vaan lohkoja voi erottaa toisistaan muillakin keinoilla kuten reunaviivoilla.
• Kaikissa malleissa vähintäänkin sisältöosan pitää skaalautua selainikkunan kokoa muutettaessa. Myös muiden lohkojen pitää skaalautua, mutta niissä riittää pelkästään selaimen fontin koon mukaan skaalautuminen (toki nekin saavat skaalautua myös selaimen ikkunan leveyden mukaan).
• Taulukoilla tai kehyksillä taittamista ei hyväksytä missään malleissa.

Palstat

Huomioita:

• Kaikkia reunalohkoja ei saa kiinnittää (position: fixed;) näytölle kiinteästi viemään ylimääräistä tilaa varsinaiselta sisällöltä. Esimerkiksi ylätunniste saa rullata pois näkyvistä ja alatunnisteen tarvitsee näkyä vasta sisällön jälkeen. Jomman kumman lohkon (ylätunniste tai alatunniste) voi kuitenkin halutessaan kiinnittää näyttöön. Myöskään molempien laitojen palstoja ei pidä kiinnittää näyttöön, vaan kannattaa kiinnittää ainoastaan tärkeämpi palsta. Näyttöön kiinnitystä ei ole toki pakko käyttää mihinkään lohkoon.
• Kaikkien reunalohkojen ei välttämättä tarvitse olla käytössä kaikilla sivuilla. Esimerkiksi laitalohkoista voi näyttää etusivulla molemmat, mutta muilla sivuilla vain toisen. Tee kuitenkin harjoitustyön suunnitelmasivu sen sivun mukaan, jossa näkyy kaikki lohkot.
• Reunalohkojen taustavärien ei välttämättä tarvitse jatkua kuvan mukaisesti koko sivun alueelle.

Blogi

Huomioita:

• Sekä ylä- että alatunnistetta ei saa kiinnittää (position: fixed;) näyttöön. Jomman kumman lohkon (ylätunniste tai alatunniste) voi kuitenkin halutessaan kiinnittää näyttöön. Näyttöön kiinnitystä ei ole toki pakko käyttää kumpaankaan lohkoon.
• Sisältölohkojen määrä saa vaihdella eri sivuilla, mutta vähintäänkin yhdellä sivulla niitä tulisi olla vähintään kuvassa näkyvä kolme kappaletta. Tee harjoitustyön suunnitelmasivu sen sivun mukaan, jossa näkyy vähintään edellä mainitut kolme lohkoa.
• Eri sisältölohkot ja navigointilohkot tulee erottua sivulta sekä rakenteellisesti (omat div-lohkot) että ulkoasullisesti (reunaviivoja, taustavärejä, marginaaleja jne.).
• Reunalohkojen taustavärien ei välttämättä tarvitse jatkua kuvan mukaisesti koko sivun alueelle.

Laatikot

Huomioita:

• Sekä ylä- että alatunnistetta ei saa kiinnittää (position: fixed;) näyttöön. Jomman kumman lohkon (ylätunniste tai alatunniste) voi kuitenkin halutessaan kiinnittää näyttöön. Näyttöön kiinnitystä ei ole toki pakko käyttää kumpaankaan lohkoon.
• Sisältölaatikoiden määrä saa vaihdella eri sivuilla, mutta vähintäänkin yhdellä sivulla niitä tulisi olla sekä päällekkäisiä että rinnakkaisia (eli vähintäänkin kolme eri "laatikkoa"). Tee harjoitustyön suunnitelmasivu sen sivun mukaan, jossa on vähintään edellä mainittuja päällekkäisiä ja rinnakkaisia "laatikoita".
• Eri sisältölaatikot tulee erottua sivulta sekä rakenteellisesti (omat div-lohkot) että ulkoasullisesti (reunaviivoja, taustavärejä, marginaaleja jne.).
• Reunalohkojen taustavärien ei välttämättä tarvitse jatkua kuvan mukaisesti koko sivun alueelle.