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 - 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.
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.
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. 9. 3. 4. 8. 5. 7. 6. 4. ábra: A Front Page képernyőterve 4.
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 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 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 5.
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.
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 Feladat Felelős Prioritás 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) 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. 7.
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.
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á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.
10. ábra 11. ábra 12. ábra: Bekezdésformázó műveletek 10.
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.
Á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.
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.
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.
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.
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 Szín: lila Betűstílus: Félkövér Effektusok: Villogó Betűméret: 5(18pt) 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.
2. 3. 1. 4. 5. 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. 17.
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.
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.
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.
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.
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, Ismétlés: Folyamatosan, Viselkedése: Gördülő, 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) 22.
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. 23.
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.
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.
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.
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.
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.
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örlés Táblázat Cella Sor Oszlop Táblázat Cella Sor Oszlop 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.
Beszúrás 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 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 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 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.
rovat tartalmának igazítása rovat beállítása rovatfejként sortörés megakadályozása a cellákban rovatszegélyek beállítása Elrendezés /Vízszintes igazítás Elrendezés/ Függőleges igazítás Elrendezés / Rovatfej jelölőnégyzet Elrendezés / Nincs sortörés jelölőnégyzetet Elrendezés/ Cellakiterjedés (sor) Elrendezés/ Cellakiterjedés (oszlop) Szín Világos szegély és Sötét szegély balra, jobbra, középre, sorkizárt felülre, középen, alapvonalra, alulra alapértelmezetten félkövé a cellák hány sort fogjanak át a cellák hány oszlopot fogjanak át a cellaszegély színének beállítása 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 oszlopszélesség egységesítése Táblázat / Kijelölés / Oszlop Táblázat / Kijelölés / Sor azonos sormagasság 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.
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.
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.
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 - 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.
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.
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.
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.