Այս wikiHow- ը սովորեցնում է ձեզ, թե ինչպես օգտագործել Adobe Dreamweaver- ը ՝ վեբ էջի համար բացվող տուփ ստեղծելու համար: Բացվող տուփերն այն ընտրացանկերն են, որոնք «բաց են թողնվում», երբ ձեր վեբ էջի տարրը կտտացվում է ՝ գործընթացում ներկայացնելով ավելի շատ տարբերակներ:
Քայլեր
Քայլ 1. Բացեք Dreamweaver նախագիծը:
Կրկնակի սեղմեք ծրագրի ֆայլը դա անելու համար: Եթե ցանկանում եք ստեղծել նոր Dreamweaver նախագիծ, փոխարենը կբացեք Dreamweaver- ը, կտտացրեք Ֆայլ, սեղմել Նոր, և հետևեք էկրանի ցանկացած հրահանգին:
Քայլ 2. Ստեղծեք պատվիրված ցուցակ:
Բացվող ընտրացանկ ստեղծելու համար դուք պետք է ունենաք առնվազն մեկ կետի կետ: Կարող եք ստեղծել կետ ՝ անջատելով CSS- ը (կտտացրեք Դիտել ընտրացանկի տարր, ընտրեք Ոճի մատուցում, և կտտացրեք Displayուցադրման ոճերը եթե այն ստուգված է), կտտացնելով այն վայրը, որտեղ ցանկանում եք ավելացնել կետը, կտտացնելով պատուհանի ներքևի մասում գտնվող կետի պատկերակին և մուտքագրել կետի անունը: Շարունակելուց առաջ դուք պետք է նորից միացնեք CSS- ը:
- Կետի անունն այստեղ կծառայի որպես ձեր բացվող ընտրացանկի ակտիվացնող (օրինակ ՝ այն կոճակը, որի վրա սավառնում է կամ սեղմում ՝ բացվող ընտրացանկը բացելու համար):
- Բաց թողեք այս քայլը, եթե արդեն ունեք ցուցակի տարր, որը ցանկանում եք փոխարկել բացվող ընտրացանկի:
Քայլ 3. Որոշեք ձեր ցուցակի անունը:
Սեղմեք Կոդ ներդիրը և համոզվեք, որ միացված եք Աղբյուրի ծածկագիր պարամետրը, այնուհետև ոլորեք ներքև դեպի ձեր պատվիրված ցուցակի ծածկագիրը (այն կլինի «
"պիտակ և ա"
"tag" և փնտրեք "" պիտակը վերևում"
«Պիտակը. մեջբերումներում նշված բառը քո ցուցակի անունն է:
-
Եթե անուն չեք տեսնում, տեղադրեք պիտակը (որտեղ անունը վերաբերում է ցանկի նախընտրած անունին) անմիջապես անվան վերևում
պիտակ
Քայլ 4. Հեռացրեք փամփուշտի կետը:
Համոզվեք, որ ճիշտ տեղում եք ՝ կտտացնելով Դիզայն ներդիրը, այնուհետև կտտացնելով CSS դիզայներ ներդիրը պատուհանի վերին աջ անկյունում, ապա կատարեք հետևյալը.
- Սեղմել + «Ընտրողներ» վերնագրի աջ կողմում:
- Մուտքագրեք #անուն ul, որտեղ «անունը» ձեր ցուցակի անունն է:
- Կտտացրեք ↵ Մուտքագրեք երկու անգամ:
- Ոլորեք ներքև և կտտացրեք ցուցակի ոճի տեսակը վահանակի ներքևի մասում գտնվող վահանակում CSS դիզայներ ներդիր
- Սեղմել ոչ ոք ստացված թռուցիկ ընտրացանկում:
Քայլ 5. Փոխեք ձեր պատվիրված ցուցակը ՝ հորիզոնական ցուցադրելու համար:
Դա անելու համար.
- Սեղմել + «Ընտրողներ» վերնագրի աջ կողմում:
- Մուտքագրեք #անուն li, որտեղ «անունը» ձեր ցուցակի անունն է:
- Գտեք «բոց» վերնագիրը վահանակի ներքևի մասում գտնվող վահանակում CSS դիզայներ ներդիր
- Սեղմեք Ձախ կոճակը անմիջապես «բոց» վերնագրի աջ կողմում:
Քայլ 6. Ավելացրեք ակտիվ ցուցիչ ձեր ցուցակի համար:
Սեղմեք + կոճակը «Ընտրողների» աջ կողմում, այնուհետև մուտքագրեք #անունը a (որտեղ «անունը» ձեր ցուցակի անունն է) և երկու անգամ սեղմեք ↵ Enter:
Քայլ 7. Ավելացրեք ֆոնի գույն:
Ընտրեք ՝ #անուն ա անհրաժեշտության դեպքում, այնուհետև կտտացրեք տուփի տեսքով «Ֆոնի գույն» ներդիրին տողի վերևում CSS դիզայներ պատուհան, ընտրեք Ֆոնի գույնը տարբերակ և ընտրեք օգտագործվող ֆոնի գույնը:
Սա այն գույնն է, որը կօգտագործի ձեր բացվող ցուցակի տարրերը:
Քայլ 8. Ստեղծեք ձեր ցուցակի տարրերը «արգելափակում» ձևաչափով:
Այս ձևաչափը երաշխավորում է, որ երբ որևէ մեկը գնում է ցուցակի որևէ կետի կտտացնելու կամ հպելու համար, նա կարող է բացել այն ՝ մի փոքր վերևից կամ ներքևից ընտրելով, այլ ոչ թե պետք է ճշգրիտ տեքստ ընտրել:
- Համոզվեք, որ ձերն է #անուն ա կետը ընտրված է CSS դիզայներ ներդիր
- Ոլորեք ներքև դեպի վահանակի «ցուցադրում» վերնագիրը:
- Կտտացրեք «ցուցադրել» վերնագրի ծայրամասային աջ կողմին, այնուհետև կտտացրեք արգելափակում ստացված մենյուում:
Քայլ 9. Անհրաժեշտության դեպքում ավելացրեք լցոնում:
Եթե նկատում եք, որ ձեր ցուցակի տարրերը խցանված են միմյանց դեմ, կարող եք նրանց միջև որոշակի տարածք տեղադրել ՝ կատարելով հետևյալը.
- Համոզվեք, որ ձերն է #անուն ա կետը ընտրված է CSS դիզայներ ներդիր
- Ոլորեք ներքև դեպի վահանակի «լրացում» վերնագիրը:
- Փոխեք վերևի և ներքևի «px» տեքստային դաշտերը ՝ առնվազն 5 -ը կարդալու համար:
- Փոխեք ձախ և աջ «px» տեքստային դաշտերը ՝ առնվազն 10 կարդալու համար:
Քայլ 10. Ստեղծեք սավառնի գույն:
Սա այն գույնն է, որը կհայտնվի, երբ մկնիկը կուրսորը սավառնում եք բացվող ընտրացանկի որևէ առարկայի վրա.
- Սեղմել + «Ընտրողներ» վերնագրի աջ կողմում:
- Մուտքագրեք #nave a: hover (որտեղ «անունը» ձեր ցուցակի անունն է) և սեղմեք ↵ Enter երկու անգամ:
- Կտտացրեք «Ֆոնի գույն» ներդիրին:
- Ընտրել Ֆոնի գույնը և ապա ընտրեք ավելի բաց գույն, քան օգտագործել եք ֆոնի գույնի համար:
Քայլ 11. Անջատեք CSS- ը:
Սեղմեք Դիտել ընտրացանկի տարր, ընտրեք Ոճի մատուցում և կտտացրեք այն Displayուցադրման ոճերը տարբերակ բացվող պատուհանում:
Եթե Displayուցադրման ոճերը տարբերակը մոխրագույն է, կտտացրեք ձեր Dreamweaver փաստաթղթում ցանկացած վայրում և նորից փորձեք:
Քայլ 12. Ստեղծեք բացվող ընտրացանկի բովանդակությունը:
Դուք կարող եք դա անել ՝ ավելացնելով ենթակետեր կետի ներքևում, որոնք ցանկանում եք օգտագործել որպես բացվող ընտրացանկի կոճակ ՝
- Կտտացրեք ցուցակի այն կետի աջ կողմում, որը ցանկանում եք վերածել բացվող ընտրացանկի, այնուհետև սեղմել ↵ Enter:
- Սեղմեք ներդիր Tab:
- Մուտքագրեք ձեր առաջին բացվող ցանկի տարրի անունը, այնուհետև սեղմեք ↵ Enter:
- Մուտքագրեք հաջորդ բացվող ընտրացանկի անունը, այնուհետև սեղմեք ↵ Մուտքագրեք և անհրաժեշտության դեպքում կրկնում:
Քայլ 13. Բացվող ընտրացանկի բովանդակությունը կապեք փամփուշտի տարրին:
Դա անելու համար.
- Սեղմել + «Ընտրողների» կողքին, այնուհետև մուտքագրեք #name ul ul և սեղմեք ↵ Enter երկու անգամ:
- Ոլորեք ներքև և կտտացրեք ցուցադրում, ապա կտտացրեք ոչ ոք բացվող ընտրացանկում:
- Գտեք և կտտացրեք դիրք, ապա կտտացրեք բացարձակ բացվող ընտրացանկում:
Քայլ 14. Ստեղծեք բացվող ընտրացանկը ինքնին:
Դա անելու համար դուք պետք է ավելացնեք ևս մեկ ընտրիչ.
- Սեղմել + «Ընտրողների» կողքին, այնուհետև մուտքագրեք #name ul li: hover> ul և սեղմեք ↵ Enter երկու անգամ:
- Գտեք և կտտացրեք ցուցադրում, ապա կտտացրեք արգելափակում ստացված թռուցիկ ընտրացանկում:
Քայլ 15. Ստեղծեք բացվող ընտրացանկի բովանդակությունը ուղղահայաց:
Լռելյայն, բացվող ընտրացանկի բովանդակությունը կցուցադրվի հորիզոնական բարում, բայց կարող եք դրանք ուժով ուղղահայաց սյունակի մեջ դնել ՝ կատարելով հետևյալը.
- Սեղմել + «Ընտրողների» կողքին, այնուհետև մուտքագրեք #name ul ul li և սեղմեք ↵ Enter երկու անգամ:
- Գտեք «բոց» վերնագիրը:
- Կտտացրեք «ոչ» () «բոց» վերնագրի աջ կողմում:
Քայլ 16. Պահպանեք ձեր նախագիծը:
Սեղմեք Ctrl+S (Windows) կամ ⌘ Command+S (Mac) դա անելու համար:
