Kaip sukurti išskleidžiamąjį meniu Dreamweaver

Turinys:

Kaip sukurti išskleidžiamąjį meniu Dreamweaver
Kaip sukurti išskleidžiamąjį meniu Dreamweaver
Anonim

Ką žinoti

  • Eiti į Įterpti > Forma > Forma. Spustelėkite punktyrinę raudoną liniją formoje ir eikite į Insert > Form > Sąrašas/Meniu. Pasirinkite pritaikymo neįgaliesiems parinktis.
  • Spustelėkite meniu ir pasirinkite jo ypatybes, tada pasirinkite Sąrašo vertes, kad pridėtumėte naujų meniu elementų. Spustelėkite pliuso ženklą, kad pridėtumėte daugiau elementų.
  • Pridėkite elementų reikšmes ir pasirinkite numatytąjį elementą. Norėdami pridėti veiksmų, eikite į Įterpti > Forma > Peršokti iš meniu. Pridėkite elementus prie Peršokimo meniu ir išsaugokite.

„Dreamweaver“leidžia lengvai sukurti svetainės išskleidžiamuosius meniu. Tačiau, kaip ir visos HTML formos, jos gali būti šiek tiek sudėtingos. Šioje mokymo programoje paaiškinsite, kaip sukurti išskleidžiamąjį meniu Dreamweaver.

Dreamweaver Jump Menus

Dreamweaver 8 taip pat suteikia vedlį, leidžiantį sukurti šuolio meniu naršymui jūsų svetainėje. Skirtingai nuo pagrindinių išskleidžiamųjų meniu, šis meniu veiks, kai baigsite. Jums nereikės rašyti JavaScript ar CGI, kad išskleidžiamoji forma veiktų. Šioje mokymo programoje taip pat paaiškinama, kaip naudoti „Dreamweaver 8“vedlį norint sukurti šuolio meniu.

Pirma, sukurkite formą

Image
Image

Išskyrus specialius vedlius, tokius kaip šuolio meniu, „Dreamweaver“nepadeda priversti HTML formų „veikti“. Tam reikia CGI arba JavaScript.

Kai į savo svetainę pridedate išskleidžiamąjį meniu, pirmiausia reikia ją supančios formos. „Dreamweaver“eikite į meniu Įterpti ir spustelėkite Forma, tada pasirinkite „Forma“.

Forma rodoma dizaino vaizde

Image
Image

Dreamweaver vizualiai parodo formos vietą dizaino rodinyje, kad žinotumėte, kur įdėti formos elementus, nes išskleidžiamojo meniu žymos negalioja (ir neveiks) už formos elemento ribų. Kaip matote paveikslėlyje, forma yra raudona punktyrinė linija dizaino rodinyje.

Pasirinkite sąrašą/meniu

Image
Image

Išskleidžiamieji meniu Dreamweaver vadinami „sąrašo“arba „meniu“elementais. Taigi, norėdami pridėti vieną prie savo formos, turite eiti į Formos meniu meniu Įterpti ir pasirinkti "Sąrašas / meniu". Įsitikinkite, kad žymeklis buvo raudonoje punktyrinėje formos laukelio linijoje.

Specialiųjų parinkčių langas

Image
Image

Dreamweaver parinktyse yra pritaikymo neįgaliesiems ekranas. Jei užpildysite šias penkias parinktis, jūsų išskleidžiamieji meniu bus iš karto lengviau pasiekiami nei kitose svetainėse.

Formos prieinamumas

Image
Image

Pritaikomumo parinktys yra šios:

Etiketė

Etiketės laukas rodomas kaip tekstas šalia formos elemento. Įveskite išskleidžiamojo meniu pavadinimą. Tai gali būti klausimas arba trumpa frazė, į kurią atsakys išskleidžiamasis meniu.

Stilius

