Ebben a cikkben a Dreamweaver programban készítünk el egy figyelemfelhívó ablakot (pontosabban layer-t).
A Popup ablak helyett jól használható, például akkor, ha az oldal látogatói számára szeretnénk fontos információkat közölni, de a Popup ablakok kapcsán jelentkező problémákat (Pl.: a felhasználó letiltotta a popup ablakok megjelenítését) ki szeretnénk kerülni.
Fogadja szeretettel ezt a minitanulmányt!
Reméljük, hasznára válik majd!
Üdvözlettel,
Netlogi C School
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
http://www.netlogi-c.net
A megoldáshoz Layer-t, ( másképp AP Div ) és a beépített javascript generátort, vagyis a Behaviors-t fogom használni.
A Layerek abszolút pozícióval rendelkező div-ek, ( tehát az oldalon tetszőlegesen pozícióban lehetnek ) erre utal a másik nevük az Absolute Position Div. Másik tulajdonságuk, hogy az oldal szövegteste előtt jelennek meg.
Ez a két tulajdonság az, ami alkalmassá teszi számunkra, hogy a fenti célra, vagyis a figyelemfelkeltő „ablak”–ot készítsünk.
Az oldal struktúrája nálam a következő:
div#content
div#header
div#main
div#footer
div#content vége
A létrehozás lépései:
1) A div#header és a div#main közé létrehozok egy új div-et.
2) A div nyitótag-ben a következő utasítást helyezzük el. style="position:relative" ezzel a CSS utasítással jelezzük, hogy a div az html-ben elfoglalt helye a pozíciója. Ebbe a div-be fogjuk beletenni a Layer-ünket. (Itt lesz a „ horgony pontja”).
Erre azért van szükség, mert a Layerek pozíciója az oldal bal felső sarokból kiindulva az ap div bal felső x,y koordinátája pixelben. A relatív pozíció hatására a AP div-ünk már nem az oldalhoz viszonyítja a helyét, hanem a relatív pozíciós div-hez képest, így együtt mozog az oldallal.
Ha ezt nem tesszük meg az ablakunk mindig ugyan abban a pozícióban lenne, még akkor is, ha az ablakot átméretezzük, ami nem túl elegáns megoldás.
3) Belekattintunk a div be, beszúrunk egy új div-et, és ID-t adunk neki (Én a popup id-t adtam neki). Ez lesz némi átalakítás után a layer-ünk.
4) A beszúrás után kitöröljük a automatikusan beleírt szöveget.
5) A kurzort a nyitó tag-be visszük és új css szabályt hozunk létre (css panel fehér lap +jellel). Kitöröljük az automatikusan kitöltött mezőt, hogy #popup maradjon és ok gomb után beállítjuk a szabályokat.
6) Most összesen 3 dolgot állítunk csak be, de minden az ablakra vonatkozó beállításunkat itt tudjuk megtenni.
a) Positioning Category / Type – Absolute ( Így alakítjuk át a div-et layer-ré )
b) Positioning Category / Width és Height beállítása ( Ablak mérete)
c) Background Category / Background Color ( Ablak háttérszíne )
7) Az ok után létrejön a Layer, a bal felső saroknál megfogva a kívánt helyre húzzuk. Az ablak mindig itt fog megjelenni.
8) Elkészítjük a tartalmat! Beírjuk a kívánt az információkat és a szöveg alatt csinálunk egy bezár feliratot, amiből linket csinálunk. (Elég a # is).
9) A kurzorral beleállunk a bezár feliratba, és létrehozzuk a javascript kódot, ami „becsukja” az ablakot. A Tag Inspector panelon most a Tag<a> látszik, jelezve, hogy a kódot ehhez az elemhez készítjük el.
10) A Behaviors fülön, Insert gombot majd a Show-Hide Layer opciót kell kiválasztani.
11) A megjelenő ablakban a Hide lehetőséget választani és ok. (Ha több Layerünk van azt kell kiválasztani amit el akarunk rejteni).
12) A viselkedéshez tartozó eseményt nem kell állítani, mert egérkattintás vagyis az onclick az alapértelmezett (vagyis egérkattintásra a bezár feliraton eltünteti a layer-t).
Természetesen a Layer-t tetszőlegesen lehet díszíteni, minden olyan dolog megcsinálható ami egy normál div-vel, háttérkép, belső margó stb., tehát profi külalakot lehet kialakítani ennek a mezőnek is.
Izgalmas látvány az átlátszó .png- képek (pl. színátmenetes) háttérképként beállítva, mivel a div-nek alapértelmezés szerint nincs háttérszíne ezért az oldal látszik a layer alatt.
További izgalmas trükkökkel és tippekkel várjuk gyakorlat orientált Webdesigner Mester képzésünkön!
Olvasson többet az emelt szintű weblapkészítő tanfolyamról </a>itt!
Jó tanulást, fejlődést kíván Önnek,
a Netlogi C School csapata!
http://www.netlogi-c.net
Címkék: Webdesigner Mester layer Dreamweaver Popup
Megjelenés ideje: 2010-09-28 16:39:57
Beküldte: Weinzierl Anett (Netlogi C School)