Ako vytvoriť rozbaľovaciu ponuku v aplikácii Dreamweaver

Obsah:

Ako vytvoriť rozbaľovaciu ponuku v aplikácii Dreamweaver
Ako vytvoriť rozbaľovaciu ponuku v aplikácii Dreamweaver
Anonim

Čo by ste mali vedieť

  • Prejsť na Vložiť > Formulár > Formulár. Kliknite na bodkovanú červenú čiaru vo formulári a prejdite na Vložiť > Formulár > Zoznam/Menu. Vyberte možnosti dostupnosti.
  • Kliknite na ponuku a vyberte jej vlastnosti, potom vyberte Zobraziť hodnoty na pridanie nových položiek ponuky. Ak chcete pridať ďalšie položky, kliknite na znamienko plus.
  • Pridajte hodnoty položiek a vyberte predvolenú položku. Ak chcete pridať akcie, prejdite na Vložiť > Formulár > Preskočiť menu. Pridajte položky do ponuky Skočiť a uložte.

Dreamweaver uľahčuje vytváranie rozbaľovacích ponúk pre vaše webové stránky. Ale ako všetky HTML formuláre, môžu byť trochu zložité. Tento tutoriál vás prevedie krokmi na vytvorenie rozbaľovacej ponuky v aplikácii Dreamweaver.

Skokové ponuky Dreamweaver

Dreamweaver 8 tiež poskytuje sprievodcu na vytvorenie skokovej ponuky pre navigáciu na vašej webovej lokalite. Na rozdiel od základných rozbaľovacích ponúk táto ponuka po dokončení niečo urobí. Aby váš rozbaľovací formulár fungoval, nemusíte písať žiadne JavaScript ani CGI. Tento tutoriál tiež vysvetľuje, ako používať sprievodcu Dreamweaver 8 na vytvorenie ponuky skokov.

Najprv vytvorte formulár

Image
Image

S výnimkou špeciálnych sprievodcov, ako je ponuka skokov, Dreamweaver vám nepomôže, aby formuláre HTML „fungovali“. Na to potrebujete CGI alebo JavaScript.

Keď na svoju webovú stránku pridávate rozbaľovaciu ponuku, prvá vec, ktorú potrebujete, je formulár, ktorý ju obklopí. V aplikácii Dreamweaver prejdite do ponuky Vložiť a kliknite na položku Formulár, potom vyberte položku Formulár.

Zobrazenie formulára v zobrazení návrhu

Image
Image

Dreamweaver zobrazuje umiestnenie vášho formulára vizuálne v zobrazení návrhu, takže viete, kam umiestniť prvky formulára, pretože značky rozbaľovacej ponuky nie sú platné (a nebudú fungovať) mimo prvku formulára. Ako môžete vidieť na obrázku, formulár je červená bodkovaná čiara v zobrazení návrhu.

Vyberte zoznam/menu

Image
Image

Rozbaľovacie ponuky sa v Dreamweaveri nazývajú položky „zoznam“alebo „ponuka“. Ak ho chcete pridať do formulára, musíte prejsť do ponuky Formulár v ponuke Vložiť a vybrať položku „Zoznam/Ponuka“. Uistite sa, že sa kurzor nachádzal v červenej bodkovanej čiare poľa formulára.

Okno špeciálnych možností

Image
Image

V možnostiach Dreamweaveru sa nachádza obrazovka Zjednodušenie ovládania. Ak vyplníte týchto päť možností, vaše rozbaľovacie ponuky budú okamžite prístupnejšie ako iné webové stránky.

Dostupnosť formulára

Image
Image

Možnosti dostupnosti sú:

Štítok

Pole označenia sa zobrazí ako text vedľa prvku formulára. Zadajte názov rozbaľovacej ponuky. Môže to byť otázka alebo krátka fráza, na ktorú odpovie rozbaľovacia ponuka.

Style

HTML obsahuje štítok štítkov na identifikáciu štítkov formulárov pre webový prehliadač. Môžete sa rozhodnúť zabaliť rozbaľovaciu ponuku a text štítka značkou, použiť atribút „for“na štítku štítku na identifikáciu, na ktorý štítok formulára odkazuje, alebo štítok nepoužívať vôbec.

Pozícia

Štítok môžete umiestniť pred alebo za rozbaľovaciu ponuku.

Prístupový kľúč

Návštevníci môžu použiť prístupový kľúč sklávesmi „Obrázok“alebo Option, aby sa dostali priamo do daného poľa formulára. Táto klávesová skratka uľahčuje používanie formulárov bez myši. alt="

Index karty

Index kariet je spôsob, akým by používatelia mali pristupovať k poliam formulára, keď na webovej stránke používajú klávesnicu.

Po aktualizácii možností dostupnosti kliknite na tlačidlo OK.

Vyberte ponuku

Image
Image

Keď sa v zobrazení návrhu Dreamweaveru zobrazí rozbaľovacia ponuka, musíte pridať rôzne prvky. Najprv vyberte rozbaľovaciu ponuku kliknutím na ňu. Dreamweaver umiestni ďalšiu bodkovanú čiaru okolo rozbaľovacej ponuky, aby ukázal, že ste si ju vybrali.

Vlastnosti ponuky

Image
Image

Ponuka vlastností sa zmení na zoznam/vlastnosti ponuky pre túto rozbaľovaciu ponuku. Tam môžete dať svojej ponuke ID (kde je napísané „vybrať“), rozhodnúť sa, či to má byť zoznam alebo ponuka, priradiť jej triedu štýlu z vašej šablóny štýlov a priradiť hodnoty do rozbaľovacej ponuky.

Aký je rozdiel medzi zoznamom a menu?

Dreamweaver nazýva rozbaľovaciu ponuku akoukoľvek rozbaľovacou ponukou, ktorá umožňuje iba jeden výber. „Zoznam“umožňuje viacero možností v rozbaľovacej ponuke a môže mať viac ako jednu položku.

Ak chcete, aby rozbaľovacia ponuka mala viac riadkov, zmeňte ju na typ „zoznam“a ponechajte políčko „výbery“nezačiarknuté.

Pridať nové položky zoznamu

Image
Image

Ak chcete do svojho menu pridať nové položky, kliknite na tlačidlo „Zoznam hodnôt…“, čím sa otvorí vyššie uvedené okno. Potom zadajte štítok položky do prvého poľa. Zobrazí sa na stránke.

Pridať ďalšie a zmeniť poradie

Image
Image

Ak chcete pridať ďalšie položky, kliknite na ikonu plus. Ak ich chcete zmeniť v zozname, použite šípky hore a dole vpravo.

Uveďte hodnoty všetkých položiek

Image
Image

Ak necháte hodnotu prázdnu, štítok prejde do formulára. Môžete však zadať hodnoty všetkých položiek – na odoslanie alternatívnych informácií do formulára. Budete to často používať na veci, ako sú skokové ponuky a hypertextové odkazy.

Vyberte predvolené

Image
Image

Webové stránky predvolene zobrazujú tú rozbaľovaciu položku, ktorá je uvedená ako predvolená ako prvá. Ak však chcete vybrať inú, zvýraznite ju v poli „Na začiatku vybraté“v ponuke Vlastnosti.

Zobraziť svoj zoznam v zobrazení návrhu

Image
Image

Po dokončení úprav vlastností Dreamweaver zobrazí váš rozbaľovací zoznam s vybratou predvolenou hodnotou.

Pozrite si svoj zoznam v zobrazení kódu

Image
Image

Ak prepnete na zobrazenie kódu, uvidíte, že Dreamweaver pridá vašu rozbaľovaciu ponuku s čistým kódom. Jedinými atribútmi navyše sú možnosti dostupnosti. Celý kód je odsadený a veľmi ľahko čitateľný a zrozumiteľný.

Uložiť a zobraziť v prehliadači

Image
Image

Ak dokument uložíte a zobrazíte vo webovom prehliadači, uvidíte, že vaša rozbaľovacia ponuka vyzerá presne tak, ako by ste očakávali.

Ale nič to nerobí…

Image
Image

Ponuka, ktorú sme vytvorili vyššie, vyzerá dobre, ale nič nerobí. Ak chcete, aby niečo urobil, musíte nastaviť akciu formulára na samotnom formulári.

Našťastie má Dreamweaver vstavaný formulár rozbaľovacej ponuky, ktorý môžete okamžite použiť na svojom webe bez toho, aby ste sa museli učiť o formulároch, CGI alebo skriptovaní. Nazýva sa to Jump Menu.

Skoková ponuka Dreamweaver nastavuje rozbaľovaciu ponuku s názvami a adresami URL. Potom si môžete vybrať položku v ponuke a webová stránka sa presunie na toto miesto, ako keby ste klikli na odkaz.

Prejdite do ponuky Vložiť a vyberte Formulár a potom Ponuka Prejsť.

Okno skokovej ponuky

Image
Image

Na rozdiel od štandardnej rozbaľovacej ponuky, ponuka Skočiť vám otvorí nové okno, v ktorom môžete pomenovať položky ponuky a pridať podrobnosti o tom, ako má formulár fungovať.

Pri prvej položke zmeňte text „un titled1“na text, ktorý chcete, aby čítala, a pridajte webovú adresu.

Pridať položky do ponuky skokov

Image
Image

Kliknutím na pridať položku pridáte novú položku do ponuky skokov. Pridajte toľko položiek, koľko chcete.

Možnosti ponuky preskočenia

Image
Image

Po pridaní všetkých odkazov, ktoré chcete, by ste si mali vybrať možnosti:

Otvoriť adresy URL v

Ak máte sadu rámcov, môžete odkazy otvárať v inom rámci. Alebo môžete zmeniť možnosť hlavného okna na špeciálny cieľ, aby sa adresa URL otvorila v novom okne alebo inde.

Názov menu

Pridajte svojmu menu jedinečný identifikátor stránky. Je to potrebné, aby skript fungoval správne. Tiež vám umožňuje mať viacero skokových ponúk v jednej forme – dajte im rôzne názvy.

Vložiť tlačidlo Prejsť za ponuku

Toto sa mi páči, pretože skript niekedy nefunguje pri zmene ponuky. Je tiež dostupnejší.

Vybrať prvú položku po zmene adresy URL

Vyberte túto možnosť, ak máte ako prvú položku ponuky výzvu, napríklad „Vyberte jednu“. Tým sa zabezpečí, že táto položka zostane na stránke predvolená.

Zobrazenie návrhu ponuky skoku

Image
Image

Rovnako ako v prípade vašej prvej ponuky, Dreamweaver nastaví vašu ponuku skokov v zobrazení návrhu s viditeľnou predvolenou položkou. Potom môžete upraviť rozbaľovaciu ponuku ako ktorúkoľvek inú.

Ak ho upravujete, uistite sa, že ste nezmenili žiadne ID položiek; inak skript nemusí fungovať.

Ponuka skokov v prehliadači

Image
Image

Uložením súboru a stlačením F12 sa stránka zobrazí vo vašom preferovanom prehliadači. Tam si môžete vybrať možnosť, kliknúť na „Prejsť“a ponuka skokov funguje.

Odporúča: