Ինչպես ստեղծել Dreamweaver- ում բացվող մենյու

Dreamweaver- ն հեշտացնում է ձեր վեբ կայքի համար բացվող մենյուները: Բայց, ինչպես բոլոր HTML ձեւերը, դրանք կարող են լինել մի քիչ բարդ: Այս ձեռնարկը ձեզ քայլում է Dreamweaver- ում բացվող մենյու ստեղծելու քայլերի միջոցով:

Dreamweaver Jump բաժիններում

Dreamweaver 8- ը նաեւ տրամադրում է վեբ կայք, որը ստեղծում է ձեր վեբ կայքի նավիգացիան: Ի տարբերություն հիմնական բացվող բաժինների, այս ցանկը իրականում ինչ-որ բան կանի, երբ ավարտվում եք: Դուք չունեք որեւէ JavaScript կամ CGI- ին գրելու համար, ձեր կաթիլային ձեւը աշխատելու համար: Այս ձեռնարկը նաեւ բացատրում է, թե ինչպես օգտվել Dreamweaver 8-ի հրաշագործից, որպեսզի անցանկալի մենյու ստեղծվի:

01-ից 20-ը

Նախ `ձեւը ձեւակերպեք

Կարեւոր Նշում HTML ձեւերի եւ Dreamweaver- ի մասին.

Բացառությամբ հատուկ սայթաքեր, ինչպիսիք են թռիչքի ցանկը, Dreamweaver- ը չի օգնում ձեզ HTML ձեւեր ստեղծել «աշխատանք»: Դրա համար անհրաժեշտ է CGI կամ JavaScript: Խնդրում ենք տեսնում իմ դասավանդումը HTML ձեւերի ստեղծում ավելին `լրացուցիչ տեղեկությունների համար:

Երբ դուք ավելացնում եք մի կաթիլ մենյու Ձեր վեբ կայքից, առաջին բանը, որը դուք պետք է, այն շրջապատող ձեւ է: Dreamweaver- ում, գնալ Insert մենյուից եւ սեղմել Ձեւը, ապա ընտրել «Ձեւը»:

02-ից 20-ը

Ձեւը ցուցադրվում է դիզայնի տեսքով

Dreamweaver- ը ձեր ձեւի տեսքը ցուցադրում է տեսողական տեսքով, այնպես որ դուք գիտեք, թե որտեղ պետք է տեղադրել ձեր ձեւի տարրերը: Սա կարեւոր է, քանի որ ներքեւում մենյուի պիտակները չեն գործում (եւ չեն աշխատի) ձեւի տարրից դուրս: Ինչպես տեսնում եք պատկերը, ձեւը կարմիր կետավոր գիծ է դիզայնի տեսանկյունից:

03-ից 20-ը

Ընտրեք Ցանկը / Մենյու

Drop-down մենյուները կոչվում են «ցանկ» կամ «մենյու» տարրեր Dreamweaver- ում: Այսպիսով, ձեր ձեւով մեկին ավելացնելու համար հարկավոր է մուտք գործել Մենյուի ցանկը եւ ընտրել «Ցանկը / Մենյու»: Համոզվեք, որ ձեր կուրսորը եղել է ձեր ձեւի տուփի կարմիր կետավոր գիծը:

04-ը 20-ը

Հատուկ պատվերների պատուհան

Dreamweaver- ի ընտրանքներում մատչելիության էկրան կա: Ես ընտրում եմ, որ Dreamweaver- ը ինձ ցույց տա բոլոր մատչելիության հատկանիշները: Եվ այս էկրանը դրա արդյունքն է: Ձեւերը այն վայրն է, որտեղ շատ Վեբ կայքեր հասանելիության մեջ են եւ լրացնելով այս հինգ տարբերակները, ձեր բացվող մենյուները անմիջապես ավելի մատչելի կլինեն:

05-ից 20-ը

Ձեւի մատչելիություն

Հասանելիության ընտրանքները հետեւյալն են.

Պիտակ

Սա դաշտի անունն է: Դա ձեր տեքստի տարրի կողքին կտեսնի տեքստ:
Գրեք այն, ինչ ուզում եք զանգահարել ձեր բացվող մենյու: Սա կարող է լինել մի հարց կամ կարճ արտահայտություն, որը կպատասխանի բացվող մենյուին:

Style

HTML- ն ներառում է պիտակի պիտակ `ձեր ձեւի պիտակները բրաուզերում հայտնաբերելու համար: Ձեր ընտրությունը կատարվում է բացվող մենյուի եւ պիտակի տեքստը պիտակի հետ, պիտակի վրա «for» հատկանիշի օգտագործման համար, որը բացահայտելու համար նշեք, թե որ ձեւի պիտակը հղում է կատարում կամ պիտակի պիտակն ամբողջովին չօգտագործել:
Ես նախընտրում եմ օգտագործել հատկանիշը, քանի որ եթե այն ժամանակ, երբ ես պետք է տեղափոխեմ պիտակը որեւէ պատճառով, այն կցված կլինի ճիշտ ձեւի դաշտին:

Դիրք

Դուք կարող եք տեղադրել ձեր պիտակը դեպի ներքեւից կամ հետո:

Մուտքի բանալի

Սա այն բանալին է, որը կարող է օգտագործվել Alt կամ Option բանալիների հետ միասին ուղղակիորեն այդ ձեւի դաշտին հասնելու համար: Սա ձեր ձեւերը շատ հեշտ է դարձնում, առանց մկնիկի կարիքների: Ինչպես օգտվել մուտքի բանալի HTML- ում

Տեքստի ինդեքս

Սա այն կարգն է, որով ձեւի դաշտը պետք է մատչելի լինի, երբ ստեղնաշարի օգտագործումը վեբ էջի միջանցք է: Հասկանալով Tabindex- ը

Երբ դուք թարմացրեցիք ձեր մատչելիության հնարավորությունները, սեղմեք OK:

06-ից 20-ը

Ընտրեք Մենյու

Երբ դուք ունեք ձեր բացվող ցանկը, որը ցուցադրվում է դիզայնի տեսանկյունից, անհրաժեշտ է ավելացնել տարբեր տարրեր: Նախ `սեղմեք սեղմելով ցանկի ցանկը: Dreamweaver- ը կընձեռի մեկ այլ կետավոր գիծ, ​​պարզապես բացվող մենյուի շուրջ, ցույց տալու համար, որ այն ընտրեցիք:

07-ը 20-ը

Մենյուի հատկությունները

Հատկությունների ցանկը փոխվում է ցանկի ցանկի / ցանկի հատկությունների համար: Այնտեղ կարող եք տալ ձեր մենյուի ID- ն (որտեղ ասվում է «ընտրել»), որոշեք, թե արդյոք այն ցանկանում է լինել լիզ կամ մենյու, տալ ձեր ոճաթերթից ստացված ոճի դասարան եւ արժեքներ սահմանել դեպի անկումը:

Ինչ է տարբերությունը ցանկի եւ մենյուի միջեւ:

Dreamweaver- ը կոչ է անում մենյուից բացվող ցանկացած ցանկից, որը թույլ է տալիս միայն մեկ ընտրություն: «Ցանկը» թույլ է տալիս բազմակի ընտրություն թողնելուց եւ կարող է լինել մեկից ավելի միավոր:

Եթե ​​ցանկանում եք բաց թողնել մենյուը, բազմակի գծերի բարձր լինելը, փոխեք այն «ցուցակ» տիպի եւ թողեք «ընտրությունները» տուփը չպահված:

08-ից 20-ը

Ավելացնել նոր ցուցակների տարրեր

Ձեր ընտրացանկին նոր տարրեր ավելացնելու համար սեղմեք «Ցանկի արժեքները ...» կոճակը: Սա կբացվի վերը նշված պատուհանը: Մուտքագրեք ձեր ապրանքի պիտակը առաջին վանդակում: Սա այն է, ինչ կցուցադրվի էջում: Եթե ​​դուք թողնեք արժեքը դատարկ, ապա դա նաեւ այն է, ինչ կուղարկվի ձեւով:

09-ից 20-ը

Ավելացրեք եւ վերակազմավորեք

Ավելացրեք ավելի շատ կետեր ավելացնելու համար սեղմեք նկարի պատկերակը: Եթե ​​ցանկանում եք վերագրանցել դրանք ցանկի վանդակում, օգտագործեք աջից եւ ներքեւի սլաքները աջ կողմում:

10-ից 20-ը

Տվեք բոլոր իրերը արժեքները

Ինչպես ես նշեցի 8-րդ քայլում, եթե արժեքը բացեք, պիտակը կուղարկվի ձեւ: Բայց դուք կարող եք տալ ձեր բոլոր արժեքների արժեքները `ձեր ձեւի այլընտրանքային տեղեկատվություն ուղարկելու համար: Դուք կօգտագործեք սա շատ բաներ, ինչպիսիք են ցատկել բաժինները:

11-ը 20-ը

Ընտրեք Default

Վեբ էջերը նախապես ցուցադրելու համար, թե ինչ անկում է բացվում, որը նախապես ներկայացված է որպես լռելյայն նյութ: Բայց եթե ցանկանում եք ընտրել մեկ այլ ընտրություն, այն ընդգծեք այն «Սկզբնապես ընտրված» դաշտում, Properties- ի ընտրացանկում:

12-ից 20-ը

Տեսեք ձեր ցուցակը նախագծման տեսանկյունից

Երբ դուք ավարտել եք հատկությունները խմբագրելով, Dreamweaver- ը կցուցադրի ձեր բացվող ցանկը `ընտրված արժեքի հետ:

13-ից 20-ը

Տեսեք ձեր ցուցակը կոդերի տեսքով

Եթե ​​դուք անցնում եք կոդի տեսք, տեսնում եք, որ Dreamweaver- ը ձեր բացվող մենյուն ավելացնում է շատ մաքուր կոդով: Միակ ավելցուկային հատկանիշներն են, որ մենք ավելացրել ենք մատչելիության հնարավորություններ: Կոդն ամբողջությամբ տեղադրված է եւ շատ հեշտ է կարդալ եւ հասկանալ: Այն նույնիսկ դնում է ընտրված = «ընտրված» հատկանիշը, քանի որ ես ասել եմ Dreamweaver- ին, որ ես նախապես գրել եմ XHTML- ը:

