Infoartnet - Web Média Marketing

Kép beszúrása, szerkesztése funkció

Az eszköztár elem funkciója

Ezzel a funkcióval, különböző típusú képfájlok adatbázisba való feltöltését, az aktuális tartalmi elembe történő beillesztését, jellemző alapszerkesztéseit és néhány formázását végezheti el.

Megjegyzés: A beillesztett kép-, és/vagy médiafájlok megjelenése nem csak a beállításoktól, hanem az oldalt futtató böngésző program lehetőségeitől is függ.

Képfájlok beszúrásának lépései

1. Lépés

Álljon az egérkurzorral abba a pozícióba, ahová a kívánt képfájlt be szeretné ágyazni.

2. Lépés

Kattintson az aktuális szerkesztő ablak (Bevezető szöveg, vagy Szövegtörzs) feletti Eszköztár, "Kép beszúrása/szerkesztése" nevű funkció ikonjára.

3. Lépés

A megjelenő "Kép beszúrása/szerkesztése" panelen több lehetősége is van a kívánt képfájl megadásához. Amennyiben tudja a kép pontos webcímét (URL), abban az esetben írja vagy másolja azt be, a "Kép URL" mezőbe.

Általában azonban a könnyebb és praktikusabb megoldás, hogy a "Médiakezelő-be" már előzőleg feltöltött (vagy éppen most feltöltésre kerülő) képet egyszerűen a megfelelő mappából kiválasztjuk. Ehhez használja a "Kép URL" beviteli mező melletti "Tallózás" gombot

3. Lépés

Ha már egy beillesztett képet szeretne cserélni, akkor a "Kép URL" mező már kitöltött, ilyenkor vagy ellenőrizze és/vagy írja át a frissíteni/szerkeszteni kívánt képfájl URL-jét, illetve itt is alkalmazhatja a "Médiakezelő-t".

4. Lépés

A bal oldali ablakban navigálva keresse meg azt a könyvtárat, amelyik a beszúrni kívánt képfájlt tartalmazza, vagy ahová az új, még fel nem töltött kép(ek)et el kívánja helyezni.

5. Lépés

Ha a tartalmi elemben elhelyezni kívánt kép még nem él az adatbázisban, de elérhető az Ön számítógépén, hálózatán, vagy bármilyen fajtájú mobil adathordozóján, akkor előbb vegye fel az adatbázisba a jelen útmutató "Médiakezelő" című fejezetének, "Új fájl(ok) feltöltése" alcíme alatt ismertetett lépések végrehajtásával.

Ha a kép már él az adatbázisban, akkor a jobb oldali listázó felületen klikkeljen duplán, a beszúrni kívánt fájlra. Ennek hatására a kép megjelenik az előnézeti ablakban, és az elérési útja pedig beíródik a "Kép URL" mezőbe.

6. Lépés

