|
Kuvat www-sivuilla
Merkittävä osa www-ilmaisua ovat kuvat – monet navigointiin ja mainontaan liittyvät elementit ovat kuvia, painikkeet ja mainosbannerit. Varsinaisesti sivuilla on vain neljää eri ilmaisutyyppiä: tekstiä, kuvia, elokuvia ja Flash-elementtejä, jotka ovat jotain tekstin, elokuvien ja kuvien väliltä. Niin ja tietysti Java-elementtejä.
Edellämainituista ainoastaan teksti on elementti joka sisältyy itse HTML-dokumenttiin, kaikki muut ovat ulkoisia tiedostoja jotka kutsutaan erikseen ja liitetään osaksi lopullista sivua – niitä ei missään vaiheessa sijoitetan itse dokumenttiin muuten kuin viittauksena.
Ylläoleva kuva on kutsuttu tähän dokumenttiin koodilla jossa lukee <img src="img/DW-logo.jpg" width="126" height="125">. Suomeksi tämä tarkoittaa sitä että kuvalähde (img src : image source) sijaitsee "img" kansiossa ja on nimeltään "DW-logo.jpg". DW-logo on itseni antama nimi ko. kuvalle ja .jpg tarkoittaa sen tiedostomuotoa. Lisäksi koodissa ilmoitetaan kuvan leveys ja korkeus pikseleinä.
Kuvan sijoittaminen dokumenttiin
Kuva sijoitetaan dokumenttiin joko Insert-bar'n avulla (yllä), valikosta Insert > Image tai näppäinkomennolla "alt+komento+ i". Jokainen näistä avaa dialogi-ikkunan jonka avulla voidaan kohdistaa haluttu kuva. Kun kuva on valittu – siis aktivoitu - klikataan vielä "Choose" ja kuva sijoittuu siihen kohtaan jossa kursori on. Periaatteessa kaikki on tässä, mutta kuva voidaan sijoitella monin eri tavoin. Seuraavassa esimerkkejä.
Oletusarvoinen
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. |
Baseline
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. |
Top Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. |
Middle
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. |
Bottom
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. |
Text top
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. |
Absolute Middle
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. |
Absolute Bottom
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. |
Vasen laita
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. |
Oikea laita
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. |
Kaikki valinnat kuvan sijoittamiseen on tehty Properties-ikkunan (yllä) avulla, ensin aktivoimalla kuva ja sitten valitsemalla kuvalle sopiva määre kohdasta Align.
|
|