Aplikace 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é. Tento tutoriál vás provede kroky pro vytvoření rozbalovací nabídky v aplikaci Dreamweaver.
Nabídky pro skok Dreamweaveru
Aplikace Dreamweaver 8 také nabízí průvodce vytvořením navigační nabídky pro navigaci na vašem webu. Na rozdíl od základních rozbalovacích nabídek toto menu skutečně něco udělá po dokončení. Nebudete muset psát žádné JavaScript ani CGI, abyste dostali rozbalovací formulář do práce. Tento návod také vysvětluje, jak pomocí průvodce Dreamweaver 8 vytvořit skokové menu.
01 z 20
Nejprve vytvořte formulář
Důležitá poznámka O formulářích HTML a Dreamweaveru:
Kromě speciálních kouzelníků, jako je skokové menu, aplikace Dreamweaver vám nepomáhá vytvářet formuláře HTML "pracovat". K tomu potřebujete CGI nebo JavaScript. Přečtěte si prosím můj výukový program pro tvorbu formulářů ve formátu HTML.
Když do svého webu přidáváte rozbalovací nabídku, první věc, kterou potřebujete, je formulář, který jej obklopí. V aplikaci Dreamweaver přejděte do nabídky Vložit a klepněte na tlačítko Formulář a vyberte možnost Formulář.
02 z 20
Formulář se zobrazí v návrhovém zobrazení
Aplikace Dreamweaver vizuálně zobrazuje umístění formuláře v návrhovém zobrazení, takže víte, kam umístit prvky formuláře. To je důležité, protože tagy rozbalovací nabídky nejsou platné (a nebudou fungovat) mimo prvek formuláře. Jak je vidět na obrázku, formulář je červená tečkovaná čára v návrhovém zobrazení.
03 z 20
Zvolte seznam / nabídku
Rozbalovací nabídky se v aplikaci Dreamweaver označují jako položky "seznam" nebo "nabídky". Chcete-li do formuláře přidat jeden, musíte vstoupit do nabídky Form v nabídce Vložit a zvolit "Seznam / Nabídka". Ujistěte se, že kurzor byl v červeně tečkovaném řádku formuláře.
04 z 20
Okno Speciální možnosti
Ve volbách Dreamweaveru je na obrazovce přístupnost. Rozhodl (-a) se, že mám Dreamweaver zobrazit všechny atributy dostupnosti. A tato obrazovka je výsledkem toho. Formuláře jsou místem, kde mnoho webových stránek spadne do přístupnosti a vyplněním těchto pěti možností budou vaše rozbalovací nabídky okamžitě přístupnější.
05 z 20
Dostupnost formuláře
Dostupné možnosti jsou:
Označení
Toto je název pole. Zobrazí se jako text vedle prvku formuláře.
Napište, co chcete zavolat do rozbalovací nabídky. Může se jednat o otázku nebo krátkou frázi, na kterou bude odpovídat rozevírací nabídka.
Styl
HTML obsahuje značku štítku pro identifikaci štítků formuláře do prohlížeče. Vaše volby mají zabalit rozbalovací nabídku a text štítku se značkou, použít atribut "pro" na štítku štítku, aby zjistil, který značku formuláře odkazuje, nebo vůbec nepoužít značku štítku.
Dávám přednost použití atributu, protože když musím z nějakého důvodu přesunout štítek, bude stále připojen k správnému poli formuláře.
Pozice
Označení můžete umístit před nebo po rozbalovací nabídce.
Přístupový klíč
Toto je klíč, který lze použít společně s klávesami Alt nebo Option, abyste se dostali přímo do tohoto pole formuláře. Díky tomu jsou vaše formuláře velmi snadné, aniž byste potřebovali myš. Jak nastavit přístupový klíč v jazyce HTML
Tabulkový index
Jedná se o pořadí, v němž má být pole formuláře přístupné při použití klávesnice na kartě prostřednictvím webové stránky. Pochopení tabindexu
Po aktualizaci možností usnadnění klepněte na tlačítko OK.
06 z 20
Vyberte nabídku
Jakmile máte rozbalovací nabídku zobrazen v návrhovém zobrazení, musíte do něj přidat různé prvky. Nejprve vyberte rozbalovací nabídku kliknutím na ni. Dreamweaver umístí další roztrženou linku do rozbalovací nabídky pouze pro zobrazení, že jste ji vybrali.
07 z 20
Vlastnosti nabídky
Nabídka vlastností se změní na vlastnosti seznamu / nabídky pro tuto rozbalovací nabídku. Zde můžete zadat své ID číslo (kde se říká "select"), rozhodnout se, zda chcete být listem nebo nabídkou, dáte mu to styl stylu z vašeho listu stylů a přidělíte hodnotám rozbalovací nabídku.
Jaký je rozdíl mezi seznamem a nabídkou?
Aplikace Dreamweaver vyvolá rozbalovací nabídku v nabídce, která umožňuje pouze jednu volbu. "Seznam" umožňuje v rozbalovací nabídce více možností a může být více než jedna položka vysoká.
Pokud chcete, aby rozbalovací nabídka byla více řádků vysoká, změňte ji na typ seznamu a ponechte pole "výběry" nezaškrtnuté.
08 z 20
Přidat nové položky seznamu
Chcete-li do nabídky přidat nové položky, klikněte na tlačítko "Seznam hodnot ...". Otevře se výše uvedené okno. Do prvního políčka zadejte štítek. Toto se zobrazí na stránce. Pokud ponecháte prázdnou hodnotu, bude to také to, co bude odesláno ve formuláři.
09 z 20
Přidat více a znovu uspořádat
Kliknutím na ikonu plus přidáte další položky. Chcete-li je znovu objednat v seznamu, použijte šipky nahoru a dolů vpravo.
10 z 20
Uveďte hodnoty všech položek
Jak jsem zmínil v kroku 8, pokud ponecháte prázdnou hodnotu, štítek bude odeslán do formuláře. Můžete však dát všechny své položky - zašlete alternativní informace do vašeho formuláře. Hodně to využijete pro věci jako skokové nabídky.
11 z 20
Vyberte výchozí
Výchozí webové stránky zobrazovat jako rozbalovací položku výchozí položku. Pokud však chcete vybrat jinou, zvýrazněte ji v poli "Initially selected" v nabídce Properties.
12 z 20
Zobrazit seznam v návrhovém zobrazení
Po dokončení úpravy vlastností aplikace Dreamweaver zobrazí váš rozevírací seznam s vybranou výchozí hodnotou.
13 z 20
Zobrazit seznam v zobrazení kódu
Pokud přepnete na zobrazení kódu, můžete vidět, že aplikace Dreamweaver přidá rozbalovací nabídku s velmi čistým kódem. Jediné další atributy jsou ty, které jsme přidali s možnostmi usnadnění přístupu. Kód je celý odsazený a velmi snadno čitelný a srozumitelný. Dokonce zadává vybraný atribut = "selected", protože jsem Dreamweaverovi řekl, že jsem psát XHTML.
14 z 20
Uložit a zobrazit v prohlížeči
Pokud dokument uložíte a zobrazí ho ve webovém prohlížeči, můžete vidět, že rozbalovací nabídka vypadá stejně, jako byste očekávali.
15 z 20
Ale to nic nedělá
Menu, které jsme vytvořili výše, vypadá dobře, ale nic neudělá. Abyste něco udělali, musíte vytvořit formu akce na samotném formuláři, což je zcela jiný výukový program.
Naštěstí má Dreamweaver vestavěnou rozbalovací nabídku, kterou můžete okamžitě použít na svém webu, aniž byste se museli seznamovat s formuláři, CGI nebo skriptováním. Jmenuje se Jump Menu.
Nabídka Jump Dreamweaver vytvoří rozbalovací nabídku s názvy a adresami URL. Potom můžete vybrat položku v nabídce a webová stránka se přesune na toto místo, jako kdybyste klikli na odkaz.
Přejděte do nabídky Vložit a zvolte Formulář a poté Jump Menu.
16 z 20
Okno Jump Menu
Na rozdíl od standardní rozevírací nabídky se v nabídce Skok otevře nové okno, kde můžete pojmenovat položky nabídky a přidat podrobnosti o tom, jak má formulář fungovat.
Pro první položku změňte text "untitled1" na to, co chcete přečíst, a přidejte adresu URL, do níž by měl odkaz odkazovat.
17 z 20
Přidat položky do nabídky Jump
Klepnutím na položku přidat přidáte novou položku do nabídky skoku. Přidejte tolik položek, kolik chcete.
18 z 20
Možnosti nabídky skoku
Jakmile přidáte všechny požadované odkazy, měli byste zvolit své možnosti:
Otevřít adresy URL v adresáři
Pokud máte sadu snímků, můžete je otevřít v jiném rámečku. Nebo můžete změnit možnost Hlavní okno na speciální cíl, aby se adresa URL otevřela v novém okně nebo jinde.
Název nabídky
Zadejte své jedinečné ID stránky. To je nutné, aby skript fungoval správně. To také umožňuje mít několik skokových nabídek v jedné formě - jen jim dáte všechna různá jména.
Vložte tlačítko Go po menu
Rád tuto možnost vybírám, protože někdy skript nefunguje při změně nabídky. Je také přístupnější.
Vyberte první položku po změně adresy URL
Tuto volbu vyberte, pokud máte jako první položku nabídky výzvu jako "Vyberte jednu". To zajistí, že položka zůstane na stránce výchozí.
19 z 20
Zobrazení nabídky skoku nabídky
Stejně jako u prvního menu aplikace Dreamweaver nastaví nabídku skoku v návrhovém zobrazení s tím, že bude vidět výchozí položku. Rozbalovací nabídku můžete upravit stejně, jako byste měli jiný.
Pokud to upravíte, nezapomeňte na položky změnit žádné ID, jinak nemusí fungovat skript.
20 z 20
Přeskočit nabídku v prohlížeči
Uložením souboru a stisknutím klávesy F12 se zobrazí stránka ve vašem preferovaném prohlížeči. Zde můžete vybrat jednu možnost, kliknout na tlačítko "Jít" a skokové menu funguje!