Weblapszerkesztés. Formázás eszköztár

Átírás

1 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 Hivatkozások Kép és hivatkozás: interaktív területek 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 A szöveg betűtípusának beállítása Betűméret kiválasztása A betűket megvastagíthatjuk, használhatunk dőlt és aláhúzott típust is (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. Használhatunk számozott, ill. felsoroláslistákat is, ha a listaelemeket kijelöljük és a megfelelő ikonokra kattintunk. Betűtípus Betűtípus Betűtípus Betűtípus Bekezdés Felsorolás és számozás 1

2 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). 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) Betűtípus 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ü Címsor 1 Címsor 2 Címsor 3 Címsor 4 Címsor 5 Címsor 6 A gyakrabban használt stílusok eredménye Cím Listajeles felsorolás stb. stb. Definiált kifejezés Definíció Formázott 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

3 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 oldal megnyitása az aktuális oldal elmentése az aktuális oldal nyomtatása az aktuális oldal megtekintése az alapértelmezett böngészőben helyesírás-ellenőrzés elindítása 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) a kijelölt rész vágólapra másolása beillesztés a vágólapról az utolsó művelet visszavonása az eddig visszavont műveletek visszaállítására szolgál 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. Kép beillesztése fájlból. Hivatkozás definiálása Frissíti a dokumentumot (betölti az utoljára elmentett verziót). 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...) Fájl/ Új dokumentum Fájl/Megnyitás Fájl/Mentés Fájl/Nyomtatás Fájl/ Megtekintés böngészővel Eszközök/Helyesírás Szerkesztés/Kivágás Szerkesztés/Másolás Szerkesztés/Beillesztés Szerkesztés/Visszavonás Szerkesztés/Mégis Táblázat/ Beszúrás / Táblázat Beszúrás/ Kép / Fájlból Beszúrás/ Hiperhivatkozás Nézet/ Frissítés Segítséget ad a kiválasztott menüpontról, ikonról stb. 3

4 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

5 Formázás Speciális 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). 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. 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

6 Most ismerkedjünk meg a Táblázat menü által nyújtott lehetőségekkel. Táblázat rajzolása Beszúrás / Táblázat Beszúrás / Sorok vagy oszlopok Beszúrás / Cella 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. 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. 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. 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

7 Beszúrás / Felirat Cella törlése Kijelölés / Táblázat Kijelölés / Oszlop Kijelölés / Sor Kijelölés / Cella Cellák egyesítése Cellák felosztása Táblázat felosztása Automatikus formázás Azonos sormagasság Azonos oszlopszélesség Automatikus méretezés a tartalomhoz 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. Ide kattintva törölhetjük a kijelölt táblázatcellákat. Erre a parancsra kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatot. Ide kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatoszlopot. Erre a parancsra kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatsort. Ide kattintva kijelölhetjük a beszúrási pontot tartalmazó táblázatcellát. A kijelölt cellákat összevonhatjuk. A kijelölt cellákat több cellára oszthatjuk fel. A táblázatot több, különálló táblázatra bonthatjuk A beépített formátumok alapján átformázhatjuk a táblázatunkat (pl. klasszikus, színes, stb.). Ide kattintva a táblázat összes kijelölt sorát azonos magasságúra alakíthatjuk. Ezzel a menüponttal a táblázat összes kijelölt oszlopát azonos szélességűre alakíthatjuk. 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

8 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é Kitöltés / Jobbra Táblázat tulajdonságai / Cella Táblázat tulajdonságai / Felirat A cellatulajdonságok megváltoztatása 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. Hasonló, mint a fenti funkció, csak a cellától jobbra lévő cellákra érvényes. 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. 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. 8

9 Vízszintes igazítás (balra, jobbra, középre, sorkizárás) Függőleges igazítás (felülre, középen, alapvonalra, alulra) Rovatfej Nincs sortörés Háttérkép használata Háttér / Szín Szegélyek / Szín Világos szegély Sötét szegély Szélesség megadása Magasság megadása Cellakiterjedés (sor) Cellakiterjedés (oszlop) a legördülő listából kiválasztható, hogy a cellatartalom vízszintesen hogyan igazodjon (balra, középre, jobbra, sorkizártan) a legördülő listából kiválasztható, hogy a cellatartalom függőlegesen hogyan igazodjon (felülre, középen, alapvonalra, alulra) a cellatartalom vastag betűkkel jelenik meg ezzel állíthatjuk be, hogy a cella tartalmát a böngésző ne tördelje szét. a cella háttérképét adhatjuk meg a cella háttérszínét adhatjuk meg a keret színét adhatjuk meg a világosabb keret színét adhatjuk meg a sötétebb keret színét adhatjuk meg a cella szélességét állíthatjuk be pixelekben vagy százalékos formában a cella magasságát állíthatjuk be pixelekben vagy százalékos formában megadhatjuk, hogy az aktuális cella hány cellának megfelelő helyet foglaljon el a sorban 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

10 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 Képleírás 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. A kép felett megjelenő sárga szöveges, információs téglalap: jobbklikk / Kép tulajdonságai / Általásos / Szöveg 10

11 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

12 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

13 Cím megadása Elemleírás 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 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

14 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

15 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

16 Ú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