Dreamweaver maak dit maklik om drop-down menu's vir jou webwerf te skep. Maar soos al die HTML-vorms, kan dit 'n bietjie lastig wees. Hierdie handleiding sal u deur die stappe loop om 'n aftrekkieslys in Dreamweaver te skep.
Dreamweaver Jump Menu's
Dreamweaver 8 bied ook 'n towenaar aan om 'n springkieslys vir navigasie in jou webwerf te skep. In teenstelling met die basiese afrolkieslys, sal hierdie spyskaart eintlik iets doen as jy klaar is. Jy hoef nie JavaScript of CGI's te skryf om jou aftrekvorm te kry om te werk nie. Hierdie handleiding verduidelik ook hoe om die Dreamweaver 8-towenaar te gebruik om 'n springkieslys te skep.
01 van 20
Maak eers die vorm aan
Belangrike kennisgewing oor HTML-vorms en Dreamweaver:
Behalwe vir spesiale towenaars soos die springkieslys, help Dreamweaver jou nie om HTML-vorms "werk" te maak nie. Hiervoor benodig jy 'n CGI of JavaScript. Sien asseblief my tutoriaal Maak HTML Forms Work vir meer inligting.
As jy 'n aftrekkieslys by jou webwerf voeg, is die eerste ding wat jy nodig het 'n vorm om dit te omring. In Dreamweaver, gaan na die Invoegen menu en klik op Form, kies dan 'Form'.
02 van 20
Vormweergawes in ontwerpvertoning
Dreamweaver wys jou vorm plek visueel in die ontwerp vertoning, sodat jy weet waar om jou vorm elemente te sit. Dit is belangrik, want die keuselys-etikette is nie geldig (en sal nie werk nie) buite die vormelement. Soos u in die prentjie kan sien, is die vorm die rooi stippellyne in ontwerpbeskouing.
03 van 20
Kies Lys / Kieslys
Drop-down menu's word "lys" of "menu" items in Dreamweaver genoem. Om die een by jou vorm te voeg, moet jy in die Form-kieslys in die Invoeg-kieslys en kies 'Lys / Kieslys'. Maak seker dat jou wyser binne die rooi stippellyn van jou vormkassie is.
04 van 20
Spesiale Opsies Venster
In die Dreamweaver Opsies is daar 'n skerm op Toeganklikheid. Ek kies Dreamweaver om my alle toeganklikheidskenmerke te laat sien. En hierdie skerm is die gevolg hiervan. Vorms is 'n plek waar baie webwerwe in toeganklikheid val. Deur hierdie vyf opsies in te vul, sal u aftreklys onmiddellik meer toeganklik wees.
05 van 20
Vorm Toeganklikheid
Die toeganklikheidsopsies is:
Etiket
Dit is die naam van die veld. Dit sal as teks langs jou vormelement verskyn.
Skryf wat jy jou aftreklys wil noem. Dit kan 'n vraag of kort frase wees wat die aftreklys sal beantwoord.
styl
HTML bevat 'n etiketetiket om jou vormetikette vir die blaaier te identifiseer. U keuses is om die aftrekkieslys en die etiket teks met die merker in te voeg, om die kenmerk "vir" op die etiketetiket te gebruik om te identifiseer watter vormtiket dit verwys, of om glad nie die etiketetiket te gebruik nie.
Ek verkies om die eienskap te gebruik, aangesien as ek die etiket om een of ander rede moet skuif, sal dit steeds aan die korrekte vormveld geheg word.
posisie
U kan u etiket voor of na die keuselys plaas.
Toegangsleutel
Dit is die sleutel wat saam met die Alt of Opsie sleutels gebruik kan word om direk na die vorm veld te gaan. Dit maak jou vorms baie maklik om te gebruik sonder om 'n muis te hê. Hoe om 'n toegangsleutel in HTML op te stel
Tab Indeks
Dit is die volgorde waarin die vorm veld toeganklik moet wees wanneer u die sleutelbord gebruik om deur die webblad te blaai. Verstaan die Tabindex
As jy jou toeganklikheidsopsies opgedateer het, klik OK.
06 van 20
Kies die kieslys
Sodra u aftrekkieslys vertoon in ontwerpbeskouing, moet u die verskillende elemente byvoeg. Kies eers die aftreklys deur daarop te klik. Dreamweaver sal 'n ander stippellyn net in die aftrekkieslys plaas, om aan te toon dat jy dit gekies het.
07 van 20
Kieslys Eienskappe
Die eienskappe kieslys sal verander na die lys / kieslys eienskappe vir daardie aftrekkieslys. Daar kan jy jou spyskaart 'n ID gee (waar dit kies), besluit of jy 'n lis of 'n spyskaart wil hê, gee dit 'n stylklas uit jou stylblad en wys waardes aan die aftreklys.
Wat is die verskil tussen lys en kieslys?
Dreamweaver roep 'n keuselyslys op enige kieslys wat slegs een seleksie toelaat. 'N "lys" laat verskeie keuses toe in die afrol en kan meer as een item hoog wees.
As jy 'n aftrekkieslys wil hê om veelvuldige lyne hoog te wees, verander dit na 'n "lys" -tipe en laat die boks "keuses" ongemerk.
08 van 20
Voeg nuwe lysitems by
Om nuwe items by u spyskaart by te voeg, klik op die "Lys waardes ..." -knoppie. Dit sal die bogenoemde venster oopmaak. Tik jou itemetiket in die eerste blokkie. Dit is wat op die bladsy sal vertoon. As u die waarde leeg laat, sal dit ook in die vorm gestuur word.
09 van 20
Voeg meer by en herbestel
Klik op die plus-ikoon om meer items by te voeg. As jy dit weer in die lyskassie wil herbestel, gebruik die op- en afpyltjies regs.
10 van 20
Gee alle voorwerpe waardes
Soos ek in stap 8 genoem het, as u die waarde leeg laat, sal die etiket na die vorm gestuur word. Maar jy kan al jou items waardes gee - om alternatiewe inligting na jou vorm te stuur. U sal dit baie gebruik vir dinge soos springkieslys.
11 van 20
Kies 'n verstek
Webbladsye wat standaard is om te vertoon wat ook al die aftrekkies is, word eerste as die verstek-item gelys. Maar as jy 'n ander een wil hê, kies dit in die "Aanvanklik gekies" blokkie in die Eienskappe-kieslys.
12 van 20
Sien jou lys in ontwerpbeskouing
Sodra jy klaar is met die wysiging van die eienskappe, sal Dreamweaver jou aftreklys wys met die verstekwaarde wat gekies is.
13 van 20
Sien jou lys in Kode vertoning
As jy oorskakel na die kode vertoning, kan jy sien dat Dreamweaver jou aftrekkieslys byvoeg met baie skoon kode. Die enigste ekstra eienskappe is dié wat ons bygevoeg het met toeganklikheidsopsies. Die kode is alles ingewikkeld en baie maklik om te lees en te verstaan. Dit plaas selfs die gekose = "geselekteerde" kenmerk omdat ek Dreamweaver vertel het dat ek die standaard XHTML skryf.
14 van 20
Stoor en vertoning in blaaier
As u die dokument stoor en dit in 'n webblaaier bekyk, kan u sien dat u aftreklys lyk soos u dit sou verwag.
15 van 20
Maar dit doen niks nie
Die spyskaart wat ons hierbo geskep het, lyk goed, maar dit doen niks nie. Om dit te kan doen, moet jy 'n vormsaksie op die vorm self opstel, wat 'n heeltemal ander handleiding is.
Gelukkig het Dreamweaver 'n ingeboude keuselys vorm wat jy dadelik op jou webwerf kan gebruik sonder om te leer oor vorms, CGI's of scripting. Dit word 'n Spring-kieslys genoem.
Die Dreamweaver Jump Menu stel 'n aftreklys op met name en URL's. Dan kan jy 'n item in die spyskaart kies en die webblad sal na daardie plek beweeg, net asof jy 'n skakel gekliek het.
Gaan na die Invoegen menu en kies Form en dan Spring Menu.
16 van 20
Spring menu venster
In teenstelling met die standaard aftrekkieslys, maak die Spring-spyskaart 'n nuwe venster oop om jou kieslysitems te noem en voeg besonderhede by oor hoe die vorm moet werk.
Vir die eerste item, verander die teks "untitled1" na wat jy wil hê dit moet lees en voeg 'n URL by wat die skakel na moet gaan.
17 van 20
Voeg items by jou Spring-kieslys
Klik op die voeg item om 'n nuwe item by jou springkieslys te voeg. Voeg soveel items by as jy wil.
18 van 20
Spring kieslys opsies
Sodra jy al die skakels wat jy wil byvoeg, moet jy jou opsies kies:
Open URL's in
As u 'n rame stel het, kan u die skakels in 'n ander raam oopmaak. Of jy kan die opsie van Hoofvenster verander na 'n spesiale teiken sodat die URL in 'n nuwe venster of elders oopgemaak kan word.
Menu Naam
Gee jou spyskaart 'n unieke ID vir die bladsy. Dit word benodig sodat die skrif korrek sal werk. Dit laat jou ook verskeie sprong spyskaarte in een vorm hê - gee hulle net al die verskillende name.
Voeg Go Button After Menu
Ek verkies dit om te kies omdat die script soms nie werk wanneer die spyskaart verander nie. Dit is ook meer toeganklik.
Kies eerste item na URL verander
Kies hierdie as u 'n prompt soos 'Kies een' as die eerste kieslysitem het. Dit sal verseker dat die item standaard bly op die bladsy.
19 van 20
Spring Menu Ontwerp View
Net soos met jou eerste spyskaart, stel Dreamweaver jou springkieslys op in die ontwerpweergawe met die standaard item sigbaar. U kan dan die hangkieslys wysig soos u enige ander sou wou hê.
As jy dit verander, maak seker dat jy nie enige ID's op die items verander nie, anders kan die skrip nie werk nie.
20 van 20
Spring Menu in Browser
As jy die lêer stoor en F12 slaan, sal die bladsy in jou voorkeur blaaier vertoon word. Daar kan jy 'n opsie kies, klik "Gaan" en die springkieslys werk!