Kako ustvariti spustni meni v Dreamweaverju

Kazalo:

Kako ustvariti spustni meni v Dreamweaverju
Kako ustvariti spustni meni v Dreamweaverju
Anonim

Kaj morate vedeti

  • Pojdi na Insert > Form > Form. Kliknite pikčasto rdečo črto na obrazcu in pojdite na Insert > Form > List/Menu. Izberite možnosti dostopnosti.
  • Kliknite meni in izberite njegove lastnosti, nato izberite Seznam vrednosti, da dodate nove elemente menija. Kliknite znak plus, da dodate več elementov.
  • Dodajte vrednosti elementov in izberite privzeti element. Če želite dodati dejanja, pojdite na Insert > Form > Jump Menu. Dodajte elemente v skočni meni in shranite.

Dreamweaver olajša ustvarjanje spustnih menijev za vaše spletno mesto. Vendar so lahko kot vsi obrazci HTML nekoliko zapleteni. Ta vadnica vas bo vodila skozi korake za ustvarjanje spustnega menija v programu Dreamweaver.

Skočni meniji Dreamweaver

Dreamweaver 8 ponuja tudi čarovnika za ustvarjanje skočnega menija za krmarjenje po vašem spletnem mestu. Za razliko od osnovnih spustnih menijev bo ta meni nekaj naredil, ko boste končali. Za delovanje spustnega obrazca vam ne bo treba pisati nobenega JavaScripta ali CGI-ja. V tej vadnici je razloženo tudi, kako uporabiti čarovnika Dreamweaver 8 za ustvarjanje skočnega menija.

Najprej ustvarite obrazec

Image
Image

Razen posebnih čarovnikov, kot je skočni meni, vam Dreamweaver ne pomaga, da obrazci HTML "delujejo". Za to potrebujete CGI ali JavaScript.

Ko svojemu spletnemu mestu dodajate spustni meni, je prva stvar, ki jo potrebujete, obrazec, ki ga obdaja. V Dreamweaverju pojdite v meni Vstavi in kliknite Obrazec, nato izberite »Obrazec«.

Prikazi obrazcev v pogledu načrta

Image
Image

Dreamweaver vizualno prikaže vašo lokacijo obrazca v pogledu načrtovanja, tako da veste, kam postaviti elemente obrazca, ker oznake spustnega menija niso veljavne (in ne bodo delovale) zunaj elementa obrazca. Kot lahko vidite na sliki, je obrazec rdeča pikčasta črta v pogledu oblikovanja.

Izberi seznam/meni

Image
Image

Spustni meniji se v Dreamweaverju imenujejo elementi "seznama" ali "menija". Če ga torej želite dodati svojemu obrazcu, morate iti v meni Obrazec v meniju Vstavi in izbrati »Seznam/meni«. Prepričajte se, da je vaš kazalec znotraj rdeče pikčaste črte vašega obrazca.

Okno s posebnimi možnostmi

Image
Image

V možnostih Dreamweaverja je zaslon Dostopnost. Vaši spustni meniji bodo takoj lažje dostopni kot druga spletna mesta, če izpolnite teh pet možnosti.

Dostopnost do obrazca

Image
Image

Možnosti dostopnosti so:

Oznaka

Polje oznake se prikaže kot besedilo poleg vašega elementa obrazca. Vnesite ime za spustni meni. To je lahko vprašanje ali kratka fraza, na katero bo odgovoril spustni meni.

Slog

HTML vključuje oznako oznake za prepoznavanje oznak vaših obrazcev v spletnem brskalniku. Vaše izbire so, da spustni meni in besedilo oznake obdate z oznako, uporabite atribut »za« na oznaki oznake, da ugotovite, na katero oznako obrazca se sklicuje, ali da oznake oznake sploh ne uporabite.

Položaj

Svojo oznako lahko postavite pred ali za spustnim menijem.

Ključ za dostop

Obiskovalci lahko uporabijo tipko za dostop s tipko "Slika" ali tipko Možnosti, da pridejo neposredno do tega polja obrazca. S to bližnjico na tipkovnici so vaši obrazci zelo enostavni za uporabo brez miške. alt="

Kazalo zavihkov

Kazalo zavihkov je način, kako naj uporabniki dostopajo do polj obrazca, ko uporabljajo tipkovnico za tabulatorje po spletni strani.

Ko posodobite svoje možnosti dostopnosti, kliknite V redu.

Izberite meni

Image
Image

Ko se prikaže spustni meni v pogledu oblikovanja Dreamweaverja, morate dodati različne elemente. Najprej izberite spustni meni s klikom nanj. Dreamweaver bo okoli spustnega menija postavil še eno pikčasto črto, da pokaže, da ste ga izbrali.

Lastnosti menija

Image
Image

Meni lastnosti se bo spremenil v lastnosti seznama/menija za ta spustni meni. Tam lahko svojemu meniju dodelite ID (kjer piše "izberi"), se odločite, ali želite, da je seznam ali meni, mu dodelite slogovni razred iz vaše slogovne tabele in dodelite vrednosti spustnemu meniju.

Kakšna je razlika med seznamom in menijem?

Dreamweaver pokliče spustni meni katerega koli spustnega menija, ki omogoča samo en izbor. "Seznam" omogoča več izbir v spustnem meniju in je lahko visok več kot en element.

Če želite, da je spustni meni visok več vrstic, ga spremenite v vrsto "seznam" in pustite polje "izbire" nepotrjeno.

Dodaj nove elemente seznama

Image
Image

Če želite v svoj meni dodati nove elemente, kliknite na gumb "Seznam vrednosti…", ki odpre zgornje okno. Nato v prvo polje vnesite oznako artikla. Prikazalo se bo na strani.

Dodaj več in prerazporedi

Image
Image

Kliknite ikono plus, da dodate več elementov. Če jih želite prerazporediti v polju s seznamom, uporabite puščici gor in dol na desni.

Podajte vrednosti vsem elementom

Image
Image

Če pustite vrednost prazno, bo oznaka šla v obrazec. Vsem svojim elementom pa lahko dodelite vrednosti – da na svoj obrazec pošljete nadomestne informacije. To boste veliko uporabljali za stvari, kot so skočni meniji in hiperpovezave.

Izberite privzeto

Image
Image

Spletne strani privzeto prikažejo tisti spustni element, ki je prvi naveden kot privzeti element. Če pa želite izbrati drugo, jo označite v polju »Prvotno izbrano« v meniju Lastnosti.

Oglejte si svoj seznam v pogledu oblikovanja

Image
Image

Ko končate z urejanjem lastnosti, bo Dreamweaver prikazal vaš spustni seznam z izbrano privzeto vrednostjo.

Oglejte si svoj seznam v pogledu kode

Image
Image

Če preklopite na pogled kode, lahko vidite, da Dreamweaver doda vaš spustni meni s čisto kodo. Edini dodatni atributi so možnosti dostopnosti. Koda je vsa zamaknjena in zelo enostavna za branje in razumevanje.

Shrani in si oglej v brskalniku

Image
Image

Če shranite dokument in si ga ogledate v spletnem brskalniku, lahko vidite, da je vaš spustni meni videti tako, kot bi pričakovali.

Ampak ne naredi ničesar…

Image
Image

Meni, ki smo ga ustvarili zgoraj, je videti v redu, vendar ne naredi ničesar. Če želite, da nekaj naredi, morate nastaviti dejanje obrazca na samem obrazcu.

Na srečo ima Dreamweaver vgrajen obrazec s spustnim menijem, ki ga lahko takoj uporabite na svojem spletnem mestu, ne da bi se morali učiti o obrazcih, CGI-jih ali skriptih. Imenuje se skočni meni.

Skočni meni Dreamweaver nastavi spustni meni z imeni in URL-ji. Nato lahko izberete element v meniju in spletna stran se bo premaknila na to mesto, tako kot če bi kliknili povezavo.

Pojdite v meni Vstavi in izberite Obrazec ter nato Skočni meni.

Okno skočnega menija

Image
Image

Za razliko od standardnega spustnega menija meni Skok odpre novo okno, v katerem lahko poimenujete elemente menija in dodate podrobnosti o tem, kako naj obrazec deluje.

Za prvi element spremenite besedilo "un titled1" v tisto, kar želite, da se prebere, in dodajte URL.

Dodajte elemente v svoj skočni meni

Image
Image

Kliknite na dodaj element, da dodate nov element v svoj skokni meni. Dodajte toliko elementov, kot želite.

Možnosti skočnega menija

Image
Image

Ko dodate vse želene povezave, izberite svoje možnosti:

Odpri URL-je v

Če imate nabor okvirjev, lahko odprete povezave v drugem okvirju. Lahko pa spremenite možnost glavnega okna na poseben cilj, tako da se bo URL odprl v novem oknu ali drugje.

Ime menija

Dajte svojemu meniju edinstven ID za stran. Potreben je za pravilno delovanje skripta. Prav tako vam omogoča, da imate več skočnih menijev v eni obliki – dajte jim različna imena.

Vstavi gumb Go za meni

Rad bi izbral to, ker včasih skript ne deluje, ko se spremeni meni. Je tudi bolj dostopen.

Izberi prvi element po spremembi URL-ja

Izberite to, če imate kot prvi element menija poziv, kot je »Izberi enega«. To bo zagotovilo, da ta element ostane privzet na strani.

Pogled oblikovanja skočnega menija

Image
Image

Tako kot pri vašem prvem meniju, Dreamweaver nastavi vaš skočni meni v pogledu načrtovanja z vidnim privzetim elementom. Nato lahko uredite spustni meni kot vse druge.

Če ga urejate, se prepričajte, da ne spremenite nobenega ID-ja elementov; sicer skript morda ne bo deloval.

Skočni meni v brskalniku

Image
Image

Če shranite datoteko in pritisnete F12, se stran prikaže v vašem priljubljenem brskalniku. Tam lahko izberete možnost, kliknete »Pojdi« in skočni meni deluje.

Priporočena: