Oktatási segédanyag Weboldalszerkesztési gyakorlatok Bevezetés A korábbi oktatási segédanyagokban megismertük a weboldalszerkesztés gyakorlatát. Ennek a segédanyagnak a célja, hogy gyakorlati példákon keresztül mutassa be ezt a folyamatot. A feladatok megoldása során részletes leírást adunk arról, hogy miként oldjuk meg a feladatokat és ezeket lehetőség szerint képpel is illusztráljuk. A feladatok megoldásához a Microsoft Office Frontpage 2003 WYSIWYG szerkesztő programot használjuk, mely azt jelenti, hogy azt kapod, amit látsz, tehát vizuálisan látható formában szerkeszthetjük a weboldalakat. A gyakorlathoz korábbi érettségi feladatokból veszünk példákat, és ezeket fogjuk lépésekre lebontva megoldani. A program részletes bemutatását itt már nem tesszük meg ismét, hiszen a korábbiakban megtanult weboldalszerkesztési technikákat szintén ebben a programban lettek bemutatva. A feladat során ne feledkezzünk meg a folyamatos mentésről!
I. feladat Az ősember
Feladatok megoldása lépésenként Első lépésként az ikonsor legelső ikonjára kattintva egy új lapot hozunk létre, így már rendelkezésre fog állni a két lap, melyeket elmentve létrehozhatjuk a két html fájlt, melyet a feladat kér. Ezután a Fájl/Mentés másként menüpontra kattintva egyik lapot nean.html, a másikat osember.html néven elmentem. A mentésnél ügyeljünk arra, hogy a fájlokat abba a könyvtárba mentsük, ahol a honlaphoz tartozó fényképek is szerepelnek, melyeket később fogunk az oldalba beszúrni. 1. feladat Az oldalak háttérszínének állítsuk be a feladatban megadott moccasin és a szöveg színének a navy megnevezésű színt. Ehhez az oldalakon kattintsunk a fehér szerkesztőfelületen jobb egérgombbal és válasszuk az Lap tulajdonságai menüpontot, majd itt a második, Formázás fülön először a Háttér színét állítsuk be. Nyissuk le a Háttér felirat melletti gombot, és itt válasszuk a További színek pontot. A felugró párbeszédablakban az értékhez (az Automatikus felirat helyére) írjuk be a megadott szín megnevezését, vagy színkódját, és nyomjunk OK gombot.
A szöveg színének beállításához tegyünk ugyanígy, csak a Szöveg felirat melletti gombot válasszuk. 2. feladat Miután a háttér- és szövegszínt megfelelően beállítottuk, a lap beállításai párbeszédablakot is zárjuk be az OK gombra való kattintással. Ezután a gépeljük be az oldalakra a megfelelő címeket, majd jelöljük ki a szöveget, igazítsuk középre, és a stílusoknál válasszuk ki a Címsor 1 stílust. Ezután állítsuk be, hogy a böngésző keretén megjelenő cím is megegyezzen a címmel. Ehhez válasszuk ismét a jobb egérgomb/lap tulajdonságai menüpontot és az első (Általános) fülön a Cím mezőbe írjuk be a főcímmel megegyező szöveget, majd nyomjunk OK gombot. 3. feladat Most először a osember.html fájl tartalmát fogjuk megszerkeszteni. Az ember.jpg beszúrásához válasszuk ki a Beszúrás/Kép/Fájlból menüpontot, és a felugró Tallózás
ablakban válasszuk ki a fájlt abból a könyvtárból, ahova a feladathoz tartozó html fájlokat is mentettük. Miután beszúrtuk a képet, kattintsunk rá egyszer, és miután ilyen módon kiválasztottuk, nyomjuk meg a középre igazítás gombot az ikonsorban. Ezután kattintsunk a képre jobb egérgombbal és válasszuk a Kép tulajdonságai pontot, majd a megjelenő ablakban állítsuk be, hogy a Szegély vastagsága 1 legyen. Ezután nyissuk meg a forrásfájlok között található osforras.txt fájlt (Total Commander, vagy Sajátgép segítségével) és az ebben található szövegek közül jelöljük ki azt a két bekezdést, ami ehhez a fájlhoz tartozik. Miután kijelöltük, kattintsunk rá jobb egérgombbal és válasszuk
a Másolás menüpontot, majd váltsunk ár a Frontpagere és jobb egérgomb/beillesztés segítségével illesszük be a szöveget a honlapba. Ez a folyamat a Control+C, Control+V billentyű kombinációkkal gyorsítható. 4. feladat Az első bekezdésben keresse meg az egy fosszilis csontvázat szöveget, ezt jelölje ki és a jobb egérgomb/hiperhivatkozás pontra kattintsunk. Itt a Cím mezőbe írjuk be, hogy a hivatkozás a nean.html-re mutasson. Ez akkor fog megfelelően működni, ha a fájlok a korábban leírtaknak megfelelően egy mappában vannak. 5. feladat A mintának megfelelően a vonatkoznak. végű bekezdés után nyomjon egy Enter billentyűt és ide szúrjuk be a rajz.jpg képet a korábban leírt módon és a mintának megfelelően ennek a képnek is adjunk egy 1 pontos keretet. A képet igazítsuk középre. Amennyiben a középre igazítás az alatta található szöveget is középre igazítaná, akkor a kép után is nyomjunk egy Enter billentyűt, hogy a második szövegrész külön bekezdés legyen, majd ezt igazítsuk balra. Amennyiben eddig nem tette meg, mindenképpen mentse az osember.html fájlt a Fájl/Mentés, vagy az ikonsorban harmadik, lemez ikonra kattintva.
6. feladat Ennél a feladatnál áttérünk a nean.html fájl szerkesztésére. Ebben a fájlban már korábbról megtalálható az általunk felvitt cím, ami Címsor 1 stílusú és középre igazított. Ezután nyomjunk egy Entert és kattintsunk a Beszúrás/Vízszintes vonal pontra. Miután a vonal beszúrásra került, kattintson jobb egérgombbal a beszúrt vonalra és válassza a Vízszintes vonal tulajdonságai pontot és állítsa be, hogy a szélesség 400 képpont legyen, majd nyomjon OK gombot. 7. feladat A vonal után nyomjunk egy Entert az új sorba ugráshoz, majd válasszuk a Táblázat/Beszúrás/Táblázat menüpontot. Itt egy nagy párbeszédablakot fogunk látni, ahol beállíthatjuk a beszúrni kívánt táblázat paramétereit.
8. feladat Kattintsunk a táblázat baloldali cellájába és a korábban leírtaknak megfelelően szúrjuk be a neanderk.gif képet, illetve a táblázat jobb oldali cellájába az osforras.txt-ből a szükséges szövegrészt másolás/beillesztés segítségével.
9. feladat Végül a táblázat után nyomjunk egy Enter billentyűt és így a táblázat alatti sorba jutunk. A korábban leírtaknak megfelelően szúrjuk be ide a bal_nyil.gif képet és kattintsunk rá jobb egérgombbal és ott a Hiperhivatkozás menüpontra. Itt állítsuk be, hogy a hivatkozás az osember.html-re mutasson. Ezután mentsük a fájlt. A hivatkozások kipróbálásához ellenőrizzük, hogy mindkét fájl el van mentve, majd nyissuk meg őket böngészőben, vagy alul a megtekintés nézetre kattintva és ekkor már működnek a hivatkozások.
II. feladat Lepke
1. feladat Először a nappali.html elkészítésének látunk neki. Ehhez nyissunk egy új dokumentumot az ikonsor első (fehér lap) ikonjára kattintva, majd ezt a Fájl/Mentés másként menüpontjában mentsük nappali.html néven abba a könyvtárba, ahol a fájlhoz tartozó képek is találhatóak. A jobb egérgomb/lap tulajdonságai menüpontban a Formázás fülön állíthatjuk be ismét az oldal háttérszínét, ami esetünkben DarkSlateGray. Ennek pontos menetét az előző feladatnál ismertettem. 2. feladat Miután innen kiléptünk az OK megnyomásával, írjuk be az oldal címét, és a stílusát állítsuk át Címsor 1 típusúra. A színét a ikonra kattintva tudjuk átállítani fehérre, majd igazítsuk középre. A Lap tulajdonságainál állítsuk be a böngésző keretén megjelenő címnek is ugyanezt a mondatot.
3. feladat A következő lépésként szúrjuk be az oldal gerincét jelentő táblázatot a Táblázat/Beszúrás/Táblázat menüpontban a megfelelő beállításokkal. A feladat azt kéri, hogy a sorok és oszlopok számát a szövegnek megfelelően válasszuk meg. A minta alapján a legjobb megoldás a 4 sorból és 1 oszlopból álló elrendezés, mert a két képet a két különböző oldalra könnyen le tudjuk majd tenni igazítással is. A helyes beállítások itt láthatók:
4. feladat Állítsuk az A nappali lepke jellemzői szöveget Címsor 2 stílusúra, a többi szöveget is másoljuk át Másolás/Beillesztés eljárással a szoveg.txt állományból és állítsuk a beszúrás utáni alapértelmezettnél nagyobb méretűre. 5. feladat Szúrjuk be a k1.jpg és k2.jpg képeket a korábban már használt Beszúrás/Kép/Fájlból menüpontban és a jobb egérgomb/kép tulajdonságainál állítsuk be, hogy a szöveg körbefuttatása legyen jobbról és a szegély vastagsága 1. A k2.jpg-nél a szöveg körbefuttatása majd balról lesz.
6. feladat A legalsó cellába begépelt Az éjjeli lepkék szöveget jobb egérgomb/hiperhivatkozásra kattintva alakítsuk linkké, és a Cím mezőbe az ejjeli.html -t írjuk, így erre fog mutatni a hivatkozás. Az ismert módszerrel szúrjuk be elé a jel.gif képet, majd a linkek 3 állapotának a színét állítsuk feketére a jobb egérgomb/lap tulajdonságainál. 7. feladat Ebben a feladatban már áttérünk a másik fájl, az ejjeli.html szerkesztésére. Ezt a fájlt nem kell létrehozni, csak megnyitni és azt módosítani. Tehát a Fájl/Megnyitás menüpontra kattintva nyissuk meg az ejjeli.html fájlt. 8. feladat A jobb egérgomb/táblázat tulajdonságainál állítsuk a táblázat háttérszínét DarkSlateGray-re, majd a Lap tulajdonságainál a szövegszínt fehérre.
9. feladat Szúrjuk be a szokásos módon a lepke képét, a k3.jpg-t a szövegbe és állítsuk a jobb egérgomb/kép tulajdonságainál a körbefuttatás stílusát arra, hogy jobbról.
10. feladat Az alsó sorba begépeljük A nappali lepke szöveget és a 6. feladatban leírtakkal azonos módon hivatkozást helyezünk rá, ami itt a nappali.html-re mutat. A jel.gif képet beszúrjuk elé és a linkek mindhárom állapotát itt fehérre állítjuk. Jó munkát mindenkinek!