Dreamweaver го олеснува креирањето мени за опаѓање за вашата веб-страница. Но, како и сите HTML-форми, тие можат да бидат малку незгодни. Ова упатство ќе ве води низ чекорите за креирање на опаѓачкото мени во Dreamweaver.
Dreamweaver Скок менија
Dreamweaver 8, исто така, обезбедува волшебник за создавање скок мени за навигација на вашата веб-страница. За разлика од основните мени за опаѓање, ова мени ќе всушност направи нешто кога ќе завршите. Вие нема да морате да напишете никакви JavaScript или CGIs за да ја добиете вашата форма за опаѓање. Овој водич, исто така, објаснува како да го користите Dreamweaver 8 волшебникот за да креирате скок мени.
01 од 20
Прво креирајте форма
Важна забелешка за HTML формите и Dreamweaver:
Освен специјални волшебници како скок мени, Dreamweaver не ви помага да ги направите HTML-формите "работа". За ова ви треба CGI или JavaScript. Ве молиме погледнете го мојот туторијал Изработка на HTML обрасци Работа за повеќе информации.
Кога додавате паѓачко мени на вашата веб-страница, првото нешто што ви треба е форма за да го опкружувате. Во Dreamweaver, одете во менито Вметни и кликнете Form, а потоа изберете "Форма".
02 од 20
Форма прикажува во Дизајн Прикажи
Dreamweaver визуелно ја покажува вашата видна форма во дизајнерскиот приказ, така да знаете каде да ги ставите елементите на формата. Ова е важно, бидејќи ознаките за паѓачкото мени не се валидни (и нема да работат) надвор од елементот на форма. Како што можете да видите на сликата, образецот е црвената линија со точки во дизајнерскиот приказ.
03 од 20
Изберете Листа / Мени
Менито за опаѓање се нарекуваат "листа" или "мени" во Dreamweaver. Така, за да додадете една во вашата форма, треба да отидете во менито Форма на менито Вметни и изберете "Листа / Мени". Осигурете се дека курсорот е во линијата со црвена точки во полето за формулари.
04 од 20
Прозорец со специјални опции
Во Dreamweaver Options има екран за пристапност. Избрав да го видам Dreamweaver сите атрибути за пристапност. И овој екран е резултат на тоа. Формите се место каде што многу веб-сајтови паѓаат во пристапноста и со пополнување на овие пет опции вашите паѓачки менија веднаш ќе бидат подостапни.
05 од 20
Форма достапност
Опциите за пристапност се:
Етикета
Ова е името на полето. Ќе се појави како текст покрај елементот на формата.
Напишете го она што сакате да го повикате вашето паѓачко мени. Ова може да биде прашање или кратка фраза дека паѓачкото мени ќе одговори.
Стил
HTML вклучува ознака за етикети за да ги идентификува етикетите на формата во прелистувачот. Вашите избори треба да го превртуваат паѓачкото мени и текстот на етикетата со ознаката, за да го користат атрибутот "за" на етикетата за да идентификуваат кој форма означуваат референци или да не ја користат етикетата ознака воопшто.
Претпочитам да го користам атрибутот за, бидејќи тогаш, ако треба да ја преместам етикетата поради некоја причина, сепак ќе биде прикачен на правилното поле за форма.
Позиција
Можете да поставите вашата етикета пред или по паѓачкото мени.
Пристапен клуч
Ова е клучот што може да се употреби заедно со копчињата Alt или Option за да се стигне директно до полето за форма. Ова ги прави вашите форми многу лесни за употреба без потреба од глушец. Како да поставите клуч за пристап во HTML
Индекс на картички
Ова е редоследот по кој треба да се пристапи до полето за формуларот при користење на тастатурата за да се прелистува преку веб-страницата. Разбирање на Tabindex
Кога ќе ги ажурирате опциите за пристапност, кликнете OK.
06 од 20
Одберете го Менито
Откако ќе го прикажете вашето паѓачко мени во дизајнерскиот приказ, треба да ги додадете различните елементи на него. Прво изберете го паѓачкото мени со кликнување на него. Dreamweaver ќе стави уште една точка линија само на опаѓачкото мени, за да покаже дека сте го избрале.
07 од 20
Својства на менито
Менито со својства ќе се промени во својствата на листата / менито за тоа опаѓачкото мени. Таму може да му дадете на вашето мени лична карта (каде што вели "изберете"), да одлучи дали сакате да биде лис или мени, да му дадете класа на стил од вашиот стилски лист и да доделите вредности на паѓачкото мени.
Која е разликата помеѓу списокот и менито?
Dreamweaver го повикува паѓачкото мени за мени било кое паѓачко дејство кое дозволува само еден избор. "Листата" дозволува повеќекратни избори во опаѓачкото мени и може да биде висока од една ставка.
Ако сакате опаѓачкото мени да бидат високи повеќе линии, промените го во тип "листа" и оставете го полето "selections" непроверено.
08 од 20
Додај нови ставки
За да додадете нови елементи во вашето мени, кликнете на копчето "Листа вредности ...". Ова ќе го отвори горниот прозорец. Напишете ја етикетата на вашата ставка во првото поле. Ова е она што ќе се прикаже на страната. Ако ја оставите вредноста празно, тоа е, исто така, она што ќе биде испратено во форма.
09 од 20
Додајте повеќе и преуредување
Кликнете на иконата плус за да додадете повеќе објекти. Ако сакате да ги преуредите во полето со листа, користете ги стрелките за горе и надолу десно.
10 од 20
Дајте вредности за сите предмети
Како што споменав во чекор 8, ако ја оставите вредноста празна, етикетата ќе биде испратена до формуларот. Но, можете да ги дадете сите вредности на вашите ставки - да испраќате алтернативни информации до вашата форма. Ќе го искористите ова многу за работи како менија за скокање.
11 од 20
Изберете стандардно
Веб-страницата стандардно да прикажува кое било паѓачко место е прво наведено како стандардна ставка. Но, ако сакате друг избран, означете го во полето "Иницијално избрано" во менито "Карактеристики".
12 од 20
Видете ја вашата листа во Дизајн
Откако ќе завршите со уредување на својствата, Dreamweaver ќе ја прикаже вашата паѓачка листа со стандардна вредност што е избрана.
13 од 20
Видете ја вашата листа во приказ на код
Ако се префрлите на преглед на кодот, можете да видите дека Dreamweaver додава вашиот паѓачко мени со многу чист код. Единствените дополнителни атрибути се оние кои ги додадовме со опции за пристапност. Кодот е вовлечен и многу лесен за читање и разбирање. Таа дури и го става во избраниот атрибут "избран" затоа што му кажав на Dreamweaver дека јас стандардно пишувам XHTML.
14 од 20
Зачувај и Прегледај во прелистувачот
Ако го зачувате документот и го гледате во веб-прелистувач, можете да видите дека вашето паѓачко мени изгледа исто како што би очекувале.
15 од 20
Но, тоа не прави ништо
Менито што го создадовме погоре изгледа добро, но тоа не прави ништо. Со цел да го направите нешто да направите, треба да поставите форма на акција на самата форма, што е сосема друго упатство.
За среќа, Dreamweaver има вградена форма на опаѓачкото мени што можете да ја користите веднаш на вашиот сајт, без потреба да дознаете за форми, CGIs или скриптирање. Тоа се нарекува скок мени.
Менито за скокање со Dreamweaver поставува опаѓачко мени со имиња и URL адреси. Потоа можете да изберете елемент во менито и веб-страницата ќе се премести на таа локација, исто како и ако сте кликнале со линк.
Одете во менито Вметни и изберете Форма, а потоа Префрлете мени.
16 од 20
Скокни Мени прозорец
За разлика од стандардното опаѓачкото мени, менито Скокни отвора нов прозорец за да ги именувате вашите ставки од менито и да додадете детали за тоа како треба да работи формата.
За првата ставка, сменете го текстот "untitled1" на она што сакате да го прочитате и додадете URL-адреса на таа врска.
17 од 20
Додади ги предметите во менито за скокање
Кликнете на додадете ставка за да додадете нова ставка во менито за скокање. Додајте колку што сакате.
18 од 20
Опции за мени за скокање
Откако ќе ги додадете сите линкови што ги сакате, треба да ги изберете вашите опции:
Отвори адреси во
Ако имате frameset, можете да ги отворите линковите во друга рамка. Или можете да ја промените опцијата на Главен прозорец кон специјална цел, така што URL-то ќе се отвори во нов прозорец или на друго место.
Име на менито
Дајте му на менито уникатен проект за страницата. Ова е потребно така што сценариото ќе работи правилно. Исто така, ви овозможува да имате повеќе менија за скокање во една форма - само да ги дадете сите различни имиња.
Вметнете го копчето Go по менито
Сакам да го изберете ова, бидејќи понекогаш сценариото не работи кога менито се менува. Исто така е подостапно.
Изберете Прва ставка по промена на УРЛ
Изберете го ова ако имате известување како "Избери едно" како прва ставка од менито. Ова ќе осигура дека таа ставка останува стандардна на страницата.
19 од 20
Прескокни мени Дизајн Прикажи
Исто како со првото мени, Dreamweaver го поставува вашето мени за скокање во дизајнерски приказ со стандардна ставка видлива. Потоа можете да го уредите паѓачкото мени како и вие било кое друго.
Ако го уредувате, бидете сигурни дека нема да менувате никакви ИД на предметите, инаку сценариото може да не работи.
20 од 20
Скокачко мени во прелистувач
Зачувувањето на датотеката и притискање на F12 ќе ја прикаже страницата во преферираниот прелистувач. Таму можете да изберете опција, кликнете на "Оди" и менито за скокање работи!