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

kepek_beillesztese [2006/07/05 07:55] (aktuális)
sorszám 1: sorszám 1:
 +[[Színek beállítása]] << [[Tartalomjegyzék]] >> [[Teendők közzététel előtt]]
 +----
 +===Képek beillesztése===
  
 +Honlapunk arculata a képektől válik egyedivé. A Világháló alapvetően grafikus felület, ezért lapunkat fontos képekkel fűszerezni. Igyekezzünk azonban megőrizni a szöveg és kép egészséges arányát, és ne váljon oldalunk „fényképalbummá”!
 +
 +Közzétehetünk fotókat vagy rajzokat is. A Világhálón is kereshetünk képeket és felhasználhatjuk saját oldalaink készítése során. Nyilván saját készítésű fényképeinket is használhatjuk, csak valamilyen módon digitalizálnunk kell ezeket.
 +
 +A képek közzététele mindenképpen kíván valamelyes grafikai háttérmunkát, melynek ismertetése azonban túlmutat tanfolyamunk keretein. Ismerkedjünk meg egy képszerkesztő programmal (a könyv [[CD melléklet]]én is találunk ilyet), és próbáljuk ki, mire képes. A képek előkészítéséhez néhány praktikus 
 +jótanácsot találunk a mellékelt keretben. Ha nincsenek eszközeink számítógépen tárolható képek előállításához (szkenner, digitális fényképezőgép), forduljunk egy barátunkhoz, ismerősünkhöz segítségért a képek digitalizálásában és előkészítésében.
 +
 +A képállományok elhelyezéséről a következőket kell tudnunk:
 +  * A megjeleníthető képek grafikus formátuma jpg vagy gif lehet.
 +  * A képeknek fizikailag is elérhetőeknek kell lenniük: helyezzük a képállományokat a honlap könyvtárába (mappájába), vagy készítsünk számukra egy külön alkönyvtárat.
 +  * Lapunk elrendezése minden esetben a lapot megnéző képernyőjének felbontásától függ, tehát nem biztos, hogy az általunk beállított kép ott lesz, ahol mi látjuk. Célszerű táblázatba rakni ezért a képeket, illetve a szöveget.
 +
 +Amint készen van a képünk, válasszuk ki a helyét a Composerben. A beillesztés a Beszúrás menü Kép menüpontjában történik, ahol megadhatjuk a képállományt (Kép helye), kiválaszthatva, hol találja meg a program (Fájl kiválasztása). Ezután beállíthatjuk a szövegtördelést, vagyis azt, hogyan jelenjen meg a kép a környező szöveghez viszonyítva. Ebben segítenek a rajzocskák, melyek a kép és szöveg helyzetét mutatják. Tudnunk kell, hogy a kép és szövegtördelés megjelenítésében a Composer nem tud mindent, ezért mentsük el oldalunkat és tekintsük meg a böngészőben!
 +
 +{{:wiki:co9.jpg|:wiki:co9.jpg}}
 +
 +A kép tulajdonságai között meghatározhatjuk azt is, milyen méretben jelenjen meg – kicsinyíthetjük, vagy nagyíthatjuk, de vigyázzunk az arányokra, különben eltorzul a képünk.
 +
 +Lehetőség van arra is, hogy képünk egy csatolót, hivatkozást adjon meg. Eddig csak azzal foglalkoztunk, hogyan tudunk csatolókat illeszteni egy szövegrészre, de lehetőségünk van képekkel is elvégezni ugyanezt. Ehhez az előbb említett, Kép tulajdonságai című dialógusablak tetején válasszuk a Hivatkozás fület, s itt megadhatjuk a hivatkozás címét. Vigyázzunk arra, hogy a Composer ilyenkor automatikusan hozzárendel a képhez egy 2 pixel vastagságú keretet. Ha erre nincsen szükségünk (általában inkább zavaró), térjünk vissza a Kép fülre és itt a Kitöltött keret mezőbe írjunk 0-t.
 +
 +{{:wiki:co10.jpg|:wiki:co10.jpg}}
 +
 +Ha honlapunk háttereként kívánunk képet használni, ezt az előbb (a honlap általános színei kapcsán) említett helyen, a Formátum menü Oldal színei és háttere pontjában állíthatjuk be. Keressük meg a Háttérkép, pontot és adjuk meg a képállományt.
 +
 +A fentiek a HTML dokumentumban a következő kóddal írhatók le:
 +
 +  <img src="templom.jpg" border=0 height=214 width=299 align="right">
 +
 +Képekre az <IMG ... > parancselem vonatkozik, s ennek tulajdonságai határozzák meg a további részleteket. Az src tulajdonság a képállományt (a kép forrását, angolul source) adja meg, általában relatív hivatkozással, de lehet ez egy teljes, abszolút cím is, mely a Világháló egy adott helyéről tölti be a képet. Az előbb említett border tulajdonság a kép keretét határozza meg (nem kötelező megadni), a height és width a kép szélességét és magasságát (nem kötelező megadni őket), végül az align tulajdonság a környező szöveghez viszonyított elrendezést határozza meg (értékei: right – jobbra igazított, szöveg körülöleli; left – balra igazított, szöveg körülöleli, top – szövegsor teteje a kép tetejénél, bottom – szövegsor alja a kép aljánál, middle – szövegsor közepe a kép közepénél).
 +
 +Ha képünk egy csatolást, hivatkozást ad meg, akkor (a korábban tanultak szerint) egy <a href="cím">Szöveg</a> HTML parancselemet adunk meg úgy, hogy „Szöveg” helyére kerül a képet leíró <IMG ... > parancselem. Például:
 +
 +  <a href="templom.html"><img src="templom.jpg"></a>
 +
 +Az eddig tanultak alapján elkészült honlap megjelenése a következő:
 +
 +{{:wiki:co8.jpg|:wiki:co8.jpg}}
 +
 +Feladat: Alkossuk meg saját kezdőoldalunkat! Használjuk az összes technikát, melyet elsajátítottunk:
 +
 +  * Formázzuk meg a szövegeket, használjunk többféle kiemelést!
 +  * Állítsukbe a honlap színeit!
 +  * Illesszünk be képeket és helyezzük el őket úgy, hogy a szöveg körbefussa!
 +  * Állítsunk be csatolókat: szövegekre és képekre egyaránt helyezzünk el csatolót!
 +  * Készítsük el az első mintájára a többi oldalt is és kapcsoljuk össze őket relatív csatolókkal!
 +----
 +**Keretes rész**
 +  * [[Szkennelt képek, digitális fotók]]
 +----
 +[[Színek beállítása]] << [[Tartalomjegyzék]] >> [[Teendők közzététel előtt]]
kepek_beillesztese.txt · Utolsó módosítás: 2006/07/05 07:55 (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