frontpage jegyzet

FrontPage segédlet Váraljai Mariann

1.

Előszó

(a jegyzet használatához) Ez a FrontPage segédlet abból a célból készült, hogy azok a felhasználók is tudjanak saját tetszetős küllemű honlapot készíteni, akik nem jártasak a különböző (web)programozási nyelvekben. A következőkben megismerkedünk a webhely és különböző típusú weblapok létrehozásával, majd az alapvető formázási lehetőségekkel, különböző effektusok, sablonok használatával, táblázatok és űrlapok készítésének lehetőségeivel. Egy-két gondolat a jegyzet használatához: A jegyzet 3 részből épül fel.

• Az első részben áttekintjük a FrontPage program működését, megjelenését • A második részben alkalmazott elemek és formázások: karakterformázás, bekezdés-

formázás, felsorolás, számozás, többszintű felsorolás, dinamikus HTML effektusok, kép beszúrás, hivatkozáskészítés, időbélyegző, vízszintes vonal, könyvjelző, fényújság, beágyazott keret, áttűnés lapváltáskor táblázatok beszúrása. Egy 5 weblapból álló webhelyet hozunk létre. • A webhely elérési útja: C:\Munka\FrontPage • A weblapok:

• index.html, • internet_altalanos.html, • internet_tort.html, • internet_szolg.html, • internet.hasznos.html

• A munka során felhasznált fájlok elérési útja: O:\InfInt\In-001\Honlapelemek\elso

• A felhasznált fájlok: back3.jpg, back6.jpg, földgömb1.gif, logo-Internet.gif, Internet_tort.txt, Internet_szolg.txt, Internet_hasznos.doc

• A harmadik részben alkalmazott elemek és formázások: keretek, élőgomb és űrlapok készítése, valamint az első részben már megismertek önálló használata. Egy újabb webhelyen egy kereteket tartalmazó weblapot hozunk létre, melynek főlap részében 4 további weblap jelenik meg: • A webhely elérési útja: C:\Munka\ForntP2 • A weblapok:

• index.html • elso.html

• tartalom.html • szalagcim.html • folap.html, generaciok.html, hardver.html, szoftver.html, urlap.html

• A munka során felhasznált fájlok elérési útja: O:\InfInt\In-001\Honlapelemek\masodik

• A felhasznált fájlok: back1.jpg, Santa Fe vakolat.gif, email.gif, kep1.gif, Plotter.jpg, discs.png, monitor.jpg, hardver.txt, szoftver.txt, szg_felepites.txt, szg_generaciok.doc


2.

FrontPage - I. rész

1.1. Bevezetés A webszerkesztő programokat 2 nagy csoportra szokták bontani: a WYSIWYG típusúakra, illetve a forráskódszerkesztő (texteditor) programokra. A forráskódszerkesztő programok elsősorban azoknak ajánlott, akik szeretnék megtanulni és használni a HTML, PHP, stb... programozási nyelveket. Ilyen típusú programok: EditPlus, UltraEdit-32, PHPEdit, stb… A WYSIWYG (What You See Is What You Get) programok használata azoknak javasolt, akik nem szeretnének különösebben belemélyedni a HTML szerkesztés titkaiba. Az ilyen típusú programmal ugyanaz a felület szerkeszthető, ami a böngészőben is látszik. Nagyon kényelmes velük dolgozni, gyorsan halad a "munka", viszont használatuk közben a forráskód manuális szerkesztése háttérbe szorul- így magába a HTML nyelv rejtelmeibe nincs is nagyon miért belemélyedni (ennek ellenére előfordul, hogy szükséges „utánaigazítani” a forráskódokat.) Ilyen típusú programok: Macromedia Dreamweaver, Microsoft FrontPage, Adobe Golive, Namo Webeditor, stb...

Microsoft FrontPage A program az MS Office programcsomag része, magyar nyelvű változata is van, felülete a már megszokott Office kezelőfelület, tehát aki ismeri a Word-t annak nem okoz nehézséget a ForntPage kezelése sem.

1.2. Weblapok tervezése és készítése A honlapok (homepage, weblap, stb…) a web alapdokumentumai, HTML (Hypertext Markup Language) nyelven készülnek. Lehetnek egy webhely részei, de állhatnak önállóan is. A Microsoft FrontPage számos szolgáltatásának előnyeit igazán akkor lehet igazán kihasználni, ha webhelyen dolgozunk. A FrontPage számos weblapkészítőt tartalmaz annak érdekében, hogy segítsen a tetszetős kinézetű, gondosan megtervezett kialakítású, akár különböző elrendezésű és funkciójú weblapok elkészítésében. Ezek létrehozása történhet sablonok segítségével, vagy lehetnek saját tervezésűek. A weblapon különböző weblapelemeket lehet elhelyezni, (pl.: szöveg, kép, szalagcím, táblázat, űrlap, hivatkozás, reklámszalag, stb…), vagy akár változó tartalmú elemeket is (pl.: fényújság, találatszámláló, időbélyegző, stb…). Lehetőség van a felvett elemek formázására, animálására, átmenetek beállítására, háttérszínek, háttérképek vagy háttérhangok megadására. A szöveg és a képek elhelyezéséhez használhatunk kereteket, táblázatokat vagy abszolút pozícionálást, valamint alkalmazhatunk weblapsablonokat is, amik olyan előre megtervezett honlapokkal dolgoznak, amelyek különböző lapbeállításokat, formázásokat és elemeket tartalmaznak. A kezdőlapok neve rögzített. A FrontPage automatikusan a két fenntartott név valamelyikét adja a kezdőlapoknak, ezt csak akkor változtassuk meg, ha kimondottan szükséges. Ha számítógépen helyi webkiszolgáló-szoftver, például Internet Information Services (IIS) fut, a kezdőlap a Default.htm nevet kapja. Ha nincs telepítve helyi webkiszolgáló, vagy ha a lapot nem webkiszolgálón levő webhelyre, hanem a helyi merevlemezre mentjük, a kezdőlap neve Index.htm lesz.


3.

Előkészületek Mielőtt elindítanánk a FrontPage programot hozzuk létre a C:\Munka nevű könyvtárat (ha még nem létezik), majd azon belül a FrontPage nevű alkönyvtárat, majd másoljuk ide az O:\InfInt\In-001\Honlapelemek\elso mappa minden fájlját! Minden esetben érdemes a képeket ugyanabban a könyvtárban elhelyezni a munka előtt, vagy akár menet közben is, mint amelyikben a készülő honlapunk weblapjait és egyéb -a készítéshez szükséges- fájlokat tároljuk!!! Jelen esetben ez a C:/Munka/FrontPage könyvtár.

1.3. A FrontPage indítása START/Programok/Microsoft Office/Microsoft FrontPage A FrontPage első indításakor egy üres lap jelenik meg, mely szerkesztésre kész. Amennyiben korábban már történt webhely-szerkesztés a Front Page-vel, úgy a legutóbb szerkesztett webhely automatikusan megnyílik. Teljesen új webhely készítésekor érdemes ezt bezárni: Fájl/Webhely bezárása.

1.4. Webhely létrehozása A webhely egymáshoz kapcsolódó weblapok csoportja, melyek egy HTTP-kiszolgálón találhatók a weben. A webhelyek lapjai egy vagy több témakörhöz kapcsolódnak, és hivatkozásokkal vannak összekötve. A legtöbb webhely kiindulópontja egy honlap. Minden webhely egy honlapból és hivatkozások révén a honlaphoz kapcsolódó egyéb fájlokból áll. A honlap nem más, mint a webhely fő lapja. Általában más, a helyen belüli és kívüli lapokra mutató hivatkozásokat tartalmaz. Egy webhely több honlapot is tartalmazhat. A hivatkozás lehet grafika, vagy szöveg (színes, aláhúzott), melyre kattintva eljutunk egy fájlra, vagy annak egy adott pontjára, esetleg a weben található más HTML-lapra. A hivatkozások segítségével hírcsoportokat, Gopher, Telnet valamint FTP-helyeket is elérhetünk. A webhely lehet a helyi számítógépen tárolt, vagy valamely webkiszolgálón (pl.: Microsoft Internet Information Server = MIIS) tárolt webhely. Fájl/Létrehozás/Lap vagy webhely → a jobb oldalon található ablakból kattintsunk az Új címszó alatt található Üres webhely feliratra:

1. ábra: Üres webhely létrehozása


4.

2. ábra: Az új webhely elérési útjának megadása

Adjuk meg az új webhely elérési útját az alábbi módon: C:\Munka\FrontPage. (A Tallózás… gombra kattintva lehetőségünk van az útvonal megkeresésére, ha véletlenül ily rövid idő alatt elfelejtettük volna…). Végezetül kattintsunk az OK gombra. Ha minden sikerült, akkor a címsor bal szélén a következőt kell látnunk:

3. ábra: A címsorban megjelenő szöveg

1.5. A munkaterületet magába foglaló képernyő áttekintése

4. ábra: A Front Page képernyőterve

1. 2.

3.10.

9. 4.

8. 5.

7. 6.


5.

1. Címsor Az ablak tetején található kék színű sáv. Jobb szélén az aktuális

program neve (FrontPage) és a megnyitott webhely elérési útja található, bal szélen a már jól ismert tálcára, teljes méret és bezár gombok

2. Menüsor Közvetlenül a címsor alatt található 10 menüponttal, melyekre kattintva további almenüpontokat tudunk elérni a legördülő menükből. (Mivel az összes almenüpont nem jelenik meg, hanem csak a legutóbb használtak, ezért kattintsunk a legördülő menü alján található lefele mutató nyílra, hogy az összes láthatóvá váljon.)

3. Eszközsor Közvetlenül a menüsor alatt található. A gyakrabban használatos menüpontok ikonjai találhatók itt, melyek elősegíti azok gyorsabb elérését. A felső ikonsor a Szokásos, az alatta található ikonsor pedig a Formázás műveleteit tartalmazza. (Alapértelmezetten a Szokásos és a Formázás ikonsora jelenik meg, de a munkaterület testreszabható: a Nézet/Eszköztárak segítségével további műveletek ikonjai is megjeleníthetők)

4. Munkaablak Az ablak jobb oldalán elhelyezkedő ablaktábla, mely segít az aktuálisan használt parancsok elérésében a munka megszakítása nélkül.

5. Görgető sávok

A munkafelület jobb szélén és az alján helyezkednek el, segítenek abban, hogy a lap éppen nem látható részeit is megjeleníthessük.

6. Előrehaladás Az aktuális művelet állapotát mutatja 7. Állapotsor Az aktuális feladat állapotát írja le. 8. A Lap nézet

ablaktáblái Lehetőség van arra, hogy a munkaterületet többféle nézetben is megtekinthessük a szerkesztés ideje alatt: Normál, HTML és Minta

Normál az aktuális lap szerkesztése HTML az aktuális lap megjelenítése HTML kódokkal Minta A szerkesztés alatt álló lap megtekintése (itt nincs

lehetőség a módosításra) 9. Weblap

fül(ek) Segítségükkel lehet az éppen szerkesztett munkaterületek között lépegetni.

10. Nézetek sáv Az ablak bal szélén helyezkedik el, a Nézet menüpontban található nézetek ikonjait tartalmazza, ezekre kattintva különbözőképpen jeleníthetőek meg az adott weblap/webhely adatai.

Lap az aktuális oldal szerkesztése, formázása Mappák az aktuális webhely mappáinak és fájljainak

megjelenítése Jelentések az aktuális webhely oldalairól szolgáltat információkat Navigálás Az aktuális webhely oldalainak szerkezetét mutatja

meg hierarchikus elrendezésben Hivatkozások Az egyes oldalak közötti hivatkozásokat lehet

áttekinteni Feladatok A szerkesztés során elvégzendő feladatokról

(fontossági sorrendben) ad információt


6.

6. ábra: A Front Page Jelentések nézetben

1.6. A nézetekről bővebben

Lap nézet

Lehetőség van arra, hogy a munkaterületet többféle nézetben is megtekinthessük a szerkesztés ideje alatt: Normál, HTML és Minta. Normál nézetben majdnem pontosan úgy látjuk a szerkesztés alatt álló weblapot, mint azt majd a böngészőben is látni fogjuk. HTML nézetben megtekinthetjük az aktuális lap HTML kódjait. Minta nézetben pedig megtekinthetjük, hogy az éppen szerkesztés alatt álló hogyan fog kinézni (itt nincs lehetőség a módosításra). A munkafelület áttekintése cím alatti kép Lap nézetben látszik.

Mappák nézet

5. ábra: A Front Page Mappa nézete

A Mappák nézetben a megnyitott, szerkesztés alatt álló webhely mappáit és fájljait tekinthetjük át. A webhely állományaival kapcsolatos fájlműveleteket (áthelyezés, átnevezés, törlés) célszerű ebben a nézetben végezni, mivel a program alapvetően olyan, hogy nyomon követi a fájlra mutató hivatkozásokat, figyelmeztet a változásokra és felkínálja a hivatkozások javítását. Az állományokon végzendő műveleteket a gyorsmenü segítségével is végrehajthatjuk, pl. átnevezés, törlés, stb…

Jelentések nézet

A Jelentés nézet a szerkesztés alatt álló webhely oldalairól szolgáltat információkat. (pl.: állományok, képek, régi állományok, félkész oldalak, linkek, hyperlinkek stb… számát) Kettőt kattintva a jelentés bármely sorára bővebb információhoz juthatunk. Ugyanezt megtehetjük a Nézet/Jelentések menüpontok segítségével.

Navigálás nézet

A Navigálás nézetben a webhely szerkezetét, az oldalak közötti hierarchiát határozhatjuk meg Általában létezik egy szülőlap, ami a webalpon belül egy olyan lap, melyhez a navigációs


7.

struktúra segítségével további lapok (gyermeklapok) kapcsolódhatnak. Kinyitásához kattintson a plusz (+) jelre, becsukásához a mínusz (-) jelre. A nyitóoldalt (Home Page-t) egy kis házikó jelzi. A teljes böngészőfa kinyitásához és a webhelyen lévő összes weblap megtekintéséhez kattintson jobb gombbal a háttérre, majd a helyi menüben kattintson a Mindent kibont parancsra. (Alapértelmezés szerint az összes weblap ki van nyitva.)

Hivatkozások nézet

A Hivatkozások nézetben lehetőség van arra, hogy az oldalak közti hivatkozásokat megjeleníttessük és ezáltal áttekinthessük. Információt kaphatunk az egyes oldalak közti linkek állapotáról is (pl. ebben a nézetben megjelenik az esetlegesen a hibás kapcsolat). • A weblapon lévő és képekre mutató összes hivatkozás megjelenítéséhez kattintson jobb

gombbal a háttérre, majd a helyi menüben kattintson a Képekre mutató hivatkozások parancsra.

• Ha a weblapról több hivatkozás is mutat egy másik fájlra, és azt szeretné, hogy azok külön-külön is láthatóak legyenek, kattintson jobb gombbal a háttérre, majd a helyi menüben az Ismétlődő hivatkozások parancsra.

Feladatok nézet

Feladatok nézet az elvégzendő szerkesztési feladatokról szolgáltat információt, meghatározva azok fontossági sorrendjét. Elemei:

Állapot a feladat állapot (pl.:nincs elkezdve, szerkesztés alatt áll, befejezett) Feladat a feladat megnevezése Felelős a feladathoz rendelt személy Prioritás A feladatok elvégzésének fontossági sorrendje (high, medium, low) Társított fájlok az oldal megnevezése Módosítás a módosítás dátuma Leírás a feladat rövid leírása

A még szerkesztés alatt álló, vagyis nem befejezett feladatok paraméterei a helyi menü Szerkesztés/Feladatok menüpont segítségével módosíthatók.


8.

FrontPage - II. rész

7. ábra: Az 1. weblap böngészőben megjelenő képe

2.1. Az 1. weblap (7. ábra) készítésének munkafolyamata

2.1.1. Szükséges fogalmak

Szöveg és bekezdés formázása A Microsoft FrontPage alkalmazásban ugyanúgy tudjuk formázni az egyes szövegrészeket, bekezdéseket, mint egy szövegszerkesztőben. Megadhatjuk többek közt azt, hogy milyen legyen a dokumentum formai kialakítása és szerkezeti felépítése. Ugyanazokat a módosításokat elvégezhetjük a betű típusát, méretét, színét és stílusát, valamint a betűközt és a szöveg függőleges igazítását illetően, mint például azt megtanultuk a Word szövegszerkesztő használatánál. Beállíthatjuk a sortávolságokat és behúzásokat, az igazítás irányát, listajeleket és számozást jelölhetünk ki a felsorolásokhoz. Az általános szabály ennél az alkalmazásnál is az, hogy a betűformázások (betűtípus, betűméret, betűszín, kiemelés és az effektusok) a kijelölt szövegre, a bekezdésformázások (listajelek, számozás, mintázat, szegélyek stb.) a teljes bekezdésre vonatkoznak.

Szöveg vagy kép kijelölése Bármekkora szöveg: Húzza az egeret a szöveg fölött

Egy szó: Kattintson duplán a szóra Egy szövegsor: Vigye az egérmutatót a szöveg bal szélére, amíg egy jobbra mutató nyíllá nem válik,

majd kattintson


9.

Egy bekezdés: Vigye az egérmutatót a bekezdés bal szélére, amíg egy jobbra mutató nyíllá nem válik, majd kattintson duplán. Másik megoldás: kattintson triplán bárhol a bekezdés területén

Több bekezdés: Vigye az egérmutatót a bekezdések bal szélére, amíg egy jobbra mutató nyíllá nem válik, majd kattintson duplán, és húzza az egeret lefelé vagy felfelé

Egy kép: Kattintson a képre

Karakterformázás: A karakterek formázási lehetőségei hasonlóak a Word-ben tanultakhoz. Történhet menüből, vagy az eszköztár segítségével.

Elérés menüből: Formázási lehetőség: Formátum/Betűtípus/Betűtípus fül betűtípus, betűstílus, betűméret, szín, effektusok Formátum/Betűtípus/Térköz és pozíció fül betűköz, mértéke, elhelyezés

8. ábra: Betűtípus ablak Betűtípus füle 9. ábra: Betűtípus ablak Térköz és pozíció füle Lehetőség van a szöveg gyors átméretezésére is. Ehhez először is ki kell jelölni a szöveget, majd a Formázó eszköztáron a Betűméret növelése vagy a Betűméret csökkentése gombra

kell kattintani. (Ha a Formázó eszköztár nem látható, akkor kattintsunk a Nézet/Eszköztárak/Formázás parancsra.) Ezzel a módszerrel beállítható legkisebb betűméret 8 pontos, a legnagyobb pedig 36 pontos.

Bekezdésformázás: A bekezdés két bekezdésjel (ENTER) által határolt szövegrész, ellenben azok a szövegsorok, amelyeket sortörések (SHIFT+ENTER) választanak el egymástól, ugyanabban a bekezdésben vannak! A bekezdésjel és a sortörés rejtett karakterek, szükség esetén a Minden látszik ikonra kattintva jeleníthetők meg a képernyőn. A bekezdések formázási lehetőségei hasonlóak a Word-ben tanultakhoz. Történhet menüből, vagy az eszköztár segítségével.

Elérés menüből: Formázási lehetőség: Formátum/Bekezdés/Behúzás és térköz fül igazítás, behúzás, térköz Formátum/Szegély és mintázat/Szegélyek fül beállítás, stílus, szín, szélesség, belső margók Formátum/Szegély és mintázat/Mintázat fül kitöltés, mintázat


10.

10. ábra 11. ábra

12. ábra: Bekezdésformázó műveletek


11.

2.1.3. Az 1. weblap elkészítésének menete (Lap nézetben): 1. Gépeljük be a főcímet: AZ INTERNETRŐL RÖVIDEN, majd jelöljük ki a tanult módon.

13. ábra: A szövegrész formázásának előkészítése

2. Formátum/Betűtípus/Betűtípus fül:

• A betű típusa: Arial Black, stílusa: félkövér és dőlt, mérete: 5(18pt) A betű színe marad fekete, az effektusok közül válasszuk ki az aláhúzottat, majd kattintsuk az Alkalmaz gombra.

3. Formátum/Betűtípus/Térköz és pozíció fül: • Betűköz: Ritkított, mértéke: 4pt, elhelyezés: alapvonalra

Ugyanezt a formázást meg tudjuk valósítani a Formázás eszköztárból is:

4. Formátum/Bekezdés/Bekezdés és térköz fül: • Igazítás: középre, térköz előtte: 10, utána: 10

A középre igazítást meg tudjuk valósítani a Formázás eszköztárból is: 5. Kiemelés: Formázás eszköztár: ikon segítségével sárga színűre. (Csak a kijelölt

karakterek háttérszínét változtatja meg!) 6. A lap tulajdonságainak megváltoztatása:

• Kattintsunk a jobb egérgombbal a lap valamely üres területére. • A felbukkanó gyorsmenüből válasszuk ki a Lap tulajdonságai menüpontot.

14. ábra: A weblap címsorában lévő szöveg beállítása


12.

Általános fül/Cím: Az Internetről, majd az OK gombra kattintsunk. Ezzel tulajdonképpen megadtuk, hogy a böngészőben megnézve ennek a lapnak mi a neve (mely a címsorban [kék színű sáv az ablak tetején] bal oldalon helyezkedik el).

15. ábra: A lap háttérszínének megadása

Háttér fül/Színek/Háttér: állítsuk be a megfelelő háttérszínt, majd az OK gombra kattintsunk. Amint látjuk, lapunk hátteréül nemcsak egyféle szín beállítására van lehetőségünk a Háttér fülben, hanem bármilyen kép háttérként történő beállítására is a Formázás címszó alatt található Háttérkép jelölőnégyzet kipipálásával. Az adott képet viszont akár vízjelként is alkalmazhatjuk.

7. Kép elhelyezése: Beszúrás/Kép/Fájlból…

16. ábra: A mentés helyének megadása

