Képek

Alkalmazási területek

Képeket alkalmazhatunk egy oldalon háttérképként, különbözo illusztrációkként, hivatkozásokként valamint hivatkozás térképekként.

Használható képformátumok

Internetes oldalakon háromféle képformátumot használhatunk, ezek a GIF89a, JPEG és a PNG. Egyes böngészok képesek megjeleníteni más formátumú képeket is, de kerüljük az ilyenek használatát, mert egyes böngészok NEM.

JPEG formátum
 (*.jpg, *.jpeg):
16 Millió színu, veszteséges tömörítési eljárást használó képformátum. A kép Transzparenciával (átlátszó színnel) nem rendelkezhet. Veszteség mértéke különbözo lehet, ennek arányában változik a kép mérete (byte-ban).
GIF89a (*.gif):
Palettás kép, a paletta max 256 színt tartalmazhat (lehet szürkeárnyalatos is). A paletta tartalmazhat egy Transzparens színt, ill. lehetoség van Alpha csatorna alapján történo Transzparencia meghatározására. A formátum veszteségmentes LZW tömörítést használ. Képes animációk eltárolására is (animGIF).
PNG (*.png):
Viszonylag új formátum, 24-bit színmélységu, veszteségmentes tömörítést alkalmaz. Transzparencia szintén meghatározható szín, ill. alpha csatorna alapján.

Háttérképek

Lehetoségünk van az oldal háttereként egy kép megadására (mintha egy ilyen képre nyomtatták volna az oldalt).
Háttérképet a Modify menü Page Properties pontja alatt található Background Image beállításnál adhatunk meg. Itt meg kell határoznunk a kép elérési útvonalát (ez is lehet relatív vagy abszolút).
Az így beillesztett kép az oldal bal felso sarkától indulva kerül beillesztésre. Ha a kép nem elég nagy ahhoz, hogy kitöltse a rendelkezésre álló ablakméretet, akkor a böngészo mozaikszeruen ismételni fogja azt, ezt remekül felhasználhatjuk textúrák (pl.: egy márványminta) alkalmazásakor. Alapesetben a háttérkép a dokumentummal együtt mozog, ezt elkerülhetjük, ha a body tag-ben megadjuk a bgproperties="fixed" utasítást (CSAK IExplorer). Ilyenkor a háttérkép fix marad, a fölötte lévo tartalom fog csak elmozdulni, mintha egy átlátszó fólián huzogatnánk le-fel egy adott háttér felett. Ezt az utasítást a régebbi böngészok nem ismerik. Lehetoség szerint ne ezt használjuk, hanem inkább egyéni stílusok, stíluslapok alkalmazásával érjünk el hasonló hatást (errol a módszerrol majd késobb). Természetesen alkalmazhatunk animált GIF képeket is háttérként, bár ez általában elég zavaró tud lenni.

Tracing Image

Az oldalbeállításoknál (Modify/Page Properties) egy, az oldal tervezésében segítségünkre lévo képet adhatunk meg. Leginkább akkor fogjuk használni, ha az eredeti hátterünk valamilyen okból tönkrement.

Lehetoségünk van az ilyen kép pozíciójának, láthatóságának, áttetszoségének pontos beállítására.

Tracing Image megjelenítése, elrejtése (View/Tracing Image/Show):
Ha a Show pont ki van pipálva, a kép látszik, ellenkezo esetben nem.
Pozíció:
Az Adjust Position menüpont segítségével beállíthatjuk a kép bal felso sarkának a az oldal szélétol mért távolságát pixelben. Mozgathatjuk a képet pixelenként a kurzornyilakkal, illetve 5 pixelenként a SHIFT + nyilak billentyukkel. A képek helyét visszaállíthatjuk a kiindulási pontba a Reset Position pontnál (,vagy megadhatunk 0,0 koordinátát a helyzetének). Lehetoségünk van képünket egy, az oldalon kiválasztott elemhez igazítani, ilyenkor az adott elem és a kép bal felso sarka kerül azonos koordinátára. Ezt az Align with Selection menüpont segítségével tehetjük meg.
Áttetszoség:
A Page Properties menüpontban az Image Transparency alatt lévo csúszkán lehetséges (0% teljesen átlátszó, 100 % semennyire sem átlátszó).

