- 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ů
Pomocí Dreamweaveru lze webové stránky a webové produkty upravit tak, aby je mohli používat lidé se zrakovým, sluchovým, pohybovým i jiným postižením.
Uživatelské rozhraní v aplikaci Dreamweaver CC a jejích novějších verzích bylo zjednodušeno. Výsledkem je skutečnost, že některé možnosti uvedené v tomto článku nemusí být v aplikaci Dreamweaver CC a jejích novějších verzích k dispozici. Další informace najdete v tomto článku.
O přístupném obsahu
Usnadnění přístupu umožňuje vytvářet webová místa a webové produkty, které mohou používat i lidé se zrakovým, sluchovým, pohybovým a jiným postižením. Příklady funkcí usnadnění přístupu zahrnují u softwarových produktů a webových míst podporu programů pro čtení z obrazovky, textové ekvivalenty pro grafiky, klávesové zkratky, změny barevného zobrazení na vysoký kontrast a podobně. Dreamweaver poskytuje nástroje, které usnadňují přístup na stránky, i pomůcky, jež vám pomohou vytvářet snadno přístupný obsah.
Pro vývojáře pracující s Dreamweaverem, kteří potřebují používat funkce usnadnění přístupu, nabízí aplikace podporu čteček obrazovky, klávesovou navigaci a usnadnění přístupu v rámci operačního systému.
Návrhářům webových stránek, kteří tvoří snadno přístupný obsah, pomůže Dreamweaver vytvořit snadno přístupné stránky s obsahem vhodným pro čtečky obrazovek v souladu s oficiálními směrnicemi. Například dialogová okna, která vás již při vkládání prvků do stránky vyzvou k zadání atributů pro usnadnění přístupu, jako jsou textové ekvivalenty pro obrazy. Když se pak takový obraz objeví na stránce uživatele se zrakovým postižením, program pro čtení z obrazovky přečte jeho popis.
Více informací o dvou důležitých iniciativách pro podporu usnadnění přístupu najdete na stránkách iniciativy Web Accessibility Initiative World Wide Web Consortium (www.w3.org/wai) a v sekci amerického federálního zákona proti diskriminaci (www.section508.gov).
Další informace o směrnicích japonského průmyslového standardu pro usnadnění přístupu Japan Industry Standard najdete v sekci JIS X 8341-3 (www.jisc.go.jp).
Žádný vývojový nástroj nedokáže proces vývoje zautomatizovat. Návrh přístupných webových míst vyžaduje, abyste porozuměli požadavkům usnadnění přístupu a průběžně dělali rozhodnutí o tom, jakým způsobem budou postižení lidé komunikovat s webovými stránkami. Nejlepším způsobem, jakým můžete zajistit, že bude webové místo snadno přístupné, je dobře promyšlené plánování, vývoj, testování a vyhodnocení.
Používání programů pro čtení z obrazovky s aplikací Dreamweaver
Program pro čtení z obrazovky předčítá text, který je zobrazený na obrazovce počítače. Čte také informace, které nejsou textové povahy, jako jsou názvy tlačítek nebo popisy obrazů v aplikaci, které byly během jejího vytváření zadány pomocí tagů nebo atributů pro usnadnění přístupu.
Jako návrhář v aplikaci Dreamweaver můžete použít program pro čtení z obrazovky, který vám pomůže při vytváření vašich webových stránek. Program pro čtení z obrazovky začíná číst od levého horního rohu okna dokumentu.
Aplikace Dreamweaver podporuje formát JAWS for Windows od společnosti Freedom Scientific (www.freedomscientific.com) a čtečku obrazu Window-Eyes od společnosti GW Micro (www.gwmicro.com).
Podpora pro usnadnění přístupu v operačním systému
Aplikace Dreamweaver podporuje funkce usnadnění přístupu v obou operačních systémech, Windows i Macintosh. Například v systému Macintosh nastavíte předvolby zobrazení pomocí dialogového okna Předvolby univerzálního přístupu (Apple > Předvolby systému). Vaše nastavení se projeví v pracovním prostředí aplikace Dreamweaver.
Podporované je také nastavení vysokého kontrastu v operačním systému Windows. Tuto volbu aktivujete v Ovládacích panelech Windows, v aplikaci Dreamweaver se projeví takto:
Dialogová okna a panely používají systémová nastavení barev. Pokud například nastavíte barvy na Bílá na černé, všechna dialogová okna a panely aplikace Dreamweaver se zobrazí s bílou barvou popředí a černým pozadím.
Zobrazení Kód použije systémové barvy textu a okna. Pokud například nastavíte systémové barvy na volbu Bílá na černé a pak změníte barvu textu v nastavení Úpravy > Předvolby > Barevné zvýraznění kódu, bude aplikace Dreamweaver toto nastavení barev ignorovat a zobrazí text kódu bílou barvou na černém pozadí.
V zobrazení Návrh se použijí takové barvy pozadí a textu, jaké nastavíte pomocí voleb Změnit > Vlastnosti stránky, takže stránky, které vytváříte, se zobrazí se stejnými barvami jako v prohlížeči.
Optimalizace pracovního prostředí pro návrh stránek s usnadněným přístupem
Když vytváříte stránky s usnadněním přístupu, musíte spojit informace, jako jsou nápisy a popisy, s objekty stránky, abyste zpřístupnili obsah pro všechny uživatele.
Abyste toho dosáhli, aktivujte pro každý objekt dialogové okno Usnadnění přístupu, aby vás při vložení objektů aplikace Dreamweaver vyzvala k zadání informací pro usnadnění přístupu. Dialogové okno můžete aktivovat pro libovolné objekty v kategorii Usnadnění přístupu v okně Předvolby.
-
Vyberte možnost Úpravy > Předvolby (systém Windows) nebo Dreamweaver > Předvolby (systém Macintosh).
-
Ze seznamu kategorií na levé straně vyberte volbu Usnadnění přístupu, vyberte objekt, nastavte jakoukoliv z následujících voleb a klikněte na tlačítko OK.
Zobrazit atributy při vkládání
Vyberte objekty, pro které chcete aktivovat dialogová okna pro usnadnění přístupu. Například objekty formulářů, rámce, multimédia a obrazy.
Nechat panel aktivní pro vstup
Nechá panel aktivní pro vstup, takže je přístupný pro program pro čtení z obrazovky. (Pokud tuto volbu nevyberete a uživatel otevře panel, zůstane aktivní zobrazení Návrh nebo zobrazení Kód.)
Vykreslování mimo obrazovku
Tuto volbu vyberte, pokud používáte program pro čtení z obrazovky.
Poznámka:Když vložíte novou tabulku, zobrazí se v dialogovém okně Vložit tabulku atributy pro usnadnění přístupu.
Ovládání aplikace Dreamweaver pomocí klávesnice
Klávesnicí můžete v u ovládat panely, inspektory, dialogová okna, rámce a tabulky bez použití myši.
Procházení voleb tabulátorem a používání kláves se šipkami je podporováno pouze v systému Windows.
Ovládání panelů
-
V okně dokumentu stisknutím kombinace kláves Ctrl+F6 aktivujte panel.
Tečkovaná čára kolem titulu panelu označuje, že je tento panel aktivní pro vstup. Program pro čtení z obrazovky přečte titulní pruh panelu, který je právě aktivní.
-
Stiskněte znovu kombinaci kláves Ctrl+F6, dokud nebude aktivní panel, ve kterém chcete pracovat. (Stiskněte kombinaci kláves Ctrl+Shift+F6, chcete-li aktivovat předcházející panel.)
-
Pokud panel, ve kterém chcete pracovat, není otevřený, použijte klávesové zkratky z nabídek Windows a zobrazte příslušný panel; pak stiskněte kombinaci kláves Ctrl+F6.
Pokud panel, ve kterém chcete pracovat, je otevřený, ale není rozbalený, aktivujte titulní pruh panelu a pak stiskněte mezerník. Stiskněte znovu mezerník, abyste panel sbalili.
-
K pohybu po volbách v panelu použijte klávesu tabulátor.
-
Klávesy se šipkami používejte takto:
Pokud volba nabízí více možností, použijte pro posun mezi těmito možnostmi klávesy se šipkami, a pak stisknutím mezerníku proveďte výběr.
Pokud jsou ve skupině panelů záložky, které otevírají další panely, aktivujte otevřenou záložku a pak pomocí kláves šipka doleva a šipka doprava otevřete další záložky. Jakmile otevřete novou záložku, stisknutím tabulátoru můžete procházet volby v tomto panelu.
Ovládání inspektoru Vlastnosti
-
Pokud inspektor Vlastnosti není viditelný, zobrazte ho stisknutím kláves Ctrl+F3.
-
Opakovaným stisknutím kombinace kláves Ctrl+F6 otevřete inspektor Vlastnosti (pouze systém Windows).
-
K procházení voleb v inspektoru Vlastnosti použijte klávesu tabulátor.
-
Pro pohyb mezi volbami pro jednotlivé možnosti použijte odpovídající klávesy se šipkami.
-
Je-li třeba, stisknutím kombinace kláves Ctrl+Šipka dolů/Šipka nahoru (Windows) nebo Command Šipka dolů/Šipka nahoru (Macintosh) otevřete nebo zavřete rozšířenou část inspektoru Vlastnosti stisknutím zkratky Ctrl+Šipka dolů/Šipka nahoru (Windows) nebo Command Šipka dolů/Šipka nahoru (Macintosh) nebo přesuňte fokus na šipku rozbalení v pravém dolním rohu a stiskněte mezerník.Poznámka:
Při rozbalení nebo sbalení musí být fokus klávesnice uvnitř inspektoru Vlastnosti (nikoli na titulku panelu).
Ovládání dialogového okna
-
K pohybu po volbách dialogového okna použijte klávesu tabulátor.
-
K pohybu mezi volbami pro určitou možnost použijte klávesy se šipkami.
-
Pokud dialogové okno obsahuje seznam Kategorie, stiskněte kombinaci kláves Ctrl+tabulátor (Windows), čímž aktivujte seznam kategorií, a pak se pomocí kláves se šipkami posouvejte v seznamu nahoru nebo dolů.
-
Pro přechod na volby pro určitou kategorii stiskněte znovu kombinaci kláves Ctrl+tabulátor.
-
Zavřete dialogové okno stisknutím klávesy Enter.
Ovládání rámců
-
Pokud váš dokument obsahuje rámce, můžete rámec aktivovat pomocí kláves se šipkami.
Výběr rámce
-
Stiskněte kombinaci kláves Alt+šipka dolů a tím umístěte kurzor do okna dokumentu.
-
Stiskněte kombinaci kláves Alt+šipka nahoru a tím vyberte rámec, který je nyní aktivní.
-
Dalším stisknutím kombinace kláves Alt+šipka nahoru aktivujte sadu rámců a pak nadřazené sady rámců, pokud existují vnořené sady rámců.
-
Stiskněte kombinace kláves Alt+šipka dolů a tím aktivujte dceřinou sadu rámců nebo jeden rámec v sadě rámců.
-
S aktivním jedním rámcem stisknutím kombinace kláves Alt+šipka doleva nebo šipka doprava přecházejte mezi rámci.
Navigace v tabulce
-
Pro přesun do jiné buňky v tabulky použijte klávesy se šipkami nebo stiskněte tabulátor.Poznámka:
Pokud stisknete tabulátor v buňce, která je úplně vpravo, přidáte do tabulky další řádek.
-
Chcete-li vybrat buňku, stiskněte kombinaci kláves Ctrl+A (pouze Windows), když je v buňce textový kurzor.
-
Pokud chcete vybrat celou tabulku, stiskněte dvakrát kombinaci kláves Ctrl+A, když je kurzor uvnitř buňky, nebo pouze jednou, pokud je vybraná buňka.
-
Pokud chcete tabulku opustit, stiskněte kombinaci kláves Ctrl+A třikrát, pokud je kurzor uvnitř buňky, dvakrát, pokud je vybraná buňka, nebo jednou, pokud je vybraná tabulka, a pak stiskněte klávesu se šipkou nahoru, dolů, nebo doleva.