Kuvan liittäminen webbisivulle

Kuva voidaan liittää sivulle painamalla Common-välilehdeltä kuvanliittämissymbolia:

Tai sitten voidaan valita Insert --> Image:

Valinnasta aukeaa seuraavanlainen ikkuna, jossa valitaan kuva mikä halutaan liittää:

Seuraavassa ikkunassa kuvalle voidaan antaa vaihtoehtoinen teksti (Alternate text), joka näkyy niille, joiden selain ei näytä kuvia. Tämä teksti näkyy myös keltaisessa laatikossa silloin, kun hiiri on pysäytetty kuvan päälle. Kohtaan Long description voidaan laittaa osoite, josta löytyy lisätietoja kuvasta. Sitä tuskin kuitenkaan kannattaa käyttää, koska ainakaan minun käyttämäni selaimet eivät tukeneet tätä ominaisuutta.

Kuvan ollessa valittuna voidaan kuvaan liittyviä ominaisuuksia muokata properties ikkunassa:

Kohtaan Src tulee kuvan osoite. Osoitteena kannattaa useinmiten käyttää ns. suhteellista (relative) osoitetta. Elikä tässä tapauksessa osoitteen tulisi olla muotoa: images/kulma5.jpg.

Kohtaan Alt tulee teksti, joka näkyy niille, joiden selain ei näytä kuvia. Tämä teksti näkyy myös keltaisessa laatikossa silloin, kun hiiri on pysäytetty kuvan päälle.

W ja H tarkoittavat kuvan kokoa ja niiden käyttö nopeuttaa selaimen toimintaa sivun muodostuksessa. Jos kuva todellisuudessa on erikokoinen kuin, mitä tässä on määritelty, selain muuttaa kuvan määrittelyjen kokoiseksi, jolloin kyllä kannattaa käydä Photoshopissa muuttamassa myös kuva oikean kokoiseksi. Prosentuaalista kuvan kokoa ei kannata käyttää, koska kuva näyttää parhaalta silloin kun sitä ei suurenneta tai pienennetä.

Jos kuva on suuri, niin kohtaan Low Src, voidaan määritellä pienempi esikatselukuva, jota näytetään sillä aikaa, kun varsinaista kuvaa ladataan palvelimelta.

V Space ja H Space kohdissa voidaan määritellä kuvan ympärille ylimääräistä tilaa. Huomaa, että tilaa on sekä ylä- että alapuolella tai vastaavasti oikealla ja vasemmalla aina yhtäpaljon.

Border tarkoittaa kuvan ympärille tulevan kehyksen leveyttä. Tavallisimmin se on 0.

Koodina kuvan sijoitus näyttää tältä ja se tulee sijoitta body-osioon:

<img src="Images\Kulma5.jpg" width="150" height="113" border="0" alt="Venehjärvi">

Edellinen Seuraava

Dreamwea-
ver

Käyttöliittymä
Uuden avaus
Väriasetukset
Tekstin kirjoittaminen
Kuvan sijoittaminen
Otsikon laatiminen
Linkit
Taulukot
Kehykset
Aktiivinen kuva
Sivupohja
Sivujen julkaisu
Puhekupla GE:hen

Homesite

Uuden avaus
Väriasetukset
Tekstin kirjoittaminen
Kuvan sijoittaminen Otsikon laatiminen
Linkit
Taulukot
Kehykset
Aktiivinen kuva

Alkuun