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.
Luo ensin lomake
Tärkeä huomautus HTML-lomakkeista ja Dreamweaverista:
Salamoita lukuun ottamatta Dreamweaver ei anna HTML-lomakkeiden "toimivuutta". Tätä varten tarvitset CGI: n tai JavaScriptin. Tutustu opetusohjelmaan Lisää HTML-lomakkeita.
Kun lisäät pudotusvalikkoa Web-sivustoosi, tarvitset ensin tarvittavan lomakkeen. Dreamweaverissa siirry Lisää-valikkoon ja valitse Lomake ja valitse sitten Lomake.
02/20Muotoilunä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/20Valitse Luettelo / Valikko
Ponnahdusvalikoita kutsutaan Dreamweaver-nimeksi "list" tai "menu". Joten lisäämällä lomakkeeseen, sinun on mentävä Muoto-valikkoon Lisää-valikosta ja valitsemalla "Luettelo / Valikko". Varmista, että kohdistin oli lomakekentän punaisella pisteviivalla.
04/20Erikoisasetukset-ikkuna
Dreamweaver-vaihtoehdoissa on käytettävyysikkuna. 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 sijoittuvat esteettömyyteen ja täyttämällä nämä viisi vaihtoehtoa, pudotusvalikot ovat välittömästi helpommin saatavilla.
05/20Lomakkeen esteettömyys
Esteettömyysmahdollisuudet 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. 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. Etiketti voidaan asettaa ennen pudotusvalikon tai sen jälkeen. 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ä. Tämä on järjestys, jossa lomakekenttään pääsee käyttämään näppäimistöä välilehden kautta. Kun olet päivittänyt esteettömyysasetukset, valitse OK. Kun Dreamweaver-suunnittelunäkymässä on pudotusvalikko, sinun on lisättävä siihen eri elementit. Valitse ensin avattava valikko napsauttamalla sitä. Dreamweaver laittaa toisen pisteviivan vain pudotusvalikosta, jotta voit osoittaa, että olet valinnut sen. 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. 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. 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. Lisää lisää kohteita napsauttamalla plus-kuvaketta. Jos haluat tilata ne uudelleen luetteloruudusta, käytä oikealla olevaa ylä- ja alanuolta. 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 ja hyperlinkkeistä. Web-sivujen oletusasetus näyttää, kumpi pudotusvalikko on lueteltu ensin oletuksena. Jos haluat kuitenkin toisen valinnan, korosta se Ominaisuudet-valikon "Alun perin valittu" -ruutuun. Kun olet lopettanut ominaisuuksien muokkaamisen, Dreamweaver näyttää avattavasta luettelosta oletusarvon. 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. Jos tallennat asiakirjan ja tarkastelet sitä verkkoselaimessa, näet, että pudotusvalikko näyttää aivan kuin odotat sen. 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. 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. 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ä. Napsauta lisättävää kohdetta, jos haluat lisätä uuden kohteen hypynvalikkoon. Lisää niin monta kohdetta kuin haluat. Kun olet lisännyt kaikki haluamasi linkit, valitse vaihtoehdot: 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. 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. Haluan valita tämän, koska joskus skripti ei toimi, kun valikko muuttuu. Se on myös helpommin saatavilla. Valitse tämä, jos sinulla on kehote kuten "Valitse yksi" ensimmäisenä valikkokohteena. Tämä varmistaa, että kohde pysyy sivulla oletusasetuksena. 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. Tiedoston tallentaminen ja F12-painikkeen avaaminen näyttävät sivun suosikkiselaimellasi. Siellä voit valita vaihtoehdon, klikkaa "Go" ja hypätä valikko toimii! Tyyli
asento
Pääsykoodi
Tab-indeksi
Valitse Valikko
Valikkokohdat
Mikä on listan ja valikon välinen ero?
Lisää uusia kohteita
Lisää Lisää ja järjestä uudelleen
Anna kaikki kohteet arvot
Valitse Oletus
Katso luetteloa suunnittelunäkymässä
Katso luettelosi koodinäkymästä
Tallenna ja katsele selainta
Mutta se ei tee mitään …
Jump Menu -ikkuna
Lisää kohteita Jump-valikkoon
Hyppyvalikon asetukset
Avaa URL - osoitteet
Valikon nimi
Lisää Go-painike valikon jälkeen
Valitse ensimmäinen kohta URL-osoitteiden muuttamisen jälkeen
Hyppää valikkonäkymään
Hyppää valikko selaimessa
