Iskolacsalogató (2024 október)
Kategória: web - emelt szint
Feladat leírása
A Csalogány Iskola „Iskolacsalogató” napot szervez az iskola iránt érdeklődő gyerekek és
szüleik számára. Feladata a rendezvény reklámozásához szükséges grafika, valamint weblap
elkészítése. A rendezvény reklámozásához szükséges plakátsablon (plakat.png)
rendelkezésére áll, azt kell feltöltenie megfelelő tartalommal.
A felhasználandó szövegeket az iskolacsalogato.txt fájlban találja. A szükséges
képek: plakat.png, ceruzak.png, robot.png.
A feladatban egy grafikát, majd egy weblapot kell elkészítened.
Részfeladatok
1. Nyissa meg a plakat.png képet rasztergrafikus képszerkesztő programmal, amely támogatja a rétegek használatát! Mentse el a képet grafika néven a program alapértelmezett formátumában!
2. Illessze be az „Iskolacsalogató” szöveget és helyezze el talp nélküli betűtípussal, félkövér betűstílussal RGB(71, 130, 72) színkódú színnel! A szöveg legalább 360 képpont széles legyen! A szöveget forgassa el 15°-kal az óra járásával ellentétes irányba, és helyezze el a minta szerint! Ügyeljen arra, hogy a szöveg ne lógjon rá a sötétebb kék területre!
3. Illessze be új rétegre a robot.png képet, és a méretarányok megtartásával méretezze át úgy, hogy szélessége 160 képpont legyen! A réteg neve Robotika legyen! A képet helyezze el a minta szerint!
4. A robot két szemöldökét és a testén lévő fehér téglalapot retusálja a robot fejével, illetve testével megegyező színűvé!
5. Készítsen egy új réteget Hangjegy1 néven, amelynek mérete 150 képpont széles és 120 képpont magas legyen! Ezen rajzolja meg fekete színnel a két ellipszisből és három vonalból álló két hangjegyet a minta szerint! Ügyeljen arra, hogy a vonalak függőlegesek legyenek, az összekötő vonal pedig vízszintes! A rajz szélessége legalább 100 képpont, magassága legalább 60 képpont legyen!
6. Készítsen másolatot az előzőleg létrehozott, a két hangjegyet tartalmazó rétegről Hangjegy2 néven! Oldja meg, hogy a két hangjegy szürke színnel jelenjen meg! Törekedjen arra, hogy az eredeti hangjegyek alakja ne sérüljön meg az átalakítás során!
7. Helyezze el a két hangjegypárt a minta szerint úgy, hogy az egyik hangjegypár függőleges szára metssze a másik hangjegypár vízszintes vonalát! Ügyeljen arra, hogy a fekete hangjegypár takarja a szürke hangjegypárt!
8. Illessze be új rétegre a ceruzak.png képet! A réteg neve Ceruzák legyen! A kép bal és jobb oldali széleiről vágjon le 3-3 ceruzát, vagyis csak a középső hat ceruza (a világoskéktől a pirosig) maradjon a képen! A képen lévő fehér területeket tegye átlátszóvá! A képet ezek után a méretarányok megtartásával méretezze át úgy, hogy magassága 160 képpont legyen!
9. A robotot, az alsó hangjegypárt és a ceruzákat igazítsa úgy, hogy aljuk azonos magasságban, a halványkék terület aljától legalább 15 képpontnyi távolságra kerüljön! Ügyeljen arra, hogy semelyik kép se takarja el a szöveget!
10. Mentse el a képet a program alapértelmezett formátumában! Ezután exportálja a végeredményt grafika néven, PNG formátumban is! A weblap készítésénél ez utóbbi képet kell majd beillesztenie
11. A csalogato.html és a csalogato.css állomány módosításával hozzon létre egy honlapot a mintán látható tartalommal és formázással! Az eredeti állományokról érdemes biztonsági másolatot készítenie. A HTML-állomány már tartalmazza a HTML5 szabvány szerinti alapstruktúrát. A stíluslap állományban található szabályokat Önnek kell kiegészítenie a feladatnak megfelelően. Ügyeljen arra, hogy a HTML-állományban ne alkalmazzon a megjelenítésre vonatkozó stílusdefiníciókat, azokat kizárólag a meglévő CSS állományban helyezze el!
12. A forrásszöveg (iskolacsalogato.txt) első bekezdését helyezze el egyes szintű címsorban!
13. Ugyanezt a szöveget állítsa be a weblap böngészőfülön megjelenő címeként is!
14. A forrásszöveg következő bekezdését helyezze el egy bekezdésben, amelynek adja az info egyedi azonosítót! A mintán látható félkövér, illetve dőlt kiemeléseket megfelelő HTML-címkékkel valósítsa meg!
15. Illesszen be egy 4 sorból és 2 oszlopból álló táblázatot, melynek első sorában fejléccellák, a többi sorában adatcellák legyenek! Illessze be a cellák tartalmát a forrásszövegből a minta szerint!
16. A táblázat alatti szöveget helyezze el egy új bekezdésben!
17. A „regisztrálják magukat az eseményre!” szövegre helyezzen el hivatkozást, amely a regisztracio.html oldalra mutasson! (Ezt az oldalt nem kell létrehoznia.)
18. A fenti bekezdés alatt, önálló bekezdésben helyezze el a korábban elkészített grafika.png képet! (Ha ezt nem készítette el, használja az eredeti plakat.png képet!) A képhez tartozó helyettesítő leírásnak „Az esemény plakátja” című szöveget gépelje be!
19. Az előbbi bekezdésben, a kép után illessze be a „Mindenkit várunk sok szeretettel!” szöveget! A kép és a szöveg között megfelelő HTML-címkével állítson be sortörést! A bekezdést sorolja be a kozepre nevű osztályba, amelyet a későbbiekben írunk le!
20. A stíluslap módosítását (csalogato.css) az alábbiak szerint végezze el!
21. Módosítsa az info nevű egyedi azonosítóra vonatkozó szabályt úgy, hogy a háttérszín világosszürke (lightgray) legyen!
22. Hozza létre a kozepre nevű osztályt, és állítsa be rá, hogy a szöveges tartalom az adott osztályba tartozó elemeknél középre igazodjon!
23. Állítsa be, hogy az oldalon lévő minden kép 400 képpont szélességben jelenjen meg! (Az oldalon jelenleg csak egy kép található, de azt szeretnénk, hogy a későbbiekben beillesztett képek is ebben a méretben jelenjenek meg.)
24. Állítsa be, hogy az oldalon minden szöveg Arial betűtípussal, amennyiben nem áll rendelkezésre, akkor az alapértelmezett talp nélküli (sans-serif) betűtípussal jelenjen meg! Ez a beállítás csak egyszer szerepeljen a stíluslap állományban, vagyis ne állítsa be külön a bekezdésekre, címsorokra stb.!
