Amit tudni kell
- Ugrás: Beszúrás > Űrlap > Űrlap. Kattintson a szaggatott piros vonalra az űrlapon, és lépjen a Beszúrás > Űrlap > Lista/Menü. Válassza ki a kisegítő lehetőségeket.
- Kattintson a menüre, és válassza ki a tulajdonságait, majd válassza a List Values lehetőséget új menüpontok hozzáadásához. További elemek hozzáadásához kattintson a pluszjelre.
- Adjon hozzá elemértékeket, és válasszon egy alapértelmezett elemet. Műveletek hozzáadásához válassza a Beszúrás > Űrlap > Ugrás menü. Adjon hozzá elemeket az Ugrás menühöz, és mentse.
A Dreamweaver segítségével egyszerűen hozhat létre legördülő menüket webhelye számára. De mint minden HTML-űrlap, ezek is kissé trükkösek lehetnek. Ez az oktatóanyag végigvezeti a legördülő menü létrehozásának lépésein a Dreamweaverben.
Dreamweaver Jump Menus
A Dreamweaver 8 egy varázslót is biztosít a webhelyen való navigációhoz ugró menü létrehozásához. Az alapvető legördülő menükkel ellentétben ez a menü csinál valamit, ha végzett. Nem kell JavaScriptet vagy CGI-t írnia ahhoz, hogy a legördülő űrlap működjön. Ez az oktatóanyag azt is elmagyarázza, hogyan használhatja a Dreamweaver 8 varázslót ugrómenü létrehozásához.
Először is hozza létre az űrlapot
A speciális varázslók, például az ugrás menü kivételével, a Dreamweaver nem segít a HTML-űrlapok „működtetésében”. Ehhez CGI vagy JavaScript szükséges.
Amikor legördülő menüt ad hozzá webhelyéhez, először egy űrlapra van szüksége, amely körülveszi azt. A Dreamweaverben lépjen a Beszúrás menübe, kattintson az Űrlap elemre, majd válassza az "Űrlap" lehetőséget.
Űrlapmegjelenítések Tervező nézetben
A Dreamweaver vizuálisan megjeleníti az űrlap helyét a tervezési nézetben, így tudni fogja, hova kell elhelyezni az űrlapelemeket, mert a legördülő menü címkéi nem érvényesek (és nem működnek) az űrlapelemen kívül. Ahogy a képen is látható, az űrlap a piros pontozott vonal a tervezési nézetben.
Lista/menü kiválasztása
A Dreamweaverben a legördülő menük „lista” vagy „menü” elemek. Tehát egy űrlap hozzáadásához lépjen be a Beszúrás menü Űrlap menüjébe, és válassza a "Lista/Menü" lehetőséget. Győződjön meg arról, hogy a kurzor az űrlapmező piros pontozott vonalán belül volt.
Speciális beállítások ablak
A Dreamweaver beállításainál van egy képernyő a Kisegítő lehetőségekről. A legördülő menük azonnal elérhetőbbek lesznek, mint más webhelyek, ha kitölti ezt az öt lehetőséget.
Űrlapok hozzáférhetősége
A kisegítő lehetőségek a következők:
Címke
A címkemező szövegként jelenik meg az űrlapelem mellett. Írja be a legördülő menü nevét. Ez lehet egy kérdés vagy rövid kifejezés, amelyre a legördülő menü válaszol.
Stílus
A HTML tartalmaz egy címkecímkét, amely azonosítja az űrlapcímkéket a webböngésző számára. Választhat, hogy a legördülő menüt és a címkeszöveget becsomagolja a címkével, a "for" attribútumot használja a címkecímkén annak azonosítására, hogy melyik űrlapcímkére hivatkozik, vagy egyáltalán nem használja a címkecímkét.
Pozíció
A címkét elhelyezheti a legördülő menü előtt vagy után.
Hozzáférési kulcs
A látogatók egy hozzáférési kulcsot használhatnak a „Image” vagy az Option gombokkal, hogy közvetlenül az űrlapmezőhöz juthassanak. Ezzel a billentyűkombinációval nagyon egyszerűen használhatók az űrlapok egér nélkül. alt="
Tab index
A tabulátorindex azt mutatja meg, hogy a felhasználók hogyan érhetik el az űrlapmezőket, amikor a billentyűzetet használják a lapozáshoz.
Ha frissítette a kisegítő lehetőségeket, kattintson az OK gombra.
Válassza ki a menüt
Miután a legördülő menü megjelenik a Dreamweaver tervezési nézetben, hozzá kell adnia a különböző elemeket. Először kattintson rá a legördülő menüre. A Dreamweaver egy újabb pontozott vonalat helyez a legördülő menü köré, hogy jelezze, hogy ezt választotta.
Menü tulajdonságai
A tulajdonságok menü az adott legördülő menü lista/menü tulajdonságaira változik. Ott megadhat egy azonosítót a menüjének (ahol a "select" felirat szerepel), eldöntheti, hogy lista vagy menü legyen, stílusosztályt adhat neki a stíluslapról, és értékeket rendelhet a legördülő menühöz.
Mi a különbség a lista és a menü között?
A Dreamweaver menü legördülő menüjének nevez minden olyan legördülő listát, amely csak egy választást tesz lehetővé. A „lista” több választási lehetőséget tesz lehetővé a legördülő menüben, és több elem magas is lehet.
Ha azt szeretné, hogy egy legördülő menü több sor magas legyen, módosítsa "lista" típusúra, és hagyja bejelöletlenül a "kijelölések" négyzetet.
Új listaelemek hozzáadása
Új elemek hozzáadásához kattintson az "Értékek listázása…" gombra, amely megnyitja a fenti ablakot. Ezután írja be a cikk címkéjét az első mezőbe. Megjelenik az oldalon.
Továbbiak hozzáadása és átrendezése
Kattintson a plusz ikonra további elemek hozzáadásához. Ha újra szeretné rendezni őket a listamezőben, használja a jobb oldalon található fel és le nyilakat.
Adjon meg minden elem értéket
Ha üresen hagyja az értéket, a címke az űrlapra kerül. De megadhatja az összes tétel értékét – hogy alternatív információkat küldjön az űrlapra. Sokszor fogja ezt használni olyan dolgokra, mint például az ugrómenük és a hiperhivatkozások.
Válasszon egy alapértelmezettet
A weboldalak alapértelmezés szerint azt a legördülő menüt jelenítik meg, amelyik elsőként szerepel alapértelmezett elemként. De ha másikat szeretne kiválasztani, jelölje ki a Tulajdonságok menü "Kezdetben kiválasztott" mezőjében.
Lista megtekintése a Tervező nézetben
Miután végzett a tulajdonságok szerkesztésével, a Dreamweaver megjeleníti a legördülő listát a kiválasztott alapértelmezett értékkel.
Lista megtekintése a kódnézetben
Ha kódnézetre vált, láthatja, hogy a Dreamweaver tiszta kóddal egészíti ki a legördülő menüt. Az egyetlen extra attribútum a kisegítő lehetőségek. A kód behúzott, és nagyon könnyen olvasható és érthető.
Mentés és megtekintés a böngészőben
Ha elmenti a dokumentumot, és megtekinti egy webböngészőben, láthatja, hogy a legördülő menü úgy néz ki, ahogyan azt elvárná.
De nem csinál semmit…
A fent létrehozott menü jól néz ki, de nem csinál semmit. Ahhoz, hogy végrehajtson valamit, be kell állítania egy űrlapműveletet magán az űrlapon.
Szerencsére a Dreamweaver rendelkezik egy beépített legördülő menüvel, amelyet azonnal használhat a webhelyén anélkül, hogy tanulnia kellene az űrlapokról, a CGI-kről vagy a szkriptekről. Ugrás menünek hívják.
A Dreamweaver Jump Menu egy legördülő menüt hoz létre nevekkel és URL-címekkel. Ezután kiválaszthat egy elemet a menüben, és a weboldal arra a helyre kerül, mintha egy hivatkozásra kattintott volna.
Lépjen a Beszúrás menübe, és válassza az Űrlap lehetőséget, majd az Ugrás menüt.
Ugrás menüablak
A szokásos legördülő menüvel ellentétben az Ugrás menü új ablakot nyit meg, ahol elnevezheti a menüelemeket, és részleteket adhat meg az űrlap működéséről.
Az első elemnél módosítsa az "un titled1" szöveget arra, amit olvasni szeretne, és adjon hozzá egy URL-t.
Tételek hozzáadása az Ugrás menühöz
Kattintson az elem hozzáadása elemre, ha új elemet szeretne hozzáadni az ugrás menühöz. Adjon hozzá annyi elemet, amennyit csak szeretne.
Ugrás menüopciók
Miután hozzáadta az összes kívánt linket, válassza ki a lehetőségeket:
URL-ek megnyitása itt:
Ha rendelkezik keretkészlettel, megnyithatja a hivatkozásokat egy másik keretben. Vagy módosíthatja a Főablak beállítását egy speciális célpontra, hogy az URL új ablakban vagy máshol nyíljon meg.
Menü neve
Adjon menüjének egyedi azonosítót az oldalhoz. Ez szükséges a szkript megfelelő működéséhez. Azt is lehetővé teszi, hogy több ugrómenüt egy formában – adjon nekik különböző nevet.
Beszúrja a Go gombot a menü után
Szeretem ezt kiválasztani, mert néha a szkript nem működik, amikor a menü változik. Ez is könnyebben elérhető.
Válassza ki az első elemet az URL-módosítás után
Válassza ki ezt, ha az első menüelemként a „Válasszon egyet” üzenetet kap. Ez biztosítja, hogy az elem alapértelmezett maradjon az oldalon.
Ugrás menü tervezési nézet
Az első menühöz hasonlóan a Dreamweaver is beállítja az ugrómenüt a tervezési nézetben, és az alapértelmezett elem látható. Ezután ugyanúgy szerkesztheti a legördülő menüt, mint bármely mást.
Ha szerkeszti, ügyeljen arra, hogy ne változtassa meg az elemek azonosítóit; ellenkező esetben előfordulhat, hogy a szkript nem működik.
Ugrás menü a böngészőben
A fájl mentése és az F12 billentyű lenyomása után az oldal a kívánt böngészőben jelenik meg. Itt kiválaszthat egy lehetőséget, kattintson a "Go" gombra, és az ugrás menü működik.