A Hely: -nél adjuk meg a kép elérési útvonalát, vagyis azt, hogy hol tároljuk. (Jelen esetben ez a C:\Munka\FrontPage könyvtár) Keressük meg a logo-Internet nevű képfájlt, egyszer kattintsunk rá, majd Beszúrás. A beszúrt képet igazítsuk középre a főcím alá: Formátum/Bekezdés/Bekezdés ablak/Behúzás és térköz fül → Igazítás: Középre. Ugyanezt megtehetjük az eszköztár

segítségével: 8. Időbélyegző felvétele a weblapra: Beszúrás/Dátum és idő Az időbélyegző a weblap

létrehozásának vagy legutóbbi módosításának idejét vagy dátumát jeleníti meg, esetleg mindkettőt. Számos dátum és idő formátum közül lehet választani.


13.

17. ábra: A 2. weblap böngészőben megjelenő képe

2.2. A 2. weblap (17. ábra) készítésének munkafolyamata


Hivatkozások Hálózati kislexikon szerint: LINK: A hipermédia, a hipertext fogalma. A hipermédiás dokumentumban szereplõ linkek más dokumentumokkal teremtenek kapcsolatot. Linkek találhatók a World Wide Web honlapjain is; ezeket a különféle böngészőprogramok általában aláhúzással, kiemeléssel jelölik… A linkek nem csak a szövegben, hanem más információs felületen (például kép) is előfordulhatnak. A hivatkozás olyan kapcsolat, mely egy weblapról egy másik weblapra mutat, rá kattintva lehet megjeleníteni a weblapot a böngészőben. A célpont nemcsak egy weblap lehet, hanem kép, multimédiás fájl, dokumentum, e-mail cím is akár. Készíthetünk létező vagy új fájlokra mutató hiperhivatkozást. A hivatkozás sokféleképpen megjelenhet a weblapon -küllemét tekintve- elkülönül a szövegrészektől, általában aláhúzott és a szövegtől eltérő színű. Az egérjelet fölé víve egy -a mutatóujját kinyújtó- kéz alakját veszi fel. A hiperhivatkozáshoz elemleírást is megadhatunk, mely akkor jelenik meg, amikor az egérmutatót a hiperhivatkozásra helyezzük. Kép esetén csak úgy állapítható meg, hogy hivatkozás-e, ha fölévisszük az egérjelet. Honlap készítésekor azt is be lehet állítani, hogy a böngészőben állapotának megfelelően különböző színekkel jelenjen meg az eddig még ki nem választott, a már felkeresett és az aktív hivatkozás. Alapállapotban a hivatkozás színe kék, a felkeresett


14.

