Jak vytvořit rozbalovací nabídku v aplikaci Dreamweaver

Obsah:

Jak vytvořit rozbalovací nabídku v aplikaci Dreamweaver
Jak vytvořit rozbalovací nabídku v aplikaci Dreamweaver
Anonim

Co je dobré vědět

  • Přejděte na Insert > Formulář > Formulář. Klikněte na tečkovanou červenou čáru ve formuláři a přejděte na Vložit > Formulář > Seznam/Menu. Vyberte možnosti usnadnění.
  • Klikněte na nabídku a vyberte její vlastnosti, poté vyberte Vypsat hodnoty pro přidání nových položek nabídky. Kliknutím na znak plus přidáte další položky.
  • Přidejte hodnoty položek a vyberte výchozí položku. Chcete-li přidat akce, přejděte na Insert > Formulář > Jump Menu. Přidejte položky do nabídky Skočit a uložte.

Dreamweaver usnadňuje vytváření rozbalovacích nabídek pro váš web. Ale stejně jako všechny HTML formuláře mohou být trochu složitější. Tento výukový program vás provede kroky k vytvoření rozbalovací nabídky v aplikaci Dreamweaver.

Dreamweaver Jump Menu

Dreamweaver 8 také poskytuje průvodce pro vytvoření skokové nabídky pro navigaci na vašem webu. Na rozdíl od základních rozevíracích nabídek tato nabídka po dokončení něco udělá. Aby váš rozevírací formulář fungoval, nebudete muset psát žádný JavaScript nebo CGI. Tento výukový program také vysvětluje, jak používat průvodce Dreamweaver 8 k vytvoření nabídky skoků.

Nejprve vytvořte formulář

Image
Image

S výjimkou speciálních průvodců, jako je nabídka skoků, vám Dreamweaver nepomůže, aby formuláře HTML „fungovaly“. K tomu potřebujete CGI nebo JavaScript.

Když na svůj web přidáváte rozevírací nabídku, první věc, kterou potřebujete, je formulář, který ji obklopí. V aplikaci Dreamweaver přejděte do nabídky Vložit a klikněte na Formulář, poté vyberte "Formulář."

Zobrazení formuláře v zobrazení návrhu

Image
Image

Dreamweaver zobrazuje umístění formuláře vizuálně v zobrazení návrhu, takže víte, kam umístit prvky formuláře, protože značky rozbalovací nabídky nejsou platné (a nebudou fungovat) mimo prvek formuláře. Jak můžete vidět na obrázku, formulář je červená tečkovaná čára v zobrazení návrhu.

Vyberte seznam/nabídku

Image
Image

Rozbalovací nabídky se v aplikaci Dreamweaver nazývají položky „seznamu“nebo „nabídky“. Chcete-li přidat jeden do formuláře, musíte přejít do nabídky Formulář v nabídce Vložit a zvolit "Seznam/Nabídka." Ujistěte se, že se kurzor nacházel v červené tečkované čáře pole formuláře.

Okno zvláštních možností

Image
Image

V možnostech Dreamweaveru je obrazovka Usnadnění. Pokud vyplníte těchto pět možností, vaše rozbalovací nabídky budou okamžitě přístupnější než jiné webové stránky.

Přístupnost formuláře

Image
Image

Možnosti přístupnosti jsou:

Label

Pole štítku se zobrazí jako text vedle prvku formuláře. Zadejte název rozbalovací nabídky. Může to být otázka nebo krátká fráze, na kterou rozbalovací nabídka odpoví.

Style

HTML obsahuje štítek štítku pro identifikaci štítků formulářů pro webový prohlížeč. Můžete se rozhodnout zabalit rozbalovací nabídku a text štítku štítkem, použít atribut „pro“na štítku štítku k identifikaci, na který štítek formuláře odkazuje, nebo štítek nepoužívat vůbec.

Pozice

Svůj štítek můžete umístit před nebo za rozbalovací nabídku.

Přístupový klíč

Návštěvníci mohou použít přístupový klíč s klávesami„Obrázek“nebo Option, aby se dostali přímo do daného pole formuláře. Díky této klávesové zkratce se vaše formuláře velmi snadno používají bez myši. alt="

Index karty

Index karet je způsob, jakým by uživatelé měli přistupovat k polím formuláře, když pomocí klávesnice procházejí webovou stránkou.

Až aktualizujete možnosti usnadnění, klikněte na OK.

Vyberte nabídku

Image
Image

Jakmile se v zobrazení návrhu aplikace Dreamweaver zobrazí rozbalovací nabídka, musíte přidat různé prvky. Nejprve vyberte rozbalovací nabídku kliknutím na ni. Dreamweaver umístí další tečkovanou čáru kolem rozbalovací nabídky, aby ukázal, že jste si ji vybrali.

Vlastnosti nabídky

Image
Image

Nabídka vlastností se změní na vlastnosti seznamu/nabídky pro tuto rozevírací nabídku. Zde můžete dát své nabídce ID (kde je napsáno „vybrat“), rozhodnout se, zda to má být seznam nebo nabídka, přiřadit jí třídu stylu z vaší šablony stylů a přiřadit hodnoty k rozevíracímu seznamu.

Jaký je rozdíl mezi seznamem a nabídkou?

Dreamweaver nazývá rozbalovací nabídku v jakékoli rozbalovací nabídce, která umožňuje pouze jeden výběr. „Seznam“umožňuje více možností v rozevíracím seznamu a může mít více než jednu položku.

Pokud chcete, aby rozbalovací nabídka měla více řádků, změňte ji na typ „seznam“a pole „výběry“ponechte nezaškrtnuté.

Přidat nové položky seznamu

Image
Image

Chcete-li do svého menu přidat nové položky, klikněte na tlačítko „Seznam hodnot…“, které otevře výše uvedené okno. Poté zadejte štítek položky do prvního pole. Zobrazí se na stránce.

Přidat další a znovu objednat

Image
Image

Kliknutím na ikonu plus přidáte další položky. Chcete-li je znovu seřadit v seznamu, použijte šipky nahoru a dolů vpravo.

Uveďte hodnoty všech položek

Image
Image

Pokud necháte hodnotu prázdnou, štítek přejde do formuláře. Ale můžete dát všem svým položkám hodnoty - abyste do formuláře poslali alternativní informace. Budete to hodně používat pro věci, jako jsou skoková menu a hypertextové odkazy.

Vyberte výchozí

Image
Image

Webové stránky ve výchozím nastavení zobrazují libovolnou rozbalovací položku, která je jako výchozí uvedena jako první. Pokud však chcete vybrat jinou, zvýrazněte ji v poli "Počáteční vybráno" v nabídce Vlastnosti.

Zobrazit svůj seznam v zobrazení návrhu

Image
Image

Jakmile dokončíte úpravy vlastností, Dreamweaver zobrazí váš rozevírací seznam s vybranou výchozí hodnotou.

Zobrazit svůj seznam v zobrazení kódu

Image
Image

Pokud přepnete do zobrazení kódu, uvidíte, že Dreamweaver přidá vaši rozevírací nabídku s čistým kódem. Jedinými atributy navíc jsou možnosti usnadnění. Celý kód je odsazený a velmi snadno čitelný a srozumitelný.

Uložit a zobrazit v prohlížeči

Image
Image

Pokud dokument uložíte a zobrazíte ve webovém prohlížeči, uvidíte, že vaše rozbalovací nabídka vypadá přesně tak, jak byste očekávali.

Ale nic to nedělá…

Image
Image

Nabídka, kterou jsme vytvořili výše, vypadá dobře, ale nic nedělá. Abyste jej přiměli něco udělat, musíte nastavit akci formuláře na samotném formuláři.

Naštěstí má Dreamweaver vestavěný formulář rozbalovací nabídky, který můžete okamžitě použít na svém webu, aniž byste se museli učit o formulářích, CGI nebo skriptování. Říká se tomu Jump Menu.

Skoková nabídka Dreamweaveru nastavuje rozevírací nabídku s názvy a adresami URL. Poté si můžete vybrat položku v nabídce a webová stránka se přesune na toto místo, stejně jako kdybyste klikli na odkaz.

Přejděte do nabídky Vložit a vyberte Formulář a poté Nabídka Přejít.

Okno skokové nabídky

Image
Image

Na rozdíl od standardního rozevíracího menu, nabídka Skočit otevírá nové okno, ve kterém můžete pojmenovat položky nabídky a přidat podrobnosti o tom, jak má formulář fungovat.

U první položky změňte text „bez názvu1“na to, co chcete, aby četl, a přidejte adresu URL.

Přidat položky do nabídky skoků

Image
Image

Kliknutím na přidat položku přidáte novou položku do nabídky skoků. Přidejte tolik položek, kolik chcete.

Možnosti nabídky skoku

Image
Image

Jakmile přidáte všechny požadované odkazy, měli byste si vybrat možnosti:

Otevřít adresy URL v

Pokud máte sadu rámců, můžete odkazy otevřít v jiném rámci. Nebo můžete změnit možnost hlavního okna na speciální cíl, aby se adresa URL otevřela v novém okně nebo jinde.

Název menu

Přidělte své nabídce jedinečné ID stránky. Je to nutné, aby skript fungoval správně. Také vám umožňuje mít více skokových nabídek v jedné podobě – dejte jim různé názvy.

Za nabídku vložit tlačítko Přejít

Tuto volbu volím rád, protože při změně nabídky skript někdy nefunguje. Je také dostupnější.

Po změně adresy URL vyberte první položku

Toto vyberte, pokud máte jako první položku nabídky výzvu jako „Vyberte jednu“. Tím zajistíte, že tato položka zůstane na stránce jako výchozí.

Zobrazení návrhu nabídky skoku

Image
Image

Stejně jako u vaší první nabídky nastaví Dreamweaver vaši nabídku skoků v zobrazení návrhu s viditelnou výchozí položkou. Poté můžete rozevírací nabídku upravit jako kteroukoli jinou.

Pokud jej upravujete, ujistěte se, že jste u položek nezměnili žádná ID; jinak skript nemusí fungovat.

Skoková nabídka v prohlížeči

Image
Image

Uložením souboru a stisknutím klávesy F12 se stránka zobrazí ve vašem preferovaném prohlížeči. Zde můžete vybrat možnost, kliknout na „Go“a nabídka skoků funguje.

Doporučuje: