Kif Toħloq Drop-Down Menu fi Dreamweaver

Dreamweaver jagħmilha faċli biex toħloq menu drop-down għall-websajt tiegħek. Imma bħal kull formola HTML dawn jistgħu jkunu daqsxejn delikati. Dan tutorja se timxi miegħek permezz tal-passi biex toħloq menu drop-down fil Dreamweaver.

Dreamweaver Jump Menus

Dreamweaver 8 tipprovdi wkoll wizard biex toħloq menu ta 'qbiż għan-navigazzjoni fil-websajt tiegħek. B'differenza mill-menus bażiċi ta 'drop-downs, dan il-menu fil-fatt jagħmel xi ħaġa meta tkun lest. M'għandekx għalfejn tikteb JavaScript jew CGIs biex tikseb il-formola drop-down tiegħek biex taħdem. Dan tutorja jispjega wkoll kif tuża l-wizard Dreamweaver 8 biex toħloq menu ta 'qabża.

01 ta '20

L-ewwel Oħloq il-Formola

Kif Oħloq Drop-Down Menu fi Dreamweaver Ewwel Oħloq il-Formola. Screen shot minn J Kyrnin

Nota Importanti Dwar Formoli HTML u Dreamweaver:

Ħlief għal wizards speċjali bħall-menu tal-qabża, Dreamweaver ma jgħinekx tagħmel il-formoli HTML "xogħol". Għal dan għandek bżonn CGI jew JavaScript. Jekk jogħġbok ara t-tutorial tiegħi Nagħmlu l-Formoli tal-Formoli tax-Xogħol għal aktar informazzjoni.

Meta tkun qed iżżid menu drop-down fuq is-sit tal-Web tiegħek, l-ewwel ħaġa li għandek bżonn hija forma ta 'madwarha. Fl Dreamweaver, mur fil-menu Daħħal u kklikkja Formola, imbagħad agħżel "Formola".

02 ta '20

Displays tal-Formola fid-Disinn View

Kif Oħloq Drop-Down Menu fi Dreamweaver Displays Formola fid-Disinn View. Screen shot minn J Kyrnin

Dreamweaver juri l-pożizzjoni tal-formola tiegħek viżwalment fid-dehra tad-disinn, sabiex tkun taf fejn tista 'tpoġġi l-elementi tal-formola tiegħek. Dan huwa importanti, minħabba li t-tikketti tal-menu drop-down mhumiex validi (u mhux se jaħdmu) barra l-element tal-formola. Kif tistgħu taraw fl-immaġni, il-formola hija l-linja b'linja ħamra fid-dehra tad-disinn.

03 ta '20

Agħżel Lista / Menu

Kif Oħloq Menu Drop-Down fil Dreamweaver Agħżel Lista / Menu. Screen shot minn J Kyrnin

Menus drop-down huma msejħa "lista" jew "menu" oġġetti fil Dreamweaver. Allura biex iżżid waħda mal-formola tiegħek, għandek bżonn tidħol fil-menu tal-Formola fuq il-menu Daħħal u agħżel "Lista / Menu". Kun żgur li l-cursor tiegħek kien fil-linja b'linja ħamra tal-kaxxa tal-formola tiegħek.

04 ta '20

Tieqa ta 'Għażliet Speċjali

Kif Oħloq Drop-Down Menu fi Tieqa ta 'Għażliet Speċjali Dreamweaver. Screen shot minn J Kyrnin

Fl-Għażliet Dreamweaver hemm skrin dwar l-Aċċessibilità. Nagħżel li jkolli Dreamweaver turni l-attributi kollha ta 'aċċessibilità. U dan l-iskrin huwa r-riżultat ta 'dak. Il-formoli huma post fejn ħafna siti tal-Web jaqgħu fl-aċċessibbiltà u billi jimlew dawn il-ħames għażliet il-menus drop-down tiegħek immedjatament ikunu aktar aċċessibbli.

05 ta '20

Formola Aċċessibbiltà

Kif Oħloq Menu Drop-Down fl-Aċċessibbiltà tal-Formola Dreamweaver. Screen shot minn J Kyrnin

L-għażliet ta 'aċċessibilità huma:

Tikketta

Dan huwa l-isem għall-qasam. Dan se juri bħala test ħdejn l-element tal-formola tiegħek.
Ikteb dak li trid titlob il-menu drop-down tiegħek. Din tista 'tkun kwistjoni jew frażi qasira li l-menu drop-down se jwieġeb.

Stil

HTML jinkludi tikketta ta 'tikketta biex tidentifika t-tikketti tal-formoli tiegħek lill-browser. L-għażliet tiegħek huma li tinġibed il-menu drop-down u t-test tat-tikketta bit-tikketta, biex tuża l-attribut "għal" fuq il-lametta tat-tikketta biex tidentifika liema tikketta tal-formola tirreferi għaliha jew biex ma tużax it-tikketta.
Jiena nippreferi li nuża l-attribut, kif imbagħad jekk ikolli bżonn li nimxu t-tikketta għal xi raġuni xorta waħda tkun imwaħħla mal-qasam tal-formola korretta.

Pożizzjoni

Tista 'tpoġġi t-tikketta tiegħek qabel jew wara l-menu drop-down.

Aċċess Key

Din hija ċ-ċavetta li tista 'tintuża flimkien mal-buttuni Alt jew Option biex tikseb direttament dak il-qasam tal-formola. Dan jagħmel il-forom tiegħek faċli ħafna biex tużah mingħajr ma jkollok bżonn ġurdien. Kif Issettja Ċavetta ta 'Aċċess f'HTML

Tab Index

Dan huwa l-ordni li fih għandu jiġi aċċessat il-qasam tal-formola meta tuża t-tastiera biex tab mill-paġna tal-Web. Nifhmu l-Tabindex

Meta tkun aġġorna l-għażliet ta 'aċċessibilità tiegħek, ikklikkja OK.

06 ta '20

Agħżel il-Menu

Kif Toħloq Drop-Down Menu fi Dreamweaver Agħżel il-Menu. Screen shot minn J Kyrnin

Ladarba jkollok il-menu drop-down li juri fid-disinn, ikollok bżonn iżżid l-elementi varji għaliha. L-ewwel agħżel il-menu drop-down billi tikklikkja fuqha. Dreamweaver ser ipoġġi linja ta 'punti oħra biss madwar il-menu drop-down, biex turi li int għażilt.

07 ta '20

Properties tal-Menu

Kif Oħloq Drop-Down Menu fil Dreamweaver Menu Properties. Screen shot minn J Kyrnin

Il-menu tal-proprjetajiet se jinbidel għall-proprjetajiet tal-lista / menu għal dak il-menu drop-down. Hawn tista 'tagħti ID tal-menu tiegħek (fejn tgħid "agħżel"), tiddeċiedi jekk tridx tkun lis jew menu, agħtiha klassi ta' stil mill-folja tal-istil tiegħek, u tassenja valuri għall-drop-down.

X'inhi d-Differenza bejn il-Lista u l-Menu?

Dreamweaver titlob menu drop-down menu kwalunkwe drop-down li tippermetti biss għażla waħda. "Lista" tippermetti għażliet multipli fil-drop-down u tista 'tkun aktar minn oġġett wieħed għoli.

Jekk trid li menu drop-down ikun linji multipli għoljin, ibdel lil tip ta '"lista" u ħalli l-kaxxa ta' "selezzjonijiet" mhux ikkontrollata.

08 ta '20

Żid Punti ta 'Lista Ġdida

Kif Oħloq Drop-Down Menu fi Dreamweaver Żid Oġġetti ta 'Lista Ġdida. Screen shot minn J Kyrnin