HTML apima etiketės žymą, kad žiniatinklio naršyklėje būtų galima identifikuoti jūsų formų etiketes. Galite pasirinkti: apvynioti išskleidžiamąjį meniu ir etiketės tekstą su žyma, naudoti etiketės žymos atributą „for“, kad nustatytų, į kurią formos žymą ji nurodo, arba iš viso nenaudoti etiketės žymos.

Pozicija

Etiketę galite įdėti prieš išskleidžiamąjį meniu arba po jo.

Prieigos raktas

Lankytojai gali naudoti prieigos raktą su „Vaizdas“arba „Option“klavišais, kad patektų tiesiai į tą formos lauką. Šis spartusis klavišas leidžia labai lengvai naudoti formas be pelės. alt="

Tab Index

Skirtukų indeksas yra tai, kaip naudotojai turėtų pasiekti formos laukus, kai tinklalapyje naudoja klaviatūrą skirtukais.

Kai atnaujinsite pritaikymo neįgaliesiems parinktis, spustelėkite Gerai.

Pasirinkite meniu

Image
Image

Kai Dreamweaver dizaino rodinyje bus rodomas išskleidžiamasis meniu, turėsite pridėti įvairių elementų. Pirmiausia pasirinkite išskleidžiamąjį meniu spustelėdami jį. „Dreamweaver“aplink išskleidžiamąjį meniu įtrauks dar vieną punktyrinę liniją, kad parodytų, jog jį pasirinkote.

Meniu ypatybės

Image
Image

Ypatybių meniu pasikeis į to išskleidžiamojo meniu sąrašo / meniu ypatybes. Čia galite savo meniu suteikti ID (kur parašyta „select“), nuspręsti, ar norite, kad tai būtų sąrašas ar meniu, suteikti jam stiliaus klasę iš stiliaus lapo ir išskleidžiamajame meniu priskirti reikšmes.

Kuo skiriasi sąrašas ir meniu?

Dreamweaver meniu išskleidžiamuoju meniu vadina bet kurį išskleidžiamąjį meniu, kuriame galima pasirinkti tik vieną. „Sąrašas“leidžia pasirinkti kelis išskleidžiamajame meniu ir gali būti daugiau nei vieno elemento aukščio.

Jei norite, kad išskleidžiamasis meniu būtų kelių eilučių aukščio, pakeiskite jį į „sąrašo“tipą ir palikite nepažymėtą laukelį „Pasirinkimai“.

Pridėti naujus sąrašo elementus

Image
Image

Jei norite į savo meniu įtraukti naujų elementų, spustelėkite mygtuką „Verčių sąrašas…“, kuris atidaro aukščiau esantį langą. Tada pirmame laukelyje įveskite prekės etiketę. Jis bus rodomas puslapyje.

Pridėti daugiau ir pertvarkyti

Image
Image

Spustelėkite pliuso piktogramą, kad pridėtumėte daugiau elementų. Jei norite iš naujo juos išdėstyti sąrašo laukelyje, naudokite rodykles aukštyn ir žemyn dešinėje.

Suteikti visų elementų vertes

Image
Image

Jei paliksite reikšmę tuščią, etiketė pateks į formą. Bet jūs galite nurodyti visų elementų vertes – siųsti alternatyvią informaciją į formą. Tai dažnai naudosite kurdami, pavyzdžiui, peršokančius meniu ir hipersaitus.

Pasirinkite numatytąjį

Image
Image

Tinklalapiuose pagal nutylėjimą rodomas tas išskleidžiamojo meniu elementas, kuris pirmiausia yra nurodytas kaip numatytasis elementas. Bet jei norite, kad būtų pasirinktas kitas, pažymėkite jį ypatybių meniu laukelyje „Iš pradžių pasirinkta“.

Žr. savo sąrašą dizaino vaizde

Image
Image

Kai baigsite redaguoti ypatybes, „Dreamweaver“parodys išskleidžiamąjį sąrašą su pasirinkta numatytoji verte.

Žr. savo sąrašą kodo rodinyje

Image
Image

Jei perjungsite į kodo rodinį, pamatysite, kad „Dreamweaver“prideda jūsų išskleidžiamąjį meniu su švariu kodu. Vieninteliai papildomi atributai yra pritaikymo neįgaliesiems parinktys. Visas kodas yra įtrauktas ir labai lengvai skaitomas bei suprantamas.

Išsaugoti ir peržiūrėti naršyklėje

Image
Image

Jei išsaugosite dokumentą ir peržiūrėsite jį žiniatinklio naršyklėje, pamatysite, kad išskleidžiamasis meniu atrodo taip, kaip tikitės.

Bet tai nieko neduoda…

Image
Image

Aukščiau sukurtas meniu atrodo gerai, bet jis nieko nedaro. Jei norite, kad ji ką nors atliktų, turite nustatyti formos veiksmą pačioje formoje.

Laimei, „Dreamweaver“turi integruotą išskleidžiamojo meniu formą, kurią galite iš karto naudoti savo svetainėje, nesimokydami apie formas, CGI ar scenarijus. Jis vadinamas peršokimo meniu.

Dreamweaver Jump Menu sukuria išskleidžiamąjį meniu su pavadinimais ir URL. Tada galite pasirinkti elementą meniu ir tinklalapis bus perkeltas į tą vietą, kaip ir spustelėjus nuorodą.

Eikite į meniu Įterpti ir pasirinkite Forma, tada Peršokimo meniu.

Peršokimo meniu langas

Image
Image

Skirtingai nuo standartinio išskleidžiamojo meniu, Peršokimo meniu atidaromas naujas langas, kuriame galite pavadinti meniu elementus ir pridėti informacijos apie tai, kaip forma turėtų veikti.

Pirmojo elemento tekstą „un titled1“pakeiskite į tai, ką norite skaityti, ir pridėkite URL.

Pridėkite elementų į šuolio meniu

Image
Image

Spustelėkite pridėti elementą, kad pridėtumėte naują elementą į savo šuolio meniu. Pridėkite tiek elementų, kiek norite.

Peršokimo meniu parinktys

Image
Image

Pridėję visas norimas nuorodas, turėtumėte pasirinkti parinktis:

Atidaryti URL adresus

Jei turite rėmelių rinkinį, nuorodas galite atidaryti kitame rėmelyje. Arba galite pakeisti pagrindinio lango parinktį į specialų tikslą, kad URL būtų atidarytas naujame lange arba kitur.

Meniu pavadinimas

Suteikite savo meniu unikalų puslapio ID. Tai būtina, kad scenarijus veiktų tinkamai. Be to, vienoje formoje galite turėti kelis šuolių meniu – suteikite jiems skirtingus pavadinimus.

Įterpti mygtuką Eiti po meniu

Man patinka tai pasirinkti, nes kartais scenarijus neveikia pasikeitus meniu. Tai taip pat lengviau pasiekiama.

Pasirinkite pirmąjį elementą po URL pakeitimo

Pasirinkite tai, jei turite raginimą, pvz., „Pasirinkti vieną“, kaip pirmąjį meniu elementą. Taip bus užtikrinta, kad tas elementas puslapyje išliks numatytasis.

Peršokimo meniu dizaino vaizdas

Image
Image

Kaip ir pirmajame meniu, „Dreamweaver“nustato jūsų šuolio meniu dizaino rodinyje ir matomas numatytasis elementas. Tada galite redaguoti išskleidžiamąjį meniu kaip ir bet kurį kitą.

Jei jį redaguojate, nepakeiskite jokių elementų ID; kitu atveju scenarijus gali neveikti.

Peršokti meniu naršyklėje

Image
Image

Išsaugoję failą ir paspaudę F12, puslapis bus rodomas pageidaujamoje naršyklėje. Čia galite pasirinkti parinktį, spustelėti „Eiti“ir veiks šuolio meniu.

Rekomenduojamas: