Как да създадете падащо меню в Dreamweaver

Можете да поставите етикета си преди или след падащото меню.

Ключ за достъп

Това е ключът, който може да се използва заедно с клавишите Alt или Option, за да стигнете директно до това поле на формуляр. Това прави формулярите ви много лесни за използване, без да се нуждаете от мишка.

Индекс на раздели

Това е реда, в който полето на формуляра трябва да бъде достъпно, когато използвате клавиатурата за раздел през уеб страницата.

Когато актуализирате опциите си за достъпност, кликнете върху OK.

Изберете Менюто

След като имате падащото меню, което се показва в дизайна на Dreamweaver, трябва да добавите различните елементи към него. Първо изберете падащото меню, като кликнете върху него. Dreamweaver ще постави друга пунктирана линия около само падащото меню, за да покаже, че сте я избрали.

Свойства на менюто

Менюто свойства ще се променят в списъка с имоти / менюто за това падащо меню. Там можете да дадете на вашето меню идентификатор (където се казва "select"), да решите дали искате да бъде lis или меню, да му дадете класа на стила от листа стил и да зададете стойности на падащото меню.

Каква е разликата между списъка и менюто?

Dreamweaver извиква падащо меню от менюто, което позволява само един избор. "Списъкът" позволява няколко опции в падащото меню и може да бъде с повече от един елемент висок.

Ако искате падащото меню да бъде многоредово високо, променете го на тип "списък" и не оставяйте отметката в квадратчето "Избор".

Добавяне на нови елементи в списъка

За да добавите нови елементи към менюто си, кликнете върху бутона "Списък стойности …". Това ще отвори горния прозорец. Въведете етикета си на елемент в първата клетка. Това ще се покаже на страницата. Ако оставите стойността празна, това също ще бъде изпратено във формуляра.

Добавете още и преподреждане

Кликнете върху иконата плюс, за да добавите още елементи. Ако искате да ги поръчате отново в списъка, използвайте стрелките нагоре и надолу отдясно.

Дайте стойностите на всички елементи

Както споменах в стъпка 8, ако оставите празната стойност, етикетът ще бъде изпратен във формуляра. Но можете да дадете всички ваши стойности - да изпратите алтернативна информация във Вашия формуляр. Вие ще използвате това много за неща като скачане менюта и хипервръзка.

Изберете по подразбиране

Уеб страниците по подразбиране да показват кой от тях е изброен първо като елемент по подразбиране. Ако обаче искате да изберете друг, маркирайте го в полето "Първоначално избрано" в менюто "Свойства".

Вижте списъка в изгледа на дизайна

Щом завършите редактирането на свойствата, Dreamweaver ще покаже падащия списък с избраната стойност по подразбиране.

Вижте списъка си в изгледа с кодове

Ако превключите към изглед с код, можете да видите, че Dreamweaver добавя вашето падащо меню с много чист код. Единствените допълнителни атрибути са тези, които добавихме с опции за достъпност. Кодът е вдлъбнат и много лесен за разбиране и разбиране. Той дори поставя в избрания = "избран" атрибут, защото съм казал на Dreamweaver, че по подразбиране пиша XHTML.

Запазване и преглед в браузъра

Ако запазите документа и го видите в уеб браузър, можете да видите, че падащото меню изглежда точно както бихте очаквали.

Но това не прави нищо …

Менюто, което създадохме по-горе, изглежда добре, но не прави нищо. За да го накарате да направи нещо, трябва да установите форма на действие върху самия формуляр.

За щастие Dreamweaver разполага с вграден падащ меню, който можете да използвате незабавно на сайта си, без да се налага да научавате за формуляри, CGI или скриптове. Наричано е Jump Menu.

Менюто за показване на Dreamweaver създава падащо меню с имена и URL адреси. След това можете да изберете елемент в менюто и уеб страницата ще се придвижи към това местоположение, точно както ако сте кликнали върху връзка.

Отворете менюто Вмъкване и изберете Форма и след това Меню за прескачане.

Прозорец на менюто за прескачане

За разлика от стандартното падащо меню, менюто "Прескачане" отваря нов прозорец, за да дадете име на елементите от менюто си и да добавите подробности за начина на работа на формуляра.

За първия елемент променете текста "untitled1" на това, което искате да прочетете, и добавете URL адреса, към който трябва да отидете.

Добавяне на елементи към вашето меню за скокове

Кликнете върху елемента за добавяне, за да добавите нов елемент към менюто за прескачане. Добавете толкова неща, колкото желаете.

Опции на менюто за прескачане

След като добавите всички линкове, които искате, трябва да изберете опциите си:

Отваряне на URL адресите в

Ако имате рамка, можете да отворите връзките в друг кадър. Или можете да промените опцията на Главния прозорец на специална цел, така че URL адресът да се отваря в нов прозорец или другаде.

Име на менюто

Дайте на менюто си уникален идентификационен номер за страницата. Това е необходимо, за да може скриптът да работи правилно. Той също така ви позволява да имате множество менюта за скачане в една форма - просто им дайте всички различни имена.

Поставете бутон Go след менюто

Това ми харесва, защото понякога скриптът не работи, когато се променя менюто. Тя също е по-достъпна.

Изберете Първа позиция след промяна на URL адреса

Изберете това, ако като първа опция от менюто има подкана като "Изберете един". Това ще гарантира, че този елемент остава по подразбиране на страницата.

Преглед на дизайна на менюто

Точно както при първото ви меню, Dreamweaver създава менюто ви за прескачане в изглед на дизайна, като видимият елемент по подразбиране е. След това можете да редактирате падащото меню, както бихте направили други.

Ако го редактирате, не променяйте идентификационните номера на елементите, в противен случай скриптът може да не работи.

Меню "Прескачане" в браузъра

Запазването на файла и натискането на F12 ще покаже страницата в предпочитания от Вас браузър. Там можете да изберете опция, щракнете върху "Go" и менюто за скок работи!