Dreamweaverin avulla on helppo luoda pudotusvalikkoja Web-sivustoosi. Mutta kuten kaikki HTML-lomakkeet, ne voivat olla hieman hankalaa. Tämä opetusohjelma vie sinut läpi Dreamweaver-pudotusvalikon luomisen vaiheet.
Dreamweaver Jump -menut
Dreamweaver 8 tarjoaa myös ohjattua luoda hyppyvalikon navigointiin Web-sivustossasi. Toisin kuin pudotusvalikot, tämä valikko tekee itse asiassa jotain, kun olet valmis. Sinun ei tarvitse kirjoittaa mitään JavaScript- tai CGI-tiedostoja saadaksesi pudotusmuodon toimimaan. Tämä opetusohjelma kertoo myös, miten Dreamweaver 8 -toiminnon avulla luodaan hyppyvalikko.
01/20
Luo ensin lomake
Tärkeä huomautus HTML-lomakkeista ja Dreamweaverista:
Salamoita lukuun ottamatta Dreamweaver ei auta HTML-lomakkeiden "tekemistä". Tätä varten tarvitset CGI: n tai JavaScriptin. Tutustu opetusohjelmaan Lisää HTML-lomakkeita.
Kun lisäät pudotusvalikkoa Web-sivustoosi, tarvitset ensin tarvittavan lomakkeen. Siirry Dreamweaverissa Lisää-valikkoon ja valitse Lomake ja valitse sitten Lomake.
02/20
Muotoilunäytöt mallinäkymässä
Dreamweaver näyttää lomakkeen sijainnin visuaalisesti suunnittelunäkymässä, joten tiedät mistä lomakeelementit asetetaan. Tämä on tärkeää, koska avattavat valikkotunnisteet eivät ole kelvollisia (ja eivät toimi) lomakekomponentin ulkopuolella. Kuten kuvassa näkyy, lomake on punainen katkoviiva suunnittelunäkymässä.
03/20
Valitse Luettelo / Valikko
Ponnahdusvalikoita kutsutaan Dreamweaver-nimeksi "list" tai "menu". Joten lisätäksesi lomakkeeseen, sinun on mentävä Lomake-valikkoon Lisää-valikosta ja valitse "List / Menu". Varmista, että kohdistin oli lomakekentän punaisella pisteviivalla.
04/20
Erikoisasetukset-ikkuna
Dreamweaver-vaihtoehdoissa on Accessibility-näyttö. Päätän, että Dreamweaver näyttää minulle kaikki esteettömyysominaisuudet. Ja tämä näyttö on seurausta siitä. Lomakkeet ovat paikka, jossa monet verkkosivustot joutuvat esteettömyyteen ja täyttämällä nämä viisi vaihtoehtoa, pudotusvalikot ovat välittömästi helpommin saatavilla.
05/20
Lomakkeen esteettömyys
Esteettömyysasetukset ovat:
etiketti
Tämä on kentän nimi. Se näkyy tekstinä lomakkeen vieressä.
Kirjoita, mitä haluat soittaa avattavasta valikosta. Tämä voi olla kysymys tai lyhyt lause, jonka pudotusvalikko vastaa.
Tyyli
HTML sisältää etiketin tunnisteen, jolla tunnistat lomaketjuttimet selaimeen. Valintasi on käärittävä avattava valikko ja tarran teksti tunnisteella, jotta etiketin tunnisteen "for" -ominaisuus tunnistetaan, mikä tunniste tunnistetaan, tai etkä käytä tunnistetta lainkaan.
Käytän paremmin attribuutin attribuutia, sillä jos joudun siirtämään tunnusta jostain syystä, se liitetään edelleen oikeaan lomakenttään.
asento
Etiketti voidaan asettaa ennen pudotusvalikon tai sen jälkeen.
Avainkoodi
Tämä on avain, jota voidaan käyttää yhdessä Alt- tai Option-näppäinten kanssa päästäkseen suoraan tähän lomakenttään. Tämä tekee lomakkeistanne erittäin helppokäyttöiseksi tarvitsematta hiirtä. Käyttöavainsarjan määrittäminen HTML-muotoon
Tab-indeksi
Tämä on järjestys, jossa lomakekenttää pitäisi käyttää, kun käytät näppäimistöä välilehtinä Web-sivun kautta. Tabindexin ymmärtäminen
Kun olet päivittänyt esteettömyysasetukset, valitse OK.
06 of 20
Valitse Valikko
Kun pudotusvalikosta näkyy suunnittelunäkymä, sinun on lisättävä siihen eri elementtejä. Valitse ensin avattava valikko napsauttamalla sitä. Dreamweaver laittaa toisen pisteviivan vain pudotusvalikosta, jotta voit osoittaa, että olet valinnut sen.
07/20
Valikkokohdat
Ominaisuudet-valikko muuttuu kyseisen pudotusvalikon luettelon / valikon ominaisuuksille. Siellä voit antaa valikolle ID: n (jossa se sanoo "valitse"), päättää, haluatko sen olevan lis tai valikko, anna sille tyyliluokka tyyliarkistasi ja antaa arvot avattavaksi.
Mikä on listan ja valikon välinen ero?
Dreamweaver kutsuu valikkoruutuvalikkoa pudotusvalikosta, joka sallii vain yhden valinnan. "List" mahdollistaa useita valintoja pudotusvalikossa ja voi olla useampi kuin yksi kohde korkealle.
Jos haluat, että pudotusvalikosta on useita rivejä, vaihda se "list" -tyyppiin ja jättää valintaruutu pois valinnasta.
08 of 20
Lisää uusia kohteita
Jos haluat lisätä uusia kohteita valikkoon, napsauta "List values ..." -painiketta. Tämä avaa edellä olevan ikkunan. Kirjoita otsikon ensimmäinen ruutu. Tämä on mitä tulee näkyviin sivulle. Jos jätät arvon tyhjäksi, se on myös se, mitä lähetetään lomakkeessa.
09/20
Lisää Lisää ja järjestä uudelleen
Lisää lisää kohteita napsauttamalla plus-kuvaketta. Jos haluat tilata ne uudelleen luetteloruudusta, käytä oikealla olevaa ylä- ja alanuolta.
10/20
Anna kaikki kohteet arvot
Kuten mainitsin vaiheessa 8, jos jätät arvon tyhjäksi, etiketti lähetetään lomakkeeseen. Voit kuitenkin antaa kaikki kohteesi arvot - lähettää vaihtoehtoiset tiedot lomakkeeseen. Käytät tätä paljon asioista, kuten hyppyvalikoista.
11/20
Valitse Oletus
Web-sivujen oletusasetus näyttää, kumpi pudotusvalikko on lueteltu ensin oletuksena. Jos haluat kuitenkin toisen valinnan, korosta se Ominaisuudet-valikon "Alun perin valittu" -ruutuun.
12/20
Katso luetteloa suunnittelunäkymässä
Kun olet lopettanut ominaisuuksien muokkaamisen, Dreamweaver näyttää avattavasta luettelosta oletusarvon.
13/20
Katso luettelosi koodinäkymästä
Jos vaihdat koodinäkymään, näet, että Dreamweaver lisää pudotusvalikon erittäin puhtaalla koodilla. Ainoat lisäominaisuudet ovat ne, jotka lisäsimme helppokäyttötoimintoihin. Koodi on täysin särmäinen ja helposti luettavissa ja ymmärrettävissä. Se jopa asettaa valittu = "valittu" attribuutti, koska olen kertonut Dreamweaverille, että olen oletuksena kirjoittamassa XHTML.
14/20
Tallenna ja katsele selainta
Jos tallennat asiakirjan ja tarkastelet sitä Web-selaimessa, näet, että pudotusvalikko näyttää aivan kuin odotat sen.
15/20
Mutta se ei tee mitään
Yllä luotu valikko näyttää hienolta, mutta se ei tee mitään. Jotta saisit sen tekemään jotain, sinun on määritettävä lomake muotoon itse, joka on täysin toinen opetusohjelma.
Onneksi Dreamweaverilla on sisäänrakennettu pudotusvalikkomalli, jota voit käyttää heti sivustossasi tarvitsematta oppia lomakkeista, CGI: stä tai komentosarjoista. Sitä kutsutaan Jump Menuksi.
Dreamweaver-hyppyvalikko asettaa pudotusvalikon, jossa on nimiä ja URL-osoitteita. Sitten voit valita valikosta kohteen ja Web-sivu siirtyy kyseiseen paikkaan, aivan kuten jos napsautit linkkiä.
Siirry Lisää-valikkoon ja valitse Lomake ja sitten Hyppyvalikko.
16/20
Jump Menu -ikkuna
Toisin kuin tavallinen pudotusvalikko, Jump-valikko avaa uuden ikkunan, josta voit nimetä valikkokohteet ja lisätä tietoja lomakkeen toimivuudesta.
Vaihda ensimmäistä kohtaa teksti "untitled1" siihen, mitä haluat sen lukemaan, ja lisätä sen URL-osoitteen, johon kyseinen linkki pitäisi mennä.
17/20
Lisää kohteita Jump-valikkoon
Napsauta lisättävää kohdetta, jos haluat lisätä uuden kohteen hypynvalikkoon. Lisää niin monta kohdetta kuin haluat.
18/20
Hyppyvalikon asetukset
Kun olet lisännyt kaikki haluamasi linkit, valitse vaihtoehdot:
Avaa URL - osoitteet
Jos sinulla on kehyssymboli, voit avata linkit eri kehyksissä. Tai voit vaihtaa pääikkunan vaihtoehdon erityiseen kohteeseen, jotta URL-osoite avautuu uudessa ikkunassa tai muualla.
Valikon nimi
Anna valikolle sivun yksilöllinen tunnus. Tämä on tarpeen, jotta käsikirjoitus toimii oikein. Sen ansiosta voit myös käyttää useita hyppyvalikkoja yhdessä muodossa - anna heille vain kaikki eri nimet.
Lisää Go-painike valikon jälkeen
Haluan valita tämän, koska joskus skripti ei toimi, kun valikko muuttuu. Se on myös helpommin saatavilla.
Valitse ensimmäinen kohta URL-osoitteiden muuttamisen jälkeen
Valitse tämä, jos sinulla on kehote kuten "Valitse yksi" ensimmäisenä valikkokohteena. Tämä varmistaa, että kohde pysyy sivulla oletusasetuksena.
19/20
Hyppää valikkonäkymään
Aivan kuten ensimmäisen valikon kanssa, Dreamweaver asettaa hypytuvalikon suunnittelunäkymään, jossa oletusarvoinen kohde näkyy. Tämän jälkeen voit muokata avattavaa valikkoa kuten muutkin.
Jos muokkaat sitä, varmista, että et muuta mitään tunnisteita, muuten komentosarja ei ehkä toimi.
20/20
Hyppää valikko selaimessa
Tiedoston tallentaminen ja F12-painikkeen avaaminen näyttävät sivun suosikkiselaimellasi. Siellä voit valita vaihtoehdon, klikkaa "Go" ja hypätä valikko toimii!