Tudunk már csinálni csili-vili keretes hátteret, vannak benne szebbnél szebb képek, szövegek. Szép, szép, de valami hiányzik... Ez így - bármilyen szép - mégis csak egy statikus oldal. Vigyünk bele egy kis mozgást, dinamikát! Jó lenne például, ha egy képre vagy szövegre klikkelve megnyílna egy másik oldal, vagy kép, vagy bármi.

Egy HTML oldalon ezt a dinamikát - azaz a vezérlést - linkek segítségével oldjuk meg.

Ebben a leckében csinálunk egy saját menüt! Lássunk hozzá!

FONTOS: mielőtt elkezded, tudnod kell annak az oldalnak, képnek vagy fájlnak az URL címét, amelyre majd a link mutat.

Hogyan tudom meg egy kép URL címét (elérési útvonalát)?

Klikkelj a feltöltött képre, hogy eredeti méretében lásd, majd jobb klikk a képen és a felbukkanó menüből válaszd a "Tulajdonságok"-at. Újabb ablak nyílik meg, amiből ki kell másolni a kép URL címét.

Jelöld ki, ahogy a képen látod, majd másolás (Ctrl+C). Ezzel a vágólapra került a kép URL címe. (Ha akarod le is írhatod magadnak, de pontosan ám:)))

Ezt az oldalt fogom megcsinálni, így néz majd ki:

MENÜ Főoldal Bannerem

Az előző leckékből már ismert egymásba ágyazott táblázatokkal kezdünk. Csinálj egy táblázatot, a háttere lesz majd a keret, 350 pixel szélességűt. (Nekem  glitteres)

Ebbe ágyazz egy másik táblázatot, a háttere legyen valamilyen szín, vagy kép. (Ha nem megy, menj vissza a 4. leckéhez.) Írd bele középre, hogy "MENÜ".

Ez eddig így néz ki nekem:

MENÜ

Itt a kódja, ellenőrizd:

Kékkel jelöltem az első (glitteres) táblázatot, pirossal a beleírt szöveg kódját. A fennmaradó fehér rész a beágyazott táblázat kódja. Ezzel megvolnánk, tegyük félre.

Mivel azt szeretnénk, hogy minden menüpont előtt legyen egy képecske érdemes egy újabb táblázatot csinálni. Legyen két oszlopa, egyik a képnek, másik a szövegnek. Annyi sora legyen, ahány menüpontot szeretnél. A példánkban 2 soros, 2 oszlopos táblázatra van szükségünk.
Nem adunk meg szélességet, mert azt úgyis a legelső táblázat határozza meg (350 pixel), elég, ha %-ban adjuk meg. A 100% azt jelenti, hogy töltse ki a rendelkezésre álló helyet. A két oszlop fele-fel arányban - 50-50%- osztja fel a helyet. A border legyen "0", hogy ne látszódjon a táblázat.

Most következik a képek és a szövegek beillesztése. A táblázat első oszlopának minden sorába betesszük a képet.Remélem már megvan a képed URL-je, mert most lesz rá szükség. Ha eddig követted, amit írtam akkor a kép URL címe a vágólapon van, mert kimásoltad Ctrl+C-vel. Jön a kép beillesztésére szolgáló <img> parancs. Ha nem vagy biztos benne, nézd át újra az 5. leckét!

TIPP: pötyögd be a fenti parancsot az src=" -ig, majd Ctrl+V-vel bemásolod az URL címet!
Ezután folytasd a pötyögést. Így biztosan nem lesz benne "helyesírási" hiba:))

Beillesztjük a táblázatba (zölddel jelöltem)

A táblázat második oszlopának soraiba beírjuk a szöveget (sárgával jelöltem) és a cellaköz értékét 5-re állítjuk, hogy a szöveg ne "ragadjon rá" a táblázat szegélyére (kék).

Már mennyit dolgoztunk és még sehol semmi link. A példánkban a "Főoldal" szövegre egy HTML oldal linkjét tesszük, a "Bannerem" szövegre pedig egy kép URL-jét. Mindkettő külön ablakban fog megnyílni, ha ráklikkel a látogató  a linkre.

Nézzük végre a link parancsot:        <a href="....."></a>

Paraméterek:

target="..." - meghatározza, milyen ablakban nyíljon a link. Lehetséges értékek:
                       _blank   - új ablakban
                       _parent  - "szülő" ablakban (abban az ablakban, amely a linket tartalmazza)
                       _self       - azonos ablakban
                       ha ezt a paramétert nem adjuk meg, akkor az oldal alapértelmezése érvényes.
                       Megadhatunk itt frame nevet is, de ezt most hagyjuk.

href="...oldal vagy kép URL-je..." - ez fog megnyílni, ha ráklikkelsz

A font utasítással formáztuk a szöveget. Félkövérré tettük (b) és adtunk színt neki.

Ha eddig bírtad türelemmel, ne add fel, mindjárt készen vagyunk. Már csak ezeket a linkeket kell betenni a táblázat megfelelő helyére, mutatom:

Végül ezt a táblázatot be kell illeszteni az előzőleg elkészített glitteres táblázatba.
A teljes kódot letöltheted innen: Link_kezelés

Nem olyan bonyolult ám, mint amilyennek látszik! Elismerem, sok türelem kell hozzá, de megéri!

GPORTAL-osoknak:
A Gportal Tartalom menedzsere ezt a kódot  automatikusan legenerálja. Mikor kész vagy a glitteres táblázattal, a kódot másold be egy egyszerű modulba. Aztután válts vissza editor nézetbe és a szöveg, kép, link beillesztését már el tudod végezni az editor megfelelő ikonjaival.
A Tartalom menedzser ikonjairól az "Egyszerű modul szerkesztése" cikkben olvashatsz.

Itt gyakorolhatsz: