"Dreamweaver" leidžia lengvai kurti išskleidžiamus meniu jūsų svetainei. Tačiau, kaip ir visos HTML formos, jie gali būti šiek tiek sudėtingi. Šioje pamokoje jums pateksime žingsniai, kaip kurti išskleidžiamąjį meniu "Dreamweaver".
Dreamweaver Jump meniu
"Dreamweaver 8" taip pat suteikia vedlį, kad sukurtų naršymo meniu naršyti jūsų svetainėje. Skirtingai nuo pagrindinių išskleidžiamųjų meniu, šis meniu iš tikrųjų kažką padarys, kai baigsite. Norint gauti išskleidžiamą formą, jums nereikės rašyti jokių "JavaScript" ar CGI. Šiame vadovėlyje taip pat paaiškinama, kaip naudoti "Dreamweaver 8" vedlį, kad būtų sukurtas meniu "šuolis".
01 iš 20
Pirma kurkite formą
Svarbi pastaba apie HTML formas ir "Dreamweaver":
Išskyrus specialius burtininkus, pvz., Šuolių meniu, "Dreamweaver" nepadeda HTML formas "dirbti". Tam jums reikia CGI arba JavaScript. Žiūrėkite mano vadovėlį "HTML Forms Work", norėdami gauti daugiau informacijos.
Kai pridedate išskleidžiamąjį meniu į savo svetainę, pirmas dalykas, ko jums reikia - tai forma, į kurią ji supa. "Dreamweaver" eikite į "Insert" meniu ir spustelėkite "Form", tada pasirinkite "Form".
02 iš 20
Forma rodoma dizaino vaizde
"Dreamweaver" dizaino rodinyje vizualiai parodo jūsų formos vietą, taigi jūs žinote, kur įdėti savo formos elementus. Tai svarbu, nes išskleidžiamojo meniu žymos yra netinkamos (ir neveikia) už formos elemento ribų. Kaip matote paveikslėlyje, forma yra raudona punktyrinė linija dizaino rodinyje.
03 iš 20
Pasirinkite Sąrašą / Meniu
Išskleidžiami meniu "Dreamweaver" elementai vadinami "sąrašu" arba "meniu". Taigi, norėdami pridėti vieną prie savo formos, turite įeiti į meniu "Form" meniu "Įterpti" ir pasirinkti "Sąrašas / meniu". Įsitikinkite, kad jūsų žymeklis buvo formos dėžutėje raudonos punktyrinės linijos.
04 iš 20
Langas specialių parinkčių
"Dreamweaver" parinktyse yra "Pritaikymo" ekranas. Aš nusprendžiau, kad "Dreamweaver" rodo visus prieinamumo požymius. Ir šis ekranas yra to rezultatas. Blankai yra vieta, kurioje daugelis interneto svetainių patenka į prieinamą kainą, ir užpildydami šias penkias parinktis, išskleidžiamieji meniu iš karto bus labiau prieinami.
05 iš 20
Forma Prieinamumas
Prieinamumo parinktys yra:
Etiketė
Tai lauko pavadinimas. Jis bus rodomas kaip tekstas šalia jūsų formos elemento.
Rašykite, ką norite skambinti išskleidžiamajame meniu. Tai gali būti klausimas ar trumpa frazė, kurią gali atsakyti išskleidžiamasis meniu.
Stilius
HTML yra etiketės žyma, skirta identifikuoti jūsų formos etiketes naršyklėje. Jūsų pasirinkimai yra įvynioti išskleidžiamąjį meniu ir etiketės tekstą su žyma, naudoti etiketės etiketėje esantį atributą "for", kad būtų galima nustatyti, kokia formos žyma ji nurodo, arba nenaudoti etiketės žymos.
Aš norėčiau naudoti atributą, nes tada, jei dėl kokios nors priežasties man reikia perkelti etiketę, ji vis tiek bus pritvirtinta prie teisingos formos lauko.
Pozicija
Galite įdėti savo etiketę prieš arba po išskleidžiamojo meniu.
Prieigos raktas
Tai raktas, kuris gali būti naudojamas kartu su "Alt" arba "Option" klavišais, norint tiesiogiai patekti į formos lauką. Dėl to jūsų formas labai lengva naudoti be pelės. Kaip nustatyti prieigos raktą HTML
"Tab" indeksas
Tai yra tvarka, kuria turėtų būti naudojamas formos laukas, kai naudojate klaviatūrą tinklalapio skirtuke. Suprasti Tabindex
Kai atnaujinsite pasiekiamumo parinktis, spustelėkite Gerai.
06 iš 20
Pasirinkite meniu
Kai išskleidžiamajame meniu rodomas dizaino vaizdas, jums reikia pridėti įvairius elementus. Pirmiausia pasirinkite išskleidžiamąjį meniu spustelėdami jį. Dreamweaver įdės kitą taškinę liniją aplink išskleidžiamajame meniu, kad parodytumėte, jog ją pasirinkote.
07 iš 20
Meniu savybes
Nuosavų meniu bus pakeistas sąrašo / meniu ypatybėmis išskleidžiamajame meniu. Čia galite nurodyti savo meniu ID (kur jis sako "pasirinkite"), nuspręsti, ar norite, kad jis būtų lis arba meniu, pateikite stiliaus klasę iš savo stiliaus lapo ir priskirkite reikšmes išskleidžiamajame meniu.
Koks skirtumas tarp sąrašo ir meniu?
Dreamweaver skleidžia meniu išskleidžiamąjį meniu bet kurį išskleidžiamąjį meniu, leidžiantį pasirinkti tik vieną. "Sąrašas" leidžia išskleisti meniu kelis pasirinkimus ir gali būti didesnis nei vienas elementas.
Jei norite, kad išskleidžiamasis meniu būtų kelios eilutės, pakeiskite jį į "sąrašo" tipą ir palikite langelį "Pasirinkimai" nepažymėta.
08 iš 20
Pridėti naują sąrašo elementus
Norėdami pridėti naujų elementų į savo meniu, spustelėkite mygtuką "Įrašyti vertes ...". Tai atidarys pirmiau pateiktą langą. Pirmame laukelyje įveskite savo prekės etiketę. Tai bus rodoma puslapyje. Jei paliksite tuščią vertę, tai taip pat bus ir tai, kas bus išsiųsta formoje.
09 iš 20
Pridėti daugiau ir pertvarkyti
Norėdami pridėti daugiau elementų, spustelėkite pliuso piktogramą. Jei norite iš naujo užsisakyti sąrašo lauke, dešinėje naudokite rodyklę aukštyn ir žemyn.
10 iš 20
Nurodykite visų daiktų vertes
Kaip minėjau 8 veiksme, jei paliekate tuščią vertę, etiketė bus išsiųsta į formą. Bet galite pateikti visas savo vertybių reikšmes - siųsti alternatyvią informaciją į savo formą. Jūs naudosite tai daug dalykų, pavyzdžiui, šuolių meniu.
11 iš 20
Pasirinkite numatytąjį
Pagal numatytuosius tinklalapius numatytasis rodomas tas, kuris išplečiamasis elementas yra išvardytas pirmiau. Bet jei norite pasirinkti kitą, pažymėkite jį langelyje "Iš pradžių pasirinktas" meniu "Ypatybės".
12 iš 20
Žiūrėkite savo sąrašą dizaino rodinyje
Kai baigsite redaguoti savybes, "Dreamweaver" parodys jūsų išskleidžiamąjį sąrašą pasirinkus numatytąją vertę.
13 iš 20
Žiūrėkite savo sąrašą kodo rodinyje
Jei pereisite į kodo rodinį, pamatysite, kad Dreamweaver prideda išskleidžiamąjį meniu su labai švariu kodu. Vieninteliai papildomi atributai yra tie, kuriuos pridėjome su galimybėmis naudotis. Kodas yra išsibarstytas ir labai lengvas skaityti ir suprasti. Tai netgi perkelia atributą "selected =" selected ", nes" Dreamweaver "pasakė, kad pagal nutylėjimą rašau XHTML.
14 iš 20
Išsaugoti ir peržiūrėti naršyklėje
Jei išsaugosite dokumentą ir peržiūrėsite jį žiniatinklio naršyklėje, pamatysite, kad išskleidžiamasis meniu atrodo taip, kaip tikėtumėte.
15 iš 20
Bet ji nieko nedaro
Meniu, kurį sukūrėme pirmiau, atrodo gerai, bet nieko nedaro. Norint, kad tai atliktų kažką, reikia sukurti formos veiksmą formoje, kuri yra visiškai kita pamoka.
Laimei, "Dreamweaver" turi įmontuotą išskleidžiamojo meniu formą, kurią galite naudoti iš karto savo svetainėje, nereikia mokytis apie formas, CGI ar scenarijus. Tai vadinama Jump Menu.
"Dreamweaver Jump Menu" nustato išskleidžiamąjį meniu su pavadinimais ir URL. Tada galite pasirinkti elementą meniu, o tinklalapis pereis į tą vietą, tarsi jei spustelėjote nuorodą.
Eikite į "Įterpti" meniu ir pasirinkite "Form", tada "Jump" meniu.
16 iš 20
Peršokti meniu langą
Skirtingai nuo standartinio išskleidžiamojo meniu, peršokimo meniu atidaromas naujas langas, kuriame galite įvardyti meniu punktus ir pateikti išsamią informaciją apie tai, kaip ši forma turėtų veikti.
Pirmajam elementui pakeisti tekstą "untitled1" į tai, ką norite jį skaityti ir pridėti URL, į kurį turėtų būti nukreipta ši nuoroda.
17 iš 20
Pridėti elementus į savo naršymo meniu
Spustelėkite elementą pridėti, kad pridėtumėte naują elementą į savo šuolių meniu. Pridėkite tiek daug elementų, kiek norite.
18 iš 20
Jump Menu Options
Kai pridėsite visas norimas nuorodas, turėtumėte pasirinkti savo parinktis:
Atidaryti URL adresus
Jei turite rėmelių rinkinį, galite atidaryti nuorodas kitame rėmelyje. Arba galite pakeisti pagrindinio lango parinktį į specialųjį tikslą, kad URL būtų atidarytas naujame lange arba kitur.
Meniu pavadinimas
Pateikite meniu unikalų šio puslapio ID. Tai reikalinga, kad scenarijus tinkamai veiktų. Tai taip pat leidžia jums turėti kelias šokinėjimo meniu vienoje formoje - tiesiog nurodykite jiems visus skirtingus pavadinimus.
Įterpti Go mygtuką po meniu
Man patinka tai pasirinkti, nes kartais scenarijus neveikia, kai meniu pasikeičia. Tai taip pat yra labiau prieinama.
Pasirinkite pirmąjį elementą po URL keitimo
Pasirinkite šį variantą, jei pirmą meniu elementą turite kaip "Pasirinkite vieną". Tai užtikrins, kad šis elementas lieka numatytasis puslapyje.
19 iš 20
Peršokti meniu dizaino rodinys
Kaip ir pirmame meniu, "Dreamweaver" nustato jūsų šuolių meniu dizaino rodinyje su numatytuoju elementu. Tada galite redaguoti išskleidžiamąjį meniu, kaip ir kitas.
Jei ją redaguosite, įsitikinkite, kad nepakeitėte jokių elementų ID, kitaip scenarijus gali neveikti.
20 iš 20
Peršokti meniu naršyklėje
Išsaugant failą ir paspaudus F12, rodomas puslapis jūsų pageidaujamoje naršyklėje. Čia galite pasirinkti parinktį, spustelėkite "Eiti" ir šokinėja veikia!