Šis „wikiHow“moko jus, kaip naudoti „Adobe Dreamweaver“norint sukurti tinklalapio išskleidžiamąjį langelį. Išskleidžiamieji langeliai yra meniu, kuris „išskleidžiamas“, kai spustelėjamas jūsų tinklalapio elementas, ir pateikia daugiau galimybių.
Žingsniai
Žingsnis 1. Atidarykite „Dreamweaver“projektą
Norėdami tai padaryti, dukart spustelėkite projekto failą. Jei norite sukurti naują „Dreamweaver“projektą, atidarykite „Dreamweaver“, spustelėkite Failas, spustelėkite Naujasir vykdykite ekrane pateikiamus nurodymus.
Žingsnis 2. Sukurkite užsakytą sąrašą
Norėdami sukurti išskleidžiamąjį meniu, turite turėti bent vieną ženklelio tašką. Galite sukurti ženklelį išjungę CSS (spustelėkite Peržiūrėti meniu elementą, pasirinkite Stiliaus atvaizdavimas, ir spustelėkite Rodymo stiliai jei jis pažymėtas), spustelėkite vietą, kur norite pridėti tašką, spustelėkite ženklelio piktogramą lango apačioje ir įveskite taško pavadinimą. Prieš tęsdami turėtumėte vėl įjungti CSS.
- Taško pavadinimas čia bus jūsų išskleidžiamojo meniu aktyvatorius (pvz., Mygtukas, ant kurio užvedamas pelės žymeklis arba jis paliečiamas, kad atidarytumėte išskleidžiamąjį meniu).
- Praleiskite šį veiksmą, jei jau turite sąrašo elementą, kurį norite konvertuoti į išskleidžiamąjį meniu.
Žingsnis 3. Nustatykite savo sąrašo pavadinimą
Spustelėkite Kodas skirtuką ir įsitikinkite, kad esate Pirminis kodas nustatymą, tada slinkite žemyn iki užsakyto sąrašo kodo (jis bus tarp
"žyma ir"
"žyma" ir ieškokite "" žymos virš viršaus"
„Žyma kabutėse yra jūsų sąrašo pavadinimas.
-
Jei nematote pavadinimo, įterpkite žymą (kur pavadinimas nurodo pageidaujamą sąrašo pavadinimą) tiesiai virš
žyma.
- Spustelėkite + antraštės „Rinktuvai“dešinėje.
- Įveskite #name ul, kur „name“yra jūsų sąrašo pavadinimas.
- Du kartus paspauskite ↵ Enter.
- Slinkite žemyn ir spustelėkite sąrašo stiliaus tipas apačioje esančioje srityje CSS dizaineris skirtuką.
- Spustelėkite nė vienas atsiradusiame iššokančiajame meniu.
- Spustelėkite + antraštės „Rinktuvai“dešinėje.
- Įveskite #name li, kur „name“yra jūsų sąrašo pavadinimas.
- Raskite „plūdės“antraštę skydelyje apačioje CSS dizaineris skirtuką.
- Spustelėkite Kairė mygtuką iš karto dešinėje nuo „plūdės“antraštės.
- Įsitikinkite, kad jūsų #pavadinimas a elementas yra pasirinktas CSS dizaineris skirtuką.
- Slinkite žemyn iki skilties „Rodyti“antraštės.
- Spustelėkite antraštės „ekranas“dešinįjį kraštą, tada spustelėkite blokuoti gautame meniu.
- Įsitikinkite, kad jūsų #pavadinimas a elementas yra pasirinktas CSS dizaineris skirtuką.
- Slinkite žemyn iki skyrelio „užpildymas“.
- Pakeiskite viršutinį ir apatinį „px“teksto laukus, kad jie būtų bent 5.
- Pakeiskite kairįjį ir dešinįjį „px“teksto laukus, kad jie būtų bent 10.
- Spustelėkite + antraštės „Rinktuvai“dešinėje.
- Įveskite #nave a: hover (kur „vardas“yra jūsų sąrašo pavadinimas) ir du kartus paspauskite ↵ Enter.
- Spustelėkite skirtuką „Fono spalva“.
- Pasirinkite fono spalva tada pasirinkite šviesesnę spalvą nei naudojote fono spalvai.
- Spustelėkite sąrašo elemento, kurį norite paversti išskleidžiamuoju meniu, dešinėje, tada paspauskite ↵ Enter.
- Paspauskite Tab ↹.
- Įveskite pirmojo išskleidžiamojo meniu elemento pavadinimą, tada paspauskite. Enter.
- Įveskite kito išskleidžiamojo meniu pavadinimą, tada paspauskite ↵ Enter ir, jei reikia, pakartokite.
- Spustelėkite + šalia „Pasirinktys“, tada įveskite #name ul ul ir du kartus paspauskite ↵ Enter.
- Slinkite žemyn ir spustelėkite ekranas, tada spustelėkite nė vienas iššokančiame meniu.
- Raskite ir spustelėkite poziciją, tada spustelėkite absoliutus iššokančiame meniu.
- Spustelėkite + šalia „Pasirinktys“, tada įveskite #name ul li: hover> ul ir du kartus paspauskite ↵ Enter.
- Raskite ir spustelėkite ekranas, tada spustelėkite blokuoti atsiradusiame iššokančiajame meniu.
- Spustelėkite + šalia „Pasirinktys“, tada įveskite #name ul ul li ir paspauskite ↵ Enter du kartus.
- Raskite antraštę „plūdė“.
- Spustelėkite „nėra“() parinktis dešinėje nuo „plūdės“antraštės.
Žingsnis 4. Nuimkite kulkos tašką (-us)
Įsitikinkite, kad esate tinkamoje vietoje spustelėdami Dizainas skirtuką, tada spustelėkite CSS dizaineris skirtuką viršutiniame dešiniajame lango kampe, tada atlikite šiuos veiksmus:
5 veiksmas. Pakeiskite užsakytą sąrašą, kad jis būtų rodomas horizontaliai
Norėdami tai padaryti:
Žingsnis 6. Pridėkite aktyvią savo sąrašo žymą
Spustelėkite + mygtuką dešinėje nuo „Pasirinkimo“, tada įveskite #name a (kur „name“yra jūsų sąrašo pavadinimas) ir du kartus paspauskite ↵ Enter.
Žingsnis 7. Pridėkite fono spalvą
Pasirinkite #pavadinimas a elementą, jei reikia, tada spustelėkite langelio formos skirtuką „Fono spalva“viršuje CSS dizaineris srityje, pasirinkite fono spalva parinktį ir pasirinkite naudojamą fono spalvą.
Ši spalva bus naudojama jūsų išskleidžiamojo sąrašo elementams
8. Padarykite savo sąrašo elementus „bloko“formatu
Šis formatas užtikrina, kad kai kas nors spustelės ar bakstelės elementą sąraše, jis galės jį atidaryti pasirinkdamas šiek tiek virš arba po juo, o ne tiksliai pasirinkti tekstą:
Žingsnis 9. Jei reikia, pridėkite paminkštinimą
Jei pastebite, kad jūsų sąrašo elementai yra įstrigę vienas prieš kitą, galite tarp jų palikti tam tikrą vietą atlikdami šiuos veiksmus:
Žingsnis 10. Sukurkite užvedimo spalvą
Tai spalva, kuri pasirodys, kai užveskite pelės žymeklį ant išskleidžiamojo meniu elemento:
Žingsnis 11. Išjunkite CSS
Spustelėkite Peržiūrėti meniu elementą, pasirinkite Stiliaus atvaizdavimas, ir spustelėkite Rodymo stiliai parinktį išskleidžiamajame lange.
Jei Rodymo stiliai parinktis yra pilka, spustelėkite bet kurią „Dreamweaver“dokumento vietą ir bandykite dar kartą.
Žingsnis 12. Sukurkite išskleidžiamojo meniu turinį
Tai galite padaryti pridėdami po taškus po ženklelio, kurį norite naudoti kaip išskleidžiamojo meniu mygtuką:
Žingsnis 13. Išskleidžiamojo meniu turinį susiekite su ženklu
Norėdami tai padaryti:
Žingsnis 14. Sukurkite patį išskleidžiamąjį meniu
Norėdami tai padaryti, turėsite pridėti dar vieną parinkiklį:
Žingsnis 15. Padarykite, kad išskleidžiamojo meniu turinys būtų rodomas vertikaliai
Pagal numatytuosius nustatymus išskleidžiamojo meniu turinys bus rodomas horizontalioje juostoje, tačiau galite priversti juos į vertikalų stulpelį atlikdami šiuos veiksmus:
Žingsnis 16. Išsaugokite savo projektą
Norėdami tai padaryti, paspauskite „Ctrl“+S („Windows“) arba ⌘ „Command“+S („Mac“).