Képek a dokumentumban

Képeket az Insert menü Image pontja segítségével, illetve az Objects palettán lévo kép ikonra klikkelve, vagy az ikont az oldalon a megfelelo helyre húzva tudunk beilleszteni. Beillesztéskor a felbukkanó menüben meg kell határoznunk a kép elérési útvonalát.

Képek tulajdonságai

- Név:
Egy nevet rendelhetünk a képhez. Ennek a névnek akkor lesz szerepe, ha késobb valamilyen viselkedést, a felhasználó ügyködésére történo reakciót akarunk majd hozzárendelni (ez esetben sem kötelezo a név használata, de sokkal egyszerubb egy név alapján hivatkozni rá, mint a dokumentumban lévo képek közüli sorszáma szerint; különösen, ha az oldal sok képet tartalmaz).
- Szélesség (W),
Magasság(H):
Itt adhatjuk meg, hogy képünk mekkora területet töltsön ki. Ez megadható pixelben (px), %-ban, miliméterben, centiméterben, pontban (pt), illetve ezek kombinációjaként. Érdemes pixelben megadni mivel az egyéb méreteket a program amúgy is pixellé alakítja. Átméretezésre lehetoségünk van a kijelölt kép keretén lévo négyzetek elhúzásával is. A kép alapállapotban akkora területet fog elfoglalni, amekkora a mérete (ha a W ill. H értéket megváltoztattuk, akkor az félkövér betuvel lesz kiemelve). Csak igen kevés esetben érdemes átméretezni a képet, mert minosége jelentos mértékben romolhat. Abban az esetben ha valamiért mégis más méretben akarjuk használni, lehetoség szerint inkább egy képszerkeszto programmal méretezzük át, majd az így kapott képet illesszük a dokumentumba (persze vannak speciális esetek, amikor érdemesebb a böngészore bízni az átméretezést). Ha vissza akarjuk állítani képünk méretét az eredetire, kattintsunk a Refresh gombra.
- Forrás(SRC):
A kép elérési útvonala. (Természetesen lehet abszolút is, pl.:www.extra.hu/pic/kep.jpg)
- Hivatkozás(Link):
A képet hivatkozássá alakíthatjuk. Ez pontosan úgy muködik, mintha szöveggel tennénk azt.
- Alt:
Egy alternatív szöveget rendelhetünk képünkhöz, ennek többféle szerepe is van:
- Ez a felirat lesz látható a kép letöltodése közben
- Nem-grafikus böngészok (pl.: Lynx) ezt a szöveget fogják megjeleníteni a kép helyett egy keretben
- Bizonyos böngészok esetén ha a kép fölött tartjuk az egérmutatót, ez a felirat fog "tool-tip" szeruen megjelenni.
- Bélelés:
(V- és H space) Itt pixelben megadhatjuk, hogy a kép alsó-felso, ill jobb-bal szélétol számítva mekkora területet akarunk üresen hagyni. (Természetesen nem csak pixelben adható meg, hanem egyéb mértékegységekben is).
- Keret (Border):
A kép keretének vastagságát állíthatjuk be itt. Ha a kép link is egyben, a keret színére a linkek színeinek beállításai érvényesülnek.
- LowSrc:
Megadhatunk egy, a kép méreteivel megegyezo másik képet, ami az eredeti kép elott fog letöltodni. 
Felhasználása: Megadunk egy kisebb méretu (byte-ban) képet. Ez sokkal gyorsabban le fog töltodni, mint az eredeti kép, így aki megnézi a lapot, már nagyjából el fogja tudni képzelni, mi lesz ott.
- Align: Itt határozzuk meg, hogy a kép környezetében lévo szöveg hogyan igazodjon a képhez viszonyítva.
- BrowserDefault:
A használt böngészo alapértelmezett beállításai fogják meghatározni az igazítást.
- Baseline:
A szöveg alapvonalát a kép aljával egy vonalra igazítja.
- Bottom:
Mint a Baseline.
- AbsoluteBottom:
A kép alját és a szöveg alját igazítja egy vonalra.
- Top:
A legmagasabb karakter tetejét igazítja egy vonalra a kép tetejével (A kép kerete is beleszámít a kép méretébe).
- TextTop:
Mint a Top, de itt a keretet nem számolja a képhez.
- Middle:
A szöveg alapvonalát a kép közepéhez igazítja.
- AbsoluteMiddle:
A szöveg közepét a kép közepéhez igazítja.
- Left:
A képet a bal oldalra helyezi, jobbról futtatja körül szöveggel. Ha a képet balra zárt szöveg elozi meg, a kép általában egy új sorba kerül, a kép után következo szöveg a kép feletti sorban folytatódik a másikat követve.
- Right:
A képet a jobb oldalra helyezi, balról futtatja körül szöveggel. Ha a képet jobbra zárt szöveg követi, a kép általában új sorba kerül, az elotte lévo szöveg pedig a kép felett fog elhelyezkedni.

Edit: A nyomógombra klikkelve elindíthatjuk a Beállításoknál (Edit/Preferences) megadott képszerkeszto programot, ami alapból be is fogja tölteni az adott képet. Ugyanezt megtehetjük, ha a CTRL (Mac: Command) gombot lenyomva tartjuk, majd duplán klikkelünk a képre. (Harmadik lehetoség: Jobb klikk a képre, majd a legördülo menübol válasszuk az Edit Image pontot.)

Map: A gombra kattintva kliens-oldali hivatkozás-térképeket tudunk létrehozni. Ez a nyomógomb nem található meg a DreamWeaver 3 -ban, a térképet itt a Properities paletta segítségével készíthetjük el.

Kliens oldali térképek

Egy ábrához egy "térképet " tudunk készíteni, amelyen a kép bizonyos területei hivatkozásokként muküdnek.

Nagyon fontos, hogy ha egy képre alkalmazunk ilyen hivatkozástérképet, akkor magát a képet ne alakítsuk hivatkozássá!

Lehetoségünk van téglalap, kör ill. sokszög alakú területeket megjelölnünk az adott képen, és minden ilyen megadott területre külön-külön beállítani, hogy mire legyen hivatkozás, mi legyen az alternatív neve, (ill. megadhatjuk, hogy a betöltodo oldal hol jelenjen majd meg, de errol részletesebben a Frame-eknél).

Beállítások:

- MapName:
Itt kell megadnunk a térképünk nevét. Az adott térképnek mindenképpen kell, hogy legyen egy neve. A névadási szabályok itt is érvényesülnek (A térképekre való hivatkozás az elnevezett horgonyokhoz hasonlóan történik - # név - ezért ne adjunk a térképnek olyan nevet, amely már egy másik horgonynál is szerepelt).
- Területek:
A különbözo alakú ikonokra klikkelve tudjuk megrajzolni a képen a kívánt területet, a nyíl ikon segítségével tudjuk kiválasztani valamelyik területet. Egy létrehozott terület törlése azt kijelölve, majd a Del billentyut megnyomva lehetséges.
- Link:
Itt adhatjuk meg, hogy a kijelölt terület mire legyen hivatkozás (Internet cím).
- Alt:
A terület alternatív neve. Muködése megegyezik a képnél említett alternatív névvel , de értelemszeruen csak az adott területre vonatkozik.
- Target: Beállíthatjuk, hogy a hivatkozás hol jelenjen majd meg.
_blank:
Egy új, üres böngészoablakban.
_self:
Abban az ablakban, amelyben az adott oldalunk található.
_top:
Abban az ablakban, amelyben az adott oldalunk található, de az oldalról minden Frame-et le fog törölni a böngészo (bovebben lásd: Frame-ek).
_parent:
Abban az ablakban, ahonnan az adott oldalunkat megnyitottuk.
Frame-név:
Megadhatunk egy általunk létrehozott Frame-et is (errol bovebben a Frame-eknél).

Fontos, hogy a definiált területek ne lógjanak bele egymásba, ellenkezo esetben az eredmény teljesen kiszámíthatatlan lesz.

 

 

>>Vissza a tartalomhoz
Untitled Document