14-ից 20-ը

Պահել եւ դիտել բրաուզերում

Եթե ​​դուք պահեք փաստաթուղթը եւ դիտեք այն վեբ բրաուզերում, կարող եք տեսնել, որ ձեր բացվող մենյուը կարծես այնպիսին է, ինչպիսին դուք ակնկալում եք:

15-ից 20-ը

Բայց դա ոչինչ չի անում

Վերոնշյալ մենյուը նայում է լավ, բայց դա ոչինչ չի անում: Որպեսզի դա անել ինչ-որ բան անելու համար, դուք պետք է ստեղծեք ձեւի գործողություն ինքնին ձեւով, որը բոլորովին այլ ձեռնարկ է:

Բարեբախտաբար, Dreamweaver- ը ունի ներկառուցված անկումը մենյուի ձեւ, որը դուք կարող եք օգտագործել անմիջապես ձեր կայքում, առանց պահանջելու ձեւեր, CGIs կամ սցենարների մասին: Այն կոչվում է Jump Menu:

Dreamweaver- ի Անցնել ցանկը սահմանում է անվանումների ցանկ եւ անուններ: Այնուհետեւ դուք կարող եք ընտրել ընտրացանկի ցանկը եւ վեբ էջը կտեղափոխվի այդ վայր, ճիշտ այնպես, ինչպես եթե դուք սեղմել եք հղումը:

Գնալ դեպի ներս մենյու եւ ընտրել Ձեւը եւ այնուհետեւ Անցնել Մենյու:

16-ից 20-ը

Անցնել ցանկի պատուհանը

Ի տարբերություն ստանդարտ բացվող մենյուի, Jump մենյուը բացում է նոր պատուհան `ձեզ համար ընտրելու ձեր ընտրացանկի տարրերը եւ ավելացրեք մանրամասներ, թե ինչպես ձեւը պետք է աշխատի:

Առաջին կետի համար փոխեք «untitled1» տեքստը, այն, ինչ ցանկանում եք այն կարդալ եւ ավելացնել URL, որը հղումը պետք է անցնի:

20-ից 20-ը

Ավելացնել տարրեր ձեր Անցնել ցանկի մեջ

Սեղմիր ավելացնելու տարրը, ձեր անցուղու մենյուին նոր տարր ավելացնելու համար: Ավելացրեք այնքան տարրեր, որքան ցանկանում եք:

18-ից 20-ը

Անցնել ցանկի ընտրանքները

Երբ եք ավելացրել ձեր բոլոր հղումները, դուք պետք է ընտրեք ձեր ընտրանքները.

Բաց URL- ներ

Եթե ​​ունեք շրջանակներ, կարող եք բացել հղումները այլ շրջանակով: Կամ դուք կարող եք փոխել Հիմնական պատուհանը տարբեր նպատակին, որպեսզի URL- ը բացվի նոր պատուհանում կամ այլ վայրում:

Մենյու անունը

Տեքեք ձեր ցանկը եզակի ID- ի համար էջի համար: Դա պահանջվում է այնպես, որ սցենարը կաշխատի ճիշտ: Այն նաեւ թույլ է տալիս ունենալ մի քանի ցատկ մենյու մի ձեւով `պարզապես տալ նրանց բոլոր տարբեր անունները:

Տեղադրեք Go կոճակը ցանկից հետո

Ինձ դուր է գալիս ընտրել այն, քանի որ երբեմն սցենարը չի աշխատում, երբ մենյուը փոխվում է: Այն նաեւ մատչելի է:

Ընտրեք Առաջին Անունը URL փոփոխությունից հետո

Ընտրեք սա, եթե դուք ունեք հուշում, ինչպես օրինակ «Ընտրեք մեկ», որպես առաջին ընտրացանկի տարր: Սա ապահովագրելու է, որ այդ նյութը էջում պահվում է լռելյայն:

19-ից 20-ը

Անցնել ցանկը դիզայնի տեսք

Ինչպես ձեր առաջին մենյուով, Dreamweaver- ը ստեղծում է ձեր անցումային ցանկը դիզայնի տեսանկյունից `տեսանելի տեսքի տեսանելիով: Այնուհետեւ կարող եք խմբագրել մենյուը, ինչպես մյուսը:

Եթե ​​դուք խմբագրում եք այն, համոզվեք, որ չփոխեք տարրերի ID- ները, հակառակ դեպքում սցենարը չի կարող աշխատել:

20-ից 20-ը

Անցնել ցանկը Browser- ում

Ֆայլը փրկելու եւ F12- ին հարվածելը էջը կցուցադրի ձեր նախընտրած բրաուզերում: Այստեղ դուք կարող եք ընտրել տարբերակ, սեղմեք «Գնալ» եւ ցատկել մենյուի աշխատանքները: