Dreamweaver-та ашылмалы мәзірді қалай жасау керек

Dreamweaver веб-сайтыңызға арналған ашылмалы мәзірлерді жасауды жеңілдетеді. Бірақ барлық HTML формалары сияқты, олар біраз қиын болуы мүмкін. Бұл оқу құралы сіз Dreamweaver-да ашылмалы мәзір жасау үшін қадамдар арқылы өтеді.

Dreamweaver Jump мәзірі

Dreamweaver 8 веб-торабында шарлау үшін секіру мәзірін жасау шеберін де ұсынады. Бастапқы ашылмалы мәзірлерден өзгеше, бұл мәзір аяқталғаннан кейін бір нәрсе жасайды. Ашық пішінді жұмыс істеу үшін JavaScript немесе CGI-ді жазудың қажеті жоқ. Бұл оқулық сонымен қатар Dreamweaver 8 шеберін секіру мәзірін жасау әдісін түсіндіреді.

01-тен 20-ға дейін

Алдымен нысанды жасаңыз

Dreamweaver-та ашылмалы мәзірді қалай жасау керек Алдымен пішінді жасаңыз. Дж.Кирниннің суреті

Маңызды ескерту HTML Forms және Dreamweaver туралы:

Арнайы шеберлерден секіру мәзірі сияқты, Dreamweaver сізге HTML пішіндерін «жұмыс» етуге көмектеспейді. Ол үшін CGI немесе JavaScript қажет. Пожалуйста, менің оқулықты қараңыз HTML Forms жасау Қосымша ақпарат үшін жұмыс.

Веб-сайтыңызға ашылмалы мәзір қосқан кезде, сізге қажет нәрсе - оны қоршап тұрған нысан. Dreamweaver бағдарламасында Кірістіру мәзіріне өтіп, Пішін түймешігін басыңыз, содан кейін «Форманы» таңдаңыз.

02 of 20

Пішін Дизайн көрінісінде көрсетіледі

Dreamweaver пішіміндегі ашылмалы мәзірді қалай жасау керек? Дж.Кирниннің суреті

Dreamweaver пішін орналасуын жобалау көрінісінде көрнекі түрде көрсетеді, сондықтан сіз пішін элементтерін қайда қою керектігін білесіз. Бұл маңызды, себебі ашылмалы мәзір тегтері пішін элементінен тыс жұмыс істемейді (және жұмыс істемейді). Суретте көріп тұрғаныңыздай, пішін дизайн көрінісіндегі қызыл нүктелі сызық болып табылады.

03-тен 20-ге дейін

Тізім / Мәзір тармағын таңдаңыз

Dreamweaver-та ашылмалы мәзірді жасау жолы / Мәзір тармағын таңдаңыз. Дж.Кирниннің суреті

Ашылмалы мәзірлер Dreamweaver-та «тізім» немесе «мәзір» деп аталады. Пішінге біреуін қосу үшін, Кірістіру мәзірінен Пішін мәзіріне өтіп, «Тізім / Мәзір» тармағын таңдаңыз. Курсордың пішін қорабының қызыл нүктелі сызығында болғанын тексеріңіз.

04 04

Арнайы параметрлер терезесі

Dreamweaver арнайы опциялар терезесіндегі ашылмалы мәзірді қалай жасау керек. Дж.Кирниннің суреті

Dreamweaver опцияларында Арнайы мүмкіндіктер туралы экран бар. Dreamweaver маған барлық қолжетімділік атрибуттарын көрсетуді таңдап аламын. Және бұл экран - бұл нәтиже. Пішіндер көптеген веб-сайттар қол жетімділікке түсетін орын болып табылады және осы бес опцияны толтыру арқылы ашылмалы мәзірлеріңіз дереу қол жетімді болады.

05 of 20

Қол жетімділік формасы

Dreamweaver формадағы қол жетімділікті ашылатын мәзірді қалай жасау керек. Дж.Кирниннің суреті

