Különbségek

A kiválasztott változat és az aktuális verzió közötti különbséget mutatjuk.

Összehasonlító nézet linkje

szoevegek_formazasa [2006/07/04 12:08] (aktuális)
sorszám 1: sorszám 1:
 +[[HTML parancsok]] << [[Tartalomjegyzék]] >> [[Csatolók megadása]]
 +----
 +===Szövegek formázása===
  
 +Honlapkészítésünk első lépései még korántsem használják ki az Internet grafikus megjelenítési képességeit. Mégis fontos, hogy dokumentumunk szöveges része rendben legyen, áttekinthetően és egységesen legyen formázva. Érdemes felhasználni szövegszerkesztőkben szerzett tapasztalatainkat és kialakítani egy olyan egységes stílust a szöveges megjelenésre nézve, mint ahogyan nyomtatott dokumentumainknál is tesszük. Eszköztárunk a puszta szövegek formázására valamivel szegényesebb, mint a szövegszerkesztő programokban, de így is nagyon sokat nyújt – különösen, ha majd túllépünk a puszta szövegeken és grafikus elemekkel, képekkel és színekkel egészítjük ki oldalainkat.
 +
 +Folytassuk tehát tovább Composerben munkánkat. A begépelt szöveg szebbé varázslása a szövegszerkesztő programokból (Word, Star Office, Openoffice.org) már ismert eszközökkel folytatódik: alkalmazhatunk bekezdésekre vonatkozó beállításokat (igazítás balra/középre/jobbra, behúzás, stílus), illetve karakterekre (betűkre) vonatkozókat (félkövér/dőlt/aláhúzott, betűtípus és méret, szín). Hasonlóan a szövegszerkesztőkhöz, először itt is célszerű kijelölni az egérrel azt a részt, amit meg szeretnénk formázni, majd beállítani a változásokat.
 +
 +A formátumbeállító parancsokat legegyszerűbben a képernyő felső részén található eszköztárból választhatjuk (a Formátum menüben több nem sűrűn használt tulajdonság is van).
 +
 +{{:wiki:co5.jpg|:wiki:co5.jpg}}
 +
 +Balról jobbra az elemek:
 +  * bekezdés stílus
 +  * betű szín
 +  * szövegkiemelésre szín választás
 +  * betű mérete kisebb/nagyobb (egymás mellett)
 +  * vastag, dőlt, aláhúzott
 +  * felsorolás
 +  * számozás
 +  * behúzás csökkentés/növelés (egymás mellett)
 +  * igazítás (jobbra, középre, balra, sorkizárt)
 +  * Réteg
 +  * Objektumot előrébb/hátrébb visz a képen (egymás mellett)
 +
 +A betűk méretének és kinézetének beállítását végezhetjük a szövegszerkesztőben megszokott módon: a kijelölt szöveghez választunk betűtípust és betűméretet. A betűméret (mint látjuk) relatív megadású, pontos megjelenése majd attól függ, hogy a honlapunk „nézőközönségének” hogyan van beállítva a böngészője. Hasonló a helyzet a betűtípus esetében is, ennek beállítása csak akkor érvényesül, ha a honlapot megtekintő böngésző számítógépén is telepítve van ez a betűtípus. Ezért a betűtípus megadását célszerű elkerülni, illetve csak néhány alap betűtípust használni: közismert a Times és az Arial, mely utóbbit más rendszereken a Helvetica helyettesít, megadhatjuk tehát a betűtípust így is.
 +
 +A betűtípus és -méret kombinációja miatt célszerű inkább a szélső listából választható bekezdésstílusok használata: rendelkezésünkre áll a 6 szinten beállítható címsor (Címsor 1 a legnagyobb, Címsor 6 a legkisebb), persze ennek végső megjelenése is a böngésző beállításain múlik, mégis lehet építeni arra, hogy az egyes betűméretek nagyobbak, mások kisebbek, s a betűtípussal sem lesz gond. A korszerű honlapszerkesztés alapvetően stíluslapokat (style sheet) használ, ennek ismertetése azonban túlnő tanfolyamunk keretein – egyelőre elégedjünk meg a rendelkezésünkre álló bekezdésstílusokkal.
 +
 +Szövegeinket tetszés szerint színezhetjük, hiszen a képernyőn minden színesben jelenik meg. Akár a szomszédos betűk is lehetnek különböző színűek, mégis célszerű átgondolni a színskálát, és a honlap háttérszínével, képanyagával harmonizáló színeket használni (részletesebben ld. a következő alfejezetben).
 +
 +Az egyes szövegrészek, szavak kiemelésére bátran alkalmazhatunk betűstílusokat: vastag (félkövér), dőlt és aláhúzott szövegrészeket, melyeket az eszköztár ikonjaival pillanatok alatt beállíthatunk.
 +
 +Bekezdéseinket igazíthatjuk balra, jobbra vagy középre, és használhatjuk a behúzásokat is (utóbbiak mindkét oldali behúzást jelentenek, az eszköztáron a behúzás fokozatát növelhetjük vagy csökkenthetjük).
 +
 +Felsorolásainkat számozott vagy szimbólummal jelölt listákba rendezhetjük az eszköztár felsorolás-ikonjaival. Ehhez jelöljük ki a felsorolásban szereplő sorokat és utána kattintsunk valamelyik felsorolás-ikonra.
 +
 +{{:wiki:co4.jpg|:wiki:co4.jpg}}
 +
 +Feladat: a továbbfejlesztett honlap fent mellékelt képén vegyük számba, mely eszközök segítségével, milyen módosításokat végeztünk! Végezzük el ezeket magunk is, és hozzuk létre az ugyanígy kinéző HTML-oldalt.
 +
 +Amennyiben a szöveg formázását nem a Composerben, hanem saját szövegszerkesztőnkben végezzük el, a következő HTML parancsokat használhatjuk:
 +
 +Parancsok:
 +
 +Vastag betűvel (bold) írt szövegrész.
 +
 +  <B> Szöveg </B>    
 +
 +Dőlt betűs (italic) szövegrész.
 +
 +  <I> Szöveg </I>    
 +
 +Aláhúzott (underlined) szöveg.
 +
 +  <U> Szöveg </U>
 +
 +Behúzott szöveg. A behúzásparancs többszörösen is alkalmazható. A szövegen belül bármilyen további parancsot írhatunk, pl. új bekezdéseket kezdhetünk:
 +  
 +  <blockquote>
 +  Szöveg
 +  </blockquote>
 +
 +Felsorolás szimbólumokkal. Ha számozva szeretnénk, az <ul> és </ul> helyett <ol> és </ol>-et írjunk.
 +
 +  <UL>
 +  <LI> Első sor
 +  <LI> Második 
 +  <LI> Harmadik
 +  </UL>
 +
 +Bekezdés igazítása. Példánkban a balra igazítás („left”) látható. A középre igazításhoz „center”, a jobbra igazításhoz „right” megadása szükséges.
 +
 +  <P ALIGN="left"> Szöveg </P>
 +
 +A <p> elem analógiájára használhatók a bekezdésstílusok közül a címsorok: a <H1> és </H1> jelölés felel meg a Címsor 1-nek, egészen a <H6> és </H6> által jelölt Címsor 6-ig. Az igazítóparancs is használható, a fenti példa címsorának kódja tehát így néz ki:
 +  
 +  <H1 ALIGN="center">Felpéci Evangélikus Egyházközség </H1>
 +
 +A fenti példában láttuk, hogy a < és > jelek között álló parancsok nemcsak egyetlen betőből, szóból állnak, hanem az őket finomító tulajdonságokból. 
 +
 +Ilyen volt a bekezdés esetén az align (igazítás) tulajdonság. Ehhez hasonló lesz a betűk típusának, méretének, színének közvetlen beállítására szolgáló <font> elem is:
 +
 +  <FONT FACE="Arial" SIZE="+1" COLOR="#000000">Szöveg </FONT>
 +
 +A fenti példa a szöveg betűtípusát Arial-ra állítja, relatív mérete +1 lesz, színe pedig fekete (a színek megadásáról később ejtünk szót, a [[Színek és képek]] című alfejezetben). A <FONT> parancselem tulajdonságai egymástól függetlenül is alkalmazhatók.
 +
 +----
 +[[HTML parancsok]] << [[Tartalomjegyzék]] >> [[Csatolók megadása]]
szoevegek_formazasa.txt · Utolsó módosítás: 2006/07/04 12:08 (külső szerkesztés)
 
Hacsak máshol nincs egyéb rendelkezés, ezen wiki tartalma a következő licenc alatt érhető el: CC Attribution-Noncommercial-Share Alike 3.0 Unported
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki