Program Dreamweaver uľahčuje vytváranie rozbaľovacích ponúk pre váš web. Ale ako všetky HTML formuláre môžu byť trochu zložité. Tento návod vás prevedie postupmi pri vytváraní rozbaľovacej ponuky v aplikácii Dreamweaver.
Ponuky skoku programu Dreamweaver
Aplikácia Dreamweaver 8 tiež poskytuje sprievodcu na vytvorenie skokovej ponuky pre navigáciu na vašom webe. Na rozdiel od základných drop-down menu, toto menu skutočne urobí niečo, čo ste skončili. Nebudete musieť písať ľubovoľný JavaScript alebo CGI, aby ste dostali svoj rozbaľovací formulár do práce. Tento návod tiež vysvetľuje, ako používať sprievodcu aplikáciou Dreamweaver 8 na vytvorenie ponuky skoku.
01 z 20
Najprv vytvorte formulár
Dôležitá poznámka O formulároch HTML a Dreamweaver:
S výnimkou špeciálnych sprievodcov, ako je skokové menu, aplikácia Dreamweaver nepomôže vytvárať formáty HTML "pracovať". Na to potrebujete CGI alebo JavaScript. Viac informácií nájdete v príručke Vytvorenie HTML formulárov.
Keď pridávate rozbaľovaciu ponuku na svoj web, prvá vec, ktorú potrebujete, je forma, ktorá ju obklopí. V aplikácii Dreamweaver prejdite do ponuky Vložiť a kliknite na položku Formulár a vyberte možnosť Formulár.
02 z 20
Formulár sa zobrazuje v zobrazení návrhu
Aplikácia Dreamweaver zobrazuje umiestnenie formulára vizuálne v zobrazení návrhu, takže viete, kam umiestniť prvky formulára. To je dôležité, pretože tagy 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 konštrukčnom zobrazení.
03 z 20
Vyberte zoznam / ponuku
Rozbaľovacie ponuky sa v aplikácii Dreamweaver označujú ako položky "zoznam" alebo "ponuka". Ak chcete pridať jeden formulár, musíte prejsť do ponuky Formulár v ponuke Vložiť a vybrať položku "Zoznam / ponuka". Uistite sa, že kurzor bol v riadku s červeným bodkovaným políčkom formulára.
04 z 20
Okno Špeciálne možnosti
Vo voľbách aplikácie Dreamweaver sa nachádza obrazovka Prístupnosť. Rozhodol som sa, že Dreamweaver mi ukáže všetky atribúty prístupnosti. A táto obrazovka je výsledkom toho. Formuláre sú miestom, kde mnoho webových stránok spadne do prístupnosti a vyplnením týchto piatich možností budú okamžite prístupnejšie rozbaľovacie ponuky.
05 z 20
Prístupnosť formulára
Možnosti prístupu sú:
štítok
Toto je názov poľa. Zobrazí sa ako text vedľa vášho prvku formulára.
Napíšte, čo chcete zavolať do rozbaľovacej ponuky. Môže to byť otázka alebo krátka fráza, na ktorú sa odpíše rozbaľovacia ponuka.
Štýl
HTML obsahuje značku štítku na identifikáciu značiek formulára prehliadača. Vašou voľbou je rozbaliť rozbaľovaciu ponuku a text štítku so značkou, aby ste použili atribút "pre" na značke štítku, aby ste zistili, ktorý značku formulára odkazuje, alebo celú značku značiek nepoužívať.
Dávam prednosť použitiu atribútu, pretože potom, ak musím z nejakého dôvodu presunúť štítok, bude stále pripojený k správnemu poľu formulára.
pozície
Štítok môžete umiestniť pred alebo za rozbaľovacou ponukou.
Prístupový kľúč
Toto je kľúč, ktorý môžete použiť spolu s klávesami Alt alebo Option, aby ste sa dostali priamo do tohto formulárového poľa. Vďaka tomu sa vaše formuláre veľmi ľahko používajú bez potreby myši. Ako nastaviť prístupový kľúč v
Index záložiek
Toto je poradie, v ktorom má byť pole formulára prístupné pri použití klávesnice na kartu cez webovú stránku. Pochopenie tabindexu
Po aktualizácii možností prístupnosti kliknite na tlačidlo OK.
06 z 20
Vyberte ponuku
Keď máte rozbaľovaciu ponuku zobrazenú v konštrukčnom zobrazení, musíte do nej pridať rôzne prvky. Najprv vyberte rozbaľovaciu ponuku kliknutím na ňu. Dreamweaver položí ďalšiu bodkovanú čiaru okolo rozbaľovacej ponuky, aby ste ukázali, že ste ju vybrali.
07 z 20
Vlastnosti ponuky
Ponuka vlastností sa zmení na vlastnosti zoznamu / ponuky pre túto rozbaľovaciu ponuku. Tu môžete poskytnúť menu ID (kde sa hovorí "vybrať"), rozhodnúť sa, či chcete byť Lis alebo menu, dať mu štýl štýl zo svojho štýlu listu a priradiť hodnoty do drop-down.
Aký je rozdiel medzi zoznamom a ponukou?
Aplikácia Dreamweaver vyvolá rozbaľovaciu ponuku ľubovoľného rozbaľovacieho zoznamu, ktorý umožňuje iba jeden výber. "Zoznam" umožňuje v rozbaľovacej ponuke viacero možností a môže byť vysoká ako jedna položka.
Ak chcete, aby rozbaľovacia ponuka bola viac riadkov vysoká, zmeňte ju na typ zoznamu a nechajte pole "Výbery" nezačiarknuté.
08 z 20
Pridať položky z nového zoznamu
Ak chcete do svojej ponuky pridať nové položky, kliknite na tlačidlo "Zoznam hodnôt ...". Tým sa otvorí vyššie uvedené okno. Do prvého poľa napíšte označenie položky. Toto sa zobrazí na stránke. Ak ponecháte hodnotu prázdnu, tak aj to, čo bude odoslané do formulára.
09 z 20
Pridať viac a zoradiť
Kliknutím na ikonu plus pridáte ďalšie položky. Ak ich chcete znova objednať v zozname, použite šípky hore a dole vpravo.
10 z 20
Zadajte hodnoty všetkých položiek
Ako som spomenul v kroku 8, ak necháte hodnotu prázdnu, štítok sa odošle do formulára. Môžete však dať všetky hodnoty položiek - na odoslanie alternatívnych informácií do formulára. Budete to veľa používať pre veci ako skokové ponuky.
11 z 20
Vyberte položku Predvolené
Predvolené webové stránky zobrazujú prvú rozbaľovaciu položku ako predvolenú položku. Ak však chcete vybrať iný, zvýraznite ho v poli "Initially selected" v menu Properties.
12 z 20
Pozrite si zoznam v zobrazení návrhu
Po dokončení úprav vlastností aplikácia Dreamweaver zobrazí váš rozbaľovací zoznam s vybratou predvolenou hodnotou.
13 z 20
Pozrite si zoznam v zobrazení kódu
Ak prejdete na zobrazenie kódu, môžete vidieť, že aplikácia Dreamweaver pridá vaše rozbaľovacie menu s veľmi čistým kódom. Jediné ďalšie atribúty sú tie, ktoré sme pridali s možnosťami prístupnosti. Kód je celý odsadený a veľmi ľahko čitateľný a pochopiteľný. Vkladá dokonca aj vybraný atribút = "selected", pretože som povedal Dreamweaverovi, že predvolene píšem XHTML.
14 z 20
Uložiť a zobraziť v prehliadači
Ak dokument uložíte a zobrazí ho vo webovom prehliadači, môžete vidieť, že rozbaľovacia ponuka vyzerá tak, ako by ste očakávali.
15 z 20
Ale to nie je nič
Menu, ktoré sme vytvorili vyššie, vyzerá dobre, ale nerobí nič. Aby ste mohli niečo urobiť, musíte nastaviť formálnu akciu na samotnom formulári, čo je úplne iný návod.
Našťastie Dreamweaver má vstavanú rozbaľovaciu ponuku, ktorú môžete ihneď použiť na svojich stránkach, bez toho, aby ste sa museli učiť o formulároch, CGI alebo skriptovaní. Nazýva sa to Jump Menu.
Ponuka Prejsť na Dreamweaver vytvorí rozbaľovaciu ponuku s názvami a adresami URL. Potom môžete vybrať položku v ponuke a webová stránka sa presunie na toto miesto, rovnako ako keby ste klikli na odkaz.
Prejdite do ponuky Vložiť a zvoľte Formulár a potom ponuku Skok.
16 z 20
Okno ponuky Skok
Na rozdiel od štandardnej rozbaľovacej ponuky sa v ponuke Skok otvorí nové okno, v ktorom môžete pomenovať položky ponuky a pridať podrobnosti o tom, ako má fungovať formulár.
Pre prvú položku zmeňte text "untitled1" na to, čo chcete čítať, a pridajte adresu URL, ku ktorej má odkaz smerovať.
17 z 20
Pridať položky do ponuky skokov
Kliknutím na položku Pridať pridáte novú položku do ponuky skoku. Pridajte toľko položiek, koľko chcete.
18 z 20
Možnosti ponuky skoku
Po pridaní všetkých požadovaných odkazov by ste mali vybrať svoje možnosti:
Otvoriť adresy URL v priečinku
Ak máte sadu rámcov, odkazy môžete otvoriť v inom rámčeku. Alebo môžete zmeniť možnosť Hlavného okna na špeciálny cieľ tak, aby sa adresa URL otvorila v novom okne alebo inde.
Názov ponuky
Uveďte svoje menu jedinečné ID stránky. Je to potrebné, aby skript fungoval správne. Umožňuje tiež mať viacero skokových ponúk v jednej forme - len im dávať rôzne názvy.
Vložiť tlačidlo Go po Menu
Rád to vybrať, pretože niekedy skript nefunguje, keď sa menu zmení. Je tiež prístupnejší.
Vyberte prvú položku po zmene adresy URL
Vyberte túto možnosť, ak máte ako prvú položku ponuky výzvu ako "Vybrať jedno". Tým sa zabezpečí, že táto položka zostane na stránke predvolená.
19 z 20
Zobrazenie návrhu skoku
Rovnako ako pri vašom prvom menu, Dreamweaver nastaví vaše skokové menu v zobrazení návrhu s viditeľnou predvolenou položkou. Rozbaľovaciu ponuku môžete upraviť tak, ako by ste iný.
Ak to upravíte, nezabudnite nezmeniť žiadne ID na položkách, inak skript nemusí fungovať.
20 z 20
Skokové menu v prehliadači
Uložením súboru a stlačením klávesu F12 sa zobrazí stránka vo vašom preferovanom prehliadači. Tu môžete vybrať možnosť, kliknite na tlačidlo "Choď" a skok ponuka funguje!