Dreamweaver улеснява създаването на падащи менюта за вашия уеб сайт. Но като всички HTML формуляри те могат да бъдат малко трудни. Този урок ще ви преведе през стъпките за създаване на падащо меню в Dreamweaver.
Менюта за прескачане на Dreamweaver
Dreamweaver 8 също така предоставя помощник за създаване на меню за прескачане на навигация в уеб сайта ви. За разлика от основните падащи менюта, това меню действително ще направи нещо, когато сте готови. Няма да се налага да пишете JavaScript или CGI, за да можете да работите с падащото меню. Този урок също така обяснява как да използвате съветника на Dreamweaver 8, за да създадете меню за прескачане.
01 от 20
Първо създайте формуляра
Важна бележка относно HTML формуляри и Dreamweaver:
С изключение на специални магьосници като менюто за прескачане, Dreamweaver не ви помага да правите HTML формуляри "работа". За това ви е необходима CGI или JavaScript. Моля, вижте моя урок Създаване на HTML формуляри Работете за повече информация.
Когато добавяте падащо меню към уеб сайта си, първото нещо, от което се нуждаете, е форма, която да го заобиколи. В Dreamweaver отидете в менюто Insert и кликнете върху Form, след което изберете "Form".
02 от 20
Формата се показва в изгледа на дизайна
Dreamweaver визуално визуализира вида на формата ви в дизайна, така че знаете къде да поставите елементите на формуляра си. Това е важно, защото таговете за падащи менюта не са валидни (и няма да работят) извън елемента на формуляра. Както можете да видите на изображението, формулярът е червената точкова линия в дизайна.
03 от 20
Изберете Списък / Меню
Падащите менюта се наричат елементи "списък" или "меню" в Dreamweaver. За да добавите такъв към формуляра си, трябва да влезете в менюто "Формуляр" от менюто "Вмъкване" и да изберете "Списък / Меню". Уверете се, че курсорът ви е в червената линия с пунктиране на формата ви.
04 от 20
Прозорец за специални опции
В опциите на Dreamweaver има екран за достъпност. Избирам Dreamweaver да ми покаже всички атрибути за достъпност. И този екран е резултат от това. Формулярите са място, където много уеб сайтове попадат в достъпност и като попълнят тези пет опции вашите падащи менюта веднага ще бъдат по-достъпни.
05 от 20
Формуляр Достъпност
Опциите за достъпност са:
етикет
Това е името на полето. Тя ще се покаже като текст до вашия формуляр.
Напишете какво искате да наберете от падащото меню. Това може да бъде въпрос или кратка фраза, която падащото меню ще отговори.
стил
HTML съдържа маркер за етикети, за да идентифицира етикетите на формулярите ви в браузъра. Вашият избор е да преодолеете падащото меню и текста на етикета с маркера, за да използвате атрибута "за" на етикета на етикета, за да определите кой маркер от него се отнася или изобщо да не използвате маркера на етикета.
Предпочитам да използвам атрибута, тъй като тогава, ако трябва да преместя етикета по някаква причина, той все пак ще бъде прикрепен към правилното поле на формуляра.
позиция
Можете да поставите етикета си преди или след падащото меню.
Ключ за достъп
Това е ключът, който може да се използва заедно с клавишите Alt или Option, за да стигнете директно до това поле на формуляр. Това прави формулярите ви много лесни за използване, без да се нуждаете от мишка. Как да настроите ключ за достъп в HTML
Индекс на раздели
Това е реда, в който полето за формуляр трябва да бъде достъпно, когато използвате клавиатурата за раздел през уеб страницата. Разбиране на Tabindex
Когато актуализирате опциите си за достъпност, кликнете върху OK.
06 от 20
Изберете Менюто
След като имате падащото меню, което се показва в дизайна, трябва да добавите различните елементи към него. Първо изберете падащото меню, като кликнете върху него. Dreamweaver ще постави друга пунктирана линия около само падащото меню, за да покаже, че сте я избрали.
07 от 20
Свойства на менюто
Менюто свойства ще се променят в списъка с имоти / менюто за това падащо меню. Там можете да дадете на вашето меню идентификатор (където се казва "select"), да решите дали искате да бъде lis или меню, да му дадете класа на стила от листа стил и да зададете стойности на падащото меню.
Каква е разликата между списъка и менюто?
Dreamweaver извиква падащо меню от менюто, което позволява само един избор. "Списъкът" позволява няколко опции в падащото меню и може да бъде с повече от един елемент висок.
Ако искате падащото меню да бъде многоредово високо, променете го на тип "списък" и не оставяйте отметката в квадратчето "Избор".
08 от 20
Добавяне на нови елементи в списъка
За да добавите нови елементи към менюто си, кликнете върху бутона "Списък стойности ...". Това ще отвори горния прозорец. Въведете етикета си на елемент в първата клетка. Това ще се покаже на страницата. Ако оставите стойността празна, това също ще бъде изпратено във формуляра.
09 от 20
Добавете още и преподреждане
Кликнете върху иконата плюс, за да добавите още елементи. Ако искате да ги поръчате отново в списъка, използвайте стрелките нагоре и надолу отдясно.
10 от 20
Дайте стойностите на всички елементи
Както споменах в стъпка 8, ако оставите празната стойност, етикетът ще бъде изпратен във формуляра. Но можете да дадете всички ваши стойности - да изпратите алтернативна информация във Вашия формуляр. Вие ще използвате това много за неща като скок менюта.
11 от 20
Изберете по подразбиране
Уеб страниците по подразбиране да показват кой от тях е изброен първо като елемент по подразбиране. Ако обаче искате да изберете друг, маркирайте го в полето "Първоначално избрано" в менюто "Свойства".
12 от 20
Вижте списъка в изгледа на дизайна
Щом завършите редактирането на свойствата, Dreamweaver ще покаже падащия списък с избраната стойност по подразбиране.
13 от 20
Вижте списъка си в изгледа с кодове
Ако превключите към изглед с код, можете да видите, че Dreamweaver добавя вашето падащо меню с много чист код. Единствените допълнителни атрибути са тези, които добавихме с опции за достъпност. Кодът е вдлъбнат и много лесен за разбиране и разбиране. Той дори поставя в избрания = "избран" атрибут, защото съм казал на Dreamweaver, че по подразбиране пиша XHTML.
14 от 20
Запазване и преглед в браузъра
Ако запазите документа и го видите в уеб браузър, можете да видите, че падащото меню изглежда точно както бихте очаквали.
15 от 20
Но това не прави нищо
Менюто, което създадохме по-горе, изглежда добре, но не прави нищо. За да го накарате да направи нещо, трябва да настроите формуляр за действие върху самия формуляр, което е напълно различен урок.
За щастие Dreamweaver разполага с вграден падащ меню, който можете да използвате незабавно на сайта си, без да се налага да научавате за формуляри, CGI или скриптове. Наричано е Jump Menu.
Менюто за показване на Dreamweaver създава падащо меню с имена и URL адреси. След това можете да изберете елемент в менюто и уеб страницата ще се придвижи към това местоположение, точно както ако сте кликнали върху връзка.
Отворете менюто Вмъкване и изберете Форма и след това Меню за прескачане.
16 от 20
Прозорец на менюто за прескачане
За разлика от стандартното падащо меню, менюто "Прескачане" отваря нов прозорец, за да дадете име на елементите от менюто си и да добавите подробности за начина на работа на формуляра.
За първия елемент променете текста "untitled1" на това, което искате да прочетете, и добавете URL адреса, към който трябва да отидете.
17 от 20
Добавяне на елементи към вашето меню за скокове
Кликнете върху елемента за добавяне, за да добавите нов елемент към менюто за прескачане. Добавете толкова неща, колкото желаете.
18 от 20
Опции на менюто за прескачане
След като добавите всички линкове, които искате, трябва да изберете опциите си:
Отваряне на URL адресите в
Ако имате рамка, можете да отворите връзките в друг кадър. Или можете да промените опцията на Главния прозорец на специална цел, така че URL адресът да се отваря в нов прозорец или другаде.
Име на менюто
Дайте на менюто си уникален идентификационен номер за страницата. Това е необходимо, за да може скриптът да работи правилно. Той също така ви позволява да имате множество менюта за скачане в една форма - просто им дайте всички различни имена.
Поставете бутон Go след менюто
Това ми харесва, защото понякога скриптът не работи, когато се променя менюто. Тя също е по-достъпна.
Изберете Първа позиция след промяна на URL адреса
Изберете това, ако като първа опция от менюто има подкана като "Изберете един". Това ще гарантира, че този елемент остава по подразбиране на страницата.
19 от 20
Преглед на дизайна на менюто
Точно както при първото ви меню, Dreamweaver създава менюто ви за прескачане в изглед на дизайна, като видимият елемент по подразбиране е. След това можете да редактирате падащото меню, както бихте направили други.
Ако го редактирате, не променяйте идентификационните номера на елементите, в противен случай скриптът може да не работи.
20 от 20
Меню "Прескачане" в браузъра
Запазването на файла и натискането на F12 ще покаже страницата в предпочитания от Вас браузър. Там можете да изберете опция, щракнете върху "Go" и менюто за скок работи!