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 ёсць экран на даступнасці. Я выбіраю, каб Dreamweaver паказаць мне ўсе атрыбуты даступнасці. І гэты экран з'яўляецца вынікам гэтага. Формы з'яўляюцца месцам, дзе многія вэб-сайты падаюць у даступнасці і запоўніўшы гэтыя пяці варыянтаў вашага выпадальнага меню адразу ж стане больш даступным.
05 з 20
форма Даступнасць
У параметрах даступнасці з'яўляюцца:
этыкетка
Гэтае імя для поля. Ён будзе адлюстроўвацца як тэкст побач з вашай формай элемента.
Напішыце, што вы хочаце, каб звярнуць вашу выпадальнае меню. Гэта можа быць пытанне або кароткай фразай, якая будзе адказваць выпадальнае меню.
стыль
HTML змяшчае тэг пазнакі для ідэнтыфікацыі вашай формы этыкеткі ў браўзэр. Ваш выбар, каб абгарнуць ў расчыняецца меню і тэкст пазнакі з тэгам, каб выкарыстоўваць «для» атрыбут тэга этыкеткі, каб вызначыць, якую форму ён спасылаецца тэг, ці не выкарыстоўваць маркіруецца на ўсіх.
Я аддаю перавагу выкарыстоўваць для атрыбуту, а затым, калі трэба перамясціць ярлык для нейкай прычыны ён усё роўна будзе прымацаваны да правільнага полі формы.
становішча
Вы можаце размясціць свой ярлык да або пасля таго, як у які расчыняецца меню.
ключ доступу
Гэта ключ, які можа быць выкарыстаны разам з Alt або Option клавіш, каб атрымаць непасрэдна ў гэтай форме поля. Гэта робіць вашыя формы вельмі простыя ў выкарыстанні, не маючы патрэбы мышшу. Як усталяваць ключ доступу ў HTML
індэкс Tab
Гэта парадак, у якім поле формы павінна быць даступна пры выкарыстанні клавіятуры на ўкладку праз вэб-старонку. разуменне TabIndex
Калі вы абнавілі параметры даступнасці, націсніце кнопку OK.
06 з 20
выберыце Меню
Калі ў вас ёсць выпадальнае меню адлюстравання ў рэжыме канструктара, вам трэба дадаць розныя элементы да яго. Спачатку выберыце ў расчыняецца меню, націснуўшы на яе. Dreamweaver змесціць іншы пункцір вакол толькі ў расчыняецца меню, каб паказаць, што вы абралі яго.
07 з 20
ўласцівасці меню
Меню уласцівасцяў зменіцца ва ўласцівасцях спісу / меню для гэтага ў расчыняецца меню. Там вы можаце даць меню ідэнтыфікатар (дзе ён кажа: "абраць"), вырашыць, калі вы хочаце, каб гэта было лісоў або меню, даць яму клас стылю ад вашага стыляў, і прысвоіць значэння ў расчыняецца спісе.
У чым розніца паміж спісам і меню?
Dreamweaver выклікае меню выпадальнага меню любога расчыняюцца, што дазваляе толькі адзін выбар. А «спіс» дазваляе выкарыстоўваць некалькі варыянтаў у расчыняецца спісе і можа быць больш чым адзін элемент высокімі.
Калі вы хочаце, выпадальнае меню на высокім узроўні некалькі радкоў, змяніць яго тып «спіс» і пакінуць «Вылучаныя налады» сцяжок зняты.
08 з 20
Дадаць складнікі спісаў
Для дадання новых элементаў у меню, націсніце на «спіс значэнняў ...» кнопку. Адкрыецца акно вышэй. Увядзіце ў подпісы элемента ў першым акне. Гэта тое, што будзе адлюстроўвацца на гэтай старонцы. Калі пакінуць значэнне пустым, то ёсць таксама тое, што будзе паслана ў форме.
09 з 20
Дадаць яшчэ і Переупорядочить
Націсніце на абразок плюс, каб дадаць больш дэталяў. Калі вы хочаце, каб змяніць парадак іх у спісе, выкарыстоўвайце стрэлкі уверх і ўніз справа.
10 з 20
Дайце Усе дэталі значэння
Як я ўжо згадваў у кроку 8, калі пакінуць значэнне пустым, пазнака будзе адпраўлена ў форму. Але вы можаце даць усе свае рэчы значэння - адправіць альтэрнатыўную інфармацыю ў форму. Вы будзеце выкарыстоўваць гэта шмат для такіх рэчаў, як меню пераходу.
11 з 20
Выберыце Па змаўчанні
Вэб-старонка па змаўчанні для адлюстравання ў залежнасці ад таго выпадальнага пункта ў спісе першага ў якасці элемента па змаўчанні. Але калі вы хочаце іншую выбраную, трэба паставіць яго ў «Першапачаткова абранае» у меню Properties.
12 з 20
Прагляд спісу ў рэжыме канструктара
Пасля таго, як вы скончыце рэдагаванне уласцівасцяў, Dreamweaver пакажа выпадальны спіс са значэннем па змаўчанні абрана.
13 з 20
См свой спіс у Code View
Пры пераключэнні ў рэжым прагляду кода, вы можаце ўбачыць, што Dreamweaver дадае ваша выпадальнае меню ў вельмі чыстым кодзе. Адзіныя дадатковыя атрыбуты з'яўляюцца тыя, якія мы дадалі з варыянтамі даступнасці. Код ўсе водступы і вельмі лёгка чытаць і разумець. Ён нават ставіць ў абраным = «абраны» атрыбут, таму што я сказаў, што я Dreamweaver па змаўчанні для напісання XHTML.
14 з 20
Захаванне і прагляд у браўзэры
Калі вы захаваеце дакумент і яго прагляду ў вэб-браўзэры, вы можаце ўбачыць, што ваша выпадальнае меню выглядае сапраўды гэтак жа, як і варта было чакаць яго.
15 з 20
Але гэта нічога не робіць
Меню мы стварылі вышэй выглядае нармальна, але нічога не робіць. Для таго, каб прымусіць яго зрабіць нешта, што вам трэба наладзіць дзеянне формы на самой форме, якая з'яўляецца цалкам іншым падручнікам.
На шчасце, Dreamweaver мае убудаваны ў форме расчыняецца меню, якое можна выкарыстоўваць адразу ж на сайце, без неабходнасці, каб даведацца пра формы, CGIs або сцэнарыяў. Гэта называецца скачок меню.
Меню Dreamweaver Перайсці стварае выпадальнае меню з імёнамі і URL. Затым вы можаце выбраць пункт у меню і вэб-старонка будзе рухацца да гэтага месца, гэтак жа, як калі б вы націснулі на спасылку.
Перайдзіце ў меню Устаўка і выбраць форму, а затым Перайсці меню.
16 з 20
Акно меню Перайсці
У адрозненні ад стандартнага расчыняецца меню, меню Перайсці адкрывае новае акно для вас назваць свае пункты меню і дадаць дэталі аб тым, як форма павінна працаваць.
Для першага элемента, зменіце тэкст «Untitled1» да таго, што вы хочаце, каб прачытаць і дадаць URL, што гэтая спасылка павінна пайсці.
17 з 20
Даданне элементаў у меню Перайсці
Націсніце на пункт Дадаць, каб дадаць новы пункт у меню пераходу. Дадайце столькі элементаў, як вы хочаце.
18 з 20
Перайсці Параметры меню
Пасля таго, як вы дадалі ўсе спасылкі, якія вы хочаце, вы павінны выбраць варыянты:
Адкрытыя URL-адрас У
Калі ў вас ёсць набор фрэймаў, вы можаце адкрыць спасылкі ў іншым фрэйме. Ці вы можаце змяніць параметр галоўнага акна ў спецыяльную мішэнь, так што URL будзе адкрыты на ў новым акне або ў іншым месцы.
Назва меню
Дайце меню унікальны ідэнтыфікатар старонкі. Гэта неабходна для таго, што скрыпт будзе працаваць карэктна. Яна таксама дазваляе мець некалькі меню скачка ў адной форме - проста даць ім усё розныя імёны.
Уставіць Go Button Пасля меню
Я хацеў, каб абраць гэта, таму што часам скрыпт не працуе, калі змены ў меню. Акрамя таго, больш даступным.
Выберыце першы пункт Пасля URL Змяніць
Выберыце гэты параметр, калі ў вас ёсць падказка, як «абярыце адзін» ў якасці першага пункта меню. Гэта гарантуе, што гэты пункт застаецца па змаўчанні на гэтай старонцы.
19 з 20
Перайсці Дызайн меню View
Гэтак жа, як з першым меню, Dreamweaver ўсталёўвае ваша меню пераходу ў рэжыме канструктара з пунктам па змаўчанні бачнага. Пасля гэтага вы можаце рэдагаваць выпадальнае меню, як і любыя іншыя.
Калі вы зменіце яго, пераканайцеся, што не змяняць якія-небудзь ідэнтыфікатары па пунктах, у адваротным выпадку скрыпт можа не працаваць.
20 з 20
Перайсці меню ў браўзэры
Захаванне файла і націснуць F12 пакажа старонку ў вашым любімым браўзэры. Там вы можаце выбраць опцыю, націсніце кнопку «Go» і працуе меню скакаць!