Ujistěte se, že jste kurzor umístili do oblasti stránky, ve které chcete widget vložit.
Naposledy aktualizováno
30. 4. 2026
- Příručka uživatele aplikace Dreamweaver
- Úvod
- Dreamweaver a Creative Cloud
- Pracovní plochy a zobrazení aplikace Dreamweaver
- Nastavení webů
- O webech aplikace Dreamweaver
- Nastavení lokální verze webu
- Připojení k publikačnímu serveru
- Nastavení testovacího serveru
- Import a export nastavení webu aplikace Dreamweaver
- Přenos stávajících webových stránek ze vzdáleného serveru do kořenové složky lokálního webového místa
- Funkce usnadnění přístupu v aplikaci Dreamweaver
- Rozšířená nastavení
- Nastavení předvoleb webového místa pro přenos souborů
- Úprava nastavení serveru proxy v aplikaci Dreamweaver
- Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
- Používání systému Git v aplikaci Dreamweaver
- Správa souborů
- Vytváření a otevírání souborů
- Správa souborů a složek
- Získání souborů ze serveru a odeslání souborů na server
- Zpřístupnění/vyhrazení souborů
- Synchronizace souborů
- Porovnání souborů a nalezení rozdílů
- Maskování souborů a složek ve webu aplikace Dreamweaver
- Povolení poznámek k návrhu pro weby Dreamweaver
- Předcházení potenciálnímu zneužití modulu Gatekeeper
- Rozvržení a návrh
- Používání vizuálních pomůcek pro rozvržení
- O používání souborů CCS k rozvržení stránky
- Navrhování responzivních webů pomocí nástroje Bootstrap
- Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
- Zobrazení obsahu pomocí tabulek
- Barvy
- Responzivní návrh s využitím rozvržení s plovoucí mřížkou
- Funkce Extrakt v aplikaci Dreamweaver
- CSS
- Vysvětlení kaskádových seznamů stylů
- Rozvržení stránek pomocí panelu CSS Designer
- Použití preprocesorů CSS v aplikaci Dreamweaver
- Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
- Přesunutí pravidel CSS v aplikaci Dreamweaver
- Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
- Práce s tagy div
- Použití přechodů na pozadí
- Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
- Formátování kódu
- Obsah stránky a datové zdroje
- Nastavení vlastností stránky
- Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
- Práce s textem
- Vyhledání a nahrazení textu, tagů a atributů
- Panel DOM
- Úpravy v živém zobrazení
- Kódování dokumentů v aplikaci Dreamweaver
- Výběr a zobrazení elementů v okně dokumentu
- Nastavení vlastností textu v Inspektoru vlastností
- Kontrola pravopisu webové stránky
- Pomocí vodorovných linek v aplikaci Dreamweaver
- Přidání a úprava kombinací písma v aplikaci Dreamweaver
- Práce s datovými zdroji
- Vložení a aktualizace dat v aplikaci Dreamweaver
- Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
- Vložení a úprava obrázků v aplikaci Dreamweaver
- Přidání multimediálních objektů
- Přidání videa v aplikaci Dreamweaver
- Vložení videa HTML 5
- Vložit soubory SWF
- Přidání zvukových efektů
- Vložte zvuk HTML5 v aplikaci Dreamweaver
- Práce s položkami knihoven
- Používání arabského a hebrejského textu v aplikaci Dreamweaver
- Odkazy a navigace
- Ovládací prvky a efekty jQuery
- Kódování webových stránek
- Informace o psaní kódu v aplikaci Dreamweaver
- Prostředí pro psaní kódu v aplikaci Dreamweaver
- Nastavení předvoleb kódování
- Přizpůsobení barevného zvýraznění kódu
- Psaní a úprava kódu
- Našeptávání kódu a dokončování kódu
- Sbalení a rozbalení kódu
- Opakované použití kódu v podobě výstřižků
- Linting kódu
- Optimalizace kódu
- Úprava kódu v zobrazení Návrh
- Práce s obsahem hlavičky stránek
- Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
- Používání knihoven tagů v aplikaci Dreamweaver
- Import vlastních tagů do aplikace Dreamweaver
- Práce s funkcemi JavaScriptu (obecné pokyny)
- Použití vestavěných chování jazyka JavaScript
- O XML a XSLT
- Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
- Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
- Přidání entit znaku pro XSLT v aplikaci Dreamweaver
- Formátování kódu
- Pracovní postupy pro různé produkty
- Instalace a používání rozšíření v aplikaci Dreamweaver
- Aktualizace v rámci aplikace v aplikaci Dreamweaver
- Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
- Práce s aplikacemi Fireworks a Dreamweaver
- Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
- Integrace mezi aplikacemi Dreamweaver a Business Catalyst
- Vytváření e-mailových kampaní na míru
- Šablony
- O předlohách aplikace Dreamweaver
- Rozpoznání předloh a dokumentů založených na předloze
- Vytvoření předlohy aplikace Dreamweaver
- Vytváření upravitelných oblastí v šablonách
- Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
- Použijte volitelné oblasti v předlohách
- Definování upravitelných atributů tagu v aplikaci Dreamweaver
- Postup vytvoření vnořených šablon v aplikaci Dreamweaver
- Úprava, aktualizace nebo odstranění předloh
- Export a import obsahu XML v aplikaci Dreamweaver
- Aplikace nebo odstranění předlohy z existujícího dokumentu.
- Úprava obsahu v předlohách Dreamweaver
- Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
- Nastavení předvoleb zvýraznění pro oblasti předlohy
- Výhody používání předloh v aplikaci Dreamweaver
- Mobilní zařízení a zařízení s více displeji
- Dynamické weby, stránky a webové formuláře
- Informace o webových aplikacích
- Nastavení počítače pro vývoj aplikací
- Řešení problémů s připojením databází
- Odstranění skriptů připojení v aplikaci Dreamweaver
- Návrh dynamických stránek
- Přehled zdrojů dynamického obsahu
- Definice zdrojů dynamického obsahu
- Přidání dynamického obsahu na stránky
- Změna dynamického obsahu v aplikaci Dreamweaver
- Zobrazení záznamů databáze
- Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
- Přidání uživatelského chování serveru v aplikaci Dreamweaver
- Vytváření formulářů pomocí aplikace Dreamweaver
- Shromažďování informací od uživatelů pomocí formulářů
- Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
- Vytváření webových formulářů
- Rozšířená podpora formátu HTML5 pro elementy formuláře
- Vytváření formuláře pomocí aplikace Dreamweaver
- Vizuální vytváření aplikací
- Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
- Vytváření vyhledávacích stránek a stránek s výsledky
- Vytvoření stránky vložení záznamu
- Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
- Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
- Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
- Vytvoření registrační stránky
- Vytvoření přihlašovací stránky
- Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
- Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
- Používání komponent ColdFusion v aplikaci Dreamweaver
- Testování, náhled a publikování webových stránek
- Odstraňování problémů
Naučte se využívat widgety jQuery UI a jQuery Mobile pro doplnění webových projektů o funkce jako v aplikacích. Vkládejte skládačky, záložky, posuvníky a pole pro automatické dokončování zcela bez psaní kódu.
Widget představuje malou webovou aplikaci v jazyce, jako je např. DHTML nebo JavaScript, kterou lze vložit na webovou stránku a spustit ji zde. Webové widgety mimo jiné nabízí způsob, jak na webových stránkách napodobit prostředí stolních počítačů.
Widgety jQuery UI, jako např. Accordion, Tabs, Datepicker, Slider a Autocomplete, umožňují toto prostředí na webu napodobit.
Pomocí widgetu Tabs například můžete napodobit funkci záložek z dialogových oken aplikací v počítači.
Aplikace Dreamweaver nově nabízí kolekci widgetů jQuery Mobile, které můžete používat k vytvoření prvků formuláře, a další funkce běžně používané v mobilních webových aplikacích. Můžete například použít widget jQuery mobile k přidání prvků formuláře vhodných pro mobilní zařízení, jako jsou textové oblasti a zaškrtávací políčka.
Vložení widgetu jQuery
Při vložení widgetu jQuery se kód automaticky doplní o následující údaje:
- Reference všech závislých souborů.
- Tag Script obsahující rozhraní API pro widget jQuery. Další widgety se přidávají do stejné značky script.
Další informace o widgetech jQuery naleznete v http://jqueryui.com/demos/
Poznámka:
V případě efektů jQuery se nepřidá externí reference na soubor jquery-1.8.24.min.js, protože tento soubor je automaticky součástí dat vložených při přidávání efektu.
-
-
Vyberte možnosti Vložit > jQuery UI a vyberte, který z widgetů chcete vložit.
Při použití panelu Vložit naleznete widgety na panelu Vložit v části jQuery UI.
Po výběru widgetu jQuery se jeho vlastnosti zobrazí na panelu Vlastnosti.
Náhled widgetů jQuery můžete zobrazit v rámci živého zobrazení nebo v prohlížeči, který podporuje widgety jQuery.
Upravit widgety jQuery
-
Vyberte widget, který chcete upravit.
-
Na panelu Vlastnosti upravte potřebné vlastnosti.
Pokud budete chtít například ve widgetu Tabs přidat dodatečnou záložku, vyberte widget a klikněte na symbol „+“ na panelu Vlastnosti.
Vložení mobilních widgetů jQuery
-
Než budete moci použít jakékoli widgety jQuery mobile, musíte nejprve definovat stránku jQuery Mobile výběrem Vložit > jQuery Mobile > Stránka.
Otevře se dialogové okno Soubory jQuery Mobile.
Dialogové okno Soubory jQuery Mobile
Dialogové okno Soubory jQuery Mobile -
Změňte výchozí nastavení v dialogovém okně souborů jQuery Mobile nebo je ponechte nastavené na výchozí cesty a klikněte na OK.
-
V dialogovém okně Stránka, které se otevře, zadejte název do pole ID a zaškrtněte nebo zrušte zaškrtnutí políček vedle možností Záhlaví a Zápatí podle toho, zda chcete v mobilní stránce sekce záhlaví a zápatí.
Dialogové okno Stránka
Dialogové okno Stránka -
Na stránce, která se otevře v aplikaci Dreamweaver, nahraďte text Záhlaví, Obsah a Zápatí textem, obrázky a dalšími prvky, které chcete mít na mobilní stránce.
Poznámka:Udržujte text krátký a obrázky malé pro zobrazení na malých mobilních screens.
-
Podle potřeby přidejte další widgety jQuery Mobile.
-
Zobrazte náhled stránky na zařízení.
Další informace naleznete v Náhled webových stránek Dreamweaver na více zařízeních.
-
Uložte stránku jQuery Mobile a všechny související soubory.
Motivy jQuery mobile se nepoužijí s novějšími verzemi jQuery
Problém
Motivy jQuery Mobile, včetně vzorků barev a panelů, se nepoužijí při používání novějších verzí jQuery, jako je jQuery 3.7.1.V důsledku toho se motivy jQuery nemusí vykreslovat správně nebo se chovat podle očekávání.
Příčina
jQuery Mobile bylo označeno jako zastaralé a již se aktivně neudržuje.Nepodporuje verze jQuery 3.x, což vede k problémům s kompatibilitou s novějšími verzemi.
Řešení / alternativní řešení
Chcete-li nadále používat funkce jQuery Mobile (motivy, vzorky barev a panely), použijte kompatibilní, starší verzi jQuery.
Doporučená verze: jQuery 1.11.1 (nebo jiné podporované verze 1.x)
Příklad
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
Přidejte podporovanou verzi jQuery. Například 1.11.1.
-
Ujistěte se, že knihovna jQuery Mobile je načtena po skriptu jQuery.
-
Znovu načtěte stránku a ověřte, že se motivy, vzorky barev a panely vykreslují správně.
Poznámka:Protože jQuery Mobile je zastaralé a již se neaktualizuje, pokračujte v používání kompatibilní starší verze jQuery pro stávající projekty jQuery Mobile.
