Дреамвеавер олакшава креирање падајућих менија за вашу Веб локацију. Али као и сви облици ХТМЛ-а, они могу бити мало незгодни. Овај туторијал ће вас провести кроз кораке за креирање падајућег менија у Дреамвеавер-у.
Дреамвеавер Јумп Менус
Дреамвеавер 8 такође пружа чаробњака за креирање скоковог менија за навигацију на вашој веб локацији. За разлику од основних падајућих менија, овај мени ће заправо учинити нешто када завршите. Нећете морати да пишете било који ЈаваСцрипт или ЦГИ да бисте добили свој падајући образац за рад. Овај туторијал такође објашњава како да користите Дреамвеавер 8 чаробњака да бисте креирали скок мени.
01 од 20
Прво креирајте образац
Важна напомена о ХТМЛ формулама и Дреамвеавер-у:
Осим специјалних чаробњака као што је скок мени, Дреамвеавер не помаже да направите ХТМЛ обрасце "рад". За ово вам је потребан ЦГИ или ЈаваСцрипт. Погледајте мој туторијал Израда ХТМЛ образаца за више информација.
Када додате падајући мени на вашу веб локацију, прво што вам треба је облик који га окружује. У Дреамвеавер-у, идите на мени Инсерт и кликните Форм, а затим изаберите "Форм".
02 од 20
Обрасци приказани у дизајнерском приказу
Дреамвеавер визуелно приказује визуелну локацију у дизајнерском приказу, тако да знате где да ставите елементе форме. Ово је важно јер тагови падајућег менија нису важећи (и неће радити) ван елемента обрасца. Као што видите на слици, облик је црвена тачкаста линија у приказу дизајна.
03 од 20
Изаберите листу / мени
Менији у паду се називају ставке "лист" или "мену" у Дреамвеавер-у. Да бисте додали један у свој образац, потребно је да пређете у мени Образац на менију Инсерт и одаберете "Лист / Мени". Уверите се да је ваш курсор био у црвеној тачки линије поља за обрасце.
04 од 20
Прозор са посебним могућностима
У Дреамвеавер опцијама постоји екран за приступачност. Одлучио сам да ми Дреамвеавер покаже све атрибуте приступа. И овај екран је резултат тога. Обрасци су место на коме многи веб сајтови падају у приступачности и попуњавањем ових пет опција ваши падајући менији ће одмах бити приступачнији.
05 од 20
Образац Приступачност
Опције доступности су:
Етикета
Ово је име за поље. Појавит ће се као текст поред елемента за облик.
Напишите шта желите да позовете свој падајући мени. Ово може бити питање или кратка фраза коју ће падајући мени одговорити.
Стил
ХТМЛ садржи ознаку ознаке за идентификацију ознака обрасца у прегледачу. Ваши избори су да обришете падајући мени и текст ознаке са ознаком, да користите атрибу "за" на ознаци ознаке да бисте идентификовали коју форму ознаке референцира или да уопште не користите ознаку ознаке.
Више волим да користим атрибу, јер ако је потребно да преместим етикету из неког разлога, и даље ће бити додато у исправно поље форми.
Позиција
Можете поставити ознаку пре или након падајућег менија.
Тастери
Ово је кључ који се може користити заједно са Алт или опционим тастерима да бисте се директно упутили у то поље форми. То чини да се ваши форме врло лако употребљавају без потребе за мишем. Како поставити приступни кључ у ХТМЛ-у
Таб Индекс
Ово је редослед у којем треба приступити пољу форме када користите тастатуру да бисте се налазили преко Веб странице. Разумевање Табиндекса
Када сте ажурирали опције приступачности, кликните на дугме У реду.
06 од 20
Изаберите мени
Једном када имате свој падајући мени који се приказује у дизајнерском приказу, потребно је додати различите елементе. Прво одаберите падајући мени кликом на њега. Дреамвеавер ће ставити још једну тачку на само падајући мени, да покаже да сте га изабрали.
07 од 20
Својства менија
Мени својстава ће се променити у листу особина / менија за падајући мени. Тамо можете дати свој мени ИД (гдје пише "одаберите"), одлучите се да ли желите да буде лис или мени, да му дајте стилску класу из листе стилова и додијелите вриједности падајућем.
Која је разлика између листе и менија?
Дреамвеавер позива спустни мени у менију било који падајући, који дозвољава само један избор. "Списак" дозвољава више избора у падајућем и може бити више од једне ставке.
Ако желите да падајући мени буде вишеструки, промените га на тип "листе" и не остављајте поље "селекције".
08 од 20
Додајте нове ставке листе
Да бисте додали нове ставке у свој мени, кликните на дугме "Листа вриједности ...". Ово ће отворити горњи прозор. Унесите прву етикету у прву кутију. Ово ће бити приказано на страници. Ако оставите вредност празном, то ће бити и оно што ће бити послато у обрасцу.
09 од 20
Додајте још и преуредите
Кликните на икону плус да бисте додали још ставки. Ако желите да их поново наручите у листи, користите стрелице горе и доле на десној страни.
10 од 20
Дајте вриједности свих ставки
Као што сам споменуо у 8. кораку, ако оставите вредност празном, етикета ће бити послата на образац. Али можете дати све своје вриједности вриједности - да пошаљете алтернативне информације свом обрасцу. Ово ћете пуно користити за ствари попут менија за скок.
11 од 20
Изаберите подразумевану вредност
Веб странице које подразумевају приказивање без обзира на то која је падајућа ставка, прво су наведена као подразумевана ставка. Али ако желите другачије изабрати, означите је у пољу "Инитиалли селецтед" у менију Пропертиес.
12 од 20
Погледајте своју листу у прегледу дизајна
Када завршите са уређивањем својстава, Дреамвеавер ће приказати падајућу листу са подразумеваном вриједношћу која је изабрана.
13 од 20
Погледајте своју листу у приказу кода
Ако пређете на приказ кода, можете видети да Дреамвеавер додаје ваш падајући мени са веома чистим кодом. Једини додатни атрибути су они који смо додали са опцијама приступачности. Код је све раздвојен и врло лако читљив и разумљив. Чак и ставља изабрани = "изабрани" атрибут јер сам рекао Дреамвеавер-у да подразумевам писање КСХТМЛ-а.
14 од 20
Сачувај и прегледај у прегледачу
Ако сачувате документ и погледате га у Веб прегледачу, можете видети да ваш падајући мени изгледа баш као што бисте очекивали.
15 од 20
Али не ради ништа
Мени који смо направили изнад изгледа добро, али не чини ништа. Да бисте је нешто учинили, потребно је да поставите акциону акцију на саму форму, што је потпуно други туторијал.
Срећом, Дреамвеавер има уграђену форму падајућег менија коју можете одмах користити на својој веб локацији, без потребе за учењем о облицима, ЦГИ-у или скрипти. Зове се Јумп Мену.
Дреамвеавер Јумп мени поставља падајући мени са именима и УРЛ-има. Тада можете одабрати ставку у менију и Веб страница ће се преселити на ту локацију, баш као ако сте кликнули на везу.
Идите у мени Инсерт и одаберите Форм, а затим одаберите Јумп Мену.
16 од 20
Јумп Мену Виндов
За разлику од стандардног падајућег менија, мени Јумп отвара нови прозор за именовање ставки менија и додавање детаља о томе како формулар треба да ради.
За прву ставку, промените текст "унтитлед1" на оно што желите да прочита и додате УРЛ адресу на коју треба повезати.
17 од 20
Додајте ставке у свој скок мени
Кликните на додати ставку да бисте додали нову ставку у свој скок мени. Додајте што више ставки колико желите.
18 од 20
Опције менија скокова
Када додате све жељене линије, требало би да изаберете своје опције:
Отвори отворене УРЛ адресе
Ако имате фрамеесет, можете да отворите линкове у другом оквиру. Или можете да промените опцију Маин Виндов-а на посебан циљ тако да се УРЛ отвори у новом прозору или другде.
Име менија
Дајте вашем менију јединствени ИД за страницу. Ово је потребно тако да скрипта исправно ради. Такође вам омогућава да имате више менија за скок у једном облику - само им дајте сва различита имена.
Уметните дугме Го након менија
Волим ово да изаберем јер понекад скрипта не ради када се мени мења. Такође је приступачнија.
Изаберите прву ставку након промене УРЛ-а
Одаберите ово ако имате промпт као "Изабери један" као прву ставку менија. Ово ће осигурати да та ставка остаје подразумевана на страници.
19 од 20
Јумп Мену Десигн Виев
Као у првом менију, Дреамвеавер поставља свој скок мени у дизајнерском приказу са подразумеваним елементом видљивим. Тада можете уредити падајући мени као и било који други.
Ако га уносите, обавезно не мијењајте било које ИД-ове на ставке, иначе скрипта можда неће успјети.
20 од 20
Јумп Мену у Бровсер
Чување датотеке и ударање Ф12 ће приказати страницу у вашем омиљеном прегледачу. Тамо можете одабрати опцију, кликнути на "Го", а мени за скокове ради!