Dreamweaver программасында ылдый түшүүчү менюну кантип түзүү керек

Мазмуну:

Dreamweaver программасында ылдый түшүүчү менюну кантип түзүү керек
Dreamweaver программасында ылдый түшүүчү менюну кантип түзүү керек
Anonim

Эмнелерди билүү керек

  • Барыңыз Insert > Forma > Form. Формадагы чекиттүү кызыл сызыкты басып, Insert > Form > Тизме/Меню бөлүмүнө өтүңүз. Атайын мүмкүнчүлүктөрдү тандаңыз.
  • Менюну чыкылдатып, анын касиеттерин тандаңыз, андан соң жаңы меню пункттарын кошуу үчүн Тизме баалуулуктарын тандаңыз. Көбүрөөк нерселерди кошуу үчүн кошуу белгисин басыңыз.
  • Нерсенин маанилерин кошуп, демейки нерсени тандаңыз. Аракеттерди кошуу үчүн Insert > Form > Өтүү меню өтүңүз. Өтүү менюсуна нерселерди кошуп, сактаңыз.

Dreamweaver веб-сайтыңыз үчүн ачылуучу менюларды түзүүнү жеңилдетет. Бирок бардык HTML формалары сыяктуу эле, алар бир аз татаал болушу мүмкүн. Бул окуу куралы Dreamweaver программасында ылдый түшүүчү менюну түзүү кадамдары аркылуу көрсөтөт.

Dreamweaver секирүү менюлары

Dreamweaver 8 ошондой эле веб-сайтыңызда навигация үчүн секирүү менюсун түзүү устасын камсыз кылат. Негизги ачылуучу менюлардан айырмаланып, бул меню сиз бүткөндөн кийин бир нерсе кылат. Ашылма формаңызды иштетүү үчүн эч кандай JavaScript же CGI жазуунун кереги жок. Бул окуу куралы ошондой эле Dreamweaver 8 устасын секирүү менюсун кантип колдонууну түшүндүрөт.

Биринчи, форманы түзүңүз

Image
Image

Секирүү менюсу сыяктуу атайын усталардан тышкары, Dreamweaver HTML формаларын "иштейт" кылууга жардам бербейт. Бул үчүн сизге CGI же JavaScript керек.

Веб-сайтыңызга ылдый түшүүчү менюну кошуп жатканыңызда, сизге биринчи кезекте аны курчап турган форма керек. Dreamweaver программасында Кыстаруу менюсуна өтүп, Форманы чыкылдатып, андан соң "Форманы" тандаңыз.

Дизайн көрүнүшүндөгү форма дисплейлери

Image
Image

Dreamweaver дизайн көрүнүшүндө формаңыздын жайгашкан жерин визуалдык түрдө көрсөтөт, андыктан форма элементтериңизди кайда коюуну билесиз, анткени ачылуучу меню тегдери форма элементинин сыртында жараксыз (жана иштебейт). Сүрөттө көрүнүп тургандай, форма дизайн көрүнүшүндөгү кызыл чекиттүү сызык.

Тизмени/Менюну тандаңыз

Image
Image

Ашылма менюлар Dreamweaver программасында "тизме" же "меню" пункттары деп аталат. Ошентип, формаңызга бирөөнү кошуу үчүн, Кыстаруу менюсундагы Форма менюсуна кирип, "Тизме/Менюну" тандаңыз. Курсоруңуз форма кутучаңыздын кызыл чекит сызыгынын ичинде экенин текшериңиз.

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

Image
Image

Dreamweaver параметрлеринде Атайын мүмкүнчүлүктөр боюнча экран бар. Бул беш опцияны толтурсаңыз, ачылуучу менюңуз дароо башка вебсайттарга караганда жеткиликтүү болот.

Форма мүмкүнчүлүктөрү

Image
Image

Атайын мүмкүнчүлүктөр:

Энбелги

Энбелги талаасы форма элементиңиздин жанында текст катары көрүнөт. Ашылма менюңуздун атын териңиз. Бул ылдый түшүүчү меню жооп бере турган суроо же кыска фразалар болушу мүмкүн.

Стиль

HTML веб браузерде формаңыздын энбелгилерин аныктоо үчүн энбелги тегин камтыйт. Сиздин тандооңуз - ылдый түшүүчү менюну жана энбелги текстин тег менен ороп, энбелги тегиндеги "for" атрибутун колдонуп, ал кайсы форманын тегине шилтеме жасап жатканын аныктоо же энбелги тегин такыр колдонбоо.

Позиция

Сиз энбелгиңизди ылдый түшүүчү менюнун алдына же кийин койсоңуз болот.

Кирүү ачкычы

Коноктор ошол форма талаасына түз кирүү үчүн "Сүрөт" же Option баскычтары менен кирүү ачкычын колдоно алышат. Бул баскычтоптун жарлыгы формаларыңызды чычкансыз колдонууга абдан жеңил кылат. alt="

Өтмөк индекси

Өтмөк индекси – бул колдонуучулар веб-баракчага өтүү үчүн клавиатураны колдонгондо форма талааларына кантип кире алышы керек.

Атайын мүмкүнчүлүктөр параметрлерин жаңыртканыңызда, OK баскычын чыкылдатыңыз.

Менюну тандаңыз

Image
Image

Сиз ылдый түшүүчү менюңуз Dreamweaver дизайн көрүнүшүндө көрсөтүлгөндөн кийин, ар кандай элементтерди кошушуңуз керек. Биринчиден, аны чыкылдатуу менен ачылуучу менюну тандаңыз. Dreamweaver сиз тандаганыңызды көрсөтүү үчүн ылдый түшүүчү менюнун айланасына дагы бир чекиттүү сызык коёт.

Менюнун касиеттери

Image
Image

Сипаттар менюсу ошол ачылуучу меню үчүн тизме/меню касиеттерине өзгөрөт. Ал жерден менюңузга идентификаторду (ал жерде "тандоо" деп жазылган) бере аласыз, анын тизме же меню болушун кааласаңыз, ага стилдер барагыңыздан стил классын берип, ылдый түшүүчүгө маанилерди дайындай аласыз.

Тизме менен менюнун ортосунда кандай айырма бар?

Dreamweaver менюнун ылдый түшүүчү менюну бир гана тандоого мүмкүндүк берген каалаган ылдый түшүүчү меню деп атайт. "Тизме" ачылуучу тизмеден бир нече тандоого мүмкүндүк берет жана бирден көп нерсе болушу мүмкүн.

Эгер ылдый түшүүчү меню бир нече саптан жогору болушун кааласаңыз, аны "тизме" түрүнө өзгөртүп, "тандоо" кутучасын белгилөөсүз калтырыңыз.

Тизмеге жаңы нерселерди кошуу

Image
Image

Менюңузга жаңы нерселерди кошуу үчүн, жогорудагы терезени ачкан "Тизме баалуулуктары…" баскычын басыңыз. Андан кийин, биринчи кутуга нерсеңиздин энбелгисин териңиз. Ал баракта көрсөтүлөт.

Дагы кошуу жана кайра иреттөө

Image
Image

Көбүрөөк нерселерди кошуу үчүн плюс белгисин чыкылдатыңыз. Аларды тизме кутучасында кайра иреттегиңиз келсе, оң жактагы өйдө жана ылдый жебелерди колдонуңуз.

Бардык нерселердин баалуулуктарын бер

Image
Image

Эгер сиз маанини бош калтырсаңыз, энбелги формага өтөт. Бирок сиз бардык элементтериңиздин баалуулуктарын бере аласыз - формаңызга кошумча маалыматты жөнөтүү үчүн. Муну секирүү менюлары жана гипершилтемелер үчүн көп колдоносуз.

Демейки тандоо

Image
Image

Веб-баракчалар демейки нерсе катары кайсы ачылуучу элемент биринчи тизмеленген болсо, демейки түрдө көрсөтүлөт. Бирок башкасын тандагыңыз келсе, аны касиеттери менюсундагы "Башында тандалган" кутучасынан белгилеңиз.

Тизмеңизди Дизайн көрүнүшүндө көрүңүз

Image
Image

Сиз касиеттерди түзөтүп бүткөндөн кийин, Dreamweaver тандалган демейки маани менен ылдый түшүүчү тизмеңизди көрсөтөт.

Тизмеңизди код көрүнүшүндө көрүңүз

Image
Image

Эгер код көрүнүшүнө которулсаңыз, Dreamweaver ачылуучу менюңузду таза код менен кошо турганын көрө аласыз. Жалгыз кошумча атрибуттар - бул жеткиликтүүлүк параметрлери. Коддун баары чегинген жана окуу жана түшүнүү абдан оңой.

Сактоо жана Браузерде көрүү

Image
Image

Документти сактап, аны веб-браузерден көрсөңүз, ачылуучу менюңуз сиз күткөндөй көрүнөрүн көрө аласыз.

Бирок бул эч нерсе кылбайт…

Image
Image

Жогоруда биз түзгөн меню жакшы көрүнөт, бирок эч нерсе кылбайт. Аны бир нерсе кылуу үчүн форманын өзүнө форма аракетин орнотушуңуз керек.

Бактыга жараша, Dreamweaver программасында формалар, CGI же скрипт жөнүндө билүүнүн кереги жок эле дароо сайтыңызда колдоно турган камтылган ачылуучу меню формасы бар. Ал Өтүү менюсу деп аталат.

Dreamweaver секирүү менюсу аттар жана URL даректери менен ылдый түшүүчү менюну орнотот. Андан кийин менюдан бир нерсени тандасаңыз болот, жана веб-баракча, сиз шилтемени баскандай эле, ошол жерге жылат.

Кыстаруу менюсуна өтүп, Форма, андан соң Өтүү менюсун тандаңыз.

Өтүү менюсунун терезеси

Image
Image

Стандарттык ылдый түшүүчү менюдан айырмаланып, Өтүү менюсу меню пункттарыңыздын аталышын жана форма кантип иштеши керектиги жөнүндө толук маалыматты кошуу үчүн жаңы терезе ачат.

Биринчи нерсе үчүн "un titled1" текстин окугуңуз келген текстке өзгөртүп, URL кошуңуз.

Өтүү менюңузга нерселерди кошуңуз

Image
Image

Секирүү менюңузга жаңы нерсе кошуу үчүн кошууну чыкылдатыңыз. Каалаганыңызча көп нерселерди кошуңуз.

Өтүү менюсунун параметрлери

Image
Image

Сиз каалаган шилтемелердин бардыгын кошкондон кийин, тандоолоруңузду тандаңыз:

URL'дерди ичинде ачуу

Эгер сизде алкактар топтому бар болсо, шилтемелерди башка кадрда ачсаңыз болот. Же болбосо, URL жаңы терезеде же башка жерде ачылгыдай кылып, Башкы терезенин параметрин атайын максатка өзгөртсөңүз болот.

Менюнун аталышы

Менюңузга бет үчүн уникалдуу ID бериңиз. Бул скрипт туура иштеши үчүн талап кылынат. Ал ошондой эле бир формада бир нече секирүү менюсуна ээ болууга мүмкүндүк берет - аларга ар кандай аттарды бериңиз.

Өтүү баскычын менюдан кийин киргизүү

Мен муну тандагым келет, анткени кээде меню өзгөргөндө скрипт иштебей калат. Ал дагы жеткиликтүү.

URL өзгөртүлгөндөн кийин биринчи нерсени тандаңыз

Биринчи менюда "Бирөөнү тандоо" сыяктуу кеңеш болсо, муну тандаңыз. Ушуну менен ал нерсе баракта демейки бойдон кала берет.

Өтүү менюсунун дизайн көрүнүшү

Image
Image

Биринчи менюңуздагыдай эле, Dreamweaver секирүү менюңузду дизайн көрүнүшүндө демейки нерсе көрүнүп тургандай орнотот. Андан кийин ачылуучу менюну башка каалагандай өзгөртө аласыз.

Эгер сиз аны түзөтсөңүз, объекттердеги эч кандай идентификаторлорду өзгөртпөңүз; антпесе, скрипт иштебей калышы мүмкүн.

Бразердеги секирүү меню

Image
Image

Файлды сактоо жана F12 баскычын басуу баракты сиз каалаган браузерде көрсөтөт. Ал жерден бир параметрди тандап, "Баруу" баскычын чыкылдатсаңыз болот жана секирүү менюсу иштейт.

Сунушталууда: