- 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ů
Ke správě datových zdrojů v aktuálním webu použijte panel Datové zdroje aplikace Dreamweaver.
Aplikace Adobe Dreamweaver nabízí možnost sledování a náhledu datových zdrojů ve webovém místě, například obrazů, filmů, barev, skriptů a odkazů. Datový zdroj také můžete přímo přetáhnout a vložit ho do stránky aktuálního dokumentu.
Datové zdroje pocházejí většinou z různých zdrojů. Datové zdroje můžete vytvořit například v aplikacích Adobe Photoshop nebo Adobe Animate CC, získat je od spolupracovníků nebo si je zkopírovat z disku CD s kliparty či webové stránky s grafikou.
Aplikace Dreamweaver také nabízí přístup ke dvěma speciálním typům datových zdrojů – knihovnám a předlohám. Jde o propojené datové zdroje: když upravujete položku knihovny nebo předlohu, aplikace Dreamweaver aktualizuje všechny dokumenty, které používají tyto datové zdroje. Položky knihovny obecně reprezentují malé datové zdroje v rámci návrhu, například logo webového místa nebo copyright. Chcete-li pracovat s větší oblastí návrhu, použijte raději předlohu.
Pro správu datových zdrojů v aktuálním webovém místě použijte panel Datové zdroje (Okna > Datové zdroje). Panel Datové zdroje zobrazí datové zdroje pro webové místo spojené s aktivním dokumentem v okně dokumentu.
Nejdříve musíte definovat lokální webové místo, abyste mohli zobrazit datové zdroje v panelu Datové zdroje.
Panel Datové zdroje umožňuje zobrazit datové zdroje různými způsoby:
Seznam webu
Zobrazí všechny datové zdroje webu včetně barev a adres URL, které jsou použity v dokumentech webu.
Seznam oblíbených
Zobrazí pouze zvolené datové zdroje.
Chcete-li přepnout mezi těmito dvěma zobrazeními, klepněte nad oblastí náhledu na přepínací tlačítko Webové místo nebo Oblíbené. (Tato dvě zobrazení nejsou dostupná pro kategorie Předlohy a Knihovna.)
Většina operací panelu Datové zdroje pracuje stejně v obou seznamech. Některé úlohy ale můžete provést pouze v seznamu Oblíbené.
Datové zdroje z obou seznamů patří do jedné z následujících kategorií:
Obrázky
Obrazové soubory ve formátech GIF, JPEG nebo PNG.
Barvy
Barvy použité v dokumentech a seznamech stylů včetně barev textu, pozadí a odkazů.
Adresy URL
Externí odkazy v dokumentech webu, včetně adres FTP, gopher, HTTP, HTTPS, JavaScript, e-mailových adres (mailto) a odkazů na místní soubory (file://).
Média
Multimediální soubory, jako jsou například soubory Adobe Flash (pouze formát SWF), Adobe Shockwave, QuickTime nebo MPEG.
Skripty
Soubory JavaScript nebo VBScript. Skripty v souborech HTML (na rozdíl od nezávislých souborů JavaScript nebo VBScript) se nezobrazují v panelu Datové zdroje. Tato kategorie je k dispozici pouze v zobrazení kódu a návrhu.
Předlohy
Rozvržení vzorových stránek použitá ve více stránkách. Změna předlohy automaticky změní všechny stránky s ní spojené. Tato kategorie je k dispozici pouze v zobrazení kódu a návrhu.
Položky knihovny
Elementy návrhů, které používáte ve více stránkách; když změníte položku knihovny, všechny stránky obsahující tuto položku budou aktualizovány. Tato kategorie je k dispozici pouze v zobrazení kódu a návrhu.
Aby se soubor zobrazil v panelu Datové zdroje, musí patřit do jedné z těchto kategorií: Některé další typy souborů jsou někdy nazývány datovými zdroji, ale nezobrazují se v panelu.
Datové zdroje jsou v kategoriích standardně uspořádány abecedně podle jména, ale můžete je uspořádat podle typu a dalších kritérií. Můžete si také zobrazit náhled datových zdrojů a měnit velikost sloupců a oblasti náhledu.
Ikona Creative Cloud ve sloupci Typ označuje, že příslušné datové zdroje byly importovány z Creative Cloud knihoven. Dvojitým kliknutím na ikonu Creative Cloud převzorkujete příslušné datové zdroje. Další informace o opětovném použití datových zdrojů v CC knihovnách naleznete v tématu Creative Cloud knihovny v aplikaci Dreamweaver.
Zobrazení datového zdroje v oblasti náhledu
-
Vyberte datový zdroj v panelu Datové zdroje.
Zobrazení datových zdrojů v kategorii
-
Klepněte na levé straně panelu Datové zdroje na ikonu kategorie.
Uspořádání datových zdrojů
-
Klepněte na záhlaví sloupce.
Například pokud chcete uspořádat seznam obrazů podle typu (tak, aby obrazy GIF byly pohromadě, obrazy JPEG byly pohromadě a podobně), klepněte na záhlaví sloupce Typ.
Změna velikosti sloupce
-
Přetáhněte čáru oddělující dvě záhlaví sloupců.
Změna velikosti oblasti náhledu
-
Přetáhněte oddělovací pruh (mezi oblastí náhledu a seznamem datových zdrojů) nahoru nebo dolů.
Aktualizace panelu Datové zdroje
Vytvoření seznamu webového místa může trvat několik sekund, protože aplikace Dreamweaver musí nejdříve načíst vyrovnávací paměť webového místa.
Některé změny se v panelu Datové zdroje nezobrazí ihned. Pokud například přidáte nebo odstraníte datový zdroj z webového místa, změna se v panelu Datové zdroje nezobrazí, dokud klepnutím na tlačítko Aktualizovat seznam webového místa neobnovíte seznam webového místa. Pokud přidáte nebo odstraníte datový zdroj mimo aplikaci Dreamweaver pomocí aplikace Průzkumník Windows nebo Finder, je nutné znovu vytvořit vyrovnávací paměť webového místa, aby se panel Datové zdroje aktualizoval.
Když odstraníte jedinou instanci určité barvy nebo adresu URL z webu nebo když uložíte nový soubor obsahující nějakou barvu nebo adresu URL, změna se nezobrazí v panelu Datové zdroje, dokud neobnovíte seznam webu.
- Chcete-li ručně obnovit seznam webu, klikněte na tlačítko Aktualizovat seznam webu . Aplikace Dreamweaver vytvoří vyrovnávací paměť webu nebo ji podle potřeby aktualizuje.
- Chcete-li obnovit seznam webu a ručně obnovit vyrovnávací paměť webu, klikněte pravým tlačítkem (Windows) nebo s klávesou Apple (Macintosh) do seznamu Datové zdroje a vyberte možnost Aktualizovat seznam webu.
Přidání datového zdroje do dokumentu
Většinu datových zdrojů můžete do dokumentu vložit přetažením do živého zobrazení, zobrazení kódu a zobrazení návrhu v okně dokumentu, případně pomocí tlačítka Vložit na panelu. Datové zdroje můžete přetahovat ze zobrazení seznamu i podokna s náhledem na panelu Datové zdroje.
Poznámka: Přetažení z podokna náhledu je podporováno pouze v počítačích Mac.
Do zobrazení Návrh a Živé zobrazení můžete vkládat také barvy nebo adresy URL. V zobrazení Návrh můžete barvy a adresy URL používat přímo u vybraných elementů.
-
V dokumentu umístěte textový kurzor na místo, kde se má datový zdroj zobrazit.
-
Nalevo v panelu Datové zdroje vyberte jedno z tlačítek kategorií datových zdrojů.Poznámka:
Zvolte libovolnou kategorii kromě kategorie Předlohy. Předlohy se aplikují na celý dokument; nemůžete je vložit do dokumentu.
-
Nahoře v panelu vyberte buď volbu Webové místo, nebo volbu Oblíbené a pak vyberte datový zdroj.
Pro položky knihovny nejsou k dispozici žádné seznamy Webové místo ani Oblíbené; pokud vkládáte položku knihovny, tento krok vynecháte.
-
Proveďte jeden z následujících úkonů:
Přetáhněte datový zdroj z panelu do dokumentu. K přetažení můžete používat zobrazení seznamu i podokno s náhledem.
Poznámka: Datové zdroje v systému Windows z panelu s náhledem přetahovat nelze.
Skripty můžete přetáhnout do oblasti obsahu záhlaví v okně Dokument, pokud není tato oblast viditelná, vyberte volbu Zobrazit > Obsah záhlaví.
v panelu vyberte datový zdroj a klikněte na tlačítko Vložit.
Pokud je vkládaným datovým zdrojem barva, je po vložení použita na zobrazení textu.
Použití barvy v textu pomocí panelu Datové zdroje
Panel Datové zdroje zobrazuje barvy již použité na různé elementy, například text, okraje tabulky, pozadí a podobně.
-
V zobrazení Návrh proveďte následující úkony:
-
Vyberte text v dokumentu.
-
v panelu Datové zdroje vyberte kategorii Barvy.
-
Vyberte požadovanou barvu a klepněte na tlačítko Použít.
-
-
v Živém zobrazení proveďte následující úkony:
-
v panelu Datové zdroje vyberte kategorii Barvy.
-
Proveďte jeden z následujících úkonů:
- Na panelu Datové zdroje klepněte pravým tlačítkem na barvu a poté na možnost Kopírovat hodnotu barvy. Hodnota barvy se zkopíruje do schránky. Nyní můžete barevnou hodnotu vložit do panelu CSS Designer (Ctrl + v, Cmd + v).
- Barvu přetáhněte z náhledu a umístěte kurzor myši na element v Živém zobrazení. Po přetažení barvy se otevře dialogové okno Nové pravidlo CSS a po klepnutí na tlačítko OK se barva u vybraného elementu použije.
- Na panelu Datové zdroje klepněte na tlačítko Použít. Otevře se dialogové okno Nové pravidlo CSS a po kliknutí na tlačítko OK se barva použije u vybraného elementu.
-
Přiřazení adres URL k obrázkům nebo textu
-
V zobrazení Návrh proveďte následující úkony:
-
Vyberte text nebo obraz.
-
v panelu Datové zdroje vyberte kategorii Adresy URL buď v zobrazení Webová místa, nebo Oblíbené, v závislosti na tom, kde je adresa URL uložena.
Poznámka:Adresy URL pro soubory vašeho webového místa jsou standardně uložené v zobrazení Webová místa. V zobrazení Oblíbené jsou adresy URL, které jste sami přidali.
-
Vyberte požadovanou adresu URL.
-
Proveďte jeden z následujících úkonů:
Přetáhněte adresu URL z panelu na výběr v zobrazení Návrh.
Vyberte adresu URL a pak klikněte na volbu Vložit.
-
-
v Živém zobrazení proveďte následující úkony:
-
v panelu Datové zdroje vyberte kategorii Adresy URL buď v zobrazení Webová místa, nebo Oblíbené, v závislosti na tom, kde je adresa URL uložena.
-
Proveďte jeden z následujících úkonů:
- Přetáhněte adresu URL z náhledu nebo zobrazení seznamu. Kurzor myši umístěte na element v Živém zobrazení. Po přetažení adresy URL se element označený v Živém zobrazení ohraničí tagem <a>.
- v Živém zobrazení klepněte na požadovaný element. Na panelu Datové zdroje vyberte adresu URL a klepněte na tlačítko Použít. Okolo vybraného elementu se vytvoří tag <a>.
-
Výběr a úpravy datových zdrojů
Panel Datové zdroje umožňuje vybrat více datových zdrojů najednou. Umožňuje také rychle začít upravovat datové zdroje.
Výběr více datových zdrojů
-
v panelu Datové zdroje vyberte datový zdroj.
-
Vyberte další datové zdroje některým z následujících způsobů:
Klepnutím se stisknutou klávesou Shift vyberte řadu sousedních datových zdrojů.
Chcete-li přidat určitý datový zdroj do výběru (ať je, nebo není vedle existujícího výběru), klepněte na něj se stisknutou klávesou Ctrl (Windows) nebo Apple (Macintosh). Chcete-li zrušit výběr datového zdroje, klepněte na něj se stisknutou klávesou Ctrl nebo Apple.
Úpravy datového zdroje
Když upravujete datový zdroj v panelu Datové zdroje, chování se liší podle typu datového zdroje. Pro některé datové zdroje, například obrazy, používáte externí editor, který se otevírá automaticky, pokud je pro daný typ datového zdroje definován. Barvy a adresy URL můžete upravovat pouze v seznamu Oblíbené. Když upravujete předlohy a položky knihovny, provádíte změny přímo v aplikaci Dreamweaver.
-
v panelu Datové zdroje proveďte jeden z následujících úkonů:
Poklepejte na datový zdroj.
Vyberte datový zdroj a klikněte na tlačítko Upravit.
Poznámka:Pokud je třeba datový zdroj upravit v externím editoru, ale ten se neotevře automaticky, vyberte možnost Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh), vyberte kategorii Typy souborů / editory a ověřte, zda jste určili externí editor pro daný typ datového zdroje.
-
Proveďte změny.
-
Až skončíte, proveďte jeden z následujících úkonů:
Pokud je datovým zdrojem soubor (není to barva ani adresa URL), uložte ho v editoru, který používáte, a zavřete ho.
Pokud je datovým zdrojem adresa URL, klikněte v dialogovém okně Upravit adresu URL na tlačítko OK.
Poznámka:Pokud je datovým zdrojem barva, dialog pro výběr barvy se zavře automaticky, jakmile vyberete barvu. Chcete-li uzavřít dialog pro výběr barvy, aniž byste vybrali barvu, stiskněte klávesu Esc.
Opakované používání datových zdrojů v jiném webovém místě
Panel Datové zdroje zobrazuje všechny datové zdroje (rozpoznaných typů) v aktuálním webovém místě. Chcete-li použít datový zdroj z aktuálního webového místa v jiném webovém místě, musíte ho tam zkopírovat. Zkopírovat můžete určitý datový zdroj, skupinu určitých datových zdrojů nebo celou složku Oblíbené.
Předtím, než datový zdroj přemístíte z nebo do vzdáleného webového místa, musíte v panelu Soubory najít soubor, který odpovídá tomuto datovému zdroji v panelu Datové zdroje.
Panel Soubory může zobrazovat jiné webové místo než panel Datové zdroje. Je to proto, že panel Datové zdroje je spojen s aktivním dokumentem.
Nalezení souboru datového zdroje v panelu Soubory
-
v panelu Datové zdroje vyberte kategorii datového zdroje, který chcete nalézt.
-
Klepněte pravým tlačítkem (Windows) nebo s klávesou Apple (Macintosh) na název nebo ikonu datového zdroje v panelu Datové zdroje a pak vyberte volbu Najít ve webovém místě z kontextové nabídky.Poznámka:
Příkaz Najít ve webovém místě je neodstupný pro barvy a adresy URL, které neodpovídají souborům ve webovém místě.
Panel Soubory se otevře s vybraným souborem datového zdroje. Příkaz Najít ve webovém místě nalezne soubor odpovídající danému datovému zdroji; nenalezne soubory, které tento datový zdroj používá.
Kopírování datových zdrojů z panelu Datový zdroj do jiných webových míst
-
v panelu Datové zdroje vyberte kategorii datového zdroje, který chcete kopírovat.
-
Klepněte pravým tlačítkem (Windows) nebo s klávesou Apple (Macintosh) na jeden nebo více datových zdrojů buď v seznamu Webové místo, nebo v seznamu Oblíbené, vyberte volbu Kopírovat do webového místa a zvolte název cílového webového místa z podnabídky všech webových míst, která jste definovali.Poznámka:
V seznamu Oblíbené můžete zkopírovat složku oblíbených položek i jednotlivé datové zdroje.
Datové zdroje jsou zkopírovány do odpovídajícího umístění v cílovém webovém místě. Aplikace Dreamweaver podle potřeby vytvoří nové složky v hierarchii cílového webového místa. Datové zdroje jsou také přidány do seznamu Oblíbené v cílovém webovém místě.
Poznámka:Pokud je kopírovaný datový zdroj barva nebo adresa URL, zobrazí se pouze v seznamu Oblíbené cílového webového místa. Protože barvy ani adresy URL neodpovídají žádným souborům, není zde žádný soubor pro kopírování do jiného webového místa.