K É P E K - F O T Ó K !

1. Képek készítése, méretezése

Képek készítése.
- Képeket, a legegyszerűbb digitális fényképezőgéppel készíthetünk
- A weblapodon lehetőleg saját készítésű fotók legyenek.
- Az Internetről lemásolt fotók közzététele előtt győződjünk meg, nincs e jogi védelem alatt.

Jelenleg is a 800 képpont szélesség az elfogadott ezért ennél szélesebb képet még a címsorokhoz se készítsünk.
Ajánlom a 780px vagy 800 px szélességet, ez a kisebb monitorokon is teljes egészében látható lesz.
Címsorokhoz lehetőleg 150 képpontnál magasabb, azaz függőleges lehetőleg ne legyen, mert akkor meg a címsor foglal el a weblapunkból jelentős területet.
Olyan háttérképekhez, melyet arra készítünk, hogy a rövidebb dokumentumunk szövegét erre fogjuk megírni, akkor készítsünk olyan magas képet, ami a szövegünk hátteréhez szükséges.
De készíthetünk kisebb képet is háttérképnek, és nem tiltjuk le a háttérkép ismétlődést, ezzel másik témakörben foglakozunk.
Ha már rendelkezünk fotókkal, belekezdhetünk a szerkesztésükbe.

A szerkesztéshez nem feltétel a legújabb képszerkesztő program.
- A digitális fényképezőkhöz mellékelnek telepítő CD lemezt, mely tartalmaz minimális képszerkesztő programot.
- Ha rendelkezel a számítógépedhez valamilyen lapszkennerrel, akkor az ahhoz kapott telepítő CD lemez is tartalmaz képszerkesztő programot.
- Valamint, a Windows Paint rajzoló programja is megfelelő a szerkeszt kivágás műveletekre.

Ha kiválasztottad az általad megfelelő képet, jelöld ki a megfelelő területet és vágd ki, vagy kicsinyítsd le a megfelelő méretre.
Az így előkészített képet mentsd el JPG vagy GIF kiterjesztéssel, és már kész is az első képed, amit a weblapodra illeszthetsz.

Megjegyzés:
- Ha sok képet készítesz, akkor készíts külön mappát, melybe a kész méretre szabott fotókat tárolni, fogod. Csinálj kettő mappát az egyikbe JPG kiterjesztésű a másikba GIF kiterjesztésű fotókat, tárolhatsz.
- Mentésekor, a képek fájlneve mellé, írd be a kép méretét is, kezdetben ez nagy segítség, mert a kép beillesztésekor meg kell adnod a kép vízszintes ( width) és függőleges (height) paramétereit, így könnyen beazonosítod a méreteket. Például: hegyek350x250.jpg
- Nagybetűt és ékezeteket ne használj, ha két szóból is állna, írd egybe. Helyesírással ne foglalkozz. Lényeg, hogy eligazodj a képeid között.

Például: a lemenő nap = alemenonap780x150.jpg

Ha háttérképet készítesz, GIF kiterjesztéssel mentsd el, de mentheted jpg - ben is.
A háttérképekre általában pluszként még szöveget is elhelyezünk, ezért nem fontos a nagyon jó minőség és a GIF képek a memóriából is kisebb helyet, foglalnak .

Mikor, és mért fontos a kép mérete:

• Háttérképeknél, nem kell méretet megadni.
• Mindennapjaink eseményeiről készűlt fotóknál fontos.
• Helytelen méretmegadás, élőlényeknél (emberek, állatok, rovarok,), építményeknél, műalkotásoknál, műszaki tárgyaknál, torzulást eredményez, azaz nem az eredeti formátum jelenik meg.
• Tájképeknél, helytelen méretmegadás, nem annyira feltűnő, de itt is ragaszkodjunk az eredeti méretekhez.

Képek nagyítása, vagy kicsinyítése torzulás nélkül:
A kép elfoglalt területe négyzet, azaz mindegyik oldalhossz egyforma.
Amennyivel növeljük vagy csökkentjük a vízszintes méretet, ugyan annyival kell növelni vagy csökkenteni a magassági értéket

Példa: Meglévő képünk mérete 100x100px, (kép fájl neve: kep100x100.jpg)

• Eredeti képbehívás:
  <img src="kep100x100.jpg" width="100" height="100" />
• Kicsinyítés:
  <img src="kep100x100.jpg" width="50" height="50" />
• Nagyítás:
  <img src="kep100x100.jpg" width="200" height="200" />

Példa: Eltérő oldalméretek 200x100px, (kép fájl neve: kep200x100.jpg)

• Eredeti képbehívás:
  <img src="kep200x100.jpg" width="200" height="100" />
• Kicsinyítés: A méretváltozást %- alapján határozzuk meg.
  Vízszintesen csökkentsük 100px-re, ez az eredeti méret 50%-ra történő csökkenése, szorzója 0,5
  Függőleges méretet is 50%-al kell csökkenteni, 100x0.5=50 függőleges mérete 50px-lesz.
  <img src="kep200x100.jpg" width="100" height="50" />
• Nagyítás:
  Vízszintesen növeljük 300px-re, ez az eredeti méret 150%-ra történő növelése, szorzója 1,5
  Függőleges méretet is 150%-al kell növelni, 100x1.5=150 függőleges mérete 150px-lesz.
  <img src="kep200x100.jpg" width="300" height="150" />

Ajánlás:
A képek bemutatására készült weboldalnál, fotók nagysága 50x50 px - től a 100x100 px -ig. ajánlott, de ettől tetszés szerint eltérhetsz.

Ha a képet nézők, valamelyik kisképre kattintnak, akkor megjelenik a nagykép.
Ajánlott legnagyobb mérete 650x350 px, Ez a méretű kép a kis képernyős monitorokon is teljes egészében látható, de ettől is, tetszés szerint eltérhetsz.

Vissza a lap elejére

------------------------------------------------------------------------------------

2. Ábrák és rajzok készítése

Windows Paint rajzprogramja, vagy a Microsoft Word szövegszerkesztő, rajzprogramja is megfelelő. De ha van kész rajzod, be is szkennelheted.

Ha a Microsoft Word rajzprogramját használod.
- A rajz elkészítése után másold át a Paint rajzprogramba.
- Átmásolás után, tovább szerkesztheted a rajzot, bekeretezheted, színezheted stb.
- Ha a Windows Paint rajzprogramban, késszen vagy a rajzzal, jelöld ki a teljes rajz objektumot és mozgasd a bal felső sarokba úgy, hogy a felső szélét és a bal oldalát még éppen látni lehessen.
- Az egeret lassan közelítsd a rajz jobb oldalához, majd olvasd le a vízszintes értéket, ezután fentről lefelé mozgasd az egeret a rajz alsó széléig és a függőleges ( magasság) értéket is olvasd le.
- Ezt követően lépj be a KÉP TULAJDONSÁGOK menübe, és írd be a vízszintes és függőleges értéket.
- Végezetül, mentsd el a rajzot, az általad megfelelő néven és kiterjesztéssel. Fájl típusa: (JPG, vagy GIF)

A WordArt stílusának kiválasztásával reklámszövegeket, az alakzatok vagy rajzeszközök segítségével, térhatású rajzot is készíthetsz.
A rajz, vagy reklámszöveg elkészítése után, másold át a PAINT rajzprogramba, és úgy járj el, mint a fent leírtakban.

Vissza a lap elejére

-------------------------------------------------------------------------------------

3. Képlekérő parancs.

XHTML - lapunkon, a következőképpen kell beírni a meghatározást:
Az src adja meg a kép, vagyis az img elérési utját.
Megkell még adni a kép szélességét width, és magasságát height, képpontban.

A képlekérő parancssor így néz ki:
Kép mérete: vizszintesen 200 képpont, függőlegesen 109 képpont a képféjlnév helyére írd az általad elmentett kép elnevezését, az YYY helyére pedig a kiterjesztését.

1. A képet tartalmazó fájl közvetlen elérhető.
<img src="képfájlnév.YYY" width="200" height="109" />

2. A képet tartalmazó fájl, külön mappában van. Pl.: A mappa neve images, és ezen belül van a képet tartalmazó fájl.
<img src="images/képfájlnév.YYY" width="200" height="109" />

3. Ha a képet kérő html - lapunk, és a képet tartalmazó fájl is külön - külön lévő mappában van, akkor kell a kettőspont is.
<img src="../images/képfájlnév.YYY" width="200" height="109" />

Képhelyettesítő szöveg: azért kell alkalmazni, mert a kép nem biztos, hogy minden böngészőben megjelenik.
Ezért jobb, ha minden képhez szöveg is társul. A képhez tartozó szöveg, akár több szóból is állhat.

Utasítás a képhez tartozó szöveggel:
<img src="images/képfájlnév.jpg" width="200" height="109" alt="a kép elnevezése" />

Ha az img parancsot (elemet) gombhoz, azaz hivatkozásként használjuk, itt is adjuk meg a helyettesítő szöveget.
Hova jutunk, ha ráklikkelünk.
Pl.: másik html - lap nevét, azaz témakör nevét, vagy a lap aljáról hova jutunk, a lap tetejére.

Vizuális nézethez és gyakorláshoz, kattints ide.

Vissza a lap elejére

---------------------------------------------------------------------------------------

4. Háttérképek megjelenítése.

CSS, azaz stíluslapon így kell megadni, a háttérkép meghatározást.
Ha a kép szélessége 275 képpont, magassága 90 képpont.
A zárójelek között kell megadni: A kép elérési utvonalát az X-ek helyén, elnevezését az Y-ok helyén, és kiterjesztését, mely lehet JPG vagy GIF, azaz milyen formátumban mentetted el a képedet.
Azon div szakasz azonosítóját (elnevezését), melyben a háttérképet akarjuk elhelyezni, az azonosító szó helyére kell beírni.
Ne feledjük:Ékezetes betűket nem alkalmazunk.
- Ha az XHTML - lapunkon a div szakasz azonosítóját id jellemző után adtuk meg, akkor kettős keresztet írunk az azonosító el, a stíluslapon (#azonosito).
- Ha class osztályazonosító után adtuk meg, a div szakasz azonosítóját, akkor pontot kell beírni az azonosító szó elé, a stíluslapon ( .azonosito)

#azonosito {width: 275px; height: 90px; background: url(XX / YYYYYYYYY.jpg); }

Kisebb képeknél előfordulhat, hogy ugyan az a kép, többször is megjelenik egymás mellett, vagy egymás alatt. Ezt nevezzük ismétlődésnek.
Ha nem akarjuk, hogy ismétlődjön, akkor le kell tiltanunk a no-repeat utasítással.
#azonosito {width: 275px; height: 90px; background: url(XX/YYYYYYYY.jpg); background-repeat: no-repeat; }

Egy adott szakaszban, vízszintesen középre akarjuk helyezni a képet, ennek meghatározása center.
#azonosito {width: 275px; height: 90px; background: url(XX/YYYYYYYY.jpg); background-repeat: no-repeat; background-position: center; }

Háttérképek beillesztésénél, a width értéke és a height értéke tetszés szerinti érték lehet, azaz sokkal nagyobb is lehet, mint a beillesztendő kép mérete.
Példa: Mi történik, ha a kép mérete, 200x110px a width értéke 750px a height értéke 370px
Mivel itt a width és height értéke, a div szakasz méretét, azaz nagyságát határozza meg, ezért a kisebb kép többszörösen is elfér, ezen területen.
A div szakasz méretéből adódóan a képet tetszés szerinti pozícióba mozgathatjuk, ha megadtuk a no-repeat utasítást.
Ha a no - repeatot töröljük, akkor a kép annyiszor fog ismétlődni, még e div szakasz területét ki nem tölti

---

Háttérkép (background-image), melyet színátmenettel hozunk létre.

Vizuális nézethez és gyakorláshoz, kattints ide.

Vissza a lap elejére

---------------------------------------------------------------------------------------

5. Kép azaz img elemben, használható parancsok.

A kép, azaz img parancssorban (elemben), a további parancsokat is használhatjuk:
- name
- longdesc
- title
- A továbbiakkal most nem foglalkozunk. Ha CSS, azaz stíluslapot alkalmazunk, ezekre nincs szükségünk.

A name jellemző
A name jellemzővel egyedi azonosítót rendelhetünk a képhez.
De helyette használjuk inkább a class osztályazonosítót, melyet tetszés szerinti névvel, azonosítóval láthatunk el, az XHTML - lapon.

Példa:
<img src="images/képfájlnév.YYY" width="200" height="109" class="kep"/>

Majd ezen a kep néven, azaz ehhez a névhez tetszés szerinti meghatározásokat hozhatunk létre a stíluslapon.

-----------------------------------------------------------------------------------------
A következő meghatározások csak ismertetésre kerülnek,
Jobb, ha stíluslapon adjuk meg a megfelelő meghatározásokat: border, hspace, vspace,

Longdesc jellemző.
Jelentése: hosszú leírás
- Ez egy különálló HTML fájlra mutat, mely részletesen leírja a kép tartalmát.
- Összetett képekhez például táblázatokhoz, grafikonokhoz gyakran van rá szükség.
- Vagy ha a kép olyan információt tartalmaz, melyeket nem látunk.

Ez a parancssor így fog kinézni:

<img src="képfájlnév.jpg" width="200" height="200" alt="vulkáni kitörés." longdesc="vulkan.html" />

---

Title jellemző.
Title jellemző szövegét minden böngésző megmutatja, amikor az elem fölé állunk az egérrel
Title jellemzőben megadhatjuk:
- kép vagy hivatkozás, bővebb leírását.
- Gyakran az eléréssel kapcsolatos tanácsokat. Pl.: billentyűkombinációkat, vagy a hosszú leírásokat tartalmazó fájlok helyét.

Vissza a lap elejére

---

6. Háttérképre szövegírás.

A háttérképekre ugyan úgy írhatunk szöveget, vagy elhelyezhetünk képet, mintha ezt egy üres lapon tennénk meg.
A háttérképeinket beilleszthetjük:
- A teljes weblapunk háttérképének
- A weblapunk egy adott részéhez.

Azt, hogy a háttérkép hól jelenjen meg, nekünk kell meghatározni.
Háttérképeket, az xhtml - lapon előre megírt, és tetszőleges egyedi azonosítóval ellátott div szakaszban kell elhelyezni.

Első példa: (Most, id jellemzőhöz írjuk be, a div szakasz egyedi azonosítóját - hatterkep )
A html - lapra ezt írjuk.
<div id="hatterkep"> </div>

A css, azaz stíluslapon ezt kell beírni. (Kettős kereszttel kezdjük a sor megírását.)
#hatterkep {width: 675px; height: 590px; background: url(XX / YYYYYYYYY.jpg) no-repeat; margin-left: 50px; }

Második példa: (Most, class osztályazonosítóhoz írjuk be, a div szakasz egyedi azonosítóját - hatterkep )
A html - lapra ezt írjuk.
<div class="hatterkep"> </div>

A css, azaz stíluslapon ezt kell beírni. (Itt, pontot ( . ) kell a sor elején alkalmazni )
.hatterkep {width: 675px; height: 590px; background: url(XX / YYYYYYYYY.jpg) no-repeat; margin-left: 50px; }

Szórakozzunk:
- Írjunk más px értéket a width és height utasításoknak, például: 300px és 250 px nézzük meg mi tőrténik.
- Írjunk más px értéket a margin-left: 50px; helyett, például: 200px nézzük meg mi tőrténik.

Írjunk szöveget a háttérképre.
A fenti két példa közül, mindegy melyik megoldást választjuk, mindig a kezdő div címkét lezáró nagyobb - mint jel ( > ) után írjuk meg a szöveget, és ha végeztünk, a legutolsó bejegyzés után kell lenni, a záró divnek ( </div> )

Példa: (Elhelyezünk egy h2 - es címsort, és egy rövid szöveget.)
A html - lapra ezt írjuk:
<div class="hatterkep"> <h2> Címsor a háttérképen </h2> <p> Sikerült háttérképet készítenem </p> <p> A háttérképen megjelent a szövegem, és a szövegsorban elhelyeztem egy sorlezáró utasítást <br /> ennek hatására, ez a szöveg új sorban látható. </p> </div>

Ha a fentieket beírtuk, nézzük meg a weblapon, hogy mi történt.

Vissza a lap elejére

---

7. Fotó fényerejének, azaz láthatóságának beállítása

Első megjelenéskor:
Explorer halványan jeleníti meg a képeket.
Mozilla Firefox élesen jeleníti meg a képeket.

Mindkét böngésző, attól kezdve, hogy az egeret a kép fölé mozgattuk, egyformán jeleníti meg az animációt.

Ha az egeret a fotó fölé mozgatjuk, megváltozik a kép láthatósága.

Láthatóság jó: Láthatóság halvány:

Megírása XHTML fájlban:
Láthatóság jó:
<img src="foto50x50.jpg" alt="Szemléltető" width="50" height="50" border="0" class="fenyero_001"
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
Láthatóság halvány:
<img src="fotok50x50.jpg" alt="Szemléltető" width="50" height="50" border="0" class="fenyero_002"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" />

Megírása CSS fájlban:
.fenyero_001{opacity:1; filter:alpha(opacity=9);}
.fenyero_002{opacity:1; filter:alpha(opacity=9);}

Explorer "opacity" láthatóságról bővebben

---

Vissza a lap elejére

 

 

---

8. A clip (Ez egy kép)

IE-6, IE-7, CSS-ből nem ismeri, de JavaScriptből igen. IE-8 és Mozilla Firefox, felismeri.

Példa: rect(0px,50px,50px,0px)
Első érték : top
Második érték: right
Harmadik érték: bottom
Negyedik érték: left

A meghatározott értékekkel, az eredeti képből (fotóból), melyik terület legyen látható, tetszőleges területet tudunk kijelölni.

A stílust meghatározhatjuk:
- Közvetlen az "img" jelölőelemnek, ekkor minden weboldali képre hatással van.
- A kép egyedi azonosítójához, ekkor csak az adott képre lesz hatással.

CSS stílus meghatározás, img jelölőelemnél vagy az egyedi azonosítónál.

1. img {position:absolute; margin-left: 50px; clip:rect(0px,50px,50px,0px);}
2. #klipkep {position:absolute; margin-left: 50px; clip:rect(0px,50px,50px,0px);}

JavaScript stílus meghatározás

• var klip=document.getElementById("klipkep"); document.all? document.all.klipkep: ""
  klip.style.position="absolute";
  klip.style.marginLeft="50px";
  klip.style.clip="rect(0px,50px,50px,0px)";

Eredeti kép
<body>
<img src="foto.jpg" width="140" height="140" id="klipkep" />
</body>

Eredeti képből kijelőlt terület.

Eredeti kép, 140 x 140px méretű.

 

Vissza a lap elejére

---

9. Vízjel

 

Vissza a lap elejére

---

10. Hibalehetőségek!

Ha egy képbehívó utasítást, a WORD szövegszerkesztőben írtunk meg, majd onnan másoltuk be a jegyzettömbbe, és nem a billentyűzetről gépeljük be, a következő hibák fordulhatnak elő:

Vissza a lap elejére