Töö kujutistega interneti lehekülgedel.

HTML dokumendi salvestamisel teisendatakse kõik kujutised GIF või JPEG formaati. Seejuures salvestatakse JPEG formaadis ainult need kujutised, mis olid algselt salvestatud selles formaadis. Kõik teised graafilised formaadid teisendatakse GIF formaati.

Ülesanne 1. Avame dokumendi ja salvestame selle uue nimega.

1. Käivitage programm Microsoft Word 97.
2. Avage töölaual olevast kaustast "word97html" dokument "uus.htm".
3. Salvestage dokument kausta "word97html" uue nimega: "tund-4.htm".
4. Avage dokument "tund-4.htm" ka lehitseja abil.

Selleks, et lisada kujutis interneti leheküljele tuleb valida punktist Insert korraldus Picture ja seejärel avanevast alammenüüst valida kas Clip Art… või From File…

Ülesanne 2. Trükime pealkirja ja lisame kujutise.

1. Aktiveerige Wordi aken.
   
   
2. Trükkige dokumendile pealkirjaks: Töö illustratsioonidega.
   
   
3. Vormindage pealkiri esimese taseme pealkirja laadiga ja joondage lehekülje keskele.
   
   
4. Valige punktist Insert korraldusega Picture avanevast alammenüüst korraldus From File...
   
   
5. Otsige üles kaustast "HTML40" suvaline graafiline fail.
   
   
6. Sisestage kujutise fail klõpsates faileri korraldusnupul Insert.
   
   Kujutis lisatakse HTML dokumenti.
   
   Märkus: Kujutise failist lisamise korral (From Fail) kopeeritakse see kujutis automaatselt ka kausta, milles asub antud HTML dokument.
   
   
7. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
   
   
8. Kontrollige kas kausta "word97html" on ilmunud uus fail.
   
   
9. Valige punktist View korraldus HTML Source.
   
   
10. HTML koodi on lisandunud kujutise teek <IMG> vastavate parameetritega:
    
    <P><IMG SRC="160.jpg" WIDTH=200 HEIGHT=320></P>, kus "160.jpg" - pildifaili nimetus, WIDTH=200 - laius ja HEIGHT=320 - kõrgus pikselites.
    
    
11. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Vaikimisi lisatakse kujutised HTML dokumenti nii, et nad on joondatud lehe vasaku serva järgi. Selleks, et määratleda teksti ja kujutise omavahelist paigutust leheküljel tuleb märgistada kujutis ja valida punktist Format korraldus Picture…, mille peale avatakse dialoogiaken Picture. Loomulikult võib sama tulemuse saavutada ka tööriistariba Picture vasakult neljanda nupu Format Picture abil.

Ülesanne 3. Joondame kujutise.

1. Klõpsake sisestatud kujutisel selle märgistamiseks.
   
   
2. Valige punktist Format korraldus Picture või klõpsake ilmunud tööriistariba vasakult neljandal nupul.
   
   
3. Avaneb dialoogiaken Picture, milles on aktiivne "peal" lipik Position.
   
   Alajaotuses Text wrapping saab määratleda selle kas tekst voolab ümber kujutise (valikud Left ja Right) või keelata see voolamine üldse ära (valik None).
   
   
4. Valige alajaotusest Text wrapping valik None.
   
   
5. Klõpsake korraldusnupul OK dialoogiakna sulgemiseks.
   
   
6. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
   
   Alajaotuses Distance from text saab määrata kujutise kauguse teda ümbritsevast tekstist vertikaalsuunas Vertical ja horisontaalsuunas Horizontal. Kaugus määratakse sentimeetrites.
   
   
7. Valige punktist Format korraldus Picture või klõpsake ilmunud tööriistariba vasakult neljandal nupul.
   
   
8. Avaneb dialoogiaken Picture, milles on aktiivne "peal" lipik Position.
   
   
9. Avage dialoogiaknas Picture lipik Settings.
   
   Dialoogiakna lipikul saab määratleda: alajaotuses Link selle kas viide kujutisele teegis <IMG> on suhteline (vaikimisi) või absoluutne (lüliti: Use absolute path); alajaotuses Picture placeholder saab sisestada kujutisele asendusteksti (parameeter ALT) juhuks kui interneti kasutaja on oma lehitseja seadetes välja lülitanud graafika allalaadimise.
   
   
10. Sisestage alajaotuses Picture placeholder asendustekst.
    
    
11. Klõpsake korraldusnupul OK dialoogiakna sulgemiseks.
    
    
12. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
    
    
13. Osutage lehitseja kuval hiirekursoriga kujutisele. Kuvale ilmub asendustekst spikri kujul.
    
    
14. Valige punktist View korraldus HTML Source.
    
    
15. Meie dokumendi HTML teegis <IMG> toimusid järgmised muudatused:
    
    <P><IMG SRC="160.jpg" WIDTH=200 HEIGHT=320 ALT="See on pildi asendustekst."></P>
    
    Tegelikult lisandus vaid parameeter ALT asendustekstiga.
    
    
