Mitä tietää
- Siirry Insert > Lomake > Lomake. Napsauta lomakkeen punaista katkoviivaa ja siirry kohtaan Insert > Lomake > Lista/Valikko. Valitse esteettömyysasetukset.
- Napsauta valikkoa ja valitse sen ominaisuudet. Valitse sitten Lista arvot lisätäksesi uusia valikkokohteita. Napsauta plus-merkkiä lisätäksesi kohteita.
- Lisää nimikkeiden arvot ja valitse oletuskohde. Voit lisätä toimintoja valitsemalla Insert > Lomake > Jump Menu. Lisää kohteita Jump-valikkoon ja tallenna.
Dreamweaverilla on helppo luoda avattavia valikkoja verkkosivustollesi. Mutta kuten kaikki HTML-lomakkeet, ne voivat olla hieman hankalia. Tämä opetusohjelma opastaa sinut Dreamweaverin avattavan valikon luomisen vaiheiden läpi.
Dreamweaver Jump Menus
Dreamweaver 8 sisältää myös ohjatun toiminnon, jolla voit luoda hyppyvalikon Web-sivustossasi navigointia varten. Toisin kuin tavalliset avattavat valikot, tämä valikko tekee jotain, kun olet valmis. Sinun ei tarvitse kirjoittaa JavaScriptiä tai CGI:itä saadaksesi pudotusvalikon toimimaan. Tämä opetusohjelma selittää myös, kuinka Dreamweaver 8:n ohjattua toimintoa käytetään hyppyvalikon luomiseen.
Luo ensin lomake
Erityisiä ohjattuja toimintoja, kuten hyppyvalikkoa, lukuun ottamatta Dreamweaver ei auta sinua saamaan HTML-lomakkeita toimimaan. Tätä varten tarvitset CGI:n tai JavaScriptin.
Kun lisäät avattavan valikon Web-sivustoosi, tarvitset ensin lomakkeen sen ympärille. Siirry Dreamweaverissa Lisää-valikkoon ja napsauta Lomake ja valitse sitten Lomake.
Lomakenäytöt suunnittelunäkymässä
Dreamweaver näyttää lomakkeesi sijainnin visuaalisesti suunnittelunäkymässä, joten tiedät, mihin lomakeelementit sijoitetaan, koska pudotusvalikon tunnisteet eivät ole kelvollisia (eivätkä toimi) lomakeelementin ulkopuolella. Kuten kuvasta näkyy, lomake on punainen katkoviiva suunnittelunäkymässä.
Valitse lista/valikko
Dreamweaverissa pudotusvalikoita kutsutaan "luetteloiksi" tai "valikkokohtiksi". Joten jos haluat lisätä sellaisen lomakkeeseen, sinun on siirryttävä Lisää-valikon Lomake-valikkoon ja valittava "Lista/valikko". Varmista, että osoitin oli lomakeruudun punaisen katkoviivan sisällä.
Erikoisasetukset-ikkuna
Dreamweaverin asetuksissa on Esteettömyys-näyttö. Avattavat valikot ovat heti muita verkkosivustoja helpommin käytettävissä, jos täytät nämä viisi vaihtoehtoa.
Lomakkeiden käytettävyys
Esteettömyysvaihtoehdot ovat:
Etiketti
Etikettikenttä näkyy tekstinä lomakeelementin vieressä. Kirjoita nimi avattavalle valikkollesi. Se voi olla kysymys tai lyhyt lause, johon avattava valikko vastaa.
Tyyli
HTML sisältää tarratunnisteen, joka tunnistaa lomaketunnisteet verkkoselaimelle. Voit valita, kääritkö avattavan valikon ja tarran tekstin tunnisteeseen, käytätkö "for"-attribuuttia tarratunnisteessa tunnistamaan, mihin lomaketunnisteeseen se viittaa, tai et käytä tarratunnistetta ollenkaan.
Asema
Voit sijoittaa etiketin ennen tai jälkeen avattavan valikon.
Pääsyavain
Kävijät voivat käyttää pääsynäppäintä "Kuva"- tai Optio-näppäimillä päästäkseen suoraan kyseiseen lomakekenttään. Tämä pikanäppäin tekee lomakkeistasi erittäin helppokäyttöiset ilman hiirtä. alt="
Välilehtihakemisto
Välilehtihakemisto on tapa, jolla käyttäjien tulee käyttää lomakekenttiä, kun he käyttävät näppäimistöä sarkaimella verkkosivulla.
Kun olet päivittänyt esteettömyysasetukset, napsauta OK.
Valitse valikko
Kun avattava valikko näkyy Dreamweaver-suunnittelunäkymässä, sinun on lisättävä eri elementtejä. Valitse ensin pudotusvalikko napsauttamalla sitä. Dreamweaver laittaa toisen katkoviivan vain avattavan valikon ympärille osoittaakseen, että olet valinnut sen.
Valikon ominaisuudet
Ominaisuudet-valikko muuttuu kyseisen pudotusvalikon luettelon/valikon ominaisuuksiksi. Siellä voit antaa valikoillesi tunnuksen (jossa lukee "select"), päättää, haluatko sen olevan luettelo vai valikko, antaa sille tyyliluokan tyylisivultasi ja määrittää arvoja avattavaan valikkoon.
Mitä eroa on luettelolla ja valikolla?
Dreamweaver kutsuu valikon avattavaksi valikoksi mitä tahansa avattavaa valikkoa, joka sallii vain yhden valinnan. "Lista" mahdollistaa useita vaihtoehtoja avattavassa valikossa, ja se voi olla useamman kuin yhden kohteen korkea.
Jos haluat avattavan valikon olevan useita rivejä korkea, muuta se "luettelo"-tyypiksi ja jätä "valinnat"-ruutuun valitsematta.
Lisää uusia luettelokohteita
Lisää uusia kohteita valikkoon napsauttamalla "Lista arvot…" -painiketta, joka avaa yllä olevan ikkunan. Kirjoita sitten nimikkeen nimi ensimmäiseen ruutuun. Se näkyy sivulla.
Lisää lisää ja tilaa uudelleen
Napsauta plus-kuvaketta lisätäksesi kohteita. Jos haluat järjestää ne uudelleen luetteloruudussa, käytä oikealla olevia ylä- ja alanuolia.
Anna kaikkien kohteiden arvot
Jos jätät arvon tyhjäksi, tunniste siirtyy lomakkeeseen. Mutta voit antaa kaikille kohteillesi arvot - lähettääksesi vaihtoehtoisia tietoja lomakkeellesi. Käytät tätä usein esimerkiksi hyppyvalikoihin ja hyperlinkkeihin.
Valitse oletus
Web-sivut näyttävät oletuksena kumpi avattavasta valikosta on lueteltu ensin oletuskohteena. Mutta jos haluat valita toisen, korosta se Ominaisuudet-valikon "Aluksi valittu" -ruudussa.
Katso luettelosi suunnittelunäkymässä
Kun olet muokannut ominaisuuksia, Dreamweaver näyttää avattavan luettelosi oletusarvolla.
Katso luettelosi koodinäkymässä
Jos vaihdat koodinäkymään, näet, että Dreamweaver lisää avattavan valikon puhtaalla koodilla. Ainoat lisäattribuutit ovat esteettömyysasetukset. Koodi on kokonaan sisennetty ja erittäin helppo lukea ja ymmärtää.
Tallenna ja tarkastele selaimessa
Jos tallennat asiakirjan ja tarkastelet sitä verkkoselaimessa, voit nähdä, että avattava valikko näyttää siltä kuin sen odotatkin.
Mutta se ei tee mitään…
Yllä luomamme valikko näyttää hyvältä, mutta se ei tee mitään. Jotta saat sen tekemään jotain, sinun on määritettävä lomaketoiminto itse lomakkeelle.
Onneksi Dreamweaverissa on sisäänrakennettu pudotusvalikkolomake, jota voit käyttää heti sivustossasi ilman, että sinun tarvitsee oppia lomakkeista, CGI:istä tai komentosarjasta. Sitä kutsutaan hyppyvalikkoksi.
Dreamweaver Jump Menu määrittää avattavan valikon, jossa on nimet ja URL-osoitteet. Sitten voit valita kohteen valikosta, ja Web-sivu siirtyy siihen paikkaan, aivan kuin olisit napsauttanut linkkiä.
Siirry Lisää-valikkoon ja valitse Lomake ja sitten Jump Menu.
Jump Menu Window
Toisin kuin tavallinen pudotusvalikko, Jump-valikko avaa uuden ikkunan, jossa voit nimetä valikkokohteet ja lisätä tietoja lomakkeen toiminnasta.
Muuta ensimmäisen kohteen teksti "un titled1" sellaiseksi, jonka haluat sen lukevan, ja lisää URL-osoite.
Lisää kohteita hyppyvalikkoon
Napsauta lisättävää kohdetta lisätäksesi uuden kohteen hyppyvalikkoon. Lisää niin monta kohdetta kuin haluat.
Jump Menu Options
Kun olet lisännyt kaikki haluamasi linkit, sinun tulee valita vaihtoehdot:
Avaa URL-osoitteet kohteessa
Jos sinulla on kehyssarja, voit avata linkit eri kehyksessä. Tai voit muuttaa pääikkunan vaihtoehdon erityiskohteeksi niin, että URL-osoite avautuu uuteen ikkunaan tai muualle.
Valikon nimi
Anna menullesi sivulle yksilöllinen tunnus. Sitä tarvitaan, jotta skripti toimii oikein. Sen avulla voit myös käyttää useita hyppyvalikoita samassa muodossa – anna niille kaikille eri nimet.
Lisää Siirry-painike valikon jälkeen
Valitsen mielelläni tämän, koska joskus komentosarja ei toimi, kun valikko muuttuu. Se on myös helpommin saatavilla.
Valitse ensimmäinen kohde URL-muutoksen jälkeen
Valitse tämä, jos ensimmäisenä valikkokohtana on kehote, kuten "Valitse yksi". Tämä varmistaa, että kohde pysyy oletusarvoisena sivulla.
Jump Menu Design View
Aivan kuten ensimmäisessä valikossasi, Dreamweaver määrittää hyppyvalikon suunnittelunäkymään oletuskohteen ollessa näkyvissä. Voit muokata avattavaa valikkoa kuten mitä tahansa muuta.
Jos muokkaat sitä, varmista, että et muuta kohteiden tunnuksia. muuten skripti ei ehkä toimi.
Siirry-valikko selaimessa
Tiedoston tallentaminen ja F12-näppäimen painaminen näyttää sivun haluamassasi selaimessa. Siellä voit valita vaihtoehdon, klikata "Go" ja hyppyvalikko toimii.