Ez a lépés opcionális. Állítsa be az ablak három beállítási paneljén (Általános, Megjelenés és Haladó fülek) a szükséges, vagy kívánt paramétereket.

  • ÁLTALÁNOS BEÁLLÍTÁSOK FÜL



    Kép URL: A kép elérési útvonala és fájlneve. A kép, adatbázisból való kiválasztásakor automatikusan beíródik a mezőbe, de itt is begépelhető vagy átírható, illetve vágólapról "CTRL+V"-vel is beilleszthető.

    Tallóz ikon: Az adatbázis képeinek az elérése, az ikonra  való klikkeléssel kezdeményezhető.

    Kép helyettesítő szövege:
    Ez a korlátozással élők, szöveges böngészőt használók és a képek megjelenítését letiltó felhasználók számára beírt szöveg. Ha a képet valamilyen oknál fogva nem találja a böngésző, vagy az aktuális kiegészítő (pl. vakokat segítő) program, akkor az ebbe a mezőbe írt szöveget jeleníti meg, vagy olvassa fel helyette. Lásd: a következő, bekeretezett szöveget.

    Ha a kép valamilyen okból nem megjeleníthető, a böngésző akkor is jelöli a helyét, és a helyettesítő szöveget.

    Ha az egérkurzort az előbbi szövegboxban lévő helyettesítő szöveg fölé húzza, megjelenik a kép címe is (próbálja ki).

    Az adminisztrátori oldalon, az előbbi szövegkörnyezet a következőképpen néz ki:





    Cím: A kép címe, felirata. Az ebbe a mezőbe írt szöveg jelenik meg, amikor az egérkurzort a kép fölé húzza valaki.



    Előnézet: A korábban adatbázisból kiválasztott kép megjelenítése, ellenőrzés céljából. Ha a kép nagyobb, mint a megjelenítő ablak, akkor automatikusan függőleges és/vagy vízszintes gördítő sávok jelennek meg a felületen.

    Beszúr/Frissít gomb: A kép beillesztése, a tartalmi elem 1. lépésben kijelölt karakter-pozíciójába. Ha nem egy új kép tartalmi elembe illesztését végzi, hanem egy már beszúrt kép paramétereit módosítja, akkor a "Beszúr" felirat helyett "Frissít" jelenik meg a gombon.

    Mégse gomb: A képbeszúrás vagy frissítés elvetése, az ablak bezárásával. A jobb felső sarokban lévő "X" gombra klikkelve ugyanezt a hatást érheti el.
  • MEGJELENÉS FÜL



    Igazítás:
    A kép beszúrást követő igazítása, a már meglévő szöveghez. Bármelyik opciót választja, a mezőtől jobbra lévő keretben azonnal megtekintheti és ellenőrizheti a választás eredményét.



    Az igazítás opciók közül a 3 leggyakrabban használt:

    Alapvonalhoz (alapértelmezett - ez a beállítás történik akkor, ha a választólistát a "--Nincs megadva--" opción hagyjuk. Ez a beállítás megegyezik a szövegszerkesztőkből már megismert "kép a bekezdésben" beállítással. Akkor érdemes használni, ha a képet illusztrációként két bekezdés közé szeretnénk elhelyezni és/vagy a képet táblázatcellába szeretnénk beszúrni. Ilyenkor a kép igazítását a bekezdés igazításokkal tudjuk változtatni.

    Kép a bekezdések között


    Kép a táblázatcellában


    Speciális esetben pl.: ha a kép mérete kicsi, akkor használható szöveg elemek közötti illusztrációhoz. Fontos, ilyenkor a bekezdés magassága a kép magasságával lesz egyenlő, így a magasságra nagyon kell figyelni. Rosszul megválasztott képmagasság - "A" jelű bekezdés. Jól megválasztott képmagasság - "B" jelű bekezdés.



    Balra és Jobbra: ezek az opciók megegyeznek a szövegszeresztőkből már ismert "négyzetes körbefuttatás" beállítással. Azaz, az így beállított kép a kívánt oldalról (bal vagy jobb) a kijelölt bekezdés mellett kerül elhelyezésre. A kép mellett megjelenő bekezdéssorok száma függ a bekezdések betűméretétől illetve a kép magasságától. Hosszab szöveges tartalomhoz ideális és tetszetős illusztrációs megoldás.





    Fontos, sorszámozott (rendezett) lista illetve felsorolás típusú lista (rendezetlen) mellé ne használjuk a "Balra" opciót, ugyanis ilyenkor a kép letakarja a listaelemet. Ha mindenféleképpen szeretnénk lista mellé képet tenni, akkor vagy a "Jobbra" igazítást használjunk vagy egy táblázatot (1 sor - 2 oszlop, első oszlopban a lista a másikban a kép (igazítása: Alapvonalhoz).



    Méretek: Alapesetben a kiválasztott kép valódi méretét mutatja pixelben. Az első érték a szélesség a második pedig a magasság.



    Amennyiben szükségesnek tartja itt a képet átméretezheti, ha a az aránytartás opció be van kapcsolva (alapértelmezésként igen), akkor nincs más dolga, mint a képméret egyik paraméterét átírni - a másik méret automatikusan és arányosan fog változni (így a beszúrt kép nem lesz torz).
    Fontos, ha a kép eredeti mérete kicsi és Ön látványosan nagyítja, akkor az a weboldalban nem fog élesen megjelenni (pixeles lesz). - "A" példa. Ha azonban egy nagyméretű képet többszörösére kicsinyit ezzel az opcióval, az a weboldalban feltehetőleg homályosan vagy pixelesen fog megjelenni, azaz nem lesz éles. - "B" példa.





    Megjegyzése, tanácsok
    Ha a kép nagyon nagyméretű (több ezer pixel x több ezer pixeles, és/vagy a fájlmérete is több megabyte) akkor érdemes a méretét egy küldő képszerkesztő programban csökkenteni. Hiszen ha egy ilyen képet feltölt a médiakezelőbe, majd a képbeszúráskor a méretét látványosan kisebbre veszi pl.: szélesség 2000 pixel helyett 200 pixel, akkor bizony az a kép azonfelül, hogy nem sokat fog mutatni a tartalmából mellé még az oldal betöltését is lassítja, hiszen csak virtuálisan kisebb (a mérete még mindig több megabyte). Gondolja végig ha oldalanként csak két-három ilyen képet használ, akkor az átlagos betöltési idő (erőforrástól függően) akár megsokszorozódhat. Arról nem is beszélve, hogy mindezt elkerülheti.

    Célszerű a képeket maximum a tartalomhoz rendelt szélességhez és annak megfelelő arányos kicsinyítéséhez igazítani. Ha nem tudja az Ön által használt webportál ezen paraméterét kérdezze kollégánkat. Példaként egy olyan webportál esetén, ahol a tartalmi elem maximális szélessége 640 pixel, akkor ezek a szélesség méretek lehetnek célszerűek: 640 px, 320 px, 160 px ettől a sorozattól eltérő, azonban közkedvelt képméret még a blogos megjelenítés, illetve az egyszerű szöveges illusztrációk esetén a 100 px vagy 150 px széles ún. bélyegkép.

    Fontos, hogy legyen következetes, az azonos jellegű tartalmi elemek illusztrálásánál pl.: ha egy blogszerűen létrehozott listában balra igazított 100 px. széles képeket alkalmazott, akkor tegye ezt mindig így a képernyőkép egésze mindig egységes lesz.

    Előre beállított képméret: előfordulhat, hogy az Ön által adminisztrált webportál sablonjában kollégáink a képekhez egy előre beállított fix méretet állítottak be, melynek következtében az Ön által beszúrt kép nem az eredeti méretével, hanem ezzel a mérettel jelenik meg. Ha ettől Ön el szeretne térni (és erre a sablon lehetőséget nyújt - ha nem keresse ez ügyben kollégáinkat), akkor a következőket kell tennie.
    - Szúrja be a képet a már ismertetett módon.
    - Váltson a megjelenés fülre és törölje a Méretnél látható előre beállított értékeket
    - A Beszúr gombbal rögzítse a kép beszúrását.
    - Ha így jár el, akkor a kép az eredeti méretével jelenik meg a weboldalban
    - Ha utólag még ezt a képet tovább szeretné méretezni, akkor kattintson a képre, majd a Kép beszúrása/szerkesztése gombra
    - A Megjelenés fülnél állítsa be a kívánt méreteket

    Ne felejtse el, hogy a képeket az AWE Pyramid 3.x Médiakezelő moduljába beépített lehetőségek segítségével szerkesztheti is.

    Függőleges távolság: Ebben a mezőben az aktuális kép teteje és alja, valamint a felette és alatta elhelyezkedő szöveg, másik kép, táblázat és/vagy a megjelenítő felület alsó és felső széle közötti - margó szerepét betöltő - kívánt távolságot adhatja meg, pixelben. Igazán nagy jelentősége a feljebb már említett Balra és Jobbra igazított képelhelyezésnél van.

    Vízszintes távolság: Ebben a mezőben az aktuális kép jobb és bal oldala, valamint a tőle jobbra és balra elhelyezkedő szöveg, másik kép, táblázat és/vagy a megjelenítő felület jobb és bal széle közötti - margó szerepét betöltő - kívánt távolságot adhatja meg, pixelben. Igazán nagy jelentősége a feljebb már említett Balra és Jobbra igazított képelhelyezésnél van.

    Keret:
    Ebben a mezőben a kívánt keret szélességét adhatja meg pixelben. Mivel a keret alapértelmezett színe fekete érdemes az 1 pixel keretvastagsággal dolgozni, hiszen pl.: több pixel esetén már szinte gyászkeretet hozunk létre.



    Style:
    Ebben a mezőben a keret alapértelmezettől eltérő grafikai jellemzőit állíthatja be. (vonalvastagság, vonaltípus, szín). Ehhez a beállításhoz némi HTML ismeret szükséges, amennyiben nem jártas ebben azonban szeretne más típusú és/vagy színű stb. keretet létrehozni kérje kollégáink segítségét.

    Beszúr/Frissít gomb: A kép beillesztése, a tartalmi elem 1. lépésben kijelölt karakter-pozíciójába. Ha nem egy új kép tartalmi elembe illesztését végzi, hanem egy már beszúrt kép paramétereit módosítja, akkor a "Beszúr" felirat helyett "Frissít" jelenik meg a gombon.

    Mégse gomb: A képbeszúrás vagy frissítés elvetése, az ablak bezárásával. A jobb felső sarokban lévő "X" gombra klikkelve ugyanezt a hatást érheti el.
  • HALADÓ FÜL



    Képcsere: A rendszer képes arra, hogy az egérkurzor kép fölé vitelekor, illetve a képről való elmozdításakor más-más képet jelenítsen meg. Ehhez aktiválnia kell az "Alternatív kép" jelölőnégyzetet és meg kell adnia a váltóképek eléréseit.

    A következő - nyilat tartalmazó - kép ezt a funkciót szemlélteti. Helyezze az egérkurzort a kép fölé, majd húzza el onnan. A mozdulatsort ismételgetve, alaphelyzetben a narancssárga, a kurzort fölé húzva pedig a kék nyíl fog megjelenni a képernyőn.



    A következő példánkban három képet használunk. A "Haladó" fülön az előző két nyilat állítottuk be - csak ellenkező sorrendben -, az "Általános" fülön pedig egy harmadik, fehér nyilat. Ez esetben a fehér nyíl, csak a tartalmi elem megnyitásakor és/vagy frissítésekor jelenik meg, a másik két nyíl pedig egymást váltja, az egérkurzor mindenkori helyzetének megfelelően. A "Megjelenés" fülön beállított paraméterek (méret, keret, stb.) mindhárom képre érvényesek. Próbálja ki ezt a beállítást is, közben néha frissítse a böngészőt - Mozilla Firefox és Internet Explorer esetén - pl., az F5 billentyű használatával.

    Megjegyzés: Frissítéskor ne legyen az egérkurzor a kép felett, mert akkor a "semleges" fehér állapotot azonnal felülírja a "Kép az egérkurzor fölévitelekor" opcióra érvényes beállítás.



    Alternatív kép: Ez a jelölőnégyzet aktiválja vagy kapcsolja ki, a képcsere funkciót. Az inaktiválás törli a következő két mező tartalmát.

    Kép az egérkurzor fölévitelekor:
    Ebbe a mezőbe kell beírni, bemásolni, vagy a mező mögötti "Tallóz" ikon használatával adatbázisból kiválasztani azt a képfájlt - az elérési útvonalával -, amit akkor akar megjeleníttetni a rendszerrel, amikor az egérkurzor az alapkép által lefedett képernyő terület fölé kerül. Azaz a váltóképek közül ide kerül a második (amire vált a kurzor mozgatás)

    Kép az egérkurzor levételekor: Ebbe a mezőbe kell beírni, bemásolni, vagy a mező mögötti "Tallóz" ikon használatával adatbázisból kiválasztani azt a képfájlt - az elérési útvonalával -, amit akkor akar megjeleníttetni a rendszerrel, amikor az egérkurzor nincs az alapkép által lefedett képernyő terület fölött. Azaz a váltóképek közül ide kerül az első.

    Fontos, a váltókép létrehozásnál célszerű a képeket egyforma méretűre állítani, hiszen ez csak így szép és látványos. Amennyiben utólag változtat a váltóképek bármelyikén méretben, akkor tegye ezt meg a másik képpel is.
    Mivel a folyamatos "villogás" zavaró lehet a webportál olvasójának, így olyan megoldásokhoz ajánljuk ezt a lehetőséget, ahol fel szeretnénk hívni a figyelmet. illetve praktikus lehet egy linkre utalás esetén is (úgy funkciónál, mint egy nyomogomb - természetesen ilyenkor a képhez hozzá kell rendleni a linket - Ennek leírását itt találja

    Vegyes box paraméterei: Az ebben a boxban található paramétereket nem részletezzük, mivel az átlagos felhasználók (adminisztrátorok) a napi munkájuk során feltehetően nem fognak találkozni velük. Ezek a paraméterek inkább a rendszer fejlesztői számára lehetnek érdekesek, ráadásul egyéb háttérismeretekkel is kell rendelkezni a használatukhoz, amelyek ismertetése nem célja ennek az útmutatónak.

    Beszúr/Frissít gomb: A kép beillesztése, a tartalmi elem 1. lépésben kijelölt karakter-pozíciójába. Ha nem egy új kép tartalmi elembe illesztését végzi, hanem egy már beszúrt kép paramétereit módosítja, akkor a "Beszúr" felirat helyett "Frissít" jelenik meg a gombon.

    Mégse gomb: A képbeszúrás vagy frissítés elvetése, az ablak bezárásával. A jobb felső sarokban lévő "X" gombra klikkelve ugyanezt a hatást érheti el.

7. Lépés

Ha minden szükséges vagy kívánt paramétert beállított, klikkeljen a "Beszúr" vagy "Frissít" gombra. Ezek hatására, a program beszúrja a megadott képet a Tartalmi elem szerkesztő, 1. lépésben kijelölt karakter pozíciójához, a 6. lépésben beállított, vagy - annak hiányában - az alapértelmezett paraméter értékeknek megfelelően.

Képfájlok módosítása

1. Lépés

Klikkeljen a Tartalmi elem szerkesztő felületen, a módosítandó képre.

2. Lépés

Klikkeljen a "Kép beszúrása/szerkesztése" funkció ikonra.

3. Lépés

Változtassa meg a beállításokat az igényei szerint, illetve a feladatnak megfelelően az Általános, a Megjelenés és/vagy a Haladó felületeken.

4. Lépés

Ha nem csak paramétereket kell változtatni, hanem a képet is szerkeszteni (vágni, forgatni, stb.) kell, akkor az Általános fülön aktiválja a Tallóz ikonnal, a "Médiakezelő" funkciót és abban is hajtsa végre a szükséges módosításokat.

5. Lépés

Frissítse az új beállításokat, ezzel automatikusan visszatér a Tartalmi elem szerkesztő felületre.

Instagram
Instagram
Facebook
Google+
Twitter