Weblapszerkesztés Formázás eszköztár .................................................................................................................... 1 Szokásos eszköztár..................................................................................................................... 3 Lap tulajdonságai ....................................................................................................................... 4 Táblázatok .................................................................................................................................. 5 Képek ....................................................................................................................................... 10 Hivatkozások............................................................................................................................ 11 Kép és hivatkozás: interaktív területek .................................................................................... 14
A Microsoft Frontpage program egy WYSIWYG (What You See Is What You Get) típusú weblapszerkesztő program, ami annyit jelent, hogy amit szerkesztés közben a képernyőn látunk, azt (elvileg) ugyanúgy fogják a különböző böngészőprogramok is megjeleníteni. Persze előfordulhat, hogy a különböző böngészőtípusok eltérően jelenítik meg az oldalt, ezért érdemes ismerni a HTML kódokat is, hogy a szükséges javításokat kézzel is elvégezhessük, ha szükséges. Először ismerkedjünk meg a Formázás eszköztár adta lehetőségekkel.
Formázás eszköztár
A szöveg stílusának beállítása
Formátum/ Betűtípus
A szöveg betűtípusának beállítása
Formátum/ Betűtípus
Betűméret kiválasztása
Formátum/ Betűtípus
A betűket megvastagíthatjuk, Formátum/ használhatunk dőlt és aláhúzott típust is Betűtípus (ez utóbbit, ha lehet, kerüljük el, mert a linkek is aláhúzva jelennek meg, ami félreértésre adhat okot). Ez csak egy aláhúzott szöveg Ez pedig a Sulinet honlapjára mutató link A bekezdéseket balra, középre, jobbra tudjuk igazítani, illetve sorkizárttá tudjuk tenni.
Formátum/ Bekezdés
Használhatunk számozott, ill. felsoroláslistákat is, ha a listaelemeket kijelöljük és a megfelelő ikonokra kattintunk.
Formátum/ Felsorolás és számozás
1
A bekezdések behúzását tudjuk beállítani (a későbbiekben látni fogjuk, hogy a stíluslapok használatával ezt elegánsabban is megoldhatjuk).
Formátum/ Bekezdés
Szöveg háttérszínének beállítása Szöveg színének beállítása Szegélyek beállítása (meghatározhatjuk, hogy a szöveg vagy táblázat esetén hol legyenek szegélyek megjelenítve)
Formátum/ Betűtípus Formátum/ Szegély és mintázat
A szöveg begépelése után (vagy pl. egy szövegszerkesztő programból való exportálás után) elkezdhetjük a szöveg formázását. A szöveget különböző beépített stílusok szerint módosíthatjuk. A stílusokat egy legördülő menü segítségével választhatjuk ki. A legördülő menü
A gyakrabban használt stílusok eredménye
Címsor 1 Címsor 2
Cím
Listajeles felsorolás stb. stb.
Címsor 3
Definiált kifejezés Definíció
Címsor 4
Formázott
Címsor 5 Címsor 6
1. Számozott lista 2. stb. 3. stb.
A szöveg betűtípusát is egy legördülő listából választhatjuk ki. (A különböző betűtípusok használatával óvatosan bánjunk, hiszen nem biztos, hogy az a betűtípus, amit mi használunk, az mások gépén is installálva van. Ebben az esetben nem a mi általunk meghatározott betűtípus lesz látható, hanem a böngésző egy másikkal helyettesíti azt.)
2
Szokásos eszköztár
A szokásos eszköztáron az Office programcsomagban már megszokott ikonokat ismerhetjük fel. Új oldal készítése
Fájl/ Új dokumentum
oldal megnyitása
Fájl/Megnyitás
az aktuális oldal elmentése
Fájl/Mentés
az aktuális oldal nyomtatása
Fájl/Nyomtatás
az aktuális oldal megtekintése az alapértelmezett böngészőben
Fájl/ Megtekintés böngészővel
helyesírás-ellenőrzés elindítása
Eszközök/Helyesírás
a kijelölt rész kivágása (vágás után a kijelölt objektumok az eredeti helyükről eltűnnek és a vágólapra kerülnek)
Szerkesztés/Kivágás
a kijelölt rész vágólapra másolása
Szerkesztés/Másolás
beillesztés a vágólapról
Szerkesztés/Beillesztés
az utolsó művelet visszavonása
Szerkesztés/Visszavonás
az eddig visszavont műveletek visszaállítására szolgál
Szerkesztés/Mégis
Táblázat beillesztése. A megjelenő stilizált táblázat segítségével kijelölhetjük, hogy hányszor hányas táblázatot szeretnék beilleszteni.
Táblázat/ Beszúrás / Táblázat
Kép beillesztése fájlból.
Beszúrás/ Kép / Fájlból
Hivatkozás definiálása
Beszúrás/ Hiperhivatkozás
Frissíti a dokumentumot (betölti az utoljára elmentett verziót).
Nézet/ Frissítés
Leállítja az adott oldal betöltését Megmutatja a speciális formázó karaktereket a szövegben (Pl. táblázat határvonala, sortörés...) Segítséget ad a kiválasztott menüpontról, ikonról stb.
3
A további eszköztárakat a Nézet / Eszköztárak menüpontban választhatjuk ki, illetve tüntethetjük el.
Lap tulajdonságai Nézzük, hogy hogyan állíthatjuk be a szerkesztett oldalunk jellemzőit! (Fájl / Tulajdonságok...)
Általános
A Hely sor tartalmazza a szerkesztett oldal útvonalát és nevét. A Cím sorban adhatjuk meg az oldalunk címét. (Az a szöveg, ami a böngésző címsorában látszik.) Lap leírása Kulcsszavak Az alaphely sor kitöltésével a relatív címeket abszolút címekké konvertálhatjuk Alapértelmezett megjelenési hely: Ha használunk frame-eket, akkor itt adhatjuk meg, hogy az oldalunkról meghívott linkek melyik frame-be töltődjenek be alapértelmezésben. Weblap írásiránya Háttérhang: A háttérzene megadása (csak bizonyos böngészők tudják értelmezni). A formátum wav, mid és au lehet. Az Ismétlések száma mezőben állíthatjuk be, hogy a
4
háttérzene hányszor ismétlődjön. (A végtelen kapcsoló kiválasztásával végteleníthetjük a lejátszást). Formázás A Formázás részben megadhatjuk a háttérképet. Ha a vízjel opciót is kiválasztjuk, akkor a háttérkép az oldal gördítése során egyhelyben marad. (Nem mindegyik böngésző támogatja!) A Színek részben kiválaszthatjuk a háttérszínt, a szöveg, a hivatkozások, felkeresett hivatkozások és aktív hivatkozások színét. Speciális Az oldal margóját (a böngésző kerete és a tényleges tartalom közti üres sáv) ezen az oldalon állíthatjuk be. Stílusok
Platform: Itt adhatja meg, hogy a parancsfájlokat író tervezésidejű vezérlők az ügyfélgépen vagy a kiszolgálón hajtsák-e végre a parancsfájlokat. Kiszolgáló: Itt adhatja meg, hogy a kiszolgáló-parancsfájlokat író tervezésidejű vezérlők melyik parancsnyelvet használják. Ügyfél: Itt adhatja meg, hogy a kiszolgáló-parancsfájlokat író tervezésidejű vezérlők melyik parancsnyelvet használják.
Táblázatok Táblázatot az ikonnal, vagy a Táblázat / Beszúrás / Táblázat menüponttal illeszthetünk be, a megjelenő ablakban beállíthatjuk a táblázat fontosabb tulajdonságait: o sor-, oszlopszám o igazítás o szélesség, magasság o szegélyezés o cellamargó, cellaköz o háttérszín, háttérkép
5
Most ismerkedjünk meg a Táblázat menü által nyújtott lehetőségekkel.
Táblázat rajzolása
Ide kattintva táblázatot rajzolhatunk. Először az egérmutatót a bal felső saroktól a jobb alsó sarokig húzva adjuk meg a táblázat külső szegélyét, majd húzzuk meg az oszlopokat és sorokat elválasztó belső vonalakat.
Beszúrás / Táblázat
Ide kattintva a táblázatot egy párbeszédpanel segítségével hozhatjuk létre, amelyben beállíthatjuk a táblázat tulajdonságait.
Beszúrás / Sorok vagy oszlopok
Erre a parancsra kattintva sorokat vagy oszlopokat szúrhatunk be a táblázatba. Ha a parancs használata előtt kijelölünk egy sort vagy oszlopot, az új sor vagy oszlop örökli a kijelölt sor vagy oszlop celláinak tulajdonságait, például a háttérszínt, valamint a vízszintes és függőleges igazítást.
Beszúrás / Cella
Erre a parancsra kattintva egy cellát szúrhatunk be a táblázatba. A FrontPage cellajellemzők (például magasság és szélesség) nélkül szúrja be a cellát. A cella beszúrása előtt helyezzük a beszúrási pontot egy cellába, vagy jelöljünk ki egy cellát, sort vagy oszlopot.
6
Beszúrás / Felirat
Erre a parancsra kattintva beszúrhatunk egy táblázatcímet vagy egy kifejezést, amely összefoglalja a táblázat tartalmát. Akkor szúrhatunk be feliratot, amikor a beszúrási pont egy cellában van, vagy egy cella, sor vagy oszlop ki van jelölve. A felirat alapértelmezés szerint a táblázat fölött, középre igazítva jelenik meg.
Cella törlése
Ide kattintva törölhetjük a kijelölt táblázatcellákat.
Kijelölés / Táblázat
Erre a parancsra kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatot.
Kijelölés / Oszlop
Ide kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatoszlopot.
Kijelölés / Sor
Erre a parancsra kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatsort.
Kijelölés / Cella
Ide kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatcellát.
Cellák egyesítése
A kijelölt cellákat összevonhatjuk.
Cellák felosztása
A kijelölt cellákat több cellára oszthatjuk fel.
Táblázat felosztása
A táblázatot több, különálló táblázatra bonthatjuk
Automatikus formázás
A beépített formátumok alapján átformázhatjuk a táblázatunkat (pl. klasszikus, színes, stb.).
Azonos sormagasság
Ide kattintva a táblázat összes kijelölt sorát azonos magasságúra alakíthatjuk.
Azonos oszlopszélesség
Ezzel a menüponttal a táblázat összes kijelölt oszlopát azonos szélességűre alakíthatjuk.
Automatikus méretezés a tartalomhoz
Erre a parancsra kattintva beállíthatja, hogy az összes oszlop szélessége automatikusan illeszkedjen a táblázat tartalmához.
Konvertálás / Szöveg táblázattá
Ide kattintva a kijelölt szöveget táblázattá alakíthatjuk. A parancs használata előtt elválasztó karakterek hozzáadásával meg kell jelölnünk, hogy hol szeretnénk a szöveget oszlopokra és sorokra osztani. Az oszlopok elválasztásához használhatunk például vesszőket, a sorok végét pedig bekezdésjelekkel jelölhetjük.
Konvertálás / Táblázat szöveggé
Erre a parancsra kattintva a kijelölt táblázatot szöveggé alakíthatjuk. Mindegyik táblázatcellából külön bekezdés lesz.
7
Táblázat tulajdonságai / Táblázat
Ide kattintva megjeleníthetjük a Táblázat tulajdonságai párbeszédpanelt, amelyben a táblázat tulajdonságait (például az elrendezését, méretét vagy háttérszínét) tekinthetjük meg és állíthatjuk be.
Kitöltés / Lefelé
Ide kattintva a táblázatban kijelölt tartomány legfelső celláinak tartalmát és formázását az alattuk lévő táblázatcellákba másolhatjuk.
Kitöltés / Jobbra
Hasonló, mint a fenti funkció, csak a cellától jobbra lévő cellákra érvényes.
Táblázat tulajdonságai / Cella
Erre a parancsra kattintva megjeleníthetjük a Cella tulajdonságai párbeszédpanelt, amelyen a táblázatcella tulajdonságait (például a magasságát és szélességét) tekinthetjük meg és állíthatjuk be.
Táblázat tulajdonságai / Felirat
Erre a parancsra kattintva megjeleníthetjük a Táblázat feliratának tulajdonságai párbeszédpanelt, amelyen a táblázat feliratának tulajdonságait (például az elhelyezését) tekinthetjük meg és állíthatjuk be.
A cellatulajdonságok megváltoztatása
8
Vízszintes igazítás (balra, jobbra, középre, sorkizárás)
a legördülő listából kiválasztható, hogy a cellatartalom vízszintesen hogyan igazodjon (balra, középre, jobbra, sorkizártan)
Függőleges igazítás (felülre, középen, alapvonalra, alulra)
a legördülő listából kiválasztható, hogy a cellatartalom függőlegesen hogyan igazodjon (felülre, középen, alapvonalra, alulra)
Rovatfej
a cellatartalom vastag betűkkel jelenik meg
Nincs sortörés
ezzel állíthatjuk be, hogy a cella tartalmát a böngésző ne tördelje szét.
Háttérkép használata
a cella háttérképét adhatjuk meg
Háttér / Szín
a cella háttérszínét adhatjuk meg
Szegélyek / Szín
a keret színét adhatjuk meg
Világos szegély
a világosabb keret színét adhatjuk meg
Sötét szegély
a sötétebb keret színét adhatjuk meg
Szélesség megadása
a cella szélességét állíthatjuk be pixelekben vagy százalékos formában
Magasság megadása
a cella magasságát állíthatjuk be pixelekben vagy százalékos formában
Cellakiterjedés (sor)
megadhatjuk, hogy az aktuális cella hány cellának megfelelő helyet foglaljon el a sorban
Cellakiterjedés (oszlop)
megadhatjuk, hogy az aktuális cella hány cellának megfelelő helyet foglaljon el az oszlopban
Cellák formázása elérhető a jobbklikk / Cella tulajdonságai menüpontban, ahol kijelölt cellák, sor(ok), oszlop(ok) egyedi tulajdonságait állíthatjuk be (táblázathoz hasonlóan).
9
Képek Képek beszúrása: Beszúrás / Kép / Fájlból Képek formázása: jobbklikk / Kép tulajdonságai
Megjegyzés: kép keretszínének megváltoztatása a Stílus gomb segítségével zajlik Képek hivatkozása Elkészítése megegyezik a szöveges hivatkozások létrehozásával. Lehetőség van arra interaktív területek (lásd: később) használatával, hogy ha a felhasználó egy kép különböző pontjaira kattint, akkor a kurzor helyétől függően más és más oldalak kerülnek az aktuális oldalak helyére. Képleírás A kép felett megjelenő sárga szöveges, információs téglalap: jobbklikk / Kép tulajdonságai / Általásos / Szöveg
10
Hivatkozások Hivatkozás egy html.fájl adott pontjára: könyvjelző hivatkozás
pont
1. Hivatkozási pont elhelyezése Szövegrész kijelölése Beszúrás / Könyvjelző
2. Hivatkozás beállítása Szövegrész kijelölése Beszúrás / Hiperhivatkozás (vagy ikon kiválasztása) Dokumentum adott pontjának kiválasztása
11
Hivatkozás egy html.fájlra, webhelyre hivatkozás
Szövegrész kijelölése Beszúrás / Hiperhivatkozás (vagy Cím megadása
ikon kiválasztása)
Hivatkozás egy másik html.fájl adott pontjára hivatkozás
pont
1. Hivatkozási pont elhelyezése Szövegrész kijelölése Beszúrás / Könyvjelző 2. Hivatkozás beállítása Szövegrész kijelölése Beszúrás / Hiperhivatkozás (vagy ikon kiválasztása) Dokumentum kiválasztása Dokumentum adott pontjának kiválasztása (könyvjelző)
12
Cím megadása URL (Uniform Resource Locator): egységes dokumentum-meghatározó rendszer az Interneten (objektumok elérési útvonala) elérési mód domain név elérési út a domainen belül http
fontosceg.hu
minta/bemutat.html
http://fontosceg.hu/minta/bemutat.html Elemleírás A hivatkozás felett megjelenő sárga szöveges, információs téglalap
Megjelenítési hely A Megjelenítési hely (keret) gomb megnyomása után választhatjuk ki, hogy az adott hivatkozás hova töltődjön be: azonos keret, új ablak
13
Kép és hivatkozás: interaktív területek
hivatkozás
hivatkozás
hivatkozás
A Képek eszköztár
Kép beszúrása fájlból Ide kattintva egy képet szúrhatunk be az aktuális webhelyről, a webről, a Microsoft klipgyűjteményből, képolvasóból vagy a fájlrendszerből. Szöveg Ide kattintva feliratot hozhatunk létre a képen. Írjuk közvetlenül a szövegmezőbe a szöveget, majd jelöljük ki, és a betűkészletet, a méretet, a stílust és az igazítást módosítva adjuk meg a kívánt formázást. A felirathoz hivatkozás is tartozhat: a hivatkozás hozzárendeléséhez kattintsunk duplán a szövegmezőre. Miniatűrré alakítás Ide kattintva létrehozhatjuk a kijelölt kép miniatűr változatát. A parancs nem érhető el, ha a kijelölt kép túl kicsi, illetve hivatkozás, interaktív terület vagy animáció tartozik hozzá. Abszolút pozicionálás Ide kattintva abszolút helyet adhatunk meg a kijelölt weblapelem vagy szöveg számára. A weblapelem helyének megadáshoz mutassunk rá az objektumra, majd amikor a kurzor négyágú nyíllá változik, húzzuk az elemet az új helyére. Megtehetjük azt is, hogy megadunk egy-egy értéket az Elhelyezés eszköztár Balra (x koordináta) és Fent (y koordináta) beviteli mezőjében. Előbbre hozás Ide kattintva a kijelölt objektumot vagy csoportot az egymás fölött elhelyezkedő objektumok sorában egy lépéssel feljebb helyezhetjük. Hátrébb küldés Ide kattintva a kijelölt objektumot vagy csoportot az egymás fölött elhelyezkedő objektumok sorában egy lépéssel lejjebb helyezhetjük.
14
Forgatás balra Ide kattintva 90 fokkal elforgathatjuk a kijelölt képet az óramutató járásával ellentétes irányba. Forgatás jobbra Ide kattintva 90 fokkal elforgathatjuk a kijelölt képet az óramutató járásával megegyező irányba. Függőleges tükrözés Ide kattintva tükrözhetjük a képet a függőleges tengelyére. Vízszintes tükrözés Ide kattintva tükrözhetjük a képet a vízszintes tengelyére. Több kontraszt Erre a gombra kattintva növelhetjük a kijelölt kép legvilágosabb és legsötétebb részei közötti kontrasztkülönbséget. Ha növelni szeretnénk a kontrasztot, egymás után többször kattintsunk a gombra. Kevesebb kontraszt Erre a gombra kattintva csökkenthetjük a kijelölt kép legvilágosabb és legsötétebb részei közötti kontrasztkülönbséget. Ha csökkenteni szeretnénk a kontrasztot, egymás után többször kattintsunk a gombra. Több fényerő Erre a gombra kattintva növelhetjük a fényerőt a kijelölt képen. Kattintsunk többször egymás után a gombra, amíg a kép el nem éri a kívánt fényerőszintet. Kevesebb fényerő Erre a gombra kattintva csökkenthetjük a fényerőt a kijelölt képen. Kattintsunk többször egymás után a gombra, amíg a kép el nem éri a kívánt fényerőszintet. Levágás Ide kattintva levághatjuk a kijelölt kép felesleges részeit. Amikor először kattintunk erre a gombra, a képen megjelenik egy átméretezhető kijelölőkeret. Szükség szerint méretezzük át a kijelölőkeretet, majd vigyük a képnek arra a részére, amelyet meg szeretnénk őrizni. A kép felesleges részeinek levágásához kattintsunk még egyszer a gombra, vagy nyomjuk le az ENTER billentyűt. Áttetsző szín megadása Ha egy GIF formátumú kép valamelyik színét átlátszóvá szeretnénk tenni, először kattintsunk ide, majd a kép kívánt színére. Ha az adott szín már átlátszó, a kattintás hatására visszaváltozik az eredeti színére. Egy képnek egyszerre csak egy színe lehet átlátszó. Szürkeárnyalatos, fakított kép létrehozása A képet szürkeárnyalatossá, fekete-fehérré vagy halványítottá konvertálhatjuk. Fazetta Ide kattintva fazettás (rézsútosan metszett) képszéleffektust hozhatunk létre a kijelölt kép szegélye mentén. Ez akkor hasznos, amikor a képekből térhatású gombokat szeretnénk létrehozni.
15
Új mintavétel Ide kattintva új mintát vehetünk a képről. Az új mintavételhez jelöljük ki a képet, méretezzük át, majd kattintsunk erre a gombra. Ezzel a képeket ténylegesen lekicsinyíthetjük. Kijelölés Ide kattintva kiválaszthatjuk a képnek azt az interaktív területét, amelyet módosítani, kivágni vagy másolni szeretnénk. Téglalap alakú interaktív terület Ide kattintva egy téglalap alakú interaktív területet hozhatunk létre a képen. A téglalapot úgy helyezhetjük el, hogy a képre kattintunk és húzással kijelöljük egy területét. Amikor ezzel elkészültünk, megjelenik a Hivatkozás beszúrása párbeszédpanel. Kör alakú interaktív terület Ide kattintva kör alakú interaktív területet hozhatunk létre egy képen. A kört úgy hozhatja létre, hogy a képre kattintva meghatározzuk a középpontját, majd a kép egy részén keresztülhúzva megadjuk a sugarát. Amikor ezzel elkészültünk, megjelenik a Hivatkozás beszúrása párbeszédpanel. Sokszög alakú interaktív terület Ide kattintva sokszög alakú interaktív területet hozhatunk létre egy képen. A sokszöget úgy hozhatjuk létre, hogy a képre kattintva meghatározzuk a sokszög első csúcsát, húzva megadjuk az első élét, majd kattintva és húzva a további éleket és csúcsokat is megadjuk. Amikor ezzel elkészültünk, megjelenik a Hivatkozás beszúrása párbeszédpanel. Három módon fejezhetjük be a sokszög megrajzolását: az élt a kezdőcsúcshoz húzhatjuk, vagy duplán kattintva az aktuális csúccsal, az ESC billentyűt lenyomva pedig az utoljára elhelyezett csúccsal köthetjük össze a kezdőcsúcsot. Interaktív területek kiemelése Ha ide kattintunk, a képen megadott interaktív területek a kép nélkül jelennek meg. Ez akkor hasznos, ha a képen elhelyezett interaktív területek körvonalai nehezen láthatók. Visszaállítás Ide kattintva visszaállíthatjuk a kijelölt kép mentett változatát. A képeffektusok a kép mentéséig nem véglegesek. A parancs segítségével visszaállíthatjuk a kép legutóbbi mentés szerinti kinézetét.
16
