FrontPage segédlet
Váraljai Mariann
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ésformá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
1.
FrontPage segédlet
Váraljai Mariann
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.
2.
FrontPage segédlet
Váraljai Mariann
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
3.
FrontPage segédlet
Váraljai Mariann
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 1.
2.
10.
3. 4.
9.
8. 7.
5. 4. ábra: A Front Page képernyőterve
4.
6.
FrontPage segédlet
1.
Váraljai Mariann
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ő A munkafelület jobb szélén és az alján helyezkednek el, segítenek sávok 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 Lehetőség van arra, hogy a munkaterületet többféle nézetben is ablaktáblái 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 Segítségükkel lehet az éppen szerkesztett munkaterületek között fül(ek) 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
5.
FrontPage segédlet
Váraljai Mariann
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
6. ábra: A Front Page Jelentések nézetben
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
6.
FrontPage segédlet
Váraljai Mariann
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 meghatározva azok fontossági sorrendjét. Elemei: Állapot Feladat Felelős Prioritás Társított fájlok Módosítás Leírás
feladatokról
szolgáltat
információt,
a feladat állapot (pl.:nincs elkezdve, szerkesztés alatt áll, befejezett) a feladat megnevezése a feladathoz rendelt személy A feladatok elvégzésének fontossági sorrendje (high, medium, low) az oldal megnevezése a módosítás dátuma 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.
7.
FrontPage segédlet
Váraljai Mariann
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: Egy szó: Egy szövegsor:
Húzza az egeret a szöveg fölött Kattintson duplán a szóra Vigye az egérmutatót a szöveg bal szélére, amíg egy jobbra mutató nyíllá nem válik, majd kattintson
8.
FrontPage segédlet Egy bekezdés: Több bekezdés: Egy kép:
Váraljai Mariann 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 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é 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átum/Betűtípus/Betűtípus fül Formátum/Betűtípus/Térköz és pozíció fül
Formázási lehetőség: betűtípus, betűstílus, betűméret, szín, effektusok 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átum/Bekezdés/Behúzás és térköz fül Formátum/Szegély és mintázat/Szegélyek fül Formátum/Szegély és mintázat/Mintázat fül
Formázási lehetőség: igazítás, behúzás, térköz beállítás, stílus, szín, szélesség, belső margók kitöltés, mintázat
9.
FrontPage segédlet
Váraljai Mariann
10. ábra
11. ábra
12. ábra: Bekezdésformázó műveletek
10.
FrontPage segédlet
Váraljai Mariann
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
11.
FrontPage segédlet
Váraljai Mariann
Á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.
12.
FrontPage segédlet
Váraljai Mariann
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 2.2.1. Szükséges fogalmak 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
13.
FrontPage segédlet
Váraljai Mariann
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
14.
FrontPage segédlet
Váraljai Mariann
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
15.
FrontPage segédlet
Váraljai Mariann
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:
16.
FrontPage segédlet
Váraljai Mariann 2.
3.
1.
4.
5. 23. ábra: Hivatkozás beállításának lépései 1. 2. 3.
a Hivatkozott cím: Létező fájl, vagy weblap; a Megjelenő szöveg: Vissza; a Hely: FrontPage [mappa];
4. 5.
a Cím: index.html legyen, majd 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.
17.
FrontPage segédlet
Váraljai Mariann
25. ábra: A 3. weblap böngészőben megjelenő képe
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:
18.
FrontPage segédlet
Váraljai Mariann
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 19.
FrontPage segédlet
Váraljai Mariann
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
20.
FrontPage segédlet
Váraljai Mariann
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
21.
FrontPage segédlet
Váraljai Mariann
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 5.
6. 7. 8. 9.
ikonjára kattintva. Szokásos eszköztár 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 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. 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. Formázzuk meg a mintán látható módon. A bekezdések elnevezése pontosan egyezzen meg a felsorolásban szereplőkkel! 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: 60as évek, majd az OK gombra kattintsunk. (Hatása: szaggatottan aláhúzza a szövegben a 60-as évek címet)
22.
FrontPage segédlet
Váraljai Mariann
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\In001\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.
23.
FrontPage segédlet
Váraljai Mariann
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.
24.
FrontPage segédlet
Váraljai Mariann
36. ábra: A 4. weblap böngészőben megjelenő képe
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.
25.
FrontPage segédlet
Váraljai Mariann
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!
26.
FrontPage segédlet
Váraljai Mariann
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.
27.
FrontPage segédlet
Váraljai Mariann
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 2.5.1. Szükséges fogalmak 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.
28.
FrontPage segédlet
Váraljai Mariann
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: Kijelölés
Átméretezés A táblázat megfelelő pontján állva kattintsunk jobb egérgombbal, majd:
Táblázat Cella Sor Oszlop Táblázat Cella Sor Oszlop
Törlés
Táblázat Cella Sor
Táblázat / Kijelölés / Táblázat Táblázat / Kijelölés / Cella Táblázat / Kijelölés / Sor Táblázat / Kijelölés / Oszlop Táblázat tulajdonságai / Szélesség megadása Táblázat tulajdonságai / Magasság megadása Cella tulajdonságai / Szélesség megadása Cella tulajdonságai / Magasság megadása Táblázat / Kijelölés / Sor, majd Cella tulajdonságai / Szélesség megadása Cella tulajdonságai / Magasság megadása 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 / Kijelölés / Táblázat, majd Cella törlése Táblázat / Kijelölés / Cella, majd Cella törlése Táblázat / Kijelölés / Sor, majd Cella törlése
29.
FrontPage segédlet
Beszúrás
Váraljai Mariann Oszlop Táblázat Cella Sor Oszlop
Táblázat / Kijelölés / Oszlop, majd Cella törlése Táblázat / Beszúrás / Cella Táblázat / Beszúrás / Sorok vagy oszlopok 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. a táblázat elrendezésének
a táblázat szegélyeinek beállítása
a táblázat hátterének beállítása
a táblázat helyzete a weblapon a táblázat és a szöveg egymáshoz viszonyított helyzete a cellák közötti távolság megadása a cella szegélye és tartalma közötti távolság oszlopok szélességét képpontban vagy százalékban. oszlopok magasságát képpontban vagy százalékban a táblázatszegély kívánt szélessége képpontban a táblázatszegély színének beállítása térhatás eléréséhez válasszuk a kétszínű szegélyt
Igazítás Szöveg körbefuttatása Cellaköz Cellamargó Szélesség megadása Magasság megadása Méret Szín Világos szegély és Sötét szegély Cella- és táblázatszegélyek együttes megjelenítése Háttér / Szín Háttér / Háttérkép használata / Tallózás / Fájlnév / Megnyitás gomb
ha a színeket mind a cellákban, mind a szegélyeken alkalmazni akarjuk a táblázat háttérszínének beállítása 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.
30.
FrontPage segédlet rovat tartalmának igazítása
Váraljai Mariann Elrendezés /Vízszintes igazítás Elrendezés/ Függőleges igazítás Elrendezés / Rovatfej jelölőnégyzet
rovat beállítása rovatfejként Elrendezés / Nincs sortörés sortörés megakadályozása a jelölőnégyzetet cellákban
rovatszegélyek beállítása
balra, jobbra, középre, sorkizárt felülre, középen, alapvonalra, alulra alapértelmezetten félkövé
Elrendezés/ Cellakiterjedés (sor) Elrendezés/ Cellakiterjedés (oszlop) Szín
a cellák hány sort fogjanak át a cellák hány oszlopot fogjanak át
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 cellaszegély színének beállítása
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 oszlopszélesség egységesítése
Táblázat / Kijelölés / Oszlop
azonos sormagasság
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.
31.
FrontPage segédlet
Váraljai Mariann
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
32.
FrontPage segédlet
Váraljai Mariann
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.
33.
FrontPage segédlet
Váraljai Mariann
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.
34.
FrontPage segédlet
Váraljai Mariann
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.
35.
FrontPage segédlet
Váraljai Mariann
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/
36.
FrontPage segédlet
Váraljai Mariann
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
37.
FrontPage segédlet
Váraljai Mariann
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…
38.
FrontPage segédlet
Váraljai Mariann
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.)
39.
FrontPage segédlet
Váraljai Mariann
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:
40.
FrontPage segédlet
Váraljai Mariann
Á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.
41.
FrontPage segédlet
Váraljai Mariann
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…)
Szalagcím keret
Tartalom keret
Főlap keret
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
42.
FrontPage segédlet
Váraljai Mariann
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 ○ Háttérszín: piros Effektus: Izzás ○ Az effektus színe: rózsaszín Szélesség: 120 (képpont), ○ Magasság: 24
43.
FrontPage segédlet
Váraljai Mariann
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.
44.
FrontPage segédlet
Váraljai Mariann
• 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\In001\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.
45.
FrontPage segédlet
Váraljai Mariann
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.
46.
FrontPage segédlet
Váraljai Mariann
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\In001\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
47.
FrontPage segédlet
Váraljai Mariann
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
48.
FrontPage segédlet
Váraljai Mariann
3.5. Az „Űrlapok” weblap készítésének munkafolyamata 3.5.1. Szükséges fogalmak Ű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
49.
FrontPage segédlet
Váraljai Mariann
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
Választógomb (radiogomb)
Több lehetőség közüli választás
Pl.:e-mail
cím:
gipsz.jakab@free
A
B
C
Pl.: vendégkönyv egy- vagy töb bevitelére alka gögethető
Szövegterület
egy- vagy többsoros szöveg bevitele (görgethető)
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:
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.:
Nyomógomb
Rá kattintva egy meghatározott esemény történik
2. termék
Igen
Pl.: alaphelyzet visszaállítása
Speciális gomb Csoportpanel
Alaphelyzet
Írható hozzá parancsfájl, amellyel testre szabható az űrlapot „képessége”. 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. Tallóz / Elküldés
Fájlfeltöltés
fájlt küldése a webhelyre
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!)
Elküldés
50.
*******
Alaphelyzet
Jelszó
Elküldés
FrontPage segédlet
Váraljai Mariann
Űrlapmezők tulajdonságainak beállítása: Szövegdoboz tulajdonsága ablak: Mezők Név Alapérték Szélesség (karakter) Jelszó
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. A webhely első alkalommal történő megnyitásakor már megjelenik egy adott szöveg a beviteli mezőben. A beviteli mező hány karakter széles legyen 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 Alapérték Szélesség (karakter) Sorok száma Bejárási sorrend
A szövegterület azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt. A webhely első alkalommal történő megnyitásakor már megjelenik egy adott szöveg a szövegterületen. A szövegterület hány karakter széles legyen A szövegterület hány szövegsor magas legyen
59. ábra: Szövegterület tulajdonságainak megadása
51.
FrontPage segédlet
Váraljai Mariann
Jelölőnégyzet tulajdonságai ablak: Mezők Név Érték Alapállapot
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. 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 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 Érték Alapállapot
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. 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 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 Magasság Több elem is megjeleníthető
Funkciók 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. hány sornyi szöveget szeretnénk megjeleníteni egyszerre Igen /Nem, attól függően, hogy egyszerre több elemet is ki lehessen-e választani, vagy sem.
Gombok
Funkciók
Név
52.
FrontPage segédlet
Váraljai Mariann
A lenyíló listában megjelenítendő választási lehetőségek felvételéhez kattintsunk a Hozzáadás gombra.
Hozzáadás
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. 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.
Alapállapot 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 Érték vagy felirat Gomb típusa
Alapállapot
A nyomógomb azonosítására szolgáló név. Az űrlaperedmények között azonosítja az adott mezőt. A nyomógombon szereplő szöveg Megadhatjuk a gomb típusát egyszerű nyomógomb, mi adjuk meg a funkcióját Normál olyan nyomógomb, melynek funkciója az űrlapon szereplő adatok Elküldés elküldése Alaphelyzet Visszaállítja az eredeti mezőértékeket 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
53.
FrontPage segédlet
Váraljai Mariann
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
54.