hivatkozásé lila és az aktív hivatkozásé piros. (Az egyes lapok közti link (hiperhivatkozás) színének megváltoztatása: jobb egérgomb a lap üres területén → Lap tulajdonságai/Háttér fül

18. ábra: A lapon elhelyezett linkek színeinek beállítási lehetőségei

Helyi hivatkozásnak (linknek) nevezzük azokat a hivatkozásokat, amelyek egy másik oldalra mutatnak a lapon belül. Távoli hivatkozásnak (linkeknek) nevezzük azokat a hivatkozásokat, amelyek egy másik lapra mutatnak. Belső hivatkozások (linkek), amelyek az aktuális dokumentumon belülre mutatnak.

Elvégzendő feladatok: • Vízszintes vonal elhelyezése • Karakterformázás • Bekezdésformázás • Hivatkozás készítése

Előkészületek: Fájl / Létrehozás / Lap vagy webhely → a jobb oldalon található ablakból kattintsunk az Új címszó alatt található Üres lap feliratra:

19. ábra: Üres weblap készítése


15.

Az Index.html lap mellett megjelent egy új weblap, melynek kezdetben a FrontPage az új_lap_1.html nevet adta.

20. ábra. Az új weblap megjelenése Lap nézetben

Mielőtt bármi szerkesztési műveletet elkezdenénk, mentsük el: Fájl/Mentés. A mentés helye automatikusan a már eddig is használt C:/Munka/FrontPage, ahova a webhelyet a munka legelején létrehoztuk. Az új_lap_1.html lap fájlneve legyen Internet_altalanos.html, majd Mentés. Jobb egérgombbal kattintsunk a lap egy üres területére, majd a felbukkanó gyorsmenüből válasszuk ki a Lap tulajdonságai menüpontot. A megjelenő ablak Általános fül/Cím: Internet általános, majd OK. ( lásd 2.3. fejezet 6. pont)

21. ábra: Az új lap mentése


16.

2.2.2. A 2. weblap elkészítésének menete (Lap nézetben): 1. Az Index.html lapról másoljuk át a főcímet (minden formázásával) és tartalma legyen: Az

Internet fogalma 2. Adjunk a második weblapunk főcímének egy különleges külsőt oly módon, hogy a

böngészőben az egérjelet rámutatva változzon át a karakterek színe feketéből villogó lilára. Ehhez jelöljük ki a főcímet, majd Formátum/Dinamikus HTML-effektusok:

• Esemény: Rámutatás • Effektus: Formázás és a mellette lévő kis ablakban: Betűtípus kiválasztása, majd a

megnyíló Betűtípus ablakban adjuk meg a kívánt beállításokat: ○ Betűtípus: Alapértelmezett ○ Betűstílus: Félkövér ○ Betűméret: 5(18pt)

○ Szín: lila ○ Effektusok: Villogó

3. Vízszintes vonal elhelyezése a főcím alatt: Beszúrás/Vízszintes vonal

• Ennek eredménye egy alapértelmezett megjelenésű vízszintes vonal a munkaterületen, mely adott estben nem felel meg az igényeinknek. A vonal megjelenését meg tudjuk változtatni a vonal tulajdonságainak módosításával: Kattintsunk jobb egérgombbal a vonalra, majd a felbukkanó gyorsmenüben változtassuk meg a vonal hosszát, vastagságát, igazítását és színét.

22. ábra: Vízszintes vonal tulajdonságának módosítása

4. Gépeljük be a vonal alatti szövegrészt és a mintán látható módon formázzuk meg! 5. Gépeljük be egymás alá a következőket:

• Története • Szolgáltatások • Hasznos linkek • Vissza

6. Készítsük el az Internet_altalanos.html és az Index.html lapok közti hivatkozást! • Kattintsunk a Vissza szóra, majd Beszúrás/Hiperhivatkozás menüpontot válasszuk. • A Hivatkozás szerkesztése ablakban adjuk meg az ábrán látható beállításokat:


17.

23. ábra: Hivatkozás beállításának lépései

1. a Hivatkozott cím: Létező fájl, vagy weblap; 2. a Megjelenő szöveg: Vissza; 3. a Hely: FrontPage [mappa];

4. a Cím: index.html legyen, majd 5. OK.

• Álljunk vissza az Index.html lapra és kattintsunk jobb egérgombbal a logo-internet képre, majd a felbukkanó gyorsmenüből válasszuk ki a Hiperhivatkozás… menüpontot. A hivatkozás beszúrása ablakban adjuk meg az ábrán látható beállításokat:

24. ábra: Hivatkozás beállítása

○ a Hivatkozott cím: Létező fájl, vagy weblap; ○ a Hely: FrontPage [mappa]; ○ a Cím: Internet_altalanos.html legyen, majd OK.

7. Mentsük el eddigi munkánkat: Fájl/Az összes mentése 8. Tekintsük meg a böngészővel és próbáljuk ki a hivatkozás működését a Fájl/Megtekintés

böngészővel, vagy a Szokásos eszköztár ikonjára kattintva.

1.

2. 3.

4. 5.


18.


2.3. A 3. weblap (25. ábra) készítésének munkafolyamata

2.3.1. Szükséges fogalmak:

Felsorolás és számozás Meglévő szöveget egyszerű átalakítani listajeles vagy számozott listává, de automatikusan is létrehozhat ilyen listákat már a szöveg beírásakor. Ha weblapokhoz készít listajeles listákat, bármilyen képet használhat listajelként. Lehetőség van listajeles, egyéni listajeles (saját készítésű képek), számozott (betűk, számok és római számok) definíciós (a kifejezések általában balra rendezve jelennek meg, a definíciók pedig alattuk, behúzva láthatók) és többszintű listák (több egymásba ágyazott szintet és bekezdést tartalmaznak) készítésére. Formátum/Felsorolás és számozás/ Grafikus listajelek fül: Egyszerű listajelek fül: Számozás fül:


19.

26. ábra 27. ábra 28. ábra

26., 27., 28.ábrák: Felsorolás és számozás megadásának lehetőségei

Mindhárom esetben lehetőség van összezárható listaformátum engedélyezésére is, mely lehetővé teszi, hogy a látogatók duplán az elemekre kattintva megjelenítsék vagy elrejtsék a lista különböző szintjeit. Ezen kívül a felsorolójelek formátumát a felkínáltakon kívül csak a Stílus… gombra kattintva lehet minden esetben tovább módosítani. A Word-ben megismert többszintű számozásra csak közvetett úton van mód. Az egyes elemek megfelelő szintre helyezéséhez jelöljük ki a kívánt elemeket, majd kattintsunk kétszer a Behúzás növelése, illetve Behúzás csökkentése gombra. Ezek után van lehetőségünk megadni a különböző szintekhez a számozási, vagy felsorolási stílusokat, a következőképp: kijelölés, majd a helyi menüben a Lista tulajdonságai parancsot.

Multimédiás elemek beillesztése Weboldalainkat szövegrészek formázásán kívül színesebbé tehetjük különféle multimédiás elemek beillesztésével. A weblapon elhelyezhetünk képeket, képtérképet, animációkat, hanganyagot, videofilmet, sőt lehetőség van egyéb speciális elemek beszúrására, mint például: fényújság, interaktív gomb, diasorozat, stb… A képek grafikus formában szolgáltatnak információt az adott dologról. Van olyan kép, mely nemcsak díszítő jellegével emeli a lap külső megjelenését, de hivatkozás funkcióval is


20.

rendelkezik. Léteznek úgynevezett animált GIF képek is, melyek dinamikusak, a weblapon folyamatosan ismétlődően „mozognak”. A weblapot kiegészíthetjük videofelvételekkel is (pl. AVI formátumúak), melyek lejátszására vonatkozóan megadható, hogy hányszor ismétlődjön és milyen eseményre. Hanganyag lejátszására is van lehetőség a weblap megtekintése során. A háttérhang egy olyan hangállomány, mely klipként folyamatosan, vagy adott számban ismétlődik. A fényújság egy dinamikus eleme a weblapnak, nem más, mint egy gördülő szöveg. A fényújságként megjelenített szöveg hossza tetszőleges lehet. A szöveg futási iránya lehet balra, vagy jobbra. Viselkedését tekintve lehetőség van rá, hogy a lapra begördüljön, beússzon, vagy e kettő viselkedést váltakoztassa. Mozgási sebessége és a szövegeffektus ismétlődésének száma is tetszés szerint beállítható.

Könyvjelző A könyvjelző a szöveg azon helyét vagy részletét azonosítja, amelyet későbbi használat céljából megjelölünk. Ha például egy szövegrészhez később vissza szeretnénk térni, és könyvjelzőt rendelünk hozzá, nem kell a dokumentumot végignézve megkeresni a szöveget, hanem a Könyvjelző párbeszédpanel segítségével közvetlenül oda ugorhatunk. A könyvjelző nevének betűvel kell kezdődnie, és tartalmazhat számjegyeket is. A névben nem szerepelhet szóköz, de a szavak elválasztására használhatunk elválasztásjelet (például „Első_címsor”).

Elvégzendő feladatok: • Weblapsablon használata • Fényújság • Felsorolás • Animált képfájl beszúrása • Könyvjelző elhelyezése • Kép háttérképként

Előkészületek (a 2. weblaphoz hasonlóan, de kisebb-nagyobb eltéréssel): Fájl/Létrehozás/Lap vagy webhely → a jobb oldalon található ablakból kattintsunk az Új dokumnetum sablon alapján címszó alatt található Weblapsablonok… feliratra:

29. ábra: új lap készítése weblapsablon segítségével


21.

30. ábra: weblapsablon alkalmazása

A megnyíló Weblapsablonok ablakban az Általános fülön állva válasszuk ki a Kéthasábos szöveg nevezetűt, majd OK. Az Index.html és Internet_altalanos lapok mellett most már megjelent a harmadik weblap, melynek kezdetben a FrontPage az Új_lap_2.html nevet adta. Mielőtt bármi szerkesztési műveletet elkezdenénk, mentsük el a már tanult módon: Fájl/Mentés. A mentés helye automatikusan a már eddig is használt C./Munka/FrontPage, ahova a webhelyet a munka legelején létrehoztuk. Az Új_lap_2.html lap fájlneve legyen Internet_tort.html, majd Mentés.

2.3.2. A 3. weblap elkészítésének menete(Lap nézetben): 1. A főcím helye szöveget töröljük ki és ahelyett, hogy begépelnénk a főcímet először

válasszuk ki a Beszúrás/Navigációs elem… menüpontot, mert a harmadik weblapunk főcímének egy különleges külsőt szeretnénk adni, minek segítségével a szöveg fényújságként jelenik majd meg a böngészőben megtekintve. Ehhez a megnyíló Webösszetevő beszúrása ablakban az alábbiakat válasszuk:

○ Összetevő típusa: Dinamikus effektusok, ○ Effektus: Fényújság legyen, majd Befejezés.

31. ábra: Fényújság készítése


22.

2. A Fényújság tulajdonságai ablakban lehet megadni, hogy milyen szöveg szerepeljen a fényújságban. Ebben a feladatban a fényújság:

○ Szövege: Az Internet története röviden, ○ Viselkedése: Gördülő,

○ Ismétlés: Folyamatosan, ○ Háttérszíne: sárga

32. ábra: A fényújság tulajdonságainak beállítása

3. Mentsük el eddigi munkánkat: Fájl/Mentés 4. Tekintsük meg a böngészővel a Fájl/Megtekintés böngészővel menüpontra, vagy a

Szokásos eszköztár ikonjára kattintva. 5. A hasáb bal oldali oszlopába gépeljük be egymás alá:

• 60-as évek • 70-es évek • 80-as évek • 90-es évek

6. Készítsünk belőlük felsorolást! A kijelölés után Formátum/Felsorolás és számozás…/Egyszerű listajelek fül, adjuk meg a felsoroló jel típusát, majd az OK gombra kattintsunk.

7. Másoljuk be a hasáb további részébe a felsorolásokhoz tartozó tartalmakat, melyet az O:\InfInt\In-001\Honlapelemek\elso\Internet_tort.txt szövegállományban találunk.

8. Formázzuk meg a mintán látható módon. A bekezdések elnevezése pontosan egyezzen meg a felsorolásban szereplőkkel!

9. Könyvjelző elhelyezése: Jelöljük ki a szövegben a 60-as évek címszót, majd Beszúrás/Könyvjelző. A felbukkanó Könyvjelző ablakban legyen A könyvjelző neve: 60-as évek, majd az OK gombra kattintsunk. (Hatása: szaggatottan aláhúzza a szövegben a 60-as évek címet)


23.

33. ábra: Könyvjelző készítése

10. Kattintsunk a felsorolásban a 60-as évekre, majd Beszúrás/Hiperhivatkozás…

34. ábra: Könyvjelző hivatkozásának szerkesztése

11. A Hivatkozás szerkesztése ablakban: Hivatkozott cím: Dokumentum adott pontja;

Megjelenő szöveg: 60-as évek; majd OK. 12. Mentsük el a változásokat, majd tekintsük meg a böngészővel! 13. Animált képfájl beszúrása a jobb oldali hasáb felső részébe középre igazítva: Beszúrás /

Kép/Fájlból… A megfelelő képfájl helye a már ismert elérési útvonalon: O:\InfInt\In-001\Honlapelemek\elso\Földgömb1.gif.

14. Jelöljük ki a hasáb megfelelő sorát, majd kattintsunk jobb egérgombbal a kijelölt területre és a felbukkanó gyorsmenüből válasszuk ki a Cella tulajdonságai menüpontot. A megjelenő ablakban a Háttérnél jelöljük be a Háttérkép használatát és adjuk meg a kívánt háttérképként szolgáló képfájl nevét: a Tallózás… gombra kattintva keressük meg a O:\InfInt\In-001\Honlapelemek\elso\back3.jpg, majd az OK gombra kattintunk.


24.

35. ábra: A táblázat rovatának tulajdonságai

Gyakorló feladat: 1. Helyezzünk el még három könyvjelzőt a 70-es, 80-as és 90-es évekre vonatkozóan! 2. A lap alján helyezzük el a Vissza, Tovább és Főoldalra hivatkozásokat (2. weblap

elkészítésének menete 6. lépése alapján.) • Vissza link mutasson az Internet_altalanos.html lapra. • Tovább link: egyenlőre csak gépeljük be a szöveget. • Főoldalra link: mutasson az Index.html oldalra.


25.


Elvégzendő feladatok: • Sorszámozás • Többszintű felsorolás • Beágyazott keret • Áttűnés lapváltáskor

Előkészületek: Fájl/Létrehozás/Lap vagy webhely → a jobb oldalon található ablakból kattintsunk az Új címszó alatt található Üres lap feliratra, majd mentsük az új lapot a már tanult módon Internet_szolg.html néven.

2.4. A 4. weblap (36. ábra) készítésének munkafolyamata 1. Az Index.html lapról másoljuk át a főcímet (minden formázásával) és tartalma legyen: Az

Internet szolgáltatások röviden 2. Másoljuk be az oldal tartalmát a O:\InfInt\In-001\Honlapelemek\elso\Internet_szolg.txt

szövegállományból. 3. Beágyazott keretben jelenítsük meg az index.html oldalt: Beszúrás/Beágyazott keret,

majd a beszúrt keret belsejében lévő Kezdőlap megadása… gombra kattintva a Hivatkozás beszúrása ablakban a Cím: index.html legyen, majd OK.


26.

37., 38. ábrák: két lap között link késztése 4. A beágyazott keret méretét megváltoztathatjuk úgy, hogy egyszer rákattintunk és a

megjelenő szerkesztési papucsok valamelyikére állunk az egérjellel, majd nyomott bal

egérgombbal húzzuk az egeret. A lapon való helyzete legyen jobbra zárt a ikon segítségével.

5. A lap bármely pontján állva Formátum/Áttűnés lapváltáskor… menüpontra kattintva lehetőségünk van különböző áttűnés típusok beállítására a lapra belépéskor, onnan kilépéskor, stb…, majd OK.

39. ábra: Lapok közti áttűnés megadása

6. Mentsük a változásokat és tekintsük meg böngészővel!


27.

Gyakorló feladat: 1. Helyezzünk el és formázzunk meg a főcím alatt két vízszintes vonalat a mintán látható

módon! 2. Formázzuk meg a bemásolt szövegrészt, alkalmazzuk a harmadik weblap készítése során

bemutatott felsorolás és számozás műveletét! (Vigyázat! Többszintűről van szó, melynek felső szintje [1., 2., 3.] típusú számozás, majd [a, b, c] típusú felsorolás és azon belül

típusú felsorolás van) 3. Rendeljünk hozzá tetszőleges áttünéseket a már elkészített weblapokra is! 4. A lap alján helyezzük el a Vissza, Tovább és Főoldalra hivatkozásokat (2. weblap

elkészítésének menete 6. lépése alapján.) • Vissza link mutasson az Internet_tort.html lapra. • Tovább link: egyenlőre csak gépeljük be a szöveget. • Főoldalra link: mutasson az Index.html oldalra.

5. Álljunk a harmadik weblapra (Internet_tort.html) és hozzuk létre a Tovább linket, mely az Internet:szolg.html lapra mutat.


28.

40. ábra: Az 5. weblap böngészőben megjelenő képe

2.5. Az 5. weblap (40. ábra) készítésének munkafolyamata


Táblázatok A táblázatokat rovatokból (a rovat angol elnevezése: cell, ebből eredeztethető a nem túl magyaros cella szó is) kialakított oszlopok és sorok alkotják. A rovatokba szöveget és ábrákat is el lehet helyezni. A táblázat az információkat könnyen áttekinthető, rácsszerű elrendezésben tartalmazza. A táblázatban nagyon egyszerűen létre lehet hozni több rovatot a már meglévőek két- vagy többfelé osztásával. A szomszédos rovatok össze is olvaszthatók egy rovattá. Amikor kialakítottuk az összes szükséges sort és oszlopot, beállíthatjuk a sorok magasságát és az oszlopok szélességét a kívánt méretre. Az egyes sorok magasságát és az egyes oszlopok szélességét megadhatjuk a teljes táblázat méretének százalékában vagy képpontban, de választhatjuk azt is, hogy legyen egyforma méretű az összes sor és oszlop. Az is megadható, hogy a táblázat szélessége a teljes weblapszélességhez viszonyítva annak hány százaléka legyen (pl.: 80%-a legyen). Ha keretben használjuk a táblázatot, akkor a keret szélességéhez viszonyítjuk a százalékos méretet. Ha a látogató átméretezi a böngészője ablakát, a weblapméret és a táblázat mérete is megváltozik ennek megfelelően. Az olyan weblapokon, amelyeken szöveg és táblázat is található, megadható az is, hogy körülfolyja-e a szöveg a táblázat oldalait.


29.

Azt, hogy a táblázat hogyan jelenjen meg a weblapon, az igazítás beállításával szabályozható: lehetnek jobbra, balra és középre igazítottak. A szöveg rovatban történő elhelyezkedésének megadásakor beállíthatjuk, hogy mekkora távolság legyen a rovat szegélye és a benne lévő szöveg között, és megadhatjuk a szöveg függőleges és vízszintes igazítását is. Emellett a táblázatban elhelyezett szöveg ugyanúgy formázható, mint bármely más szöveg – módosítható a betűk stílusa, színe, mérete és egyéb jellemzői. A szegély jellemzőinek megadásánál beállítható, hogy azonos legyen-e a szegélyek színe a teljes táblázatban, vagy akár rovatonként más-más színű szegélyeket is választhatunk. Használhatunk egyszínű szegélyt, vagy akár a térhatású kinézetet is létrehozhatunk kétféle szín -egy világos és egy sötét- megadásával. A külső szegély vastagságát is megváltoztatható. A táblázatnak lehet címet is adni, mely a táblázat alatt vagy fölött helyezhető el. A táblázatcím szövege is formázható. A táblázat néhány rovatát ki is lehet jelölni rovatfejeknek, hogy kitűnjenek a táblázat többi részéből. Alapértelmezés szerint a rovatfejek félkövérre vannak formázva, de a rovatfej stílusa módosítható, valamint más tulajdonságokat is meg lehet adni számukra (pl.: mintázat).

Táblázat létrehozása Lap nézetben válasszon az alábbi lehetőségek közül: • Táblázat / Beszúrás / Táblázat • Sorok száma, Oszlopok száma segítségével megadható, hogy a táblázatnak hány sora és

oszlopa legyen. • Igazítás mezőben megadhatjuk a táblázat helyét a weblapon. • Szegélyméret mezőben meghatározhatjuk a táblázatszegély szélességét képpontban. • Ha meg akarja változtatni a cella szegélye és tartalma közötti távolságot, akkor

Cellamargó mezőben teheti meg. • Ha a cellák közötti távolságot akarja megváltoztatni, azt a Cellaköz mezőben adott

értekkel teheti meg.

Ezen kívül lehetőség van még táblázat létrehozására az Egyszerű táblázat létrehozása és Táblázat létrehozása rajzolással módszerekkel is.

Teljes táblázat vagy táblázatrész kijelölése A Lap nézetben az alábbi műveleteket hajthatja végre:

Táblázat Táblázat / Kijelölés / Táblázat Cella Táblázat / Kijelölés / Cella Sor Táblázat / Kijelölés / Sor

Kijelölés

Oszlop Táblázat / Kijelölés / Oszlop Táblázat Táblázat tulajdonságai / Szélesség megadása

Táblázat tulajdonságai / Magasság megadása Cella Cella tulajdonságai / Szélesség megadása

Cella tulajdonságai / Magasság megadása Sor Táblázat / Kijelölés / Sor, majd

Cella tulajdonságai / Szélesség megadása Cella tulajdonságai / Magasság megadása

Átméretezés A táblázat megfelelő pontján állva kattintsunk jobb egérgombbal, majd:

Oszlop Táblázat / Kijelölés / Oszlop, majd Cella tulajdonságai / Szélesség megadása Cella tulajdonságai / Magasság megadása

Táblázat Táblázat / Kijelölés / Táblázat, majd Cella törlése Cella Táblázat / Kijelölés / Cella, majd Cella törlése

Törlés

Sor Táblázat / Kijelölés / Sor, majd Cella törlése


30.

Oszlop Táblázat / Kijelölés / Oszlop, majd Cella törlése Táblázat Cella Táblázat / Beszúrás / Cella Sor Táblázat / Beszúrás / Sorok vagy oszlopok

Beszúrás

Oszlop Táblázat / Beszúrás / Sorok vagy oszlopok

Megjegyzések: • Ha több cellát szeretne kijelölni, a táblázat különböző pontjain: CTRL billentyű

folyamatos nyomva tartásával kattintson a kijelölni kívánt cellákra. • Ha a táblázat mérete képpontban van megadva, a táblázat mindig azonos méretben fog

megjelenni, függetlenül attól, hogy mekkora a weblap mérete, amelyen elhelyezkedik. • Ha a táblázat mérete a böngészőablak méretének százalékában van megadva, akkor

megjelenési mérete az ablakméret függvényében változik. • Ha nincs megadva szélesség- vagy magasságérték, a táblázat mérete a cellák tartalmától

függően változik. • Ha a táblázat vagy valamelyik táblázatrész tartalma (szöveg, képek stb.) nagyobb

(hosszabb, szélesebb stb.) a megadott értéknél, a táblázat vagy táblázatrész akkorára növekszik, hogy az adott tartalom beleférjen.

Táblázat tulajdonságainak beállítása Lap nézetben a jobb gombbal kattintson a táblázatra. A helyi menüben kattintson a Táblázat tulajdonságai parancsra.

Igazítás a táblázat helyzete a weblapon Szöveg körbefuttatása a táblázat és a szöveg egymáshoz viszonyított

helyzete Cellaköz a cellák közötti távolság megadása Cellamargó a cella szegélye és tartalma közötti távolság Szélesség megadása oszlopok szélességét képpontban vagy százalékban.

a táblázat elrendezésének

Magasság megadása oszlopok magasságát képpontban vagy százalékban Méret a táblázatszegély kívánt szélessége képpontban Szín a táblázatszegély színének beállítása Világos szegély és Sötét szegély

térhatás eléréséhez válasszuk a kétszínű szegélyt

a táblázat szegélyeinek beállítása

Cella- és táblázatszegélyek együttes megjelenítése

ha a színeket mind a cellákban, mind a szegélyeken alkalmazni akarjuk

Háttér / Szín a táblázat háttérszínének beállítása a táblázat hátterének beállítása

Háttér / Háttérkép használata / Tallózás / Fájlnév / Megnyitás gomb

háttérkép megjelenítése a táblázatban

Megjegyzések: • A kiválasztott háttérkép mozaikszerűen lesz elrendezve, hacsak stíluslapokkal meg nem

változtatja a megjelenését. • Ha használható a Stílus gomb, rákattintva további beállításokat érhet el, melyekkel a

táblázatok belső stílusként használt stíluslapok segítségével formázhatók.

Rovat tulajdonságainak beállítása Lap nézetben jelölje ki azokat a cellákat, melyek tulajdonságait módosítani szeretné. Kattintson rájuk jobb gombbal, majd a helyi menüből válassza a Cella tulajdonságai parancsot.


31.

Elrendezés /Vízszintes igazítás balra, jobbra, középre, sorkizárt rovat tartalmának igazítása Elrendezés/ Függőleges

igazítás felülre, középen, alapvonalra, alulra

rovat beállítása rovatfejként

Elrendezés / Rovatfej jelölőnégyzet

alapértelmezetten félkövé

sortörés megakadályozása a cellákban

Elrendezés / Nincs sortörés jelölőnégyzetet

Elrendezés/ Cellakiterjedés (sor)

a cellák hány sort fogjanak át

Elrendezés/ Cellakiterjedés (oszlop)

a cellák hány oszlopot fogjanak át

rovatszegélyek beállítása

Szín a cellaszegély színének beállítása

Világos szegély és Sötét szegély térhatás eléréséhez válasszuk a kétszínű szegélyt

Sorok vagy oszlopok méretének egységesítése a táblázatban Ha a táblázat különböző magasságú sorokat és különböző szélességű oszlopokat tartalmaz, a kijelölt sorok magasságát vagy oszlopok szélességét egységesítheti. A Lap nézetben az alábbi műveleteket hajthatja végre: sormagasság egységesítés

Táblázat / Kijelölés / Oszlop azonos sormagasság

oszlopszélesség egységesítése

Táblázat / Kijelölés / Sor azonos oszlopszélesség

Előkészületek: Fájl/Létrehozás/Lap vagy webhely → a jobb oldalon található ablakból kattintsunk az Új címszó alatt található Üres lap feliratra, majd mentsük az új lapot a már tanult módon Internet_hasznos.html néven.


32.

2.5.2. Az 5. weblap elkészítésének menete(Lap nézetben): 1. Az Index.html lapról másoljuk át a főcímet (minden formázásával) és tartalma legyen:

Hasznos linkek 2. Táblázat/Beszúrás/Táblázat menüpontra kattintva hozzunk létre egy olyan táblázatot,

melynek 11 sor és 3 oszlopa van:

41. ábra: Táblázat beszúrása

3. Töltsük fel tartalommal az egyes cellákat a minta alapján! 4. Az egész táblázatnak adjunk a mintában látható külsőt. Álljunk a táblázat valamely

részére, majd kattintsunk a jobb egérgombbal. A felbukkanó gyorsmenüből válasszuk ki a Táblázat tulajdonsága… menüpontot • Elrendezés címszó alatt:

○ Igazítás: Középre (az egész táblázatot a lap közepére igazítja) ○ Szélesség megadása: 84%, magasság megadása: 613% ○ Cellamargó: 4 (a cella szegélye és tartalma közötti távolság) ○ Cellaköz: 10 (a cellák közötti távolság megadása)

• Szegélyek címszó alatt: ○ Méret: 6 (Milyen vastagságú legyen a szegélyvonal) ○ Világos szegély: fekete, Sötét szegély: piros ○ Cella- és táblázatszegélyek együttes megjelenítése legyen kipipálva (a színeket mind a

cellákban, mind a szegélyeken alkalmazni akarjuk) • Háttér címszó alatt:

○ Szín: világoskék

42. ábra: A táblázat tulajdonságainak megadása


33.

5. Rovatok egyesítése: Jelöljük ki az első oszlop első 3 (egymás alatti)celláját, majd

Táblázat/Cellák egyesítése 6. Formázzuk meg a cellában lévő szöveget (BÖNGÉSZŐK) a mintában látható módon

(Times New Roman, 3 (12pt), Félkövér) 7. Rovattartalom formázása: Álljunk az egyesített cellába, majd kattintsunk rá jobb

egérgombbal és a felbukkanó gyorsmenüből válasszuk a Cella tulajdonságai…-t. ○ Vízszintes igazítás: Jobbra; ○ Függőleges igazítás: Alapértelmezett… ○ Készítsünk térhatást: Világos szegély: Automatikus; Sötét szegély: piros

43. ábra: Rovat tulajdonságainak megadása

8. A táblázat középső oszlopában az egyes weblapokra mutató linkek vannak összegyűjtve.

Keressük meg az Internetto oldalára mutató hivatkozást és vegyük észre, hogy megjelenése eltér a többitől, nem a hagyományos értelembe vett külsővel jeleni meg. A következő a teendő: • A cellában a http://www.internetto.hu/ található. • Jelöljük ki az egész szövegrészt, majd kattintsunk rá jobb egérgombbal. A felbukkanó

gyorsmenüből válasszuk a Hivatkozás tulajdonságai… menüpontot • A Hivatkozás szerkesztése ablakban a megjelenő szöveg legyen Internetto oldala, míg

a cím marad a beírt link, majd OK.


34.

44. ábra: Hivatkozás szerkesztése

9. Az egész lap háttere legyen egy kép: Kattintsunk jobb egérgombbal a lap üres részére,

majd a felbukkanó gyorsmenüből válasszuk a Lap tulajdonságai… menüpontot. Háttér fül, Formázás címszó alatt a Háttérkép jelölőnégyzet legyen bepipálva, majd a Tallózás… gombra kattintsunk. Itt adjuk meg a háttérként használni kívánt kép elérési útvonalát: C:/Munka/FrontPage/back6.jpg (lásd.: 3. weblap készítésének 14. pontja), végül az OK gombra kattintsunk.

Gyakorló feladat: 1. Végezzük el a cellaegyesítéseket az első oszlop további részeiben is! 2. Adjuk meg a lap alján a Vissza és Főoldalra hivatkozásokat. (A Vissza mutasson az

Internet_szolg.html lapra, a Főoldalra pedig az index.html lapra! Tovább linkre jelen esetben nincs szükség, hisz több lapot már nem fogunk összekapcsolni.)

3. Formázzuk meg a bemásolt szövegrészt, alkalmazzuk a harmadik weblap készítése során bemutatottakat.


35.

FrontPage - III. rész Előkészületek Mielőtt elindítanánk a FrontPage programot ellenőrizzük, hogy az I Fejezetben már említett Munka nevű könyvtár a C:\ meghajtón létezik-e! Amennyiben nem létezik, hozzuk létre, majd azon belül készítsünk el egy FrontP2 nevű alkönyvtárat. (C:\Munka\FrontP2 az a hely, ahová a munka során felhasználandó fájlokat bemásoljuk az O:\InfInt\In-001\honlapelemek\masodik könyvtárból még a munka megkezdése előtt és ide hozzuk létre az új webhelyet is.) Indítsuk el a FrontPage programot (START/Programok/Microsoft Office/Microsoft FrontPage) A FrontPage első indításakor egy üres lap jelenik meg, mely szerkesztésre kész. Amennyiben korábban már történt webhely-szerkesztés a Front Page-vel, úgy a legutóbb szerkesztett webhely automatikusan megnyílik. Teljesen új webhely készítésekor érdemes ezt bezárni: Fájl/Webhely bezárása. Fájl/Létrehozás/Lap vagy webhely → Új weblap vagy webhely munkaablak (a képernyő jobb szélén) Új címszó alatt Üres webhely parancs:

45. ábra: Az új webhely elérési útjának megadása

Adjuk meg az új webhely elérési útját a Tallózás… gombra kattintva az alábbi módon: C:\Munka\FrontP2. Végezetül kattintsunk az OK gombra. Ha minden sikerült, akkor a címsor bal szélén a következőt kell látnunk: C.\Munka\FrontP2.


36.

46. ábra: A nyitó lap böngészőben megjelenő képe

3.1. A nyitó lap (46. ábra) készítésének munkafolyamata 1. Hozzunk létre legelőször is egy üres lapot, mint azt már az I. fejezetben megtanultuk:

Fájl/Létrehozás/Lap vagy webhely… → Új weblap vagy webhely munkaablak (a képernyő jobb szélén) / Új címszó alatt / Üres lap parancs:

2. Mentsük el: Fájl/Mentés. A mentés helye automatikusan a C:/Munka/FrontP2, ahova a webhelyet a munka legelején létrehoztuk. A fájlnév legyen index.html, majd Mentés.

3. Helyezzünk el a weblap közepébe igazítva egy képet, mely a továbbiakban linkként fog funkcionálni, a bal felső sarokba egy WordArt feliratot (Üdvözöljük honlapunkon!), a jobb alsóba pedig egy képfelirat alakzatot, mely a kép fele mutat és Kattintson a képre!!! Szöveget tartalmaz. • Kép beszúrása: Beszúrás/Kép/Fájlból…, majd a helynél adjuk meg a kép elérési

útvonalát: O:\InfInt\In-001\Honlapelemek\masodik\kep1.gif, végül kattintsunk a Beszúrás gombra. Igazítsuk középre menüből: Formátum/Bekezdés/Bekezdés és térköz fül/ Igazítás: Középre.

• WordArt felirat: A Word szövegszerkesztő használatának elsajátítása során már megismerkedtünk az Alakzatok és rajzobjektumok témakörbe tartozó WordArt hatással. A Front Page programban is van mód a használatára: Beszúrás/ Kép/WordArt… A megjelenő WordArt ablakból válasszuk ki a megfelelő stílust, formázzuk meg és adjunk tartalmat neki: „Üdvözöljük honlapunkon!”, majd igazítsuk a bal felső sarokba!

• Képfelirat: A szövegbuborék használata az előző pontban már említett módon történik (szintén ismerős a szövegszerkesztési tanulmányokból…) Beszúrás/Kép/


37.

Alakzatok…/Képfeliratok. Válasszuk ki a megfelelő alakzatot, majd szúrjuk be a képernyő jobb alsó sarkába. Kattintsunk bele, majd gépeljük be a „Kattintson a képre!!!” feliratot. A szöveget formázzuk meg a mintán látható módon: szín: piros, stílus: félkövér. A képfeliratot igazítsuk úgy, hogy a szöveg beleférjen és a beszúrt kép fele mutasson. (Kattintsuk duplán a bal egérgombbal a képfeliratra, majd a megnyíló Alakzat formázása ablakban a Színek és vonalak fülön állítsuk be a kitöltést világoskékre. A képfelirat méretét nemcsak a szerkesztési pontocskákon állva, nyomott bal egérgombbal húzottan lehet beállítani, hanem az Alakzat formázása ablak Méret fülén századcentiméterre pontosan is meg lehet adni.

4. Mentsük eddigi munkánkat: Fájl/Mentés


38.

47. ábra: A kereteket tartalmazó weblap böngészőben megjelenő képe

3.2. A kereteket tartalmazó weblap (47. ábra) készítésének munkafolyamata

3.2.1.Szükséges fogalmak

Keretek A témakör egyes részei bizonyos nyelvekre nem érvényesek. A kereteket tartalmazó lapok olyan különleges HTML-lapok, amelyek különböző részekre osztják a böngésző ablakát, így mindegyik keretben más weblapot lehet megjeleníteni. Maguk a kereteket tartalmazó lapok nem tárolnak semmilyen látható tartalmat, hanem egy tárolórendszerként funkcionálnak, megadják, hogy milyen weblapok jelenjenek meg a böngésző ablakában és hogyan. Ha a keretek valamelyikében látható weblapon kattintunk egy hivatkozásra, akkor az a weblap, amelyre a hivatkozás mutat, általában egy másik keretben jelenik meg. A kereteket tartalmazó lapokat gyakran használják katalógusok, cikk- vagy információlisták, stb… megjelenítésére. Előnye: beépített navigációs rendszerrel vannak ellátva és egységes felhasználói felületet biztosítanak.

Keretek létrehozása A Microsoft FrontPage programban kereteket tartalmazó lapok készítése sablonok segítségével történik. Ezekben a sablonokban a keretek közötti mozgás ki van alakítva. Menete: Fájl/Létrehozás/Lap vagy webhely…


39.

A jobb oldalon megnyíló Új weblap vagy webhely… ablak Új dokumentum sablon alapján címszó alatt található Weblapsablonok…-ra kattintva megnyílik a Weblapsablonok ablak. (az előző fejezetben már jártunk itt.) Jelen esetben a Kereteket tartalmazó lapok fülre kattintsunk. A felkínált sablonok közül válasszuk ki a Szalagcím és tartalomjegyzék nevű sablont.

48. ábra: Keretsablon létrehozása

A mintán jól látszik, hogy ezzel a sablonnal létrehozott kereteket tartalmazó lap három keretből áll (Szalagcím a tetején, Tartalom a bal oldalon és Főlap). Valójában azonban négy weblapot mutat egyidejűleg a böngészőben: a kereteket tartalmazó lapot, amely a tárolórendszer, és a három keretben megjelenő lapokat. A kereteket tartalmazó lapon a sablonnal történő létrehozása után be kell állítani, hogy mik legyenek az egyes keretekben megjelenő kezdőlapok (amik lehetnek már létező weblapok, vagy új, most létrehozandó). A választott weblap ezután a saját keretében módosítható. Példa a fenti Szalagcím és tartalom sablonon alapuló kereteket tartalmazó lap működése:

• Szalagcím keretben jeleníthető meg például egy cég emblémája és a fontosabb osztályai a webhelyen.

• Szalagcím keretben lévő hivatkozásra kattintva a Tartalom keretben egy lista jelenik meg szintén hivatkozásokkal.

• Kattintson a Tartalom keretben lévő hivatkozásra. • Amikor a bal oldali Tartalom keretben lévő hivatkozásra kattintunk, a hivatkozás

célpontjául szolgáló weblap a Főlap keretben jelenik meg.

Kereteken végzett műveletek (Lap nézetben)

Keret felosztása (Lap nézetben) Álljunk a szóban forgó keretre, majd:

• CTRL + a megfelelő szegély húzása (nyomott bal egérgombbal), vagy • menüből: Keretek / Keret felosztása, mely két egyenlő méretű oszlopra, vagy sorra

osztja fel az eredetit. (Keret felosztásakor annak tartalma megmarad az eredeti keretben, és egy új keret jön létre.)


40.

Keret átméretezése (Lap nézetben) Álljunk a szóban forgó keretre, majd:

• A megfelelő szegély húzása (nyomott bal egérgombbal), vagy • menüből: jobb egérgombbal kattintsunk a keretre, majd a felbukkanó gyorsmenüből

válasszuk ki a Keret tulajdonságai menüpontot. A keret mérete címszónál a Szélesség, illetve a Sormagasság mező értékét pontosan meg lehet adni képpontban, a böngészőablak százalékában, vagy relatívan a többi keret méretéhez viszonyítva.

49. ábra: A keret tulajdonságainak megadása

Egy keret átméretezésekor értelem szerűen a szomszéd keret mérete is megváltozik. Az átméretezés a lap tartalmára nincs hatással.

Keret törlése(Lap nézetben) Álljunk a szóban forgó keretre, majd: Keretek/Keret törlése Amikor kereteket tartalmazó lapról töröl egy keretet, az abban megjelenített lap törlődik, de a kereteket tartalmazó lap többi része nem. Az a lap, amely a törölt keretben volt, eltűnik a keretkészletből, de továbbra is a webhely mappáiban marad. A keret törlése után a többi keret mérete értelem szerűen megnő. Egy keretet tartalmazó weblap esetén a keretet nem lehet törölni!

Keretek megjelenítési tulajdonságainak beállítása (Lap nézetben)

Keretek szegélyeinek megjelenítése, vagy elrejtése A keretek körüli szegélyek megjeleníthetők, vagy elrejthetők, a weblap külső megjelenítésétől függően. Álljunk a szóban forgó keretre, majd: jobb egérgombbal kattintsunk rá és a felbukkanó gyorsmenüből válasszuk ki a Keret tulajdonságai menüpontot, majd Beállítások / Kereteket tartalmazó lap / Szegélyek megjelenítése jelölőnégyzet. Ha a szegélyek megjelenítését vagy elrejtését választja, ez a beállítás az összes keretre érvényes lesz a kereteket tartalmazó lapon.

A keretek közti távolság beállítása: Megadható a szomszédos keretek külső szélei közti távolság is:


41.

Álljunk a szóban forgó keretre, majd: jobb egérgombbal kattintsunk rá és a felbukkanó gyorsmenüből válasszuk ki a Keret tulajdonságai menüpontot, majd Beállítások/Kereteket tartalmazó lap/Keretek közti távolság mező (alapértelmezetten két képpont).

Keretmargók beállítása: Beállítható a keret tartalma és a szegély közti távolság. Ha a keretben megjelenített weblapnak is van margója, a keret margómérete hozzáadódik a weblap margóméretéhez Álljunk a szóban forgó keretre, majd: jobb egérgombbal kattintsunk rá és a felbukkanó gyorsmenüből válasszuk ki a Keret tulajdonságai menüpontot, majd Margók/Szélesség és Magasság

Láthatatlan keretek létrehozása A kereteket tartalmazó lapot kialakíthatja úgy is, hogy a keretek ne látszódjanak, így az keretek nélküli normál weblapnak tűnik. Álljunk a szóban forgó keretre, majd: jobb egérgombbal kattintsunk rá és a felbukkanó gyorsmenüből válasszuk ki a Keret tulajdonságai menüpontot, majd Beállítások/Kereteket tartalmazó lap/Szegélyek megjelenítése jelölőnégyzet legyen üres, a Keretek közti távolság mező értéke pedig nulla (0)

A keret görgetősávjának megjelenítése és elrejtése Az egyes keretek görgetősávjait beállíthatja úgy, hogy soha ne jelenjenek meg, illetve hogy csak szükség esetén vagy mindig látsszanak. Álljunk a szóban forgó keretre, majd: jobb egérgombbal kattintsunk rá és a felbukkanó gyorsmenüből válasszuk ki a Keret tulajdonságai menüpontot, majd Beállítások/ Görgetősávok megjelenítése lista.

Keretben megjelenő weblap mentése (Lap nézetben) Kattintsunk a menteni kívánt weblapra, vagy a keretre, melyben a menteni kívánt weblap megjelenik, majd Keretek/Lap mentése másként. A Mentés másként párbeszédablakban látható a kereteket tartalmazó lap elrendezése. A menteni kívánt weblapot a kijelölt keretben sötétkék mező jelzi.

1. Fájlnév mező: a menteni kívánt weblap neve. 2. Fájltípus mező: a menteni kívánt weblap típusa. 3. Módosítás gomb: a weblap címének módosítása, majd 4. Lap címének megadása párbeszédpanel: adjon új nevet a lapnak.

Adja meg a helyet, ahová a weblapot menteni szeretné, majd Mentés. A böngésző címsorában megjelenő cím a kereteket tartalmazó lap címe, nem a keretben látható weblapé.

Élőgomb készítése: Az élőgomb a dinamikus HTML effektusok körébe tartozik, ezzel változatosabbá teheti az adott weblapot. Eseményindító események, ugyanis egérgombbal való kattintás, vagy rámutatás, ill. weblap megnyitása során változások következnek be a megjelenésben. Az élőgomb, azon kívül, hogy hivatkozás funkcióját tölti be (rá kattintva egy másik weblap, vagy fájl nyílik meg), segít különböző animációk egyszerű létrehozásában. Az adott weblapon található élőgombra mutatva, vagy kattintva a gomb sokféle effektust vehet fel (pl. felizzás). Beállítható a gomb színe, a háttér színe és az effektus színe is. Ezen kívül arra is lehetőség van, hogy a gomb ne csak egy egyszerű gomb alakját vegye fel, hanem egy egyéni kép is megjelenhet rajta, mely rámutatásra egy újabb képet jeleníthet meg.


42.

Előkészületek: Hozzunk létre egy új weblapot, de az eddig megtanultaktól eltérő módon. Fájl/Létrehozás/Lap vagy webhely… → Új weblap vagy webhely munkaablak (a képernyő jobb szélén) Új dokumentum sablon alapján címszó alatt Weblapsablonok… parancs: A megnyíló Weblapsablonok ablakban kattintsunk a Kereteket tartalmazó lapok fülre és a felkínált sablonok közül válasszuk ki a Szalagcím és tartalomjegyzék nevezetűt! (A II fejezet szükséges fogalmak Keretek címszava alatt már említés történt erről a sablonról…)

50. ábra: A Szalagcím és Tartalom keret felépítése

Az eredmény egy Új_lap_1.html névre hallgató weblap, melyben további 3 weblap helyezkedik el (Szalagcím, Tartalom és Főlap) Mentsük el ezt a tárolórendszerként funkcionáló lapot (mely 3 másikat tartalmaz a keretek segítségével) elso.html néven.

51. ábra: A „tárolórendszer” mentése

Tartalom keret

Szalagcím keret

Főlap keret


43.

3.2.2. A kereteket tartalmazó weblap készítésének menete (Lap nézetben) Mielőtt nekilátnánk a munkának tisztáznunk kell, hogy a fent létrehozott tárolórendszerként funkcionáló keret (elso.html) Szalagcím és Tartalom kereteiben lévők a továbbiakban nem változnak. Ezek stabil lapok. A Főlap keretben pedig négy különböző oldal bemutatása történik, melyeket külön-külön, egymás után készítük el, más-más néven (Generációk, Hardver, Szoftver és Űrlap). 1. A keretek segítségével a terület felosztódott 3 részre. Mindhárom lap esetén két

lehetőségünk van: vagy megadunk egy, már létező lapot a Kezdőlap megadása… gombra kattintva, vagy pedig egy teljesen üres weblapot hozunk létre az Új lap gomb segítségével.

2. A Tartalom keret szerkesztése: • Kattintsunk a Tartalom keret területén lévő Új lap gombra. • Élőgomb létrehozása: Beszúrás/Webösszetevő (vagy Navigációs elem), majd a

megnyíló Webösszetevő beszúrása ablakban: ○ Összetevő típusa: Dinamikus effektus; ○ Effektus: Élőgomb, majd ○ Befejezés gombra kattintunk.

52. ábra: Élőgomb készítése

• Adjuk meg az élőgomb tulajdonságait:

○ Gombfelirat: Generációk; ○ Hivatkozott cím: (egyenlőre üresen hagyjuk, majd ha már létezik a Generációk weblap

visszatérünk a hivatkozásra, hisz ez maga a linkelés funkciója) ○ A gomb színe: kék ○ Effektus: Izzás ○ Szélesség: 120 (képpont),

○ Háttérszín: piros ○ Az effektus színe: rózsaszín ○ Magasság: 24


44.

53. ábra: Az élőgomb tulajdonságainak megadása

• Mentsük el a változásokat: Keretek/Lap mentése másként, vagy Fájl/Mentés; majd

a megjelenő Mentés másként ablakban ellenőrizzük, hogy a mentés helye a feladat elején létrehozott FrontP2 mappa legyen, és figyeljük a mintát (hogy tényleg a Tartalom keretet mentjük, vagyis kék színnel ki legyen emelve a többi közül…), majd adjuk meg a keret nevét: Tartalom.

• Tekintsük meg a böngészőben! 3. Szalagcím keret szerkesztése:

• Kattintsunk a Szalagcím keret területén levő Új lap gombra! • Beszúrás/Webösszetevő (vagy Navigációs elem), majd a megnyíló Webösszetevő

beszúrása ablakban: ○ Összetevő típusa: Dinamikus effektus; ○ Effektus: Fényújság, majd ○ Befejezés gombra kattintunk.

• A Fényújság tulajdonságai ablakban adjuk meg a következő mintán látható formázásokat:

54. ábra: A fényújság tulajdonságainak megadása

• Legyen a szöveg betűtípusa: Lucinda Handwriting, színe: sárga, a betűk háttérszíne:

szürke és a mérete: 7 (36pt). Ez a nagyság valószínűleg nem fog tökéletesen elférni a keretben, így meg kell a keret méretét változtatni. Álljunk a két keretet (Tartalom, Főlap)elválasztó szegélyre és nyomott bal egérgombbal húzzuk az egeret, míg el nem érjük a kívánt magasságot.


45.

• Az egész lapunk háttérszíne pedig pontosan legyen ugyanolyan, mint a Tartalom nevezetűé! (Kattintsunk jobb egérgombbal a keretben egy üres részre, majd a megjelenő gyorsmenüből válasszuk ki a Lap tulajdonságai menüpontot, majd kattintsunk a Háttér fülre és végül keressük ki a megfelelő színt!)

• Mentsük el ezt a lapot is: Keretek/Lap mentése másként, vagy Fájl/Mentés; majd a megjelenő Mentés másként ablakban ellenőrizzük, hogy a mentés helye a feladat elején létrehozott FrontP2 mappa legyen, és figyeljük a mintát (hogy tényleg a Szalagcím keretet mentjük, vagyis kék színnel ki legyen emelve a többi közül…), majd adjuk meg a keret nevét: Szalagcim.

• Tekintsük meg a böngészőben! 4. A főlap keret szerkesztése:

• Kattintsunk a Főlap keret területén levő Új lap gombra! • Készítsünk egy táblázatot -a már tanult módon-, melynek 1 sor és 2 oszlopa legyen.

Táblázat/Beszúrás/Táblázat … • A bal oldali cellába másoljuk be a már jól ismert elérési útvonalon az O:\InfInt\In-

001\Honlapelemek\masodik\Szg_felepites.txt szöveges állomány tartalmát! Formázzuk meg a szöveget!

• A jobb oldali cellába rajzoljuk meg a számítógép elvi felépítését! (szövegdoboz és nyilak használata)

• Formázzuk meg a táblázatot! (Kattintsunk jobb egérgombbal a táblázat területére, majd a felbukkanó gyorsmenüből válasszuk ki a Táblázat tulajdonságai… menüpontot…)Világos szegély: világoskék, sötét szegély: sötétkék legyen! A táblázat celláinak hátteréül adjuk meg a O:\InfInt\In-001\Honlapelemek\masodik\back1.jpg képfájlt, az egész lap hátteréül pedig az ugyanitt található Santa Fe vakolat.gif képfájlt.

• Mentsük a lapot Fájl/Mentés másként… C:\Munka\FrontP2\folap.html néven.


46.

Előkészületek: Hozzunk létre egy új weblapot: Fájl/Létrehozás/Lap vagy webhely… → Új weblap vagy webhely munkaablak (a képernyő jobb szélén) Új címszó alatt Üres lap A célunk az, hogy a Tartalom nevű keretben látható élőgombok „működjenek”, tehát legyen élő hivatkozás létező weblapokra, melyek rendre a Folap keretben jelennek majd meg (a megfelelő élőgombra kattintás eredményéül…)

3.3. A „Generációk” weblap készítésének munkafolyamata

55. ábra: Az elkészítendő „Generációk” weblap Lap nézetben

• Mentsük is el azonnal a megfelelő helyre C:\Munka\FrontP2\folap_generaciok.html

néven. • Lépjünk át az elso.html lapra és most már meg tudjuk adni a Generációk élőgomb

hivatkozását: jobb egérgombbal kattintsunk az élőgombra, majd a felbukkanó gyorsmenüből válasszuk ki az Élőgomb tulajdonságai… menüpontot. A megnyíló Élőgomb tulajdonságai… ablakban a Hivatkozott cím: folap_generaciok.html.

• Másoljuk be a O:\InfInt\In-001\Honlapelemek\masodik\szg_generaciok.doc szöveges állomány tartalmát a folap_generaciok.html weblapra, majd formázzuk meg a szöveget a mintán látható módon.


47.

Gyakorló feladatok: 1. Az elso.html tárolórendszerként funkcionáló lap Tartalom keretben hozza létre a további

élőgombokat: Hardver, Szoftver, Űrlap és formázza meg őket a fent tanultak alapján! 2. A Számítógép generációk lapján legyenek könyvjelzők (belső hivatkozások) a

következők: első generáció, második generáció, harmadik generáció, negyedik generáció, ötödik generáció felsorolás és az első bekezdésben valahol elhelyezkedő táblázat szó is! Mindegyik mutasson a megfelelő szövegrészre a lapon belül!

3. A lap legvégén látható egy színes táblázat, mely az egyes generációkat mutatja be egymással párhuzamosan. Készítsük el ezt a táblázatot is, ügyeljünk a rá hivatkozó könyvjelző elkészítésére!

4. Adjuk meg a megfelelő hátteret (O:\InfInt\In-001\Honlapelemek\masodik\back1.jpg) fájlból, hajtsuk végre az egyes karakter- és bekezdésformázásokat, készítsük el a felsorolásokat is!

5. Hozzunk létre egy újabb lapot és készítsük el a Hardver című témát! A műveletek sorrendje megegyezik az előzőekben tárgyalt Generációk weblapban leírtakkal. A megjelenítendő szöveg forrása: O:\InfInt\In-001\Honlapelemek\masodik\Hardver.txt (Bár a mintán nem látszik, de a Plotter képén kívül még megjelenítésre került egy monitor és egy optikai tárakról készült kép is. A képek megtalálhatók: O:\InfInt\In-001\Honlapelemek\masodik könyvtárban Plotter.jpg, monitor.jpg és discs.png néven.)

56. ábra: Az elkészítendő „Hardver” weblap Lap nézetben


48.

6. Hozzunk létre egy újabb lapot és készítsük el a Szoftver c. témát! A műveletek sorrendje megegyezik az előzőekben tárgyalt Hardver weblapban leírtakkal.

57. ábra: Az elkészítendő „Szoftver” weblap Lap nézetben


49.

3.5. Az „Űrlapok” weblap készítésének munkafolyamata


Űrlap A webhelyen található űrlap hasonlít a papíron lévőhöz. Információt lehet gyűjteni a segítségével a webhely látogatóitól, például fel lehet venni a megrendelésüket, a szállítási és számlázási adataikat. A webhely látogatói általában űrlapmezőkben adják meg az adatokat, választásaikat pedig választógombok vagy jelölőnégyzetek bejelölésével és legördülő listák elemeinek kiválasztásával jelzik. A szövegmezőkben megjegyzéseket is tehetnek. A Microsoft FrontPage lehetővé teszi, hogy a webhely látogatóitól összegyűjteni kívánt információ típusa alapján állítson össze űrlapot, akár úgy, hogy egy üres űrlapból indul ki, és (mezők hozzáadásával) egyénileg szerkeszti azt meg, akár úgy, hogy az Űrlap varázslót hívja segítségül. Megadhatja, hogy a webhely látogatói által beírt adatokat–az űrlaperedményeket – hogyan szeretné összegyűjteni, és eldöntheti hogyan szeretné az eredményeket a visszaigazoló lapon megjeleníteni a weblap. Az elektronikus űrlap Microsoft FrontPage programmal való létrehozása több lépésben történik. Miután mindegyikkel végzett, lehetősége van arra, hogy visszatérjen és megváltoztasson bizonyos tulajdonságokat. Ha például kibővült az Ön által kínált termékek listája, az új termékeket felveheti arra a legördülő listára, amelyről a webhely látogatója választ. Úgy is dönthet, hogy az űrlapok értékelésekor kapott eredmények e-mailben történő továbbítása helyett a FrontPage inkább egy adatbázist hozzon létre az adatok tárolására.

Általánosan használt űrlaptípusok • Elérhetőségi adatok űrlap • Igénylőlap • Szállítási és számlázási információt tartalmazó megrendelőlap • Visszajelzőlap • Vendégkönyv • A látogatók számára a webhelyen történő keresést lehetővé tevő keresési űrlap • A webhely látogatójának felhasználónevét és jelszavát kérő bejelentkezési űrlap

Űrlap létrehozása (Lap nézetben) Önállóan: Beszúrás/Űrlap/Űrlap, majd űrlapmezők felvétele. Űrlap beszúrásakor a e egy szaggatott vonallal körülhatárolt téglalap alakú terület jelenik meg, amelyben van egy Elküldés és egy Alaphelyzet gomb. A téglalap alakú területen belülre szöveget írhat és űrlapmezőket (például beviteli mezőket, választógombokat, jelölőnégyzeteket, legördülő listákat és nyomógombokat) vehet fel. Varázsló segítségével: Fájl/Létrehozás/Lap vagy webhely…. A megjelenő Új weblap vagy webhely munkaablak Új dokumentum sablon alapján címszó alatt Weblapsablonok hivatkozásra kattintsunk. A felbukkanó Általános lapon kattintson az Űrlap varázsló ikonra, majd OK gombra kattintsunk! Megjegyzés: Az űrlap működésének ellenőrzéséhez először közzé kell tennie az azt tartalmazó webhelyet egy olyan webkiszolgálón, amelyen Front Page Server Extensions vagy a Microsoft SharePoint Team Services szolgáltatása fut. Azt, hogy ezek valamelyike telepítve van-e, a webkiszolgálót felügyelő rendszergazda vagy az internetszolgáltató tudja


50.

megmondani. A webhely közzététele után az űrlap ellenőrzéséhez kattintson a Megtekintés böngészővel gombra.

Űrlapmező törlése (Lap nézetben) Az űrlapmezők szükség szerint törölhetők. Kattintsunk rá, majd DELETE billentyű megnyomása. Vannak rejtett mezők, melyek törlése a nem rejtetténél kicsit bonyolultabb: Kattintson az űrlapra jobb gombbal, majd a helyi menüből, majd Űrlaptulajdonságok / Speciális. Jelölje ki a listán a rejtett mezőt, majd kattintson az Eltávolítás gombra.

Különböző űrlapmezők

Megnevezés Funkciója Megjelenése

Beviteli mező Szövegek, számok bevitele Pl.:e-mail cím:

gipsz.jakab@free

Választógomb (radiogomb) Több lehetőség közüli választás A B C

Szövegterület egy- vagy többsoros szöveg bevitele (görgethető)

Pl.: vendégkönyv egy- vagy többevitelére alkagögethető

Legördülő menü a választási lehetőségek listán való megjelenítése (1, v. több lehetőséget is enged) terméket:

2. termék

Jelölőnégyzet Szintén a választhatóság témakörébe tartozik (két állapotot enged: teljesül, vagy sem) Pl.: Igen

Nyomógomb Rá kattintva egy meghatározott esemény történik Pl.: alaphelyzet visszaállítása

Alaphelyzet

Speciális gomb Írható hozzá parancsfájl, amellyel testre szabható az űrlapot „képessége”.

Csoportpanel Ha egy csoport összefüggő vezérlőt vagy szöveget kell elkülöníteni a aktuális űrlapon található többi információtól.

Fájlfeltöltés fájlt küldése a webhelyre Tallóz / Elküldés

Elküldés Alaphelyzet

Jelszómező csak jelszó megadása után lehessen belépni a webhelyre (tul.képp: egy egysoros beviteli mező, tartalma a világ fele titkosítva!)

*******Jelszó

Elküldés


51.

Űrlapmezők tulajdonságainak beállítása:

Szövegdoboz tulajdonsága ablak: Mezők

Név A beviteli mező (belső) azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott beviteli mezőt.

Alapérték A webhely első alkalommal történő megnyitásakor már megjelenik egy adott szöveg a beviteli mezőben.

Szélesség (karakter)

A beviteli mező hány karakter széles legyen

Jelszó Igen / Nem, attól függően, hogy a beviteli mező jelszót tartalmaz-e vagy sem, így tartalma titkosítható-e vagy sem

Bejárási sorrend

58. ábra: Szövegdoboz tulajdonságainak megadása

Szövegterület tulajdonságai ablak Mezők

Név A szövegterület azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt.

Alapérték A webhely első alkalommal történő megnyitásakor már megjelenik egy adott szöveg a szövegterületen.

Szélesség (karakter)

A szövegterület hány karakter széles legyen

Sorok száma A szövegterület hány szövegsor magas legyen Bejárási sorrend

59. ábra: Szövegterület tulajdonságainak megadása


52.

Jelölőnégyzet tulajdonságai ablak: Mezők

Név A jelölőnégyzet azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt.

Érték Az űrlapmezőhöz rendelendő érték. Ha a jelölőnégyzet be van jelölve, ez az érték szerepel az űrlap értékelésekor kapott eredmények között

Alapállapot Bejelölve/Nincs bejelölve, attól függően, hogy a jelölőnégyzet az űrlap első megnyitásakor alapértelmezés szerint be legyen jelölve, vagy sem.

Bejárási sorrend

60. ábra: Jelölőnégyzet tulajdonságainak megadása

Választókör tulajdonságai ablak: Mezők

Név A választókör azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt.

Érték Az űrlapmezőhöz rendelendő érték. Ha a választókör be van jelölve, ez az érték szerepel az űrlap értékelésekor kapott eredmények között

Alapállapot Bejelölve/Nincs bejelölve, attól függően, hogy a választókör az űrlap első megnyitásakor alapértelmezés szerint be legyen jelölve, vagy sem.

Bejárási sorrend

61. ábra: Választókör tulajdonságainak megadása

Legördülő menü tulajdonságai ablak Mezők Funkciók

Név A legördülő menü azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt.

Magasság hány sornyi szöveget szeretnénk megjeleníteni egyszerre Több elem is megjeleníthető

Igen /Nem, attól függően, hogy egyszerre több elemet is ki lehessen-e választani, vagy sem.

Gombok Funkciók


53.

A lenyíló listában megjelenítendő választási lehetőségek felvételéhez kattintsunk a Hozzáadás gombra.

Választható elem mező

be írjunk be egy a lenyíló listában megjelenítendő választási lehetőséget.

Érték megadása jelölőnégyzet

Ha azt szeretnénk, hogy a választási lehetőség értéke eltérjen a lenyíló listában megjelenő szövegtől, jelöljük be, majd írjuk be az értéket a megfelelő mezőbe.

Hozzáadás

Alapállapot Ha azt szeretnénk, hogy az űrlap első alkalommal történő megnyitásakor az adott választási lehetőség legyen alapértelmezés szerint kijelölve: Kijelölve / Nincs kijelölve.

Módosítás Eltávolítás Feljebb és Lejjebb

A választható lehetőségek megjelenítési sorrendjének megváltoztatása

62., 63. ábrák: Legördülő lista tulajdonságainak megadása és új elem felvétele

Nyomógomb Mezők

Név A nyomógomb azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt.

Érték vagy felirat A nyomógombon szereplő szöveg Megadhatjuk a gomb típusát Normál egyszerű nyomógomb, mi adjuk meg a funkcióját Elküldés olyan nyomógomb, melynek funkciója az űrlapon szereplő adatok

elküldése

Gomb típusa

Alaphelyzet Visszaállítja az eredeti mezőértékeket Alapállapot Bejelölve/Nincs bejelölve, attól függően, hogy a választókör az űrlap első megnyitásakor

alapértelmezés szerint be legyen jelölve, vagy sem. Bejárási sorrend


54.

64. ábra: Nyomógomb tulajdonságainak megadása

Gyakorló feladatok Hozza létre az alábbi űrlapot a 3.5.1. pontban leírt elmélet alapján!

65. ábra: Az elkészítendő űrlap

frontpage jegyzet

Documents