Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

Tehetséggondozás az informatikában - Webszerkesztés / Rajzelemek, képek beillesztése

Tanulási útmutató

Összefoglalás

Megtanuljuk, hogyan kell a KompoZerben képeket beszúrni, különböző tulajdonságaikat megadni. Szó lesz még az országos versenyek követelményeiben szereplő, flash objektumok beszúrásáról, valamint képtérkép készítéséről is.

Követelmény

Gimp rajzprogram (képtérkép készítéséhez).

Rajzelemek, képek beszúrása

Kép beillesztése

Álljunk kurzorral arra a helyre, ahova be szeretnénk szúrni a kívánt képet! Kattintsunk a BeszúrásKép menüpontra, vagy az eszköztárban a Kép ikonra! Ezután a Kép tulajdonságai párbeszédablak jelenik meg, melyen több fülön találhatjuk a képfájl különböző tulajdonságainak beállításait:

Kép tulajdonságainak beállításai párbeszéd ablaka20. ábra: Kép tulajdonságainak beállításai párbeszéd ablaka

Vissza a tartalomjegyzékhez

Kép tulajdonságainak módosítása

Jelöljük ki a módosítani kívánt képet, majd kattintsunk a BeszúrásKép menüpontra, vagy az eszköztárban a Kép ikonra! Ekkor megjelenik a Kép tulajdonságai párbeszédablak, amelyben az előző fejezetben megismert kép tulajdonságokat tudjuk módosítani.

Vissza a tartalomjegyzékhez

Kép adott színének átlátszóvá tétele és képtérkép készítése

Habár a KompoZer önmagában nem ad lehetőséget semelyikre sem, áthidalva meg tudjuk oldani a problémát: Gimp képszerkesztő alkalmazás segítségével könnyen készíthető átlátszó színű kép, és képtérkép is.

Képtérkép készítése Gimpben

A Gimp-ben Képtérképet a Szűrők → Web → Képtérkép menüpontjával tudunk készíteni. Ehhez előbb nyissuk meg azt a képet, amelyből képtérképet szeretnénk készíteni, majd utána válasszuk az előbb említett menüpontot!

Egy képhez képtérkép készítése Gimpben21. ábra: Egy képhez képtérkép készítése Gimpben
Fontos

Ne feledjük! A képtérképet most GIMP segítségével hozzuk létre, amit majd a KompoZerbe fogunk beszúrni!

A GIMP egy ingyenes, magas szintű képszerkesztő alkalmazás, mely elérhető itt: http://www.gimp.hu/ (utolsó elérés ideje: 2014. VII. 27).

Képtérképek készítésénél alapvetően három fajta területet jelölhetünk ki a képen, amely majd linkként fog funkcionálni:

Ezt a három kijelölési lehetőséget a fenti ábrán, baloldalt láthatjuk, az ablak szélén, fentről lefele. Ezekre az ikonokra kattintva jelölhetjük ki azt a tetszőleges területet, melyre hivatkozást szeretnénk készíteni.

Amint kijelöltünk egy terület, egy párbeszédablak jelenik meg, melyben beállíthatjuk a hivatkozás tulajdonságait.

Kijelölt terület hivatkozásának megadása22. ábra: Kijelölt terület hivatkozásának megadása
Megjegyzés

Érdemes a hivatkozást Relatív hivatkozás tulajdonságát bepipálni (alapértelmezettként így van). Versenyeken rendre előfordul, hogy a diákok abszolút hivatkozással hivatkoznak képekre, amely miatt értékes pontokat veszítenek.

Meglévő területek tulajdonságainak szerkesztése, ill. törlése képtérképen

A már beállított területek tulajdonságai utólag szerkeszthetőek, és törőlhetőek is23. ábra: A már beállított területek tulajdonságai utólag szerkeszthetőek, és törőlhetőek is

A fenti ábrán láthatjuk a korábban látott párbeszédablak egy részét: ha megfigyeljük, láthatjuk, hogy az ablak baloldalán milyen ikonok szerepelnek. Fentről lefele tekintve az utolsó előttivel szerkeszthetjük a listában kijelölt terület tulajdonságait, az utolsóval pedig törölhetjük a listában kijelölt területet.

Képtérkép mentése

Ha elkészültünk a kép képtérképnek elkészítésével Gimpben, akkor mentsük el tetszőleges néven! Egy map kiterjesztésű állományt kaptunk.

Vissza a tartalomjegyzékhez

GIMP-ben készült képtérkép beszúrása KompoZerbe

Előkészületek

Ha Gimpben készítjük el a képtérképet, akkor egy map kiterjesztésű állományt kapunk. Nyissuk meg ezt az állományt egy szövegszerkesztőben! Mi a notepad-et (jegyzettömböt) ajánljuk erre a célra.

Ekkor az alábbi forráskódhoz hasonló kód jelenik meg:

Forráskód<img src="Névtelen" width="250" height="250" border="0" usemap="#map" /> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:Tanar --> <area shape="rect" coords="11,11,122,78" href="http://www.deviantart.com" /> <area shape="circle" coords="170,113,48" href="http://japan.com" /> </map>

Elsőre ijesztőnek tűnhet, de nekünk csak az első sorral kell törődnünk, azon belül is az src=”Névtelen” résszel. A Névtelen helyett írjuk be annak a képnek a relatív hivatkozását, amihez a képtérképet készítettük, majd mentsük el a map állományt!

Képtérkép beillesztése KompoZerbe

Nyissuk meg az előző bekezdésben módosított, Gimpben létrehozott map (képtérkép) állományt ismét egy szövegszerkesztőben, majd másoljuk ki vágólapra a benne található kódot (kijelöljük az egészet, majd CTRL+C)!

Ezután a KompoZerben arra a helyre álljunk a weblapunk szerkesztői nézetében, ahova be akarjuk szúrni a képtérképet, majd a menüben válasszuk a Beszúrás → HTML opciót.

Képtérkép GIMP-ben generált kódjának beszúrása KompoZerbe24. ábra: Képtérkép GIMP-ben generált kódjának beszúrása KompoZerbe

A megjelenő párbeszédablakba szúrjuk be a korábban lemásolt kódot (CTRL+V), majd kattintsunk a Beszúr gombra! Ezzel készen vagyunk: beszúrtuk a képtérképet!

Fontos

A GIMP képtérkép készítési funkciója csak a HTML kódot generálja le! A hozzátartozó képet nekünk kell elhelyezni a nekünk tetsző mappában, és ennek az elérési útját nekünk kell megadnunk a generált kódban, ahogy feljebb ezt már bemutattuk.

Megjegyzés

A képtérképhez tartozó képet érdemes a weblap többi képével egy mappában tárolni.

Vissza a tartalomjegyzékhez

Flash animációk beillesztése

Sajnos animáció beszúrására közvetlenül nincs lehetőség a KompoZerben, a probléma viszont áthidalható a megfelelő HTML kód beszúrásával. Ezt fogjuk most kihasználni! Álljunk a kurzorral arra a helyre, ahova be szeretnénk szúrni a HTML kódot! Válasszuk ki a Beszúrás → HTML opciót, a megjelenő ablakba pedig írjuk be az alábbi kis kódot (az aláhúzott részekre az értelem szerű tartalom kerül)!

Forráskód<object> <embed src="az animáció fájl elérésének helye, és neve" width="szélesség képpontban " height="magasság képpontban"> </embed> </object>

Az src jelentése source, azaz forrás: ide írjuk be a fájl elérési útját, fájlnévvel együtt! A width és height jelentése szélesség és magasság: ezeket állítsuk a feladat által kért értékűre. Az object az objektumot jelent, míg az embed az beágyazást. Így végülis ezt jelenti a fenti kód: objektumot ágyazunk be, ilyen tartalommal, és ilyen méretekkel.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.
Készült az "Országos koordinációval a pedagógusképzés megújításáért” című TÁMOP-4.1.2.B.2-13/1-2013-0007 pályázat keretében.

A tananyag az ELTESCORM keretrendszerrel készült