Ez a wikiHow megtanítja, hogyan kell az Adobe Dreamweaver használatával létrehozni egy weboldal legördülő listáját. A legördülő mezők olyan menük, amelyek "lebuknak", amikor rákattintanak a weboldal valamely elemére, és további lehetőségeket kínálnak a folyamat során.
Lépések
1. lépés: Nyisson meg egy Dreamweaver projektet
Ehhez kattintson duplán a projekt fájljára. Ha új Dreamweaver projektet szeretne létrehozni, akkor nyissa meg a Dreamweaver programot, kattintson Fájl, kattintson Új, és kövesse a képernyőn megjelenő utasításokat.
2. lépés Rendezett lista létrehozása
A legördülő menü létrehozásához legalább egy pontot kell tartalmaznia. A CSS kikapcsolásával létrehozhat egy pontot (kattintson a Kilátás menüpontot, válassza ki Stílus renderelés, majd kattintson Megjelenítési stílusok ha be van jelölve), kattintson arra a helyre, ahová hozzá szeretné adni a pontot, kattintson az ablak alján található golyópont ikonra, és írja be a pont nevét. A folytatás előtt kapcsolja vissza a CSS -t.
- A pont neve itt lesz a legördülő menü aktiválója (pl. Az a gomb, amely fölé lebeg vagy koppint a legördülő menü megnyitásához).
- Ha már van egy listaelem, amelyet legördülő menüvé szeretne konvertálni, hagyja ki ezt a lépést.
3. lépés. Határozza meg a lista nevét
Kattints a Kód fülre, és győződjön meg arról, hogy a Forráskód beállítást, majd görgessen lefelé a megrendelt lista kódjához (ez egy"
"címke és egy"
"címke", és keresse meg a "" címkét a tetején"
címke. Az idézőjelben szereplő szó a lista neve.
-
Ha nem lát nevet, helyezze be a címkét (ahol a név a lista preferált nevére utal) közvetlenül a címke fölé
címke.
4. lépés Távolítsa el a golyópontot
A gombra kattintva győződjön meg arról, hogy a megfelelő helyen van Tervezés fülre, majd a gombra kattintva CSS tervező fülre az ablak jobb felső sarkában, majd tegye a következőket:
- Kattintson + a "Kiválasztók" fejléc jobb oldalán.
- Írja be #name ul, ahol a "name" a lista neve.
- Nyomja meg kétszer az ↵ Enter billentyűt.
- Görgessen le, és kattintson list-style-type alján található ablaktáblán CSS tervező fülre.
- Kattintson egyik sem a megjelenő előugró menüben.
5. lépés: Változtassa meg a rendezett listát, hogy vízszintesen jelenjen meg
Ehhez:
- Kattintson + a "Kiválasztók" fejléc jobb oldalán.
- Írja be a #name li nevet, ahol a "name" a lista neve.
- Keresse meg a "lebegés" fejlécet az ablak alján CSS tervező fülre.
- Kattints a Bal gombot azonnal az "úszó" fejléc jobb oldalán.
6. lépés. Adjon hozzá egy aktív címkét a listához
Kattints a + gombot a "Választók" jobb oldalán, majd írja be a #name a nevet (ahol a "név" a lista neve), majd nyomja meg kétszer az ↵ Enter billentyűt.
Lépés 7. Adjon hozzá egy háttérszínt
Válaszd ki a #név a elemet, ha szükséges, majd kattintson a doboz tetején található "Háttérszín" fülre CSS tervező panelen válassza ki a háttérszín lehetőséget, és válassza ki a használni kívánt háttérszínt.
Ezt a színt fogja használni a legördülő lista elemei
8. lépés. Használja a listaelemeket a "blokk" formátumban
Ez a formátum biztosítja, hogy amikor valaki rákattint vagy megérint egy elemet a listában, megnyithatja azt úgy, hogy kissé felette vagy alatt választ, ahelyett, hogy pontosan kijelölné a szöveget:
- Győződjön meg róla #név a elem van kiválasztva a CSS tervező fülre.
- Görgessen le az ablaktáblán a "kijelző" címsorhoz.
- Kattintson a "kijelző" fejléc jobb szélére, majd kattintson Blokk a megjelenő menüben.
9. lépés. Szükség esetén adjon hozzá párnázást
Ha azt észleli, hogy a listaelemek egymáshoz elakadtak, akkor tegyen egy kis helyet közéjük az alábbiak szerint:
- Győződjön meg róla #név a elem van kiválasztva a CSS tervező fülre.
- Görgessen le az ablaktábla "kitöltése" fejlécéhez.
- Módosítsa a felső és alsó "px" szövegmezőket, hogy legalább 5 legyen.
- Módosítsa a bal és jobb "px" szövegmezőket, hogy legalább 10 legyen.
10. lépés. Hozzon létre egy lebegő színt
Ez a szín jelenik meg, amikor az egérmutatót a legördülő menü eleme fölé viszi:
- Kattintson + a "Kiválasztók" fejléc jobb oldalán.
- Írja be a #nave a: hover parancsot (ahol a "név" a lista neve), és nyomja meg kétszer az ↵ Enter billentyűt.
- Kattintson a "Háttérszín" fülre.
- Válassza a lehetőséget háttérszín majd válasszon világosabb színt, mint amit a háttérszínhez használt.
11. lépés. Kapcsolja ki a CSS -t
Kattints a Kilátás menüpontot, válassza ki Stílus renderelés, és kattintson a gombra Megjelenítési stílusok opciót a felugró ablakban.
Ha a Megjelenítési stílusok opció szürkén jelenik meg, kattintson bárhová a Dreamweaver dokumentumban, és próbálja újra.
12. lépés: Hozza létre a legördülő menü tartalmát
Ezt úgy teheti meg, hogy a felsoroláspont alá olyan alpontokat ad hozzá, amelyeket legördülő menü gombjaként szeretne használni:
- Kattintson a legördülő menüvé alakítani kívánt listaelem jobb oldalán, majd nyomja meg az ↵ Enter billentyűt.
- Nyomja meg a Tab ↹ gombot.
- Írja be az első legördülő menüpont nevét, majd nyomja meg az. Enter billentyűt.
- Írja be a következő legördülő menü nevét, majd nyomja meg az ↵ Enter billentyűt, és szükség szerint ismételje meg.
13. lépés. Kösse a legördülő menü tartalmát egy felsoroláshoz
Ehhez:
- Kattintson + a „Választók” mellett, majd írja be a #name ul ul parancsot, és nyomja meg kétszer az ↵ Enter billentyűt.
- Görgessen le, és kattintson kijelző, majd kattintson egyik sem az előugró menüben.
- Keresse meg és kattintson pozíció, majd kattintson abszolút az előugró menüben.
14. lépés. Hozza létre magát a legördülő menüt
Ehhez még egy választót kell hozzáadnia:
- Kattintson + a "Választók" mellett, majd írja be a #name ul li: hover> ul parancsot, és nyomja meg kétszer az ↵ Enter billentyűt.
- Keresse meg és kattintson kijelző, majd kattintson Blokk a megjelenő előugró menüben.
15. lépés: A legördülő menü tartalmát függőlegesen jelenítse meg
Alapértelmezés szerint a legördülő menü tartalma vízszintes sávban jelenik meg, de függőleges oszlopba kényszerítheti őket a következők szerint:
- Kattintson + a "Választók" mellett, majd írja be a #name ul ul li parancsot, és nyomja meg kétszer az ↵ Enter billentyűt.
- Keresse meg az "úszó" címet.
- Kattintson a "nincs" gombra () lehetőség az "úszó" fejléc jobb oldalán.
16. lépés. Mentse el a projektet
Ehhez nyomja meg a Ctrl+S (Windows) vagy a ⌘ Command+S (Mac) billentyűkombinációt.
