A Dreamweaver segítségével könnyedén hozhat létre legördülő menüket a webhelyére. De mint minden HTML formában, lehet egy kicsit trükkös. Ez a leírás bemutatja a Dreamweaver legördülő menüjének létrehozásával kapcsolatos lépéseket.
Dreamweaver Jump Menük
A Dreamweaver 8 egy varázslót is létrehoz, amely létrehoz egy ugrási menüt navigációhoz webhelyén. Az alapvető legördülő menüktől eltérően ez a menü valójában valamit megtesz, ha befejezte. Nem kell írni semmilyen JavaScriptet vagy CGI-t, hogy a legördülő űrlap működjön. Ez a bemutató azt is elmagyarázza, hogyan kell használni a Dreamweaver 8 varázslót egy ugrás menü létrehozásához.
01-ből 20-ból
Először készítsd el az űrlapot
Fontos megjegyzés a HTML űrlapokról és a Dreamweaverről:
Kivéve a speciális varázslókat, mint például az ugrási menüt, a Dreamweaver nem segít a HTML formák "munkájában". Ehhez CGI vagy JavaScript szükséges. Kérjük, olvassa el az útmutatónkat. További információkért készítsen HTML formanyomtatványokat.
Ha egy legördülő menüt ad hozzá webhelyéhez, az első dolog, amire szükséged van, egy kör alakú körülmény. A Dreamweaver alkalmazásban lépjen a Beszúrás menübe, és kattintson az Űrlapra, majd válassza az "Űrlap" lehetőséget.
02. oldal, 20
Űrlapkijelzők a Tervező nézetben
A Dreamweaver vizuálisan megjeleníti az űrlap helyét a tervezési nézetben, így tudhatja, hová kell elhelyeznie űrlapelemeit. Ez azért fontos, mert a legördülő menücímkék nem érvényesek (és nem fognak működni) az űrlapelemen kívül. Amint látható a képen, az űrlap a piros pontozott vonal a tervezési nézetben.
03. oldal, 20
Válasszon listát / menüt
A legördülő menük a Dreamweaver "listája" vagy "menü" elemei. Tehát egy űrlap hozzáadásához be kell lépnie az Űrlap menübe a Beszúrás menüben, és válassza a "List / Menu" menüpontot. Győződjön meg róla, hogy a kurzor az űrlap mezőjének piros pontozott vonalán belül volt.
04. oldal, 20
Speciális beállítások ablak
A Dreamweaver beállítások ablakban a Hozzáférhetőség képernyő látható. Úgy döntöttem, hogy a Dreamweaver megmutatja nekem az akadálymentesítési attribútumokat. És ennek a képernyőnek az eredménye. Az űrlapok olyan helyek, ahol sok webhely leesik a hozzáférhetőségben, és az öt opció kitöltésével a legördülő menük azonnal hozzáférhetőbbek lesznek.
05. oldal, 20
Form Accessibility
A kisegítő lehetőségek:
Címke
Ez a mező neve. Ez megjelenik szövegként az űrlapelem mellett.
Írja le, hogy mit szeretne hívni a legördülő menüből. Ez lehet egy kérdés vagy rövid kifejezés, amelyet a legördülő menü válaszolni fog.
Stílus
A HTML egy címkecímkét tartalmaz, amely azonosítja az űrlapcímkéket a böngészőhöz. Az Ön döntései közé tartozik a legördülő menü és a címke szövege a címkével, hogy a címkecímke "for" attribútumának használatával azonosítsa, melyik formában tagolja a hivatkozásokat, vagy egyáltalán nem használja a címkecímkét.
Szeretném használni a for attribútumot, mivel akkor, ha valamilyen oknál fogva mozgatni szeretném a címkét, továbbra is csatolni kell a megfelelő űrlapmezőhöz.
Pozíció
A címkét a legördülő menü előtt vagy után helyezheti el.
Hozzáférési kulcs
Ez az a kulcs, amelyet az Alt vagy az Option billentyűkkel együtt használhatunk közvetlenül az űrlapmezőhöz. Így az űrlapokat nagyon egyszerűen használhatja egér használata nélkül. Hogyan állítsunk be egy hozzáférési kulcsot a HTML-ben?
Tab index
Ez az a sorrend, amelynél az űrlapmező elérhető, amikor a billentyűzetet a weblapon történő lapozáshoz használja. A Tabindex megértése
Ha módosította a hozzáférési lehetőségeket, kattintson az OK gombra.
06/20
Válassza a Menü lehetőséget
Ha a legördülő menüt a tervezési nézetben jeleníti meg, hozzá kell adnia a különböző elemeket. Először válassza ki a legördülő menüt, kattintson rá. A Dreamweaver egy másik pontozott vonalat helyez el a legördülő menüben, hogy megmutassa, hogy kiválasztottad.
07., 20
Menü tulajdonságai
A tulajdonságok menüje a legördülő menü lista / menü tulajdonságaira változik. Itt adhatja meg a menüben egy azonosítót (ahol azt mondja, hogy "választja"), eldöntheti, hogy egy lis vagy egy menüt szeretne-e megadni, stílusstílust adjon a stíluslapból, és értékeket rendel hozzá a legördülő menühöz.
Mi a különbség a lista és a menü között?
A Dreamweaver egy menük legördülő menüjét hívja le olyan legördülő menüből, amely csak egy választást engedélyez. A "lista" lehetővé teszi több választást a legördülő menüben, és több lehet egy elem.
Ha egy legördülő menüt kíván több vonalat elérni, akkor módosítsa a "list" típusra, és hagyja figyelmen kívül a "selections" jelölőnégyzetet.
08. oldal, 20
Új listaelemek hozzáadása
Ha új elemeket szeretne felvenni a menübe, kattintson a "Listaértékek ..." gombra. Ez megnyitja a fenti ablakot. Írja be az elemcímkéjét az első mezőbe. Ez fog megjelenni az oldalon. Ha az értéket üresen hagyja, akkor az is megjelenik a formában.
09. oldal, 20
Adjon hozzá többet és rendezze újra
További elemek hozzáadásához kattintson a plusz ikonra. Ha vissza szeretné rendelni őket a listában, használja a felfelé és lefelé mutató nyilakat a jobb oldalon.
10-20
Minden érték megadása
Amint azt a 8. lépésben említettem, ha az értéket üresen hagyja, akkor a címkét elküldi az űrlapnak. De megadhatja az összes elem értékeit -, hogy alternatív információkat küldjön az űrlapnak. Ezt sok mindent használsz olyan dolgokra, mint az ugrási menük.
11/20
Válasszon egy Alapértelmezett beállítást
A weblapok alapértelmezés szerint az alapértelmezett tételként szerepelnek a legördülő menüben. De ha másikat szeretne kiválasztani, akkor jelölje ki azt a Tulajdonságok menü "Kezdetben kiválasztott" mezőjében.
12/20
Tekintse meg listáját a Tervező nézetben
Miután befejezte a tulajdonságok szerkesztését, a Dreamweaver megjeleníti a legördülő listát az alapértelmezett értékkel.
13/20
Tekintse meg listáját a kódnézetben
Ha átvált a kódnézetre, akkor láthatjuk, hogy a Dreamweaver a legördülő menüvel nagyon tiszta kóddal bővül. Az egyetlen extra attribútum azok, amelyeket hozzáadási lehetőségekkel egészítettünk ki. A kód mindent megtett és nagyon könnyen olvasható és érthető. Még a kiválasztott = "kiválasztott" attribútumot is tartalmazza, mert elmondtam a Dreamweavernek, hogy alapértelmezés szerint XHTML-t írok.
14/20
Mentés és nézet a böngészőben
Ha elmentette a dokumentumot és megtekintette azt egy webböngészőben, akkor láthatja, hogy a legördülő menü ugyanúgy néz ki, mint amire számítana.
15/20
De nem csinál semmit
A fent létrehozott menü jól néz ki, de nem csinál semmit. Annak érdekében, hogy valamit megtegyünk, be kell állítanunk egy űrlapot az űrlapon, ami teljesen más bemutató.
Szerencsére a Dreamweavernek van egy beépített legördülő menüje, amelyet azonnal használhat a webhelyén, anélkül, hogy meg kellene tanulnia űrlapokról, CGI-kről vagy parancsfájlokról. Ezt Jump Menu néven hívják.
A Dreamweaver ugrás menü egy legördülő menüt hoz létre nevekkel és URL-kkel. Ezután kiválaszthat egy elemet a menüből, és a weboldal az adott helyre költözik, mint ha rákattintott egy linkre.
Menjen a Beszúrás menübe, és válassza az Űrlapot, majd a Ugrás menüt.
16/20
Ugrás menüablak
A szokásos legördülő menüvel ellentétben a Jump (Ugrás) menü új ablakot nyit meg a menüelemek megnevezéséhez, és részleteket ad hozzá az űrlap működésének módjához.
Az első tételhez módosítsa a "untitled1" szöveget ahhoz, amit el szeretne olvasni, és hozzá kell adnia egy URL-t, amelyre a hivatkozás megy.
17/20
Elemek hozzáadása az Ugrás menühöz
Kattintson a hozzáadni kívánt elemre egy új elem felvételéhez az ugrási menübe. Adjon hozzá annyi tételt, amennyit csak akar.
18/20
Ugrás menü beállítások
Miután hozzáadta az összes kívánt linket, válassza ki az opciókat:
URL - ek megnyitása
Ha van egy frameet, akkor megnyithatja a hivatkozásokat egy másik keretben. Vagy megváltoztathatja a Main Window opciót egy speciális célra, így az URL egy új ablakban vagy máshol megnyílik.
Menü neve
Adja meg menüjében az oldal egyedi azonosítóját. Erre azért van szükség, hogy a szkript megfelelően működjön. Ezenkívül lehetővé teszi, hogy többféle ugrási menüt is létrehozzunk - csak adjon nekik különböző neveket.
Helyezzen be Go gombot a menü után
Szeretném kiválasztani ezt, mert néha a szkript nem működik, amikor a menü megváltozik. Ez is elérhetőbb.
Válassza ki az első elemet az URL-módosítás után
Válassza ezt, ha az első menüpontként megjelenik a "Válasszon ki" parancsot. Ez biztosítja, hogy az elem továbbra is az oldal alapértelmezett maradjon.
19 közül 20
Ugrás a menü megjelenítéséhez
Az első menühöz hasonlóan a Dreamweaver beállítja az ugrás menüjét a tervezési nézetben az alapértelmezett elemgel. Ezután módosíthatja a legördülő menüt, mint bármely más.
Ha módosítja azt, győződjön meg arról, hogy az elemeken nem módosítja az azonosítókat, ellenkező esetben a szkript nem működik.
20/20
Ugrás a böngészőben
A fájl mentése és az F12 megnyomásával megjelenik az oldal a kívánt böngészőben. Ott kiválaszthat egy lehetőséget, kattints a "Go" -ra, és az ugrás menü működik!