Dreamweaver makket it maklik om dropdown menuen te meitsjen foar jo webside. Mar lykas alle HTML-foarmen kinne se in bytsje skerp wêze. Dit ynlaat sil jo troch de stappen kuierje om in drop-down menu yn Dreamweaver te meitsjen.
Dreamweaver Jump Menus
Dreamweaver 8 jout ek in wizigjen om in sprongmenu te meitsjen foar navigaasje yn jo webside. Oars as basisk drop-down menus sil dit menu eins dwaan wannear't jo ferteld binne. Jo moatte gjin JavaSkript of CGIs skriuwe om jo drop-down form te wurkjen. Dit ynlaat beskriuwt ek hoe't de wizard Dreamweaver 8 brûke sil om in sprongmenu te meitsjen.
01 of 20
Eerst meitsje it formulier
Wichtige notysje Oer HTML foarmen en Dreamweaver:
Utsein as spesjale assistinten lykas it springenmenu, Dreamweaver helpt jo net HTML-formulieren "wurk". Dêrfoar moatte jo in CGI of JavaScript hawwe. Sjoch asjebleaft myn tutorial meitsje HTML Formulieren Wurkje foar mear ynformaasje.
As jo in drop-down-menu tafoegje oan jo webside, is it earste wat jo nedich binne is in formulier om dizze te bewarjen. Yn Dreamweaver, gean nei it Insert menu en klik Formulier, kies dan "Form".
02 of 20
Formulier Displays yn ûntwerpwerjefte
Dreamweaver lit jo formulier lokaasje sjen yn 'e ûntwerpwerjefte, dus jo witte wêr jo jo eleminten foar formulier sette. Dit is wichtich, omdat drop-down menu tags net jildich binne (en sil net wurkje) bûten it formuliereljocht. As jo yn it byld sjogge, is it formulier de rote punten yn 'e ûntwerpwerjefte.
03 of 20
Kies list / menu
Drop-down-menus wurde "list" of "menu" items yn Dreamweaver neamd. Sa moatte jo ien nei jo formulier taheakje, moatte jo yn it Formuliermenu yn it menu ynfoegje en "List / Menu" kieze. Soargje derfoar dat jo rinnerke barde yn 'e reade punten fan jo formulier.
04 of 20
Special Options Window
Yn 'e Dreamweaver-opsjes is in skerm op Accessibility. Ik kieze foar Dreamweaver te sjen oan alle tagonklik eigenskippen. En dit skerm is it gefolch fan dat. Formulieren binne in plak dêr't in protte websiden yn tagonklikheid falle en troch dizze folsleine opsjes te folle binne jo drop-down menus fuortdaliks tagonkliker wurde.
05 of 20
Form tagonklikheid
De tagongsbere opsjes binne:
Etiket
Dit is de namme foar it fjild. It sil as tekst nei jo foarmen formulier sjen.
Skriuwe wat jo jo dellûk menu oproppe wolle. Dit kin in frage of in koarte ekspresje wurde dat it drop-down menu antwurdzje sil.
Styl
HTML befettet in label tag om jo formulier labels te identifisearjen nei de browser. Jo kiezen om it dellûk menu en de tekenstik mei de tag te wapjen, om it "for" attribje op it label tag te brûken om te identifisearjen hokker foarm jo it referinsjes markearje, of net de label tag hielendal brûke.
Ik leaver it gebrûk fan 'e attribút, as doe as ik it label foar guon reden ferpleatse moat, dan sil it noch altyd oan it korrekte formulierfjild oanhelle wurde.
Posysje
Jo kinne jo kaartsje foardat of nei it drop-down menu pleatse.
Access Key
Dit is de kaai dy't tagelyk mei de Alt of Option-kaaien brûkt wurde om direkt yn dat formulierfjild te kommen. Dit makket jo foarmen maklik om te brûken sûnder in mûs nedich te meitsjen. Hoe kinne jo in Access Key yn HTML ynstelle
Tabindex
Dit is de folchoarder wêryn it formulier fjild tagonklik makke wurde moat as jo it toetseboerd brûke om ljeppers fia de webside te brûken. Understanding the Tabindex
As jo jo tagongsbere opsjes aktualisearre hawwe, klik dan op OK.
06 of 20
Selektearje it Menu
As jo jo drop-down-menu sjen yn 'e ûntwerpwerjefte, dan moatte jo de ferskate eleminten oanmeitsje. Selektearje earst it dellûk menu troch te klikken op it. Dreamweaver sil in oar punktje rjochtsje om krekt it drop-down menu om sjen te litten dat jo it selektearre hawwe.
07 of 20
Menu eigenskippen
It eigenskippenmenu feroarje nei de list- / menu-eigenskippen foar dit dellûk menu. Hjir kinne jo jo menu in ID jaan (wêr 't se "selektearje" sizze), beslute as jo wolle dat it in list of in menu is, jo in stylklasse fan jo stylblêd jaan en de wearden oan de faluta jaan.
Wat is de ferskil tusken list en menu?
Dreamweaver neamt in menu-drop-down-menu, wêrtroch allinne ien seleksje kin. In "list" jout meardere karren yn 'e drop-down en kin mear as ien item heech wêze.
As jo wolle dat in drop-down menu meardere rigels is, feroarje it nei in list fan "list" en lit it fekje "seleksjes" net wiske wurde.
08 of 20
Nije list items taheakje
Om nije items oan jo menu te foegjen, klikje op de knop "Listwurden ...". Dit sil it boppeste finster iepenje. Typ yn jo itemetiket yn it earste boek. Dit is wat op 'e side werjaan sil. As jo de wearde lege, is dat ek wat yn it formulier stjoerd wurde.
09 of 20
Add More en Reorder
Klik op it plus ikoan om mear items te foegjen. As jo se yn 'e listkast werneame wolle, brûk de pylken op en del op' e rjochter.
10 of 20
Jou alle Itemswearden
As ik yn stap 8 neamde, as jo de wearde leech litte, wurdt it kaartsje stjoerd nei it formulier. Mar jo kinne jo allegear items wearden jaan - alternatyf ynformaasje nei jo formulier te stjoeren. Jo sille dit safolle brûke foar dingen as springen menus.
11 of 20
Kies in standert
Standert standert websiden om sjen te litten wêr't drop-down item earst as standert item stiet. Mar as jo wolle dat in oare selektearre is, markearje it yn it "Eartiids selektearre" fjakje yn it Eigelytsmenu.
12 of 20
Sjoch jo list yn ûntwerpwerjefte
As jo it bewurkjen fan 'e eigenskippen dien hawwe, sil Dreamweaver jo dropdown-ljepper sjen mei de standertwearde selektearre.
13 of 20
Sjoch jo list yn Code View
As jo op codewerjefte útskeakelje, kinne jo sjen dat Dreamweaver jo drop-down-menu yn foarkomt. De iennige ekstra attributen binne ien dy't wy tagonklik binne mei tagongsbere mooglikheden. De koade is allinich yndone en tige maklik te lêzen en te begripen. It stelt sels yn it selektearre = "selektearre" attribút om't ik Dreamweaver fertelde dat ik standert bin om XHTML te skriuwen.
14 of 20
Bewarje en werje yn blêder
As jo it dokumint bewarje en besykje it yn in websneuperblêd, kinne jo sjen dat jo lofts-menu lykas jo dat ferwachtsje.
15 of 20
Mar it docht neat
It menu dat wy hjirboppe makke hat, sjocht perfekt, mar it docht neat. Om dat te krijen, moatte jo in formulier aksje op 'e foarm sels opstelle, dy't in folslein oare tutorial is.
Gelokkich hat Dreamweaver in ynboude drop-down-menu-formulier dat jo fuortendaliks brûke kinne op jo side sûnder nedich te learen oer formulieren, CGIs of skript. It wurdt in sprútmenu neamd.
It Dreamweaver Jump Menu befettet in drop-down-menu mei nammen en URL's. Dan kinne jo in item yn it menu kieze en de webside sil nei dy lokaasje gean, krekt as jo klikke op in keppeling.
Gean nei it Insert menu en kieze Formulier en dan nei Menu.
16 of 20
Gean Menu-finster
Oars as it standert dellendermenu iepenet it Sprongmenu in nij finster foar jo om jo menu items te neamen en details oer hoe't it formulier wurkje moat.
Foar it earste item feroarje de tekst "untitled1" nei wat jo wolle dat it lêzen hat en in URL taheakje dy't dizze link moat gean.
17 of 20
Item tafoegje oan jo Jump Menu
Klikje op it item taheakje om in nij item te stjoeren nei jo springenmenu. As jo safolle artikels tafoegje as jo wolle.
18 of 20
Gean menuopsjes
As jo allinich keppelings tafoegje, moatte jo jo opsjes kieze:
Iepenje URLs yn
As jo in frameset hawwe, kinne jo de keppelings yn in oare frame iepenje. Of jo kinne de opsje fan haad finster feroarje nei in spesjale doel om sadat de URL iepenje sil yn 't in nij finster of oeral.
MenuName
Jou jo menu in unike ID foar de side. Dit is nedich dat it skript goed wurket. It soarget jo ek meardere sprongmenu yn ien foarm te hawwen - allinich de ferskillende nammen jaan.
Gean knop nei it menu
Ik wol it selektearje om't soms it skript net wurket as it menu feroaret. It is ek tagonkliker.
Selektearje it earste item nei URL-wiziging
Selektearje dit as jo in opsje hawwe lykas "Selektearje ien" as it earste menu item. Dit soarget derfoar dat dit item standert stiet op 'e side.
19 of 20
Gean troch Menu Design View
Krekt lykas jo earste menu, Dreamweaver stelt jo sprongmenu yn ûntwerpwerjefte mei it standert item sichtber. Jo kinne dan it drop-down menu bewurkje lykas jo in oare hawwe.
As jo dit bewurkje, soargje derfoar dat jo gjin ID's feroarje op de items, oars kin it skript net wurkje.
20 of 20
Gean Menu yn blêdwizer
It bewarjen fan de bestân en F12 sil de side yn jo foarkommende blêder sjen. Dêr kinne jo in opsje selektearje, klikke op "Go" en it springen menu wurket!