Dreamweaver olajša ustvarjanje spustnih menijev za vaše spletno mesto. Ampak kot vse oblike HTML, so lahko nekoliko zapletene. Ta vadnica vas bo vodila skozi korake za ustvarjanje spustnega menija v programu Dreamweaver.
Dreamweaver skokov menije
Dreamweaver 8 ponuja tudi čarovnika za ustvarjanje skokovega menija za navigacijo na vaši spletni strani. V nasprotju z osnovnimi spustnimi meniji bo ta meni dejansko naredil nekaj, ko boste končali. Ni vam treba pisati nobenega JavaScripta ali CGI, da bi vaš obrazec za spuščanje deloval. Ta vadnica prav tako razlaga, kako uporabiti čarovnika Dreamweaver 8, da ustvarite preskokni meni.
01 od 20
Najprej ustvarite obrazec
Pomembno obvestilo o oblikah HTML in Dreamweaver:
Razen posebnih čarovnikov, kot je skok menu, Dreamweaver ne pomaga, da oblikujete HTML "delo". Za to potrebujete CGI ali JavaScript. Oglejte si moj vadnik Oblikovanje obrazcev HTML za več informacij.
Ko dodate spustni meni na svojo spletno stran, je prva stvar, ki jo potrebujete, oblika, ki jo obdaja. V programu Dreamweaver pojdite v meni »Vstavi« in kliknite Obrazec ter izberite »Obrazec«.
02 od 20
Oblike prikaza v pogledu oblikovanja
Dreamweaver vizualno prikaže vašo obliko v oblikovnem pogledu, tako da boste vedeli, kam želite vstaviti elemente obrazca. To je pomembno, ker spustne menijske oznake niso veljavne (in ne bodo delovale) zunaj elementa obrazca. Kot je prikazano na sliki, je obrazec rdeča črtasto črto v pogledu oblikovanja.
03 od 20
Izberite Seznam / Meni
Spustni meniji se v Dreamweaveru imenujejo elementi »seznam« ali »menu«. Če želite dodati eno v svoj obrazec, morate vstopiti v obrazec v meniju Insert in izberite "Seznam / Meni". Prepričajte se, da je bil vaš kazalec v rdeči pikčastem vrstičku polja obrazca.
04 od 20
Okno posebnih možnosti
V možnostih Dreamweaver je zaslon Dostopnost. Izbral sem, da mi Dreamweaver pokaže vse lastnosti dostopnosti. In ta zaslon je rezultat tega. Obrazci so kraj, kjer mnoge spletne strani padejo v dostopnost in tako, da izpolnite te pet možnosti, bodo vaši spustni meniji takoj dostopnejši.
05 od 20
Dostopnost obrazca
Možnosti dostopnosti so:
Oznaka
To je ime za polje. Prikazal se bo kot besedilo poleg elementa obrazca.
Vpišite, za kaj želite poklicati spustni meni. To je lahko vprašanje ali kratek stavek, na katerega bo odgovoril spustni meni.
Style
HTML vsebuje oznako nalepke, ki označuje nalepke obrazca v brskalniku. Vaše izbire morajo obdržati spustni meni in besedilo nalepke z oznako, uporabiti atribut »za« na oznaki nalepke, da ugotovite, na katero oznako se nanaša oznaka, ali da sploh ne uporabite oznake oznake.
Raje uporabljam atribut za, tako da, če moram zaradi nekega razloga premakniti oznako, bo še vedno pritrjen na pravilno polje obrazca.
Položaj
Oznako lahko postavite pred ali po spustnem meniju.
Ključ za dostop
To je ključ, ki ga lahko uporabite skupaj s tipkami Alt ali Option, če želite priti neposredno v to polje obrazca. Zaradi tega so vaše oblike zelo enostavne za uporabo brez potrebe po miški. Kako nastaviti ključ za dostop v HTML
Indeks zavihkov
To je vrstni red, v katerem mora biti polje za obliko dostopno, če uporabljate tipkovnico na kartici prek spletne strani. Razumevanje Tabindexa
Ko posodobite možnosti za dostop, kliknite V redu.
06 od 20
Izberite meni
Ko ste v spustnem meniju prikazani v pogledu oblikovanja, mu morate dodati različne elemente. Najprej izberite spustni meni, tako da ga kliknete. Dreamweaver bo postavil še eno pikčasto vrstico okoli spustnega menija in pokazal, da ste ga izbrali.
07 od 20
Lastnosti menija
Meni lastnosti se bo v spustnem meniju spremenil v seznam lastnosti / menija. Tam lahko svojemu meniju doda ID (kjer piše "izberite"), odloči, ali želite, da je lis ali meni, mu dajte razred sloga iz vašega slogovnega lista in dodelite vrednosti spustnem meniju.
Kakšna je razlika med seznamom in menijem?
Dreamweaver v spustnem meniju v meniju spusti vse spustne možnosti, ki dovoljujejo samo en izbor. »Seznam« omogoča spustitev več možnosti in je lahko več kot en element.
Če želite, da je spustni meni z več vrsticami, ga spremenite v "seznam" in pustite polje »Izbori« nepreverjeno.
08 od 20
Dodaj nove elemente seznama
Če želite v svoj meni dodati nove predmete, kliknite gumb "Seznam vrednosti ...". To bo odprlo zgornje okno. V prvo polje vnesite oznako elementa. To bo tisto, kar se bo prikazalo na strani. Če pustite vrednost prazno, se tudi tisto, kar bo poslano v obrazcu.
09 od 20
Dodaj več in preuredi
Kliknite ikono plus, če želite dodati več elementov. Če jih želite ponovno naročiti v seznamu, uporabite puščice navzgor in navzdol na desni.
10 od 20
Navedite vrednosti vseh postavk
Kot sem omenil v 8. koraku, če pustite vrednost prazno, bo oznaka poslana na obrazec. Ampak lahko podarite vse svoje postavke vrednosti - pošljite nadomestne podatke v obrazec. To boste veliko uporabljali za stvari, kot so meniji za skok.
11 od 20
Izberite privzeto
Privzete spletne strani privzeto prikazujejo kateri koli element, ki se spusti, je najprej naveden kot privzeti element. Toda, če želite izbrati drugo, jo označite v polju »Začetno izbrano« v meniju »Lastnosti«.
12 od 20
Oglejte si svoj seznam v pogledu oblikovanja
Ko končate urejanje lastnosti, bo Dreamweaver prikazoval vaš spustni seznam s privzeto izbrano vrednostjo.
13 od 20
Oglejte si svoj seznam v pogledu kode
Če preklopite na pogled kode, lahko vidite, da Dreamweaver dodaja svoj spustni meni z zelo čisto kodo. Edini dodatni atributi so tisti, ki smo jih dodali z možnostmi dostopnosti. Koda je vsa razčlenjena in zelo enostavna za branje in razumevanje. Celo postavlja v izbrani atribut "izbrani", ker sem povedal Dreamweaver, da privzamem pisanje XHTML.
14 od 20
Shrani in prikaži v brskalniku
Če dokument shranite in ga pregledate v spletnem brskalniku, lahko vidite, da vaš spustni meni izgleda tako, kot bi pričakovali.
15 od 20
Ampak to ne naredi ničesar
Meni, ki smo ga ustvarili zgoraj, je v redu, vendar nič ne naredi. Če želite nekaj storiti, morate na sami obliki nastaviti akcijsko akcijo, ki je povsem druga vaja.
Na srečo ima Dreamweaver vgrajeno obliko spustnega menija, ki ga lahko takoj uporabite na svojem spletnem mestu, ne da bi se morali učiti o oblikah, CGI-jih ali skripti. Imenuje se Jump Menu.
Meni skokov Dreamweaver nastavi spustni meni z imeni in URL-ji. Potem lahko izberete element v meniju in spletno stran se premakne na to mesto, tako kot če bi kliknili povezavo.
Pojdite v meni »Vstavi« in izberite Obrazec in nato »Skok«.
16 od 20
Skoči okno menija
Za razliko od standardnega spustnega menija, meni »Skok« odpre novo okno, s katerim lahko poimenujete elemente menija in dodate podrobnosti o tem, kako naj obrazec deluje.
Za prvi element spremenite besedilo "untitled1" na to, kar želite prebrati, in dodajte URL, na katerega naj se ta povezava obišče.
17 od 20
Dodaj elemente v vaš skokov meni
Kliknite na dodati element, da v menijski skok dodate nov element. Dodajte čim več predmetov, kot želite.
18 od 20
Možnosti skokovnega menija
Ko dodate vse želene povezave, izberite svoje možnosti:
Odpri URL-ji v
Če imate okvirček, lahko povezave odprete v drugem oknu. Ali pa lahko glavno okno spremenite v poseben cilj, tako da se URL odpre v novem oknu ali drugje.
Ime menija
Dajte svojemu meniju edinstven ID za stran. To je potrebno, da skript deluje pravilno. Prav tako vam omogoča, da imate več menijev za preskakovanje v eni obliki - samo jim dajte vsa imena.
Vstavi gumba Go Po meniju
Rad bi izbral to, ker včasih skript ne deluje, ko se meni spremeni. Prav tako je dostopnejša.
Izberite prvi element po spremembi URL-ja
Izberite to, če imate kot prvi element menija vpraąanje, na primer »Izberite eno«. To bo zagotovilo, da ta element ostane privzeto na strani.
19 od 20
Pogled skeniranja menija
Tako kot v prvem meniju, Dreamweaver nastavi vaš skokov meni v pogledu oblikovanja s privzeto vidno postavko. Spustni meni lahko nato uredite, kot bi vi kateri koli drugi.
Če ga uredite, se prepričajte, da ne želite spreminjati nobenih ID-jev na predmetih, sicer skript morda ne bo deloval.
20 od 20
Skoči v meni Brskalnik
Shranjevanje datoteke in zadetek F12 bo prikazal stran v vašem priljubljenem brskalniku. Tam lahko izberete možnost, kliknite »Pojdi« in meni za skok deluje!