Какво да знаете
- Отидете на Вмъкване > Формуляр > Формуляр. Щракнете върху пунктираната червена линия на формуляра и отидете на Insert > Form > List/Menu. Изберете опции за достъпност.
- Щракнете върху менюто и изберете неговите свойства, след което изберете Списък със стойности, за да добавите нови елементи от менюто. Кликнете върху знака плюс, за да добавите още елементи.
- Добавете стойности на елементи и изберете елемент по подразбиране. За да добавите действия, отидете на Insert > Form > Jump Menu. Добавете елементи към менюто за прескачане и запазете.
Dreamweaver улеснява създаването на падащи менюта за вашия уебсайт. Но както всички HTML форми, те могат да бъдат малко трудни. Този урок ще ви преведе през стъпките за създаване на падащо меню в Dreamweaver.
Менюта за прескачане на Dreamweaver
Dreamweaver 8 също предоставя съветник за създаване на меню за прескачане за навигация във вашия уеб сайт. За разлика от основните падащи менюта, това меню ще направи нещо, когато сте готови. Няма да се налага да пишете JavaScript или CGI, за да работи вашият падащ формуляр. Този урок също обяснява как да използвате съветника на Dreamweaver 8 за създаване на меню за прескачане.
Първо създайте формуляра
С изключение на специални съветници като менюто за прескачане, Dreamweaver не ви помага да накарате HTML формулярите да "работят". За целта ви трябва CGI или JavaScript.
Когато добавяте падащо меню към вашия уеб сайт, първото нещо, от което се нуждаете, е форма, която да го обгражда. В Dreamweaver отидете в менюто Вмъкване и щракнете върху Формуляр, след което изберете „Формуляр“.
Показване на формуляри в изглед за проектиране
Dreamweaver показва местоположението на вашия формуляр визуално в изгледа за проектиране, така че да знаете къде да поставите елементите на формуляра си, тъй като етикетите на падащото меню не са валидни (и няма да работят) извън елемента на формуляра. Както можете да видите на изображението, формулярът е червената пунктирана линия в изгледа за дизайн.
Изберете списък/меню
Падащите менюта се наричат елементи "списък" или "меню" в Dreamweaver. Така че, за да добавите такъв към формуляра си, трябва да отидете в менюто Формуляр в менюто Вмъкване и да изберете „Списък/Меню“. Уверете се, че курсорът ви е в рамките на червената пунктирана линия на полето на вашия формуляр.
Прозорец със специални опции
В опциите на Dreamweaver има екран за достъпност. Вашите падащи менюта веднага ще бъдат по-достъпни от другите уебсайтове, ако попълните тези пет опции.
Достъпност на формуляра
Опциите за достъпност са:
Етикет
Полето за етикет се показва като текст до вашия елемент на формуляр. Въведете име за вашето падащо меню. Това може да бъде въпрос или кратка фраза, на която ще отговори падащото меню.
Стил
HTML включва маркер за етикети за идентифициране на вашите етикети на формуляри в уеб браузъра. Вашият избор е да обвиете падащото меню и текста на етикета с етикета, да използвате атрибута "for" на етикета на етикета, за да идентифицирате кой етикет на формуляра препраща, или изобщо да не използвате етикета на етикета. йени
Позиция
Можете да поставите своя етикет преди или след падащото меню.
Ключ за достъп
Посетителите могат да използват ключ за достъп с "Изображение" или клавишите за опции, за да стигнат директно до това поле на формуляра. Тази клавишна комбинация прави вашите формуляри много лесни за използване без мишка. alt="
Индекс на раздели
Индексът на раздели е начинът, по който потребителите трябва да осъществяват достъп до полетата на формуляра, когато използват клавиатурата за преминаване през уеб страницата с раздели.
Когато актуализирате опциите си за достъпност, щракнете върху OK.
Изберете менюто
След като се покаже вашето падащо меню в изгледа за дизайн на Dreamweaver, трябва да добавите различните елементи. Първо изберете падащото меню, като щракнете върху него. Dreamweaver ще постави още една пунктирана линия само около падащото меню, за да покаже, че сте го избрали.
Свойства на менюто
Менюто със свойства ще се промени на свойствата на списък/меню за това падащо меню. Там можете да дадете ID на менюто си (където пише „изберете“), да решите дали искате да бъде списък или меню, да му дадете клас стил от вашия лист със стилове и да присвоите стойности на падащото меню.
Каква е разликата между списък и меню?
Dreamweaver нарича падащо меню всяко падащо меню, което позволява само един избор. „Списък“позволява множество възможности за избор в падащото меню и може да бъде висок повече от един елемент.
Ако искате падащото меню да е високо на няколко реда, променете го на тип "списък" и оставете полето "селекции" без отметка.
Добавяне на нови елементи от списъка
За да добавите нови елементи към менюто си, щракнете върху бутона "Списък със стойности…", който отваря горния прозорец. След това въведете етикета на артикула си в първото поле. Ще се покаже на страницата.
Добавете още и пренаредете
Щракнете върху иконата плюс, за да добавите още елементи. Ако искате да ги пренаредите в списъчното поле, използвайте стрелките нагоре и надолу вдясно.
Дайте стойности на всички елементи
Ако оставите стойността празна, етикетът ще отиде във формуляра. Но можете да дадете стойности на всичките си артикули - за да изпратите алтернативна информация към формуляра си. Ще използвате това много за неща като менюта за прескачане и хипервръзки.
Изберете по подразбиране
Уеб страниците по подразбиране показват всеки падащ елемент, който е посочен първи като елемент по подразбиране. Но ако искате да бъде избран друг, маркирайте го в полето „Първоначално избран“в менюто Свойства.
Вижте вашия списък в изглед за проектиране
След като приключите с редактирането на свойствата, Dreamweaver ще покаже вашия падащ списък с избраната стойност по подразбиране.
Вижте своя списък в изглед на код
Ако превключите към изглед на код, можете да видите, че Dreamweaver добавя вашето падащо меню с чист код. Единствените допълнителни атрибути са опциите за достъпност. Кодът е с отстъпи и е много лесен за четене и разбиране.
Запазете и прегледайте в браузъра
Ако запишете документа и го видите в уеб браузър, можете да видите, че падащото ви меню изглежда точно както бихте очаквали.
Но не прави нищо…
Менюто, което създадохме по-горе, изглежда добре, но не прави нищо. За да го накарате да направи нещо, трябва да настроите действие на формуляра в самия формуляр.
За щастие, Dreamweaver има вградена форма с падащо меню, която можете да използвате незабавно на вашия сайт, без да е необходимо да научавате за формуляри, CGI или скриптове. Нарича се меню за прескачане.
Менюто за прескачане на Dreamweaver настройва падащо меню с имена и URL адреси. След това можете да изберете елемент от менюто и уеб страницата ще се премести на това място, точно както ако сте щракнали върху връзка.
Отидете в менюто Вмъкване и изберете Формуляр и след това Меню за прескачане.
Прозорец на менюто за прескачане
За разлика от стандартното падащо меню, менюто за прескачане отваря нов прозорец, за да наименувате вашите елементи от менюто и да добавите подробности за това как трябва да работи формулярът.
За първия елемент променете текста "un titled1" на това, което искате да се чете, и добавете URL.
Добавяне на елементи към вашето меню за прескачане
Щракнете върху елемента за добавяне, за да добавите нов елемент към менюто за прескачане. Добавете толкова елементи, колкото желаете.
Опции на менюто за прескачане
След като добавите всички връзки, които искате, трябва да изберете вашите опции:
Отваряне на URL адреси в
Ако имате набор от рамки, можете да отворите връзките в друга рамка. Или можете да промените опцията на главния прозорец на специална цел, така че URL адресът да се отваря в нов прозорец или другаде.
Име на менюто
Дайте на менюто си уникален идентификатор за страницата. Това е необходимо, за да може скриптът да работи правилно. Също така ви позволява да имате множество менюта за прескачане в една форма - дайте им различни имена.
Вмъкване на бутон Go след меню
Харесва ми да избера това, защото понякога скриптът не работи, когато менюто се промени. Освен това е по-достъпен.
Избор на първи елемент след промяна на URL адреса
Изберете това, ако имате подкана като "Изберете един" като първи елемент от менюто. Това ще гарантира, че този елемент остава по подразбиране на страницата.
Изглед на дизайна на менюто за прескачане
Точно както при първото ви меню, Dreamweaver настройва вашето меню за прескачане в изглед за проектиране с видим елемент по подразбиране. След това можете да редактирате падащото меню, както бихте направили всяко друго.
Ако го редактирате, уверете се, че не променяте ID на елементите; в противен случай скриптът може да не работи.
Меню за прескачане в браузъра
Запазването на файла и натискането на F12 ще покаже страницата в предпочитания от вас браузър. Там можете да изберете опция, да щракнете върху „Отиди“и менюто за прескачане работи.
