Kodulehekülje loomine programmiga Mozilla Composer

 

Mozilla Composer on hea ja lihtne tasuta saadaolev kodulehe valmistamise ja toimetamise programm. Programm võimaldab luua väga lihtsalt õpiotstarbelisi kodulehekülgi. Õpiotstarbeliste kodulehekülgede kasutamine on õpetajale heaks võimaluseks laiendada õppealast tegevust väljapoole klassiruumi. Koduleheküljena loodud õppematerjalid võimaldavad kord juba loodud õppematerjale kasutada aastaid ja õpilastel on võimalus kasutada veebipõhiseid õppematerjale millal iganes, kus on Interneti ühendus.

Näited

FILMIKUNST - õppematerjal II kooliastmele

http://www.saue.edu.ee/~tiia

VALGE TOONEKURG – õppematerjal II ja III kooliastmele

http://www.ut.ee/biodida/KOOLID/Savolainen/index6.html

 

Töö alustamine ja lõpetamine

 

Töö alustamiseks valige Start/Programs/Mozilla/Mozilla. Avaneb kodulehekülgede sirvimisprogramm Mozilla.

Kodulehekülje loomiseks valige menüüst Window/Composer või kasutage klahvikombinatsiooni <Ctrl+4>.

Töö lõpetamiseks on erinevaid võimalusi:

·      dokumendi sulgemiseks valige menüüst File/Close või klõpsake nupul Close , klahvikombinatsioon <Ctrl+W>;

·      programmi sulgemiseks valige menüüst File/Exit või klõpsake nupul Close  <Alt+Q>. Kui mõni avatud töö on salvestamata, küsitakse salvestamise kohta enne väljumist veel kinnitust.

 

Kodulehekülje planeerimine

 

Alustades oma kodulehekülje loomist mõelge enne hoolikalt läbi, mida Te soovite sellel leheküljel avaldada ning kuidas kavatsete lehekülge organiseerida. Enne töö alustamist arvutis pange oma idee kirja paberil. Otsustage, mitu lehekülge soovite luua ja jaotage sisu lehekülgede vahel. Igale leheküljele pange nimi. Kui olete otsustanud, mida soovite oma koduleheküljele panna, siis tuleks kirja panna esileht.

Avaldades veebilehte internetis on esileht esimene osa, mida lehekülje külastajad näevad. Kõik ülejäänud leheküljed on alamlehed, millele saab liikuda esilehelt. Luues oma kodulehekülge arvutis, peate esmalt tegema kausta, kuhu Te kõik leheküljed (esilehe ja alamlehed) salvestate.

 

 

Uue lehe loomine ja salvestamine

 

Uue kodulehekülje loomist alustades avaneb tühi dokumendi aken, mis sarnaneb  tekstidokumendi aknaga. Ka enamik programmi Mozilla Composer töövahendid (teksti sisestamine, tabelite loomine, piltide lisamine) on sarnased tekstidokumendi redigeerimise vahenditega.

Kodulehekülje loomist alustage esilehega, mis on soovitatav kohe ka salvestada. Salvestamiseks valige menüüst File/Save <Ctrl+S> või kasutage nuppu Save .

Avanevas dialoogaknas sisestage loodava kodulehekülje nimi ja kinnitage see klõpsates nupule OK .

Järgmisena kuvatakse dialoogaken Save Page As faili salvestamiseks arvutisse. Te peate määrama kausta, kuhu soovite faili salvestada ja faili nime. Pange esilehekülje faili nimeks index.html. Index sellepärast, et kodulehekülge avaldades internetis, otsib kodulehekülje sirvimisprogramm (Internet Explorer, Mozilla jt.)  automaatselt index.html (index.htm) faili. Faili laiend .html või .htm lisatakse programmi poolt automaatselt. Teistele loodavatele lehekülgedele (alamlehtedele) võite nime panna vastavalt leheküljel olevale informatsioonile. Näiteks leheküljel, millel on kordamisküsimused, võite nimeks panna kysimused.htm. Failile nime andes peate meeles pidama, et ei tohi kasutada täpitähti, kirjavahemärke, sümboleid  (#, ¤, %, &, /, *, -, jt.) ja tühikut.

Töö salvestamiseks klõpsake nupul Save.

 

Tekst

 

Teksti sisestamine

Teksti sisestamine toimub analoogselt tekstiredaktori kasutamsega. Uue teksti sisestamiseks klõpsake hiire kursoriga kohta, kus soovite sisestavat teksti näha ja alustage teksti tippimist klaviatuuril.

 

Teksti kujundamine

Teksti kujundamiseks on kaks võimalust.

1.Märgistage eelnevalt teksti osa, mida soovite muuta ja kasutage nupureas olevaid vahendeid.

 

Korraldus

Selgitus

Tekstiploki tüüp

Teksti värv

Teksti tausta värv

Teksti vähendamine

Teksti suurendamine

Paks kiri

Kaldkiri

Allajoonitud kiri

Nummerdamata loend

Nummerdatud loend

Teksti nihutamine vasakule

Teksti nihutamine paremale

 

Teksti joondus

Vasakjoondus

Keskjoondus

Paremjoondus

Rööpjoondus

 

2.Märgistage tekst.

Teksti  tüübi (Font) muutmiseks valige menüüst korraldus Format/Font ja seejärel klõpsake kirja tüübil

 

Teksti suuruse (Size) muutmiseks valige menüüst korraldus Format/Size ja klõpsake vajalikul suuruse nimel.

 

Korraldus

Selgitus

Smaller

Väiksem

Larger

Suurem

x-small

Väga väike umbes 7,5pt

small

Väike  10pt

medium

Keskmine 12pt

large

Suur 13,5pt

x-large

Suurem 18pt

xx-large

Väga suur 24pt

 

Teksti stiili (Text Style) muutmiseks valige menüüst korraldus Format/Text Style ja klõpsake vajalikul stiilil.

Rasvane (bold), kaldkiri (Italic), allajoonitud (Underline), läbijoonitud (Strikethrough), ülatekst (Superscript), alatekst (Subscript) jne.

 

Teksti värvuse muutmiseks (Text Color) valige menüüst korraldus Format/Text Color. Avanevas Text Color aknas klõpsake vajalikul värvil.

 

 

Teksti paigutamine

Teksti nihutamiseks töölehel kasutage nupureal olevaid nuppe  (eelnevalt märgistage tekst).

Teksti nihutamine paremale  ja vasakule

 

Teksti joondamiseks töölehel kasutage nuppe  (eelnevalt märgistage tekst).

Teksti joondamiseks vasakule klõpsake nupule vasakjoondus , paremale -  paremjoondus, keskele -  keskjoondus ja kahest servast joondamiseks klõpsake nupul rööpjoondus .

 

Loetelu loomine

Loetelu loomiseks kasutage nuppe .

Sisestage elemendid, mida soovite loendisse kaasata. Seejärel märgistage kogu loend ja nummerdamata loetelu tegemiseks klõpsake nupul  . Nummerdatud loetelu loomiseks klõpsake nupul .

 

 

Sümbolite lisamine

Sümbolite lisamiseks  koduleheküljele valige menüüst Insert/Characters and Symbols ja avanevas Insert Character aknas märgistage valik Common Symbols. Vajaliku sümbol saate valida lahtrist Character: klõpsates valikute kuvamise nupul . Klõpsake vajalikul sümbolil ning kinnitage valikut klõpsates nupul Insert .

 

 

 

 

 

 

 

 

 

 

 

Pealkirjade määramine

Pealkirju saab määrata valiku   abil. Valikuteks on Normal (tavaline tekst), Heading 1, Heading 2, jne (mida suurem number seda väiksem pealkiri).

 

Horisontaaljoone sisestamine ja kujundamine

 

 

 

 

 

 

 

Teksti osade või õppematerjalide puhul erinevate peatükkide eraldamiseks võite kasutada horisontaaljoont.

Horisontaaljoone lisamiseks klõpsake hiire vasaku klahviga rea vasakus servas, kuhu soovite joont lisada ja valige menüüst Insert/Harizontal line.

 

Horisontaaljoone kujundamiseks kasutage dialoogakent Horizontal Line Properties.

Joone välimuse muutmiseks tuleb teha topeltklõps joonel ja seejärel avaneb Horizontal Line Properties aken .

Avanenud aknas saab määrata:

·      joone pikkust (Width:) nii pikselites kui ka protsentides lehe laiusest. Joon lüheneb/pikeneb mõlemast otsast võrdselt ja vaikimisi on joone asukoht määratud keskkoondusena.

·      joone laiust (Height:) pikselites.

·      joonele varju. Varju lisamiseks tehke linnuke valiku 3-d Shading ette olevasse ruutu.

·      joone asukohta (Alignment) leheküljel, kas joon on vasak-, parem- või keskjoondusega.

·      uute seadete salvestamist. Uute seadete salvestamiseks klõpsake nupul Use as Default. Järgmine kord sisestatav horisontaaljoon on määratud välimusega.

 

 

Tabel

 

Tabeleid kasutatakse info esitamiseks ridade ja veergudena või keerukama kujundusega lehekülje vormindamiseks.

 

Tabeli sisestamine

Lihtsama tabeli lisamiseks pange kursor kohta, kuhu tabel peaks tulema ning valige menüüst Table/Insert/Table või klõpsake nupurea nuppul Table.

Fikseerige tabeli suurus, st. mitmest reast Rows: ja mitmest veerust Columns: peaks tabel koosnema.

Määrake tabeli laius leheküljel Width: (100% kogu lehekülje laiuses) ja

raami paksus pikselites Border:

(näiteks: 0 piksel: raami ei kuvata, 1 piksel:  – , 6 pikselit:       ).

Tabel võib lehe suhtes olla joondatud vasakule, paremale või keskele. Tabeli asukoha muutmiseks märgistage tabel ja klõpsake vastavale joondamisnupule (paremjoondus , keskjoondus , vasakjoondus ).

 

 ! Tabeli paigutust leheküljel saate muuta, kui tabeli suuruseks on vähem kui 100%

 

! Tabeli täitmiseks ja lahtrites liikumiseks kasutage klahvi <Tab> või nooleklahve.

 

 

 

Tabeli seaded

 

Loodud tabeli seadete muutmiseks märgistage tabel, mida soovite muuta ja klõpsake nupul Table  või valige menüüst Table/Properties. Avanevas aknas saate muuta

o       Tabeli ridade (Rows:) ja veergude (Colums:) arvu ja tabeli suurust leheküljel (Width:)

o       Välisraami laiust (Border:),  siseraamide laiust (Spacing:) ja  raami kaugust andmetest (Badding:).

o       Tabeli joondust leheküljel (Table Alignment:)

o       Tabeli nime (Caption:)

o       Tausta värvi (Background Color:)

 

 

 

 

 

 

 

Tabeli ridade ja veergude lisamine ja kustutamine

 

Rea lisamiseks tabelisse märgistage rida, mille ette uut rida soovite, ja valige menüüst korraldus Table/Insert/Row Above. Kui aga soovite uut rida lisada märgistatud rea alla, siis valige korraldus Table/Insert/Row Below. Uue rea lisamiseks tabeli lõppu tuleb kursor viia viimasesse lahtrisse ja vajutada klahvile <Tab>.

 

Rea (ridade) eemaldamiseks märgistage rida (read) ja valige menüüst korraldus Table/Delete/ Row(s)

 

Veeru lisamiseks tabelisse märgistage veerg, mille ette uut veergu soovite, ja valige menüüst korraldus Table/Insert/Column Before. Kui aga soovite lisada veergu märgistatud veeru järgi, siis valige korraldus Table/Insert/Column After.

 

Veeru (veergude) kustutamiseks märgistage kustutatav veerg (veerud) ja valige menüüst Table/Delete/Column(s).

 

 

Terve tabeli ja tabeli sisu liigutamine, kopeerimine ja kustutamine

 

Terve tabeli ja tabeli sisu liigutamiseks klõpsake hiirega ümberpaigutataval tabelil. Valige menüüst  Table/Select/Table/, andke menüüst korraldus  Edit/Cut ja seejärel klõpsake hiirega leheküljel kohal, kuhu soovite tabeli tõsta ning valige menüüst korraldus Edit/Paste

 

Terve tabeli kopeerimiseks klõpsake tabelil, mida soovite kopeerida. Valige menüüst  Table/Select/Table/, andke menüüst korraldus  Edit/Copy ja seejärel klõpsake hiirega leheküljel kohal, kuhu soovite tabeli kopeerida ning valige menüüst korraldus Edit/Paste

 

Tabeli kustutamiseks klõpsake tabelil, mida soovite kustutada. Valige menüüst  korraldus Table/Delete/Table/.

 

Teksti teisendamine tabeliks

Teksti teisendamiseks tabelisse märgistage tekst, mida soovite tabelisse paigutada ja valige menüüst korraldus Table/creat table from selection. Avanevas hüpikmenüüs Conver To Table tehke linnuke korralduse Delete separator character ees olevasse ruutu. Tabeli loomiseks klõpsake nupul OK

!teksti sisestamisel, mida soovite hiljem teisendada tabelisse, peab sõnade või lausete vahele, mida soovite erinevates lahtris kuvada sisestama koma.

Näide

Looge tabel (2 rida ja 2 veergu) järgmiste tekstidega:

tere, head aega, tere õhtust, tere hommikust

Tabeli loomiseks

  1. Sisestage tekst kahte ritta

tere, head aega,

tere õhtust, tere hommikust

  1. Märgistage tekst
  2. Klõpsake nupureal tabeli loomise nupul
  3. Hüpikmenüüs Conver To Table tehke linnuke korralduse Delete separator character ees olevasse ruutu (tabelis ei kuvata märke, millega eraldate erinevatesse lahtritesse paigutatavad tekstid)

 

  1. Klõpsake nupul OK
  2. Loodav tabel näeb välja selline

 

Pildid

 

Pildid muudavad kodulehekülje atraktiivsemaks ja piltidega saab ilmestada õppematerjali. Tekstile lisatavad pildid peavad olema sobivas vormingus  (soovitatav GIF- või JPEG-failid) ja eelnevalt salvestatud kodulehekülje kausta.

 

Pildi sisestamine

Pildi lisamiseks koduleheküljele määrake eelnevalt koht (klõpsake hiirega), kuhu soovite pilti paigutada. Menüüribalt valige korraldus Insert/Image või klõpsake nupul Image . Avanevas dialoogaknas

 

klõpsake nupul Choose File. Otsige arvutist kodulehekülje kaustast vajalik pildifail, märgistage ning klõpsake nupul Open. Teie poolt lisatava pildifaili asukoha otsetee sisestatakse programmi poolt lahtris Image Location:

 ja valitud pilt kuvatakse Image Preview väljale.

 

Pildi lisamise korralduse kinnitamiseks klõpsake nupul OK . Pilt ilmub koduleheküljele.

 

Pildi seadete muutmine

 

Pildi seadeid saate muuta dialoogaknas Image Properties. Klõpsake hiire parema nupuga pildil ja valige korraldus Image Properties või valige nupurealt Image .

Pildi raami ja asukohta koduleheküljel saate muuta vahekaardi Appearance abil.

 

Vahekaart Appearance

Käsk

 

Selgitus

Spacing

Vahemikud

Left and Right

Vasak ja Parem

Topp and Bottom

Üleval ja all

Solid Border

Raami laius

Align Text to Image

Teksti asukoht pildi suhtes

At the top

Ülevalt

In the center

Keskel

At the bottom

Alt

Wrap to the left

Teksti ridade murdmine vasakult

Wrap to the right

Teksti ridade murdmine paremalt

 

Pildi asukoha määramiseks leheküljel saate kasutada joondamisnuppe: joonda vasakule , joonda paremale , joonda keskele .

 

Lingid

 

Kodulehekülgede omapäraks on hüperlingid (lingid, viited). Lingid võimaldavad ühendada erinevaid lehekülgi (esileht ja alamleheküljed) ühtseks tervikuks, nende abil on võimalik viidata ka mõnele teisele failitüübile (tekstifail, helifail, videofail, jt), internetis olevale koduleheküljele või e-posti aadressile. Linke võib luua kõigist koduleheküljel olevatest objektidest: sõnast, tekstilõigust, pildist jt. Tekstist loodav hüperlink tõstetakse tavalisest esile värviga või allajoonimisega.

 

Tekstisisesed lingid

 

Tekstisisesed lingid võimaldavad luua liikumist ühe lehe piires.

Tekstisisese lingi loomiseks märgistage ära objekt (sõna, pilt), kuhu loodav link viitab. Nii luuakse ankur. Ankrule nime andmiseks valige menüüribalt korraldus Insert/ Named Anchor

Avanevas dialoogaknas lahtrisse Anchor Name: kuvatakse ankru nimi.

Nime kinnitamiseks klõpsake nupul OK .

Lehele kuvatakse ankru asukoha kõrvale väike ankru kujuline ikoon .

Järgmise sammuna tekstisisese lingi loomisel märgistage tekst, millelt link viitab valitud ankrule ja valige menüüribalt korraldus Insert/Link

Avanevas Link Properties aknas valige lingi sihtmärk ehk ankur klõpsake Link Location alal valiku nupul .

 

 

Lingi loomise kinnitamiseks klõpsake nupul OK .

 

 

Tekstivälised lingid

 

Tekstiväliseid linke saab luua kodulehekülje alamlehehele (dokumendile, mis asub teie arvutis) või  internetis olevale koduleheküljele.

 

Tekstiväline link alamleheküljele (dokumendile, mis asub arvutis)

 

Tekstivälise lingi loomiseks märgistage tekst, millega soovite hüperlinki siduda, ja klõpsata nupuribal nupul Link  või andke menüüribal korraldus Insert/Link <Ctrl+L>.

Avanevas dialoogaknas vahekaardil Link klõpsake nupul Choose File… .

Otsige arvutist kodulehekülje kaustast vajalik fail (kodulehekülje alamlehekülg), märgistage ning klõpsake nupul Open.

Lingi lisamise korralduse kinnitamiseks klõpsake nupul OK .

Teie loodavale koduleheküljele on loodud märgistatud tekstist link valitud dokumendile.

 

Tekstiväline link internetis olevale koduleheküljele

Hüperlingi loomiseks märgistage tekst, millega soovite hüperlinki siduda, ja klõpsata nupuribal nupul Link  või andke menüüribal korraldus Insert/Link <Ctrl+L>.

Avanevas dialoogaknas vahekaardil Link sisestage veebilehe aadress lahtrisse  Enter a web page location … (Näide: http://www.koduleht.ee)

Lingi lisamise korralduse kinnitamiseks klõpsake nupul OK .

Teie loodavale koduleheküljele on märgistatud tekstist loodud link internetis olevale koduleheküljele.

 

Piltide kasutamine lingina

Pildist linke saab luua kodulehekülje alamlehehele (dokumendile, mis asub teie arvutis) või  internetis olevale koduleheküljele.

 

Pildi kasutamine lingina alamleheküljele (dokumendile, mis asub arvutis)

Pildist lingi loomiseks märgistage pilt, millega soovite hüperlinki siduda, ja klõpsata nupuribal nupul Link  või andke menüüribal korraldus Insert/Link <Ctrl+L>.

Avanevas dialoogaknas vahekaardil Link klõpsake nupul Choose File… .

Otsige arvutist kodulehekülje kaustast vajalik fail (kodulehekülje alamlehekülg), märgistage ning klõpsake nupul Open.

Lingi lisamise korralduse kinnitamiseks klõpsake nupul OK .

Teie loodavale koduleheküljele on loodud märgistatud pildist link valitud dokumendile.

 

 

Pildi kasutamine lingi loomiseks internetis olevale koduleheküljele

Hüperlingi lisamiseks pildile märgistage pilt, millega soovite hüperlinki siduda, ja klõpsata nupuribal nupul Link  või andke menüüribal korraldus Insert/Link <Ctrl+L>.

Avanevas dialoogaknas vahekaardil Link sisestage veebilehe aadress lahtrisse  Enter a web page location … (Näide: http://www.koduleht.ee)

Lingi lisamise korralduse kinnitamiseks klõpsake nupul OK .

Teie loodavale koduleheküljele on loodud märgistatud pildist link valitud koduleheküljele.

 

 

Linkide eemaldamine ja katkestamine

 

Lingi eemaldamiseks tekstilt või pildilt klõpsake hiire parema klahviga objektil, millel on link, ning valige kuvatavast hüpikmenüüst korraldus Remove Links või andke korraldus Format/Remove Link.

Lingi katkestamiseks klõpsake hiirega lingi lõppu ja andke korraldus Format/ Discontinue Link.

 

Seaded

 

Lehe seaded

 

Lehekülje seadeid saate luua ja muuta korraldusega Format/Page Title and Properties.

Kodulehekülje nimeks on lehekülje salvestamisel sisestatud nimi.

Nime muutmiseks klõpsake Title: lahtris ja tippige uus nimi.

Lehekülje autori nimi sisestage Author: lahtrisse ning lehekülje kirjeldus Description: lahtrisse.

Muudatuste kinnitamiseks klõpsake nupul OK .

 

Värvide ja tausta seadmine

Loodavat kodulehekülge saab muuta atraktiivsemaks, lisades leheküljele värvi. Värvid aitavad eristada infot ning muuta kodulehekülge loetavamaks.

Lehekülje värvide muutmiseks andke korraldus Format/Page Colors and Background.

Avanevas dialoogaknas Page Colors and Background saate muuta tekstide ja lehekülje tausta värvi ning valida kodulehekülje taustaks pildifaili.

 

 

Korraldus

Selgitus

Norma text

Koduleheküljel olev tekst

Link text

Linkide tekst

Active link text

Aktiivsete linkide tekst

Visited link text

Külastatud linkide tekst

Background

Lehekülje taust

Background Image

Veebilehe taustapilt

 

Teksti värvi muutmiseks aktiveerige käsk Use custom colors:  ja seejärel klõpsake muudetava tekstivärvi lahtris  ning valige avanevas aknas sobiv värv.

Kodulehekülje taustaks võite valida ka pildifaili. Pildifaili lisamiseks klõpsake nupul Choose File . Otsige arvutist kodulehekülje kaustast vajalik pildifail, märgistage ning klõpsake nupul Open. Teie poolt lisatava pildifaili asukoha otsetee sisestatakse programmi poolt Background Image: lahtris. 

Pildi lisamise korralduse kinnitamiseks klõpsake nupul OK . Pilt kuvatakse kodulehekülje taustana.

! Taustaks valitud pilt katab ära taustavärvi.

 

 

Üldiste seadete määramine

 

Üldised seaded määravad kodulehekülje loomise protsessis failide salvestamist ja tabelite kujundamist.

 

Üldiste seadete määramiseks andke korraldus Edit/Preferences/Composer.

 

Korraldus

Selgitus

Maximum number of pages listed:

Aktiivsete koostatud või uuendatud lehekülgede arv

Retain original source formatting:

Lehekülge salvestades ja sulgedes kustutatakse kõik üleliigsed tühikud, reavahetused jne.

Reformat HTML source:

Composer võimaldab lehte avades muuta HTML-kuju kergesti loetavaks, lisades selleks HTML-teksti tühikud, reavahetused jne.

Maintain table layout when inserting or deleting cells:

Säilitatakse tabeli ristküliku kujuga ja pärast rea või veeru kustutamist ei asendu rida või veerg tühja rea või veeruga

Use CSS styles instead of HTML elements and attributes:

Määratakse tegevus, mida tehakse Delete klahvi vajutuse puhul, kui eelnevalt on tabelis märgistatud lahtreid.