Acest wikiHow vă învață cum să utilizați Adobe Dreamweaver pentru a crea o casetă derulantă pentru o pagină web. Casetele derulante sunt meniuri care „derulează” când se face clic pe un element de pe pagina dvs. web, prezentând mai multe opțiuni în acest proces.
Pași
Pasul 1. Deschideți un proiect Dreamweaver
Faceți dublu clic pe fișierul proiectului pentru a face acest lucru. Dacă doriți să creați un nou proiect Dreamweaver, veți deschide în schimb Dreamweaver, faceți clic pe Fişier, faceți clic pe Nou și urmați instrucțiunile de pe ecran.
Pasul 2. Creați o listă ordonată
Pentru a crea un meniu derulant, trebuie să aveți cel puțin un element punct. Puteți crea un glonț dezactivând CSS (faceți clic pe Vedere element de meniu, selectați Redarea stilului și faceți clic pe Stiluri de afișare dacă este bifat), făcând clic pe locația în care doriți să adăugați punctul, făcând clic pe pictograma punctului glonț din partea de jos a ferestrei și tastând numele punctului. Apoi ar trebui să porniți din nou CSS înainte de a continua.
- Numele punctului de aici va servi ca activator al meniului derulant (de exemplu, butonul peste care se deplasează sau atinge pentru a deschide meniul derulant).
- Omiteți acest pas dacă aveți deja un element de listă pe care doriți să îl convertiți într-un meniu derulant.
Pasul 3. Determinați numele listei dvs
Apasă pe Cod filă și asigurați-vă că sunteți pe Cod sursa, apoi derulați în jos până la codul listei comandate (va fi între un „
„etichetă și un”
„etichetă) și căutați eticheta„ „deasupra vârfului”
„tag. Cuvântul din ghilimele este numele listei dvs.
-
Dacă nu vedeți un nume, introduceți eticheta (unde numele se referă la numele preferat al listei) direct deasupra
etichetă.
Pasul 4. Eliminați punctele glonț (e)
Asigurați-vă că sunteți în locul potrivit dând clic pe Proiecta fila și apoi făcând clic pe CSS Designer fila din colțul din dreapta sus al ferestrei, apoi efectuați următoarele:
- Clic + în dreapta rubricii „Selectoare”.
- Tastați #nume ul unde „nume” este numele listei dvs.
- Apăsați ↵ Enter de două ori.
- Derulați în jos și faceți clic list-style-type în panoul din partea de jos a CSS Designer filă.
- Clic nici unul în meniul pop-up rezultat.
Pasul 5. Schimbați lista ordonată pentru a se afișa orizontal
Pentru a face acest lucru:
- Clic + în dreapta rubricii „Selectoare”.
- Tastați #name li unde „nume” este numele listei dvs.
- Găsiți titlul „plutitor” în panoul din partea de jos a CSS Designer filă.
- Apasă pe Stânga butonul imediat în dreapta antetului „plutitor”.
Pasul 6. Adăugați o etichetă activă pentru lista dvs
Apasă pe + butonul din dreapta „Selectorilor”, apoi tastați #nume a (unde „nume” este numele listei dvs.) și apăsați ↵ Enter de două ori.
Pasul 7. Adăugați o culoare de fundal
Selectează #nume a element, dacă este necesar, apoi faceți clic pe fila „Culoare fundal” în formă de casetă din partea de sus a CSS Designer, selectați culoare de fundal și selectați o culoare de fundal pe care să o utilizați.
Aceasta este culoarea pe care o vor folosi elementele listei dvs. drop-down
Pasul 8. Faceți ca elementele listei dvs. să utilizeze formatul „bloc”
Acest format asigură faptul că, atunci când cineva merge să facă clic sau să atingă un element din listă, îl poate deschide selectând ușor deasupra sau dedesubtul său, în loc să fie nevoit să selecteze cu precizie textul:
- Asigurați-vă că #nume a elementul este selectat în CSS Designer filă.
- Derulați în jos până la titlul „afișare” din panou.
- Faceți clic pe partea dreaptă a antetului „afișare”, apoi faceți clic pe bloc în meniul rezultat.
Pasul 9. Adăugați umplutura, dacă este necesar
Dacă observați că articolele din listă sunt blocate unul împotriva celuilalt, puteți plasa un spațiu între ele procedând în felul următor:
- Asigurați-vă că #nume a elementul este selectat în CSS Designer filă.
- Derulați în jos până la titlul „umplutură” din panou.
- Schimbați câmpurile de text „px” de sus și de jos pentru a citi cel puțin 5.
- Schimbați câmpurile de text „px” din stânga și din dreapta pentru a citi cel puțin 10.
Pasul 10. Creați o culoare de plutire
Aceasta este culoarea care va apărea când plasați cursorul mouse-ului peste un element din meniul derulant:
- Clic + în dreapta rubricii „Selectoare”.
- Tastați #nave a: hover (unde „nume” este numele listei dvs.) și apăsați ↵ Enter de două ori.
- Faceți clic pe fila „Culoare fundal”.
- Selectați culoare de fundal și apoi selectați o culoare mai deschisă decât ați folosit-o pentru culoarea de fundal.
Pasul 11. Opriți CSS
Apasă pe Vedere element de meniu, selectați Redarea stilului și faceți clic pe Stiluri de afișare din fereastra pop-out.
Dacă Stiluri de afișare opțiunea este gri, dați clic oriunde în documentul Dreamweaver și încercați din nou.
Pasul 12. Creați conținutul meniului derulant
Puteți face acest lucru adăugând subpuncte sub punctul glonț pe care doriți să îl utilizați ca buton al meniului derulant:
- Faceți clic în dreapta elementului de listă pe care doriți să îl transformați într-un meniu derulant, apoi apăsați ↵ Enter.
- Apăsați Tab ↹.
- Tastați numele primului dvs. element de meniu derulant, apoi apăsați ↵ Enter.
- Tastați numele următorului meniu derulant, apoi apăsați ↵ Enter și repetați după cum este necesar.
Pasul 13. Legați conținutul meniului derulant de un element glonț
Pentru a face acest lucru:
- Clic + lângă „Selector”, apoi tastați #nume ul ul și apăsați ↵ Enter de două ori.
- Derulați în jos și faceți clic afişa, apoi apasa nici unul în meniul pop-up.
- Găsiți și faceți clic poziţie, apoi apasa absolut în meniul pop-up.
Pasul 14. Creați singur meniul derulant
Va trebui să adăugați încă un selector pentru a face acest lucru:
- Clic + lângă „Selectori”, apoi tastați #nume ul li: hover> ul și apăsați ↵ Enter de două ori.
- Găsiți și faceți clic afişa, apoi apasa bloc în meniul pop-up rezultat.
Pasul 15. Afișați conținutul meniului derulant vertical
În mod implicit, conținutul meniului derulant se va afișa într-o bară orizontală, dar le puteți forța într-o coloană verticală procedând în felul următor:
- Clic + lângă „Selector”, apoi tastați #nume ul ul li și apăsați ↵ Enter de două ori.
- Găsiți titlul „plutitor”.
- Faceți clic pe „nici unul” () opțiunea din dreapta antetului „plutitor”.
Pasul 16. Salvați-vă proiectul
Apăsați Ctrl + S (Windows) sau ⌘ Command + S (Mac) pentru a face acest lucru.
