Weblapszerkesztés alapjai

a Microsoft Frontpage program magyar nyelvő változatával

A következı oldalak végigvezetnek a Frontpage használatának alapjain. Célszerő a lépéseken sorban haladni, de lehetıséged van ettıl eltérı módon is tanulni. A legtöbb anyag végén találsz egy mintafeladatot, ennek lépésein végighaladva, kipróbálhatod a tanultakat. Valamint megnézheted a teljes mintafeladatot, amelynek kivitelezésére Te is képes leszel mire a tananyag végére érsz.

Ajánló

A tananyag általános iskola 7-8. osztálya számára készült, feltételezi a Windows operációs rendszer és egy böngészı program minimális ismeretét.

Az általános iskolás gyerekek informatikai tudásszintje igen eltérı: a gyerekek egy része az alapismeretek oktatását igényli, mások pedig már saját weblappal rendelkeznek az interneten. Az iskolák többségében a számítógép-használat alapismereteinek elsajátításával foglalkoznak. Vannak gyerekek akik ezzel a tudásanyaggal már rendelkeznek, így ıket már nem köti le a hagyományos számítástechnika óra. Az ilyen gyerekek önálló foglalkoztatásához, szakköri munkához, otthoni önképzéshez ajánlom a tananyagot.

1. Mire való a Frontpage? 2. A program munkafelülete 3. Site létrehozása 4. Oldalak létrehozása, mentése, megtekintése 5. Oldaljellemzık beállítása 6. Szöveg bevitele, formázása 7. Táblázatok készítése 8. Képek használata 9. Hivatkozások 10. Utolsó simítások 11. A teljes megoldott mintafeladat: Osztálykirándulás 2004

Ez a tananyag is a Microsoft Frontpage 2002-vel készült. A képek Corel PHOTO-PAINT 11-gyel lettek szerkesztve. A tananyagban található fotók saját készítéső digitális felvételek.

Mire való a Frontpage?

A Microsoft Frontpage egy weblapszerkesztı program, használható internetes oldalaink tervezésére, elkészítésére, tesztelésre. Hasznos segédeszköz, melyben amit szerkesztés közben látunk az jelenik majd meg böngészı programok segítségével is. Használatának elsajátítása

azok számára kifejezetten egyszerő, akik jártasak az Office irodai programcsomag kezelésében.

A program munkafelülete

A program elindítása után a következı kép fogad bennünket:

1. címsor: tartalmazza az aktuális dokumentum elérési útját

2. menüsor

3. eszköztárak: szokásos és formázás eszköztár

4. dokumentumablak-fül: segítségével lehet a megnyitott dokumentumok között váltani

5. dokumentumablak: itt folyik a tényleges munka

6. nézetváltás gombjai:

: szinte úgy láthatjuk elkészített

anyagunkat, ahogyan böngészı programokkal fogjuk

: html kódban látjuk elkészített dokumentumunkat

: (már nincs szinte) ugyanúgy láthatjuk elkészített anyagunkat, ahogy a böngészıkben fogjuk.

7. állapotsor: néhány értékes információval, pl.: oldalunk idegen számítógépen való megjelenésének ideje

8. Nézetsáv: lásd késıbb az utolsó simítások oldalon

Ismerkedjünk meg a szokásos eszköztárral: itt összefoglalva találod meg a szokásos eszköztár eszközeinek használatát, de egyes eszközökre késıbb részletesebben visszatérünk.

Eszköz jele

Segítségével végrehajtható formázás Helye a menüben

Segítségével új weblapot hozhatunk létre. Fájl menü/ Létrehozás/ Lap vagy webhely/ üres lap

Meglévı weblap megnyitása Fájl menü/ Megnyitás

Weblap mentése

Fájl menü/ Mentés vagy Mentés másként

A Sajátgépen vagy Hálózati helyeken kereshetünk adott típusú és tartalmú fájlokat - a Start menü/ Kereséshez hasonló funkció

- (Nem a Szerkesztés menü/ Keresés megfelelıje)

Csak ha létezik tárhelyünk az interneten: frissíthetjük vele a tárhelyen lévı adatokat

Fájl menü/ Webhely közzététele

Amennyiben weblap nézetben vagyunk, láthatóvá tehetjük webhelyünk mappáinak listáját vagy a navigációs ablakot

Nézet menü/ Mappalista vagy Navigálás

Segítségével nyomtatóra küldhetjük weblapjainkat

Fájl menü/ Nyomtatás

Segítségével egy böngészıvel (pl. Internet Explorerrel) megnézhetjük weblapunkat

Fájl menü/ Megtekintés böngészıvel

Helyesírás-ellenırzést futtathatunk végig a bevitt szövegen

Eszközök/ Helyesírás

Kivágás: a kijelölt szöveget, képet vagy más elemet az ollóra kattintva a vágólapon tudjuk elhelyezni, úgy , hogy eredeti helyérıl a kijelölt rész törlıdik.

Másolás: a kijelölt szöveget, képet vagy más elemet a másolás ikonra kattintva a vágólapon helyezzük el, úgy, hogy a kijelölt rész az eredeti helyén is megmarad.

Beillesztés: a vágólapon lévı szöveget, képet, stb. a kurzor helyére beilleszti.

Szerkesztés menü/ Kivágás, Másolás, Beillesztés

A kijelölt szövegrész minden karakter és bekezdés formátumát átsöpörhetjük egy másik szövegrészre

-

A visszafelé mutató nyíllal a legutóbbi mentés óta végrehajtott mőveleteket vonhatjuk vissza idırendben, az elıre mutató nyíllal a már visszavont mőveleteket állíthatjuk vissza

Szerkesztés menü/ Visszavonás, Mégis

Webösszetevıket szúrhatunk be vele: pl. élıgombot, fényújságot, találatszámlálót...

Beszúrás menü/ Webösszetevı

Táblázatot szúrhatunk be vele a kurzor helyére Táblázat menü/ Beszúrás/ Táblázat

Képet szúrhatunk be vele a kurzor helyére Beszúrás menü/ Kép

A Rajzolás eszköztár a képernyı alján ki- és bekapcsolható vele

Nézet menü/ Eszköztárak/ Rajzolás

Segítségével a kijelölt szövegrész hivatkozássá alakítható

Beszúrás menü/ Hiperhivatkozás

A lap frissíthetı ill. betöltése leállítható vele Nézet menü/ Frissítés

A böngészıben nem megjelenı karaktereket láthatóvá teszi: enter, shift+enter

-

A Frontpage súgója indítható vele: itt kész tankönyvet találunk a Frontpage használatáról magyar nyelven

Súgó menü/ Microsoft Frontpage súgója

Mi az a Site (webhely)?

Site-nak egy teljes, megszerkesztett, hivatkozásokkal ellátott anyag tekinthetı, amely tartalmazza az összes hozzátartozó fájlt (szövegeket, képeket, multimédia elemeket, egyéb objektumokat). Tehát a site nem a kezdıoldalát jelenti egy internetes anyagnak, nem egyenlı egy weboldallal, hanem azok összességét, kapcsolatait jelenti. A site kiindulópontja egyúttal egy mappa, amely tartalmazza az összes fájlt.

Ha weboldal készítésébe kezdünk a következı néhány dologra ügyeljünk:

1. Hozzunk létre egy mappát, melybe minden fájlt másoljunk bele, amit a szerkesztés folyamán használni fogunk. A benne lévı fájlokat rendezhetjük almappákba a könnyebb áttekintés érdekében

2. A fájlok és mappák neve ne tartalmazzon ékezetet, szóközt, speciális karaktereket. Célszerő a neveket csupa kicsi betővel írni, mert egyes operációs rendszerek (a Windows-zal ellentétben) különbséget tesznek a kis és nagy betők között. Ha mégis használunk nagy betőket, jól jegyezzük meg, hogy hol és következetesen mindig úgy hivatkozzunk a rájuk.

3. Az elsı fájlt, a nyitóoldalt index.htm vagy index.html néven hozzuk létre. A böngészı programok ugyanis ha az URL-cím nem tartalmaz fájlnevet az index.htm fájlt keresik és töltik le.

Mintafeladat

Készítsünk egy egyszerő weboldalt, mellyel a legutóbbi osztálykirándulásunkat szeretnénk megmutatni.

1. Hozzunk létre egy osztalykirandulas nevő mappát, a továbbiakban mindent ebbe a mappába fogunk másolni, menteni! Ezen belıl létrehozhatunk egy kepek mappát, melybe a kirándulás képeit fogjuk másolni vagy menteni!

2. A Frontpage-ben gördítsük le Fájl menüt, kattintsunk Létrehozás/Lap vagy webhely/Üres webhelyre-re, tallózzuk be az elıbb létrehozott osztalykirandulas mappát!

Keressünk fényképeket a kirándulással kapcsolatban. Legjobb ha van néhány digitális felvételünk. Ha csak papíralapú képeink vannak válasszunk néhányat és szkenneljük be ıket. Ha papírképeink sincsenek akkor keressünk néhány képet az interneten arról a tájról, azokról a városokról, ahol jártunk. Másoljuk a képeket az osztalykirandulas\kepek mappába. További információ a képek kezelésével kapcsolatban a Képek használata oldalon található.

Oldalak létrehozása, mentése, megtekintése

A Microsoft Frontpage elindításakor elıttünk van egy új_lap_1.htm fájl, mellyel azonnal megkezdhetjük a munkát. Másképpen:

1. A Fájl menü Létrehozás/Lap vagy webhely/Üres weblap-ra kattintva

2. A Szokásos eszköztár Új lap létrehozása ikonjára kattintva

Az oldalt menteni a Fájl menü Mentés vagy Mentés másként parancsával vagy a Szokásos

eszköztár Mentés ikonjával tudjuk Vigyázzunk a fájl nevére: ékezetet, szóközt, speciális karaktereket nem tartalmazhat.

A weboldalt megtekinteni a a Fájl menü Megtekintés böngészıvel vagy a Szokásos

eszköztár Megtekintés böngészıvel gombjára kattintva tudjuk.

Mintafeladat

1. Nyissunk meg egy új üres weboldalt ( Új lap létrehozása ikonra kattintva), mentsük el máris az osztálykirándulás mappába index.htm néven.

2. Alkossunk valami látványosat is, gépeljük be a következıt: Osztáykirándulás. 3. Formázzuk a címet pl. félkövérre, növeljük a betőméretet, igazítsuk középre, stb...

4. A Mentés ikonra kattintva mentsük el. 5. Ehhez hasonlóan hozzunk létre az öt napos kirándulás minden napjához egy új

weblapot rendre 1_nap.htm, 2_nap.htm,... 5_nap.htm néven. Mindet mentsük el az osztálykirándulás mappába. Minden oldalnak adjunk címet, majd formázzuk meg, így amikor megtekintjük böngészıvel, látványosabbá tehetjük az eredményt. A kész weblapok között azok tetején található szürke fülekkel válthatunk.

6. Nézzük meg böngészıvel eddigi munkánkat: kattintsunk a Megtekintés böngészıvel ikonra.

Az oldal tulajdonságainak beállítása

A Formátum/Háttér menüpontra kattintva adhatjuk meg az oldal tulajdonságait:

Általános fül: itt megadhatjuk oldalunk címét, mely a böngészı programok címsorában fog megjelenni.

Háttér fül: A háttérkép jelölınégyzet kipipálása után betallózható egy háttérkép Beállítható az oldal háttérszíne, bető színe és a hivatkozások betőszíne.

Mintafeladat

1. A Formátum/háttér menüpontra kattintva az Általános fül alatt állítsuk be oldalunk címét: Osztálykirándulás!

2. A Háttér fül alatt állítsuk be az oldal háttérszínét a betők és hivatkozások színét! 3. Kattintsunk a megtekintés böngészıvel ikonra, hogy lássuk munkánk eredményét!

Szöveg formázása

Elıször ismerkedjünk meg a Formázás eszköztárral:

A Formázás eszköztárban található eszközök részletesen:

Eszköz jele Segítségével végrehajtható formázás Helye a menüben

Legördülı menübıl választhatjuk ki a használni kívánt betőtípust. Nem érdemes különleges betőtípusokat használni, mert nem biztos, hogy az amit mi használunk, az más gépeken is telepítve van. Ebben az esetben nem az általunk használt betőtípus jelenik meg, hanem a böngészı helyettesíti egy másikkal.

Formátum menü/ Betőtípus/ Betőtípus

Legördülı menübıl választhatjuk ki a használni kívánt betőméretet..

Formátum menü/ Betőtípus/ Betőméret

A betőket félkövérré tehetjük (F), dıltté alakíthatjuk (D), aláhúzhatjuk (A).

Formátum menü/ Betőtípus/ Betőstílus

A bekezdéseket balra, középre, jobbra igazíthatjuk és sorkizárttá tehetjük.

Formátum menü/ Bekezdés/ Igazítás

Az eddigi mérethez képest növelhetjük, csökkenthetjük a betők méretét.

-

A kijelölt bekezdéseket felsorolássá, számozott listává alakíthatjuk.

Formátum menü/ Felsorolás és számozás

A kijelölt bekezdések behúzását csökkenthetjük, növelhetjük.

Formátum menü/ Bekezdés/ Behúzás

A kijelölt bekezdéseket, táblázatcellákat szegélyezhetjük.

Formátum menü/ Szegély és mintázat

A kijelölt szavak háttérszínét változtathatjuk meg vele.

-

A kijelölt karakterek színét változtathatjuk meg.

Formátum menü/ Betőtípus/ Szín

Mintafeladat

1. Nyissuk meg az egyes napokhoz tartozó weblapokat és gépeljük be a naphoz tartozó eseményeket, élményeket. Pl.: 2_nap.htm-et nyissuk meg és gépeljük be a következı szöveget: "Mire a vidraparkból visszaértünk szállásunkra, órási felhıszakadás nyomait láttuk, az utakon vastagon állt a sár, a talán 10 cm mély patak 2 m magasan hömpölyöghetett, érkezésünk elıtt.

Délutáni programunk a mintagazdaság megtekintése volt. Az odavezetı utat is beterítette sárral a lezúduló víz, ezen kellett átküzdeni magunkat. A mintagazdaságban a hatalmas sáron kívül rengeteg házi állat, játszótér, hancúrpajta... és még sok jó játék fogadott minket. Néhány kép a délutáni ırjöngésrıl:"

2. A bevitt szöveget formázzuk meg a fenti táblázatban található eszközök segítségével! A mentés ikonra kattintva mentsük el munkánkat!

3. Formázzuk meg a begépelt szöveget a fenti eszközök segítségével!

Táblázatok használata

Mikor célszerő táblázatot használni?

• több hasábra szeretném tördelni a szöveget, ilyenkor a táblázat oszlopai adják a hasábokat

• több képet szeretnék egy oldalra magyarázó szöveggel együtt elhelyezni...

Táblázat beszúrását többféleképpen is kezdeményezhetjük:

1. Táblázat menü/ Beszúrás/ Táblázat,

2. Szokásos eszköztár ikonjával.

Az így felbukó (legördülı) ablakban adjuk meg a táblázat sorainak, oszlopainak számát.

A táblázat egyéb tulajdonságait beszúrásakor vagy késıbb is megadhatjuk:

1. jobb egérgombbal a táblázatra kattintva a táblázat tulajdonságainál, 2. a táblázat menü/ táblázat tulajdonságainál

A táblázatot méretezhetjük abszolút értékben: ekkor képpontokban mérve adjuk meg a méretét. Méretezhetjük relatív értékkel, ekkor a képernyı százalékában adjuk meg méretét. Jól végig kell gondolni elıre, melyik a kedvezıbb számunkra különbözı képernyı felbontások esetén.

Képek beszúrása, formázása

Képek beszúrását többféleképpen is kezdeményezhetjük:

1. Beszúrás menü/ Kép/ Fájlból,

2. Szokásos eszköztár ikonjával.

Az így felbukó ablakban tallózzuk be a beszúrni kívánt képet.

A kép kijelölhetı egy kattintással. Ebben a helyzetben a kép egérrel átméretezhetı, a beszúrás helye változtatható.

Kettıt a képre kattintva a kép tulajdonságait tudjuk beállítani

szöveg körbefuttatásának stílusa, igazítás jobbra, balra, középre.., a képnek a pontos képpontokban vagy a képernyı százalékában mért mérete, a kép betöltıdése elıtt megjelenı szöveg, kisebb felbontású kép, a képet hivatkozássá alakíthatjuk.

A képet egér segítségével nem lehet a képernyı bármely pontjára letenni. Ha mégis pontosan egy adott helyre akarjuk tenni, a következı egyszerő módszerek adottak:

1. A bekezdés igazítás ikonjaival jobbra, balra, középre igazítható a bekezdésben a kép. Ehhez célszerő a képet egy új üres bekezdésbe beszúrni.

2. Táblázat segítségével a sorok és oszlopok méreteinek beállításával a kép a képernyı bármely pontjára igazítható. Ehhez a táblázat egy cellájába kell a képet beszúrni.

3. Kettıt a képre kattintva a kép tulajdonságai ablakhoz jutunk. Itt a megjelenés fül alatt a körbefuttatás stílusának megadásával a kép szöveghez viszonyított helyét tudjuk megadni

Mintafeladat

A képek használatával sokkal látványosabbá tehetjük eddigi munkánkat.

Fontos! Mielıtt hozzáfogunk a képekkel való munkához hozzunk létre az osztalykirandulas mappán belül egy kepek mappát, másoljuk ide az összes használni kívánt képet!

Szúrjunk be egy képet az 1_nap.htm fájlba:

Tegyük a kurzort a szöveg végére, egy enterrel kezdjünk új bekezdést, és a ikonra kattintva tallózzuk be a kívánt képet! A képet igazítsuk középre!

Ha több képet is szeretnénk egy oldalra beszúrni, a képekhez szöveget írni, mint a 2_nap.htm-ben akkor célszerő táblázatot használni a képek és a szöveg rendezéséhez. A korábban begépelt szöveg alá szúrjunk be egy 6*2-es táblázatot. Tegyük a kurzort az elsı

cellába és a ikonra kattintva tallózzuk be a használni kívánt képet! Tegyük ugyanezt a többi cellával is, valamint gépeljük be a képek alá a hozzájuk tartozó szöveget.

Hivatkozások használata

Horgony: ugyanazon oldal adott pontjára ugorhatunk vele. Ehhez elıször könyvjelzıket kell megadnunk: jelöljük ki a az oldal egy fontos szavát, a Beszúrás menü/ Könyvjelzı/ OK -ra kattintva kész az elsı könyvjelzı. Ha a dokumentumnak egy korábbi pontjáról ide akarunk ugrani a következı a teendı:

A dokumentum elején jelöljünk ki egy szót, a ikonra kattintva, klikkeljünk a Dokumentum adott pontja gombra és válasszuk a korábban megadott könyvjelzıt.

Belsı hivatkozás: segítségével tudunk a webhely másik fájljára átlépni.

Jelöljük ki a hivatkozássá alakítandó szövegrészt, képet, kattintsunk a ikonra, válasszuk a létezı fájl vagy weblap nyomógombot, tallózzuk be a kívánt fájlt.

Külsı hivatkozás: segítségével az interneten elérhetı oldalakra tudunk hivatkozni.

Jelöljük ki a hivatkozássá alakítandó szövegrészt, képet, kattintsunk a ikonra, válasszuk a Létezı fájl vagy weblap nyomógombot, gépeljük be a létezı weblap pontos URL címét (http://...) formában.

E-mail hivatkozás: rá kattintva az aktuális levelezı program új üzenet írására alkalmas ablaka jelenik meg kitöltött címzett sorral.

Jelöljük ki a hivatkozássá alakítandó szövegrészt, képet, kattintsunk a ikonra, válasszuk az Elektronikus levélcím nyomógombot, gépeljük be az e-mail címet a levél tárgyát.

Mintafeladat

Az 1_nap.htm,... 5_nap.htm végére gépeljük be a Vissza az osztálykirándulás kezdılapjára

szöveget. Jelöljük ki, kattintsunk a ikonra, majd a Létezı fájl vagy weblap nyomógombra és tallózzuk be az index.htm fájlt!

Az 5_nap.htm végére gépeljük be a "Ha ezek után kíváncsi vagy merre voltunk táborozni

kattints ide!" szöveget! Jelöld ki a "kattints ide" szavakat, klikkelj a ikonra, válaszd a Létezı fájl vagy weblap nyomógombot, és gépeld be a következı címet: http://kalandpark.hu.

Utolsó simítások

A Frontpage ablak bal szélén található nézetsáv segítségével végezzük el az utolsó simításokat fájljainkon.(Ha a nézetsáv nincs megnyitva az ablak bal szélén, akkor a Nézet menü / Nézetsáv segítségével kinyithatjuk.

Lap: A legfelsı Lap ikonra kattintva a megnyitott htm fájljainkat látjuk. Ezt a nézetet használtuk eddigi munkánk során.

Mappák: A második mappák ikonnal a webhely (site) alkönyvtárait és fájljait és ezek adatait láthatjuk.

Jelentések:

Csatolatlan fájlok: Ha készen vagyunk a webhely szerkesztésével, akkor azok a fájlok melyek nincsenek egyetlen oldalhoz sem csatolva valószínőleg feleslegesek és törölhetık.

Lassú fájlok: Abban az esetben ha a létrehozott webhelyünket az interneten is elérhetıvé szeretnénk tenni, érdemes a lassú fájlok méretét csökkenteni. Általában a lassúság oka a nagy mérető kép. Képeink méretét, felbontását csökkenthetjük grafikus programokkal (pl.: Corel PhotoPaint). Ha ragaszkodunk a nagy felbontású képhez, akkor két lehetséges módszer: Egyik: oldalunk interneten való letöltésekor elıször egy kisebb felbontású kép töltıdik le majd ezt követi automatikusan a nagy felbontású. Másik: csak egy kis felbontású kép töltıdik le automatikusan, a másik csak a képre kattintva. Ehhez a képet hivatkozássá kell alakítanunk, mely a nagyobb felbontású képre mutat.

Hivatkozások: Megnézhetjük webhelyünk hivatkozásait, a Frontpage ellenırzi is ezek helyességét, aktív internet elérés esetén a külsı hivatkozásokat is.

Hivatkozások: Webhelyünk oldalai között létrehozott hivatkozásokat, mint térképet nézhetjük.