Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Kiinteälevyinen, ASCII-pohjainen Vain tekstisivuja, 100% leveys Muutamia kuvia, paljon tekstiä, 100% leveys Enemmän kuvia, yhä paljon tekstiä, joitakin leveysrajoitteita

Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Paljon kuvia, paljon taulukoita, paljon leveys/korkeusrajoitteita Välkkyviä juttuja lentämässä joka puolella, paljon leveys/korkeusrajoitteita Vähemmän välkkyviä juttuja, yhä paljon taulukoita, paljon kiinteitä leveyksiä Paljon kiinteitä leveyksiä, vähemmän taulukoita, hieman CSS-koodia

Web-ulkoasun kehitys Web-ulkoasun visuaalinen evoluutio 1990-luvulta nykypäivään: Paljon kiinteitä leveyksiä, CSS-pohjainen

100% sivun leveys Tehtävä 1: Mitä ongelmia voi aiheutua jos sivun leveyttä kasvatetaan?

100% sivun leveys Joustava ulkoasu, englanniksi Fluid layout Flexible layout Liquid layout

100% sivun leveys Joustava ulkoasu, englanniksi Fluid layout Flexible layout Liquid layout

Tapaustutkimus http://tuscany.cssmastery.com/ Hyödyntää joustavaa ulkoasua.

Tapaustutkimus Dokumentin rakenne: Body Container Masthead Content Sidebar Footer

body container sidebar content masthead footer

Body ja container Bodylle ei erityisvaatimuksia joustavan ulkoasun kannalta. Tarvitaan valkoiseen taustaan luomaan vaikutelma ulkoasun ympärillä olevasta valkoisesta reunuksesta. Body { margin: 10px; background: #FFF; }

Body ja container Container sisältää muun paitsi alatunnisteen. Tarvitaan ainoastaan sivun alaosan taustan kontrollointiin. <div id=”container”></div> Huom! Ei kuten kiinteässä leveydessä: #container { margin: 0 auto; width: 760px; }

Yläosa Masthead = tietotoimituslaatikko Sisältää logon, navigaation ja muita sivunlevyisiä elementtejä. <div id=”container”> <div id=”masthead”></div> </div> #masthead { position: relative; background: #F7F7F4 url(../img/bg_repeat.gif) repeat-x; height: 15.4em; } Miksi tarvitaan, miksi ei height: 246px; mitä ongelmia voi aiheutua?

Faux-palstat CSS:n lohkoelementit venyvät pystysuunnassa vain niin pitkälle kuin niiden sisältö ulottuu. Jos #content-palstan sisältö on pidempi kuin #sidebar-palstan sisältö, niin #content palstan tausta jatkuisi pidemmälle kuin #sidebar-palstan.

Faux-palstat Tuscany Luxus Resorts -esimerkissä asia on ratkaistu käyttämällä faux-palstoja. Tehtävä 2: Tutki millainen tämä ratkaisu on?

Joustavan ulkoasun ongelmien ratkaiseminen Liian suuri leveys voi aiheuttaa liian pitkiä rivejä joita on hankalaa lukea. Liian kapea leveys voi aiheuttaa epämieluisia rivinvaihtoja ja rivien päällekkäin menemistä.

Joustavan ulkoasun ongelmien ratkaiseminen Turvaudutaan min-width ja max-width määreisiin: #container, #footer { min-width: 740px; max-width: 1200px; }

Luodinkestävä tausta Tehtävä 3: Tutki miten seuraava ”luodinkestävä tausta” on toteutettu.

Kuvan korvaaminen HTML-tekstiä on periaatteessa hyvä käyttää niin paljon kuin mahdollista: Hakukoneet osaavat lukea sitä Sitä voidaan kopioida ja liittää Se suurenee jos tekstin kokoa suurennetaan Jotkut asiat eivät kuitenkaan ole mahdollisia vain tekstin kanssa.

Kuvan korvaaminen Sen sijaan että upotettaisiin kuvia suoraan sivulle, lisätään teksti dokumenttiin normaalisti ja sitten se piilotetaan CSS:llä ja esitetään kuva sen paikalla. Tällä tavoin hakukoneilla on edelleen teksti etsittävänään ja se tulee näkyviin, jos CSS ei ole käytössä.

Fahrnerin kuvankorvaus (FIR) Kiedotaan korvattava teksti span-elementin sisään. <h2> <span>Korvattava teksti</span> </h2> Lisätään korvauskuva taustakuvaksi otsikkoelementtiin: h2 { background: url(korvauskuva.gif) no-repeat; width: 150px; height: 35px; }

Fahrnerin kuvankorvaus (FIR) Lopuksi piilotetaan span-merkinnän sisältö: span { display: none; }

Phark-kuvankorvaus Ei tarvita ylimääräistä div-elementtiä: <h2>Korvattava teksti</h2> Käytetään hyvin suurta negatiivista sisennystä: h2 { text-intend: -5000px; background: url(korvauskuva.gif) no-repeat; width: 150px; height: 35px; }

Kuvankorvaus Kumpikaan edellisistä tavoista ei toimi jos kuvat ovat pois päältä, mutta CSS on päällä.

Gilder/Levin-kuvankorvaus Käytetään tyhjää span-merkintää: <h2> <span></span>Korvattava teksti </h2> Elementille määritetään koko joka vastaa kuvan kokoa ja asetetaan elementin sijainti suhteelliseksi. h2 { width: 150px; height: 35px; position: relative; }

Gilder/Levin-kuvankorvaus Lopuksi asetetaan tyhjään span-elementiin taustakuva, joka asemoidaan absoluuttisesti tekstin päälle. h2 span { background: url(korvauskuva.gif) no-repeat; position: absolute; width: 100%; height: 100%; } Tässä tekniikassa kuvan taustan on oltava täysin peittävä.

TLR - kuvankorvaus Tuscany Luxus Reports -sivulla kuvankorvausta käytetään logossa ja otsikon ”Lavish Luxury..” alkukirjaimessa. Tehtävä 4: Tutki miten kuvankorvaukset on näissä tapauksissa toteutettu.

Joustavat kuvat Ulkoasu laajenee ja supistuu selaimen leveyden mukaan, joten eikö kuvien tulisi toimia samoin? Tavallisesti kuva sijoitetaan käyttäen img- elementtiä ja kiinteätä leveyttä: <img src=”kuva.jpg” width=”220” height=”70” alt=”kuva” />

Joustavat kuvat Kun luodaan skaalautuvaa kuvaa, käytetään div- elementtiä ja sisällytetään kuva taustakuvana. Kuvan tulee täyttää div-alue divin leveydestä riippumatta → kuvasta tehdään div-elementin leveyttä suurempi. Pohjimmiltaa div-elementti rajaa kuvaa ja näyttää vain osan siitä. Piilotetut kuvan osat saadaan näykviin ulkoasun laajentuessa.

Joustavat kuvat Tehtävä 5: Tutki miten TLR-sivulla on toteuttettu esimerkiksi ”pyyhekuvan” joustavuus kun selainikkunaa suurennetaan leveyssuunnassa.

Valikon koodaaminen Tehtävä 6: Tutki miten TLR-sivuston alla näkyvä valikko on saatu toteutettua.