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!