Készítsünk weboldalt a leírás és a minta alapján.
Források
Feladatok
A vetési varjút veszélyeztetettsége és a hirtelen állománycsökkenése miatt a Magyar Madártani és Természetvédelmi Egyesület – a kék vércsével együtt – a 2009-es év madarának választotta. Az Ön feladata, hogy a minta és a leírás alapján a képszerkesztési feladatokat elvégezze és a vetési varjút bemutató weboldalt elkészítse.
A weboldal és az azon szereplő első kép elkészítéséhez szükséges képállományok a magok.png, labnyom.png, varjukep1.jpg és varjukep2.jpg. A weblap szövegét a varjuforras.txt (UTF-8 kódolású) állomány tartalmazza.
- A weblap tetejére beillesztendő képet kell elkészítenie a magok.png és a labnyom.png állományok felhasználásával! Az elkészített képállomány neve fejlec.png legyen!
- Az elkészített kép mérete és háttere az elszórt magokat ábrázoló magok.png állományéval egyezzen meg!
- Helyezze el a madár lábnyomait a magokat ábrázoló képen a minta szerint, mintha egy magokat szedő madár ment volna végig a hóban! A varjú egyik lábának nyomát a labnyom.png állomány tartalmazza. A lábnyomot kicsinyítse úgy, hogy a másolatok elférjenek a háttérképen! Ügyeljen arra, hogy a bal és jobb lábnyom egymás tükörképei legyenek! A képen 5 lábnyompár legyen!
- Készítse el a varjak.html állományt! Az oldal forrásszövegét a varjuforras.txt állományban találja. A böngésző címsorában megjelenő cím szövege „Vetési varjú” legyen!
- Az oldal jellemzőinél állítsa be, hogy a háttérszín kékesszürke (#99ACB2 kódú szín), a szöveg színe pedig sötétszürke (#192C32 kódú szín) legyen! A linkek színe minden állapotban narancssárga (#FF6F00 kódú szín) legyen!
- Az oldal szerkezetét egy négysoros és háromoszlopos táblázatból alakítsa ki! A táblázat tulajdonságait az alábbiaknak megfelelően állítsa be:
− a szélesség legyen1006 pontos;
− az oldalon legyen vízszintesen középre igazított;
− a táblázat szegély nélküli legyen (mérete 0 képpont);
− a cellamargó legyen 3 képpont és a cellatávolság alapértelmezett;
− a harmadik sorának háttérszíne fehér legyen!
- Szúrja be a fejlec.png képet a táblázat első sorába! A képnek állítson 1 pontos szegélyt! Ha a képet nem sikerült elkészítenie, akkor használja a potfejlec.png állományt!
- Az oldal címét, a „Vetési varjú” szöveget a táblázat második sorába helyezze el, és alakítsa egyes szintű címsor stílusúvá! Alatta a latin név normál bekezdésként, de dőlt betűstílussal jelenjen meg! A szöveget a minta szerint igazítsa!
- A harmadik sor középső cellájába a szöveget a varjuforras.txt állományból másolja át! A bekezdéseket készítse el a mintának megfelelően! A mintán látható felsorolásokat hozza létre!
- A harmadik sor első cellájába helyezze el a varjukep1.jpg, a harmadik cellájába pedig a varjukep2.jpg képet! Mindkét kép szegély nélküli és vízszintesen középre igazított legyen! Állítsa be, hogy ha az egeret a képekre mozgatjuk a böngészőben, akkor magyarázó szövegek jelenjenek meg a buboréksúgókban! Az első képnél a „levegőben”, a másodiknál a „földön” legyen a felirat! Ehhez a képek megjelenítéséért felelős tageket egészítse ki a következő paraméterrel: title=”levegőben”, illetve title=”földön”!
- A táblázat negyedik sorában lévő szöveg címsor stílus beállításait a harmadik sorban lévő szöveg segítségével állítsa be, vagyis:
− a harmadik sorban aláhúzott szövegek kettes szintű címsor stílussal,
− a nem aláhúzott szövegek hármas szintű címsor stílussal jelenjenek meg!
- A kettes szintű címsor stílusú bekezdésekhez hozzon létre könyvjelzőket, majd készítsen oldalon belüli hivatkozást a harmadik sor középső cellájában lévő három szóra, amire kattintva az oldal szövegének megfelelő részéhez ugorhatunk!
MintaFigyelmeztetésHa Kompozert használsz, állítsd a karakterkódolást utf-8-ra!
| 
2004-2016 BDG algoritmus szakkör
