Főoldal Tartalom témakörei

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


 n 150x150  n 150x150  ft 100x150  vt 150x100

Témakörök

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

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

  3. Képlekérő parancs.

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

  5. Az img elemben, használható parancsok.

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

  7. Képek láthatóságának beállítása.

  8. Clip (Ez is egy kép).

  9. Vízjel.

  10. Rádiuszos és körkörös képek.

  11. Hibalehetőségek!

  12. Képekhez használható, stílusok gyűjteménye.


További kép / háttérkép témakörök:
----- Háttérkép pozíciók meghatározása.
----- Egyszerű bemutató képekhez.
----- Fix diaképek bemutató.
----- Csúsztatott diaképek bemutató.

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:

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)

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

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ó: Főoldal Láthatóság halvány:Főoldal

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

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

#vizjel{
background-image:url('vizjel.gif');
background-repeat:no-repeat; background-position:center;
background-attachment:fixed;
}

 

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ő:

Hibalehetőségek.

Vissza a lap elejére




Képek formázása

Képek megjelenése eredeti formátumban:

width:150px;
height:150px;

 n 150x150

width:100px;
height:150px;

 ft 100x150

width:150px;
height:100px;

 vt 150x100

width:50px;
height:50px;

Kutya





Kép, lekerekített sarkokkal.

Képek méretei: width:150px, height:100px;

{border-radius: 5px;}


 vt 150x100

{border-radius: 10px;}


 vt 150x100

{border-radius: 20px;}


 vt 150x100





Kép, körkörös lekerekítéssel.

Körkörös akkor lesz, ha a kép vízszintes és függőleges méretei egyformák.
Eltérő vízszintes és függőleges kép méretnél, ellipszis alakzat lesz.


Kép méretei:
width:150px, height:150px;
{border-radius: 50%;}


 n 150x150

Kép méretei:
width:100px, height:150px;
{border-radius: 50%;}


 ft 100x150

Kép méretei:
width:150px, height:100px;
{border-radius: 50%;}


 vt 150x100





Kép átméretezése.

Fotó kicsinyítése mindenhól használható.
Fotó nagyítása:
- Tájképekhez jó.
- Embert, vagy állatot ábrázoló fotók nagyításával, gondok lehetnek, a kép élességével.


Tájkép eredeti méretei: width:150px, height:100px;)
.img-width-200px {width: 200px;}
.img-width-150px {width: 150px;}
.img-width-150px {width: 100px;}
.img-width-150px {width: 50px;}
.img-width-350px {width: 350px;}


{width: 200px;}.

 vt 150x100

{width: 150px;}

 vt 150x100

{width: 100px;}

 vt 150x100

{width: 50px;}

 vt 150x100

{width: 350px;}

 vt 150x100

Embert, vagy állatot ábrázoló fotók nagyítása:

Eredeti fotó.
{width: 50px; heigth: 50px;}

Házőrző eredeti fotó.

Nagyított fotó.
{width: 350px;}

Házőrző nagyított fotó.




Kép kicsinyítéssel és távolított rádiuszos kerettel.

.img-radiuskerettel{border: 4px solid #ddd; border-radius: 5px; padding: 8px; width: 100px;}
.img-shadowkeret{ margin-left: 30px; padding: 8px; width: 100px; box-shadow: -6px -6px 10px #561A0B;}

 vt 150x100  vt 150x100



Kép középre helyezése. (Vízszintes irányban.)

.img-kozepre-normal {display: block; margin-left: auto; margin-right: auto;}


Paris







Stílusok gyűjteménye

  • Képlekérő parancssor:
    • <img src="képfájlnév.jpg" width="....." height="......" alt="leírás" class="azonosító" />
  • Háttérkép megjelenítése:
    • {background: url(kép_elérési_útvonala.jpg);}
  • Kép azonosító:
    • Összes képre hatással van: img
    • Ezen azonosítóval ellátott képekre van hatással: class="azonosító"
    • Egyedi azonosítás: id="azonosító"
  • Kép szélessége:
    • width=".......px"
  • Kép magassága:
    • height=".......px"
  • Képet helyettesítő szöveg:
    • alt="szöveg"
  • Rövid leírás a képről:
    • title="..........."
  • Hosszú leírás, különálló HTML fájlra mutat:
    • longdesc="elérési_út.html"
  • Ismétlődés
    • nincs:{background-repeat: no-repeat;
    • Ismétlődés az adott területen: repeat
    • Ismétlődés vízszintesen: repeat-x
    • Ismétlődés függőlegesen: repeat-y
    • Ismétlődés nincs: no-repeat
    • Ismétlődés öröklődik: inherit
  • Fotó fényereje:
    • {opacity:0.5; filter:alpha(opacity=10);}
  • Melyik terület legyen látható:
    • {clip:rect(0px,50px,50px,0px);}
  • Vizjel, háttér-alárendelés:
    • Fix: {background-attachment: fixed;}
    • Gördülő: scroll;
    • Öröklődés: inherit
  • Háttérkép pozíció meghatározás:
    • {background-position: center;}
  • Háttérkép pozíció:
    • Bal felső: left top
    • Bal közép: left center
    • Bal alsó: left bottom
    • Jobb felső: right top
    • Jobb közép: right center
    • Jobb alsó: right bottom
    • Középpre fent: center top
    • Totál közép: center center
    • Középpre lent: center bottom
    • Pozíció %-ban: x% y%
    • Pozíció px-ben: xpos ypos
    • Öröklődés: inherit
  • Mozgó háttérkép:
    • <marquee direction="up"> <p class="hatterkep"> </p></marquee>