Kaip pridėti išskleidžiamąją dėžutę „Dreamweaver“(su nuotraukomis)

Turinys:

Kaip pridėti išskleidžiamąją dėžutę „Dreamweaver“(su nuotraukomis)
Kaip pridėti išskleidžiamąją dėžutę „Dreamweaver“(su nuotraukomis)

Video: Kaip pridėti išskleidžiamąją dėžutę „Dreamweaver“(su nuotraukomis)

Video: Kaip pridėti išskleidžiamąją dėžutę „Dreamweaver“(su nuotraukomis)
Video: Top 10 Best FREE SOFTWARE For Your Computer (2023) 2024, Balandis
Anonim

Š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

Pridėkite išskleidžiamąją dėžutę „Dreamweaver“1 veiksme
Pridėkite išskleidžiamąją dėžutę „Dreamweaver“1 veiksme

Ž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.

2 veiksme pridėkite išskleidžiamąją dėžutę „Dreamweaver“
2 veiksme pridėkite išskleidžiamąją dėžutę „Dreamweaver“

Ž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.
„Dreamweaver“3 veiksme pridėkite išskleidžiamąją dėžutę
„Dreamweaver“3 veiksme pridėkite išskleidžiamąją dėžutę

Ž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.

  • „Dreamweaver“4 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“4 veiksme pridėkite išskleidžiamąją dėžutę

    Ž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:

    • 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.
    „Dreamweaver“5 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“5 veiksme pridėkite išskleidžiamąją dėžutę

    5 veiksmas. Pakeiskite užsakytą sąrašą, kad jis būtų rodomas horizontaliai

    Norėdami tai padaryti:

    • 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.
    „Dreamweaver“6 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“6 veiksme pridėkite išskleidžiamąją dėžutę

    Ž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.

    „Dreamweaver“7 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“7 veiksme pridėkite išskleidžiamąją dėžutę

    Ž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

    „Dreamweaver“8 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“8 veiksme pridėkite išskleidžiamąją dėžutę

    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ą:

    • Į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.
    „Dreamweaver“9 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“9 veiksme pridėkite išskleidžiamąją dėžutę

    Ž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:

    • Į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.
    „Dreamweaver“10 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“10 veiksme pridėkite išskleidžiamąją dėžutę

    Žingsnis 10. Sukurkite užvedimo spalvą

    Tai spalva, kuri pasirodys, kai užveskite pelės žymeklį ant išskleidžiamojo meniu elemento:

    • 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.
    „Dreamweaver“11 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“11 veiksme pridėkite išskleidžiamąją dėžutę

    Ž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ą.

    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“12 veiksme
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“12 veiksme

    Ž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ą:

    • 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.
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“13 veiksme
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“13 veiksme

    Žingsnis 13. Išskleidžiamojo meniu turinį susiekite su ženklu

    Norėdami tai padaryti:

    • 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.
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“14 veiksme
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“14 veiksme

    Žingsnis 14. Sukurkite patį išskleidžiamąjį meniu

    Norėdami tai padaryti, turėsite pridėti dar vieną parinkiklį:

    • 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.
    „Dreamweaver“15 veiksme pridėkite išskleidžiamąją dėžutę
    „Dreamweaver“15 veiksme pridėkite išskleidžiamąją dėžutę

    Ž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:

    • 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.
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“16 veiksme
    Pridėkite išskleidžiamąją dėžutę „Dreamweaver“16 veiksme

    Žingsnis 16. Išsaugokite savo projektą

    Norėdami tai padaryti, paspauskite „Ctrl“+S („Windows“) arba ⌘ „Command“+S („Mac“).

    Jei šiam projektui sukūrėte naują „Dreamweaver“failą, turėsite įvesti pavadinimą, pasirinkti išsaugojimo vietą ir spustelėti Sutaupyti kad išsaugotumėte savo failą.

Rekomenduojamas: