Dreamweaver facilitează crearea meniurilor drop-down pentru site-ul dvs. Web. Dar, la fel ca toate formele HTML, acestea pot fi un pic complicate. Acest tutorial vă va ajuta să parcurgeți pașii pentru crearea unui meniu drop-down în Dreamweaver.
Dreamweaver Jump Menus
Dreamweaver 8 oferă, de asemenea, un expert pentru a crea un meniu de navigare pe site-ul dvs. Web. Spre deosebire de meniurile derulante de bază, acest meniu va face efectiv ceva când ați terminat. Nu va trebui să scrieți niciun JavaScript sau CGI pentru a obține formularul drop-down pentru a funcționa. Acest tutorial explică și modul de utilizare a expertului Dreamweaver 8 pentru a crea un meniu de salt.
01 din 20
Mai întâi creați formularul
Notă importantă despre Formularele HTML și Dreamweaver:
Cu excepția vrăjitorilor speciali precum meniul de salt, Dreamweaver nu vă ajută să creați formulare HTML "de lucru". Pentru aceasta aveți nevoie de CGI sau JavaScript. Consultați tutorialul meu Efectuarea formularului HTML Formularul de lucru pentru mai multe informații.
Când adăugați un meniu drop-down pe site-ul dvs. Web, primul lucru de care aveți nevoie este un formular pentru al înconjura. În Dreamweaver, accesați meniul Inserare și faceți clic pe Formă, apoi alegeți "Formă".
02 din 20
Formă Afișează în Vizualizare Design
Dreamweaver afișează vizibil forma locației dvs. în vizualizarea de proiectare, astfel încât să știți unde să plasați elementele formularului. Acest lucru este important, deoarece etichetele drop-down din meniu nu sunt valide (și nu vor funcționa) în afara elementului de formular. După cum puteți vedea în imagine, formularul este linia roșie punctată în vizualizarea de proiectare.
03 din 20
Alegeți Listă / Meniu
Meniurile derulante se numesc elemente "list" sau "meniu" din Dreamweaver. Deci, pentru a adăuga unul în formularul dvs., trebuie să intrați în meniul Form din meniul Insert și să alegeți "List / Menu". Asigurați-vă că cursorul a fost în linia punctată cu roșu a casetei de formular.
04 din 20
Fereastră opțională specială
În opțiunile Dreamweaver există un ecran privind accesibilitatea. Am ales ca Dreamweaver să-mi arate toate atributele de accesibilitate. Și acest ecran este rezultatul aia. Formularele sunt un loc în care multe site-uri Web scad în accesibilitate și completând aceste cinci opțiuni, meniurile drop-down vor fi imediat accesibile.
05 din 20
Accesibilitatea formularului
Opțiunile de accesibilitate sunt:
Eticheta
Acesta este numele câmpului. Acesta va apărea ca text alături de elementul dvs. de formă.
Scrieți ceea ce doriți să apelați meniul drop-down. Aceasta poate fi o întrebare sau o frază scurtă pe care să o răspundă meniul drop-down.
Stil
HTML include o etichetă de etichetă pentru a identifica etichetele formularului în browser. Opțiunile dvs. sunt să înfășurați meniul drop-down și textul etichetei cu eticheta, să utilizați atributul "pentru" de pe eticheta de etichetă pentru a identifica ce etichetă de formă se referă la ea sau pentru a nu utiliza deloc eticheta de etichetă.
Prefer să folosesc atributul pentru, ca atunci dacă trebuie să mut eticheta din anumite motive, ea va fi încă atașată la câmpul de formă corect.
Poziţie
Puteți plasa eticheta înainte sau după meniul derulant.
Cheie de acces
Aceasta este cheia care poate fi folosită împreună cu tastele Alt sau Opțiuni pentru a ajunge direct la câmpul respectiv. Acest lucru face ca formele dvs. să fie foarte ușor de utilizat fără a necesita un mouse. Cum se configurează o cheie de acces în HTML
Indice tab
Acesta este ordinea în care câmpul de formular trebuie să fie accesat când se utilizează tastatura pentru file prin intermediul paginii Web. Înțelegerea tabelului
Când ați actualizat opțiunile de accesibilitate, faceți clic pe OK.
06 din 20
Selectați meniul
Odată ce ați afișat meniul drop-down în vizualizarea de proiect, trebuie să adăugați diferite elemente în el. Mai întâi selectați meniul derulant dând clic pe el. Dreamweaver va pune o altă linie punctată în jurul meniului derulant, pentru a arăta că l-ați selectat.
07 din 20
Proprietăți ale meniului
Meniul de proprietăți se va schimba în proprietățile listă / meniu pentru meniul derulant respectiv. Acolo puteți oferi meniului dvs. un ID (unde se spune "selectați"), decideți dacă vreți să fie un lis sau un meniu, dați-i o clasă de stil din foaia dvs. de stil și atribuiți valori drop-down.
Care este diferența dintre listă și meniu?
Dreamweaver apelează un meniu drop-down din meniu în orice meniu care permite doar o selecție. O "listă" permite mai multe opțiuni în meniul derulant și poate fi mai mare decât un element ridicat.
Dacă doriți ca un meniu vertical să fie mai multe linii înalte, schimbați-l într-un tip "listă" și lăsați neinchizată caseta "selecții".
08 din 20
Adăugați elemente de listă nouă
Pentru a adăuga elemente noi în meniu, faceți clic pe butonul "Valori listă ...". Aceasta va deschide fereastra de mai sus. Introduceți eticheta articolului în prima casetă. Aceasta este ceea ce se va afișa pe pagină. Dacă lăsați valoarea necompletată, aceasta va fi și cea care va fi trimisă în formular.
09 din 20
Adăugați mai multe și reordonați
Faceți clic pe pictograma plus pentru a adăuga mai multe elemente. Dacă doriți să le comandați din nou în caseta de listă, utilizați săgețile sus și jos din partea dreaptă.
10 din 20
Dați toate valorile elementelor
După cum am menționat în pasul 8, dacă lăsați valoarea necompletată, eticheta va fi trimisă la formular. Dar puteți da toate valorile elementelor dvs. - pentru a trimite informații alternative la formularul dvs. Veți folosi acest lucru foarte mult pentru lucruri cum ar fi meniurile de salt.
11 din 20
Alegeți o valoare implicită
Paginile Web implicite pentru a afișa elementul drop-down este listat mai întâi ca element implicit. Dar dacă doriți să fie selectat altfel, evidențiați-l în caseta "Initially selected" din meniul Properties.
12 din 20
Vedeți lista dvs. în vizualizarea Design
După ce ați terminat editarea proprietăților, Dreamweaver va afișa lista verticală cu valoarea implicită selectată.
13 din 20
Vedeți lista dvs. în vizualizarea codului
Dacă treceți la vizualizarea de cod, puteți vedea că Dreamweaver vă adaugă meniul drop-down cu un cod foarte curat. Singurele atribute suplimentare sunt cele pe care le-am adăugat cu opțiuni de accesibilitate. Codul este complet indentat și foarte ușor de citit și de înțeles. Se pune chiar și în atributul selectat = "selectat", pentru că i-am spus lui Dreamweaver că implicit scriu XHTML.
14 din 20
Salvați și vizualizați în browser
Dacă salvați documentul și îl vizualizați într-un browser Web, puteți vedea că meniul drop-down arată la fel cum v-ați aștepta.
15 din 20
Dar nu face nimic
Meniul pe care l-am creat de mai sus arată bine, dar nu face nimic. Pentru a-l face să facă ceva, trebuie să creați o acțiune de formă pe formularul în sine, care este un tutorial complet diferit.
Din fericire, Dreamweaver are un meniu drop-down meniu încorporat pe care îl puteți utiliza imediat pe site-ul dvs., fără a fi nevoie să aflați despre formulare, CGI-uri sau scripting. Se numește Meniul de salt.
Meniul Jump Dreamweaver stabilește un meniu drop-down cu nume și adrese URL. Apoi puteți alege un element din meniu și pagina Web se va muta în acea locație, ca și cum ați fi făcut clic pe un link.
Mergeți la meniul Inserare și alegeți Formă și apoi Jump Meniul.
16 din 20
Salt la fereastra meniului
Spre deosebire de meniul derulant standard, meniul Jump deschide o fereastră nouă pentru a vă numi articolele de meniu și pentru a adăuga detalii despre modul în care ar trebui să funcționeze formularul.
Pentru primul articol, schimbați textul "untitled1" la ceea ce doriți să îl citească și adăugați o adresă URL la care ar trebui să accesați acel link.
17 din 20
Adăugați elemente în meniul dvs. de salt
Faceți clic pe elementul de adăugare pentru a adăuga un element nou în meniul dvs. de salt. Adăugați cât mai multe elemente pe care le doriți.
18 din 20
Alegeți opțiunile meniului
După ce ați adăugat toate legăturile dorite, trebuie să alegeți opțiunile:
Deschideți adrese URL în
Dacă aveți un set de cadre, puteți deschide linkurile într-un cadru diferit. Sau puteți schimba opțiunea ferestrei principale la o destinație specială, astfel încât adresa URL să se deschidă într-o fereastră nouă sau în altă parte.
Nume meniu
Dați meniului un cod unic pentru pagină. Acest lucru este necesar pentru ca scriptul să funcționeze corect. De asemenea, vă permite să aveți mai multe meniuri de salt într-o singură formă - dați-le doar toate numele diferite.
Introduceți butonul Du-te după Meniu
Îmi place să selectez acest lucru deoarece, uneori, scriptul nu funcționează atunci când se modifică meniul. Este și mai accesibil.
Selectați primul element după modificarea adresei URL
Selectați această opțiune dacă aveți un element de selectare ca "Primul element de meniu". Acest lucru va asigura ca elementul respectiv sa ramana implicit pe pagina.
19 din 20
Salt în meniu Vizualizare proiect
La fel ca în primul meniu, Dreamweaver configurează meniul de salt în vizualizarea de proiectare cu elementul implicit vizibil. Puteți edita apoi meniul drop-down ca și dvs.
Dacă îl editați, asigurați-vă că nu modificați codurile de identificare ale elementelor, în caz contrar scriptul ar putea să nu funcționeze.
20 din 20
Salt în meniu în browser
Salvarea fișierului și apăsarea lui F12 va afișa pagina în browserul preferat. Acolo puteți selecta o opțiune, faceți clic pe "Du-te" și meniul de salt funcționează!