Informatikai tehetséggondozás: Web- és képszerkesztés

Eötvös Loránd Tudományegyetem Informatikai Kar Média- és Oktatásinformatika Tanszék

Informatikai tehetséggondozás: Web- és képszerkesztés

Készítette: Kiss Csaba Tanári MA, informatika-matematika szak Témavezető: Abonyi-Tóth Andor Média- és Oktatásinformatika Tanszék, tanársegéd, PhD hallgató

Budapest, 2012

Tartalomjegyzék Előszó................................................................................................................................ 1 1.

Rasztergrafikai feladatok megoldása az OKTV és OKATV –ből ......................... 3 1.1.

Technikai tudnivalók a megoldásokkal kapcsolatban .................................... 3

1.2.

Egyszerűbb, bemelegítő feladatok .................................................................. 3

1.2.1.

OKATV 2006 – Első forduló, 1. feladat .............................................................. 3

1.2.2.

OKATV 2006 – Második forduló, 7. feladat ....................................................... 7

1.2.3.

OKTV 2007 – Első forduló, 1. feladat .............................................................. 11

1.3.

1.3.1.

OKTV 2012 - Első forduló, 1. feladat ............................................................... 15

1.3.2.

OKATV 2010 - Második forduló, 5. feladat...................................................... 19

1.4.

2.

Képmontázs készítése ................................................................................... 23

1.4.1.

OKTV 2011 – Harmadik forduló, 1. feladat ..................................................... 23

1.4.2.

OKTV 2011 – Első forduló, 1. feladat .............................................................. 27

Milyen rasztergrafikai feladatokat lehetne a jövőben kiadni? ............................. 31 2.1.

Kihasználatlan funkciók ............................................................................... 31

2.2.

Kép szerkezetére vonatkozó elvárások ......................................................... 31

2.2.1.

Rétegek ellenőrzése ........................................................................................ 32

2.2.2.

Szűrők ellenőrzése .......................................................................................... 32

2.3.

Lehetséges pontszámbeli eltolódás a rajzfeladatok javára ........................... 32

2.3.1.

Rajz feladatok bonyolítása .............................................................................. 32

2.3.2.

Érvek a rajzfeladatok bonyolítása mellett ....................................................... 33

2.3.3.

Megoldási javaslat a pontszám problémára ................................................... 33

2.4.

3.

Összetettebb feladatok .................................................................................. 15

Egy lehetséges jövőbeni rasztergrafikai feladat ........................................... 33

2.4.1.

A feladat szövege: ........................................................................................... 33

2.4.2.

Észrevételek .................................................................................................... 35

2.4.3.

Felhasználható forrásfájlok a kép elkészítése során ....................................... 35

Webszerkesztési feladatok megoldása az OKTV és OKATV –ből ..................... 36 3.1.

Technikai tudnivalók a feladatmegoldásokkal kapcsolatban ....................... 36

3.2.

Könnyebb, egyszerűen megoldható feladatok .............................................. 36

3.2.1.

OKATV 2011 - Harmadik forduló, 5. feladat .................................................... 36

3.2.2.

OKATV 2012 – Harmadik forduló, 6. feladat ................................................... 43

3.3.

Egy összetettebb feladat ............................................................................... 47

3.3.1.

OKTV 2008 – Harmadik forduló, 8. feladat ..................................................... 47

3.4. 4.

Összefoglaló a webszerkesztés feladatokról ................................................ 58

Milyen webszerkesztés feladatokat lehetne a jövőben kiadni? ........................... 59 4.1.

A jelen versenyfeladatairól ........................................................................... 59

4.2.

Kihasználatlan funkciók ............................................................................... 59

4.3.

Külső stíluslapok használata: javasolt részfeladat ........................................ 60

4.3.1.

4.4.

Stíluslapok ellenőrzése .................................................................................... 60

Többlet pontok problémája........................................................................... 60

4.4.1.

Alap probléma: több feladat, több pont ......................................................... 60

4.4.2.

Megoldási javaslat [2] ..................................................................................... 60

4.5.

Egy lehetséges, jövőbeni webszerkesztés feladat ......................................... 61

4.5.1.

Feladat szövege ............................................................................................... 61

4.5.2.

Mellékletben megkapott minták..................................................................... 65

Összegzés ........................................................................................................................ 70 Mellékletek – Képszerkesztés (rasztergrafika) ............................................................... 71 5.

Képfájl tulajdonságai ........................................................................................... 72 5.1.

Méret............................................................................................................. 72

5.1.1.

Méret megadása új fájl létrehozása esetén .................................................... 72

5.2.

Felbontás....................................................................................................... 72

5.3.

Színmélység, színséma ................................................................................. 73

5.3.1.

Megadása új kép esetén ................................................................................. 73

5.3.2.

Módosítása meglévő kép esetén .................................................................... 73

6.

Képfájl transzformációk ...................................................................................... 74

7.

Színbeállítások ..................................................................................................... 75 7.1.

Elő- és háttérszín .......................................................................................... 75

7.2.

Színek megadása színkódok alapján ............................................................ 76

7.2.1.

Szín megadása RGB koordinátákkal ................................................................ 76

7.2.2.

Szín megadása HTML szabvány szerint ........................................................... 77

7.3.

8.

Háttérszín ...................................................................................................... 77

7.3.1.

Háttérszín megadása új kép létrehozásakor ................................................... 78

7.3.2.

Háttérszín megadása – meglévő kép esetén .................................................. 78

Ecsetek ................................................................................................................. 79 8.1.

Ecset tulajdonságai ....................................................................................... 79

8.1.1.

Konkrét ecset kiválasztása .............................................................................. 80

8.1.2.

Szín .................................................................................................................. 80

8.1.3.

Méret............................................................................................................... 80

8.1.4.

Átlátszóság ...................................................................................................... 81

Szabadkézi rajzolás .............................................................................................. 82

9.

9.1.

Egyenes vonal rajzolása ............................................................................... 82

9.2.

Törött vonal rajzolása ................................................................................... 82

9.3.

Vonalak húzása adott középpont körül, szabályos szögenként .................... 82

10.

Kijelölések........................................................................................................ 83

10.1. 10.1.1.

Varázspálca...................................................................................................... 83

10.1.2.

Szín szerinti kijelölő ......................................................................................... 84

10.2.

A SHIFT billentyű hatása kijelölés közben – Méretarány beállítása ................ 85

10.2.2.

A SHIFT billentyű hatása kijelölés előtt – Hozzáadás a kijelölt területhez ...... 85

10.2.3.

A CTRL billentyű hatása kijelölés közben – kijelölés megadása középpontból86

10.2.4.

A CTRL billentyű hatása kijelölés előtt – Kivonás a meglévő kijelölésből ....... 86

10.2.5.

Az ALT billentyű hatása – kijelölt terület mozgatása ...................................... 87

Szerkesztési lehetőségek ........................................................................... 87

10.3.1.

Kijelölt terület másolása, kivágása, beillesztése ............................................. 87

10.3.2.

Kijelölt terület kitöltése színnel ....................................................................... 88

10.3.3.

Kijelölt terület kitöltése színátmenettel.......................................................... 89

10.3.4.

Szabadkézi rajzolás kijelölt területen belül ..................................................... 90

10.4.

Vágólapról beillesztett kép(részlet) szerkesztése ..................................... 90

10.4.1.

Kép beillesztése ............................................................................................... 90

10.4.2.

Beillesztett kép forgatása ................................................................................ 90

Alakzatok, görbék ............................................................................................ 92

11.1.

Alakzatok készítése................................................................................... 92

11.1.1.

Kör, ellipszis, négyzet, téglalap rajzolása ........................................................ 92

11.1.2.

Háromszög rajzolása ....................................................................................... 92

11.1.3.

Szabályos háromszög rajzolása ....................................................................... 93

11.2.

12.

Általános műveletek kijelölésekkel - gyorsbillentyűk .............................. 84

10.2.1.

10.3.

11.

Kijelölések fajtái ....................................................................................... 83

Görbék készítése ....................................................................................... 94

11.2.1.

Görbék (útvonalak) elhelyezése ...................................................................... 94

11.2.2.

Útvonalak szerkesztése ................................................................................... 94

11.2.3.

Görbe rajzolása ............................................................................................... 94

11.2.4.

Záró lépések – útvonal törlése ........................................................................ 95

Feliratok a képen .............................................................................................. 96

12.1.

Feliratok elhelyezése................................................................................. 96

12.2. 12.2.1.

Alap szerkesztési lehetőségek ......................................................................... 96

12.2.2.

Meglévő feliratok szerkesztése ....................................................................... 97

12.3. 13.

Feliratok szerkesztése ............................................................................... 96

Feliratok áthelyezése................................................................................. 97

Képmanipulálás, képtranszformáció ................................................................ 98

13.1.

Kép tükrözése ill. forgatása ...................................................................... 98

13.2.

Kép átméretezése ...................................................................................... 98

13.2.1.

Átméretezés méretarányosan ........................................................................ 98

13.2.2.

Átméretezés méretarány megtartása nélkül .................................................. 98

13.3.

Vászon méretének módosítása .................................................................. 99

13.4.

Világosság, kontraszt beállítások .............................................................. 99

14.

Segédvonalak, exportálás ............................................................................... 101

14.1. 14.1.1.

Segédvonalak megadása ............................................................................... 101

14.1.2.

Segédvonalak módosítása ............................................................................. 102

14.1.3.

Segédvonalak törlése .................................................................................... 102

14.2. 15.

Segédvonalak .......................................................................................... 101

Exportálás ............................................................................................... 102

Kitekintés: Rétegek és szűrők ........................................................................ 103

15.1.

Rétegek ................................................................................................... 103

15.1.1.

Rétegekről általában [3] ................................................................................ 103

15.1.2.

Rétegek menü ............................................................................................... 104

15.1.3.

Új réteg beszúrása ......................................................................................... 105

15.1.4.

Réteg törlése ................................................................................................. 105

15.1.5.

Rétegek sorrendjének megváltoztatása........................................................ 105

15.1.6.

Munka, rajzolás adott rétegen ...................................................................... 106

15.2.

Szűrők [3] ............................................................................................... 106

15.2.1.

Szűrőkről általában........................................................................................ 106

15.2.2.

Szűrők alkalmazása ....................................................................................... 107

15.2.3.

Ízelítő néhány szűrő fajtából ......................................................................... 107

Mellékletek - Képszerkesztés (vektorgrafika) .............................................................. 109 Mellékletek - Webszerkesztés ...................................................................................... 110 16.

A KompoZer felhasználói felülete ................................................................. 111

16.1.

Szerkesztőfelület ..................................................................................... 111

16.2.

Szöveg és bekezdés eszköztár................................................................. 112

16.3.

Fájl- és objektumok eszköztár ................................................................ 112

16.4.

17.

Webhelykezelő vagy DOM Explorer ..................................................... 113

16.4.1.

Webhelykezelő .............................................................................................. 113

16.4.2.

DOM Explorer ................................................................................................ 113

Műveletek szövegekkel .................................................................................. 113

17.1.

Szövegek bevitele ................................................................................... 113

17.2.

Szövegek formázása ............................................................................... 113

18.

Lap tulajdonságainak megadása ..................................................................... 114

18.1.

Háttérszín vagy háttérkép megadása. ...................................................... 114

18.1.1.

Háttérszín megadása ..................................................................................... 114

18.1.2.

Háttérkép megadása ..................................................................................... 115

18.2.

Linkek színe ............................................................................................ 115

18.3.

Oldalcím és meta elemek ........................................................................ 115

19.

18.3.1.

Oldalcím ........................................................................................................ 115

18.3.2.

Meta elemek ................................................................................................. 116

Hivatkozások és könyvjelzők ......................................................................... 116

19.1.

Hivatkozás elhelyezése ........................................................................... 116

19.2.

Könyvjelző elhelyezése .......................................................................... 117

20.

Bekezdések formázása ................................................................................... 118

20.1.

Igazítás .................................................................................................... 118

20.2.

Felsorolás ................................................................................................ 118

20.3.

Számozott felsorolás ............................................................................... 119

20.4.

Címsor és egyéb formátum megadása .................................................... 119

21.

Rajzelemek, képek beillesztése ...................................................................... 119

21.1.

Kép beillesztése ...................................................................................... 119

21.2.

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

21.3.

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

21.4.

Flash animációk beillesztése ................................................................... 120

22.

Táblázatkészítés ............................................................................................. 121

22.1.

Táblázat beszúrása .................................................................................. 121

22.2.

Táblázat tulajdonságainak szerkesztése .................................................. 122

22.2.1.

Méret............................................................................................................. 122

22.2.2.

Szegély ........................................................................................................... 123

22.2.3.

Cellák térköze ................................................................................................ 123

22.2.4.

Táblázat igazítása .......................................................................................... 123

22.2.5.

Háttérszín ...................................................................................................... 123

22.3.

Sorok, oszlopok beállításai ..................................................................... 124

22.3.1.

Sor magasságának beállítása......................................................................... 124

22.3.2.

Oszlop szélességének beállítása .................................................................... 125

22.3.3.

Cella, sor vagy oszlop háttérszínének beállítása ........................................... 125

22.4. 22.4.1.

22.5.

Táblázat cella feltöltése tartalommal ...................................................... 125 Cellatartalom igazítása .................................................................................. 125

Cellák összevonása és felosztása ............................................................ 126

22.5.1.

Cellák összevonása ........................................................................................ 126

22.5.2.

Cellák felosztása ............................................................................................ 126

22.6.

Sorok, oszlopok törlése ........................................................................... 126

22.7.

Sorok, oszlopok beszúrása ...................................................................... 126

23.

Beágyazott keret használata ........................................................................... 127

24.

Űrlapok ........................................................................................................... 127

24.1. 24.1.1.

Űrlap nevének megadása .............................................................................. 128

24.1.2.

Művelet URL-je .............................................................................................. 128

24.1.3.

Űrlap tartalmának továbbítása: GET és POST ............................................... 128

24.1.4.

Űrlap tartalmának továbbítása e-mailben [7] ............................................... 128

24.1.5.

Űrlap tartalmának feldolgozása: CGI-vel [9] ................................................. 129

24.2.

25.

Űrlap általános tulajdonságainak megadása ........................................... 127

Űrlapmezők beszúrása ............................................................................ 129

24.2.1.

Szövegmező ................................................................................................... 130

24.2.2.

Választókapcsoló ........................................................................................... 130

24.2.3.

Jelölőnégyzet ................................................................................................. 131

24.2.4.

Szövegterület ................................................................................................ 131

24.2.5.

Legördülő menü ............................................................................................ 133

24.2.6.

„Alaphelyzet” és „Elküldés”gomb hozzáadása.............................................. 134

Stílusok [8] ..................................................................................................... 136

25.1.

Egyszerű stílusok készítése ..................................................................... 136

25.1.1.

Belső stílusok készítése ................................................................................. 137

25.1.2.

Külső (csatolt) stílusok készítése ................................................................... 139

25.2.

Stílusok szerkesztése............................................................................... 140

Irodalomjegyzék ........................................................................................................... 141

Előszó Szakdolgozatom elsődleges célja, hogy segítse az informatika alkalmazói OKTV-re illetve OKATV-re készülő diákokat a felkészülésben, tanáraikat pedig a felkészítésben. Ezzel egyszerre persze segítséget nyújt mindenki számára, aki az informatika középszintű érettségi, illetve az ECDL szintjén már túlmutató ismereteket és rutint szeretne szerezni a web- és képszerkesztés témakörében. Azért választottam ezt a célt, mert azt tapasztalom, hogy a könyvesboltok polcain és az interneten is olyan szakirodalom található, mely a web- és képszerkesztés alapjait mutatja be. Olyannal viszont még nem találkoztam, ami ennél magasabb szintű, de mégis könnyen érthető, gyakorlatias, és átfog minden – a mindennapi életben is felhasználható – témakört. Szakdolgozatom hangvétele az egyszerűségre, érthetőségre törekszik, hogy mind a középiskolás korosztály mind pedig a web- és képszerkesztés témakörében már valamennyire jártas olvasó számára is könnyen emészthető legyen. Nem írok úgy általában a versenyekről, hiszen akit ezen információk érdekelnek, az úgyis utána néz az interneten (pl. http://tehetseg.inf.elte.hu). Munkám során igyekeztem minél gyakorlat-orientáltabb lenni. Olyan feladatokat válogattam az eddigi OKTV és OKATV feladatsorokból (ezen belül is a web- és képszerkesztés témaköreiből), melyekről úgy gondoltam, hogy jól lefedik azokat az eszközöket, részfeladatokat melyek az eddigi versenyeken előfordultak, és egyben egy lehetséges megoldást adnak bizonyos egyedi problémákra. Ezeknek egy általam ajánlott megoldásán vezetem végig az olvasót. A megoldás főbb lépéseit minden példa végén képsorozatokkal szemléltetem. Az egyes témaköröket (web- és képszerkesztés) egy-egy jövőbetekintéssel zárom le: milyen irányba lehetne továbbhaladni a jövő versenyfeladataival? A mellékletekben az olvasó részletesebb leírást találhat a szakdolgozat törzsanyagában felhasznált alkalmazások (Gimp, és KompoZer) kezeléséről – olyan funkciók, eszközök

kerülnek

bemutatásra,

melyek

a

jelenlegi

informatika

alkalmazói

OKTV/OKATV követelményei1 között szerepelnek.

1

Lásd: http://tehetseg.inf.elte.hu/nemesa/index.html „Szükséges alapismeretek” (Utolsó Megtekintés: 2012.07.29)

-1-

Mint az a fentiekből is kitűnik, munkám nem azon olvasóknak készült, akik még csak most ismerkednek a web- és képszerkesztéssel. Helyettük elsősorban azoknak ajánlom, akik legalább a középszintű érettségi2 vagy az ECDL3 vizsga letételéhez szükséges tudásszinttel rendelkeznek, mivel ezekre az ismeretekre építek. Végezetül ajánlom szaktársaim hasonló jellegű, de más témakörben megírt szakdolgozatait is:

 Barta Anita: Szövegszerkesztés és prezentációkészítés, ELTE IK, 2012.  Csongrádi Tamás: Adatbázis-kezelés, ELTE IK, 2012.  Molnár Katalin: Táblázatkezelés, ELTE IK, 2012. Budapest, 2012. november A szerző

2

Lásd itt: http://www.oh.gov.hu/letolt/okev/doc/erettsegi_40_2002_201201/informatika_vk.pdf [Utolsó megtekintés: 2012.06.28.] 3 Lásd itt: http://njszt.hu/ecdl/kovetelmenyek [Utolsó megtekintés: 2012.06.28.]

-2-

Rasztergrafikai feladatok megoldása az OKTV és OKATV –ből

1. Rasztergrafikai feladatok megoldása az OKTV és OKATV –ből A Gimp legfontosabb – és az OKTV/OKATV versenykiírásában is, a „szükséges alapismeretek” között felsorolt [2] – funkcióit a mellékletben található alfejezetben gyűjtöttem össze. A következőkben rátérünk a versenyfeladatok megoldására.

1.1.

Technikai tudnivalók a megoldásokkal kapcsolatban

Az egyes feladatokhoz lépésenkénti leírás tartozik. Minden lépésenkénti leírás után a fontosabb lépésekről képsorozatot találhat az olvasó, ahol minden lépéshez további leírás tartozik. Ezeket a lépéseket A, B, C, … betűivel jelöljük. A feladatok lépésenkénti leírásánál megemlítjük, hogy melyik állapot (pl.: A lépés) tartozik a képek közül.

1.2.

Egyszerűbb, bemelegítő feladatok

A verseny archívumában több, egyszerűbb feladatot is lehet találni. Ezek közül szemezgettünk, és ezek (egy lehetséges) megoldásán vezetjük végig az olvasót. 1.2.1.

OKATV 2006 – Első forduló, 1. feladat

A feladat szövege [2]: Háttér (12 pont) A Regős Bendegúz filmszínháznak szüksége van egy olyan grafikára, amelyet a szórólapok és a mozijegyek háttereként felhasználhat (hatter.png). A kép 200 képpont széles és 100 képpont magas legyen, háttere legyen világoskék! A kép bal oldalán (alul) és jobb oldalán (felül) világoslila színnel a „Regős Bendegúz filmszínház” szöveg legyen látható, dőlt betűkkel. (A filmszínház szó új sorban szerepeljen, a felette lévő szöveghez képest középre legyen igazítva!) A bal és jobb oldali szöveg méretében, betűtípusában, színében pontosan egyezzen meg! A szöveg felett, illetve alatt legyen látható egy filmvetítőgép is, szintén világoslila színnel! A gép egy téglalapból, két körből áll. A lába két vastag vonal legyen, a vetítő része, pedig egy háromszög! A képen szereplő két filmvetítőgép ugyanolyan legyen!

-3-


Javasolt megoldás: Megoldási terv: A tényadatok ismertek (pl. szélesség, magasság), már csak a kép „felépítésén” kell gondolkodnunk. Miért mondom, hogy „felépítésén”? A válasz egyszerű: a Gimp itt bemutatott „képességein” keresztül is látható, hogy összetettebb alakzatokat csak több, egyszerűbb, mondhatni elemi alakzatból építhetünk fel. A mintaképen látható kamera – amit természetesen csak egyszer készítünk el, majd lemásoljuk – jól láthatóan néhány elemi alakzatból épül fel (amúgy ezt a feladat szövege is elárulja). Ezeket mind könnyedén elkészíthetjük az eddig bemutatott Gimp eszközökkel. Lássunk is neki! Javasolt megoldás lépései: 1. Állítsuk be a Háttérszínt világoskékre! 2. Hozzunk létre egy új képfájlt (FájlÚj), a méretnél állítsuk be a megfelelő szélességet, magasságot (200x100 px)! 3. A mintának megfelelő helyre készítsünk egy téglalap kijelölést a Téglalap kijelölési eszközzel, majd válasszunk ki egy lila Előtérszínt és a Kitöltési eszközzel színezzük lilára a kijelölést! 4. Ellipszis kijelölési eszközzel készítsük el a két filmtekercset! Érdemes egyszer elkészíteni a megfelelő kijelölést, majd a kijelölést az ALT gomb lenyomásával arrébb tudjuk vinni: így mindkét filmtekercset ugyanolyan méretben elkészíthetjük. Mindkét kijelölésnél színezzük ki lilára a kijelöléseket (A lépés)! 5. Szabadkézi kijelölő eszközzel készítsük el a kamera lencséjét, egy háromszöget, majd színezzük ki az eddigiekhez hasonló módon! 6. A kamera lábait megfelelő vastagságú Ecset eszközzel készítem el (én 5 px vastagságúval csináltam, B lépés). Ne felejtsük! Egyenes vonalat a SHIFT gomb lenyomásával tudunk készíteni (lásd: Egyenes vonal rajzolása, 82. oldal) 7. Sajnos az én kamerám kicsit nagyobbra sikerült a kelleténél. Ez versenyen is előfordulhat, de semmi probléma! Méretezzük át (C lépés)! Ehhez előbb ki kell jelölni a kamerát (pl. Téglalap kijelölő eszközzel), majd utána használjuk

-4-


az Átméretezési eszközt! Persze ha a kedves olvasónak megfelelő méretű a kamerája, akkor ez a lépés kihagyható  8. Az átméretezett kamerát másoljuk le (CTRL+C, majd CTRL+V), Áthelyezési eszközzel vigyük a beillesztett kamerát a megfelelő helyre, majd CTRL+Hval (vagy RétegRéteg rögzítése) fixáljuk a helyét. 9. A kért szöveget beillesztjük a megfelelő helyre. Az előtérszín továbbra is lila, ezért ezen már nem kell változtatni. Hogy a szöveg két sorba kerüljön, a kijelölt szövegrészt megfelelő méretűre kell kijelölni a Szövegeszköz használata során (D lépés). 10. A beírt szöveget duplikáljuk! Jobbklikk a szövegre, majd RétegRéteg kétszerezése. Ezzel készítettünk egy másolatot a szövegdobozról (E lépés). 11. Áthelyezési eszközzel vigyük a duplikált réteget a kívánt helyre. 12. A kész képet Exportáljuk a kért kiterjesztéssel, a kért névvel. Nézzük a megoldás főbb lépéseit képekben!

-5-


C - Sajnos a kamera túl nagyra sikeredett, B - A kamera lábát Ecset eszközzel készítjük, ezért jelöljük ki, majd az Átméretezési eszközA - Kijelölő eszközökkel elkészítjük a kamera teskihasználva, hogy lehet vele egyenes vonalat tét zel zsugorítjuk. A kész kamerát duplikáljuk is húzni (másolással, beillesztéssel).

D - A Szövegeszköz dobozát úgy jelöljük ki, hogy hosszában ne férjen ki a teljes szöveg: így két soros lesz.

E - A szöveget megkétszerezzük.

F - Áthelyezzük a duplikált szöveget a megfelelő helyre: kész!


Érdemes megvizsgálni a verseny honlapján elérhető pontozási útmutatót [2]! Értékelés: A. A kép 200 képpont széles és 100 képpont magas 2 pont B. Háttere világoskék 1 pont C. A szövegek és a rajzok világoslila színnel készültek 1 pont D. Bal oldalán (alul) szerepel a dőlt szöveg, a filmszínház szöveg új sorban van középen 1+1 pont E. Pontosan ugyanilyen szöveg szerepel a kép jobb oldalán is 1 pont F. A mozigép szerepel világoslila téglalap alappal, van két kör a filmtekercsnek, van vetítőrész, és van két lába (vastag vonal) 1+1+1+1 pont G. Ugyanaz a gép szerepel a kép bal és jobb oldalán is, az elrendezése a feladatban megadott. 1 pont A pontozási útmutatóból világosan látszik, hogy helyesen jártunk el: például arra nem kellett figyelni, hogy a szöveg pontosan középre legyen igazítva az alatta ill. felette lévő kamerához képest. A többi feladatnál is érdemes megvizsgálni a pontozási útmutatót (lásd: http://tehetseg.inf.elte.hu)! Jelen munka méretbeli keretei miatt ezekre nem térnék ki minden egyes feladatnál. 1.2.2.

OKATV 2006 – Második forduló, 7. feladat

A feladat szövege [2]: 7. feladat: Rajzolás – Ötkarika (9 pont) Rajzold meg az olimpiai mozgalom jelképét,

az

olimpiai

ötkarikát

(ötkarika.bmp)! Ügyelj a színek sorrendjére (felső sorban: sötétkék, fekete, piros, alsó sorban: sárga, sötétzöld) és vedd figyelembe, hogy a karikák milyen módon kapcsolódnak egymásba, melyik rész látható, és melyik van kitakarva! Javasolt megoldás: Megoldási terv: Egy fura dolog feltűnhet: a feladat szövege semmit sem mondott a kép méreteiről. Ebben tehát szabadkezünk van. A kép igen egyszerű: 5 karikából áll. Karikák rajzolásá-

-7-


ra a Gimpben kijelölések körberajzolásával van mód. Ha kész az öt karika, radírozással és újrarajzolással megoldhatjuk a kihagyásokat, és a takarásokat is; ebben segítségünkre lehet a szín szerinti kijelölő is. A karikák elhelyezését kapcsolódási sorrendben fogom véghezvinni (tehát egy karika lent, egy fent és így tovább). Egy dologra érdemes figyelni: a karikákat jól kell tudni elhelyezni. Ha túl közel kerülnek egymáshoz, nem fér el a többi, ha túl messze, akkor szimmetriátlan lehet az egész. Lássunk hozzá! Javasolt megoldás lépései: 1. Hozzunk létre egy tetszőleges méretű képfájlt, fehér háttérrel (mi 640x400 px méretű képet hoztunk létre). 2. Készítsük el a legelső, bal felső karikának a kijelölését! Ne feledjük: szimmetrikus (1:1-es arányú) kijelölést a SHIFT lenyomásával, középpontos kijelölést a CTRL lenyomásával tudunk elérni. 3. Amint kész az első karika kijelölése, húzzunk le a tetejéhez egy segédvonalat! Ezzel majd el tudjuk érni, hogy az összes felső karika egy vonalban legyen (A lépés). 4. Válasszunk kék Előtérszínt, majd végezzük el a kijelölés körberajzolását! (SzerkesztésKijelölés körberajzolása). 5. Folyamatosan tartsuk nyomva az ALT gombot: ezzel át tudjuk helyezni a kijelölést alulra, a második karika helyéhez. Amint áthelyeztük, húzzunk egy vízszintes segédvonalat alulra is: ezzel az alsó karikákat is egy vonalba tudjuk helyezni (B lépés). 6. Válasszunk sárga Előtérszínt, és végezzük el ismét a kijelölést körbe rajzolását. 7. Az előző műveleteket (az eddigi két segédvonal használatával) végezzük el a maradék karikára is: mindegyikre a megfelelő színt válasszuk ki! 8. Amint megvan az öt karika, Színszerinti kijelölővel jelöljük ki a kék karikát, majd válasszunk ki fehér Háttérszínt. Válasszuk ki a Radíreszközt, és válasszunk hozzá az Eszközbeállításai közül „éles” körvonalú, 20 px széles ecsetet. Radírozzuk ki az alsó kapcsolódási pontot a sárga karika körül, ahol a sárga karikának kell felül lennie. A kijelölés miatt csak a kijelölt részen hat a radír (C lépés).

-8-


9. Ismételjük meg az eljárást a sárga karikára: most a kék karikánál lévő, felső kapcsolódási pontnál radírozzunk ki megfelelő területű részt a sárga karikából. Itt kell a kék karikának felül lennie (D lépés). 10. Szüntessük meg a kijelölést (CTRL+SHIFT+A), majd válasszunk kék Előtérszínt, és használjuk a Ceruza eszközt! A kék karikának elől kell lennie a sárga és a kék karika felső csatlakozási pontjánál. A sárga karikát már kiradíroztuk, most ezen a részen ki kell egészíteni a kék karikát, hogy az legyen látszólag felül. Nagyítsunk rá a Nagyítóeszközzel a kérdéses részhez, hogy pontosabban tudjunk rajzolni: majd egészítsük ki a kék karikát. Ezzel kész van két féle kapcsolódási pont (E lépés).. 11. Végezzük el a műveletet a többi kapcsolódási pontra is (F lépés).!

-9-


A – A köröket egy kijelöléssel készítjük el. A kijelölés áthelyezésében két segédvonal segít: egy a lenti karikákra, egy a fentihez.

D – Ahol felül kell lennie a karikának, ott Ceruza eszközzel kiegészítjük: ehhez ránagyítunk, hogy pontosabban tudjunk dolgozni.

C – A karikákból leradírozunk a kérdéses B – A kör kijelölés áthelyezésekor a kijelölés helyeken. Ehhez előbb Színszerinti kijelölőa segédvonalhoz „tapad”, ezért könnyebbé vel kijelöljük őket: így csak a kijelölt terüleválik a szép elhelyezés. ten tudunk radírozni (éppen ezért a képen látható sárga karika nem sérül)

E – A ceruza eszköz „élesen” fog, így a karika kiegészítése nem feltűnő..

F – Az összes karikára elvégezve a szükséges radírozásokat és kiegészítéseket elkészülünk.


1.2.3.

OKTV 2007 – Első forduló, 1. feladat

A feladat szövege [2]: 1. feladat: Logo (10 pont) Készítsd el a cég logóját, amelynek a különféle szórólapokon és reklámkiadványokban kell szerepelnie (céglogo.gif vagy céglogo.jpg)! A kép 250 képpont széles és 250 képpont magas legyen, fehér háttérrel! A kép közepén egy piros körvonalú, világoszöld színnel kitöltött házikó legyen látható! A házikó teteje egy piros színű, kitöltött háromszög legyen! A jobb oldalára rajzolj egy sötétkék kéményt is, amelyből szabad kézzel megrajzolt füst szálljon fel! A háznak legyen két egyforma méretű, sötétkék körvonalú ablaka, amelyek háttere világossárga legyen! A bal oldali ablak belsejében egy piros R betű, jobb oldali ablakában pedig egy piros T betű és egy pont szerepeljen! A betűk ne lógjanak ki az ablakból! A ház alsó részén a KulipintyÓ szöveg szerepeljen úgy, hogy a nagy K betű a ház bal oldalán helyezkedjen el, a nagy Ó betű pedig a jobb oldalán! A fennmaradó szöveg minél jobban töltse ki a ház belsejében a rendelkezésre álló teret! A K és Ó betű érjen hozzá a ház falához! A ház alatt egy sötétkék színnel kitöltött téglalap legyen látható, amely a K betű kezdetétől az Ó betű végéig tart! Javasolt megoldás: Megoldási terv: Vizsgáljuk meg a képet: először érdemes lehet a geometriai részeket elkészíteni, tehát magát a kis házat. Utólag a szöveget sokkal egyszerűbb rárakni, hisz a háztól függ, hogy hova kell kerülnie. A képet alkotó geometriai síkidomok könnyen megállapíthatóak, nem annyira nehéz, mint az előző, kamerás feladat esetén. Lássunk is neki! Javasolt megoldás lépései: 1. Változtassuk az Előtérszínt fehérre, majd váltsuk át Háttérszínre! 2. Hozzunk létre egy új képfájlt (FájlÚj), a méretét állítsuk megfelelőre (200x250 px)! 3. A kép közepére készítsünk egy téglalap kijelölést, majd válasszunk ki egy piros Előtérszínt. 4. A SzerkesztésKijelölés körberajzolása opciót választva rajzoljuk körbe a kijelölést! Én 2px vastagságú körberajzolást választottam. Ha nem sikerült

- 11 -


teljesen a kép közepére helyezni a kijelölést, akkor a már megrajzolt piros keretet vágjuk ki, és illesszük be újra. Vigyük a kép közepére, majd fixáljuk a kivágás helyét CTRL+H-val (A lépés) 5. Készítsük el a ház egy ablakát ugyanolyan technikával, mint az előző lépésben (a kijelölés körberajzolását ez esetben kék színnel kell elvégezni)! Ha kész, készítsünk róla másolatot, és helyezzük el. Nekem sajnos nem sikerült teljesen a ház közepére rakni a két ablakot, de kivágással majd beillesztéssel elhelyeztem a megfelelő helyen (B lépés). 6. Segédvonalat használva készítsük el a ház tetejét! Húzzunk be egy vízszintes segédvonalat a ház tetejéhez: ezen lesz a tető. Majd a szabadkézi kijelölővel húzzunk be a segédvonalon a ház tetejének alapját: a segédvonalnak hála a kijelölés a segédvonalhoz illeszkedik („hozzátapad”), így könnyű olyan kijelölést készíteni, amely pontosan illeszkedik a ház tetejéhez (C lépés). 7. A Szabadkézi kijelölővel fejezzük be a kijelölést: készítsük el a háromszög alakú kijelölést, majd színezzük be pirosra! 8. Töltsük fel a házat világoskék színnel, majd az ablakokat világossárga színnel (a Kitöltés eszköz segítségével, D lépés)! 9. A háztető jobb oldalára készítsünk a kéménynek egy kis kijelölést. A kijelölt részt töltsük fel kék színnel: a háztető nem színeződik be, hisz az már piros színű (E lépés). 10. Ecset eszközt kiválasztva rajzoljunk a kéményhez kék füstöt! Én 2px széles ecsetet használtam. 11. Piros Előtérszínt választva, külön-külön írjunk be a Szövegeszköz segítségével egy R és egy T. feliratot a ház két ablakába. A pontos elhelyezésnél most is segíthetnének a segédvonalak. Mi viszont kurzorokkal vittük a helyükre a betűket: bármely kijelölt objektumot a billentyűzeten található nyilakkal finoman el lehet helyezni (bal, jobb, fel vagy le irányba). 12. A ház aljába elhelyeztük a következő szöveget (sötétkék előtérszínnel): „ulipinty”. Tehát a K és Ó betűket külön fogjuk a képre helyezni. A szöveget az előző lépésben említett nyilakkal finoman ráhelyezzük a ház aljára (F lépés). 13. Elhelyezzük az Ó és K betűket. Csak az egyiket készítjük: a K-t, majd a másikat duplikáljuk (jobbklikk a betűre, majd a gyorsmenüből: RétegekRéteg kétszerezése). A duplikált réteget elhelyezzük a ház másik felén, átírjuk Ó-ra, - 12 -


és ismét a billentyűzeten található nyilak segítségével finoman a ház oldalához visszük. 14. A szöveg alatti csíkhoz segédvonalat használunk: a K és Ó betűk külső széleihez behúzunk egy-egy, függőleges segédvonalat. A Téglalap kijelölő eszközzel a két segédvonal közé kijelölünk egy megfelelő vastagságú téglalapot: a szélességével nem kell törődnünk, mert a kijelölés két vége pontosan a segédvonalakhoz illeszkedik (G lépés). 15. Feltöltjük sötétkék színnel a segédvonalak segítségével kijelölt téglalapot. 16. A munkát exportáljuk a kért formátumban. A leírt lépések önmagukban talán keveset mondanak, ezért is mellékeljük a megoldás főbb lépéseit a következő oldalon.

- 13 -


B – a ház ablakait az előző lépéshez hasonlóan, Kijelölés körberajzolá- C – Egy segédvonalat használva A – A kép közepére elhelyezett sával készítjük el. Ha nem sikerül készítjük el a ház tetejét. A segéd- D – Színezzük ki a házat a kért szíkijelölést körberajzoljuk pirossal pont középre tenni, utólag még át- vonalhoz „hozzátapad” a kijelölés nekkel. rakhatjuk őket: kivágással, majd széle. beillesztéssel.

G – A szöveg alatti kék vonalat két, E - A kéményt téglalap kijelöléssel függőleges segédvonal segítségével készítjük el, majd kiszínezzük: a F – Az ulipinty feliratot a ház aljáH – A kész képet a kért formátumkészítjük el: a kijelölés itt is „hozzáháztető nem lesz kék, hisz az már hoz illesztjük. ban exportálom. juk tapad”, ezért csak a vastagságpiros színű. gal kell törődni.


1.3.

Összetettebb feladatok

Az alábbi feladatok jellegzetessége, hogy nem hangsúlyozottan a geometria alakzatok elhelyezésén van a hangsúly, hanem többféle eszközzel való manipuláláson. Ilyen szempontból összetettebbek, de nem feltétlenül nehezebbek az eddig bemutatott feladatoknál. 1.3.1.

OKTV 2012 - Első forduló, 1. feladat

A feladat szövege [2]: 1. feladat: Rajzolás – Vaktérkép készítése (20 pont) A Duna-terkep.png felhasználásával készíts egy vaktérképet vakterkep néven! A vaktérkép egy olyan feladathoz kell, ahol a sorszámmal jelölt városok/országok nevét meg kell adni, illetve a feltüntetett képet a megfelelő városhoz kell kötni!

Ügyelj a következőkre! • A képen helyezz el egy vékony, fekete belső szegélyt (a kép mérete ne változzon meg)! • Az eredeti képről el kell távolítanod a Bécs, Belgrád, Bulgária feliratokat, az Ukrajna szöveget pedig az eredeti helyéhez képest balra kell mozgatnod, hogy a jobb felső sarokba kerülhessen a pozsonyi vár képe! • Amikor a Belgrád szöveget eltávolítod, a Morava vonala is megsérül. Állítsd helyre úgy, hogy ne lehessen észrevenni ezt a módosítást! • A sorszámokat piros színnel kell elhelyezned a feltüntetett helyeken! • Az 1-es és 2-es számoknál lévő fekete kör helyett piros kitöltésű és körvonalú, legfeljebb 16 képpont átmérőjű kört kell elhelyezned! • Bulgária területét sárga színnel töltsd ki! • A pozsonyi vár képét egy diafelvételről szkenneltük. Sajnos egy kis hiba történt a digitalizáláskor, a kép vízszintesen tükrözve lett. Hozd helyre a hibát, mielőtt elhe-

- 15 -


lyezed a képet a jobb felső sarokban! Figyelj arra, hogy a kép széle nem lóghat rá Moldávia határára! • Helyezd el a Vaktérkép szöveget fehér színnel a bal alsó sarokban, egy fekete téglalapban! Javasolt megoldás: Megoldási terv: Komolyabb tervre nincs szükség, nem úgy, mint az eddigieknél: hisz itt nincsenek annyira hangsúlyosan geometriai alakzatok. Érdemes az „ügyelj a következőkre” felsorolás lépéseit követni! Hisz valóban: előbb mindig a kép hátterében lévő dolgokkal érdemes kezdeni a munkát (ez esetben magával a térképpel), majd utólag kell a fentebb levő dolgokkal foglalkozni: a vár képével, és a „Vaktérkép” felirattal. Tehát a terv: kövessük a felsorolás lépéseit! Javasolt megoldás lépései: 1. Jelöljük ki az egész képet (CTRL+A, vagy: KijelölésMindet). Válasszunk fekete színt Előtérszínnek, majd a már gyakran használt módon rajzoljuk körbe a képet a KijelölésKijelölés körberajzolása menüponttal. 2. A Bécs, Belgrád, Bulgária feliratokat el kell tüntetni: ezeket egyszerűen felül színezzük fehérrel (az Ecseteszköz segítségével). 3. Belgrád feliratának eltüntetése közben megsérül a Morava folyó vonala (A lépés). A Színpipetta eszközzel másoljuk le az épen maradt folyó színét! Válasszuk ki az Ecseteszközt, állítsunk be 2px vastagságú ecsetet, és rajzoljuk be a megsérült folyóvonalat (B lépés)! 4. Az Ukrajna szöveget vágjuk ki, illesszük be, majd a vigyük a helyére, végül CTRL+H-val, vagy RétegekRéteg rögzítése opcióval véglegesítsük a helyét. Vigyázzunk arra, hogy a Háttérszín fehér legyen! Ugyanis a Gimp a kivágásnál mindig a Háttérszín színével tölti fel a kivágott rész helyét. 5. Válasszuk ki az Ecseteszközt, állítsuk az Előtérszínt pirosra, majd az ecset vastagságot módosítsuk 8 px szélesre! A kért két helyen klikkeljünk egyszer az egérrel: ezzel két piros pontot helyeztünk el. 6. A két piros pont mellé a Szövegeszköz segítségével írjuk oda a kért két számot: 1-et, és 2-t. - 16 -


7. Bulgária területét jelöljük ki a Varázspálcával! Ha túl nagy területet jelöl ki, akkor vegyük vissza a küszöbértéket 10-esre! Ekkor már a mintán látható területet fogja kijelölni (ha túl „toleráns” a színekkel az eszköz, akkor a világoskék színen túl is kijelöli a fehér területeket). Színszerinti kijelölőt meg nem érdemes használni: hisz az az összes fehér színt kijelöli, nekünk meg csak Bulgária területe kell. A kijelölt részt színezzük be sárgára! Vigyázat: Rusze feliratából a R és e betűk belső része még nem lett kiszínezve sárgára. Ezeket ránagyítva pótoljuk, egy 1 px vastagságú Ceruzaeszközzel (C lépés). 8. Állítsuk az Előtérszínt pirosra, majd a Szövegeszközzel írjunk egy 3-ast Bulgária területére. 9. Nyissuk meg a Pozsonyi vár képét (pozsonyi_var.jpg), tükrözzük vízszintesen (KépÁtalakításVízszintes tükrözés). 10. Jelöljük ki az egész képet, másoljuk le, majd illesszük be az eddig elkészült vaktérképre! 11. Vigyük a beillesztett Pozsonyi vár képét a jobb felső sarokba, méretezzük át az Átméretezési eszközzel (ne lógjon bele Moldáviába!). Végül véglegesítsük a Pozsonyi vár képének a helyét (CTRL+H) (D lépés). 12. A Szövegeszközzel írjuk a bal alsó sarokba, fehér Előtérszínnel: „Vaktérkép”. 13. Most, hogy már tudjuk mekkora területet foglal a „Vaktérkép” felirat, jelöljük ki a Téglalap kijelölő eszközzel. 14. Válasszunk fekete Előtérszínt, majd a Kitöltő eszközzel színezzük ki a kijelölt részt, úgy, hogy közben lenyomva tartjuk a SHIFT gombot (vagy válasszuk a EszközbeállításokTeljes kijelölés kitöltése): ezáltal nem az összefüggő színű területeket színezi ki (pl. kék színűeket), hanem az egész kijelölt részt (E lépés). 15. Exportáljuk a képet a kért néven (F lépés).

- 17 -


A – Belgrád törlésekor megsérül a Morava folyó

B – Megfelelően választott Ecseteszközzel kijavítjuk a sérülést.

C – Bulgária területének kiszínezésekkor színezzük ki Rusze, R és e betűinek belsejét is Ceruza eszközzel!

D – Pozsonyi várat külön nyitjuk meg, E – Előbb érdemes a „Vaktérkép” feliratot tükrözzük vízszintesen, beillesztjük a elhelyezni, utána elvégezni a téglalap kijelö- F – A „Vaktérkép” felirat elhelyezésével elkészült a kép térképre, helyére visszük, majd ott méret- lést: a szöveghez könnyebb igazítani a hátteis. arányosan kicsinyítsük le! ret, mint fordítva.


1.3.2.

OKATV 2010 - Második forduló, 5. feladat

Feladat szövege [2]: 5. feladat: Rajzolás – UNASUR tabló készítése (10 pont) Az UNASUR (Dél-Amerikai Nemzetek Uniója) nem más, mint a dél-amerikai államok együttműködési szervezete. Feladatod egy tabló (unasur_tablo) elkészítése, amelyen az UNASUR emblémája található, alatta az Union de Naciones Suramericanas szöveggel. Az itt látható mintát próbáld minél jobban lemásolni! A kép 460x660 képpont méretű, fekete háttérrel. A Dél-amerikai kontinens térképét a delamerika.gif állományban megtalálod. Ezen a képen szerepel két téglalap, egyik világos sárga, másik vöröses színnel van kitöltve. Ezeket a színeket kell felhasználnod arra, hogy az emblémát elkészítsd. Maga az embléma egy vöröses kitöltésű kör, amelynek körvonala világos sárga. A kontinens sárga kitöltéssel szerepel a körben. Az embléma középre van igazítva a tablón. Az embléma alatt található szöveg talpnélküli betűtípussal szerepel, középre van igazítva. Az U, Na, Sur betűk a megadott vöröses, a többi a világos sárga színnel szerepel. Javasolt megoldás: Megoldási terv: Ha megnézzük a képet, egyből eszünkbe juthat az eddig már oly sokszor használt technika: a körlapot kijelöléssel készítjük el, majd a kijelölést körbe rajzoljuk a megfelelő színnel. Szöveg elhelyezése nem probléma, sokkal inkább trükkösnek tűnik DélAmerika térképének megjelenítése a mellékelt delamerika.gif kép alapján. Ha megnyitjuk, láthatjuk hogy magán a kontinensen az országhatárok is jelölve vannak, fekete vonalakkal, és ezen a képen vannak a szükséges színminták is. Itt fogjuk használni a kijelölés invertálása lehetőséget: varázspálcával kijelöljük a külső, fehér részt, majd - 19 -


invertáljuk a kijelölést; így maga a kontinens lesz kijelölve, és persze a minta színek is. Ezeket eltávolítjuk a kijelölésből (CTRL billentyű lenyomásával), majd a Kitöltő eszközzel kitöltjük a kontinenst a megfelelő színnel. Ekkor már csak ki kell vágni a kijelöléssel együtt, és beilleszteni az alapképbe. Nézzük a megoldást lépésenként! Javasolt megoldás lépései: 1. Válasszunk fekete Háttérszínt, majd nyissunk meg egy új képet 460x660-os méretben. 2. A mintán látható helyre készítsünk egy kör alakú kijelölést. Érdemes középpontos kijelölést készíteni, mert így az első kattintás helyéről, középpontosan kifele indul el a körkijelölés (CTRL billentyű, a kijelölés megkezdése után) 3. Ha kész a kijelölés, nyissuk meg a delamerika.gif képet. Pipetta eszközzel vegyünk színmintát a barnás színből, váltsunk vissza eddigi munkánkra és töltsük fel a kör kijelölést a Kitöltő eszközzel. 4. Ismét a delamerika.gif képről vegyünk mintát a sárga színből, ugyanúgy Pipetta eszközzel. A készülő munkánkon SzerkesztésKijelölés körberajzolása paranccsal rajzoljuk körbe a kör kijelölést. Én 10 px vastagságú körberajzolást

választottam.

Ha

ez

is

kész,

szüntessük

meg

a

kijelölést

(SHIFT+CTRL+A, vagy KijelölésSemmit, A lépés). 5. Menjünk vissza a delamerika.gif képhez. Válasszuk ki a Varázspálca eszközt, és Dél-Amerikán kívüli, fehér területre kattintsunk. Ezzel kijelöltünk mindent kívül, kivéve a mintaszínek két téglalapját (hisz csak a külső, fehér színt jelöltük így ki). 6. Invertáljuk a kijelölést (KijelölésInvertálás)! Ezzel a kijelölés megváltozik: minden dolog ki lesz jelölve, ami eddig nem volt, és azok a dolgok nem lesznek kijelölve amik eddig kivoltak. Tehát két dolog nem volt kijelölve: a kontinens, és a színmintákat adó két téglalap. Így viszont a kontinens, és a két téglalap lesz kijelölve. 7. Vegyük ki a kijelölésből a két téglalapot! Válasszuk ki a Téglalap kijelölő eszközt, és kezdjük el kijelölni a két téglalapot a jobb sarokban. Kijelölés

- 20 -


közben nyomjuk le a CTRL billentyűt, így eltávolítjuk a kijelölt részből a két téglalapot. Így már csak a kontinens van kijelölve (B lépés). 8. Válasszuk a Kitöltő eszközt, és a megadott sárga színnel töltsük fel a kijelölt kontinenst! Vigyázat: az Eszközbeállításokban be kell állítani, hogy a Teljes kijelölés kitöltése opcióval dolgozzon az eszköz (gyorsbillentyű: SHIFT). Ha nem állítjuk be, akkor csak az egybefüggő színnel rendelkező területet fogja kiszínezni (C lépés). 9. Ha kész a kitöltés, másoljuk le CTRL+C-vel a kijelölt területet! Váltsunk át az eddig elkészült versenyfeladatra, és illesszük be a lemásolt kontinenst (CTRL+V)! Áthelyezési eszközzel vigyük a helyére, majd méretezzük át az Átméretezési eszközzel. Mind addig ügyeskedjünk ezen két eszközzel, míg a mintán látható módon helyére nem tettük a kontinens képét. Ha már a helyén van, véglegesítsük azt a CTRL+H gyorsbillentyűvel, vagy RétegekRéteg rögzítése opcióval (D lépés). 10. Szövegeszközzel írjuk be a szoveg.txt-ben található szöveg kimásolásával, majd beillesztésével a szükséges szöveget (az Előtérszín legyen a kért sárga!). Végezzük el a mintán látható beállításokat: legyen a szöveg félkövér, és középre igazított! 11. A kezdőbetűk megváltoztatásához másoljuk le a megadott barnás-narancsos színnek a HTML kódját! Ezután Szövegeszközzel jelöljük ki azt a kezdőbetűt (vagy kezdőbetűket), amit át kell színezni. A Szövegeszköz szerkesztés közben megjelenő gyorsmenüjében kattintsunk az éppen aktuális színt ábrázoló négyzetre: ekkor megjelenik egy színválasztó. Itt illesszük be a lemásolt HTML kódot. Így megváltoztattuk a kijelölt betű színét (E lépés). 12. Végezzük el a fenti eljárást a többi kezdőbetűkre is (F lépés)! 13. Exportáljuk a képet a kért néven (G lépés).

- 21 -


A – Kör kijelöléssel elkészítjük az alapot (kitöltés, körberajzolás). Ha végeztünk szüntessük meg a kijelölést!

B – Invertáljuk a varázspálca kijelölést, és eltávolítjuk a kijelölésből a két téglalapot.

E – Szövegek színezéséhez másoljuk le a megadott szín HTML színkódját!

F – Miután megadtuk a szöveget, kijelöljük a beszínezendő szövegrészeket, és a megjelenő gyorsmenüben változtatjuk meg a kijelölt szövegrész színét, a lemásolt HTML színkód beillesztésével.

C – Teljes kijelölés kitöltésével a megadott sárga színnel kitöltjük a kijelölt kontinenst.

D – Lemásoljuk, majd beilleszszük eddigi munkákba a kontinenst. Átméretezzük, és helyére visszük, végül fixáljuk a helyét.

G – A kész képet a megadott néven exportáljuk.


1.4.

Képmontázs készítése

A képmontázs több kép felhasználásával készült kép. Az országos versenyek során többször került sor képmontázsos feladatokra. Ezek közül oldunk meg itt párat! 1.4.1.

OKTV 2011 – Harmadik forduló, 1. feladat

Feladat szövege [2]: 1. feladat: Védett emlősök (10 pont) Feladatod a mintán látható kép (vedettemlosok) elkészítése. A montázs elkészítéséhez rendelkezésedre áll az összes kép, ezek összeszerkesztése a feladatod. A kép 640x480 képpont méretű legyen! Ügyelj arra, hogy a „Védett, veszélyeztetett emlősök” szöveget is el kell helyezned, ami sötétzöld színű legyen! A nyusztról készült képet tükröznöd is kell! Javasolt megoldás: Megoldási terv: Az eddigiekhez képest kevés gondolkodni valónk van: egyetlen dolog, amire érdemes lehet odafigyelni, az a képek elhelyezésének sorrendje. Megnyitjuk az összes képet, majd egy új, megfelelő méretű képfájlba elhelyezzük őket, beillesztéssel. A sorrend a lényeges, arra kell figyelni. Cseles lehet még a mókus képénél a fehér rész eltávolítása. Nem nagy ördöngösség, vágjunk bele! Javasolt megoldás lépései: 1. Állítsunk be fehér Háttérszínt, majd hozzunk létre egy új képet! A mérete legyen 640x480 px, majd nyissuk meg az összes, forrásban megadott fájlt: erdo.jpg, hod.png, mokus.png, nyuszt.png, sun.png. 2. Haladjunk sorban! Háttérben az erdo.jpg kép látható. Váltsunk az erdo.jpg képet tartalmazó Gimp ablakra. Jelöljük ki az egészet (CTRL+A, vagy KijelölésMindet), és másoljuk le (CTRL+C)!

- 23 -


3. Váltsunk a saját, fehér hátterű munkákra, és illesszük be a képet. Helyezzük el a kép alján (hisz fent kell lennie egy fehér csíknak, oda írjuk majd a megadott szöveget). CTRL+H-val véglegesítsük a kép helyét (A lépés). 4. Ha megvizsgáljuk a mintát, láthatjuk, hogy a hódot kell következőnek elhelyeznünk, hisz az van a sün alatt (a sün fölött meg a nyuszt). Másoljuk le a hód képét ugyanúgy, ahogy az előző lépésben, majd helyezzük el a készülő képmontázsunkban! 5. A hód képe jóval nagyobb, mint amekkora méretben kell: Átméretezési eszközzel, méretarányosan (CTRL folytonos lenyomásával) zsugorítjuk a képet, míg megfelelő méretű nem lesz. Ezután az Áthelyezési eszközzel a kép sarkába helyezzük a képet, végül véglegesítsük a helyét (CTRL+H) (B lépés). 6. Ugyanígy járjunk el a következő képeknél is: sun.jpg. A nyuszt a következő állat, ő lesz a sün fölött. Az ő esetében - mielőtt lemásolnánk -, tükrözzük vízszintesen az egész képet! Ezt a KépÁtalakításVízszintes tükrözés menüponttal tehetjük meg. Ha ez megvan, ugyanúgy kell lemásolnunk, és beillesztenünk a képmontázsba, mint az előző lépéseknél. 7. A mókus képe kicsit kacifántosabb: meg kell szabadulnunk a fehér részektől. Varázspálcával jelöljük ki a kép összefüggő, fehér részeit. Ezt két részben kell megtenni: egyszer fent, majd egyszer a lenti fehér résznél (ezt a SHIFT gomb nyomvatartásával; így bővíthetjük a kijelölés területét). A kijelölt fehér területet vágjuk ki (CTRL+X)! A kivágott terület helyén sötét- és világosszürke négyzetek láthatóak: ez utal arra, hogy a képnek azon része üres (átlátszó), nem tartalmaz semmi színt (C lépés). 8. Jelöljük ki az egész mókusról így megszerkesztett képet (CTRL+A), majd másoljuk le (CTRL+C)! 9. Váltsunk a képmontázsunkra: és illesszük be a mókus képét. Láthatjuk: a kivágott részen valóban nincs semmi, tehát a külső, fehér résztől sikerült megszabadulni. Áthelyezési eszközzel vigyük helyére a mókus képét. Ha a mókus nem fér el teljesen a süntől, akkor a fatörzs egy részét is feláldozhatjuk: vigyük a képet úgy, hogy a fatörzs lelógjon a képről. Előfordulhat, hogy a mókus képét még nagyítani is kell, ha nem ér el teljesen az erdős háttér tetejéig: ehhez használjuk

- 24 -


a már ismert Átméretezési eszközt. Ha elhelyeztük rendesen a mókus képet, fixáljuk a helyét CTRL+H gombkombinációval (D lépés). 10. Végül váltsunk zöld Előtérszínre, és Szövegeszközzel írjuk a megmaradt fenti fehér csíkra a kért szöveget (E lépés). 11. Exportáljuk a képet a kért néven.

- 25 -


A – A 640x480-as, létrehozott képbe beilleszszük a lemásolt erdo.jpg képet.

D – Illesszük be, majd helyezzük el a mókust a helyére. Ha nem fér ki, áldozzunk fel a fatörzsből: lógjon ki a képből!

B – következőnek a hod.jpg képet illesszük be. Átméretezzük, majd elhelyezzük a kép sarkába. Ugyanezzel a technikával helyezzük el a többi állatot is!

C – a mókus képénél kijelöljük (Varázspálca eszközzel), majd kivágjuk a felesleges fehér részt. Ezután jelöljük ki az egészet, és másoljuk le (CTRL+C)!

E – Helyezzük el a zöld feliratot a szabadon maradt, fehér részre, majd exportáljuk a képet a kért néven.


1.4.2.

OKTV 2011 – Első forduló, 1. feladat

Feladat szövege [2]: 1. feladat: Montázs készítése (20 pont) Az itt látható minta alapján, a mellékelt képek felhasználásával készítsd el az aug20 képet! Próbáld minél tökéletesebben lemásolni az ábrát, figyelj az arányokra is! A minta szövegeket természetesen nem kell elhelyezned a képen. A kép 600 képpont széles és 430 képpont magas legyen, piros szegéllyel! A nemzeti színű szalag 15 képpont széles, és pontosan a kép közepén van elhelyezve. A fehér kitöltésű, piros szegéllyel rendelkező kört is pontosan középen kell elhelyezni!

Javasolt megoldás: Megoldási terv: Talán ez az egyik legösszetettebb feladat az eddig bemutatottak közül. Nehézségek: hogy érjük el, hogy a nemzeti színű csíkok pont 15 px vastagok legyenek? Hogy tesszük őket pont középre? Nyilván ezek a legnehezebb pontjai a feladatnak. A megadott képeket egyszerűen csak be kell illeszteni az alapképre, átméretezni, és a helyükre vinni. Javasolt megoldás lépései: 1. Háttérszínnek válasszunk fehér színt, majd hozzunk létre egy új képet, 600x430as méretben. Ez lesz az alapképünk. 2. Hozzunk létre egy új képet: legyen 15 px magas, és 600 px széles. Ez lesz a nemzeti színű szalag alapja.

- 27 -


3. Válasszunk piros Háttérszínt, és hozzunk létre egy új képet: legyen 5 px magas, és 600 px széles. Létrehozás után jelöljük ki az egész, piros csíkot (CTRL+A), majd másoljuk le (CTRL+C). 4. Váltsunk át a 15 px magas, fehér hátterű képünkre, és illesszük be a lemásolt, piros csíkot (CTRL+V)! Áthelyezési eszközzel vigyük a csík tetejére (A lépés). 5. Váltsunk vissza az 5 px magas, piros csíkot tartalmazó képre. Válasszunk zöld Előtérszínt, majd a Kitöltő eszközzel színezzük zöldre az egész piros csíkot! Ezután ezt is másoljuk le úgy, mint a piros csík esetén. 6. Váltsunk ismét a 15 px magas képre, ahová korábban beszúrtuk, és elhelyeztük az 5px magas, piros csíkunkat. Illesszük be most a lemásolt zöld csíkot! Ezt helyezzük a csík legaljára, majd rögzítsük (CTRL+H): így kész van a nemzeti színű szalagunk. Fent 5px piros, középen 5 px fehér, és lent 5 px zöld. Így elértük, hogy pontosan 15 px magas, nemzeti színű szalagunk legyen. 7. Jelöljük ki az egészet nemzeti színű szalagot (CTRL+A), majd másoljuk le (CTRL+C)! 8. Váltsunk át az alap képünkre, ami 600x430-as. Ide illesszük be a nemzeti színű szalagot, majd az Igazítási eszközt választva jelöljük ki, és állítsuk be, hogy függőlegesen középre igazítsa. Ezután rögzítsük a beillesztett szalagot (CTRL+H) (B lépés). 9. Ismét illesszük be a szalagot! Ezután forgassuk el balra 90°-kal (Forgatási eszköz segítségével), majd az Igazítási eszközzel igazítsuk vízszintesen középre. Ha ez kész, rögzítsük a szalagot a képen (CTRL+H). Ezzel kész van a nemzeti színű szalagok elhelyezése! 10. A négy fényképet az előző montázsos feladathoz hasonlóan helyezzük el: mindegyiket megnyitjuk, majd lemásoljuk és egyenként beillesszük őket az alapképbe. Persze mindegyiket átméretezzük, és a helyére visszük. Ha egy-egy kép átméretezése, és elhelyezése kész, ne felejtsük el rögzíteni az adott képet (CTRL+H)! Nem feltétlen kell méretarányos zsugorítás a képeknél: ugyanis a méretarányuk nem egyezik a nekik szánt helyek méretarányával, így néhol a magasságon, ill. szélességen (a kép eredeti méretarányához képest) változtatnunk kell (C lépés).

- 28 -


11. Ha elhelyeztük mind a négy képet, hozzunk létre egy új képet, 150x150-es méretben, fehér háttérrel! Itt fogjuk elkészíteni azt a kört, ami majd a kép közepén lesz. 12. Az új képben készítsünk egy kör kijelölést, ami épphogy nem érinti a kép szélét. Válasszunk piros Előtérszínt, majd SzerkesztésKijelölés körberajzolása paranccsal rajzoljuk körbe a kijelölést, 3px vastag vonallal! Ezután szüntessük meg a kijelölést (SHIFT+CTRL+A) (D lépés). 13. Nyissuk meg a forrásban található magyar_címer.jpg nevű fájlt. Jelöljük ki az egészet (CTRL+A), majd másoljuk le (CTRL+C)! 14. Illesszük be a 150x150-es képre, méretezzük át megfelelően, és helyezzük el a piros körben, a mintán látható helyre (E lépés). 15. Két, külön szövegdobozban legyenek az „AUGUSZTUS” és a „20” feliratok: Szövegeszközzel készítsük el őket, piros, és zöld színben. Helyezzük el őket a mintán látható helyre, az Áthelyezési eszközzel. Ne felejtsük megfelelő betűméretet beállítani, ahogy a mintán is látható! 16. Varázspálca eszközzel jelöljük ki a piros körön kívüli külső, fehér részt. KijelölésInvertálás paranccsal invertáljuk a kijelölést. Ezzel maga a kör lesz kijelölve (F lépés), majd válasszuk a SzerkesztésLátható másolása parancsot. Ezzel lemásoltuk a körlemezt! 17. Váltsunk az eredeti, 600x433-as méretű képünkre, és illesszük be a lemásolt körlemezt (CTRL+V)! Alapjában pontosan középre helyezi el a beillesztett képet, így ezt is: azaz nincs is semmi dolgunk az igazítással (ha mégis lenne: használjuk az Igazítási eszközt: jelöljük ki a lemezt vele, majd függőlegesen és vízszintesen is igazítsuk középre – így pontosan középen lesz a lemez; G lépés). 18. Forgatási eszközzel végezzük el a mintán is látható, szükséges mértékű forgatást (H lépés). 19. Jelöljük ki az egészet képet (CTRL+A), majd piros Előtérszínt választva rajzoljuk körbe a kijelölést (SzerkesztésKijelölés körberajzolása) megfelelő vastagságú vonallal (csak tippelni tudunk a minta alapján)! Ezzel elkészítettük a kép piros szegélyét. Exportáljuk a kész képet a kért néven!

- 29 -

.


A – A nemzeti szalagot B – A nemzeti szalagot beillesz- C – A külön képeket másolással illesz- D – A kép középen lévő körlemezt is külön képen készítjük szük az alapképre, Igazítási szük be, és mint a korábbi képmontá- külön készítjük el: az eredeti képen elel, hogy biztosíthassuk eszközzel pontosan középre zsos képnél: átméretezéssel, és áthelye- forgatva szerepel, ezért érdemes így a kért, 15 px magassáhelyezzük. zéssel visszük őket a helyükre. csinálni. got.

E – A címert beillesz- F – Varázspálcával kijelöljük a G – Lemásoljuk, majd beillesztjük az H – A beillesztett lemezt csak el kell szük a körbe, átméretekülső, fehér részt, majd alapképbe az előbbi kört. Minden objek- forgatnunk: ezután véglegesítjük a lezéssel, majd áthelye- invertáljuk a kijelölést. Így pont tumot alapértelmezetten a kép közepére mez helyét. A kész képet a kért néven zéssel visszük a helyé- az egész korong lesz kijelölve, a helyez el a beillesztés esetén a Gimp. exportáljuk. re. piros határvonallal együtt.

Milyen rasztergrafikai feladatokat lehetne a jövőben kiadni?

2. Milyen rasztergrafikai feladatokat lehetne a jövőben kiadni? Ebben a fejezetben – főleg a kitekintésekre alapozva – röviden összefoglalnám, milyen feladatokat lehetne a jövőben kiadni az informatikai OKTV verseny alkalmazói kategóriájának képszerkesztés témakörében.

2.1.

Kihasználatlan funkciók

A kitekintés részben említettem a rétegek, és a szűrőket. A rétegek olyan fontos elemei a magasabb szintű képszerkesztésnek, hogy – véleményem szerint – nem szabad mellettük elmenni, nem szabad kihasználatlanul hagyni a Gimpnek ezt a funkcióját. A szűrők is rengeteg lehetőséget biztosítanak újabb és újabb feladatok kitalálásához. Habár nem akkora a jelentőségük, mint a rétegeknek. A verseny egyik lényege, hogy a feladatok nem mondják meg a versenyzőknek, hogy milyen alkalmazást használjanak a feladatok elkészítésekor. Így például el lehetne rajta gondolkodni, hogy érdemes-e kifejezetten Gimpes funkciókkal tarkítani egy-egy képszerkesztési feladatot? Hisz ezzel megkötjük a versenyző kezét, mert máshogy – ekkor – nem tudja megoldani a feladatot. Lehetnek olyan feladatok, melyeket például MS Paintben egyszerűbb megoldani, mint Gimpben (pl.: OKTV 2010, első forduló, 1.feladat). Úgy gondolom, hogy igen: érdemes kifejezetten rétegekre irányuló feladatokat is kiadni, hiszen például világos, hogy szövegszerkesztésből, vagy adatbázis kezelésből is csak MS Office alkalmazások jöhetnek szóba. Éppen ezért a jövőben be lehetne építeni a feladatokba a rétegek, és szűrők használatát.

2.2.

Kép szerkezetére vonatkozó elvárások

Kifejezetten ki lehetne kötni, hogy a kép bizonyos részei külön rétegeken szerepeljenek, továbbá ki lehetne kötni, hogy mely réteget milyen névvel lásson el a versenyző. Tehát a kép szerkezetére is lehetnének elvárások, nem csak képi elemekre (pl. pontosan 3 virág van a képen). Persze erre vigyázni kell: ha egy feladatban épp az adja az egyik nehézséget, hogy a versenyzőnek kell rekonstruálni a kép szerkezetét, akkor nem lenne jó, ha elárulnánk: melyik képrészlet milyen rétegre kerüljön.

- 31 -


2.2.1.

Rétegek ellenőrzése

Hogy ellenőrizhetnénk azt, hogy valóban rétegeket használt-e az illető? A válasz egyszerű: a Gimp saját formátumában, xcf formátumban lehetne elmentetni a képeket a versenyzőkkel. Így a javító – Gimppel megnyitva a beadott munkát – egyszerűen meggyőződhetne róla, hogy a feladatban leírt követelményeknek megfelelően a kért képi elemek valóban a kért rétegeken szerepelnek-e? Persze ezzel megnőne a javítási munkálat időigénye, de a verseny fejlődése szempontjából ez nem lehet ellenérv. Másik eljárás lehetne, hogy a kész képből két verziót kérnénk, két mintaképen bemutatva. A két kép közötti különbség csak annyi lenne, hogy más a rétegek sorrendje. A versenyzőt persze nem kifejezetten kell felszólítani rétegek használatára: aki tudja, hogy rétegekkel gyorsan elő lehet állítani a két képfajtát (hisz csak a rétegek sorrendjét kell megváltoztatni), az időt spórol, így több ideje marad a többi feladatra, azaz nagyobb az esélye a továbbjutásra. És ez mind annak köszönhető, hogy jobban ismeri az alkalmazást. Tudtommal részben pont ez a verseny lényege: az alkalmazásokat legjobban ismerők jussanak tovább. 2.2.2.

Szűrők ellenőrzése

Ez egy fokkal nehezebb feladat lenne, mint a rétegek ellenőrzése: az alkalmazott szűrőket nem lehet úgy ellenőrizni, mint a rétegeket. Így hát ezt a minta alapján lehetne ellenőrizni, ahogy eddig is folyt a javítás a rajz feladatok történetében.

2.3. 2.3.1.

Lehetséges pontszámbeli eltolódás a rajzfeladatok javára Rajz feladatok bonyolítása

Nyilvánvaló, hogy a rajzfeladatok ilyesfajta bonyolítása indokolttá tenné a rajzfeladatok pontszámkeretének növelését. Ez viszont magával vonhatná a táblázatkezelés, szövegszerkesztés, vagy éppen adatbázis kezelés témák pontszámának csökkentését. Utóbbit joggal mondhatjuk komolyabb témának – úgy, ahogy a táblázatkezelést is. Világos, hogy az említett két téma sokkal több absztrakt gondolkodást kíván, mint egy kép összeállítása; habár itt is szükség van bizonyos analitikus gondolkodásra, hiszen a képet gondolatban darabokra kell bontani, és meg kell tudni határozni, mely elmei ismétlődnek, és mely elemei épülnek fel elemi alakzatokból. Mégis egy adatbázis – vagy táblázat – mégis életszerűbb feladatok elé állíthatja a versenyzőt, hisz a való életben rengeteg

- 32 -


helyen alkalmaznak adatbázisokat, vagy tárolják az adatokat táblázatokban, hogy számításokat végezzenek velük. 2.3.2.

Érvek a rajzfeladatok bonyolítása mellett

Mindezek ellenére azt mondom, hogy jogos szükséglet a rajzfeladatokban az életszerű alkalmazás használat. Már csak azért is, mert a kreatív gondolkodást nagyon jól fejleszti a rajzolás, képalkotás. Továbbá marketingben, és reklámszakmában is fontos szerepe lehet jó reklámanyag előállításához. Ezekhez pedig világos, hogy jó, ha belépőszinten valaki ki tudja használni egy rajzoló program fő tulajdonságait, melyek közül kihagyhatatlan elem a rétegek ismerete, kezelése. Kevésbé fontos funkcionálisan, de esztétikailag annál fontosabb a szűrők ismerete. 2.3.3.

Megoldási javaslat a pontszám problémára

A rétegek használata nem egy bonyolult dolog, de annál fontosabb eszköz a képszerkesztések során. Éppen ezért úgy lehetne feloldani a korábban vázolt pontszám problémát, hogy kevesebb másolás, forgatás, tükrözést kérünk egy-egy OKTV-s feladatban. Ezekből le lehetne csípni, ezek a műveletek ugyanis olykor túl hangsúlyosak. Ugyanakkor rétegekre is lehetne kérni ilyen műveleteket (pl.: kétszerezd az almafát tartalmazó réteget, majd növeld kétszeresére). A lecsípett pontok helyett kérhetnénk két-három rétegekkel összefüggő részfeladatot.

2.4. 2.4.1.

Egy lehetséges jövőbeni rasztergrafikai feladat A feladat szövege:

Rajzolás: Alphonse Mucha (20 pont)4 Készítsd el a mintán látható, Alphonse Mucha emléklapot! Mivel ez még csak terv, ezért két verziót kell elkészítened (a két verzió mintaképét lásd lejjebb). Próbáld minél tökéletesebben lemásolni a mintát! Az évszakokat ábrázoló négy, női képet neked kell a megfelelő darabokra vágni, mint ahogy Mucha arcképét is neked kell átszínezned a mintán láthatóra! A képet két verzióját mentsd el Mucha_1.xcf és Mucha_2.xcf néven, majd exportáld Mucha_1.png és Mucha_2.png néven (ahol 1 az első verziót, 2 a második verziót jelenti)!

4

A képanyagok a következő webhelyről származnak: http://en.wikipedia.org/wiki/Alfons_Maria_Mucha (utolsó megtekintés ideje: 2012.X.6.)

- 33 -


Ügyelj a következőkre: 

A kép 500x680 px méretű



A képnek 15 px vastag, barna kerete van (a kép mérete ne változzon!)



A háttérben lévő, sötétbarna vízszintes, és függőleges vonalak pontosan 20 px szélesek, Mucha arcképe mögött (függőlegesen és vízszintesen is) pontosan középen találkoznak, ott felezik egymást.



Mucha képe a felső képrészlet közepén helyezkedik el.



Ügyelj a fedésekre!



Ahol szükséges, ott használj rétegeket, szűrőket!

A kép első verziója

A kép második verziója

Javítási útmutató: A. A kép 400x680 méretű, világossárga háttérrel

1 pont

B. Van 6 px széles, barna szegélye (a kép mérete változatlan)

1 pont

C. Szerepel rajta a négy évszak képe; a megfelelő helyen és méretben; a kivágott képeken nem látszik fehér maradvány a kivágás után 1+1+1 pont D. A tavasz és tél képek kitakarják Mucha képet, míg Mucha képe kitakarja a nyarat és az őszt 1 pont E. Szerepel rajta Mucha arcképe a kért helyen, és méretben; Mucha képe az eredetihez képest barnásabb színű 1+1 pont F. Legalább négy képnek (a négy évszak és Mucha arcképe közül) van árnyéka; az árnyék elmosódott (azaz nem éles) 1+1 pont G. Szerepel a képen – a mintához hasonlóan – egy vékony keret, mely érinti a négy évszak képét: a nyár és az ősz képét takarja, míg tavasz és tél képe takarja a vékony keretet 1 pont - 34 -


H. Szerepelnek a háttérben átlós, barna vonalak, és bal, ill. jobb oldalt nem lógnak túl a határoló, vékony kereten (a mintának megfelelően) 1 pont I.

Szerepel a háttérben, pontosan a kép felsőrészének középpontjában találkozva, egy függőleges, és egy vízszintes, 20 px széles barna vonal 1 pont

J.

A világossárga háttéren (SzűrőkDekorKávéfoltok) foltok láthatóak

1 pont

K. A kép alján szerepel a mintán látható felirat, világossárga színnel, dőlten, nem talpas betűtípussal; a szöveg háttere világosbarna 1+1 pont L. A kép második verziója (a fedéseken kívül) nem különbözik az első verziótól 1 pont M. A kép második verziójában a fedések a megadott mintának megfelelőek

1 pont

N. A képek alatt közvetlenül szerepel az árnyékuk (azaz helyes az egymáshoz képest számított sorrend) 1 pont O. A kép második verzióján Mucha arcképe tükrözve van az első verzióhoz képest1 pont 2.4.2.

Észrevételek

A pontozási útmutató nem ad külön pontot a rétegek használatára – hisz a feladat külön nem is kérte, csak felhívta a használatukra a figyelmet. Rétegek nélkül kétség kívül tovább tart elkészíteni a képet, de attól még nem kell büntetni azokat pont levonásokkal, akik nem rétegek használatával készítették el a képet. 2.4.3.

Felhasználható forrásfájlok a kép elkészítése során

Az előbbi képhez a következő források használhatóak:

A négy évszak képét egybe kapják a versenyzők. Nekik Mucha arcképét feketekell szétvágni őket, és a vágás során feleslegesen visz- fehérben kapják meg a verszamaradt fehér részektől is nekik kell megtisztítani a senyzők. A mintán a kép barképeket (különösen a sarkoknál) nítva van. Azzal lehetne még bonyolítani a feladatot, hogy ha a mintára tükrözve tennénk rá a négy évszakot ábrázoló képeket, esetleg a kép belseje felé egy kicsit elforgatva. A sötétbarna vonalakból álló keretet is lehetne még cizellálni egy összetettebb feladat elérése érdekében.

- 35 -

Webszerkesztési feladatok megoldása az OKTV és OKATV –ből

3. Webszerkesztési feladatok megoldása az OKTV és OKATV –ből Annyi könnyebbség lehet a rajzfeladatokhoz képest, hogy itt konkrét beállítások az irányadóak: nem kell annyi, ötletet kívánó megoldás: persze ez függ a választott webszerkesztő alkalmazástól is.

3.1.

Technikai tudnivalók a feladatmegoldásokkal kapcsolatban

Az egyes beállítások elvégzésének mikéntjét (pl. táblázat beállítások) részletekbe menően külön nem írjuk le: ezekhez lásd a megfelelő, korábbi fejezeteket. Fontos megjegyezni, hogy a honlapszerkesztési feladatoknál nem feladatunk a gépelés: minden szükséges szöveg megtalálható a forrásokban mellékelt, megfelelő szöveges txt fájlban. Minden szöveget onnan másolunk ki, és szúrjuk be a megfelelő helyre, a szerkesztőprogramban, ezzel is gyorsítva a feladat megoldását. Az itt található megoldásokra általában jellemző, hogy kihasználja a feladatokban kért weblapok hasonlóságát: egy lap elkészítésén vezetnek végig, utána ezt az egy lapot másoljuk le, és szerkesztjük át a további kért, specifikus honlapokká. Így biztosítva azt, hogy a közös tulajdonságok mindenütt ugyanolyanok legyenek, és ne kelljen ezeket újból és újból, minden lapnál elvégezni. Úgy, mint a rajzfeladatoknál, itt is az egyes feladatokhoz lépésenkénti leírás tartozik: mivel viszont a webszerkesztési feladatok sokkal kötöttebb lépésekből állnak, mint a rajzfeladatok, ezért sokkal inkább szemléltető szerepük van, mint további segítséget nyújtó szerepük. Minden lépésenkénti leírás után a beszédesebb lépésekről képsorozatot találhat az olvasó, ahol minden lépéshez további leírás tartozik. Ezeket a lépéseket A, B, C, … betűivel jelöljük. A feladatok lépésenkénti leírásánál megemlítjük, hogy melyik állapot (pl.: A lépés) tartozik a képek közül.

3.2. 3.2.1.

Könnyebb, egyszerűen megoldható feladatok OKATV 2011 - Harmadik forduló, 5. feladat

Feladat szövege: [2] Fokozottan védett növényfajok (30 pont) A mellékelt minta alapján (honlapvedettnoveny.pdf) készíts egy honlapot a Magyarországon őshonos fokozottan védett növényfajokról. A mintán megfigyelheted az oldalak elrendezését, a különböző igazításokat és más tulajdonságokat. Azon - 36 -


tulajdonságokat, amelyek a mintán nem (jól) látszanak, külön részletezzük. A szükséges szövegeket a honlapszovegek.txt állományban találod.  Az oldalak címe (title) minden esetben a Fokozottan védett növényfajok – szöveg legyen, amelyet az adott oldal témája követ. (Fokozottan védett növényfajok – Kezdőlap, Fokozottan védett növényfajok – Zárvatermők, Fokozottan védett növényfajok – Ajánlott oldalak)  Az oldalakat index.html, zarvatermok.html, linkek.html néven kell elmenteni!  A linkek színe normál állapotban: #008000, látogatott állapotban: #800000.  A menüben az aktuális oldalnak megfelelő menüpont nem tölt be link szerepet. Minden oldalra igaz, hogy a tartalom egy olyan középre igazított táblázatban helyezkedik el, amelynek tulajdonsága: 

Három sorból és egy oszlopból áll, szélessége 700 képpont, háttérszíne fehér (#FFFFFF), cellaköz: 0 képpont, cellamargó: 10 képpont, szegély nincs.



A cellák tulajdonságai 1. cella magassága 150 képpont. Ebben helyezkedik el a honlapfejlec kép, amelyet a korábbi feladatban kellett elkészíteni. Ha ezt a képet nem készítetted el, használhatod helyette a honlapfejlec_minta.png képet. 2. cella tartalma középre igazított. 3. cella: ebben helyezkedik el a tartalom. A szöveg minden oldalon 1-es címsorral kezdődik (Kezdőlap, Zárvatermők, Ajánlott oldalak), melynek színe: #008000

Kezdőlap (index.html) 

A lapon el kell helyezni a nemzetiparkok.png képet, középre igazítva. A képre a http://www.nemzetipark.gov.hu/ oldalra mutató linket kell tenni. A weboldal új ablakba töltődjön be! Zárvatermők (zarvatermok.html)  Az igazítások és formázások a mintáról leolvashatók.  A virágok adatai egy 600 képpont széles táblázatban helyezkednek el. Cellatávolság:0, cellamargó: 10 képpont.  A világoszöld hátterű cellák színkódja: #E6FFE6.  A virágok nevei 2-es címsor stílussal jelenjenek meg. Ajánlott oldalak (linkek.html)  A szövegekre sorrendben a következő linkeket kell elhelyezni: http://www.greenfo.hu/adatbazisok/fajok.php, http://www.foldegyesulet.hu/allatok/vedettek/fokozottan_vedett_novenyek.php , http://www.termeszetvedelem.hu/. Ezen linkek a honlap szövegét tartalmazó állományban is elérhetőek.

- 37 -


Javasolt megoldás: Megoldási terv: Ahogy látjuk a feladat szövegében is: bizonyos beállításokat nekünk kell kitalálunk a minta alapján. Ebből talán nem lesz gond. Láthatjuk, hogy több tulajdonság az összes oldalra vonatkozik: például az oldal felépítését segítendő táblázat. Érdemes egy oldalt megcsinálni, elmenteni, majd abból kialakítani az összes oldalt (Mentés másként paranccsal ezen könnyedén segíthetünk). Készítsük el legelőször az index.html állományt (Kezdőoldal), mentsük el, majd abból az oldalból alakítsuk ki a többi oldalt is! A felhasználandó eszközök: 

táblázat beszúrása, szerkesztés



kép beszúrása és linkké alakítása



szöveg formázása (címsor, és színek)



szöveges link kialakítása



háttérkép beállítása

Javasolt megoldás lépései: Kezdőlap (index.html) elkészítése 1. A FormátumOldal címe és tulajdonságai menüben állítsuk be az oldal címét (Kezdőoldal)! 2. A FormátumOldal színei és háttere menüben tallózzuk ki a megfelelő háttérképet (honlaphatter.png)! Erről a feladat külön nem szól: ezt a háttérbeállítást a mintából láthatjuk – a háttér ismétlődését nem kell beállítanunk: a KompoZer alapértelmezettként olyanná csinálja. Itt tudjuk beállítani a linkek színeit is: ne felejtsük el bekapcsolni az Egyéni színek opciót! A színeknél a megjelenő, színválasztó párbeszéd ablakba másoljuk be a feladatban megadott HTML formátumú színkódot! 3. Szúrjunk be egy 1x3-as táblázatot, ahogy a feladat kéri, majd végezzük el a különböző sorokra a kért beállításokat – az első cellába szúrjuk be a honlapfejlec_minta.jpg állományt, mivel az eredetit nekünk kellene elkészíte-

- 38 -


ni, ezért ezzel most nem foglalkozunk! Dolgozhatunk úgy is, hogy nem kapcsoljuk még ki a táblázat szegélyét (azaz nem állítjuk a táblázat szegélyt 0 képpontosra), hisz így jobban tudunk tájékozódni. Megjegyzendő, hogy ha ki is kapcsoljuk a táblázat szegélyét, a szerkesztő program vékony, szaggatott piros vonallal jelzi a cellák határvonalait (A lépés). Tipp: a feladatban kért cellamargó tulajdonságot a Táblázat tulajdonságai ablakban Helykitöltés néven találjuk meg. 4. A második sorba másoljuk bele a forrásfájlba megadott szövegeket: ezzel a tartalommal fogunk majd navigálni. Ami a mintán látszik: itt mindhárom szöveg félkövér. A Zárvatermők, és az Ajánlott oldalak feliratokat alakítsuk linkké! Nem baj, ha még azok az oldalak nincsenek készen, amikre hivatkozunk. A linkek mutassanak (rendre) a kért zarvatermok.html és linkek.html lapokra! 5. A tartalom részre is másoljuk be a forrásfájlból az ide tartozó szövegeket! Ne feledjük: az első bekezdés címsor 1 stílusú, és #008000 színű. 6. Az utolsó bekezdés alá szúrjuk be a kért (nemzetiparkok.jpg) képet, és igazítsuk középre (jelöljük ki, majd a bekezdéseknél látható Középre igazítás ikonra kattintsunk)! 7. Végül alakítsuk ki a kért linket a képen! Egy baj van: kép esetén nem tudjuk beállítani,

hogy

linkként

új

oldalon

nyíljon

meg

a

cél.

Ha beállítottuk a linket, váltsunk az alul látható fülek közül Felosztás nézetre, és kattintsunk a nemzetiparkok.jpg képet közrefogó, szaggatott, piros kereten belülre! Ekkor az alsó ablakban megjelenik a linkhez tartozó HTML kód (B lépés). Balról az első > jel elé (a link url-je után) írjuk oda: target=”_blank”, majd mentsük munkánkat! Ezzel elérjük, hogy a képre

kattintva a hivatkozás tartalma új ablakban nyíljon meg. Megjegyzendő, hogy „rendes”, szöveges link esetén van rá beállítási mód, hogy a link tartalma új ablakban nyíljon meg. Valamiért a képeknél ezt nem tették lehetővé, ezért kellett „kézzel” belenyúlni.

- 39 -


Zárvatermők (zarvatermok.html) elkészítése 1. Mentsük el másként az előbb elkészült, index.html állományt (a fájl neve legyen a kért zarvatermok.html! Ezt fogjuk átalakítani a honlap második lapjává. 2. FormátumOldal címe és tulajdonságai menüben állítsuk be az oldal címét (Zárvatermők)! 3. Töröljük a felesleges tartalmakat: a harmadik sor tartalmát (képet, és a szöveget)! 4. A tartalmi részt egy táblázat rendezi el. A feladat szövege csak annyit közöl, hogy ez a táblázat 600 px (képpont) széles. A mintán látható: ennek a táblázatnak 2 oszlopa, és 3 sora van. Szúrjunk be egy ilyen táblázatot a honlap tartalmi részébe (harmadik sorába, C lépés), ahonnan korábban töröltük a Magyarország nemzeti parkjait ábrázoló képet, és szöveget! 5. Ne felejtsünk beállítani a táblázatba 10 px-es cellamargót (KompoZerben: Helykitöltés), és tüntessük el a táblázat szegélyt (szegély vastagság: 0 képpont). 6. Alakítsuk ki a táblázat tartalmát a mintán látható módon: minden sorban egy szöveges tartalom (az egyes virágnevek nagyobb betűkkel vannak szedve, és félkövérek), és egy kép szerepel egy-egy cellában. Az egyes, képeket tartalmazó cellákra állítsuk be a kért, #E6FFE6 színkódú háttérszínt (C lépés). 7. A második sorban állítsuk át a navigáló sávot: alakítsunk ki linket a Kezdőolalra, és szüntessük meg a Zárvatermőkre mutató linket! Ajánlott oldalak (linkek.html) elkészítése 1. Mentsük ismét másként az index.html állományunkat, most linkek.html néven! 2. Állítsuk át az oldal címét megfelelőre a FormátumOldal címe és tulajdonságai menüben (Ajánlott oldalak).

- 40 -


3. A második sorban szereplő navigációs sávot alakítsuk át: vegyük le a linket az Ajánlott oldalakról, és hozzuk létre egyet a Kezdőlap feliratra (ez mutasson az index.html-re, D lépés)! 4. A weblap tartalmi elrendezését adó harmadik sorból töröljük ismét a honlap tartalmi részét, majd másoljuk be a szöveges forrásállományban megadott szövegeket! Alakítsuk ki az első bekezdést címsor 1 formátumúra, és állítsunk be neki a kért betűszínt! 5. Jelöljük ki a cím után szereplő, három bekezdést, és úgy alakítsuk felsorolássá! 6. A felsorolásban szereplő szövegeket alakítsuk át linkké (a linkek címei szintén a forrásfájlban találhatóak, ezeket csak másoljuk át a link beállításakor).

- 41 -


A – A kezdőlapot készítjük el először: később ezt az oldalt lemásolva készítjük el a többi oldalt is. Az elrendezést egy táblázat segíti. A fejléc a mellékelt mintakép.

B – Ahhoz, hogy a képre kattintva a link új ablakban nyíljon meg, Osztott nézetben bele kell nyúlnunk a kódba (target=”_blank”).

C – A Zárvatermők oldal felépítését egy 600 képpont széles táblázat segíti: egy sornak két cellájába egy kép és egy leírás szerepel.

D – Az Ajánlott oldalak tartalmi részébe csak bemásoljuk a szövegeket, majd kialakítjuk a linkeket.


3.2.2.

OKATV 2012 – Harmadik forduló, 6. feladat

Feladat szövege: [2] Vashonlap (25 pont) A mellékelt minta alapján (vashonlap.pdf) készíts egy honlapot a vasról szóló információkkal! A mintán megfigyelheted az oldalak elrendezését, a különböző igazításokat és más tulajdonságokat. Azon tulajdonságokat, amelyek a mintán nem (jól) látszanak, külön részletezzük.  Az oldalak címe (title) "Érdekességek a Vasról – Kezdőlap", illetve "Érdekességek a Vasról – A vas bemutatása" legyen!  Az oldalakat index.html és vas.html néven kell elmenteni!  Az oldalak háttérképe: honlaphatter.jpg.  Az oldalakon Arial (vagy Nimbus Sans) betűtípust kell használni! Minden oldalra igaz, hogy a tartalom egy olyan blokkban helyezkedik el, amelyre igaz, hogy:  szélessége: 80%,  belső margója: 10 képpont,  háttérszíne: fehér,  középre igazított,  szegélye: 4 képpontos, fekete. A címsorok színe: #b44f19. Kezdőlap (index.html)  Az "Érdekességek a vasról" szöveg 1-es címsorral legyen megvalósítva! A lapon el kell helyezni az általad készített mozaik képet! Amennyiben azt nem sikerült elkészítened, használd a mozaik_minta.jpg képet!  A "tovább lapozol" szöveg a vas.html oldalra mutasson! A vas bemutatása (vas.html)  "A vas bemutatása" 1-es címsorral, a többi alcím 2-es címsorral szerepel.  A "Vissza a kezdőlapra" link az index.html oldalra mutasson!  Az oldalra a képek kisebb változatát kell beilleszteni (vaserc_kicsi.jpg, vasmeteorit_kicsi.jpg)! Ezen képekre kattintva jelenjen meg a képek nagyobb változata (vaserc.jpg, vasmeteorit.jpg)!  A forrásoknál az alábbi linkeket kell beállítani: http://hu.wikipedia.org/wiki/Vas, http://h2so4.blog.hu/2007/07/02/atomium! Javasolt megoldás: Megoldási terv: Ahogy az előző feladatban, itt is alapvetően két részre osztható a munka: 

olyan tulajdonságok elkészítése, amely minden oldalon szerepel.



egyedi, külön oldalakra jellemző beállítások (főleg oldaltartalmat érint)

- 43 -


Az eddigi taktikát követjük: elkészítjük az első (index.html) oldalt, majd a hasonlóságokat kihasználva ebből fogjuk kialakítani a weboldal többi oldalát. A felhasználandó eszközök: 

kép beszúrása és linkké alakítás



táblázat beszúrása, szerkesztése



fájl megnyitása linken keresztűl



szöveg beállítások (címsor, szín)



link megadása

Javasolt megoldás lépései: Kezdőlap (index.html) elkészítése 1. A FormátumOldal címe és tulajdonságai menüben állítsuk be az oldal címét (Érdekességek a Vasról - Kezdőoldal)! 2. A FormátumOldal színei és háttere menüben állítsuk be a kért hátteret! 3. Szúrjunk be egy 1x1-es (egy cellás) táblázatot! Ez lesz a tartalmat magában foglaló konténer (a feladat nem tesz róla említést, hogy ennek táblázatnak kéne lennie, de a további beállítások utalnak rá). Állítsuk be a kért értékeket: cellamargó (Helykitöltés) 10 képpont, és szegély 10 képpont, fekete színű, a háttere pedig fehér színű, maga a táblázat középre igazított (A lépés)! Tipp: a szegély színét külön nem lehet beállítani. Alapértelmezettként mindig olyan színű a beszúrt táblázat keretének színe, amilyen betűszínű az a bekezdés, ahova beszúrtuk. 4. Mentsük el index.html néven, és már most mentsük el másként vas.html néven! Vigyázat: a Mentés másként után a legutoljára mentett dokumentum áll szerkesztés alatt, jelen esetben a vas.html oldal (A lépés). Álljunk tehát vissza az index.html-re! 5. A beszúrt táblázatba másoljuk be a szövegeket, a szöveg elé szúrjuk be a mozaik_minta.jpg képet! Ami a feladatban nincs leírva, viszont a mintáról leolvasható: a kép, és az alatta lévő szöveg is középre van igazítva, a megtudhatod szó félkövér (B lépés).

- 44 -


6. A ha továbblapozol szavakat alakítsuk linkké, amely a kért url-re mutat! A vas bemutatása oldal (vas.html) elkészítése 1. A kezdeti lépéseket már elvégeztük az index.html lap elkészítésekkor, és másként mentve vas.html néven az oldal váza már rendelkezésre áll. Folytassuk innen a szerkesztési munkát! 2. Másoljuk be a forrás állományból az ide tartozó, összes szöveget, és alakítsuk ki a szükséges, szövegre vonatkozó beállításokat (betűtípus - Arial, szövegszín – HTML kóddal van megadva, címsorok – 1 és 2 is szerepel)! Vigyázat: a szöveg bemásolás során üres bekezdéseket is átmásoltunk! A mintával egybevetve – látvány alapján – töröljük a felesleges, üres bekezdéseket (C lépés)! 3. A Vissza a kezdőlapra szöveget alakítsuk a vas.html-re mutató linkké! 4. Szúrjuk be a képeket! Vigyázzunk: a képek itt is „kötődnek” bekezdésekhez. Abba a bekezdésbe szúrjuk a képet, ahol a mintán is látszik, azon belül is mindig a bekezdés legelejére (álljunk a bekezdés első betűje elé a kurzorral, majd szúrjuk be a képet)! A kép beszúrása során változtassuk meg a szöveg körbefuttatását a Kép tulajdonságai ablakban a Megjelenés fülön, azon belül pedig a Szöveg a kép körül pontban: az első képnél a Jobb oldalra tördelve, a második képnél a Baloldalra tördelve opciót válasszuk (D lépés)! 5. Alakítsuk ki a Forrásnál látható linkeket! Figyeljünk: a források linkjei felsorolásba vannak szedve – ezt is állítsuk be! 6. Végül végezzük el a mintán is látható, néhány szóra alkalmazott kiemelést: csak jelöljük ki az adott szavakat, és tegyük őket félkövérré!

- 45 -


A – Elkészítjük a weblapok alapját a háttérrel, és a táblázattal, majd rögtön el is mentjük: index.html és vas.html néven.

B – Az index.html oldalon lévő, egycellás táblázatba a forrásban található mintaképet szúrjuk be: ezt is és a kép alatti, bemásolt szöveget is középre igazítjuk, majd a szöveget a minta szerint formázzuk.

C – A vas.html oldalon elhelyezzük a szükséges szövegeket, és formázzuk őket.

D – A vas.html oldalon a képek beszúrásánál megfelelően kell kiválasztani a képek szöveggel való körbefuttatását: itt Jobb oldalra törve beállítás szerepel.


3.3. 3.3.1.

Egy összetettebb feladat OKTV 2008 – Harmadik forduló, 8. feladat

Ez a feladat viszonylag komplex, és sok elemet lefed, melyek előfordulnak az OKTV-n webszerkesztés témakörében (pl.: űrlapok, képtérkép, animáció beszúrása stb). Ezek közül párat a KompoZer nehézkesen, de támogat, ezért itt-ott kreatív, egyedi megoldásokhoz kell nyúlnunk, hogy a kért beállításokat el tudjuk végezni. Első sorban azért került be ez a feladat a munkába, mert komplexitása, és sokszínűsége révén valóban sok olyan dolgot lefed, ami webszerkesztés témakörben elő kerülhet az országos versenyen. Most kivételesen minden egyes oldal után lesznek találhatóak a képes magyarázatok, ezzel is elősegítve a könnyebb követhetőséget. Feladat szövege: [2] Érdekességek Kínáról (20 pont) A mellékelt minta alapján készíts egy honlapot Kínáról! A mintán megfigyelheted az oldalak elrendezését, a különböző igazításokat és más tulajdonságokat. Azon tulajdonságokat, amelyek a mintán nem (jól) látszanak, külön részletezzük.    

A szövegek egységesen Arial betűtípussal szerepeljenek! Az oldalak címe (title) minden esetben az Érdekességek Kínáról – szöveg legyen, amelyet az adott oldal témája követ (pl. Érdekességek Kínáról Animáció, Érdekességek Kínáról - Linkek)! Az oldalakat index.html, animacio.html, linkek.html, teszt.html néven kell elmenteni! Minden oldalra igaz: o az oldal háttere: hatter.png, hivatkozások színe: #EF3A21, látogatott hivatkozások színe: #800000, aktív hivatkozások színe: #51532D; o a tartalom egy 950 képpont széles blokkban található, amelynek 2 képpont vastagságú külső szegélye van; a szegély színe: #51532D; o a nagy_fal_fejlec.jpg képen az „Érdekességek Kínáról” szöveg szerepel, melynek színe: #000080; o a menü minden oldalon ugyanabban a pozícióban helyezkedik el, az aktuális oldal menüpontjára nem kell hivatkozást tenni; o Kína címere és lobogója és a forrásmegjelölés (http://hu.wikipedia.org/wiki/Kína) is minden oldalon ugyanazon a helyen szerepel; a hivatkozás új ablakban nyílik meg; o a Bevezető, Animáció, stb. szövegek 1-es címsorok, a szöveg színe: #EF3A21. Ugyanez a színkódja a címsor alatti vízszintes elválasztó vonalnak.

- 47 -


Bevezető (index.html) 

A Kina_tartomanyai.png kép kicsinyített (200 képpont széles) változatát úgy kell igazítani, hogy a szöveg bal oldalról fussa körbe! A képre kattintva jelenjen meg az eredeti, nagyméretű változat! Animáció (animacio.html)  Az oldalba be kell ágyazni a patkany.swf Flash animációt! Az animáció mérete: 550x412 legyen!  A forrásként megadott hivatkozás új ablakba töltődjön be! Linkek (linkek.html)  A linkek.png kép területein képtérképet kell elhelyezni! Az Olimpia logóján téglalap alakú, a Wikipedia logóján kör alakú, a Chinadaily logóján sokszög alakú területet kell elhelyezni! A hivatkozások ugyanebben a sorrendben: http://en.beijing2008.cn/, http://en.wikipedia.org/wiki/China , http://www.chinadaily.com.cn/ Teszt (teszt.html)  A kérdőív páratlan sorainak háttérszíne: #D2D6B4, a párosaké fehér. Az egyes szövegek melletti űrlapelemek tulajdonságai:  Mi Kína fővárosa? szövegmező, neve: fovaros, szélessége: 40 karakter  Az alábbiak közül melyek Kínai találmányok? Az egyes jelölőnégyzetek neve: nyomtatas, kerek, papir, szelmalom, puskapor Mindegyik jelölőnégyzet esetén az „igen” szöveg legyen az érték!  A Mount Everest Kína legnagyobb pontja választókapcsoló, csoport neve: everest. A kapcsolók értékei: igen, nem. Alapesetben egyik érték se legyen kijelölve! 

A felsoroltak közül melyik autonóm régió? Legördülő menü, neve: autonom. Az egyes választási lehetőségek: Sichuan, Gansu, Tibet. Az űrlap tulajdonságai:  Ha a Küldés gombra kattintunk, akkor az űrlap tartalma a teszt.html oldalra továbbítódjon GET metódussal! Az alaphelyzet gombra kattintással az űrlapmezők vegyék fel az alapértelmezett értékeiket! Javasolt megoldás: Megoldási terv: Ahogy eddig is: elkészítjük azon részeket, amik az összes oldalon egyezőek. Elmentjük őket már az elején a megfelelő nevekkel, és majd utólag alakítjuk ki az egyes oldalakra vonatkozó egyedi tartalmakat. A felhasználandó eszközök: 

kép beszúrása, szerkesztése, linkké alakítása



szöveg formázások (címsorok, színek, méret, betűtípus és –stílus)



táblázat beszúrása, formázása - 48 -




szöveges linkek készítése



képtérkép készítése és beszúrása, flash animáció beszúrása



űrlap készítése

Javasolt megoldás lépései: Általános külalak elkészítése 1. A FormátumOldal címe és tulajdonságai menüben állítsuk be az oldal címét (Érdekességek Kínáról - Bevezető), majd a FormátumOldal színei és háttere menüben állítsuk be a kért hátteret, és a linkek színeit!! 2. Olvassuk el figyelmesen a feladat szövegét, és a forrásokban látható mintát! A feladat itt is csak egy „950 képpont széles blokk”-ról beszél. Világos, hogy ez egy táblázat, de a mintán láthatjuk: az egyik bemutatott példával ellentétben ez nem csak egy táblázat cellából álló blokk! Ez egy olyan táblázat, aminek 3 oszlopa, és 2 sora van. Az első sorban lesz a fejléc, a második sorban lesz (ebben a sorrendben, balról jobbra) a navigációs menü, a tartalom, és a kínai zászlót, címert tartalmazó rész. 3. Szúrjunk be tehát egy 3x2-es táblázatot! A táblázat teljes szélességét állítsuk 950 képpontosra, az első és az utolsó oszlop szélességét pedig (ez most ránézésre állapítsuk meg) 150 képpontosra! Így a tartalmi részre jut 650 képpont. 4. Vonjuk össze az első sor celláit, majd gépeljük be a kért „Érdekességek Kínáról” feliratot (A lépés)! A feliratot tegyük – a mintán látható módon – nagyobbá, tegyük félkövérré, és állítsuk be a kért színt! 5. Most jön a cseles rész: az első cella hátterének képet kellene beállítani. A KompoZer az „alap” táblázat beállításoknál ilyenre nem ad lehetőséget, máshol viszont igen! Az ablak bal oldalán váltsunk DOM Explorer nézetre: ez a nézet egy fastruktúrából áll, és egy alatta lévő ablakból. Az alsó ablakban kattintsunk a CSS fülre, majd kattintsunk a szerkesztő felületen az első sorba (aminek be akarjuk állítani a hátterét)! Ezután a CSS fülön lévő felületen kattintsunk duplán az inline style feliratra: egy párbeszéd ablak jelenik meg: nagyon hasonló ahhoz, amelyet a KompoZer CSS beállításainál láthattunk. Válasszuk ki ebben az ablakban a Háttér fület! Itt már értelemszerűen kitallózható a cellának szánt háttérkép (nagy_fal_fejlec.jpg) (B lépés, C lépés).

- 49 -


6. Készítsük el a táblázat kért, külső szegélyét! Használjuk ismét a korábban említett, DOM Exploreren keresztüli, CSS szerkesztést! A megjelenő ablakban válasszuk a Szegélyek fület, majd állítsunk be a kért színnel, és vastagsággal külső szegélyt! A „hagyományos”, Táblázat tulajdonságai ablakban kapcsoljuk ki a tartalmazó táblázat cellavastagságát, azaz állítsuk 0-ra. A Cellatávolságot, és a Helykitöltést is vegyük le 0-ra! 7. A beállított háttérkép magasabb, mint az őt tartalmazó cella: állítsuk át az első sor magasságát 217 képpontosra (ekkora a háttérkép magassága)! Ezzel kész a fejléc. 8. Az első oszlopba készítsük el a navigációs menüt! Csak másoljuk be a forrásfájlban található szövegeket, alakítsuk őket felsorolássá, majd alakítsuk ki a kért linkeket! 9. Az utolsó sorba kell elkészítenünk a kínai címert, és zászlót tartalmazó táblázatot. Ehhez talán jó megoldás egy egyoszlopos táblázat beszúrása, melyen 5 sora van: minden sorban (cellában) szerepel egy-egy tartalom. 10. Ha beszúrtuk a táblázatot, szúrjuk be az egyes cellákba a megfelelő elemeket, végül alakítsuk ki a kért linket a „Wikipedia” szövegre! 11. Most nézzük a tartalmi részt, azaz a második sor második (középső) celláját: itt is kénytelenek vagyunk egy extra, egycellás táblázatot beszúrni, méghozzá a cím alatt látható szegély miatt. Ez egy egycellás táblázat alsó szegélye. Mielőtt beszúrnánk ezt az egycellás táblázatot, üssünk két bekezdést a honlap tartalmi részébe, és a felsőbe szúrjuk be a táblázatot! Sajnos a szegélyeket külön nem lehet formázni az „alap” táblázat tulajdonságokat tartalmazó ablakban. Használjuk ismét a korábban említett, DOM Exploreren keresztüli, CSS szerkesztést! A megjelenő ablakban válasszuk a Szegélyek fület, majd pipáljuk ki a Mind a négy oldalon azonos szegélystílus opciót! Ekkor már értelemszerűen szerkeszthetőek a szegélyek, külön-külön; készítsünk 1 pt vastag, alsó szegélyt a kért színnel! Az egy cellás táblázatba írjuk, azt hogy „Cím”. 12. Ezzel kész az általános weblap külső (D lépés). Mentsük el háromszor, a következő nevekkel: index.html, animacio.html, linkek.html és teszt.html!

- 50 -


A – A tartalmi részt a mintáról próbáljuk kitalálni: egy 3x2-es táblázatot alakítunk ki. A fejlécet fogja tartalmazni az első, cellaösszevonással készített sor.

C – A fejléc hátterét is DOM-Explorer segítségével készítjük el, a CSS fülön keresztül.

B – Az egyedi szegélyek beállításait a DOMExplorer segítségével készítjük el, a CSS fülön található inline style-ra dupplán kattintva.

D – Az elkészült, egységes weblap felület: a Címnek is külön, egycellás táblázat kellett az alsó szegély miatt.


Bevezető oldal (index.html) elkészítése 1. Folytassuk a munkát a korábban elmentett, index.html oldalon! Az oldal váza már kész van, csak fel kell tölteni a csak erre az oldalra vonatkozó, tartalmi beállításokkal! 2. Címnek írjuk be a „Bevezető” szöveget, majd a cím alá, az egycellás táblázat alá másoljuk be az ide tartozó, forrásfájlban található szöveget! 3. Álljunk a kurzorral az előbb beszúrt bekezdés első betűje elé, majd szúrjuk be a kért képet, úgy, hogy a beszúrásnál a Kép tulajdonságai ablaknál, a Méretek fülön Egyéni méretet választva (megtartva a méretarányt) 200 képpont széles méretet állítunk be! A szöveg körbefuttatást Bal oldalra tördelve tulajdonságúra állítjuk, végül alakítsuk ki a kért linket, mely a kép eredetijére mutat! 4. Ezzel elkészült a Bevezető oldal (azaz az index.html)! Ügyeljünk rá, hogy a baloldali navigációs sávban a „Bevezető” nem szerepel link!

1. ábra: Az elkészült index.html honlap tartalmi része szerkesztő nézetben. A piros keretek jelzik az egyes táblázatok szegélyeinek határait.

Animáció oldal (animacio.html) elkészítése Itt nem sok dolgunk van, de annál „érdekesebben” tudjuk a kért tartalmat a weboldalra varázsolni. 1. A már korábban elmentett animacio.html oldal vázát töltjük fel! Ne felejtsük el megadni a megfelelő oldalcímet a FormátumOldal címe és tulajdonságai menüben!

- 52 -


2. A címnek fenntartott helyen, az egycellás táblázatba írjuk bele a „Animáció” szöveget, majd a cím alá másoljuk be a forrás fájlban található szöveget, és alakítsuk ki a kért linket (a mintáról leolvasható)! 3. Most következik az animáció. Sajnos animáció beszúrására közvetlenül nincs lehetőség a KompoZerben (ahogy ezt korábban is írtuk), ezért kicsit kódolni kell. Álljunk a kurzorral a magyarázó bekezdés, a és a forrást feltüntető bekezdések közé. Válasszuk a BeszúrásHTML opciót, a megjelenő ablakba pedig írjuk be az alábbi kis kódot!

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 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. 4. Állítsuk át a navigációs menüt: tüntessük el a linket az „Animáció” feliratról, és hozzunk létre az index.html-re mutató linket a „Bevezető” feliratra!

- 53 -


2. ábra: A beszúrt animáció kinézete szerkesztő nézetben, és a hozzá tartozó, beszúrt HTML kód

Linkek oldal (linkek.html) elkészítése 1. A már korábban elmentett linkek.html oldal vázát töltjük fel! Ne felejtsük el megadni a megfelelő oldalcímet a FormátumOldal címe és tulajdonságai menüben! 2. A címnek fenntartott helyen, az egycellás táblázatba írjuk bele a „Linkek” szöveget, majd a cím alá másoljuk be a forrás fájlban található szöveget! 3. A bekezdés alá kéne elkészíteni a képtérképet. Mint ebben a munkában már utaltunk rá: képtérképet KompoZerben közvetlenül nem lehet készíteni. Használjunk hozzá Gimpet! A Gimp map kiterjesztéssel menti el az elkészült képtérképet. Szerkesszük ezt a fájlt! A tartalma szöveges, így – elvileg – egy sima Notepaddel is megnyitható. Másoljuk ki a tartalmát, majd a KompoZerben álljunk a kurzorral oda, ahova be szeretnénk szúrni a képtérképet! Válasszuk ki a BeszúrásHTML menüpontot, és a megjelenő ablakba másoljuk be a vágólapon lévő szöveges tartalmat! Ezzel sikeresen beszúrtuk a képtérképet.

- 54 -


3. ábra: Gimpben generált képtérkép kódja, bemásolva a KompoZer HTML beszúró párbeszédablakába

4. Végül ne felejtsük el ismét frissíteni a navigációs menü tartalmát: vegyük le a linket az „Animáció” feliratról, és alakítsunk ki linket a „Bevezető” szövegre, mutasson az index.html-re! Teszt oldal (teszt.html) elkészítése 1. A már korábban elmentett teszt.html oldal vázát töltjük fel! Ne felejtsük el megadni a megfelelő oldalcímet a FormátumOldal címe és tulajdonságai menüben! 2. A címnek fenntartott helyen, az egycellás táblázatba írjuk bele a „Teszt” szöveget! A mintán látható, első bekezdés szövegét másoljuk be, és alakítsuk megfelelő betűtípusúra (Arial)! 3. A mintán láthatjuk, hogy az adott lap belső tartalma egy táblázatban helyezkedik el: hisz sorai felváltva más színűek, ezt pedig érdemes táblázattal elkészíteni (ne feledjük: a bekezdéseknek is vannak háttérszínei, lehetne azzal is kísérletezni). 4. Mielőtt beszúrnánk a táblázatot, hozzunk létre egy űrlapot (BeszúrásŰrlapŰrlapkészítés)! Adjuk meg neki a kért adatokat: a nevet, és az elküldés módját (GET)! 5. Így a szerkesztőnézetben megjelent egy kék, szaggatott keret. Mint korábban említettük, ez jelzi az űrlap határait. Ebbe szúrjunk belegy 2 oszlopos, 5 soros - 55 -


táblázatot! A szélességét állítsunk 100%-osra, a szegélyét vegyük 0 képpontosra: csak tároló funkcióit szeretnénk kihasználni, a szegélyre nincs szükség (A lépés). 6. Ha megfigyeljük a mintát, láthatjuk, hogy az űrlap szövegei kisebb betűmérettel szerepelnek, mint a honlap többi részén. A bal oldali oszlopban pedig félkövér stílusúak a szövegek. Ezek figyelembevételével alakítsuk ki az űrlapot: másoljuk be a forrás fájlból a szükséges szövegeket, és szúrjuk be a megfelelő űrlap elemeket (a kért beállításokkal)! 7. A táblázat utolsó sorát vonjuk össze: ide készítsük el a Küldés és Alaphelyzet gombokat (B lépés)!

- 56 -


A – Az űrlapot egy 2x5-ös táblázatban helyezzük el. Az űrlap határvonalát kék, szaggatott vonal jelzi.

B – A majdnem kész űrlap szerkesztő nézetben: a gombok kialakítása még hiányzik.

C – Az elkészült teszt.html böngészőben megnyitva.

- 57 -


Mint láthattuk, ez a feladat valóban sok eszközt, feladatot vonultatott fel. Sajnos olyanokat is, melyekkel a KompoZer csak többé-kevésbé tud megbirkózni (persze ha valakinek nem okoz gondot a HTML kód használata, akkor semmi gond nincsen). Megegyzés: Kína címerét, és lobogóját tartalmazó rész nem igazán egyezik a mintán megadottal: a „Kína címere” és „Kína lobogója” feliratok közelebb vannak a képekhez, és a két nemzeti jelkép közötti térköz nagyobb. Tehát ezen még lehetne finomítani: vonjuk össze a címer képét, és a hozzá tartozó szöveget tartalmazó cellákat! Ekkor az elrendezés nem változik, viszont a mintához jobban hasonlatos képet kezd alakítani ez a rész. Tegyük meg ezt a kínai zászlóval, és a hozzátartozó szöveggel is! Kiderült: a jobb oldali, minden oldalon megjelenő részhez elég egy egyszerűbb tároló funkciót ellátó táblázat is. Lehetséges,

4. ábra: Az egyszerűsített jobb oldali weblap blokk szerkesztői nézetben: a képfeliratokhoz nem kell külön táblázat cella, így jobban hasonlít az eredmény a mintára

hogy tovább egyszerűsíthető a jobb oldali blokk? Ennek végiggondolását az olvasóra bízzuk.

3.4.

Összefoglaló a webszerkesztés feladatokról

Részben a munka tartalmi keretei miatt, részben a már lefedett, fontosabb részfeladatok miatt több feladat megoldását nem mutatnánk be. Ahogy megfigyelhettük a megoldott feladatokon is, a webszerkesztés feladatok leginkább az alábbi részfeladatokból épülnek fel: 

Valamilyen általános „tárolóba” rakni a honlap tartalmát, amely olyan elemeket is tartalmaznak, amiknek minden oldalon szerepelnie kell.



Linkek készítése: akár szöveges, akár képet (fájlt) megnyitó link, melyeknek – néhol – új ablakban kell megnyílniuk.



Táblázatok beszúrása, azok szerkesztése: méret, háttérszín, háttérkép tekintetében.



Szövegek szerkesztése: szín, méret, betűtípus, betűstílus tekintetében, továbbá címsor beállítások.

- 58 -

Milyen webszerkesztés feladatokat lehetne a jövőben kiadni?



Űrlapok készítése.

Úgy gondoljuk, hogy a fentebb levezetett, három feladat jól lefedi az OKTV-re kiadott feladatok részfeladatait. Amilyen részfeladatok pedig nem szerepeltek, azok olyan nehézségűek, melyeket intuitíve is meg lehet oldani. Kisebb balszerencsének tekinthető a KompoZer nevű alkalmazás választása a feladatok levezetéséhez, de mivel – mint ahogy a témához tartozó bevezetőben is írtuk – nagy a bizonytalanság a Microsoft termékekkel kapcsolatban (most 2012 novemberét írunk), és mivel ennek a munkának a lényege a jövőbe tekintés, nem lett volna szerencsés választás egy Microsoft termékre alapozni: nem tudni, mit hoz a jövő.

4. Milyen webszerkesztés feladatokat lehetne a jövőben kiadni? Ahogy a képszerkesztésnél is, ebben a fejezetben röviden összefoglalnám, milyen feladatokat lehetne a jövőben kiadni az informatikai OKTV verseny alkalmazói kategóriájának webszerkesztés témakörében.

4.1.

A jelen versenyfeladatairól

Úgy gondolom, hogy a jelenlegi versenyfeladatok jól lefedik azokat a legfontosabb tudáselemeket, melyek szükségesek lehetnek bármely weboldal elkészítésében. Így véleményem szerint – egy terület felé lehetne tovább bővíteni a jelenlegi versenyfeladatokat: a stíluslapok irányába. Ezek legalább olyan fontosak, mint bármely más formázás, például táblázatok formázása. Egy weboldal külsejének (stílusának) a hatékony megformálása olyan alap követelmény, amit véleményem szerint egy országos szintű versenyen illene tudni.

4.2.

Kihasználatlan funkciók

Stíluslapoknak nagy ereje van – ahogy a szövegszerkesztésben a stílusoknak – és a jelenlegi, ill. volt versenyfeladatok nem fordítanak rá akkora figyelmet. Persze a feladatok nem tiltják meg, hogy az egyes stílusbeállításokat stíluslapok segítségével oldják meg a diákok (például adná magát, hogy a címsorok betűtípusait, és betűszínét stíluslappal oldják meg), mégis úgy érezem, hogy bizonyos részfeladatok bevezetésével tovább lehetne a versenyzőket bátorítani arra, hogy stíluslapokat használjanak.

- 59 -


Természetesen a stíluslapok használatát sem kéne mindent kiterjedően tudni – annak nem is lenne értelme. Viszont az az elvárás, hogy a stíluslapoknak a legalapvetőbb kihasználási szintjét (színek, háttérképek és szövegek formázása) ismerjék a versenyzők és tudják is használni, úgy érzem: reális.

4.3.

Külső stíluslapok használata: javasolt részfeladat

A webszerkesztés feladatok – véleményem szerint – már így is eléggé lefedik az általános lehetőségeket. Így javaslatot csak egy kisebb részfeladatra teszünk. Hasonlóan, mint a képszerkesztésnél javasolt feladatnál: itt is két (vagy többféle) munkát lehetne kérni a versenyzőktől. A honlapra vonatkozóan két (vagy esetleg több) külsőt kérhetnénk – természetesen ezzel is sugallva a (külső) stíluslapok használatát. Mintán megkapnánk (a mintán nem látható részleteket a feladatlap részletezné), hogy milyen külső, stílusbeli tulajdonságokkal kell rendelkeznie a két verziónak. Beadott munkának egy honlapot, és két, külső CSS stíluslap fájlt várhatnánk el (azok kaphatnák a legtöbb pontot, akik így jártak el). 4.3.1.

Stíluslapok ellenőrzése

Szerencsére ebben az esetben nem kell javítási stratégiát adni – nem úgy, mint képszerkesztésnél – hiszen a CSS stíluslap fájlok szövegesek, és csak ellenőrizni kell a tartalmukat, hogy megtörténtek-e a kért beállítások. A beállított értékek mellett a beadott weblaphoz csatolt CSS fájlokkal külön-külön ellenőrizhetjük, hogy mennyire egyezik a mintával a versenyző munkája.

4.4. 4.4.1.

Többlet pontok problémája Alap probléma: több feladat, több pont

Ahogy képszerkesztésnél is, itt is felvetül: ha többet követelünk a feladatban, mint amennyit eddig (két, különböző weblap megjelenés) akkor azért plusz pont jár, az eddigieken felül. Ezzel ismét a többi feladat rovására kéne számolnunk. Mi tehát a megoldás erre a problémára? 4.4.2.

Megoldási javaslat [2]

Ha megnézzük a korábbi évek pontozási útmutatóit, akkor láthatjuk: a legtöbb (több dologból álló) beállításra 1 pont jár. Eddig is kellett a weblapoknak valamilyen külsőt

- 60 -


adni, ezért járt is pont. A korábban említett stíluslapi tulajdonságoknak a beállítása (színek, háttérképek és szövegek formázása) az eddigi OKTV feladatokban is túlnyomórészt 1 pontot értek (pl. konkrét szín beállítása). Ha tehát kérünk egy új weblap külsőt is az eddigi mellé, 5-6 különböző objektumra történő, megjelenést érintő formázási beállítással, akkor kb. plusz 5-6 pont jár az egész webszerkesztés feladatra. Az utóbbi időkben a webszerkesztés feladatokra 20 pont járt összesen. A 20 ponthoz – arányaiban – soknak tűnhet ez a 5-6 plusz pont. Viszont ha megvizsgáljuk a korábbi évek webszerkesztés feladatait (OKTV-ben, azaz a 11-12-es korosztályban), akkor láthatjuk, hogy az egyes években a több feladatot kérő feladatsorok is „beleférnek” 20 pontba. Érdemes összevetni a jelen munkában is megoldott, 2008-as OKTV Harmadik fordulójának, 8. feladatát (Érdekességek Kínáról), és a 2012-es OKTV Harmadik fordulójának 6. feladatát (A szén bemutatása). Mindkét feladatért 20 pont jár, viszont az előbbi – véleményem szerint – érezhetően többet vár el (pl.: űrlap, állandó tartalom a jobb és baloldalon, cellaháttér, képtérkép), ugyanúgy 20 pontért. Így hát elsősorban az lenne a megoldási javaslatom a felmerült plusz pontok problémájára, hogy gazdálkodjuk ki! Ha egy Érdekességek Kínáról szintű feladatot lehetséges 20 pontba „besűríteni”, akkor egy olyan kisebb részfeladatnak is reális esélye van 20 pontba beleférnie, amely „csak” annyit kér, hogy a honlapnak. készítsünk két, különböző stílust. Ugyanakkor az egyes versenyfeladatsorok összeállítása során is ki lehetne gazdálkodni ezt a kb. 5-6 pontot a webszerkesztés feladatok javára. 200 ponthoz képest véleményem szerint ez nem sok. Amennyiben 200 pont marad a megszerezhető maximális pontszám.

4.5.

Egy lehetséges, jövőbeni webszerkesztés feladat

A fenti gondolatok figyelembevételével igyekeztem olyan versenyfeladatot összeállítani, ami jobban épít a külső CSS stíluslapok használatára. 4.5.1.

Feladat szövege5

Honlapkészítés: Érdekességek az exobolygókról (25 pont)

5

A feladat szövegében felhasználásra kerültek bizonyos bevett utasítások, feladatszövegek a [2] forrás alapján

- 61 -


Egy kis csillagászati klub publikálni szeretné egy, ún. exobolygókról szóló honlapját. A honlap tartalma már végleges, viszont a külső megjelenést tekintve két elképzelés közül még nem tudnak dönteni: a mellékelt minták segítségével készítsd el a honlapot két, különböző megjelenéssel! )! Ezzel is segíted a klub döntését (akkor kapod a legtöbb pontot, ha a honlapot példányban készíted el, és külön mellékeled a két, külsőt leíró fájlt). A mintán megfigyelheted az oldalak elrendezését, a szövegek, képek igazítását és egyéb, látható tulajdonságokat. Azon tulajdonságokat, amelyek a mintán nem (jól) látszanak, külön részletezzük: Ami mindkét megjelenésre jellemző: 

A szövegek egységesen Arial betűtípussal szerepeljenek!



Az oldalak címe (title) minden esetben az Érdekességek az exobolygókról – szöveg legyen, amelyet az adott oldal témája követ (pl. Érdekességek exobolygókról - Linkek, Érdekességek exobolygókról – Véleményezz!)!



Az oldalakat index.html, exo.html, 6 velemeny.html néven kell elmenteni .



a tartalom egy olyan, 800 képpont széles, és legalább 600 képpont magas blokkban található (azaz ha a tartalom nem tölti ki teljesen a blokkot, akkor 600 képpont magasnak kell lennie) amelynek 5 képpont vastag, külső szegélye van; (a szegély színét lásd lentebb)



a menü minden oldalon ugyanabban a pozícióban helyezkedik el, az aktuális oldal menüpontjára nem kell hivatkozást tenni;

linkek.html,

Stílus 1-re jellemző tulajdonságok: 

az oldal háttere: hatter_1.jpg, hivatkozások színe #218391, látogatott hivatkozások színe: #FF00FF, aktív hivatkozások színe: #000000, annak a hivatkozásnak a színe, ami fölött éppen kurzorral állunk: #0000FF;



a tartalom 5 képpont vastag szegélyének színe #218391;



a Kezdőoldal, Mik az exobolygók?, stb. szövegek 1-es címsorok, a szöveg színe: #218391;



a Mik az exobolygók? lapon (exo.html) az alcímek 2-es címsorok, dőlten szedettek, szöveg színük: #218391;

Stílus 2-re jellemző tulajdonságok: 

az oldal háttere: hatter_2.jpg, hivatkozások színe #89D1FF, látogatott hivatkozások színe: #218391, aktív hivatkozások színe: #000000, annak a hivatkozásnak a színe, ami fölött éppen kurzorral állunk: #FFFFFF;



A oldal törzsszövegének színe: #FBFBFB



a tartalom 5 képpont vastag szegélyének színe #FFBD1D;

6

A honlap fejlécének képében felhasznált, bolygókat ábrázoló kép forrása: NASA/JPL-Caltech/R. Hurt (SSC-Caltech)

- 62 -




a Kezdőoldal, Mik az exobolygók?, stb. szövegek 1-es címsorok, középre igazítottak, a szöveg színe: #D99E11;



a Mik az exobolygók? lapon (exo.html) az alcímek 2-es címsorok, dőlten szedettek, szöveg színük: #D99E11;

Kezdőoldal (index.html) A. A Hubble.jpg kép és a hozzá tartozó képaláírás középre igazított, a képaláírás dőlt. Mik az exobolygók? (exo.html) B. A Orbit.gif képet úgy szúrd be, hogy a szöveg és a kép között 5px távolság legyen, továbbá a szöveg fussa jobbról körbe! A forrás hivatkozása a http://hu.wikipedia.org/wiki/Exobolyg%C3%B3 oldalra mutasson, és új ablakban nyíljon meg! Linkek (linkek.html) C. A kepterkep.png kép területein képtérképet kell elhelyezni! A Wikipedia logójára (és a hozzá tartozó szövegre) sokszög alakú, a Magyar Csillagászati Egyesület logójára kör alakú, míg a NASA logójára négyszög alakú területet kell elhelyezni. A hivatkozások ebben a sorrendben: http://en.wikipedia.org/wiki/Exoplanet, http://www.mcse.hu/, http://www.nasa.gov/. Teszt (tesz.html) D. Név A szövegmező neve nev, szélessége 30 karakter E. Vélemény A szövegterület neve v_szoveg 8 sorból, és 30 oszlopból áll, alapértelmezettként a következő szöveg szerepel benne: „Ide írd a véleményed!”. Az űrlap tulajdonságai: A. Ha a Küldés gombra kattintunk, akkor az űrlap tartalma a teszt.html oldalra továbbítódik GET metódussal! Az Alaphelyzet gombra kattintással az űrlapmezők vegyék fel az alapértelmezett értékeiket! Javítási útmutató: A. A szövegek egységesen Arial betűtípussal szerepelnek

1 pont

B. Az oldalak címe (title) minden esetben az Érdekességek exobolygókról - szöveg, amelyet az adott oldal témája követ (pl.: Érdekességek exobolygókról – Kezdőoldal, Érdekességek exobolygókról – Mik az exobolygók? stb.). Az oldalak index.html, exo.html, linkek.html, teszt.html néven vannak elmentve 1 pont Minden oldalra igaz: C. a tartalom egy olyan, 800 képpont széles, és legalább 600 képpont magas blokkban található (a táblázat magassága 600 képpontra van állítva) amelynek 5 képpont vastag, külső szegélye van 1 pont

- 63 -


D. a menü minden oldalon ugyanabban a pozícióban helyezkedik el, az aktuális oldal menüpontján nincs hivatkozás; 1 pont Ha az alábbi külsők közül csak egyet csinált meg (akár stíluslappal – csatolt, vagy belső stílussal - , vagy a nélkül), akkor azt az egyet kell pontozni az alábbiak szerint. Csak abban az esetben adható pont mindkét stílusra, ha külső CSS fájlként vannak mellékelve (ebben az esetben mindegy, hogy a beadott honlaphoz éppen melyik stíluslap van a kettő közül csatolva). Stílus 1-re jellemző tulajdonságok: E. az oldal háttere: hatter_1.jpg7, hivatkozások színe #218391, látogatott hivatkozások színe: #FF00FF, aktív hivatkozások színe: #000000, annak a hivatkozásnak a színe, ami fölött éppen kurzorral állunk: #0000FF; 1 pont F. a tartalom 5 képpont vastag szegélyének színe #218391;

1 pont

G. a Kezdőoldal, Mik az exobolygók?, stb. szövegek 1-es címsorok, a szöveg színe: #218391; 1 pont H. a Mik az exobolygók? lapon (exo.html) az alcímek 2-es címsorok, dőlten szedettek, szöveg színük: #218391; 1 pont Stílus 2-re jellemző tulajdonságok: I. az oldal háttere: hatter_2.jpg8, hivatkozások színe #89D1FF, látogatott hivatkozások színe: #218391, aktív hivatkozások színe: #000000, annak a hivatkozásnak a színe, ami fölött éppen kurzorral állunk: #FFFFFF; 1 pont J. A oldal törzsszövegének színe: #FBFBFB

1 pont

K. a tartalom 5 képpont vastag szegélyének színe #FFBD1D;

1 pont

L. a Kezdőoldal, Mik az exobolygók?, stb. szövegek 1-es címsorok, középre igazítottak, a szöveg színe: #D99E11; 1 pont M. a Mik az exobolygók? lapon (exo.html) az alcímek 2-es címsorok, dőlten szedettek, szöveg színük: #D99E11; 1 pont Kezdőoldal (index.html) N. Az oldal tartalma megfelel a mintának; a megadott kép és a hozzá tartozó képaláírás középre van igazítva, a szöveg dőlt 1+1 pont Mik az exobolygók? (exo.html) O. Az oldal tartalma, elrendezése megfelel a mintának, a forrásként megadott hivatkozás jó helyre mutat; és új ablakban töltődik be; 1+1 pont P. A Orbit.gif képet a szöveg jobbról futja körbe; a kép és a szöveg között 5px-es térköz van beállítva 1+1 pont Linkek (linkek.html) Q. Az oldal tartalma, elrendezése megfelel a mintának 7 8

forrás: http://www.grsites.com forrás: http://www.grsites.com

- 64 -

1 pont


R. A kepterkep.png kép területein képtérkép lett elhelyezve A Wikipedia logójára (és a hozzá tartozó szövegre) sokszög alakú, a Magyar Csillagászati Egyesület logójára kör alakú, míg a NASA logójára négyszög alakú területet kell elhelyezni. A hivatkozások ebben a sorrendben: http://en.wikipedia.org/wiki/Exoplanet, http://www.mcse.hu/, http://www.nasa.gov/. 1 pont Teszt (teszt.html) S. Az oldal tartalma, elrendezése megfelel a mintának

1 pont

Az egyes szövegek melletti űrlapelemek tulajdonságai: T. Név A szövegmező neve nev, szélessége 30 karakter

1 pont

U. Vélemény A szövegterület neve v_szoveg 8 sorból, és 30 oszlopból áll, alapértelmezettként a következő szöveg szerepel benne: „Ide írd a véleményed!”. 1 pont Az űrlap tulajdonságai: V. Ha a Küldés gombra kattintunk, akkor az űrlap tartalma a teszt.html oldalra továbbítódik GET metódussal! Az Alaphelyzet gombra kattintással az űrlapmezők vegyék fel az alapértelmezett értékeiket! 1 pont 4.5.2.

Mellékletben megkapott minták

A versenyzők a honlap minden oldaláról kapnának mintaképeket, mind a két stílusban, amelyeket a feladat kér. A mintaképek a következő oldalakon tekinthetőek meg (az első képsorozat az első stílusban mutatja a honlapot, míg a második képsorozat a második stílusban).

- 65 -






Összegzés A szakdolgozatomban igyekezetem ingyenesen elérhető alkalmazásokat használva, lépésenként bemutatni egyes OKTV/OKATV feladatok megoldását, melyeket törekedtem úgy összeválogatni, hogy a lehető legátfogóbb képet adják a várható feladatokról, és azok nehézségéről, ill. egy lehetséges megoldási módjáról: ezzel is bemutatva azt, hogy milyen „fogásokkal” érdemes a felmerülő problémákat, feladatokat megoldani, ezzel is fejlesztve az olvasónak az adott alkalmazás által nyújtott eszközeinek hatékonyabb felhasználását. Mindkét témakört jövőbe tekintéssel zártam le: megvizsgáltam, hogy a jelenlegi (és a korábbi) feladatok milyen témákat nem érintenek, és ezen vizsgálatok alapján igyekeztem javaslatokat tenni arra nézve, hogy merre lehetne tovább lépni a feladatok kitűzését tekintve. Elképzeléseimet egy-egy feladattal (és hozzájuk tartozó értékelési útmutatóval) szemléltettem. A mellékletekben végigvezetem az olvasót az egyes alkalmazások használatán, az OKTV/OKATV képszerkesztésre, és webszerkesztésre kiszabott, szükséges alapismeretei alapján [2]. Az előszóban említettem, hogy a szakdolgozatom elsődleges célja, hogy segítse az informatika alkalmazói OKTV-re illetve OKATV-re készülő diákokat a felkészülésben, tanáraikat pedig a felkészítésben. Úgy érzem, ezt a célt sikerült teljesíteni – habár munkám során kiderült, hogy egy ilyen keretek közé szorított szakdolgozatba egy ilyen téma nem fér bele hiánytalanul: az általam megítélt legfontosabb dolgokat írtam bele a munkámba. Ennek ellenére úgy érzem, használható segédanyagot sikerült készítenem, és remélem, hogy a jövőben is sokakat segít majd az itt összeállított munkám.

- 70 -


Mellékletek – Képszerkesztés (rasztergrafika) Mint azt az előszóban is megemlítettem: az OKTV/OKATV feladatok rasztergrafikai feladatainak megoldásához Gimpet (a jelenleg legfrissebb, 2.8-as verziót) fogjuk használni. Választásom oka legfőképp az ingyenesség, és a lehetőség: Gimpet nem csak Windows-os, hanem Linuxos gépekre is lehet telepíteni, melyek szintén ingyenesek (pl. Ubuntu). Szükséges végignéznünk pár elméleti részt, gyakorlati beállítási lehetőséget, melyet a Gimp kínál. Ha elegendő tudás birtokában vagyunk, akkor térünk át pár képszerkesztési feladatra. Mindegyik feladatnál jelölni fogjuk, hogy melyik évi versenyből, és melyik fordulóból van, kivételt képeznek ez alól az ún. gyakorló feladatok, melyek pár eszköz használatát hivatottak bemutatni / gyakoroltatni. A gyakorló feladatokat külön fogom jelölni.

- 71 -

Képfájl tulajdonságai

5. Képfájl tulajdonságai 5.1. 5.1.1.

Méret Méret megadása új fájl létrehozása esetén

Bizonyára mindenki számára világos, hogy miért lehet fontos egy-egy kép méretének a beállítása. Alapjában véve itt pixelben megadott méretről beszélünk, de természetesen – ahogy azt egy komolyabb képszerkesztő programhoz illik – más mértékegységekben is megadhatjuk a kép méreteit (pl.: centiméter).

5. ábra: Képméret beállítása új fájl esetén

A kép méreteit már egy új kép létrehozásakor (Fájl -> Új, vagy CTRL+ N). beállíthatjuk. Sablonok közül is választhatunk, melyek már előre megadott méreteket tartalmaznak (pl.: klasszikus monitor felbontások – 1024 x 768, vagy egyéb papír méretek: A4, A5 stb.)

5.2.

Felbontás

Mit is jelent egy kép felbontása? Nyomtatás kapcsán eshet róla szó, és általában dpi-ben (dots per inch) adják meg. Tehát tömören arról van szó, hogy nyomtatás során egy bizonyos területen

6. ábra: Speciális lehetőségek beállítása Képfelbontás

mennyi képpont szerepeljen. Nagyobb érték nyílván jobb minőségű képet eredményez. Például 72 dpi azt jelent, hogy egy négyzethüvelyknyi területen 72 x 72, azaz 5184 képpont található. Kép felbontását érdemes új kép létrehozásakor megválasztani. Az Új kép létrehozása párbeszédablakban nyissuk le a Speciális lehetőségeket. Itt be tudjuk állítani a kép felbontását. Alapértelmezett beállításban ppi-ben (képpont / hüvelyk) van megadva. A versenyfeladatokban általában nem szokták kérni a képfelbontás beállítását, viszont annál inkább a képméret beállítását! Viszont nem árt, ha tudjuk, mit is jelent a képfelbontás, és hogy hogyan kell beállítani.

- 72 -

Képfájl tulajdonságai

5.3.

Színmélység, színséma

5.3.1.

Megadása új kép esetén

Új kép létrehozásánál lehetőség van beállítani a színmélységet, színsémát. Ehhez nyissuk le az Új kép létrehozása párbeszédablakban látható Speciális lehetőségek opciót (itt találhattuk meg a kép felbontására vonatkozó beállításokat is, lásd: 2. ábra). Figyeljük meg a Színséma legördülő menüt! Itt állíthatjuk be a kívánt színsémát. A versenyek (vagy érettségihez is) kettő beállítás lehet hasznosabb: RGB szín, és szürkeárnyalatos. Előbbi – mint ahogy kiolvasható az elnevezésből – színes, míg utóbbi fekete-fehérré, pontosabban szürkeárnyalatossá teszi a képünket. 5.3.2.

Módosítása meglévő kép esetén

Meglévő kép esetén válasszuk a KépMód menüt. Itt ismét megtaláljuk az RGB szín, illetve Szürkeárnyalatos opciókat (több más mellett is). Az éppen megnyitott képet így akár szürkeárnyalatossá is alakíthatjuk.

- 73 -

Képfájl transzformációk

6. Képfájl transzformációk Eddig már volt szó bizonyos kép transzformációkról, a Képfájl tulajdonságai című alfejezetben – ott kép méretét állítottuk be, illetve módosítottuk. Milyen, egyszerű kép transzformációkra van még lehetőség? Ezek a beállítások a képfájl egészére vonatkoznak, nem csak bizonyos részeire Az alábbiakra: 

Tükrözés vízszintesen, függőlegesen



Elforgatás jobbra, ill. balra 90°-kal



Elforgatás 180°-kal



Guillotine (segédvonalak használatával) – Erre nem térünk ki; a segédvonalakról bővebben: Képmanipulálás, képtranszformáció. (98. oldal)

A fent felsorolt kép transzformációs parancsokat a Kép -> Átalakítás menüjében találhatjuk meg.

- 74 -

Színbeállítások

7. Színbeállítások Legegyszerűbben úgy nyithatjuk meg a színbeállítások párbeszédablakát, ha duplán az Előtérszínre kattintunk, melyet az Eszközbeállítások ablakban találjuk, az eszközök alatt.

7. ábra: Elő- és háttérszínek

Dupla kattintás után megjelenik az „Előtérszín megváltoztatása” párbeszéd ablak, melyen nekünk tetsző módon választhatjuk ki a megfelelő színt, amit éppen használni szeretnénk (pl. színkerék, vagy színskála megadásával). Ezek mellett a párbeszéd ablak mindvégig mutatja, hogy a kiválasztott szín milyen RGB koordinátákkal, vagy HTML szabvány szerinti színkóddal rendelkezik, mely kódokat akár át is írhatunk, ha az adott

képszerkesztési

feladatban

kóddal adták meg a színt. A Gimpben elő- és háttérszín megadására is van lehetőség, melynek jó, ha tudjuk a logikáját (meg

8. ábra: Színbeállítás a GIMP 2.8.0-ban

egyáltalán: miért is lehet rá szükség?).

7.1.

Elő- és háttérszín

Nézzük meg jobban az elő- és háttérszínt ábrázoló képet (3. ábra). Mint láthatjuk (logikus módon) az előtérszín van elől, és a háttérszín van hátul. A két szín között bármikor válthatunk a színek felett lévő, fehér kettős nyilacskával (

). Ennek egyik előnye,

hogy két színt „tarthatunk kéznél”, így a két, leggyakrabban használt színt érdemes ide beállítani. A háttérszínnek sok más jelentősége is van. Például radírozásnál ilyen a beállított háttérszínnel fogja a program kiszínezni a kiradírozott részt. Tehát ha például piros szín van beállítva háttérszínnek, akkor a radír piros nyomot fog hagyni. Jogosan felvetülhet a kérdés: ennek mi értelme van? Pirosan fogó radír? Nagyon jó értelme van (ha lehet így fogalmazni), ha például a rajzlap háttere nem fehér, hanem piros. Ekkor ugyanis igen kellemetlen lenne, ha radírozáskor fehér nyomot hagyna a radír, nem pedig pirosat!

- 75 -

Színbeállítások

7.2.

Színek megadása színkódok alapján

Mit is jelentenek a színkódok? Különböző – matematikai alapú – tudományokban igyekeznek minél több dolgot számszerűsíteni, így konkretizálni. Ugyanezt meg lehet tenni a színekkel is. Mit jelent pontosan a piros szín? A pirosnak rengeteg árnyalata van, de ezeket meg tudjuk különböztetni, ha a különböző színekhez különböző kódokat rendelünk. Több fajta hozzárendelés is van, mi ebből most kettőt vizsgálunk meg közelebbről. 7.2.1.

Szín megadása RGB koordinátákkal

Az RGB kód a következő szavak rövidítéséből áll elő: red, green, blue; azaz piros, zöld, kék. Ennek a három színnek a különböző mértékű összekeverésével előállítható az összes szín.

9. ábra: egy pirosas szín RGB kódja: (255, 77, 0)

Csupán annyit kell megadnunk, hogy a három színt milyen mértékben adjuk hozzá a „keverékhez”. A hozzáadás mértékét jelölik 0255-ig egy-egy számmal, mindhárom színnél külön-külön; jelölés: (R, G, B), ahol az R, G, B értékek 0-255-ig vehetnek fel értéket. Gimpben az RGB kódot a színválasztásnál, a színskálától jobbra találjuk, és az utolsó három érték leolvasása alapján tudhatjuk meg. Mindhárom színkoordináta külön-külön szerepel, így az esetleg előre megadott színkódokat is nekünk kell koordinátánként begépelni (5. ábra). Példák: 1. Piros szín: (255, 0, 0) – pirosból teszünk bele a legtöbbet, ezért az első koordinátán 255 áll, a többin 0. Persze más összetételű piros árnyalatokat is ki tudunk keverni, ebben az esetben a többi színből is tehetünk bele. 2. Fekete szín: (0, 0, 0) – semelyik színből sem rakunk bele. Így feketét kapunk. 3. Fehér szín: (255, 255, 255) – mindegyik színből maximálisat keverünk bele, így áll elő a fehér szín. A fehér szín felbontható az összes színre (lásd: fizikában a prizmával végzett fény kísérletek), így nyilvánvaló, hogy az összes színből a fehér szín áll elő.

- 76 -

Színbeállítások

7.2.2.

Szín megadása HTML szabvány szerint

A színek számosításának másik megközelítése az ún. HTML kód szerinti megadás. Alapjában véve itt is három alapszín szerint bontják fel a színeket, és itt is a piros, zöld, kék felosztást választották. Annyi a különbség, hogy 16-os számrendszerben9 adják meg a színek hozzáadásának mértékét a kikeverni kívánt színhez. Az egyes alapszíneket kétjegyű, 16-os számrendszerbeli számmal jelölik, és egymás mellé írják az így megadott értékeket. Így egy 6 jegyű kódot kapunk. Van, hogy a kódok elé kettőskeresztet írnak (hashmark), de olykor (például a Gimpben is) ez elhagyható. Példák: 1. Piros szín: #ff0000 – pirosból teszünk bele a legtöbbet, ezért az első koordinátán ff áll, a többin 0. 2. Fekete szín: #000000 – semelyik színből sem rakunk bele. Így feketét kapunk. 3. Fehér szín: #ffffff – mindegyik színből maximálisat keverünk bele, így áll elő a fehér szín. A színkiválasztásnál ugyanúgy megtaláljuk a HTML kódját az éppen kiválasztott színnek, mint RGB kód esetén: a színskálától jobbra, az RGB színkoordináták alatt el nem téveszthetjük a HTML kódot; ugyanis még egy felirat is felhívja rá a figyelmünket. Hangsúlyozni kell, hogy ezeket a színkódokat nem csak leolvasni tudjuk egyes színek kiválasztásakor, hanem módosítani is tudjuk őket! Azaz ha nem találomra akarunk egy színt kiválasztani akár a színskála, akár a színkerék segítségével, akkor egy

10. ábra: Pirosas szín HTML kódja

színkódot megadva (akár RGB, akár HTML) is beállíthatunk színeket.

7.3.

Háttérszín

Mint a kép méretének megadásakor, itt is egyből megadhatjuk a háttérszínt már a kép létrehozásakor, vagy később is módosíthatjuk azt.

9

16-os számrendszerben a számjegyeket 0-F-ig jelölik. F jelenti a 15-öt, míg például az A 10-t jelent.

- 77 -

Színbeállítások

7.3.1.

Háttérszín megadása új kép létrehozásakor

Ehhez először állítsuk megfelelő színre az Előtérszínt – ezt az Eszköztárban, az Eszközbeállítások ablakban találjuk, az eszközök alatt. Ezután hozzunk létre egy új fájlt, és az Új kép létrehozása párbeszéd ablakban nyissuk le a Speciális lehetőségeket. Itt a Kitöltés ezzel felirat melletti legördülő menüben több féle lehetőség közül választhatunk, melyekkel kitölthetjük a kép hátterét, többek között az Előtérszínnel, vagy Háttérszínnel. 7.3.2.

Háttérszín megadása – meglévő kép esetén

Válasszuk ki a Rétegek – Ecsetek ablakban (ez az ablak alapértelmezett esetben jobb oldalt található a fő ablakhoz képest), a rétegek közül a legalsó, alapértelmezett esetben Háttér névvel ellátott réteget. Válasszuk ki a megfelelő Előtérszínt, majd a Kitöltés eszközzel (

) kattintsunk a rajzterületre. Ezzel meg is volt a háttér kiszínezése.

- 78 -

Ecsetek

8. Ecsetek Az Ecset egyike a Gimp rajzeszközeimek. Az ecsethez hasonló rajzeszköz a Ceruza. A kettő eszköz között nagy különbség van. Míg az ecset „elmosódott szélű” nyomot hagy, addig a ceruza

11. ábra: Ecset és ceruza közti különbség

– úgy, mint a sokak által ismert MS Paint alkalmazásban – „éles” nyomot hagy (7. ábra). Az Ecset eszközt az eszköztárban találjuk, és a következő ikonnal ábrázolják:

.

Mint ahogy a Gimp számos eszközénél, itt is lehetőség van az eszköz beállításaira, amire nyílván szükség is van, hisz egy-egy eszközzel nem sokra mennénk, ha nem tudnánk éppen aktuális igényeinkhez igazítani a működését (pl.: ecset eszköz esetén olykor vékonyabb, olykor vastagabb ecsetre lehet szükségünk).

8.1.

Ecset tulajdonságai Az Ecset eszköz beállításait szerepeltető panel akkor válik láthatóvá, ha kiválasztottuk az eszköztárból az Ecset eszközt. Ez a panel az eszköztár alatt válik láthatóvá (8. ábra). Megjegyzendő, hogy minden egyéb eszköz esetén – ha van lehetőség az eszköz „viselkedésének” módosítására – ugyanitt fog megjelenni az eszközbeállításokat tartalmazó panel. Ezt a tulajdonságpanelt a képernyő tetszőleges helyén el lehet helyezni, sőt akár be is lehet zárni. Amennyiben véletlenül eltüntettük az eszköztárat, újra megjeleníthetjük azt az Ablakok  Dokkolható párbeszédablakok 

12. ábra: Ecset eszköz beállítási lehetőségei

Eszközbeállítások menüben.

- 79 -

Ecsetek

Mint ahogy az előző ábrán is látható, elég sok beállítási lehetőségünk van. Csak a legfontosabbakat nézzük át, a többit kísérletezés útján ki lehet próbálni, hogy és miként működnek.

8.1.1.

Konkrét ecset kiválasztása

Már azt is megválaszthatjuk, hogy hogyan fogjon az ecset. Egyszerűbben szólva: arról is dönthetünk, hogy milyen ecsettel szeretnénk rajzolni. Ehhez csak rá kell kattintanunk az aktuális „ecsetvéget” tartalmazó ikonra (9. ábra). Mint látható, igen sok ecset közül választhatunk, me-

13. ábra: Ecsetek választéka

lyeknél – értelemszerűen – mind megváltoztathatóak az ecset többi tulajdonságai, melyek közül a legfontosabbakat most át is nézzük. 8.1.2.

Szín

Talán itt is érdemes megjegyezni, hogy az Ecset eszköz mindig az Előtérszínnel fog nyomot hagyni. A színbeállításokról részletesebb leírást lásd a korábbi fejezetben: Színbeállítások, 75. oldal. 8.1.3.

Méret

Az ecset méret értékét az ecset formájának ikonja alatt láthatjuk. A méret az ecset átmérőjére vonatkozik, mely pixelben van megadva. Háromféle módon is beállíthatjuk: 14. ábra: Ecset méretét szabályozó csúszka

1. Beírjuk a konkrét átmérőt 2. A csúszkával állítunk rajta 3. A beviteli mező oldalánál található fel és le mutató nyilakkal is tudunk módosítani az értékeken. Ezt inkább csak kisebb méret finomításnál érdemes használni.

- 80 -

Ecsetek

8.1.4.

Átlátszóság

Ez egy eléggé cseles tulajdonság! Nevezhetnénk haloványosságnak is. Azért neveztem cselesnek, mert például ha sötétzölddel színezünk, és átállítjuk az átlátszóságot nagyobb méretre, akkor az ecsetünk világoszölden fog fogni. Ha ez után többször rászínezünk az előbbi, világoszöld rész-

15. ábra: Fent egy átlátszatlan zöld vonal, lent egy 50%-os átlátszóságú ecsettel, többször áthúzott vonal

re, akkor egyre sötétebbé fog válni, mígnem eléri az eredetileg is beállított sötétzöld színt. Az átlátszóság tehát ezt jelenti: áttetsző lesz az ecsetünk nyoma, de ez által a beállított színek világosabbnak fognak hatni – az átlátszóság mértékével egyező arányban.

- 81 -

Szabadkézi rajzolás

9. Szabadkézi rajzolás Szabadkézi rajzolás kapcsán pár trükköt osztanék meg a kedves olvasóval, melyek – akár versenyen is – hasznosak lehetnek.

9.1.

Egyenes vonal rajzolása

Válasszunk ki egy tetszőleges rajzeszközt (ceruzát, vagy ecsetet), majd pöttyintsünk egyet a rajzvászonra. Ezután a SHIFT folyamatos lenyomása mellett kattintsunk egy tetszőleges helyre a rajzvásznon. Eredmény: a két, kikattintott pont között egyenes

16. ábra: Egyenes vonal húzása két pont között

vonalat húz nekünk a Gimp. Megjegyzendő, hogy amint el kezdjük lenyomni a SHIFT gombot, a Gimp azonnal mutatja, hova húzná a vonalat (12. ábra).

9.2.

Törött vonal rajzolása Az előző pontban leírt eljárást folyamatosan tartsuk nyomva a SHIFT gombot (az első kattintott pont után) és tetszőleges helyekre tegyünk pontokat. Ekkor a lekattintott pontok mentén

17. ábra: Törött vonal húzása több pont között

törött vonalat fog húzni a Gimp teljesen addig,

míg el nem engedjük a SHIFT gombot.

9.3.

Vonalak húzása adott középpont körül, szabályos szögenként

Gimpben lehetőség van 15°-kénti ugrásokra egy adott középpont körül, amennyiben az 9.1-es bekezdésben részletezett eljárást alkalmazzuk, kisebb módosítással: amint lekattintottunk egy pontot valame-

18. ábra: 15°-ként ugráló, behúzható vonal

lyik rajzeszközzel, a SHIFT gomb lenyomása mellett nyomjuk le a CTRL gombot is. Ekkor az utolsónak lekattintott pont körül 15°-ként fog „ugrálni” a behúzható vonal. Ez önmagában még nem biztos, hogy elég szabályos sokszögek rajzolásához, de nagy segítség lehet hozzá. Szabályos sokszögek rajzolásával részletesebben a 11. fejezetben foglalkozunk.

- 82 -

Kijelölések

10.Kijelölések A kijelölések igen fontos szerepet töltenek be. Többféle funkciójuk is lehet, attól függően, hogy éppen mit szeretnénk csinálni. Három funkciót emelnék ki: 1. Kijelölt terület kitöltése (színnel, vagy mintával) 2. Kijelölt terület kivágása / másolása / beillesztése 3. Kijelölt terület szerkesztése (pl.: fényerő, kontraszt módosítása) Mindegyik funkciót később részletesen is tárgyaljuk, előbb nézzünk meg pár általános műveletet a kijelölésekkel.

10.1. Kijelölések fajtái Továbbá három, kijelölés alakjában különböző kijelölő eszközzel rendelkezik a Gimp, melyek többségének elnevezése igencsak beszédes: 1. Téglalap kijelölő eszköz: 2. Ellipszis kijelölő eszköz: 3. Szabadkézi kijelölő eszköz: 4. Varázspálca: 5. Szín szerinti kijelölő: A munka oldalszámban megszabott maximális keretei sajnos nem teszik lehetővé, hogy mindegyik kijelölő eszközt maradéktalanul bemutassuk, de úgy gondoljuk, hogy működését tekintve csupán kettő szorul különösebb magyarázatra. 10.1.1. Varázspálca A varázspálca hasznos lehet, ha olyan területeket akarunk kijelölni, melyek nem „eléggé” geometrikus formájúak. Ez a kijelölő eszköz a képen a színek hasonlósága alapján jelöl ki terültet [1]. A kijelölés érzékenységét az eszközhöz tartozó almenüben, a Küszöb érték beállításával tudjuk befolyásolni. Ez az érték azt jelöli, hogy az eszköz mennyire legyen „toleráns” kijelöléskor, azaz mennyire vegye szigorúan a színkülönbségeket. Ez az egybefüggő területek határain játszhat fontosabb szerepet.

- 83 -

Kijelölések

19. ábra: Kijelölés Varázspálca eszközzel 5-ös, majd 15-ös küszöbértékkel

A fenti ábra jól mutatja, mi a különbség egy alacsonyabb, és egy magasabb küszöbértékű kijelölés között. 10.1.2. Szín szerinti kijelölő Ez az eszköz csaknem ugyanúgy viselkedik, mint a Varázspálca kijelölő eszköz [1], csupán annyi különbséggel, hogy amíg a Varázspálca kizárólag egybefüggő részeket jelöl ki, addig a Szín szerinti kijelölő eszköz egymástól különálló, egyező színű részeket is kijelöl. A hasonlóságot az is erősíti, hogy itt is megtaláljuk a Varázspál-

20. ábra: Szín szerinti kijelölővel az azonos színű, különálló területeket is kijelölhetjük egyszerre

ca eszköz almenüjéből ismert Küszöb értéket.

10.2. Általános műveletek kijelölésekkel - gyorsbillentyűk Mint minden eszköznél, itt is érdemes megvizsgálni, hogy az egyes „megszokott”, eszköz tulajdonságot befolyásoló gombok – a SHIFT, CTRL, ALT – milyen hatást gyakorolnak a kijelölésekre. Ez egyszerű kísérletezéssel kideríthető, no de ennyi erővel teljesen feleslegesen írnám eme művet, ha mindent az olvasóval akarnék felfedeztetni – mindazon által ezúton is arra bíztatom az olvasót, hogy bátran kísérletezzen, hisz az önálló felfedezéssel lehet talán a legtöbbet tanulni! Egyszerűbb talán megnézni, hogy az említett billentyűk közül melyik milyen hatást fejt ki az adott kijelölő eszközre. Kijelölés megkezdését természetes módon bal egér gombbal a vászonra kattintva tudjuk megkezdeni. A kijelölések alakját – tehát a kijelölés területét – mindaddig tudjuk változtatni, míg a bal egérgombot nyomva tartjuk.

- 84 -

Kijelölések

10.2.1. A SHIFT billentyű hatása kijelölés közben – Méretarány beállítása Fontos megjegyezni: ez a funkció csak az Ellipszis és Téglalap kijelölő eszközöknél érvényes! Miközben még változtatjuk a kijelölés területét – azaz miközben nyomva tartjuk a bal egérgombot kijelölés létrehozása közben - a SHIFT gomb folyamatos nyomva tartása mellett a Téglalap- és Ellipszis kijelölő eszközök esetén tudjuk érvényesíteni az Eszközbeállítások almenüben is látható Méretarány tulajdonságot. Fontos! Előbb bal egérgombbal hozzunk létre egy kijelölést – a bal egérgombot ne engedjük el! – majd eközben nyomjuk le a SHIFT gombot. Ekkor érvényesülnek a méretarányra vonatkozó beállítások. Alapértelmezettben ez a legutolsó, ugyanolyan típusú kijelölés méretaránya. Manuálisan is beállíthatjuk a méretarányt,

21. ábra: Szabályos (1:1-es) méretarányú kijelölés beállításai

ezt X:Y formátumban kell megtenni, ahol X és Y pozitív, egész számok. Természetesen nem kell a SHIFT gombhoz ragaszkodnunk. Bármelyik kijelölésnél manuálisan is bepipálhatjuk a méretarányra vonatkozó beállításokat, így a kijelölésnél a SHIFT gomb lenyomása nélkül is érvényesülnek a megadott beállítások. Ez csupán egy gyors billentyű, amivel gyorsabban dolgozhatunk. Érdemes megfigyelni, hogy a méretarány tulajdonság egy legördülő menüben foglal helyet. Tehát nem csak a méretarányt lehet fixálni, hanem egyéb tulajdonságokat is. Ennek felfedezését az olvasóra bízzuk . 10.2.2. A SHIFT billentyű hatása kijelölés előtt – Hozzáadás a kijelölt területhez Mit is jelent a hozzáadás a már kijelölt területhez? Dióhéjban: többszöri kijelölésekkel egy összefüggő területet tudunk kijelölni úgy, hogy a többszöri kijelölések területét egyesíti a program.

- 85 -

Kijelölések

22. ábra: Kijelölések területének összegzése a SHIFT gomb segítségével - Ellipszis kijelölő eszközt használva

Ennek eléréséhez csak annyi a dolgunk, hogy miután létrehoztunk a vásznon egy kijelölést, ismét csinálunk egy kijelölést, de úgy, hogy a kijelölés megkezdése előtt (ez fontos!) nyomva tartjuk a SHIFT-et. Ez által a kurzor felett egy kis plusz jel ( + ) fog megjelenni: ez jelenti azt, hogy következő kijelölés területét hozzáveszi (hozzá adja) az eddigi kijelölésekhez (18. ábra). Fontos tehát, hogy különbséget tegyünk aközött, hogy kijelölés megkezdése előtt, vagy kijelölés közben tartjuk-e nyomva a SHIFT gombot. 10.2.3. A CTRL billentyű hatása kijelölés közben – kijelölés megadása középpontból Fontos megjegyezni: ez a funkció csak az Ellipszis és Téglalap kijelölő eszközöknél érvényes! „Sajnos” itt is kettős funkciót szolgál a CTRL billentyű – hasonlóan, mint a SHIFT billentyű esetén. Annyi különbséggel, hogy ha a kijelölés közben nyomjuk le a CTRL billentyűt, akkor a kijelölést nem a kurzorhoz fogja viszonyítani - a bal felső sarok a kattintás helye, a jobb alsó sarok pedig a kurzor aktuális helyzetéhez igazodik; hanem az első kattintás helyét fogja az ellipszis vagy a téglalap kijelölés középpontjának tekinteni. Tehát középpontosan fogja a kijelölést elvégezni, még hozzá attól függően, hol kattintottunk a vásznon. 10.2.4. A CTRL billentyű hatása kijelölés előtt – Kivonás a meglévő kijelölésből Nem kell semmi bonyolultra gondolni: ugyanolyan funkció, mint amit az előző fejezetben tárgyaltunk a SHIFT gomb esetén, annyi különbséggel, hogy itt nem hozzáadja az újabb kijelölés területét, hanem elveszi. Ahogy a jobb oldali ábrán is látható: a 18. ábra-n

- 86 -

23. ábra: Összetett kijelölés: létrehozva a SHIFT és CTRL gombok segítségével

Kijelölések

látható kijelölésből – ugyancsak ellipszis kijelöléssel – elvettünk kijelölési területeket a CTRL gomb lenyomása segítségével. Így egy bonyolultabb kijelölést kaptunk, amit pl. egy összefüggő színnel akár fel is tölthetünk, ezzel egy bonyolultabb ábrát kapva. 10.2.5. Az ALT billentyű hatása – kijelölt terület mozgatása Mint az a fejezetcímből is látszik: az ALT billentyűvel meglévő kijelöléseket tudunk mozgatni tetszőleges helyre. Általános tapasztalat lehet, hogy a kijelölések csak addig szerkeszthetőek, míg létrehozzuk őket, azaz míg fel nem engedjük ujjunkat a bal egér gombról. Az ALT gombot nyomva tartva a kurzor jobb felső sarkában megjelenik egy kettős kereszt, ami mozgatásra utal. Ki is próbálhatjuk: ha a kurzorunk ilyen formát ölt, az éppen még aktív kijelöléseket bárhova áthelyezhetjük. Igaz, az alakjukon már nem változtathatunk. Fontos megjegyezni: ez a funkció akkor érvényes, ha az Eszközök közül valamelyik kijelölő eszköz ki van választva. Megjegyzés: A fent említett gyorsbillentyűk helyett használhatjuk az eszközbeállítások panelben található Mód ikonokat is

a kijelölés módjának beállítá-

sára.

10.3. Szerkesztési lehetőségek Kijelöléseknek még sok használható tulajdonsága van: például az adott kijelölt területet sokféleképp lehet szerkeszteni; többek között lehet állítani: 

fényerőt, kontrasztot ( SzínekFényerő-kontraszt )



színegyensúlyt ( SzínekSzínegyensúly )



kitöltés színét ( SzerkesztésKitöltés elő/háttér színnel )

Ezek közül párat lentebb részletezünk. 10.3.1. Kijelölt terület másolása, kivágása, beillesztése Kijelölt területet – természetes módon – lehet másolni, és újra beilleszteni. Ezeket a már megszokott CTRL+C (másolás) illetve CTRL+V (beillesztés) gyorsbillentyűkkel tehetjük meg. A kivágás gyorsbillentyűje: CTRL+X. Beillesztéskor egy úgynevezett „Lebegő réteg” jelenik meg a Rétegek párbeszéd ablakban. Amíg el nem helyeztük véglegesen a beszúrt kép darabot a vágólapról, addig

- 87 -

Kijelölések

más műveletet nem tudunk végezni [1]. Ezért hát beillesztés esetén a következő lépéseket végezzük el: 1. Illesszük be a vágólapon található képet CTRL+V (vagy a Szerkesztés  Beillesztés menüponttal) 2. Helyezzük el a kívánt helyre a beillesztett képet 3. Véglegesítsük a beillesztést: a CTRL+H gyorsbillentyűvel (vagy a Rétegek  Réteg rögzítése paranccsal) Megjegyzés: a rétegek nincsenek benne az OKTV Alkalmazói kategóriájának elvárt ismereteiben10, ezért ebben a munkában a rétegekről csak kitekintés szintjén lesz szó. 10.3.2. Kijelölt terület kitöltése színnel A kijelöléseket úgy kell felfogni ilyenkor, mint egy falrendszer. A kijelölés határa maga a fal, és mi ezen belül garázdálkodhatunk. Például feltölthetjük színnel: 1. Jelöljünk ki egy tetszőleges területet 2. Válasszunk ki egy tetszőleges előtérszínt 3. Kitöltés eszközzel (

) kattintsunk a kijelölt területre

Gyakorló feladat: Rajzoljunk egy Mickey-egér fejet (szimbólumot)! Megoldási javaslat: 1. Használjuk ki, hogy kijelölési területeket lehet összegezni, továbbá azt, hogy méretarányosan, szabályos kört is létre tudunk hozni!

1. lépés

2. Érdemes csak az egyik fület elkészíteni, hisz tükrözéssel majd megoldjuk, hogy a fül a másik oldalt is szépen megjelenjen. 3. Töltsük fel feketével a kijelölt részt!

2-3. lépés

4. Másoljuk le az így kapott alakzatot (CTRL+C), majd illesszük be (CTRL+V)!

4. lépés

10

Lásd: http://tehetseg.inf.elte.hu/nemesa/index.html#ism

- 88 -

Kijelölések

5. Tükrözzük a beillesztett képet a Tükrözési eszközzel (

)! Alapértelmezet-

ten vízszintes tükrözés van beállítva az eszköz menüjében; ha mégse így lenne, akkor állítsuk át (ezen kívül még függőleges tükrözés is lehetséges)! Majd illesszük a helyére a Mozgatás eszközzel! 10.3.3. Kijelölt terület kitöltése színátmenettel Mint ahogy a fejezetcím is mutatja, ezt a Színátmenet eszközzel (

) tudjuk elérni.

Kijelölt területet színátmenetessé tehetünk. Itt az élőtér és háttérszínnek is fontos szere-

24. ábra: Színátmenetek mértéke: lágy és éles átmenet

pe van, ugyanis az előtérből a háttérszínbe történik az átmenet. Válasszuk ki a megfelelő színeket, majd tartsuk nyomva a bal egér gombot, és húzzuk abba az irányba, merre azt szeretnénk, hogy a két szín közti átmenet végbemenjen. A 20. ábra segítségével egyszerűen elmagyarázható az eszköz működése: az ábrán látható vonal azt mutatja, milyen hosszan húztuk az egérgomb folyamatos lenyomásával a kurzort, azaz hogy milyen hosszú szakaszon történik meg a színátmenet. A bal oldali ábrán egy hosszabb színátmenetet láthatunk, míg a jobb oldalin egy rövidebbet. Érdemes megfigyelni, hogy mindig az előtérszínből megy át az átmenet a háttérszínbe.

- 89 -

Kijelölések

10.3.4. Szabadkézi rajzolás kijelölt területen belül

Szabadkézi rajzolás esetén is nagyon hasznosak lehetnek a kijelölések. Tegyük meg a következő lépéseket: 1. Jelöljünk ki egy tetszőleges területet a rajzvásznon. 2. Válasszunk egy tetszőleges rajzeszközt (ecset, vagy ceruza) 3. Kezdjünk el rajzolni a kijelölt területen, néha menjünk a kijelölt területen kívülre!

25. ábra: A szabadkézi rajz nem hagy nyomot a kijelölt területen kívül

Mit tapasztalunk? A rajzeszköz csak a kijelölt területen hagy nyomot. Valószínűleg nem kell ecsetelnünk, milyen hasznos tulajdonsága ez a kijelöléseknek.

10.4. Vágólapról beillesztett kép(részlet) szerkesztése Olykor szükséges lehet (és az OKTV Alkalmazói kategóriájában is gyakran használatos művelet) bizonyos képrészletek sokszorosítására, szerkesztésére. Erre nézünk most lehetőségeket. 10.4.1. Kép beillesztése Mielőtt bármit is tudnánk kezdeni, be kell illesztenünk vágólapról egy képet, vagy képrészletet; erről már korábban tárgyaltunk, részletesebb lásd: 10.3.1 fejezet. 10.4.2. Beillesztett kép forgatása Miután beszúrtuk a képet, még ne véglegesítsük! Válasszuk ki a Forgatási eszközt, majd kattintsunk rá a beillesztett képre. Ekkor egy párbeszéd ablak jelenik meg, melybe beírhatjuk a forgatás különböző tulajdonságait.

- 90 -

26. ábra: Forgatás párbeszédablak

Kijelölések

Forgatásnál nem csak a forgatás szögét adhatjuk meg, hanem azt is, hogy mely pont körül forgassunk. Ezt a Középpont X, ill. Középpont Y koordináták átírásával is módosíthatjuk, de talán jobb ötlet a forgatandó képen található kis 27. ábra: Beillesztett kép, forgatási középponttal (az ábra bal felén látható kereszt)

célkereszt arrébb cipelése (23. ábra).

- 91 -

Alakzatok, görbék

11.Alakzatok, görbék 11.1. Alakzatok készítése A leggyakoribb alakzatok, amikre igény merülhet fel: kör (ellipszis), négyzet, (téglalap), háromszög. Ha megfigyeljük az eszköztárat, láthatjuk, hogy az előbb felsorolt alakzatok csak a kijelölésekben fedezhetőek fel. Nem véletlenül: (szabályos) alakzatokat kijelölések segítségével tudunk készíteni [1]. 11.1.1. Kör, ellipszis, négyzet, téglalap rajzolása Válasszuk ki a megfelelő kijelölő eszközt (bővebben lásd: 10. fejezet: Kijelölések), végezzük el az éppen kívánt kijelölést, válasszunk ki egy tetszőleges színt az Előtérszínhez, majd töltsük fel a kijelölést a Kitöltés eszközzel (

).

11.1.2. Háromszög rajzolása Ez már egy kicsit kacifántosabb: nincs előre elkészített háromszög kijelölésünk. Egy megoldáshoz több út is vezethet, így például jó megoldás lehet, ha egy már elkészített téglalapot kettévágunk az átlója mentén. Ebben az esetben viszont csak derékszögű háromszögeket tudunk gyártani. Ez nyílván nem elég. Akkor hogyan tovább? Használjuk a Szabadkézi kijelölő eszközt (

), és végezzük el az alábbi lépéseket:

1. Kattintsunk tetszőleges helyre az eszközzel a vászonra. Ez lesz a háromszög egyik csúcsa 2. Kattintsunk egy másik helyre az eszközzel: ez lesz a háromszög második csúcsa. Csináljuk meg ugyanezt, hogy meghatározzuk a háromszög harmadik csúcsát! 3. Végül kattintsunk bele a háromszög első csúcsába (amit elsőre kattintottunk ki a vásznon). Ezzel

28. ábra: Háromszög alakzat kijelölés közben: a harmadik oldalt össze kell kötni az elsőnek meghatározott csúccsal

kész a háromszög alakú kijelölésünk! 4. Tetszőleges színnel töltsük fel a háromszög alakú kijelölést!

- 92 -

Alakzatok, görbék

11.1.3. Szabályos háromszög rajzolása Ismételjük meg az előző alfejezetben (11.1.3) szereplő eljárást, azzal a különbséggel, hogy nyomva tartjuk a SHIFT gombot! Ekkor a szabályos, függőleges, vagy vízszintes vonalakat tudunk húzni, melyek meghatározzák majd a kijelölés határait. Itt azért többről van szó: így nem csak vízszintes, ill. függőleges vonalakat tudunk húzni, hanem a már korábban bemutatott, 15°-onkénti ugrásokkal is tudunk vonalat húzni (lásd: 9.3 fejezet). Ezzel a technikával könnyedén tudunk például derékszögű háromszöget rajzolni. Gyakorló feladat: a Szabadkézi kijelölő eszköz (

) segítségével készítsünk derék-

szögű háromszöget! Megoldási javaslat: 1. Válasszuk ki a Szabadkézi kijelölő esz3. lépés

közt! 2. Nyomjuk le a SHIFT gombot (ezzel egyenes, függőleges, ill. vízszintes kijelölési határvonalat tudunk húzni), és tartsuk nyomva! 3. Húzzuk be a háromszög alapját (egyik

4. lépés

befogó)! 4. Húzzuk be a háromszög másik oldalát (másik befogó)! 5. Engedjük el a SHIFT gombot, és kössük össze a két oldalszakasz két vég-

5.-6. lépés

pontját! 6. Az így létrejött kijelölést töltsük fel tetszőleges színnel. Buktató: Vigyázzunk a sorrendre! Ha nem a derékszög irányába kezdjük el behúzni a háromszög alapját, akkor nehézkesen fogunk „körbeérni” a derékszögűnek tervezett háromszögen! Ugyanis az átfogó hosszát ekkor saccolnunk kell, ami nem biztos, hogy jól sikerül, azaz nem garantálható, hogy az átfogó végpontja pontosan az alap végpontja felett lesz. Persze ezt is át lehet hidalni segédvonalakkal, de erről majd később lesz szó.

- 93 -

Alakzatok, görbék

11.2. Görbék készítése 11.2.1. Görbék (útvonalak) elhelyezése Úgynevezett görbék készítéséhez útvonalakra lesz szükségünk. Az útvonalakról a későbbiekben még kitérünk bizonyos részletekre, most azonban nézzük meg, hogy lehet a segítségükkel görbéket készíteni. Görbék készítéséhez szükség lesz az Útvonal eszközre: Ennek az eszköznek a használata kissé bonyolult. Szabadfogalmazásban azt lehetne mondani, hogy pontok útvonalát kell elkészíteni. Minden ponthoz tartoznak „súlyok”, melyek a két, szom-

29. ábra: Szerkesztés alatt levő útvonal, 4 ponttal.

szédos pont közötti vonal görbületét határozzák meg. A pontokat a vászonra kattintva helyezhetjük el. Ha az elhelyezés után folyamatosan nyomva tartjuk a bal egérgombot, húzással beállíthatjuk a „súlyok” helyét, és láthatjuk, hogy „hajlik” a vonal az utolsó előtti, és az aktuális (utolsó) pont között. 30. ábra: Útvonal eszköztár

Ahogy a 25. ábra is mutatja: az utolsó ponton állít-

juk be az utolsó előtti, és az éppen aktuális pont közötti görbület mértékét. 11.2.2. Útvonalak szerkesztése Az Útvonal eszközre kattintva vizsgáljuk meg az eszközbeállításait. Láthatjuk: három lehetőség közül lehet választani. Útvonalat tervezni, szerkeszteni, és áthelyezni. A többi opciónak később lesz majd szerepe. Válasszuk ki a Szerkesztés (Ctrl) lehetőséget! Érdemes megjegyezni: a CTRL a szerkesztés gyorsbillentyűje. 11.2.3. Görbe rajzolása Görbékről volt szó, így az útvonal segítségével készítünk egy görbét: válasszuk az Útvonal körberajzolása gombot!

- 94 -

Alakzatok, görbék

A megjelenő párbeszédablakban alapvetően két dolog közül választhatunk: egyenes vonallal húzza-e ki a program az útvonalat, vagy ecsettel? Utóbbi esetben be lehet állítani, hogy emuláljon ecsetdinamikát. Ennek az lesz a következménye, hogy szép, változó vastagságú vonalat fog a program húzni az adott útvonalon. A vonal színe mindig az Előtérszínnel

31. ábra: Útvonal mentén húzott görbe - ecset dinamikát emulálva

megegyező lesz. 11.2.4. Záró lépések – útvonal törlése Végezetül előfordulhat, hogy már nincs szükségünk az adott útvonalra, mellyel a görbét létrehoztuk. Habár van mód az útvonalak tényleges törlésére, ilyen mélységekbe most nem tudunk eljutni. Ha körberajzoltuk az útvonalat, egyszerűen válasszunk ki az Eszköztárból egy másik eszközt: ekkor az útvonal eltűnik a vászonról.

- 95 -

Feliratok a képen

12.Feliratok a képen Reális igény, hogy a képekre tudjunk feliratokat is elhelyezni. Szerencsére a Gimp erre lehetőséget is ad; ennek eszköze: a Szövegeszköz (

).

12.1. Feliratok elhelyezése 1. Először is válasszuk ki a feliratnak a színét! Ezt az előtérszín megváltoztatásával tehetjük meg. 2. Válasszuk ki a Szövegeszközt (

), majd a bal gombot folyamatosan nyomva

tartva jelöljük ki azt a területet, ahová a szöveget el akarjuk helyezni (Ha nem teljesen sikerül elsőre megtalálni a kívánt területet, ne aggódjunk: később még áthelyezhetjük bárhova a szöveget.) 3. Gépeljük be a kívánt szöveget! 4. Végezzük el a begépelt szövegen a szükséges módosításokat (bővebben lásd: 12.2. fejezet)

32. ábra: Felirat helyének kijelölése a szövegeszközzel

12.2. Feliratok szerkesztése 12.2.1. Alap szerkesztési lehetőségek Feliratok szerkesztése a Gimp többféle módot is kínál. Egyrészt – ahogy a 28. ábra is mutatja – a felirat elhelyezésekkor megjelenő gyorsmenün keresztül változtathatjuk a felirat legalapvetőbb tulajdonságait, úgy mint: betűtípus, betűméret, betűszín. Továbbá a Szövegeszköz eszközbeállításai adnak részletesebb beállítási, módosítási lehetőséget. 33. ábra: Szövegeszköz eszközbeállítások ablaka

- 96 -

Feliratok a képen

Itt is megtalálhatóak a gyorsmenüből már ismert tulajdonságok: betűtípus (betűkészlet), betűméret és –szín, továbbá szövegritkítási, igazítási beállítások. Ezeket a lehetőségekkel mind találkozhattunk már szövegszerkesztésből, és eléggé egyértelműek azok beállításai, így ezekre a beállításokra a most nem térünk ki, ezzel is bátorítva az olvasót arra, hogy maga kísérletezzen a különböző beállítások hatásaival. 12.2.2. Meglévő feliratok szerkesztése Meglévő feliratok szerkesztése nem egy bonyolult dolog; a következő lépésekkel meg is tehetjük: 1. Válasszuk ki az eszköztárból a Szövegeszközt! 2. A kurzorral kattintsunk bele a szerkesztendő szövegdobozba, ezzel szerkeszthetővé válik az éppen aktív szövegdoboz 3. A Szövegeszköz Eszközbeállítások menüjében alkalmazzuk az éppen szükséges beállításokat. Megjegyzés: már begépelt szövegek tulajdonságait (pl. szín, méret) a szövegdobozon belül, a külön kijelölt szövegekre tudjuk alkalmazni. Ezen kívül kiegészíthetjük a már meglévő szöveget továbbiakkal.

12.3. Feliratok áthelyezése Ez sem nehéz művelet: 1. Válasszuk ki a Mozgatás eszközt 2. Vigyük a kurzort a felirat egy kifestett, látható részére 3. A bal egérgomb folytonos lenyomása mellett vigyük arrébb a feliratot Megjegyzés: kisebb betűméretű feliratoknál nehéz lehet eltalálni a betűk színes, kitöltött részét. Akkor hát honnan tudjuk, mikor „állunk” jó helyen a kurzorral? A válasz egyszerű: ha a kurzor mellett megjelenik egy kis fehér, négyágú nyíl (

- 97 -

).

Képmanipulálás, képtranszformáció

13.Képmanipulálás, képtranszformáció Mit értünk képmanipulálás alatt? Jelen esetben a következőket: kép ill. vászon átméretezése, kép tükrözése ill. forgatása és világosság, kontraszt beállítások. Ezek nem bonyolult dolgok, ezért nem minden részletre kitérően szólunk róluk.

13.1. Kép tükrözése ill. forgatása Erről már korábban esett szó: a Képfájl transzformációk című fejezetben, mely a 74. oldalon található.

13.2. Kép átméretezése Már meglévő kép átméretezésénél óvatosan kell eljárnunk: lehetőség van a rajzvászon átméretezésére (Kép -> Rajzvászon mérete), de ez nem a kép átméretezését vonja maga után. Bővebben erről a következő alfejezetben talál többet a kedves olvasó. 13.2.1. Átméretezés méretarányosan Amivel valóban a képet tudjuk átméretezni, azt a következő menüpontban találjuk: Kép -> Kép átméretezése. Itt a már megszokott pixelekben, vagy egyéb mértékegységek alapján módosíthatjuk a kép jelenlegi méreteit. Amint elfogadtuk az új értékeket, a kép a megadott szélességre, és hosszúságra fog méretben módosulni. A méretarány megtartásához azonban figyeljünk, hogy a pixel értékek melletti kis lánc szimbólum legyen össze-

34. ábra: Méretarányos átméretezés: a lánc szimbólum zárva van

kötve! Amennyiben nincs összekötve, az azt jelenti, hogy nem lesz méretarányos a kép. Ekkor csak kattintsunk rá, hogy olyan állapotba kerüljön, amilyennek az itt látható ábra is mutatja. 13.2.2. Átméretezés méretarány megtartása nélkül Ugyanúgy kell eljárnunk, mint ahogy az előző alfejezetben is olvashattuk. Csupán annyi a dolgunk, hogy a Szélesség és Magasság melletti láncszemet „kikapcsoljuk”, azaz a láncszemeket szétkapcsoljuk. Ezt rákattintással érhetjük el.

- 98 -

35. ábra: Átméretezés méretarány megtartása nélkül. A láncszemek nyitva vannak.


13.3. Vászon méretének módosítása Felmerülhet a kérdés, hogy mi a különbség a kép átméretezése, és a rajzvászon átméretezése között? Kép átméretezése esetén magának a képnek a méretét módosítjuk, míg a rajzvászon átméretezésekor a kép látható felület szabjuk át. Ha például, egy 500x600 pixeles képet elhelyezünk egy 200x300-as rajzvásznon, akkor – nyilvánvaló módon – az 500x600-as képnek csak egy kis, 200x300-as része fog látszódni, hisz ekkora a rajzterület, ekkora a rajzvászon. Kattintsunk a Kép Rajzvászon

mérete

menüpontra.

Ekkor megjelenik a Rajzvászon mérete párbeszéd ablak. Magának a vászonnak az átméretezése

eléggé

hasonló

módon

megy, mint a kép átméretezésénél: meg kell adnunk, hogy

36. ábra: Kép helyzetének meghatározása kisebb méretű rajzvászon esetén

hányszor hány pixeles legyen a rajzvászon. Ezután már csak azt kell beállítani (ha kisebb vászon méretet állítottunk be, mint amekkora a kép), hogy a képnek melyik része látszódjon a vásznon. Ezt a kis képre kattintva, majd vonszolva határozhatjuk meg, de ha pontosan szeretnénk megadni a kép helyét, akkor X és Y koordináták beírásával is megadhatjuk a kép helyzetét. Az eligazodásban egy kis téglalap segít, mely az új rajzvászon méretének határvonalait jeleníti meg (32. ábra). Megjegyzés: természetesen itt is lehetőség van méretarányos, ill. méretarány nélküli rajzvászon méret módosításra. Az eredeti méretarány mindig az aktuális vászon méretaránya.

13.4. Világosság, kontraszt beállítások Válasszuk a Színek->Fényerő-kontraszt menüpontot. Itt két csúszkát találunk: egyikkel a fényerőt, másikkal a kontrasztot tudjuk állítani. Ebben az esetben az egész kép fényerejét, kontrasztját tudjuk változtatni. Lehetőség van azonban csak egy kijelölt rész módosítására. Ehhez csupán annyit kell tenni, hogy kijelöljük egy tetszőleges kijelölő eszközzel a kívánt részt, majd a fentebb leírt módon megnyitjuk a Fényerő-kontraszt

- 99 -


párbeszéd ablakot. Változtassuk mindkét értéket! Az eredmény: csak a kijelölt területen érvényesültek a beállítások.

- 100 -

Segédvonalak, exportálás

14. Segédvonalak, exportálás 14.1. Segédvonalak Sokszor megeshet, hogy két objektumot egy függőlegesen vagy vízszintesen egy vonalban szeretnénk elhelyezni. Például két, sematikus sátornak az alját egy vonalba szeretnénk tenni. Kérdés: ezt hogyan lehet úgy megcsinálni, hogy valóban egy vonalban legyenek? Erre lehet megoldás a Segédvonalak használata. 14.1.1. Segédvonalak megadása Segédvonalakat a vonalzó segítségével tudunk a képhez hozzáadni. Ha megfigyeljük, észrevehetjük, hogy a kép bal szélén, és tetején végig húzódik egy-egy vonalzó, melyen egy-egy fekete nyilacska jelzi, hogy az X és Y koordináták szerint éppen hol helyezkedik el a kurzor. Végezzük el az alábbi lépéseket: 1. Vigyük rá a kurzort a fenti vonalzóra!

37. ábra: A vonalzón fekete nyíllal van jelölve a kurzor helye

2. Nyomjuk le a bal egérgombot! 3. A gombot folyamatosan nyomva tartva húzzuk le a kurzort a vonalzóról! 4. Amint a kurzor elhagyja a vonalzót, a vonalzóval párhuzamosan egy vonal fog megjelenni, amit éppen cipelünk

38. ábra: Felső vonalzóról lehúzott segédvonal

le a vonalzóról. Ez a vízszintes segédvonal. 5. Ne engedjük el még a vonalat, hanem húzzuk tetszőleges helyre (ahol épp szükség van rá)! A konkrét koordinátákat leolvashatjuk a rajzablak bal alsó sarkából. Ezekkel a lépésekkel tudunk vízszintes segédvonalakat tetszőleges képhez hozzá adni. Természetesen hasonló eljárással tudunk a függőleges vonalzó segítségével függőleges segédvonalakat a képhez adni. Több segédvonal megadásához csak újból és újból végezzük el a fentebb megadott lépéssorozatot. 39. ábra: Üres képfájl egy vízszintes és egy függőleges segédvonallal

- 101 -

Segédvonalak, exportálás

14.1.2. Segédvonalak módosítása Segédvonal módosításához csak annyit kell tennünk, hogy rávisszük a kurzort a kérdéses segédvonalra, majd arrébb vonszoljuk (bal egérgombot folyamatosan nyomva tartva) a megfelelő helyre. 14.1.3. Segédvonalak törlése Fogjuk meg a kérdéses segédvonalat, majd vonszoljuk vissza a vonalzóra, ahonnan lehúztuk. Tehát a vízszintes segédvonalak a vízszintes vonalzóra, a függőleges segédvonalakat a függőleges vonalzóra. Ezzel eltűntethetjük a segédvonalakat.

14.2. Exportálás Felvetődhet a kérdés, hogy mi a különbség a mentés és az exportálás között? A mentés nyers formában menti el a képet, többek között például a Gimp saját formátumába (xcf). Exportálás során viszont a nyers képet (beállított körvonalakkal, árnyékokkal elforgatásokkal, rétegekkel, beállított szűrőkkel stb.) a program átkonvertálja egy olyan képformátummá, melyet már egy hétköznapi képnézegető alkalmazással is meg tudunk nyitni. A Gimp (többek között) a következő képfájl kiterjesztésekbe képes exportálni: JPG, GIF, PNG, BMP.

- 102 -

Kitekintés: Rétegek és szűrők

15.Kitekintés: Rétegek és szűrők A verseny oldalán nincs a szükséges ismeretek között se a rétegek használata, se a szűrőké [2]. A rétegek viszont kifejezetten fontosak a Gimp használatát tekintve, ezért itt röviden bemutatom a használatukat.

15.1. Rétegek 15.1.1. Rétegekről általában [3] Tapasztaltabb, gyakorlottabb felhasználók (képszerkesztés kapcsán) ismerhetik már a rétegek fogalmát. Hogy mik azok a rétegek? Ahogy a nevük is utal rá: a rétegek egymáson helyezkednek el. Egy fontos tulajdonságuk kiemelendő: van sorrendjük. Nem mindegy, hogy melyik réteg melyik fölött vagy melyik alatt van. Gimp (vagy más képszerkesztők esetében) úgy érdemes rájuk gondolni, mint átlátszó fóliákra, melyek a háttér előtt helyezkednek el. Ezeken a fóliákon bármi lehet. Ebből a felfogásból máris következik, hogy amelyik fólia felül van, az azon levő képdarab, vagy alakzat kitakarhat az alatta levő fólián található képdaraból, vagy bármiből, ami éppen az előbb említett fólia alatt van. Hogy miért jó (miért érdemes) rétegeket használni képszerkesztéskor? A válasz egyszerű: a rétegeken szereplő ábrákat, képeket utólag könynyebben tudjuk módosítani, hisz nincsenek véglegesen a háttérhez „szögelve”, így például egy

40. ábra: Rétegek használatával készített képeslap

esetleges javítás, kiegészítés esetén csak az adott rétegen kell dolgozni, ez a munka a többi réteg tartalmát nem érinti, így a tartalmuk nem is sérül. Ez persze csak akkor igaz, ha a képet az adott képszerkesztő program (jelen esetben a Gimp XCF formátumában) mentjük el. Nézzünk egy példát egy balatoni képeslapról (36. ábra)! A képes lap három, egyszerű rétegből áll: egy háttér (ez maga a kép) egy halványsárga keretet tartalmazó keretből, és egy feliratot tartalmazó keretből. Vessünk egy pillantást ennek a három rétegnek az elhelyezkedésére (37. ábra)!

- 103 -


41. ábra: Rétegek sorrendje egy rétegekkel készült képen

Az említett ábrán láthatjuk a három réteg sorrendjét: legfelül van a keret, középen a feliratot tartalmazó réteg, és legalul a háttérképet magánviselő réteg. Ennél az egyszerű képeslapnál még nem lenne indokolt a rétegek használata, de itt is nagy előnye lehet: például mi van akkor, ha a háttér nem tetszik, és ki akarjuk cserélni? Természetesen lehetséges rétegek használata nélkül is, csak úgy sokkal több munkával jár. Ha a háttér egy rétegen van, akkor csupán annyi a dolgunk, hogy azt a réteget, amin a háttér van, kitöröljük. Ezután létrehozunk egy új réteget, és arra beillesztünk egy új háttérképet. Persze végig ügyelünk arra, hogy ez a réteg legalul legyen, hiszen ha felcseréljük a sárga keret, és a háttér sorrendjét, akkor a háttér egészen kitakarja nem csak a keretet, hanem a feliratot is. Nézzük, hogy technikailag hogy néz ki ez az egész! 15.1.2. Rétegek menü A Rétegek menü általános esetben a főablaktól jobb oldalra található, az ecseteket tartalmazó menü fölött. A legfontosabb eszközök, melyeket itt megtalálunk: 

Új réteg



Rétegek sorrendjének megváltoztatása



Réteg törlése

- 104 -


Rétegek láthatósága Túl sok réteg esetén zavaró lehet egy-egy réteg a munkánk folyamán. Ide kattintva láthatatlanná tehetünk egy-egy réteget

Rétegek listája Az éppen megnyitott képfájl összes rétege. Vigyázat: a sorrend számít!

Réteg fel ill. le mozgatása Kijelölt réteget visz egyel fel ill. le Új réteg: beszúr egy új réteget

Réteg törlése: A kijelölt réteget törli.

15.1.3. Új réteg beszúrása Egyszerűen nyomjuk meg a Réteg menün az Új réteg ikont: ezzel egy új réteget adtunk a képünkhöz. 15.1.4. Réteg törlése Jelöljük ki a rétegek listájából a törölni kívánt képet. Ezt úgy tehetjük meg, hogy bal egérgombbal ráklikkelünk (az éppen kijelölt réteg sávja a réteg listában besötétül, lásd: a fenti ábrát). Ezután kattintsunk a Réteg törlése ikonra. 15.1.5. Rétegek sorrendjének megváltoztatása Jelöljük ki azt a réteget, aminek a sorrendben való helyét változtatni szeretnénk (csak kattintsunk rá egyszer a rétegek listájában). Ezután a rétegek listája alatt található fel illetve le mutató zöld nyilakkal helyezhetjük a sorrendben egyel fel, ill. egyel le az éppen kiválasztott réteget. De akár fogd és vidd módszerrel is módosíthatjuk a rétegek sorrendjét.

- 105 -


15.1.6. Munka, rajzolás adott rétegen Ahhoz, hogy a kívánt rétegen tudjunk dolgozni, egyszerűen csak jelöljük ki a rétegek listájából a kívánt réteget. Ezzel ez a réteg válik aktívvá, azaz ekkor ezen a rétegen tudunk dolgozni.

15.2. Szűrők [3] Picit rejtelmesebb neve van, mint a rétegeknek. Táblázatkezelésben találkozhatunk szűrőkkel: ott az a feladatuk, hogy bizonyos adattömegekből szűréssel a nekünk érdekeseket találjuk meg. A Gimpben erre nyílván nem használhatóak, hisz itt szó sincs táblázatkezelésről. Mik hát azok a szűrők? 15.2.1. Szűrőkről általában A Szűrő menüpontot a fő ablakban találjuk meg (jobbról a második menüpont). Szűrőket általában nem képek alkotásban, hanem inkább képszerkesztésben használnak, azaz fotók, plakátok, vagy akár montázsok készítésekkor. Mert hát egy képszerkesztő programot arra is lehet használni, hogy rajzoljunk benne, fessünk. Erre nagyon hasznos eszköz az ún. tablet, vagy digitális tábla, vagy akár digitalizáló tábla. Most azonban nézzünk egy beszédes példát szűrőkre!

Normál felirat

TorzításSzél

TorzításHullámok

MűvésziKubizmus

A kis példánkban jobb szélen láthatunk egy teljesen hétköznapi feliratot. Balra haladva pedig Szűrőkkel formázott verziókat. Ezen a példán is jól látszik, hogy a Szűrők lényege: hogy bizonyos effektusokat hajtanak végre a kijelölt rétegen. A fenti kis táblázat a számos lehetőség közül mutat be hármat. Fontos megjegyezni, hogy a Szűrők tulajdonságai változtathatóak! Például a fenti táblázatban is látható „hullámos” hatást lehet fokozni, vagy még inkább visszavenni. Továbbá a „szél” hatást is szájízünk szerint módosíthatjuk: nagyobb szelet, vagy akár kisebbet is beállíthatunk, sőt, a szél irányát is beállíthatjuk! Röviden: egy-egy szűrő

- 106 -


tulajdonságait sokféleképp módosíthatjuk úgy, hogy az adott rétegen lévő kép éppen úgy nézzen ki, ahogy mi szeretnénk. 15.2.2. Szűrők alkalmazása Válasszuk ki azt a réteget a rétegek listájából, amin az adott szűrőt alkalmazni akarjuk. Ezután csak alkalmazzuk a Szűrők menüpontból azt a szűrőt, melyet használni szeretnénk. 15.2.3. Ízelítő néhány szűrő fajtából Sok szűrő van a Gimpben, ezért csak néhány szűrőt mutatunk be röviden. A felső sorban látható, hogy milyen hatással van a képre. A második sorban találjuk, hogy mely szűrőt alkalmaztuk a képre, végül a harmadik sorban olvasható egy kis leírás magáról a szűrőről.

Fény és árnyékVetett árnyék

ElmosásGauss elmosás

TorzításLencsehatás

Állítható többek között az árnyék élessége, és távolsága az objektumtól

Állítható többek között az elmosás mértéke: X és Y irányban

Több minden mellett állítható a lencsehatás mértéke.

Szűrőmentes kép, háttérrel11

Fény és árnyékSzupernova

MűvésziSzövés

A következő szűrőket nem a feliratra, hanem a háttérre alkalmaztuk.

Állítható a fényerő, sugarak száma, és a fény színe is.

Állítható a szövés sűrűsége, árnyékok sötétsége, mélysége és még sok más.

11

A háttérkép egy marsi naplementét ábrázol. Forrás: http://www.nasa.gov/multimedia/imagegallery/image_feature_347.html (utolsó elérés: 2012.X.6.)

- 107 -


Sajnos jelen munka keretei nem teszik lehetővé, hogy mindegyik szűrő hatását maradéktalanul bemutassa – felesleges is lenne, hisz rengeteg szűrő van. A többi szűrő felfedezését az olvasóra bízzuk!

- 108 -


Mellékletek - Képszerkesztés (vektorgrafika) A vektorgrafika témakörét nem tudjuk bemutatni – a munka tartalmi keretére vonatkozó korlátok miatt. Viszont az „INFOTÁRS” projekt részeként (TÁMOP 4.1.2/A/210/1-2010-0011) elkészült egy anyag, mely éppen ezt a témát dolgozta fel, és a http://www.tankonyvtar.hu/ oldalon lesz majd elérhető.

- 109 -


Mellékletek - Webszerkesztés Hasonlóan, mint képszerkesztésnél, itt is először a http://tehetseg.inf.ellte.hu/nemasa honlapon található, webszerkesztésre vonatkozó elvárások szerint fogom bemutatni a szükséges tudnivalókat, majd néhány, korábbi versenyfeladat megoldásán keresztül prezentálom gyakorlatban is a különböző, az OITV [2] elvárásokban is említett tudnivalókat, készségeket. Korábban (főként) a Microsoft Sharepoint Designer 2007-es verzióját használták a diákok a versenyeken. A Microsoft Sharepoint Designer 2010 már nem alkalmas arra, hogy versenyeken, vagy versenyfelkészülésekre használják, hiszen működéséhez Sharepoint alapú webhely szükséges, önállóan nem használható statikus weblapok készítésére [4]. Továbbá mivel a Microsoftos termékek jövője (az iskolák számára ingyenes elérhetőség szempontjából) [6] kétséges, és bizonytalan, ezért úgy döntöttem, hogy az eddig bevált Microsoft Sharepoint Designer 2007 helyett - ami habár ingyenes, a használatához Windows operációs rendszer szükséges, amiért pedig fizetni kell - az ingyenesen elérhető KompoZer utolsó stabil, 0.7.10-es verzióján fogom bemutatni a szükséges tudnivalókat. Ez a verzió is sajnos már régi (2007-es) [5], ebben a bizonytalan helyzetben ez a választás tűnt a legjobbnak – hisz Linuxon is elérhető. Mindezek után remélhetőleg később is használhatónak fog találtatni jelen munka, hisz egy-egy WYSIWYG webszerkesztő alkalmazástól ugyanazon alapvető elvárásaik lehetnek a felhasználóktól, így ha már tudjuk, hogy a KompoZer milyen szolgáltatásokat nyújt, remélhetőleg könnyedén alkalmazni tudjuk az itt tanultakat más-más WYSIWYG webszerkesztő alkalmazások használatakor is.

- 110 -

A KompoZer felhasználói felülete

16. A KompoZer felhasználói felülete

3 2

4

1 42. ábra: A KompoZer alapértelmezett felhasználói felülete

Az alapértelmezett felhasználói felület legfontosabb részeit tekintjük át, hogy ne vesszünk el egyből az alkalmazásban. A felhasználói felület részei – alapvetően – a következő részekre bonthatóak: 1. Szerkesztőfelület 2. Szöveg és bekezdés eszköztár 3. Fájl- és objektum eszköztár 4. Webhelykezelő vagy DOM Explorer

16.1. Szerkesztőfelület A szerkesztőfelületen végezzük az érdemi munkát: itt készül maga a weblap. Egyszerre több állományt is megnyithatunk, ekkor több fül jelenik meg a felület fejlécében. Három nézet közül választhatunk: 

Tervező: ekkor csak azt látjuk, hogy nézne ki a weblap, és ilyen formán is tudjuk szerkeszteni a munkánkat.



Forrás: csak a weblap kódja látszódik. Kézzel szerkeszthetjük a kódot, és így dolgozhatunk a weblapon.

- 111 -

A KompoZer felhasználói felülete



Felosztás: az előző két nézet kompozíciója. Felül láthatjuk a Tervezői nézetet, lent pedig a Forrás nézetnek egy kivonatos tartalmát: csak annak a weblap elemnek mutatja a forrását, ahol a szerkesztőfelületen épp állunk a kurzorral.

16.2. Szöveg és bekezdés eszköztár Aki már szerkesztett szöveget, az tudja, miket találhat itt. Az alsó eszköztár a szövegek beállításaira használható (típus, stílus, szín, méret), a felső eszköztár segítségével pedig leginkább bekezdés szinten tudjuk a szöveget manipulálni, úgymint: felsorolás, behúzás mértéke.

16.3. Fájl- és objektumok eszköztár Itt találjuk a legfontosabb fájl- és beszúrási műveleteket, melyek a következők – a teljesség igénye nélkül: Fájl eszköztár: 

Új oldal létrehozása

: többek között beállíthatjuk a dokumentum típusát

(HTML 4.01 vagy XHTML 1.0) 

Megnyitás,



Megtekintés: a szerkesztés alatt álló weblap megtekintése alapértelme-

Mentés

zett böngészőben. Objektumok eszköztár: Az alábbi objektumok beszúrására, ill. létező objektumok szerkesztésére találhatunk itt lehetőséget: 

Hivatkozás



Kép



Táblázat



Űrlap



Horgony: nem látható elem. Oldalon belüli könyvjelzők készítésére is használható.

- 112 -

Műveletek szövegekkel

16.4. Webhelykezelő vagy DOM Explorer Két, navigációs ablak közül egyet tehetünk itt láthatóvá: egyik a Webhelykezelő másik a DOM Explorer. 16.4.1. Webhelykezelő A webhelyünk (tehát az épp szerkesztés alatt álló teljes honlap) állományait találhatjuk itt: képek, stíluslapok, egyéb, a szerkesztés alatt álló honlaphoz tartozó weblap. 16.4.2. DOM Explorer DOM : Document Object Model. A dokumentum egyes objektumai között tudunk ennek az ablaknak a segítségével navigálni. A dokumentum objektumait hierarchikusan (alá- ill. fölérendelt felépítés szerint) jeleníti meg. Bármelyik objektumra rákattinthatunk (pl.: body), és akkor azt az objektumot tudjuk szerkeszteni. Vigyázat: ezt csak akkor használjuk, ha valamennyire tisztában vagyunk az alap HTML objektumok neveivel, ill. attribútumaival!

17. Műveletek szövegekkel Ebben a rövid fejezetben azt nézzük meg, hogy tudunk szöveget bevinni, ill. a bevitt szöveget szerkeszteni a KompoZerben.

17.1. Szövegek bevitele Teljesen hasonlóan működik, mint bármely szövegszerkesztőnél: a kurzorral csupán kattintsunk oda, ahova szöveget szeretnénk begépelni, vagy vágólapról beilleszteni.

43. ábra: Szöveg bevitele a szerkesztőfelületen

17.2. Szövegek formázása Használjuk a Szöveg eszköztárt! A szövegszerkesztésnél is megszokott lehetőségek állnak rendelkezésünkre: változtathatunk többek között a szöveg méretén, színén és háttérszínén. - 113 -

Lap tulajdonságainak megadása

44. ábra: Formázott szöveg

Szöveg eszköztár ikonjai és funkcióik: 

Szövegszín ill. háttérszín

: a betűszínt szimbolizáló, felső színre kattintva

választhatjuk ki a betűszínt. Lehetőség van RGB és HTML (hexadecimális) kód megadására is. 

Betűméret növelése ill. csökkentése



Betűstílus



Szövegigazítás

: félkövér, dőlt, aláhúzott. : a már szövegszerkesztésből is ismert balra-, kö-

zépre-, jobbra- és sorkizárt igazítás. 

Betűtípus (Betűkészlet)

: legördülő menüből

választhatjuk ki, hogy a kijelölt szövegnek milyen betűstílust szeretnénk választani.

18.Lap tulajdonságainak megadása Azon beállításokat fogjuk itt áttekinteni, melyek egy-egy html oldal egészét érintik. Úgy mint: háttérkép, vagy háttérszín beállítása.

18.1. Háttérszín vagy háttérkép megadása. Kattintsunk a FormátumOldal színei és háttere opcióra. 18.1.1. Háttérszín megadása Válasszuk ki az Egyéni színek használata opciót: ekkor szerkeszthetővé

válnak

a

színek.

Amennyiben Strict DTD típusú weblapot hoztunk létre, akkor a 45. ábra: Oldal színeinek beállítása Strict DTD dokumentum típus esetén: a link színeit nem tudjuk megváltoztatni

- 114 -

Lap tulajdonságainak megadása

linkek színén nem változtathatunk. (Ebben az esetben csak stíluslap segítségével lehetne megváltoztatni a linkek színét.) Válasszuk ki a Háttér színét, és a Blokk háttérszíne párbeszédablakban válasszuk ki a megfelelő háttérszínt. Megjegyzendő, hogy itt is lehet természetesen RGB és HTML kód alapján is színt megadni. 18.1.2. Háttérkép megadása Kattintsunk a FormátumOldal színei és háttere opcióra. Az Oldal színei beállítások alatt ki tudjuk tallózni a beállítani kívánt háttérképet. Egyszerűen csak tallózzuk ki, és máris a beállított kép lesz a weblap háttérképe!

18.2. Linkek színe Mint korábban említettük: csak akkor tudunk változtatni a linkek színén, ha a weblapot úgy hoztuk létre, hogy kikapcsoltuk a Strict DTD opciót. Ez esetben ugyanúgy, mint a háttérszín beállításnál, FormátumOldal színei és háttere menüpontnál találjuk a linkek színének beállításait. Háromféle linkszínt tudunk beállítani: 

Hivatkozás színe: normál megjelenésben ilyen színű lesz a link.



Látogatott hivatkozás színe: ha már jártunk azon az oldalon, ahova a link vezet, akkor ilyen színű lesz a link.



Aktív hivatkozás színe: amelyik linkre éppen kattintunk, annak ilyen színe lesz.

18.3. Oldalcím és meta elemek 18.3.1. Oldalcím Az Oldalcím jelenik meg a böngésző ablakának címsorában. Ezért is fontos, hogy értelmes, beszédes címet adjunk meg oldalcímként.

46. ábra: Oldal általános információnak megadása

- 115 -

Hivatkozások és könyvjelzők

Válasszuk ki a FormátumOldal címe és tulajdonságai menüpontot. A megjelenő párbeszédablakban be is gépelhetjük a megfelelő oldalcímet. 18.3.2. Meta elemek Egy honlap meta elemei további információkat adnak a honlapról: például hogy ki a honlap szerzője, vagy hogy mit is mutat be ez a honlap – azaz egy rövid, összefoglaló leírást adhatunk meg a honlapról. Ami még nem elhanyagolható: itt tudunk információkat a honlap beállított karakterkódolásáról is [7]. Ugyanott, ahol az oldal címét beállítottuk (FormátumOldal címe és tulajdonságai), lehetőség van a

47. ábra: További meta elemek megadása a KompoZerben

szerzőn, és a leíráson kívül további meta adatok megadására is. Úgy, mint az olvasási irány, vagy a karakterkódolás

(lásd:

43.

ábra).

48. ábra: Hivatkozás beállításai

19.Hivatkozások és könyvjelzők Hivatkozások és könyvjelzők technikailag egy dolgot jelentenek: ugrópontot egy másik, megadott helyre. Míg a hivatkozások általában egy weblapon kívüli helyre ugranak (akár képhez, vagy egy másik weblaphoz), addig a könyvjelzők a weblapon belüli helyekre navigálnak minket.

19.1. Hivatkozás elhelyezése Jelöljük ki azt a szöveget (vagy képet), amelyet linkké szeretnénk alakítani! Válaszszuk ki a BeszúrásHivatkozás opciót, vagy az eszköztárból a Hivatkozás ikonját:

.

A megjelenő párbeszéd ablakban állíthatjuk be a hivatkozás főbb tulajdonságait, mint például: hivatkozás szövege (ami a honlapon is megjelenik), valamint a hivatkozás helyét, ami lehet egy webcím, vagy egy fájl is. Amennyiben fájlt adunk meg, abban az esetben kiválaszthatjuk, hogy az URL relatív az oldal elhelyezkedéséhez képest.

- 116 -

Hivatkozások és könyvjelzők

Nem elhanyagolható beállítási lehetőség, hogy a hivatkozást miként nyissa meg a böngésző: érdemes lehet például új ablakban.

19.2. Könyvjelző elhelyezése Könyvjelzőket akkor szokás használni, ha egy-egy oldalon belül szeretnénk ugrást végre hajtani. Ennek több oka lehet: például maga az oldal sok tartalommal rendelkezik, így a böngészőben sokáig kéne lefele görgetni, míg elérnénk azt a tartalmat, amire kíváncsiak vagyunk. Ekkor az oldal tetejére érdemes egyfajta tartalomjegyzéket csinálni. A tartalomjegyzék pontjaira kattintva egyből a kívánt tartalomrészre ugorhatunk ugyanazon az oldalon belül. Termé-

50. ábra: Könyvjelző készítése horgony segítségével

szetesen az egyes tartalomrészekhez érdemes egy „Vissza a tetejére” könyvjelzőt készíteni, amire ha rákattintunk, egyből visszaugrik a lap tetejére, ahová 49. ábra: A horgonynak nevet kell adni

elkészítettük a már említett tartalomjegyzéket.

Jelöljük ki azt a szövegrészt, ahova ugrani szeretnénk! Ezután válasszuk ki a BeszúrásHorgony menüpontot (vagy kattintsunk az eszköztár

ikonjára). Adjuk meg a

Horgony nevét. Fontos, hogy olyan nevet válasszunk, amiről később egyértelműen azonosítani tudjuk a Horgonyt! Ezzel egy Horgonyt helyeztünk el arra a szóra, ahova majd később ugrani szeretnénk a weboldal egy másik pontjáról. Most állítsuk be az ugrópontot, azaz azt a helyet, ahonnan a korábban megjelölt pontra szeretnénk ugrani! Válasszuk ki a BeszúrásHivatkozás menüpontot! A Hivatkozás címe helyére korábban hivatkozást írtunk. Most használjuk legördülő menüként! A korábban felvett Horgonyok név szerint megtalálhatóak a legördülő menüben. Válasszuk ki a megfelelőt, majd kattintsunk az OK gombra. Ezzel beállítottunk egy ugrópontot, mellyel a beállított Horgonyra tudunk ugrani, egy lapon belül. A honlap szerkesztő felületén egy-egy horgony helyét egy kis

szimbólum jelöli,

ami – természetesen – csak minket tájékoztat arról, hol helyezkedik el egy-egy horgony. A böngészőben vizuálisan nem lesz látható.

- 117 -

Bekezdések formázása

20. Bekezdések formázása Ahhoz, hogy külön bekezdésekben írhassunk a weblap felületére (alapértelmezettként ez nincs beállítva), az eszköztárban kattintsunk a Szövegtörzs feliratot tartalmazó legördülő menüre:

, és válasszuk a Bekezdés opciót!

Jó, ha weblapszerkesztés során úgy tekintünk a bekezdések formázására, mint ha szöveget szerkesztenénk. Persze kötöttebb lehetőségek állnak rendelkezésre, de ha ezt a szemléletet követjük, könnyebbé tehetjük a helyzetünket: hisz alapjában véve ugyanolyan lehetőségeink vannak, mint szövegszerkesztésnél; például ha egy bekezdést gépelünk be épp, akkor bekezdésen belül a szövegszerkesztésből is ismert SHIFT+ENTER gombkombinációval sortöréseket helyezhetünk el, míg csak az ENTERt lenyomva új bekezdést nyithatunk.

20.1. Igazítás Az eszköztár már a szövegszerkesztésből is ismert szimbolikával jeleníti meg a bekezdések igazítását:

, melyek jelentése rendre – balra-, középre-, jobbra-, és

sorkizárt igazítás. Jelöljük ki azt bekezdést (táblázatot, vagy akár képet), amit igazítani szeretnénk, majd válasszuk ki a megfelelő igazítást. Bekezdésnél az is elég, ha bele állunk kurzorral a bekezdésbe.

20.2. Felsorolás Felsorolások készítése is teljesen úgy megy, mint ahogy szövegszerkesztésben megszokhattuk. Kattintsunk az eszköztárban a

ikonra. A jelenlegi bekezdés előtt megje-

lenik az első felsorolás jel. Amíg ki nem kapcsoljuk a Felsorolás ikonra, minden új bekezdés egy újabb felsorolás pontba fog kerülni. A felsorolások szintjeit beljebb, ill. kijjebb helyezhetjük a Behúzás növelése ill. Behúzás csökkentése ikonokkal (az eszköztárban így találhatóak meg:

).

Bekezdéseket utólag is átalakíthatunk felsorolássá: jelöljük ki azokat a bekezdéseket, melyeket felsorolássá

- 118 -

51. ábra: Többszintű lista szerkesztés alatt

Rajzelemek, képek beillesztése

szeretnénk alakítani, majd kattintsunk az eszköztárban a Felsorolás (

) ikonra.

20.3. Számozott felsorolás Hasonlóan kell eljárnunk, mint ahogy az előző fejezetben: Felsorolások esetén. Az eszköztárban a számozott felsorolás ikonja a rendes felsorolás mellett található:

.

Teljesen úgy „viselkedik”, mint a felsorolás. A különbség csupán annyi, hogy szimbólumok helyett sorszámok jelennek meg a lista elemei előtt.

20.4. Címsor és egyéb formátum megadása Válasszuk ki az adott formátummal ellátni kívánt szövegrészt! Az eszköztárban kattintsunk

a

Szövegtörzs

feliratot

tartalmazó

legördülő

menüre:

, mely a felsorolásokkal egy sorban található. Itt válasszuk ki a megfelelő címsort (1-6-ig vannak megszámozva), vagy egyéb, éppen szükséges formátumot.

21. Rajzelemek, képek beillesztése 21.1. 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ásKép menüpontra, vagy az eszköztárban a

ikonra. A Kép tulaj-

donságai párbeszéd ablak jelenik meg ezután, melyen több fülön találhatjuk a képfájl különböző tulajdonságainak beállításait: 

Hely fül: a kép helyét tallózhatjuk

ki,

valamint

megadhatjuk, mi legyen a képhez tartozó magyarázó, és buborék szöveg (az a szöveg, amely akkor jelenik meg, ha rávisszük az egérrel a kurzort) 

Méretek fül: a kép erede-

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

ti, vagy egyéni méretét

- 119 -

Rajzelemek, képek beillesztése

állíthatjuk be képpontokban megadva. Dönthetünk arról is, hogy méretarányosan akarjuk-e a kép méreteit beállítani. 

Megjelenés: beállíthatjuk, hogy mennyi legyen a térköz a beszúrt kép körül, illetve azt is megadhatjuk, hogy a szöveg hogyan fussa körbe a képet.



Hivatkozás: a BeszúrásHivatkozás menüben is elérhető beállításokat találhatjuk itt: a képre egyből adhatunk meg hivatkozást is.

21.2. 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ásKép menüpontra, vagy az eszköztárban a

ikonra. Ekkor megjelenik a Kép tulajdonságai párbe-

széd ablak, amelyben az előző fejezetben megismert kép tulajdonságokat tudjuk módosítani.

21.3. 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. Megjegyzés: 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!

21.4. 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ó: bárhova tudunk HTML kódot beszúrni. 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)!

- 120 -

Táblázatkészítés

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.

22.Táblázatkészítés A táblázat készítést is leginkább a szövegszerkesztők táblázat készítési lehetőségeihez tudnám hasonlítani. Nincs annyi lehetőségünk, mint egy táblázatkezelő esetén – igaz, a webszerkesztő alkalmazásoknak nem is ez a célja. Nézzük, milyen eszközöket nyújt a KompoZer!

22.1. Táblázat beszúrása Válasszuk ki a BeszúrásTáblázat menüpontot, vagy az eszköztáron található ikont. Az ekkor megjelenő, Táblázat beszúrása párbeszéd ablak – igen figyelmes módon – két lehetőség szerint is enged választani, hogy miként szeretnénk beszúrni a táblázatot: Gyorsan, vagy Pontosan. 

Gyorsan: egy kis táblázat szemlélteti, hogy hány sort, ill. oszlopot fogunk beszúrni. A kurzor megfelelő pozicionálásával választhatjuk ki a nekünk megfelelő táblázat méretet.



Pontosan: szám szerint adhatjuk meg, hogy hány darab sorból, és oszlopból álljon a táblázat. Ezen felül itt van lehe-

53. ábra: Táblázat "Gyors" beszúrása

tőség megadni a táblázat szegélyének vastagságát, továbbá itt adhatjuk meg, hogy a táblázat szélessége hány százaléka legyen a böngésző ablak teljes szélességének.

- 121 -


A párbeszéd ablak utolsó füle a Cella nevet viseli. Ahogy a neve is elárulja: ezen fülön a beszúrandó táblázat celláinak tulajdonságait tudjuk beállítani; mint például: 

térköz cellák között, és cellákon belül



vízszintes és függőleges igazítás cellákon belül



szöveg tördelése cellákon belül

54. ábra: Szerkesztés alatt lévő táblázat

22.2. Táblázat tulajdonságainak szerkesztése Ahogy eddig is megszokhattuk, már egy beszúrt objektumot úgy tudunk formázni, módosítani, hogy kijelöljük azt, és kiválasztjuk az eszköztárból a hozzá tartozó ikont. Jelöljük ki a szerkeszteni kívánt táblázatot, vagy táblázat részt, majd a Táblázat (

)

ikont: ekkor megjelenik a Táblázat tulajdonságai párbeszéd ablak, melyben részletes beállítási lehetőségeket találhatunk. Ezeket alább tárgyaljuk részletesebben. 22.2.1. Méret A méretet pixelben, vagy

százalékban

(a

böngésző ablak méretéhez viszonyított, relatív százalékban)

tudjuk

megadni: a szélességet, és a magasságot. Ezen felül szerkeszteni tudjuk, hogy hány sorból, ill. oszlopból álljon a táblázat.

55. ábra: Táblázat tulajdonságai párbeszédablak

- 122 -


A szerkesztő program úgy szúrja be az új sorokat, vagy oszlopokat (vagy úgy törli ki) hogy a táblázat méretén nem változtat. Azaz vagy sűríti, vagy ritkítja az oszlopok, ill. sorok számát. 22.2.2. Szegély A Táblázat tulajdonságainak Táblázat fülén a Szegély és térköz csoportban találjuk a Szegély opciót. Itt pixelben tudjuk megadni a szegély méretét. Alapértelmezett értékben ez 1 pixel (lásd: 51. ábra). 22.2.3. Cellák térköze Ugyancsak a Táblázat tulajdonságainak Táblázat fülén találhatjuk a cellák térközére vonatkozó beállításokat (lásd: 51. ábra). Cellatávolságot képpontokban tudjuk megadni – ezzel állítjuk be két cella távolságát. Helykitöltés (ahogy a magyarázó szöveg is írja) a cella szegélye, és a cella tartalma közötti távolságot adhatjuk meg, szintén pixelben megadva. 22.2.4. Táblázat igazítása Meg tudjuk adni, hogy a táblázat a weblap melyik részén helyezkedjen el: baloldalt, jobboldalt, vagy középen. A Táblázat tulajdonságai párbeszédablakban ezt a Táblázat igazítása legördülő menüben tudjuk beállítani (lásd: 51. ábra). 22.2.5. Háttérszín A Táblázat tulajdonságai párbeszédablakban legalul találjuk a Háttérszín opciót. Kattintsunk a felirat melletti, üres gombra! Egyszerű színválasztó ablak nyílik meg: ebben a már megszokott módon választhatjuk ki a nekünk megfelelő színt. A beállítások alkalmazásához kattintsunk a Táblázat tulajdonságai párbeszédablak Alkalmaz gombjára. A Cellák fülre kattintva az éppen kijelölt cellák tulajdonságait láthatjuk: ezeknél külön is beállítható háttérszín ugyanúgy, ahogy a teljes táblázat esetén.

- 123 -


22.3. Sorok, oszlopok beállításai Sorok és oszlopoknak a méretüket, és háttérszínüket tudjuk beállítani. Ezen beállítások is a Táblázat tulajdonságai párbeszédablakon állíthatóak be. Válasszuk ki annak a táblázatnak azon celláját, melynek sorát vagy oszlopát szerkeszteni szeretnénk! Ezután válasszuk ki a Táblázat (

) ikont! Ekkor megjelenik

a Táblázat tulajdonságai párbeszédablak. Válasszuk ki a Cella fület! Itt találhatjuk a táblázat celláira, soraira, oszlopaira vonatkozó beállításokat. Legördülő menüből választhatjuk ki, hogy cella, sor, vagy oszlop tulajdonságokat szeretnénk-e szerkeszteni (lásd: 52. ábra). Amint kiválasztjuk a legördülő menü-

56. ábra: Kijelölés kiválasztása: sorra, oszlopra, vagy cellára

ben, hogy mit szeretnénk ezek közül szerkeszteni, a KompoZer szerkesztőfelületén a szerkesztendő táblázat következő része fog kijelölődni: annak a cellának a sora, vagy oszlopa, ahol éppen állunk. A cellák, sorok, oszlopok között a párbeszéd ablakon keresztül is tudunk lépkedni az Előző és Következő gombokkal (lásd: 53. ábra, Kijelölés része).

57. ábra: Táblázat tulajdonságai párbeszédablak: cellák, sorok, oszlopok beállításai

22.3.1. Sor magasságának beállítása A Sorok, oszlopok beállításai fejezetben leírt módon jelöljük ki azt a sort, amit szerkeszteni szeretnénk. A Táblázat tulajdonságai párbeszéd ablak Méret csoportjában állít- 124 -


suk be a kívánt magasságot. A magasságot pixelben, vagy a táblázat magasságának százalékában adhatjuk meg. 22.3.2. Oszlop szélességének beállítása A Sorok, oszlopok beállításai fejezetben leírt módon jelöljük ki azt az oszlopot, amit szerkeszteni szeretnénk. A Táblázat tulajdonságai párbeszéd ablak Méret csoportjában állítsuk be a kívánt szélességet. A szélességet pixelben, vagy a táblázat magasságának százalékában adhatjuk meg. 22.3.3. Cella, sor vagy oszlop háttérszínének beállítása A Sorok, oszlopok beállításai fejezetben leírt módon jelöljük ki azt az cellát, oszlopot, vagy sort, amit szerkeszteni szeretnénk. A Táblázat tulajdonságai párbeszédablakban alul találhatjuk a Háttérszín jelölőnégyzetet (lásd: 53. ábra). Kattintsunk a mellette lévő, üres gombra! Ekkor egy színválasztó párbeszédablak jelenik meg. Válasszuk ki a szükséges színt (RGB kóddal, vagy HTML kóddal is megadhatjuk), kattintsunk az OK gombra, a Táblázat tulajdonságai párbeszédablakban pedig az Alkalmaz gombra. Az így beállított szín azonnal látszódni fog a szerkesztés alatt lévő táblázaton.

22.4. Táblázat cella feltöltése tartalommal Álljunk bele a táblázat azon cellájába, amibe tartalmat szeretnénk elhelyezni. Ez a tartalom lehet szöveg (Műveletek szövegekkel fejezet), kép (Rajzelemek, képek beillesztése fejezet), vagy akár egy újabb táblázat is (Táblázat beszúrása fejezet), melyek az eddig megismert módon tudunk elhelyezni. 22.4.1. Cellatartalom igazítása Álljunk bele abba a cellába, aminek tartalmát igazítani szeretnénk. Kattintsunk az eszköztáron a Táblázat (

) ikonra! Válasszuk ki a megjelenő, Táblázat tulajdonsá-

gai párbeszédablak Cella fülét. Az itt található, Tartalom igazítása csoportban állíthatjuk be a cella tartalmának vízszintes, ill. függőleges igazítását legördülő menük segítségével (lásd: 53. ábra).

- 125 -


22.5. Cellák összevonása és felosztása 22.5.1. Cellák összevonása Jelöljük ki azokat a cellákat, melyeket össze akarunk vonni. Nyomjunk egy jobb klikket: az így megjelenő gyorsmenüben válasszuk ki a Kijelölt cellák egyesítése opciót. 22.5.2. Cellák felosztása Jelöljük ki azt a korábban összevont cellát, melyet fel szeretnénk osztani. Jobb klikkel hívjuk elő a gyorsmenüt: válasszuk ki a Cella felosztása opciót.

22.6. Sorok, oszlopok törlése KompoZerben több módon is ki tudjuk törölni egy táblázat sorát, vagy oszlopát. Az egyik legegyszerűbb módszer a következő: álljunk annak az oszlopnak, vagy sornak a cellájába, amelyet törölni szeretnénk! Jobb klikkel jelenítsük meg a gyorsmenüt, majd

58. ábra: Táblázat törlése esetén akár cellát, sorokat, vagy oszlopokat is törölhetünk

válasszuk a Táblázat törlése opciót. Itt egy további menü jelenik meg, ahol kiválaszthatjuk, hogy mit szeretnénk törölni. Válasszuk ki a megfelelőt (lásd: 54. ábra)!

22.7. Sorok, oszlopok beszúrása Álljunk abba a sorba, vagy oszlopba, ami elé, vagy mögé újabban szeretnénk beszúrni, majd jobbklikkel jelenítsük meg a gyorsmenüt! A gyorsmenüből válasszuk ki a Táblázat beszúrása opciót. Ekkor úgy, mint sorok, vagy oszlopok törlése esetén, egy újabb menü je-

59. ábra: Sorok, oszlopok, cellák beszúrásának gyorsmenüje

lenik meg, melyben kiválaszthatjuk mit (cella, sor, oszlop) és hova (alulra, felülre, cella estén pedig még: jobbra, balra) szeretnénk beszúrni (lásd: 55. ábra).

- 126 -

Beágyazott keret használata

23. Beágyazott keret használata Ismét találkozhatunk a KompoZer egyik hiányosságával: közvetlenül nem tudunk beágyazott keretet készíteni. Ez egy olyan honlapelem, melyen keresztül egy másik honlap látható. Tulajdonképp így a honlapunkon belül el tudunk helyezni egy másik, komplett honlapot. Ehhez csak az adott honlap URL-jére van szükségünk. A szerkesztőfelületen álljunk a kurzorral oda, ahova el szeretnénk helyezni ezt a beágyazott keretet, majd válasszuk a BeszúrásHTML opciót! A megjelenő ablakba írjuk be az alábbi kódot [7] (értelemszerűen az URL helye felirat helyére kell beírnunk a beágyazni kívánt oldal URL-jét): <iframe src="URL helye">
A böngészője nem támogatja a beágyazott kereteket.

24. Űrlapok Űrlapokat arra használják, hogy a különböző weblapokon keresztül különböző információkat kérjenek a felhasználótól. Ha megfelelően van beállítva az űrlap elküldésének a módja, akkor a szerver oldalon megfelelő eszközökkel fel lehet dolgozni a beküldött válaszokat. Ez persze már nem tartozik az OKTV versenyek követelményei közé [2]. Például ilyen lehet egy, a honlapot véleményező szöveg, vagy egy kvíz jellegű kérdéssor. Nézzük meg, hogy lehet ilyet a KompoZerben készíteni! Űrlap beszúrását, és szerkesztésének megkezdését a BeszúrásŰrlap menüben érhetjük el.

24.1. Űrlap általános tulajdonságainak megadása Egy űrlap különböző beviteli mezőkből, és gombokból áll. Ezeket az objektumokat foglalja magába egyegy űrlap. Ezért előbb egyfajta blokkot hozunk létre, melyben később elhelyezzük a további szükséges űr60. ábra: Űrlap tulajdonságainak beállításai

- 127 -

Űrlapok

lapelemeket. Válasszuk ki a BeszúrásŰrlapŰrlapkészítés menüpontot! Ekkor megjelenik az Űrlap tulajdonságai párbeszéd ablak, mellyel megkezdhetjük az űrlap felépítését, az űrlap egészére vonatkozó alapbeállítások elvégzését. A KompoZer a szerkesztő felületen az űrlap határait világoskék, szaggatott vonallal jelzi (lásd: 57. ábra). Böngészőben viszont semmi nem utal arra, hogy hol kezdődik, és végződik egy űrlap. Éppen ezért érdemes valamilyen felirattal feltüntetni, hogy egy űrlapról van szó. Általában az űrlapok végére szokták helyezni az „Elküld” ill. „Apahelyzet” gombokat. Előbbi az űrlap tartalmának elküldésére szol-

61. ábra: Szerkesztés alatt levő űrlap. Az űrlap határait világoskék, szaggatott vonal jelzi.

gál, utóbbi pedig az össze űrlap mező kitörléséhez. 24.1.1. Űrlap nevének megadása Az Űrlap tulajdonságai párbeszéd ablak Űrlap neve mezőbe írjuk be a kívánt űrlap nevet. 24.1.2. Művelet URL-je Erre a címre küldené el a weblap a kitöltött űrlap mezőinek értékét. Ha az OKTV feladat nem rendelkezik másképp, töltsük ki tetszőlegesen. 24.1.3. Űrlap tartalmának továbbítása: GET és POST Ez már fontosabb a verseny szempontjából: Űrlap tulajdonságai ablak, Módszer legördülő menüjéből választhatjuk ki, hogy POST vagy GET metódussal történjen-e a feldolgozás? Válasszuk ki a megfelelőt! 24.1.4. Űrlap tartalmának továbbítása e-mailben [7] Tapasztalhattuk, hogy a KompoZer közvetlenül nem ad lehetőséget arra, hogy a kitöltött űrlap tartalmát e-mailben küldjük el. Itt is bele kell nyúlnunk a kódba! Két féleképp is eljárhatunk: vagy Felosztás nézetbe váltunk, hogy annak a html tagnek a kódját

- 128 -

Űrlapok

lássuk, amiben éppen állunk a szerkesztőfelületen, vagy átváltunk Forrás nézetbe, hogy csak a puszta HTML kódot lássuk. Az űrlapot a
HTML tag jelöli. Ezt a tag-et módosítsuk a következőképp:

A [email protected] helyére írjuk a kért e-mail címet: ide fog továbbítódni az űrlap tartalma, amennyiben elküldjük azt (erről később még bővebben beszélünk). 24.1.5. Űrlap tartalmának feldolgozása: CGI-vel [9] A CGI-vel (Common Gateway Interface) való feldolgozás elvi lényege, hogy az űrlap adatokat nem a böngésző dolgozza fel, hanem a szerver, amire továbbítjuk az adatokat. Nézzük, hogy tudjuk ezt az adott űrlapon beállítani! Ahogy e-mail küldés esetén, itt is bele kell nyúlnunk a kódba. Tetszőlegesen vagy Felosztás nézetben, vagy Forrás nézetben menjünk az űrlap kódjához (az űrlap kódját a

tag vezeti be, és a
zárja le). Az űrlap kódját módosítsuk az alábbi mó-

don:

Ahol a CGI fájl elérési útja értelemszerűen a CGI fájl elérési útja, fájlnévvel együtt.

24.2. Űrlapmezők beszúrása Nagyon fontos, hogy az űrlapmezőket a korábban említett, világoskék, szaggatott vonallal jelzett űrlap határvonalon belül helyezzük el: ugyanis ha ezen kívül helyezünk el egy űrlap elemet, akkor annak a mezőnek a tartalma nem lesz továbbítva az űrlap tartalmának elküldése esetén. A legtöbb űrlapmező (a szövegterület kivételével)

elérhető

rásŰrlapŰrlapmező

a

Beszú-

menüponton ke-

62. ábra: Űrlapmező tulajdonságai párbeszédablak

resztül. A megjelenő, Űrlapmező tulajdonságai párbeszédablakban adhatjuk meg - 129 -

Űrlapok

ugyanezen párbeszédablakban levő -, Mezőtípus legördülő menüben kiválasztott űrlap mező tulajdonságait. Az Űrlapmező tulajdonságai párbeszédablak beviteli mezői aszerint változnak, hogy milyen Mezőtípust választottunk ki. A megfelelő mezők funkcióiról alább lehet olvasni (csak a legfontosabbakról teszünk említést). Az egy űrlapmezőkhöz nem tartoznak felirat címkék, ezért azokról nekünk kell külön gondoskodnunk. 24.2.1. Szövegmező A szövegmező egy kis szövegterület, amibe rövid szöveges tartalmat lehet beleírni (pár szavas szövegekre kell itt gondolni). Űrlapmező tulajdonságai párbeszédablak Mezőtípus legördülő menüjében válasszuk ki a Szöveg opciót. A Mezőnévben adhatjuk meg, hogy az űrlapon belül milyen névvel szeret-

63. ábra: Szerkesztés alatt álló egyszerű árlap két, szövegmezővel

nénk ellátni ezt a mezőt. A További tulajdonságok gombra kattintva elérhetővé válik a Mező mérete opció amivel a szövegdoboz hossza állítható be -, valamint a Maximális hossz opció, mellyel korlátozhatjuk, hogy milyen hosszú szöveget (karakter számban értve) írhatnak be ebbe a szövegdobozba. Értéke tehát egy egész szám. 24.2.2. Választókapcsoló Választókapcsoló egy olyan beviteli mező, ahol több lehetséges választási lehetőség közül egyet lehet kiválasztani. KompoZerben választókapcsolót több, Rádiógomb beszúrásával lehet készíteni. Egyegy Rádiógombot beszúrni az Űrlapmező tulajdonságai párbeszédablak Mezőtípus legördülő menüjében a Rádiógomb opcióját választva tudunk.

- 130 -

Űrlapok

64. ábra: Szerkesztés alatt levő űrlap választókapcsolója és annak tulajdonságai. A csoport nevének minden, a választókapcsolóhoz tartozó rádiógombnak egyeznie kell!

Meg kell adnunk a Csoport nevet: ez nagyon fontos! Minden újabb beszúrt Rádiógomb esetén ugyanazt a csoport nevet kell megadni (lásd: 60. ábra). Így tudjuk biztosítani, hogy az űrlap tartalom elküldése esetén egybe kezelje az így egybe tartozó Rádiógombokat, továbbá ugyanezt figyelembe véve fog úgy működni a választókapcsoló, hogy csak egy választ tudjunk bejelölni. Érdemes ékezet nélküli csoportnevet választani! A Mező értéke mezőbe kell azt az értéket beírni, amit továbbításkor elküld a böngésző. Ez nem egy, a honlapon is látható érték: tehát egyfajta „háttérértéknek” tekinthető. Látható feliratokról nekünk kell tehát gondoskodni, hogy a felhasználó tisztában legyen azzal, melyik opció milyen válasz lehetőséget takar (lásd: 60. ábra). 24.2.3. Jelölőnégyzet A jelölőnégyzetekkel egy olyan beviteli mező csoportot lehet létrehozni, ahol egy kérdésre több lehetséges választási lehetőség közül többet is ki lehet választani. Ahogy eddig is, az Űrlapmező tulajdonságai párbeszédablak Mezőtípus legördülő menüjében a Jelölőnégyzet opcióját választva tudunk Jelölőnégyzetet beszúrni. Hasonló logikával kell eljárni, mint a választókapcsolók esetében: az egy csoportba tartozó jelölőnégyzeteknek érdemes ugyanazt a nevet adni (Mezőnév). A Mező értéke ismét olyan tartalommal töltsük fel, amit az űrlap adatainak elküldésekkor láttatni szeretnénk szerver oldalon. 24.2.4. Szövegterület A szövegterület egy olyan beviteli mező, amely hosszabb, folytonos szöveg bevitelét teszi lehetővé. - 131 -

Űrlapok

Beszúrásához válasszuk a BeszúrásŰrlapSzövegterület opciót. A megjelenő, Szövegmező tulajdonságai párbeszédablakban a következő, főbb tulajdonságokat adhatjuk meg: 

Mezőnév: ahogy eddig is, ezzel azonosítja az űrlap a mezőt



Sorok: ennyi darab sorból fog állni a szövegterület



Oszlopok: ennyi oszlopból fog állni a szövegterület



(Több lehetőség gombra kattintva) Kezdőszöveg: ez a szöveg alapértelmezettként lesz benne a Szövegterületben. Egyértelműsítő szöveget érdemes ide írni, például: „Ide írhatja a honlapról alkotott véleményét”.

65. ábra: Szerkesztés alatt álló szövegmező, kezdőszöveggel

- 132 -

Űrlapok

24.2.5. Legördülő menü Ezt az űrlap elemet úgy hiszem, mindenki ismeri: előre meghatározott értékek közül választhatunk, melyek egy lenyíló ablakban helyezkednek el. A KompoZer viszont a legördülő menüt Választólista néven használja. Beszúrásához

válasszuk

ki

a

Beszú-

rásŰrlapVálasztólista opciót. Ekkor megjelenik a Választólista tulajdonságai párbeszédablak. 66. ábra: Választó lista tulajdonságainak beállítása

Elsőre kicsit bonyolultnak tűnhet.

Először adjuk meg a Lista neve mező értékét! Itt is érdemes ékezet nélkül megadni. Ha megadtuk a Lista neve mező értékét, kattintsunk a Lehetőség hozzáadása gombra. Ezután a fenti listában meg is jelenik az így hozzáadott választólista neve. Ennek a listának köszönhetően könnyebben át tudjuk majd tekinteni a választólistánkat. Miután rákattintottunk a Lehetőség hozzáadása gombra, megváltozik az ablak felülete: a hozzáadott lehetőség tulajdonságait tudjuk szerkeszteni. A Szöveg mezőbe kell beírnunk azt, amit a Választólistában látni szeretnénk majd, az Érték mezőbe 67. ábra: Választólista lehetőségeinek szerkesztése

pedig azt, amit majd továbbítunk

az űrlap elküldése esetén – ide érdemes ékezet nélküli értékeket megadni. Újabb lehetőség hozzáadásához kattintsunk a Lehetőség hozzáadása gombra, és töltsük ki a szükséges értékekkel a Szöveg és Érték mezőket. Az egyes lehetőségek egymás alatt, rendezetten jelennek meg a szerkesztőablakban (lásd: 63. ábra). Alapértelmezett értéket is megadhatunk: a kérdés választólista (ha még - 133 -

Űrlapok

nem választottunk értéket) ezen az értéken fog állni. Ehhez csak válasszuk ki a listából a megfelelő Lehetőséget, és pipáljuk be az „Alapértelmezett kiválasztása” jelölőnégyzetet (lásd: 63. ábra). 24.2.6. „Alaphelyzet” és „Elküldés”gomb hozzáadása Az Alaphelyzet gomb szolgál arra, hogy az egész űrlap összes mezőjét alaphelyzetbe állítsa: azaz a szövegmezőket kitörli, ill. az egyéb beviteli mezőket alapértelmezett értékre állítja. Ez fontos, hisz nem lenne jó, ha egyenként kéne az össze beviteli mező tartalmát kitörölni. Az Elküldés gomb a legfontosabb űrlapelem. Ezzel tudjuk elküldeni a szervernek a kitöltött űrlapot. Gépeljük be előre azt a feliratot, amit a gombon látni szeretnénk, arra a helyre, ahová majd a gombot el szeretnénk helyezni! Jelöljük ki ezt a szöveget: ezt fogjuk gombbá alakítani! Alaphelyzet gombnál érdemes az „Alaphelyzet” szöveget beírni, Elküldés gomb esetén pedig az „Elküldés” szöveget. Válasszuk a BeszúrásŰrlapGomb beszúrása opciót. Ekkor megjelenik a Gomb tulajdonságai párbeszédablak, ahol megadhatjuk a beszúrandó gomb legfontosabb tulajdonságait. A Típus legördülő menüben választhatjuk ki, milyen gombot szeretnénk beszúrni (Elküldés, Alaphelyzet, Gomb). A Név mezőbe írjuk azt a nevet, ahogyan az űrlapon belül azonosítani szeretnénk a gombot, az Érték mezőbe a már megszokott, ékezet nélküli értéket írjuk.

- 134 -

68. ábra: Gomb tulajdonságainak megadása

Űrlapok

A különböző rádiógomboknak közös nevet adunk, ezzel biztosítva azt, hogy egyszerre csak egyet választhassunk ki.

A jelölőnégyzeteknek is egyező neve van, hogy elküldés esetén fel lehessen dolgozni az adatokat.

A gombokat kijelölt szövegekből alakítottuk ki: így hoztuk létre a gombok feliratait.

A szövegterületnek alapértelmezett szöveget adtunk meg, hogy világosabb legyen, milyen információt várunk

69. ábra: Különböző űrlapelemekből elkészített űrlap szerkesztői nézetben

- 135 -

Az űrlap területét egy szaggatott, kék vonal jelzi: ezen a területen fejti ki hatását pl. az Alaphelyzet és az Elküldés gomb.

Stílusok [8]

25. Stílusok [8] Szövegszerkesztésben már hallhattunk stílusokról. Stílusokkal megkönnyíthetjük saját munkánkat: előre definiált sablonok segítségével formázhatjuk szövegeinket, így nem kell minden egyes új bekezdésnél újra és újra a kívánt beállításokat elvégezni. Mindezek felett: az egyes stílusok utólag is módosíthatóak. Ezek a módosítások automatikusan életbe lépnek a módosított stílussal rendelkező bekezdésekre. Gondolhatjuk, mekkora ereje van ennek egy több száz, vagy több ezer oldalas dokumentum esetén. Honlap készítésnél is hasonló funkciót töltenek be a stílusok: beállíthatjuk vele a honlap háttérszínét, betűk színét, típusát, stílusát. Bármit, amit formázni lehet, azt a stílusokban is be lehet állítani (pl.: táblázatok háttérszíne). Nézzük, hogy megy ez a gyakorlatban! Jelen munka keretei nem teszik lehetővé, hogy minden lehetséges beállítást bemutassak, ezért csak az OKTV ide vágó elvárásai [2] mentén tekintjük át a lehetséges beállításokat.

25.1. Egyszerű stílusok készítése Egyszerű stílusok alatt a következőket érdemes gondolni: alapvető színbeállítások (betű, háttér), alapvető szövegbeállítások (betűtípus, -stílus). Alapvetően két féle technikát különböztethetünk meg weblapok stílus használatánál: a stíluslap vagy integrálva van a weblapba, vagy magát a stílust leíró, ún. CSS fájl a weblapon kívül helyezkedik el, egy külön állományban. Utóbbi szerencsésebb lehet, hisz ekkor nagy szabadságunk van a weblap megjelenését illetően: csak le kell cserélnünk a külső CSS fájlt, ami leírja a weblap stílusát, és máris megváltoztattuk a weblap megjelenését anélkül, hogy a kódjába bele kellett volna nyúlnunk!

- 136 -

Stílusok [8]

25.1.1. Belső stílusok készítése

Stílus típusának kiválasztása

Már létrehozott stíluslapok listája.

Weblapelem kiválasztására szolgáló legördülő menü.

70. ábra: Stíluslapok létrehozására és szerkesztésére szolgáló párbeszédablak

Kattintsunk az eszköztár CSS-szerkesztő ikonjára:

! Ekkor megjelenik a CSS-

stíluslapok párbeszéd ablak. Tekintsük át az ablak felépítését! Alapértelmezett

helyzetben

belső

stíluslapot

tudunk

szerkeszteni

a

CSS-

szerkesztővel. Mint korábban említettük, ez azt jelenti, hogy a stílus maga a weblapba van integrálva. A CSS-stíluslapok párbeszédablakban baloldat, a Lapok és szabályok listában láthatjuk az eddigi stíluslapokat. Alapértelmezettként már itt szerepel egy belső stíluslap (lásd: 66. ábra). A következő, előre megadott, főbb weblapelemekhez tudunk stílust

rendelni:

szövegtörzs,

címsorok (1-6-ig), bekezdés. Lehetséges további weblapelemekhez (ún.tag-ekhez) stílust rendelni, ám ezek nincsenek benne az előre megadott legördülő menü-

71. ábra: Legördülő menüben lőre megadott weblapelemek, melyek tulajdonságait stíluslappal szerkeszteni tudjuk

ben, melyben kiválaszthatjuk a szerkeszteni kívánt weblapelemeket.

- 137 -

Stílusok [8]

Új stílusszabály megadásának lépései: 1. Válasszuk ki a Stílusszabály létrehozása gomb feletti legördülő menüből azt a weblapelemet, amihez új stílust szeretnénk rendelni! 2. Kattintsunk a Stílusszabály létrehozása gombra! 3. Ezzel megváltozik a CSS-stíluslapok ablak felülete: több ablak fülre szétosztott tulajdonságokat tudunk külön-külön szerkeszteni, melyek a korábban kiválasztott weblapelem tulajdonságait befolyásolják. Ezután bármely ilyen weblapelem az itt beállított tulajdonságokkal fog rendelkezni.

72. ábra: Új, bekezdésekre vonatkozó stílusszabály szerkesztés alatt: a baloldalt lévő stíluslap fa szerkezettel szemlélteti a stílus felépítését

Az egyes tulajdonságok beállítására nem térünk ki, hisz például a szövegszerkesztésben is tapasztalt logikával történnek, csupán megemlítjük, hogy a legfontosabb füleken (lásd: 68. ábra) milyen beállításokat találunk: 

Szöveg: betűtípusok (betűcsalád), betűstílusok beállítása (félkövér, dőlt, aláhúzott), betűszín beállítása.



Háttér: háttér színének, vagy háttérkép beállítása (ismétlődéssel, vagy anélkül).



Szegélyek: szegélyek helyének beállítása (alsó, felső, oldalsó, vagy ezek variációi), szegély szín és vastagság beállításai.

- 138 -

Stílusok [8]

Példaként álljon itt egy átalakított, egy címsor 1 stílusszabály (69. ábra), melynek jellemzői: 

Zöld betűszín



Fekete háttér



Arial black betűtípus



Aláhúzott



Középre igazított

73. ábra: Egy stílus szöveg beállításainak ablaka

Mint ahogy a fenti ábrán is látszik: a stílus beállításait egy mintaszöveg teszi láthatóvá, így nem kell mindig külön megnéznünk, hogy fog kinézni a weblapon a beállított stílussal rendelkező weblapelem. Újabb stílusszabály hozzáadásához kattintsunk rá a CSS-stíluslapok párbeszéd ablak bal felső sarkában található paletta ikonra (

). Ekkor a párbeszédablakon megjelenik

a már bemutatott, Új stílusszabály felület (lásd: 66. ábra), ahol elkészíthetjük az új stílusszabályunkat. 25.1.2. Külső (csatolt) stílusok készítése Mint említettük, az egyes stílusszabályokat tartalmazó leírást külső fájlban is tárolhatjuk. Ekkor a weblapon belül tudunk rá hivatkozni: külső stílus fájlt csatolunk a weblaphoz.

- 139 -

Stílusok [8]

Kattintsunk az eszköztár CSS-szerkesztő ikonjára:

! Ekkor megjelenik a CSS-

stíluslapok párbeszéd ablak. Ezután kattintsuk CSS-szerkesztő párbeszédablak bal felső sarkában található paletta ikonra (

), és válasszuk ki a Hivatkozott stíluslap opciót!

Tallózzuk ki a megfelelő stílusfájlt, majd kattintsunk a Stíluslap létrehozása gombra (név megadása nem szükséges)! Ezzel csatoltuk a külső stílusfájlt, és hatásai

74. ábra: Hivatkozott (csatolt) stíluslap létrehozása

máris tapasztalhatóak a szerkesztés alatt álló weblapra nézve.

25.2. Stílusok szerkesztése Az egyes, meglévő stílusszabályok szerkesztéséhez kattintsunk az eszköztár CSSszerkesztő ikonjára:

! Ekkor megjelenik a CSS-stíluslapok párbeszéd ablak.

A párbeszédablakban válasszuk ki a szerkeszteni kívánt stíluslap stílusszabályát: ekkor a párbeszédablak felülete megváltozik; a stílusszabály létrehozásánál is bemutatott felület jelenik meg, ahol a már beállított tulajdonságokat tudjuk módosítani, szerkeszteni (lásd: 68. ábra).

- 140 -

Stílusok [8]

Irodalomjegyzék [1] The Gimp documentation: http://docs.gimp.org , Utolsó elérés dátuma: 2012.10.02. [2] Nemes Tihamér Országos Informatikai Tanulmányi Verseny honlapja- Alkalmazás kategória: http://tehetseg.inf.elte.hu/nemesa/ , Utolsó elérés dátuma: 2012.11.07. [3] Gagyi Endre: Képszerkesztés – Digitális fényképek feldolgozása számítógéppel, Kossuth Kiadó, 2005, [343], ISBN 963 09 4782 X [4] A SharePoint Designer 2010 bemutatása: http://office.microsoft.com/huhu/sharepoint-designer-help/a-sharepoint-designer-2010-bemutatasaHA101782482.aspx?CTT=3 , Utolsó elérés dátuma: 2012.10.27. [5] Kompozer – Easy web authoring: http://www.kompozer.net/ , Utolsó elérés dátuma: 2012.10.27. [6] Microsoft | Oktatás: tisztaszoftver program: http://www.microsoft.com/hun/oktatas/licenceles/tisztaszoftver/ , Utolsó elérés dátuma: 2012.10.27. [7] w3schools.com – The world’s largest web development site: http://www.w3schools.com , Utolsó elérés dátuma: 2012.11.10. [8] KompoZer and NVU User Guide – Contributed by Charles Cooke: http://www.charlescooke.me.uk/web/kz-ug-home.htm, Utolsó elérés dátuma: 2012.11.3. [9] HTML tutorial: http://www.htmlcodetutorial.com/ , Utolsó elérés dátuma: 2012.11.10.

- 141 -

Informatikai tehetséggondozás: Web- és képszerkesztés

Recommend Documents