--->>> PORTALGURU <<<---


Főoldal
Vendégkönyv
Fórum
Blog 
Itt hirdess!!!
Bannereim
Frissítések 
Díjaim 


Hogyan ???
Vezérlő menü
HTML tanfolyam
Kódok 
Kódpróba
Újdonságok a Gp-n
Pánik


Design szettek
780 pixeles szettek
Glitteres szettek
CSS kódok
Fejlécek 
Hátterek (1131 db)
Menük 
Hirdető dobozok
Naptárak
Naptáras órák
Avatarok  (270 db)
GIF-ek (138 db)
Glitterek
Átlátszó képek (451 db)
PSP brush 
PSP mask 
PSP Textures 
Modulhátterek
Képes keretek I.
Képes keretek II.
Glitteres keretek
Csipkés keretek
Átlátszó keretek
Oldalhátterekhez keretek


Stílusok
Új stílusok 
Színkódok nevei
Színkód generátor
Hasznos linkek 

Letöltések 

Elkészült rendelések 

Kedvcsináló 

 

 

Fantától kaptam, köszönöm!!!


Kedvenc oldalam

Fantától

 

           

Eddig 15 sablonhoz készült webszett!

Eddig 126 db 780 pixeles webszett!

Eddig
32 db extra szett!

2009.10.23.
Új menüpont a Kellékeknél:
PSP Textures!

114 db új kép
Használat leírásával!



2009.10.10.
  8 db új design szett
Ezek csak az EXTRA-s
oldalamon láthatók

http://semilin.extra.hu

 

  Ha kérdésed van, írj a FÓRUM-ba!

 
Gyere máskor is!
 
semilin

 

 

 

 

 

           

     

     

SMS hirdetőfal - Megéri!
 
Belépés
Felhasználónév:

Jelszó:
SúgóSúgó
Regisztráció
Elfelejtettem a jelszót
 
Hírlevél! Iratkozz fel!
E-mail cím:

Feliratkozás
Leiratkozás
SúgóSúgó
 
Látogatottság
Indulás: 2007-07-04
 
Szavazás
Lezárt szavazások
 

 


 

Page Ranking Tool

 

PageRank Kereső optimalizálás


 

 

 

Az oldal elköltözött, frissítések itt már nem lesznek!!! Gyere az új helyre: http://webdesign-graphic.hu Klikk!!!

HTML tanfolyam
HTML tanfolyam : 7. lecke - Link kezelés, menü szerkesztés

7. lecke - Link kezelés, menü szerkesztés

  2008.01.28. 21:46


7. lecke

Linkek kezelése

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:

 


 Egy klikkelés és már nyomatódik az oldal


 

Sztárok/Bulvár: Tudj meg friss pletykákat, híreket. Katt!    *****    Outsider - Gay - Creative - Rebel - Tolerant - Furry - Brony - Hipster - Gamer - Otherkin - Geek - Autistic    *****    Xtina Hungary - Minden, ami Christina Aguilera!    *****    Légy Te is AVON tanácsadó *** Nyereményjátékok *** Kereseti lehetõség *** Vásárolj kedvezményesen AVON termékeket!    *****    Nyerj ajándékszettet! Töltsd ki a kérdõívet és nyerj! *** Nyerj ajándékszettet! Töltsd ki a kérdõívet és nyerj!    *****    Jófogás Játékvásár - Jófogás Játékvásár - Jófogás Játékvásár - Jófogás Játékvásár     *****    FRPG &#9679; FANTASY SZEREPJÁTÉK &#9679;&#12300;&#914;&#923;SM&#923;IW&#12301; &#9679; FANTASY SZEREPJÁTÉK &#9679; EGY SZIGET + 24 MÁGUS &#9679; FANTASY SZEREPJÁT&Eacut    *****    Itt megtalálhatod a legfrissebb híreket, cikkeket, képeket a Golden Globe- és Oscar-díjas színésznõrõl! Katt!    *****    Furry Fandom - Antropomorf Állatok - Furry Fandom - Antropomorf Állatok - Furry Fandom - Antropomorf Állatok    *****    Légy Te is AVON tanácsadó *** AVON termékek *** Kereseti lehetõség *** Értékesítõ kollégákat keresek *** sminkek    *****    Esküvõi meghívók! Mindegyik kézzel készült, egyedi. Gyere, nézd meg az oldalamat.    *****    A legfrissebb Anime hírek , mindennap anime ajánló , mondocon képek , és hírek. Csatlakozz közösségünkhöz!    *****    Rendelj bármilyen asztrológiai elemzést,júniusban Te mondod meg,hogy mennyit szeretnél érte fizetni!Várlak az oldalamon!    *****    Egyetemistáknak kiemelt lakások eladóak. www.simonyiingatlan.hu Debrecen eladó kiváló lakások. www.simonyiingatlan.hu    *****    Egyetemistáknak kiemelt lakások eladóak. www.simonyiingatlan.hu Debrecen eladó kiváló lakások. www.simonyiingatlan.hu    *****    NÁLAM NINCSENNEK AKCIÓK, MINDEN ASZTROLÓGIAI ELEMZÉS "BECSÜLET KASSZÁS", A KONZULTÁCIÓ ÉS OKTATÁS INGYENES.    *****    **** Nokedli-lapja****Családi magazin****18-98 éves korosztály mindent megtalál itt, játékoktól a hírekig*****    *****    KÜLÖNLEGES AKCIÓ A CSILLAGJÖVÕ OLDALON JÚNIUSBAN.TE DÖNTHETED EL MENNYIBE KERÜLJÖN A HOROSZKÓP MEGRENDELÉSEID ÁRA!    *****    Minden héten anime/managa hírek , minden nap Anime ajánlók , Mondocon hírek. Itt nem fogsz unatkozni!! :)    *****    KÜLÖNLEGES CSILLAGJÖVÕ AKCIÓ JÚNIUSBAN.TE DÖNTHETED EL MENNYIBE KERÜLJÖN A SZÜLETÉSI HOROSZKÓP! VÁRLAK!RENDELD MEG MOST!