Dreamweaver muudab teie veebisaidi jaoks rippmenüüde loomiseks lihtsaks. Kuid nagu kõik HTML vormid, võivad need olla natuke keerulised. See õpetus käib Dreamweaveris rippmenüü loomiseks sammudest.
Dreamweaver Jump Menüüd
Dreamweaver 8 pakub ka viisardit, et luua veebisaidil navigatsioonimenüü hüpikmenüü. Erinevalt põhilisematest rippmenüüstest teeb see menüü, kui olete valmis. Teie rippmenüü töövormide saamiseks ei pea te mingeid JavaScripti või CGI-e kirjutama. See õpetus selgitab ka, kuidas Dreamweaver 8 viisardit hüpata menüü loomiseks.
01 of 20
Esmalt looge vorm
Tähtis märkus HTML-vormide ja Dreamweaveri kohta:
Dreamweaver ei aita sul HTML-vorme "töö" teha, välja arvatud spetsiaalsete võlurid nagu hüpikmenüü. Selleks on vaja CGI või JavaScripti. Lisateabe saamiseks vaadake minu juhendit HTML-vormingute tegemine.
Kui lisate oma veebisaidile rippmenüü, on esimene asi, mida vajate, selle ümbruse vorm. Dreamweaverist avage menüü Insert ja klõpsake valikul Form, seejärel valige "Form".
02 of 20
Vormi kuvamine kujundusvaates
Dreamweaver näitab teie vormi asukohta visuaalselt disainivaates, nii et teate, kus oma vormielemente panna. See on oluline, sest rippmenüü märgendid pole kehtivad (ja ei tööta) vormi elemendist väljaspool. Nagu näete pildil, on kujundus disainivaates punane punktiirjoon.
03 of 20
Vali nimekiri / menüü
Rippmenüüst nimetatakse Dreamweaveris elemente "loend" või "menüü". Selleks, et lisada oma vormi, peate minema menüüs Lisa menüüst Vorm ja vali nimekiri / menüü. Veenduge, et kursor oleks teie vormi kasti punase punktiirjoonega.
04 alates 20
Erivalikute aken
Dreamweaver Valikud on ligipääsetavuse ekraan. Ma valin, et Dreamweaver näitab mulle kõiki ligipääsetavuse atribuute. Ja see ekraan on selle tagajärg. Vormid on koht, kus paljud veebisaidid jäävad ligipääsetavaks ja täidavad need viis võimalust, on teie rippmenüüd kohe paremini kättesaadav.
05 of 20
Vormi ligipääsetavus
Juurdepääsuvõimalused on järgmised:
Silt
See on väli nimi. See kuvatakse vormi elemendi kõrval tekstina.
Kirjutage, mida soovite rippmenüüga helistada. See võib olla küsimus või lühike fraas, mille rippmenüü vastab.
Stiil
HTML sisaldab sildi märgendit, et teie vormi silte tuvastada brauserile. Teie valikud on rippmenüü ja siltide teksti sisestamine sildiga, et kasutada siltide sildi atribuudi "for", et tuvastada, millist vormi sildi see viitab või mitte kasutada sildilärgi üldse.
Ma eelistan kasutada atribuudi, sest siis, kui ma pean silti mingil põhjusel liigutama, lisatakse see ikkagi õigele vormiväljale.
Positsioon
Sildi saate paigutada rippmenüüst või pärast seda.
Juurdepääsuklahv
See on võti, mida saab koos Alt- või Valikuklahvidega otse selle vormi väljale hankida. See muudab teie vormid väga lihtsalt ilma hiireta. Kuidas HTML-is juurdepääsu võtme seadistamine
Tab Index
See on järjekord, mille abil tuleks veebiväljale vahelejätmiseks klaviatuuri abil juurde pääseda vormiväljale. Tabindexi mõistmine
Kui olete oma hõlbustusvõimalused värskendanud, klõpsake nuppu OK.
06 20-st
Valige menüü
Kui disainivaates kuvatakse teie rippmenüü, peate selle juurde lisama erinevaid elemente. Kõigepealt vali rippmenüü, klõpsates sellele. Dreamweaver paneb teisele punktiirjoone ümber rippmenüüst, et näidata, et olete selle valinud.
07 alates 20
Menüü omadused
Omaduste menüü muutub selle rippmenüü loendi / menüü omadusteks. Siin saate anda oma menüüs ID (kus see ütleb "vali"), otsustada, kas soovite, et see oleks lis või menüü, anna talle stiililehe stiiliklass ja määrate rippmenüü jaoks väärtused.
Mis erinevus loendi ja menüü vahel on?
Dreamweaver kutsub menüü rippmenüüst mis tahes rippmenüüst, mis võimaldab ainult ühte valikut. Nimekiri võimaldab rippmenüüst mitut valikut ja võib olla rohkem kui üks kirje kõrge.
Kui soovite, et rippmenüü oleks mitu rida kõrgel, muutke see "loendi" tüübiks ja jätke valikuvõimalused märkimata.
08 alates 20
Lisage uued loendiüksused
Uute üksuste lisamiseks oma menüüs klõpsake nuppu "Nimekirja väärtused ...". See avab ülaltoodud akna. Sisestage oma eseme silt esimeses kastis. See kuvatakse lehel. Kui jätad väärtuse tühjaks, on see ka see, mis saadetakse vormis.
09 of 20
Lisage veel ja korrigeeri uuesti
Lisateabe lisamiseks klõpsake plussikoonil. Kui soovite nimekirja kasti uuesti tellida, kasutage paremale üles ja alla nooleklahve.
10-st 20-st
Andke kõikidele üksustele väärtused
Nagu ma punktis 8 mainisin, jätan väärtus tühjaks, saadetakse silt vormile. Kuid võite anda kõik oma kirje väärtused - saata alternatiivne teave oma vormile. Sa kasutad seda palju asju nagu hüpata menüüd.
11-st 20-st
Vali vaikimisi
Veebilehed vaikimisi näitavad, milline neist rippmenüüst on esialgu esialgne vaikeelement. Kuid kui soovite, et valitud on teine, tõstke see esile menüüs Properties (Atribuudid) olevas kastis "Initially selected" (algse valitud).
12-st 20-st
Vaadake oma nimekirja kujundusvaates
Kui olete oma omadused redigeerinud, näitab Dreamweaver oma ripploendit valitud vaikeväärtusega.
13-st 20-st
Vaadake oma loendit koodi vaates
Kui lülitate koodivaatesse, näete, et Dreamweaver lisab teie rippmenüü väga puhtale koodile. Ainsad lisatribuudid on need, mille lisame juurdepääsetavuse valikud. Kood on kõik taandatud ja väga lihtne lugeda ja mõista. See paneb isegi atribuudi valitud = "selected", sest olen öelnud Dreamweaverile, et ma vaikimisi kirjutan XHTML-i.
14-st 20-st
Salvesta ja vaadake brauseris
Kui salvestate dokumendi ja vaatate seda veebibrauseris, näete, et teie rippmenüü näeb välja just nii, nagu oleksite seda eeldanud.
15-st 20-st
Kuid see ei tee midagi
Eespool loodud menüü tundub hästi, kuid see ei tee midagi. Selleks, et seda midagi teha, peate vormi toiminguid vormistama ise, mis on täiesti uus õpetus.
Õnneks on Dreamweaveril sisseehitatud rippmenüüvorm, mida saate oma saidil kohe kasutada, ilma et oleks vaja õppida vormide, CGI-de või skriptide kohta. Seda nimetatakse hüpikmenüüks.
Dreamweaver Jump Menu seab rippmenüü nimede ja URL-idega. Seejärel saate menüüs valida üksuse ja veebileht liigub selle asukoha juurde, nagu oleksite lingi klõpsanud.
Avage menüü Lisa ja valige vorm ja seejärel käsku Jump.
16-st 20-st
Hüpikmenüü aken
Erinevalt tavalisest rippmenüüst avaneb Jump menüüs uus aken, kus saate oma menüüelemente nimetada ja lisada üksikasju selle kohta, kuidas vorm peaks toimima.
Esimese kirje puhul muutke teksti "untitled1" seda, mida soovite seda lugeda ja URL-i, millele see link peaks juurde minema, lisama.
17-st 20-st
Lisage artikleid oma Jump Menu
Uue elemendi lisamiseks hüpikmenüüsse klõpsake lisamise elemendil. Lisage nii palju punkte kui soovite.
18-st 20-st
Hüpikmenüü valikud
Kui olete kõik soovitud lingid lisanud, peate valima oma valikud:
Ava URL-id sisse
Kui teil on raamide komplekt, saate lingid avada teises raamis. Või saate muuta põhiakna valikut spetsiaalse sihtmärgiga, nii et URL avaneb uues aknas või mujal.
Menüü nimi
Andke oma menüüs lehe jaoks unikaalne ID. See on vajalik, et skript toimiks õigesti. Samuti võimaldab see teil kasutada mitut hüpikmenüüd ühes vormis - lihtsalt anna neile kõik erinevad nimed.
Sisestage nupp Mine pärast menüüd
Mulle meeldib see valida, sest mõnikord ei toimi skript menüüd muutudes. See on ka juurdepääsetavam.
Valige esimene element pärast URL-i muutmist
Valige see, kui teil on esimene menüüelement nagu "Vali üks". See kindlustab selle, et see element jääb leheküljel vaikimisi.
19-st 20-st
Hüppa menüü disaini vaade
Nii nagu teie esimese menüü puhul, määrab Dreamweaver oma hüpikmenüü disainivaates, kusjuures vaikimisi on see nähtav. Seejärel saate muuta rippmenüüd nagu ükski teine.
Kui muudate seda, veenduge, et ei muuda üksusi üksustes ID-de, muidu skript ei pruugi töötada.
20-st 20-st
Hüpikmenüü brauseris
Faili salvestamine ja F12 tabamine näitab lehte teie eelistatud brauserist. Siin saab valida võimaluse, klõpsa nupul "Mine" ja hüpata menüü töötab!