SP stavebn a Obchodn akademie Kladno Cyrila Boudy
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 ADOBE DREAMWEAVER CS 6 Práce s formuláři Autor: Ing. Vladimír Műller
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Tematický okruh ADOBE DREAMWEAVER CS 6 Anotace Studenti 3. ročníku, obor Ekonomické lyceum, předmět Informační a komunikační technologie, Adobe Dreamweaver CS 6. Vložení formuláře, textového pole a dalších standardních typů polí. Metodický pokyn Žáci se na praktickém příkladu seznámí s vkládáním formuláře a jeho ovládacích prvků v prostředí programu Adobe Dreamweaver CS 6. Druh materiálu prezentace Datum tvorby 2. 3. 2014 Číslo materiálu VY_32_INOVACE_Mu 1_16 EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 2
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 O formulářích Formuláře jsou nástroje pro získávání dat. Informace jsou vkládány do předem připravených oblastí nazývaných pole. Formuláře by měly být navrženy přehledně a srozumitelně. Papírové formuláře používají oddělené stránky nebo grafické okraje, webové formuláře používají značku <form> a specifické elementy HTML. Online formuláře mají výhodu, protože data mohou být přímo přesouvána do databáze, odpadá ruční nebo poloautomatický převod do elektronické formy. Textové pole – umožňuje vkládání textu a čísel Textová oblast – stejné jako textové pole, ale určené pro více textu Přepínač – výběr právě jedné možnosti ze skupiny položek Zaškrtávací pole – grafická možnost volby ano X ne, možnost výběru více položek Seznam, nabídka – zobrazení záznamů v roletové nabídce Skrytá pole – předdefinovaná datová pole, která uživatel nevidí (datum, čas, …) Tlačítko – potvrzení nebo vykonání jiné jednoúčelové funkce (odeslat, reset, tisk) EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 3
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Prohlédnutí dokončeného souboru 1. Spusťte Dreamweaver CS 6, pokud není zobrazeno okno Soubory, pak stiskněte klávesu F 8 (nebo CTRL+SHIFT+F) a zvolte web DW-CS 6 2. V okně Soubory rozbalte složku lekce 12 3. Vyberte soubor prihlaseni_dokonceno. html a prohlédněte si ho ve svém hlavním prohlížeči. (Pravým tlačítkem myši – Náhled v prohlížeči. ) Stránka obsahuje několik prvků formulářů, pokuste se zmapovat jejich chování: 1. Kontrola zadání a platnosti emailové adresy 2. Kontrola délky a shodnosti hesla Zavřete prohlížeč a vraťte se do Dreamweaveru. EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 4
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Přidání formuláře na stránku Otevřete okno Datové zdroje a klikněte na ikonu kategorie Předlohy. Pravým tlačítkem na greenstart_predloha a v místní nabídce zvolte příkaz Nový z předlohy. Soubor uložte pod názvem prihlaseni. html do kořenové složky webu. Nastavte ID formuláře na ecotour. Změňte Sem vložte hlavní nadpis na Zelené cestování, Sem vložte podnadpis na Formulář pro přihlášení a Sem vložte obsah na Pro přihlášení vyplňte prosím následující formulář: a stiskněte Enter, čímž vytvoříte odstavec. Otevřete okno Vložit, vyberte kategorii Formulář a klikněte na Formulář, Dreamweaver vloží element <form> a vizuálně ho označí červeným čárkovaným obrysem. EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 5
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Otevřete okno Styly CSS, v šabloně mojestyly. css vyberte pravidlo. content, klikněte na ikonu Nové pravidlo, vyberte Složený prvek a pojmenujte nové pravidlo. content section #ecotour a stiskněte OK. V kategorii Rámeček vložte v části Margin do polí Left a Right hodnotu 15 px a stiskněte OK. Soubor uložte. Právě jste vytvořili formulář a nyní do něj budeme vkládat pole. EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 6
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Vkládání textových elementů formuláře Nejprve zkontrolujeme, zda je v Dreamweaveru nastavena přístupnost formulářů: Zvolte Upravit > Předvolby, zvolte kategorii Usnadnění přístupu a zkontrolujte zda je zaškrtnuté pole Objekty formuláře. Stiskněte OK. Nyní vložíme do formuláře <form> textové pole. Do textového pole lze zapsat alfanumerické znaky – písmena a číslice. Většinou se nastavuje Max. počet znaků (v inspektoru Vlastnosti). Důvodem je následné zpracování v databázi. EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 7
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Vložení textového pole Otevřete soubor prihlaseni. html z kořenové složky webu, kurzor umístěte dovnitř červeného obrysu formuláře, v okně Vložit v kategorii Formulář klikněte na ikonu Textové pole. Vyplňte ID a Popis a stiskněte OK. Vložení dalších standardních textových polí je stejné, zkuste pracovat s dalšími typy textových polí. Soubor uložte. EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 8
SPŠ stavební a Obchodní akademie, Kladno, Cyrila Boudy 2954 Použité zdroje: Adobe Dream. Weaver CS 6. Computer press, 2013. ISBN 978 -802 -5137 -352. Adobe Dreamweaver CS 6. Knihy. cpress. cz [online]. [cit. 2014 -02 -01]. Dostupné z: http: //knihy. cpress. cz/adobe-dreamweaver-cs 6 oficialni-vyukovy-kurz. html# EU peníze školám CZ. 1. 07/1. 5. 00/34. 0154 9
- Slides: 9