free webpage counters
ETUSIVU materiaalit
Johdanto
Leikkaus
Turhat pois
Viivat
Teksti
Keskelle näyttöä
Venyvä palkki
Valikko

Leikkaus

Kuva on leikattava palasiksi ja valintoja ei ole paljon. Kuvasta leikataan suorakaiteen muotoisia alueita, koska lopputulos on html-taulukko. Otetaan esimerkki-tiedosto1, ja aletaa hommiin Splitz-ohjelmalla.

Tarkista, ettei jpg-kuvaa pakata. Myöhemmin voit sitten pakata osia kuvasta ja jättää täkeitä osoia pakkaamatta (esim.poika ylälulmassa).

Piirrä viivat seuraavien painikkeiden avulla:

Leikkaan yläpalkin omaksi jutuksi. Tässä vaiheessa ei siis enempää. Lopputulos kutakuinkin näin:

Vie kuva html-muotoon. Valitse File -> Export.

Valitse tallennuspaikka ja nimi html-tiedostolle.

Valitse ALT-tekstit mukaan.

Anna kuville nimet.

Tämän jälkeen leikataan alaosasta (kuvasta) vasen reuna erilleen.

Siitä koodi talteen ja ydistetään siihen edelliseen, josta siis se alaosan kuva pois. Siis lopputulos näin, kun html:n aloitus ja lopputagit paikoillaan.

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE CELLSPACING = 0 CELLPADDING = 0 BORDER = 0>
<TR><TD><IMG SRC="index_1_1.jpg" WIDTH=760 HEIGHT=92 ALT="Yläpalkki"></TD></TR>
<TR><TD><TABLE CELLSPACING = 0 CELLPADDING = 0
BORDER = 0>
<TR><TD><IMG SRC="index2_1_1.jpg"
WIDTH=134 HEIGHT=458 ALT="vasen"></TD><TD>
<IMG SRC="index2_2_1.jpg" WIDTH=626 HEIGHT=458
ALT="teksti"></TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</BODY>
</HTML>

Huom!Tarkista aikaansannoksesi validaattorilla. Jos koodissa mokia niin virheet kostautuu jatkossa.

Laita dokumenttisi alkuun teksti
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sitten suunnista W3C:n sivuille. Jos kaikki ok niin lopputulos näin:

Muussa tapauksessa alat korjata virheitäsi. Yksi tyypillien moka on, että käy näin:

Tallenna tiedosto koneellesi viemällä hiiri linkin päälle, klikkaa hiiren kakkospainiketta ja valitse vaihtoehto "Tallenna kohde nimellä".