Қол жетімділік параметрлері:

Заттаңба

Бұл өріс үшін атау. Бұл пішін элементінің жанында мәтін ретінде көрсетіледі.
Ашылмалы мәзіріңізге нені қаласаңыз, жазыңыз. Бұл ашылмалы мəзірге жауап беретін сұрақ немесе қысқа фраза болуы мүмкін.

Стиль

HTML браузерге пішім белгілерін анықтау үшін жапсырма белгісін қамтиды. Таңдауыңыз ашылмалы мәзір мен жапсырма мәтінін тегпен орап, белгіге арналған «for» атрибутын пайдалану үшін, ол қандай пішімнің тегіне сілтеме жасайтынын немесе жапсырма белгісін мүлдем қолданбау үшін.
Мен атрибутты пайдаланғым келеді, себебі егер қандай да бір себептермен затбелгіні ауыстыру қажет болса, ол әлі де дұрыс пішін өрісіне қосылады.

Позиция

Таңбаны ашылмалы мәзірден бұрын немесе кейін қоюға болады.

Кілтті ашу

Бұл тікелей осы пішін өрісіне жету үшін Alt немесе Option пернелерімен бірге пайдаланылуы мүмкін кілт. Бұл сіздің пішіндеріңізді тінтуірді қажет етпестен өте оңай етеді. HTML-ге қатынау кілтін қалай орнатуға болады

Қойынды индексі

Бұл пернетақтаны веб-беттегі қойындыда пайдаланған кезде пішін өрісіне кіру керек тәртібі. Tabindex түсіну

Арнайы мүмкіндіктер параметрлерін жаңартқан кезде OK түймешігін басыңыз.

06-дан 20-ке дейін

Мәзірді таңдаңыз

Dreamweaver-та ашылмалы мәзірді қалай жасау керек Мәзірді таңдаңыз. Дж.Кирниннің суреті

Құрылымдық көріністе көрсетілетін ашылмалы мәзіріңіз бар болса, оған әртүрлі элементтерді қосу керек. Алдымен ашылмалы мәзірді таңдаңыз. Dreamweaver бағдарламасы сіз таңдағаныңызды көрсету үшін жайылмалы мәзірдің айналасындағы басқа нүктелі сызықты қояды.

07 оның 20

Мәзір сипаттары

Dreamweaver мәзірінің сипаттарында ашылмалы мәзірді қалай жасау керек. Дж.Кирниннің суреті

Сипаттар мәзірі сол ашылмалы мәзірдің тізім / мәзір сипаттарына өзгереді. Онда өз мәзіріңізге ID (мұнда «таңдау» деп айтады), лис немесе мәзір болуы керек, оны стиль кестесінен мәнер сыныбына беріңіз және ашылмалы мәндерге мән беріңіз.

Тізім мен мәзір арасында қандай айырмашылық бар?

Dreamweaver кез-келген ашылмалы мәзірді шақырады, ол тек бір таңдауға мүмкіндік береді. «Тізім» ашылмалы тізімде бірнеше таңдау жасауға мүмкіндік береді және бірден жоғары элемент болуы мүмкін.

Егер ашылмалы мәзірдің бірнеше жолға жоғары болуы қажет болса, оны «тізім» түріне өзгертіп, «таңдау» жолын белгісіз қалдырыңыз.

08 20

Жаңа тізім элементтерін қосу

Dreamweaver бағдарламасындағы ашылмалы мәзірді қалай жасау керек Жаңа тізім элементтерін қосыңыз. Дж.Кирниннің суреті

Мәзірге жаңа элементтерді қосу үшін «List values ​​...» батырмасын басыңыз. Бұл жоғарыда көрсетілген терезені ашады. Бірінші жолдағы зат белгісін теріңіз. Бұл беттің көрінісі. Егер мәнді бос қалдырсаңыз, бұл пішінде де жіберілетін болады.

09 оның 20

Көбірек және қайта реттеңіз

Dreamweaver бағдарламасындағы ашылмалы мәзірді қалай жасауға болады Қосымша және қайта реттеңіз. Дж.Кирниннің суреті

Қосымша элементтерді қосу үшін қосу белгішесін нұқыңыз. Егер сіз оларды тізімді жолаққа қайта тапсырғыңыз келсе, оң жағындағы жоғары және төмен көрсеткілерді пайдаланыңыз.

10-тен 20-ға дейін

Барлық элементтер мәндерін беріңіз

Dreamweaver бағдарламасындағы ашылмалы мәзірді қалай жасау керек Барлық элементтер мәндерін беріңіз. Дж.Кирниннің суреті

8-қадамда айтып өткенімдей, егер бос мән қалдырсаңыз, жапсырма пішінге жіберіледі. Бірақ барлық элементтеріңіздің мәндерін бере аласыз - пішінге балама ақпаратты жіберу үшін. Сіз бұл мәзірлерден секіретін нәрселер үшін көп пайдаланасыз.

11-тен 20-ға дейін

Әдепкі бойынша таңдаңыз

Dreamweaver-та ашылмалы мәзірді қалай жасау керек Әдепкі бойынша таңдаңыз. Дж.Кирниннің суреті

Веб-беттер әдепкі бойынша, ашылмалы элементтің мәнін алдымен әдепкі элемент ретінде көрсету. Бірақ басқа таңдалғанды ​​қаласаңыз, оны «Сипаттар» мәзіріндегі «Бастапқы таңдалған» терезесінде көрсетіңіз.

12 of 20

Сіздің тізіміңізді Құрастырушы көрінісінде қараңыз

Dreamweaver бағдарламасындағы ашылмалы мәзірді қалай жасау керек? Дж.Кирниннің суреті

Сипаттарды өңдеуді аяқтағаннан кейін, Dreamweaver ашылмалы тізіміңізді таңдалған әдепкі мәнмен көрсетеді.

13-тен 20-ға дейін

Сіздің тізіміңізді код көрінісінде қараңыз

Dreamweaver бағдарламасындағы ашылмалы мәзірді қалай жасау керек Код көрінісіндегі тізіміңізді қараңыз. Дж.Кирниннің суреті

Егер сіз код көрінісіне ауыссаңыз, Dreamweaver бағдарламасы ашылмалы мәзіріңізді өте таза кодты қосатындығын көресіз. Қосымша атрибуттар біз қолжетімділік мүмкіндіктері бар. Бұл кодты оқып, түсіну өте оңай. Ол таңдалған = «таңдалған» төлсипатқа қояды, себебі Dreamweaver-ке XHTML жазуды әдепкі деп айттым.

14-тен 20-ға дейін

Браузерде сақтау және қарау

Dreamweaver бағдарламасында ашылмалы мәзірді қалай жасау керек және шолғышта көру. Дж.Кирниннің суреті

Егер сіз құжатты сақтап, оны веб-браузерде көретін болсаңыз, ашылмалы мәзіріңіз сіз күткендей көрінетінін көре аласыз.

15-тен 20-ға дейін

Бірақ бұл ештеңе жасамайды

Dreamweaver-да ашылмалы мәзірді қалай жасауға болады, бірақ ештеңе жасамайды. Дж.Кирниннің суреті

Жоғарыда жасалған мәзір тамаша көрінеді, бірақ ол ештеңе істемейді. Бірдеңені жасау үшін оны пішіннің өзінде пішін әрекетін жасау керек, ол толықтай басқа оқу құралы болып табылады.

Бақытымызға орай, Dreamweaver формасы, CGI немесе сценарий туралы білуге ​​қажеті жоқ сайтты дереу пайдалануға болатын кіріктірілген ашылмалы мәзір пішіні бар. Бұл Jump Menu деп аталады.

Dreamweaver Jump мәзірі аттар мен URL-мекенжайлары бар ашылмалы мәзірді орнатады. Содан кейін мәзірде элементті таңдауға болады және веб-бет сілтемеге басқан секілді сол жерге көшеді.

Кірістіру мәзіріне өтіп, Пішінді және содан кейін Jump Menu таңдаңыз.

16-дан 20-ке дейін

Терезе мәзірін жылжытыңыз

Dreamweaver Jump Menu терезесіндегі ашылмалы мәзірді қалай жасау керек. Дж.Кирниннің суреті

Стандартты ашылмалы мәзірден айырмашылығы, Jump мәзірі мәзір элементтерін атау және пішіннің жұмыс істеуі туралы мәліметтерді қосу үшін жаңа терезені ашады.

Бірінші элементте «untitled1» деген мәтінді оқып, сол сілтеме жіберетін URL мекен-жайына қосыңыз.

17-тен 20-ға дейін

Jump мәзіріне элементтерді қосыңыз

Dreamweaver ішіндегі ашылмалы мәзірді қалай жасау керек? Басқақ мәзіріне элементтер қосу. Дж.Кирниннің суреті

Қосу элементін басу мәзіріне жаңа элемент қосу үшін басыңыз. Қалағаныңызша көп нәрсені қосыңыз.

18-тен 20-ға дейін

Jump Menu Options (Жолды өзгерту мәзірі)

Dreamweaver Jump Menu опцияларындағы ашылмалы мәзірді қалай жасау керек. Дж.Кирниннің суреті

Қажетті барлық сілтемелерді қосқаннан кейін, параметрлерді таңдау керек:

URL мекенжайларын ашу

Егер сізде фреймсет бар болса, сілтемелерді басқа фреймде ашуға болады. Немесе негізгі терезенің опциясын арнайы мақсатқа өзгертуге болады, сонда URL мекен-жайы жаңа терезеде немесе басқа жерде ашылады.

Мәзір аты

Мәзірге бетке бірегей идентификатор беріңіз. Бұл сценарий дұрыс жұмыс істеуі үшін қажет. Сондай-ақ, бір пішінде бірнеше рет секіру мәзірлерін алуға мүмкіндік береді - тек әртүрлі атауларды беріңіз.

Мәзірден кейін Go түймешігін кірістіру

Мен оны таңдағанды ​​ұнатамын, себебі кейде мәзір өзгертілген кезде сценарий жұмыс істемейді. Ол сондай-ақ қол жетімді.

URL өзгертуінен кейін бірінші элемент таңдаңыз

Бірінші мәзір элементі ретінде «Біреуін таңдау» сияқты сұранысыңыз болса, оны таңдаңыз. Бұл элемент парақта әдепкі болып қалатындығын қамтамасыз етеді.

19-дан 20-ке дейін

Jump Menu Дизайн Көрінісі

Dreamweaver Jump мәзіріндегі дизайн көрінісіндегі ашылмалы мәзірді қалай жасау керек. Дж.Кирниннің суреті

Сіздің алғашқы мәзіріңіз сияқты, Dreamweaver бағдарламасы әдепкі элемент көрінетін көрінетін көріністегі секіру мәзірін орнатады. Содан кейін ашылмалы мәзірді кез-келген басқа сияқты өңдей аласыз.

Егер оны өңдейтін болсаңыз, элементтердегі ешбір идентификаторды өзгертпеңіз, әйтпесе сценарий жұмыс істемеуі мүмкін.

20-дан 20-ға дейін

Браузерде Jump мәзірі

Браузерде Dreamweaver Jump мәзіріндегі ашылмалы мәзірді қалай жасау керек. Дж.Кирниннің суреті

Файлды сақтау және F12 пернесін басу бетті таңдаулы браузерде көрсетеді. Онда сіз опцияны таңдай аласыз, «Өту» басқышын басыңыз және секіру мәзірі жұмыс істейді!