Biex iżżid oġġetti ġodda mal-menu tiegħek, ikklikkja fuq il-buttuni "List values ​​...". Dan se jiftaħ il-tieqa ta 'hawn fuq. Tip ta 'tikketta ta' l-oġġett tiegħek fl-ewwel kaxxa. Dan huwa dak li se juri fuq il-paġna. Jekk tħalli l-valur vojt, dan huwa wkoll dak li se jintbagħat fil-formola.

09 ta '20

Żid Aktar u Ikkonverti mill-Ġdid

Kif Oħloq Drop-Down Menu fi Dreamweaver Żid Aktar u Ikkonverti mill-ġdid. Screen shot minn J Kyrnin

Ikklikja fuq l-ikona plus biex iżżid aktar oġġetti. Jekk trid tirranġahom fil-kaxxa tal-lista, uża l-vleġeġ 'l fuq u' l isfel fuq il-lemin.

10 ta '20

Agħti l-Valuri kollha tal-Punti

Kif Oħloq Drop-Down Menu fi Dreamweaver Agħti l-Oġġetti kollha Valuri. Screen shot minn J Kyrnin

Kif semmejt fil-pass 8, jekk tħalli l-valur vojt, it-tikketta tintbagħat lill-formola. Imma tista 'tagħti l-valuri kollha tal-oġġetti tiegħek - biex tibgħat informazzjoni supplenti lill-formola tiegħek. Int ser tuża dan lott għal affarijiet bħal menus jaqbżu.

11 minn 20

Agħżel Default

Kif Oħloq Drop-Down Menu fi Dreamweaver Agħżel Default. Screen shot minn J Kyrnin

Il-paġni tal-Web default biex juru liema oġġett drop-down huwa elenkat l-ewwel bħala l-oġġett default. Imma jekk tixtieq waħda differenti magħżula, tenfasizzaha fil-kaxxa "Inizjalment magħżula" fuq il-menu tal-Proprjetajiet.

12 minn 20

Ara l-Lista tiegħek fid-Disinn View

Kif Toħloq Drop-Down Menu fi Dreamweaver Ara l-Lista tiegħek fid-Disinn View. Screen shot minn J Kyrnin

Ladarba tkun qed tagħmel l-editjar tal-proprjetajiet, Dreamweaver ser turi l-lista li titlaq magħha bil-valur awtomatiku magħżul.

13 ta '20

Ara l-Lista Tiegħek fil-Kodiċi

Kif Oħloq Drop Down fil Dreamweaver Ara l-Lista Tiegħek fil-View Kodiċi. Screen shot minn J Kyrnin

Jekk taqleb għall-fehma tal-kodiċi, tista 'tara li Dreamweaver iżżid il-menu drop-down tiegħek b'kodiċi nadif ħafna. L-uniċi attributi żejda huma dawk li aħna miżjuda ma 'għażliet ta' aċċessibilità. Il-kodiċi hija kollha indentata u faċli ħafna biex tinqara u tinftiehem. Hija tpoġġi wkoll fl-attribut "magħżul" magħżul għaliex għidt lill-Dreamweaver li kont default biex nikteb XHTML.

14 minn 20

Ħlief u Ara fil-Browser

Kif Oħloq Drop-Down Menu fi Dreamweaver Ħlief u Ara fil-Browser. Screen shot minn J Kyrnin

Jekk tfaddal id-dokument u tarah f'bigger tal-Web, tista 'tara li l-menu drop-down tiegħek tidher daqslikieku tistenna li.

15 ta '20

Imma Ma Jagħmel Xejn

Kif toħloq Menu Drop-Down fil Dreamweaver Iżda Ma Tagħmel Xejn. Screen shot minn J Kyrnin

Il-menu li ħloqna hawn jidher multa, imma ma tagħmel xejn. Sabiex ikollok tagħmel xi ħaġa, għandek bżonn twaqqaf azzjoni formali fuq il-formola nfisha, li hija tutorja kompletament oħra.

Fortunatament, Dreamweaver għandha formola tal-menu li tinfetaħ b'mod li tista 'tuża immedjatament fuq is-sit tiegħek mingħajr ma tkun trid titgħallem dwar forom, CGIs, jew kitba. Huwa sejjaħ Menu Mur.

Il-Dreamweaver Jump Menu tistabbilixxi menu drop-down bl-ismijiet u l-URLs. Imbagħad int tista 'tagħżel oġġett fil-menu u l-paġna tal-Web timxi għal dak il-post, bħalma kieku kellek għafast rabta.

Mur fil-menu Daħħal u agħżel il-Formola u mbagħad Mur il-Menu.

16 ta '20

Tieqa tas-Slaq Mur

Kif Oħloq Drop-Down Menu fi Tieqa tas-Sajf tal-Dreamweaver. Screen shot minn J Kyrnin

B'differenza mill-menu drop-down standard, il-menu Aqbeż jiftaħ tieqa ġdida għalik biex issemmi l-oġġetti tal-menu tiegħek u żid dettalji dwar kif il-formola għandha taħdem.

Għall-ewwel punt, ibdel it-test "mingħajr titlu1" għal dak li trid li taqra u żżid URL li dik ir-rabta għandha tmur.

17 minn 20

Żid Punti fil-Menu Mur Tiegħek

Kif Biex Oħloq Drop-Down Menu fi Dreamweaver Żid Punti għall-Mur Mur Tiegħek. Screen shot minn J Kyrnin

Ikklikkja fuq il-partita miżjuda biex iżżid oġġett ġdid fil-menu tal-qabża tiegħek. Żid bosta oġġetti kif tixtieq.

18 minn 20

Aqbeż Għażliet ta 'Menu

Kif Oħloq Menu Drop-Down fl-Għażliet tas-Suq Dreamweaver. Screen shot minn J Kyrnin

Ladarba tkun ħadt il-links kollha li trid, għandek tagħżel l-għażliet tiegħek:

Open URLs Fil

Jekk għandek frameset, tista 'tiftaħ il-links f'qafas differenti. Jew tista 'tibdel l-għażla tat-Tieqa Prinċipali għal mira speċjali hekk li l-URL ser tiftaħ fil-ġo tieqa ġdida jew x'imkien ieħor.

Isem tal-menu

Agħti l-menu tiegħek bħala ID uniku għall-paġna. Dan huwa meħtieġ sabiex l-iskrittura taħdem b'mod korrett. Jippermetti wkoll li jkollok menus multipli tal-qabża f'forma waħda - agħtihom l-ismijiet kollha differenti.

Daħħal il-buttuna Go wara l-Menu

Nixtieq nagħżel dan minħabba li kultant l-iskript ma jaħdimx meta l-menu jinbidel. Huwa wkoll aktar aċċessibbli.

Agħżel l-ewwel punt wara l-Bidla bl-URL

Agħżel dan jekk ikollok pront bħal "Agħżel wieħed" bħala l-ewwel oġġett tal-menu. Dan jassigura li dak l-oġġett jibqa 'inadempjenti fuq il-paġna.

19 ta '20

Aqbeż il-Menu Design View

Kif Oħloq Drop Down fil-Dreamweaver Jump Menu Design View. Screen shot minn J Kyrnin

L-istess bħall-ewwel menu tiegħek, Dreamweaver tistabbilixxi l-menu ta 'qabża tiegħek fid-dehra tad-disinn bl-oġġett default viżibbli. Tista 'mbagħad teditja l-menu drop-down bħal inti xi ħadd ieħor.

Jekk tbiddilha, kun żgur li ma tibdel l-ebda ID fuq l-oġġetti, inkella l-kitba ma tistax taħdem.

20 ta '20

Mur fil-Browser

Kif Oħloq Drop-Down Menu fil-Dreamweaver Jump Menu fil Browser. Screen shot minn J Kyrnin

Iffrankar tal-fajl u tolqot F12 se juri l-paġna fil-browser preferut tiegħek. Hawnhekk tista 'tagħżel għażla, ikklikkja "Mur" u l-menu jaqbad xogħlijiet!