See wikiHow õpetab teile, kuidas kasutada Adobe Dreamweaverit veebilehe rippmenüü loomiseks. Rippmenüüd on menüüd, mis "rippmenüüst" avanevad, kui teie veebisaidil oleval üksusel klõpsatakse, esitades rohkem võimalusi.
Sammud
Samm 1. Avage Dreamweaveri projekt
Selleks topeltklõpsake projekti faili. Kui soovite luua uue Dreamweaveri projekti, avate selle asemel Dreamweaveri, klõpsake nuppu Fail, klõpsake Uusja järgige ekraanil kuvatavaid juhiseid.
Samm 2. Looge tellitud loend
Rippmenüü loomiseks peab teil olema vähemalt üks punkt. Täpppunkti saate luua, lülitades CSS välja (klõpsake nuppu Vaade menüüelement, valige Stiili renderdamineja klõpsake nuppu Kuva stiilid kui see on märgitud), klõpsates asukohta, kuhu soovite punkti lisada, klõpsates akna allosas täppikoonil ja sisestades punkti nime. Seejärel peaksite enne jätkamist CSS -i uuesti sisse lülitama.
- Punkti nimi toimib siin teie rippmenüü aktiveerijana (nt nupp, mille kohal rippmenüü avamiseks hõljub või puudutab).
- Jätke see samm vahele, kui teil on juba loendielement, mille soovite rippmenüüks teisendada.
Samm 3. Määrake oma loendi nimi
Klõpsake Kood vahekaardil ja veenduge, et olete sellel Lähtekood seade, seejärel kerige alla oma tellitud loendi koodini (see jääb
"silt ja"
"silt" ja otsige sildi ülaosast ""
märgend. Tsitaatides olev sõna on teie loendi nimi.
-
Kui te nime ei näe, sisestage silt (kus nimi viitab loendi eelistatud nimele) otse selle kohale
silt.
Samm 4. Eemaldage kuulipunkt (id)
Veenduge, et olete õiges kohas, klõpsates nuppu Disain sakk ja seejärel klõpsake ikooni CSS disainer vahekaarti akna paremas ülanurgas, seejärel tehke järgmist.
- Klõpsake nuppu + pealkirjast "Valijad" paremal.
- Sisestage #name ul, kus "nimi" on teie loendi nimi.
- Vajutage ↵ sisestusklahvi kaks korda.
- Kerige alla ja klõpsake list-style-type allosas oleval paanil CSS disainer vahekaart.
- Klõpsake nuppu mitte ühtegi tulemuseks olevas hüpikmenüüs.
Samm 5. Muutke oma tellitud loendit horisontaalselt kuvamiseks
Selleks tehke järgmist.
- Klõpsake nuppu + pealkirjast "Valijad" paremal.
- Sisestage #name li, kus "nimi" on teie loendi nimi.
- Leidke lehe allservast paanilt pealkiri „ujuk” CSS disainer vahekaart.
- Klõpsake Vasakule nupp pealkirjast "ujuk" kohe paremal.
Samm 6. Lisage loendile aktiivne silt
Klõpsake + nuppu "Valijatest" paremal, seejärel sisestage #name a (kus "nimi" on teie loendi nimi) ja vajutage kaks korda ↵ sisestusklahvi.
Samm 7. Lisage taustavärv
Valige #nimi a vajadusel üksust, seejärel klõpsake lehe ülaosas kastikujulist vahekaarti „Taustavärv” CSS disainer paanil, valige taustavärv suvandit ja valige kasutatav taustavärv.
Seda värvi kasutavad teie ripploendi üksused
Samm 8. Muutke oma loendiüksused "ploki" vormingusse
See vorming tagab, et kui keegi klõpsab või puudutab loendis olevat üksust, saab ta selle avada, valides selle asemel veidi üle või alla, selle asemel, et teksti täpselt valida:
- Veenduge, et teie #nimi a üksus on valitud kaustast CSS disainer vahekaart.
- Kerige paanil pealkirja "Kuva" alla.
- Klõpsake pealkirja „kuva” paremas servas ja seejärel klõpsake blokeerida tulemuseks olevas menüüs.
Samm 9. Vajadusel lisage polster
Kui märkate, et teie loendiüksused on üksteise vastu kinni jäänud, saate nende vahele jätta ruumi, tehes järgmist.
- Veenduge, et teie #nimi a üksus on valitud kaustast CSS disainer vahekaart.
- Kerige paanil pealkirja "polster" alla.
- Muutke ülemist ja alumist tekstivälja "px", et lugeda vähemalt 5.
- Muutke vasakpoolset ja paremat "px" tekstivälja, et lugeda vähemalt 10.
Samm 10. Looge hõljuv värv
See on värv, mis ilmub, kui hõljutate kursorit rippmenüü üksuse kohal:
- Klõpsake nuppu + pealkirjast "Valijad" paremal.
- Sisestage #nave a: hover (kus "nimi" on teie loendi nimi) ja vajutage kaks korda ↵ sisestusklahvi.
- Klõpsake vahekaarti "Taustavärv".
- Valige taustavärv ja seejärel valige heledam värv kui taustavärvi jaoks.
Samm 11. Lülitage CSS välja
Klõpsake Vaade menüüelement, valige Stiili renderdamineja klõpsake nuppu Kuva stiilid valik hüpikaknas.
Kui Kuva stiilid valik on hall, klõpsake oma Dreamweaveri dokumendi suvalises kohas ja proovige uuesti.
Samm 12. Looge rippmenüü sisu
Seda saate teha, lisades punktide alla alampunktid, mida soovite kasutada rippmenüü nupuna:
- Klõpsake loendiüksusest paremal, mille soovite rippmenüüks muuta, ja vajutage ↵ Enter.
- Vajutage tabulaatorit ↹.
- Sisestage oma esimese rippmenüü nime nimi ja vajutage ↵ Enter.
- Sisestage järgmise rippmenüü nimi, seejärel vajutage ↵ Enter ja korrake vajadusel.
Samm 13. Siduge rippmenüü sisu täppidega
Selleks tehke järgmist.
- Klõpsake nuppu + tippige valiku "Valijad" kõrval, seejärel sisestage #name ul ul ja vajutage kaks korda ↵ sisestusklahvi.
- Kerige alla ja klõpsake kuvada, seejärel klõpsake mitte ühtegi hüpikmenüüs.
- Leidke ja klõpsake positsiooni, seejärel klõpsake absoluutne hüpikmenüüs.
Samm 14. Looge rippmenüü ise
Selleks peate lisama veel ühe valija:
- Klõpsake nuppu + sisestage valiku „Valijad” kõrval olev käsk #name ul li: hover> ul ja vajutage kaks korda ↵ sisestusklahvi.
- Leidke ja klõpsake kuvada, seejärel klõpsake blokeerida tulemuseks olevas hüpikmenüüs.
Samm 15. Muutke rippmenüü sisu vertikaalselt kuvatavaks
Vaikimisi kuvatakse rippmenüü sisu horisontaalsel ribal, kuid saate need sundida vertikaalsesse veergu, tehes järgmist.
- Klõpsake nuppu + tippige valiku "Valijad" kõrval, seejärel sisestage #name ul ul li ja vajutage kaks korda ↵ sisestusklahvi.
- Leidke pealkiri "ujuk".
- Klõpsake nuppu "pole" () valik pealkirjast "ujuk" paremal.
Samm 16. Salvestage oma projekt
Selleks vajutage klahvikombinatsiooni Ctrl+S (Windows) või ⌘ Command+S (Mac).