16. Joondame kujutise lehekülje paremale servale.
    
    
17. Lisage teeki <IMG> parameetri ALIGN, mille väärtuseks on center, nii: ALIGN= "right".
    
    
18. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.
    
    
19. Värskendage lehitseja kuva.

Märkus: Kujutised salvestatakse HTML koodis nende originaalmõõtmetega (antud juhul WIDTH=200 HEIGHT=320). Selleks et juhtida kujutiste kuvamist interneti leheküljel võime vabalt muuta neid väärtusi muutes kujutise kas suuremaks või väiksemaks kui originaal. Jälgida tuleb vaid seda et säiliksid kujutise esialgsed proportsioonid (võimalikud on mitmesugused moonutused). Ka kergendab kujutiste sisestamist asjaolu, et kui on antud vaid üks parameeter kas laius või pikkus, siis teine parameeter arvutatakse automaatselt välja nii, et säiliksid esialgsed proportsioonid.

Ülesanne 4. Lisame kujutise Clip Art… galeriist.

1. Valige punktist Insert korraldusega Picture avanevast alammenüüst korraldus Clip Art…
   
   Juhul kui Teie arvutisse on peale Microsoft Office 97 paigaldatud ka Clipart täisversioon Microsoft Clip Gallery 3.0, siis saab siit sisestada interneti leheküljele ka fotosid, helilõike ja isegi videolõike. Antud juhul aga piirdume vaid kujutistega.
   
   
2. Valige meelepärane kujutis (näiteks: grupist Cartoons - kujutis Mailbrd) ja klõpsake sellel hiirega.
   
   
3. Klõpsake korraldusnupul Insert pildi sisestamiseks ja dialoogiakna Microsoft Clip Gallery 3.0 sulgemiseks.
   
   
4. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.

Märkus: Word nummerdab kõik kujutised mida ta konverteerib teistest formaatidest. Viimase ülesandes teisendati Clip Art… galeriist pärit kujutis GIF formaati ja salvestati kausta "word97html" nimega: "Image129.gif".

Viidete loomine dokumendis.

Programm Word 97 võimaldab sisestada redigeeritavasse dokumente nii dokumendi sisemisi viiteid kui ka viiteid teistele dokumentidele ja lehekülgedele.

On olemas mitu moodust viidete lisamiseks dokumenti.

Lihtsaimaks mooduseks on nn automaatse vormindamise moodus, kus tekst, mis kujutab endast viidet vormindatakse automaatselt vajalikuks viiteks.

Ülesanne 5. Sisestame automaatselt viited teistele dokumentidele.

1. Valige punktist Tools korraldus AutoCorrect…
   
   
2. Avanenud dialoogiaknas AutoCorrect avage lipik AutoFormat As You Type.
   
   
3. Lipiku AutoCorrect alajaotuses Replace as you type veenduge selles, et lüliti Internet and network paths with hyprlinks oleks sisse lülitatud.
   
   
4. Klõpsake korraldusnupul OK dialoogiakna AutoCorrect sulgemiseks.
   
   
5. Sisestage dokumenti järgmine viide: http://www.neg.edu.ee ja vajutage sõrmisele Enter järgmisele reale üleminekuks.
   
   Viide muutus automaatselt hüperviiteks.
   
   
6. Sisestage nüüd meie kooli üldine E-posti aadress: mail.eesti@narvaedu.ee ja vajutage sõrmisele Enter reavahetuseks.
   
   
7. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
   
   
8. Valige punktist View korraldus HTML Source.
   
   
9. Dokumendi "tund-4.htm" HTML koodi genereeriti automaatselt järgmised hüperviited:
   
   <P><A HREF="http://www.neg.edu.ee/">http://www.neg.edu.ee</A></P>
   <P><A HREF="mailto:mail.eesti@narvaedu.ee">mail.eesti@narvaedu.ee</A></P>
   
   Pange tähele, et nii hüperviide kui ka viite osuti on samasugused.
   
   
10. Asendage viite osutid järgmiste tekstidega: NEG ja E-post.
    
    
11. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.
    
    
12. Värskendage lehitseja kuva.

Teiseks viidete lisamise mooduseks on punktist Insert valitava korraldusega Hyperlink… avaneva dialoogiakna Insert Hyperlink kasutamine hüperviidete lisamiseks.

Ülesanne 6. Sisestame viite teisele dokumendile.

1. Trükkige dokumenti uuelt realt tekst: Narva Eesti Gümnaasiumi õppematerjalid.
   
   
2. Märgistage tekst.
   
   
3. Valige punktist Insert korraldus Hyperlink….
   
   
4. Sisestage lahtrisse Link to file or URL: http://my.tele2.ee/tomingkuno.
   
   
5. Eemaldage linnuke lüliti Use relative path for hyperlink eest.
   
   
6. Klõpsake korraldusnupul OK dialoogiakna Insert Hyperlink sulgemiseks.
   
   
7. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
   
   
8. Kontrollige viidete tööd.

Reeglina avatakse viitega allalaaditav dokument otse kuval oleva dokumendi "peale". Kui on vajalik, et allalaaditav dokument kuvatakse eraldi aknas, siis on vajalik HTML koodi käsitsi korrigeerimine parameetri TARGET lisamise teel.

Ülesanne 7. Viitega avatava dokumendi suunamine.

1. Valige punktist View korraldus HTML Source.
   
   
2. Sisestage viimati lisatud hüperteksti viitele parameeter TARGET
   
   TARGET="_blank".
   
   
3. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.
   
   
4. Kontrollige viite tööd.

Programm Microsoft Word võimaldab ka nn sisemiste viidete kasutamist. Oletame, et on olemas mingi väga mahukas HTML dokument (sajad kuvatäied teksti). Selliste mahukate dokumentide lugemisel on mugav kasutada sisemisi viiteid. Dokumendi algusesse trükitakse siis sisukord, milles iga sisukorra element on viide vastavale peatükile dokumendi sees.

Ülesanne 8. Sisemise viite lisamine dokumenti.

1. Trükkige uuelt realt järgmine lühike sisukord:
   
   Sisukord:
   
   peatükk 1
   peatükk 2
   peatükk 3
   peatükk 4
   peatükk 5
   
   
2. Vajutades Enter sõrmist liikuge ekraanil alla umbes 10 -20 rea võrra ja trükkige peatükk1, siis liikuge alla veel 10-20 rida ja trükkige peatükk2 jne kuni 5 peatükini.
   
   
3. Märgistage peatükk5.
   
   
4. Valige punktist Insert korraldus Bookmark…
   
   
5. Sisestage dialoogiaknas Bookmark lahtrisse Bookmark name: nimeks peatükk5.
   
   
6. Klõpsake korraldusnupul Add.
   
   
7. Tegutsedes samamoodi lisage ka peatükk4, … , peatükk1.
   
   
8. Liikuge üles tagasi sisukorra juurde.
   
   
9. Märgistage sisukorras peatükk1.
   
   
10. Valige punktist Insert korraldus Hyperlink….
    
    
11. Klõpsake lahtri Named location in file (optional) kõrval asuvale korraldusnupule Browse.
    
    
12. Klõpsake dialoogiaknas Bookmark elemendil peatükk1 ja seejärel ka korraldusnupul OK.
    
    
13. Tegutsedes samamoodi lisage ka peatükk2, … , peatükk5.
    
    
14. Salvestage muudatus dokumendis ja värskendage lehitseja kuva.
    
    
15. Kontrollige viidete tööd.
    
    
16. Valige punktist View korraldus HTML Source.
    
    
17. Dokumendi HTML koodi genereeriti järgmine kood:
    
    Sisukord:<BR>
    <BR>
    <A HREF="#peatükk1">peatükk 1</A><BR>
    <A HREF="#peatükk2">peatükk 2</A><BR>
    <A HREF="#peatükk3">peatükk 3</A><BR>
    <A HREF="#peatükk4">peatükk 4</A><BR>
    <A HREF="#peatükk5">peatükk 5</A></P>
    
    Nagu näete on tegemist viidetega kus URL aadressi asemel on viide samas dokumendis sauvale märke nimele #peatükkX, kus X on vastav number.
    
    Igale peatükile genereeriti vastav viite teek märge nimega, mis on määratud parameetriga NAME:
    
    <P><A NAME="peatükk1">Peatükk 1</A></P>
    <P><A NAME="peatükk2">Peatükk 2</A></P>
    <P><A NAME="peatükk3">Peatükk 3</A></P>
    <P><A NAME="peatükk4">Peatükk 4</A></P>
    <P><A NAME="peatükk5">Peatükk 5</A></P>
    
    
18. Väljuge HTML koodi režiimist klõpsate tööriistaribal nupule Exit HTML Source.

Märkus: Loomulikult võivad viidete osutiteks olla kõik objektid, mida saab sisestada HTML dokumenti, st viite osutiks võib olla: tekst, pilt, helilõik, videolõik, tabel jne.