Ce trebuie să știți
- Accesați Inserați > Formular > Formular. Faceți clic pe linia roșie punctată din formular și accesați Inserați > Form > Lista/Meniu. Alegeți opțiunile de accesibilitate.
- Faceți clic pe meniu și selectați proprietățile acestuia, apoi selectați Valori din listă pentru a adăuga elemente noi de meniu. Faceți clic pe semnul plus pentru a adăuga mai multe articole.
- Adăugați valori ale articolului și alegeți un articol prestabilit. Pentru a adăuga acțiuni, accesați Inserați > Formular > S alt meniu. Adăugați elemente în meniul Jump și salvați.
Dreamweaver facilitează crearea meniurilor drop-down pentru site-ul dvs. web. Dar, ca toate formularele HTML, pot fi puțin complicate. Acest tutorial vă va ghida prin pașii pentru crearea unui meniu drop-down în Dreamweaver.
Meniuri de s alt Dreamweaver
Dreamweaver 8 oferă, de asemenea, un expert pentru a crea un meniu de s alt pentru navigarea pe site-ul dvs. Web. Spre deosebire de meniurile derulante de bază, acest meniu va face ceva când ați terminat. Nu va trebui să scrieți JavaScript sau CGI pentru ca formularul dvs. derulant să funcționeze. Acest tutorial explică, de asemenea, cum să utilizați expertul Dreamweaver 8 pentru a crea un meniu săritor.
În primul rând, creați formularul
Cu excepția vrăjitorilor speciali, cum ar fi meniul de s alt, Dreamweaver nu vă ajută să faceți ca formularele HTML să „funcționeze”. Pentru aceasta, aveți nevoie de un CGI sau JavaScript.
Când adăugați un meniu derulant pe site-ul dvs. Web, primul lucru de care aveți nevoie este un formular care să îl înconjoare. În Dreamweaver, accesați meniul Inserare și faceți clic pe Formular, apoi alegeți „Formular”.
Afișează formular în vizualizarea design
Dreamweaver afișează vizual locația formularului în vizualizarea design, astfel încât să știți unde să puneți elementele formularului, deoarece etichetele meniului derulant nu sunt valide (și nu vor funcționa) în afara elementului formularului. După cum puteți vedea în imagine, formularul este linia punctată roșie în vizualizarea design.
Alege lista/meniu
Meniurile drop-down sunt numite elemente „listă” sau „meniu” în Dreamweaver. Deci, pentru a adăuga unul în formularul dvs., trebuie să accesați meniul Formular din meniul Inserare și să alegeți „Lista/Meniu”. Asigurați-vă că cursorul se află în linia punctată roșie a casetei formularului.
Fereastra Opțiuni speciale
În opțiunile Dreamweaver, există un ecran de accesibilitate. Meniurile dvs. derulante vor fi imediat mai accesibile decât alte site-uri web dacă completați aceste cinci opțiuni.
Accesibilitate formular
Opțiunile de accesibilitate sunt:
Etichetă
Câmpul de etichetă apare ca text lângă elementul formularului. Introduceți un nume pentru meniul dvs. vertical. Poate fi o întrebare sau o frază scurtă la care va răspunde meniul drop-down.
Stil
HTML include o etichetă de etichetă pentru a identifica etichetele formularelor dvs. în browserul web. Alegerile dvs. sunt să includeți meniul derulant și textul etichetei cu eticheta, să utilizați atributul „pentru” de pe eticheta de etichetă pentru a identifica la ce etichetă de formular face referire sau să nu utilizați eticheta de la etichetă.
Poziție
Puteți plasa eticheta înainte sau după meniul drop-down.
Cheie de acces
Vizitatorii pot folosi o cheie de acces cu tastele„Imagine” sau Opțiune pentru a ajunge direct la acel câmp de formular. Această comandă rapidă de la tastatură face formularele dvs. foarte ușor de utilizat fără mouse. alt="
Index de file
Indexul de file este modul în care utilizatorii ar trebui să acceseze câmpurile de formular atunci când folosesc tastatura pentru a trece prin pagina web.
Când v-ați actualizat opțiunile de accesibilitate, faceți clic pe OK.
Selectați meniul
Odată ce meniul derulant este afișat în vizualizarea design Dreamweaver, trebuie să adăugați diferitele elemente. Mai întâi, selectați meniul derulant făcând clic pe el. Dreamweaver va pune o altă linie punctată doar în jurul meniului derulant pentru a arăta că ați ales-o.
Proprietăți meniul
Meniul de proprietăți se va schimba în lista/proprietățile meniului pentru acel meniu drop-down. Acolo puteți da meniului un ID (unde scrie „selectați”), puteți decide dacă doriți să fie o listă sau un meniu, să îi dați o clasă de stil din foaia dvs. de stil și să atribuiți valori listei derulante.
Care este diferența dintre listă și meniu?
Dreamweaver apelează un meniu drop-down meniu orice meniu drop-down care permite doar o selecție. O „listă” permite mai multe opțiuni în meniul derulant și poate avea mai mult de un articol.
Dacă doriți ca un meniu derulant să aibă mai multe linii, schimbați-l într-un tip „listă” și lăsați caseta „selecții” nebifată.
Adăugați elemente noi în listă
Pentru a adăuga elemente noi în meniul dvs., faceți clic pe butonul „Listă valori…”, care deschide fereastra de mai sus. Apoi, introduceți eticheta articolului în prima casetă. Se va afișa pe pagină.
Adăugați mai multe și reordonați
Faceți clic pe pictograma plus pentru a adăuga mai multe articole. Dacă doriți să le reordonați în caseta cu listă, utilizați săgețile sus și jos din dreapta.
Dați valorile tuturor articolelor
Dacă lăsați valoarea necompletată, eticheta va merge în formular. Dar puteți da valori tuturor articolelor dvs. - pentru a trimite informații alternative în formularul dvs. Veți folosi acest lucru foarte des pentru lucruri precum meniuri de s alt și hyperlinking.
Alegeți o valoare prestabilită
Paginile web afișează în mod prestabilit orice element derulant este afișat primul ca element implicit. Dar dacă doriți să selectați unul diferit, evidențiați-l în caseta „Selectat inițial” din meniul Proprietăți.
Vedeți lista în vizualizarea design
După ce ați terminat de editat proprietățile, Dreamweaver va afișa lista dvs. derulantă cu valoarea implicită selectată.
Vedeți lista în vizualizarea codului
Dacă treceți la vizualizarea cod, puteți vedea că Dreamweaver adaugă meniul dvs. drop-down cu cod curat. Singurele atribute suplimentare sunt opțiunile de accesibilitate. Codul este indentat și foarte ușor de citit și de înțeles.
Salvați și vizualizați în browser
Dacă salvați documentul și îl vizualizați într-un browser web, puteți vedea că meniul dvs. derulant arată exact așa cum v-ați aștepta.
Dar nu face nimic…
Meniul creat de noi mai sus arată bine, dar nu face nimic. Pentru ca acesta să facă ceva, trebuie să configurați o acțiune de formular pe formularul în sine.
Din fericire, Dreamweaver are un meniu derulant încorporat pe care îl puteți folosi imediat pe site-ul dvs., fără a fi nevoie să aflați despre formulare, CGI-uri sau scripturi. Se numește Jump Menu.
Meniul de s alt Dreamweaver creează un meniu derulant cu nume și adrese URL. Apoi puteți alege un element din meniu, iar pagina Web se va muta în acea locație, la fel ca și cum ați fi făcut clic pe un link.
Accesați meniul Inserare și alegeți Formular și apoi Jump Menu.
S alt meniu fereastră
Spre deosebire de meniul derulant standard, meniul S alt deschide o fereastră nouă pentru a vă denumi elementele din meniu și pentru a adăuga detalii despre cum ar trebui să funcționeze formularul.
Pentru primul articol, schimbați textul „un titled1” în ceea ce doriți să citească și adăugați o adresă URL.
Adăugați articole în meniul dvs. Jump
Faceți clic pe adăugare element pentru a adăuga un nou articol în meniul dvs. de s alt. Adăugați câte articole doriți.
Opțiuni de s alt meniu
După ce ați adăugat toate linkurile dorite, ar trebui să alegeți opțiunile:
Adrese URL deschise în
Dacă aveți un set de cadre, puteți deschide linkurile într-un cadru diferit. Sau puteți schimba opțiunea ferestrei principale într-o țintă specială, astfel încât adresa URL să se deschidă într-o fereastră nouă sau în altă parte.
Numele meniului
Oferiți meniului dvs. un ID unic pentru pagină. Este necesar pentru ca scriptul să funcționeze corect. De asemenea, vă permite să aveți mai multe meniuri de acces într-o singură formă - dați-le tuturor nume diferite.
Inserați butonul Go după meniu
Îmi place să selectez acest lucru, deoarece uneori scriptul nu funcționează când meniul se schimbă. De asemenea, este mai accesibil.
Selectați primul articol după modificarea adresei URL
Selectați această opțiune dacă aveți o solicitare precum „Selectați unul” ca prim element de meniu. Acest lucru va asigura că acel element rămâne implicit pe pagină.
Vizualizare design meniu de s alt
La fel ca în cazul primului meniu, Dreamweaver vă configurează meniul de s alt în vizualizarea design, cu elementul implicit vizibil. Apoi puteți edita meniul drop-down la fel ca oricare altul.
Dacă îl editați, asigurați-vă că nu schimbați niciun ID-uri ale articolelor; în caz contrar, este posibil ca scriptul să nu funcționeze.
S alt meniu în browser
Salvarea fișierului și apăsarea F12 va afișa pagina în browserul dvs. preferat. Acolo puteți selecta o opțiune, faceți clic pe „Du-te” și meniul de s alt funcționează.
