Kuvien lisäämisessä WWW-sivuille kannattaa huomioida muutama
asia:
-
Kuvien tallennustyyppi tulee olla joko gif tai jpg. Tai ei ole aivan pakko,
mutta muiden kuvaformaattien kanssa on ongelmia selaimien kyvyssä käsitellä
niitä. Esimerkiksi BMP-muotoiset kuvat näkyvät Explorerissa, mutta eivät
Netscapessa.
-
Jos haluat mahdollisimman monen näkevän kuvasi, niin käytä
gif-kuvia.
-
GIF
-
Maksimissaan 256 väriä. Vaikka on pakattu kuvamuoto ei hävitä
kuvapisteitä.
-
Käytettävä paletti on muokattavissa ja värien määrää
voidaan muutella
-
gif89a-tallennusmuotoisista kuvista voidaan tausta tehdä läpinäkyväksi
-
JPEG
-
Taustakuvina ja suuret linkkien takana olevat kuvat.
-
Kannattaa käyttää värivalokuvissa.
-
Hävittää kuvapisteitä ja samalla vähentää
kontrastia.
-
Ei voida muuttaa taustaa läpinäkyväksi.
-
Yksittäisten kuvien koko max 20 kilotavua (ohjeellinen arvo sivujen
latautumisen nopeuttamiseksi).
-
Vähennä värien määrää mahdollisuuksien
mukaan.
-
Jos mahdollista, käytä samoja kuvia usealla sivulla, tällöin
sivujen latautuminen on nopeampaa.
Kuvien hankinta:
Kuvien hankkimiseksi on useampi tapa. Alla pari keinoa.
1. Omassa harjoittelussasi voit käyttää esimerkiksi www-sivuilta
löytyviä kuvia. www-sivulla olevan kuvan saat tallennettua napauttamalla kuvan
päällä hiiren oikealla korvalla. Avautuvasta pikavalikosta valitset tallenna kuva
nimellä... saat auki normaalin tallennusikkunan, jossa valitset aseman ja
kansion, mihin kuva tallennetaan. www-sivuilla olevien
kuvien suhteen on ehdottoman tärkeää huomata se, että tekijänoikeudet
ovat edelleen kuvan tekijällä, vaikka sen "imuroiminen" onkin helppoa.
2. Ilmaiskuvien käyttö. Internetissä on useita www-sivuja,
joilla on vapaasti imuroitavia kuvia. Samoin kaupoista voit ostaa CD-levyllä
olevia clipart-kuvia. Näiden suhteen varmista, että kuvat ovat todella
ilmaisia (avainsanoja ovat mm. free, royalty free).
3. Kuvien skannaaminen ja kuvanmuokkaus kuvankäsittelyohjelmassa.
IMG - elementti
Kuva tuodaan sivulle IMG-elementillä. Elementillä ei ole lopetusta.
Yksinkertaisimmillaan IMG-elementtiin määritellään vain SRC-attribuutti,
joka ilmaisee kuvan lähteen, siis sijaintipaikan, josta kuva haetaan sivulle.
Jos kuva on tallennettu samaan kansioon htm-tiedoston kanssa, riittää kuvalle
vain tiedostonimi. Katso myös linkit ja hakemistot.
Huomaa, että vaikka kuva näkyy sivulla, niin se ei ole "kiinni"
sivussa. Kun siirrät sivuja toiseen paikkaan, joko palvelimelle tai toiselle
koneelle, siirrä myös kuvat. Muuten selaimessa näkyy punainen rasti (IE) tai
harmaa neliö (Netscape), joka osoittaa, että tässä pitäisi olla kuva, mutta
sitä ei jostakin syystä löydy. Alla on malli tilanteesta.
Vieressä on kuva,
jota selain ei löydä, siksi punainen rasti/harmaa neliö.
<IMG SRC=”kuva.gif”>
Elementti voi kuvan nimen jälkeen sisältää myös
muita attribuutteja:
ALT=”......” Teksti, joka näkyy
jos kuva ei lataudu
ALIGN=”.......” Kuvan ja tekstin suhteen komennot eli kuinka kuvan
vieressä oleva teksti sijoittuu:
* top:
kuvan yläreuna on tekstin yläreunan tasalla
* middle: Kuvan
keskikohta on tekstin perusviivan kohdalla
* bottom: Kuvan alareuna
on tekstin perusviivan kohdalla
* left: Kuva on sivun vasemmassa reunassa
ja teksti juoksee kuvan vierellä
* right: Kuva on sivun oikeassa
reunassa, teksti juoksee kuvan vierellä
BORDER: Kuvan reunat pikseleinä
WIDTH: kuvan leveys pikseleinä
HEIGHT: Kuvan korkeus pikseleinä
HSPACE ja VSPACE -attribuuteilla saat kuvalle tyhjää
tilaa jälkeen annetun pikseliarvon verran. |
Esimerkki
<IMG SRC=”logo.gif” ALT=”logo" ALIGN=LEFT border="3" hspace="30"
vspace="30">
Kuvan
tekstivaihtoehto on logo, kuva keskitetty vasempaan laitaan, reunuksen
paksuus 3 pikseliä, tyhjää tilaa vasemmalla, oikealla, ylä-
ja alapuolella 30 pikseliä, kuvan korkeus 78 pikseliä ja leveys
77 pikseliä. Koska kuvalla on 30 pikselin tyhjä tila reunoilla,
alkaa teksti kuvan yläreunasta, joka tässä tapauksessa on
selaimen mukaan yläreunaan lisätyn 30 pikseliä ylempänä
kuin näytöllä näkyvä kuva.
|