Příručka uživatele Zrušit

Vytváření a otevírání souborů

  1. Příručka uživatele aplikace Dreamweaver
  2. Úvod
    1. Základy navrhování responzivních webů
    2. Co je nového v aplikaci Dreamweaver
    3. Vývoj webu v aplikaci Dreamweaver – přehled
    4. Dreamweaver / Běžné otázky
    5. Klávesové zkratky
    6. Systémové požadavky aplikace Dreamweaver
    7. Přehled funkcí
  3. Dreamweaver a Creative Cloud
    1. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    2. Knihovny Creative Cloud v aplikaci Dreamweaver
    3. Používání souborů Photoshop v aplikaci Dreamweaver
    4. Práce s aplikací Adobe Animate a Dreamweaver
    5. Extrahujte soubory SVG optimalizované pro web z knihoven
  4. Pracovní plochy a zobrazení aplikace Dreamweaver
    1. Pracovní plocha aplikace Dreamweaver
    2. Optimalizace pracovní plochy aplikace Dreamweaver pro vizuální vývoj
    3. Hledání souborů podle názvu nebo obsahu | Mac OS
  5. Nastavení webů
    1. O webech aplikace Dreamweaver
    2. Nastavení lokální verze webu
    3. Připojení k publikačnímu serveru
    4. Nastavení testovacího serveru
    5. Import a export nastavení webu aplikace Dreamweaver
    6. 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
    7. Funkce usnadnění přístupu v aplikaci Dreamweaver
    8. Rozšířená nastavení
    9. Nastavení předvoleb webového místa pro přenos souborů
    10. Úprava nastavení serveru proxy v aplikaci Dreamweaver
    11. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    12. Používání systému Git v aplikaci Dreamweaver
  6. Správa souborů
    1. Vytváření a otevírání souborů
    2. Správa souborů a složek
    3. Získání souborů ze serveru a odeslání souborů na server
    4. Zpřístupnění/vyhrazení souborů
    5. Synchronizace souborů
    6. Porovnání souborů a nalezení rozdílů
    7. Maskování souborů a složek ve webu aplikace Dreamweaver
    8. Povolení poznámek k návrhu pro weby Dreamweaver
    9. Předcházení potenciálnímu zneužití modulu Gatekeeper
  7. Rozvržení a návrh
    1. Používání vizuálních pomůcek pro rozvržení
    2. O používání souborů CCS k rozvržení stránky
    3. Navrhování responzivních webů pomocí nástroje Bootstrap
    4. Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
    5. Zobrazení obsahu pomocí tabulek
    6. Barvy
    7. Responzivní návrh s využitím rozvržení s plovoucí mřížkou
    8. Funkce Extrakt v aplikaci Dreamweaver
  8. CSS
    1. Vysvětlení kaskádových seznamů stylů
    2. Rozvržení stránek pomocí panelu CSS Designer
    3. Použití preprocesorů CSS v aplikaci Dreamweaver
    4. Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
    5. Přesunutí pravidel CSS v aplikaci Dreamweaver
    6. Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
    7. Práce s tagy div
    8. Použití přechodů na pozadí
    9. Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
    10. Formátování kódu
  9. Obsah stránky a datové zdroje
    1. Nastavení vlastností stránky
    2. Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
    3. Práce s textem
    4. Vyhledání a nahrazení textu, tagů a atributů
    5. Panel DOM
    6. Úpravy v živém zobrazení
    7. Kódování dokumentů v aplikaci Dreamweaver
    8. Výběr a zobrazení elementů v okně dokumentu
    9. Nastavení vlastností textu v Inspektoru vlastností
    10. Kontrola pravopisu webové stránky
    11. Pomocí vodorovných linek v aplikaci Dreamweaver
    12. Přidání a úprava kombinací písma v aplikaci Dreamweaver
    13. Práce s datovými zdroji
    14. Vložení a aktualizace dat v aplikaci Dreamweaver
    15. Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
    16. Vložení a úprava obrázků v aplikaci Dreamweaver
    17. Přidání multimediálních objektů
    18. Přidání videa v aplikaci Dreamweaver
    19. Vložení videa HTML 5
    20. Vložit soubory SWF
    21. Přidání zvukových efektů
    22. Vložte zvuk HTML5 v aplikaci Dreamweaver
    23. Práce s položkami knihoven
    24. Používání arabského a hebrejského textu v aplikaci Dreamweaver
  10. Odkazy a navigace
    1. O odkazech a navigaci
    2. Vytváření odkazů
    3. Obrazové mapy
    4. Odstraňování problémů s odkazy
  11. Ovládací prvky a efekty jQuery
    1. Používání widgetů jQuery UI a jQuery Mobile v aplikaci Dreamweaver
    2. Používání efektů jQuery v aplikaci Dreamweaver
  12. Kódování webových stránek
    1. Informace o psaní kódu v aplikaci Dreamweaver
    2. Prostředí pro psaní kódu v aplikaci Dreamweaver
    3. Nastavení předvoleb kódování
    4. Přizpůsobení barevného zvýraznění kódu
    5. Psaní a úprava kódu
    6. Našeptávání kódu a dokončování kódu
    7. Sbalení a rozbalení kódu
    8. Opakované použití kódu v podobě výstřižků
    9. Linting kódu
    10. Optimalizace kódu
    11. Úprava kódu v zobrazení Návrh
    12. Práce s obsahem hlavičky stránek
    13. Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
    14. Používání knihoven tagů v aplikaci Dreamweaver
    15. Import vlastních tagů do aplikace Dreamweaver
    16. Práce s funkcemi JavaScriptu (obecné pokyny)
    17. Použití vestavěných chování jazyka JavaScript
    18. O XML a XSLT
    19. Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
    20. Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
    21. Přidání entit znaku pro XSLT v aplikaci Dreamweaver
    22. Formátování kódu
  13. Pracovní postupy pro různé produkty
    1. Instalace a používání rozšíření v aplikaci Dreamweaver
    2. Aktualizace v rámci aplikace v aplikaci Dreamweaver
    3. Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
    4. Práce s aplikacemi Fireworks a Dreamweaver
    5. Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
    6. Integrace mezi aplikacemi Dreamweaver a Business Catalyst
    7. Vytváření e-mailových kampaní na míru
  14. Šablony
    1. O předlohách aplikace Dreamweaver
    2. Rozpoznání předloh a dokumentů založených na předloze
    3. Vytvoření předlohy aplikace Dreamweaver
    4. Vytváření upravitelných oblastí v šablonách
    5. Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
    6. Použijte volitelné oblasti v předlohách
    7. Definování upravitelných atributů tagu v aplikaci Dreamweaver
    8. Postup vytvoření vnořených šablon v aplikaci Dreamweaver
    9. Úprava, aktualizace nebo odstranění předloh
    10. Export a import obsahu XML v aplikaci Dreamweaver
    11. Aplikace nebo odstranění předlohy z existujícího dokumentu.
    12. Úprava obsahu v předlohách Dreamweaver
    13. Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
    14. Nastavení předvoleb zvýraznění pro oblasti předlohy
    15. Výhody používání předloh v aplikaci Dreamweaver
  15. Mobilní zařízení a zařízení s více displeji
    1. Vytvoření multimediálních dotazů
    2. Změna orientace stránky pro mobilní zařízení
    3. Vytvoření webových aplikací pro mobilní zařízení pomocí aplikace Dreamweaver
  16. Dynamické weby, stránky a webové formuláře
    1. Informace o webových aplikacích
    2. Nastavení počítače pro vývoj aplikací
    3. Řešení problémů s připojením databází
    4. Odstranění skriptů připojení v aplikaci Dreamweaver
    5. Návrh dynamických stránek
    6. Přehled zdrojů dynamického obsahu
    7. Definice zdrojů dynamického obsahu
    8. Přidání dynamického obsahu na stránky
    9. Změna dynamického obsahu v aplikaci Dreamweaver
    10. Zobrazení záznamů databáze
    11. Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
    12. Přidání uživatelského chování serveru v aplikaci Dreamweaver
    13. Vytváření formulářů pomocí aplikace Dreamweaver
    14. Shromažďování informací od uživatelů pomocí formulářů
    15. Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
    16. Vytváření webových formulářů
    17. Rozšířená podpora formátu HTML5 pro elementy formuláře
    18. Vytváření formuláře pomocí aplikace Dreamweaver
  17. Vizuální vytváření aplikací
    1. Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
    2. Vytváření vyhledávacích stránek a stránek s výsledky
    3. Vytvoření stránky vložení záznamu
    4. Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
    5. Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
    6. Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
    7. Vytvoření registrační stránky
    8. Vytvoření přihlašovací stránky
    9. Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
    10. Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
    11. Používání komponent ColdFusion v aplikaci Dreamweaver
  18. Testování, náhled a publikování webových stránek
    1. Náhled stránek
    2. Náhled webových stránek Dreamweaver na více zařízeních
    3. Testování webu aplikace Dreamweaver

 

Vytvářejte, otevírejte, upravujte, ukládejte a vracejte soubory v aplikaci Dreamweaver. Vytvářejte předlohy a otevírejte související soubory.

Aplikace Dreamweaver nabízí flexibilní prostředí pro práci s různými webovými dokumenty. Kromě dokumentů HTML můžete vytvářet a otevírat různé dokumenty založené na textu – např. JavaScript, PHP a CSS (Cascading Style Sheets).

Aplikace Dreamweaver nabízí několik voleb, jak vytvořit nový dokument. Můžete vytvořit libovolný z následujících dokumentů:

  • nový prázdný dokument nebo předlohu;

  • dokument založený na předdefinovaných rozvrženích stránek, která jsou dodávána s aplikací Dreamweaver včetně více než 30 rozvržení stránek založených na CSS;

  • dokument založený na jedné z existujících předloh.

    Můžete také nastavit předvolby dokumentu. Pokud například většinou pracujete s jedním typem dokumentu, můžete ho nastavit jako výchozí typ pro nové stránky, které vytváříte.

    V zobrazení Návrh nebo v zobrazení Kód můžete snadno definovat vlastnosti dokumentu, například meta tagy, titulek dokumentu, barvy pozadí a další vlastnosti stránky.

Typy souborů aplikace Dreamweaver

v aplikaci Dreamweaver můžete pracovat s různými typy souborů. Základní druh souboru, se kterým budete pracovat, je soubor HTML. Soubory HTML (Hypertext Markup Language) obsahují jazyk, založený na značkách, zodpovídající za zobrazení webové stránky v prohlížeči. Soubory HTML můžete uložit s příponou .html nebo .htm. Aplikace Dreamweaver standardně ukládá soubory s příponou .html.

Aplikace Dreamweaver umožňuje vytvářet a upravovat webové stránky HTML5. Pro vytváření nových stránek HTML5 zcela od základu jsou k dispozici také základní rozvržení.

Níže jsou některé další typy souborů, se kterými můžete pracovat v aplikaci Dreamweaver:

CSS

Soubory kaskádových stylů mají příponu .css. Používají se pro formátování obsahu HTML a určují umístění různých elementů stránky.

GIF

Soubory GIF (Graphics Interchange Format) mají příponu .gif. Formát GIF je velice oblíbený webový grafický formát pro kreslené filmy, loga, grafiku s průhlednými plochami a animace. Soubory GIF obsahují maximálně 256 barev.

JPEG

Soubory JPEG (Joint Photographic Experts Group – pojmenovaný podle organizace, která formát vytvořila) mají příponu .jpg a jsou to obvykle fotografie nebo obrazy s vysokým počtem barev. Formát JPEG je nejlepší pro digitální nebo skenované fotografie, obrazy používající textury, obrazy s plynulými přechody barev a obrazy, které vyžadují více než 256 barev.

XML

Soubory XML (Extensible Markup Language) mají příponu .xml. Obsahují data v jednoduché formě, která může být formátována pomocí XSL (Extensible Stylesheet Language).

Dialogové okno Nový dokument

Dialogové okno Nový dokument obsahuje všechny podporované typy souborů s dokumenty, včetně formátu PHP, XML a SVG.

V tomto dialogovém okně můžete také sledovat předdefinovaná rozvržení, předlohy a rozhraní.

Poznámka:

Všechna doporučená základní rozvržení jsou vytvořena s důrazem na podporu responzivních webových stránek a jsou kompatibilní s prostředím HTML-5.

Vytvoření rozvržení HTML pomocí prázdné stránky

Můžete vytvořit stránku, která obsahuje předdefinovaná rozvržení CSS, nebo zcela prázdnou stránku, ke které vytvoříte vlastní rozvržení.

  1. Vyberte volbu Soubor > Nový.

  2. V kategorii Nový dokument vyberte ze sloupce Typ dokumentu druh stránky, který chcete vytvořit. Např. výběrem možnosti HTML vytvoříte prázdnou stránku HTML.

  3. Vyberte typ dokumentu z rozbalovací nabídky Typ dokumentu. Většinou můžete použít výchozí výběr, HTML5.

  4. Vyberte další možnosti na základě druhu stránky, který chcete vytvořit.

    • Žádné: Tuto možnost vyberte, pokud chcete vytvořit jednoduchou webovou stránku bez použití některého rozhraní.
    • Bootstrap: Předlohy Bootstrap jsou předem definovaná rozvržení za pomoci rozhraní Bootstrap. Tuto možnost vyberte, pokud chcete vytvořit responzivní webové stránky za pomoci rozhraní Bootstrap. Ve výchozím nastavení dojde k vytvoření dokumentu Bootstrap 4.0.0.
    Poznámka:

    Rozhraní Bootstrap vyberte, pokud plánujete vytvořit responzivní webové stránky.

  5. Pokud rozhraní nepoužíváte, využijte následující možnost:

    • Název dokumentu: V tomto poli zadejte název dokumentu a aplikace Dreamweaver jej automaticky přidá do části <head> v dokumentu.
    • Typ dokumentu: Z rozbalovací nabídky Typ dokumentu vyberte typ dokumentu. Většinou můžete použít výchozí výběr HTML5.

    Výběrem typu definice dokumentu XHTML z nabídky Typ dokumentu změníte stránku tak, aby vyhovovala potřebám jazyka XHTML. Změnit dokument HTML tak, aby vyhovoval XHTML, můžete například výběrem volby XHTML 1.0 přechodný nebo volby XHTML 1.0 Strict z nabídky. XHTML (Extensible Hypertext Markup Language) je přeformulování jazyka HTML jako aplikace XML. Užívání XHTML obecně nabízí výhody XML spolu se zajištěním zpětné i budoucí kompatibility webových dokumentů.

    Poznámka:

    Další informace o XHTML najdete na webových stránkách World Wide Web Consortium (W3C), které obsahují specifikaci XHTML 1.1 – modulově založené XHTML (www.w3.org/TR/xhtml11/) a XHTML 1.0 (www.w3c.org/TR/xhtml1/), a také webové stránky s moduly ověření XHTML pro webově založené soubory (http://validator.w3.org/) a lokální soubory (http://validator.w3.org/file-upload.html).

    • Připojit soubor CSS: Připojení stávajícího rozvržení CSS ke stránce.  Toho dosáhnete tak, že kliknete na ikonu Připojit seznam stylů u panelu Připojit soubor CSS a vyberete seznam stylů CSS.
    Vytvoření nové stránky HTML bez použití rozhraní
    Vytvoření nové stránky HTML bez použití rozhraní

    Pokud chcete vytvořit novou stránku na základě kompozice aplikace Photoshop, můžete výběrem možnosti Použít extrakt sestavit svoji stránku z kompozic aplikace Photoshop. 

    Tato možnost slouží k otevření panelu Extrakt, ze kterého můžete odeslat soubor PSD a začít s tvorbou stránky HTML.

  6. Pokud chcete vytvořit responzivní webové stránky za pomoci rozhraní Bootstrap, postupujte takto:

    • Bootstrap CSS: Možnost vytvoření nového souboru Bootstrap CSS nebo použití existujícího souboru CSS. Pokud používáte stávající soubor CSS, zadejte k němu cestu. Ujistěte se, že se soubor CSS nachází v kořenové složce webového místa.
    • Připojit soubor CSS: Připojení stávajícího rozvržení CSS ke stránce.  Toho dosáhnete tak, že kliknete na ikonu Připojit seznam stylů u panelu Připojit soubor CSS a vyberete seznam stylů CSS.
    • Zahrnout předem sestavené rozvržení: Tuto možnost vyberte, pokud již máte rozvržení. Kliknutím na možnost Přizpůsobit můžete upravit mřížku a hodnoty bodů přerušení.
    Vytvoření nové stránky HTML pomocí rozhraní Bootstrap
    Vytvoření nové stránky HTML pomocí rozhraní Bootstrap

    Pokud chcete vytvořit novou stránku na základě kompozice aplikace Photoshop, můžete výběrem možnosti Použít extrakt sestavit svoji stránku z kompozic aplikace Photoshop. 

    Tato možnost slouží k otevření panelu Extrakt, ze kterého můžete odeslat soubor PSD a začít s tvorbou stránky HTML.

  7. Chcete-li nastavit výchozí předvolby dokumentu, například typ dokumentu, kódování a příponu souboru, klikněte na tlačítko Předvolby.

  8. Klikněte na tlačítko Vytvořit.

  9. Uložte nový dokument (Soubor > Uložit).

  10. V dialogovém okně, které se zobrazí, přejděte do složky, do které chcete soubor uložit.
    Poznámka:

    Soubor je vhodné uložit na webu aplikace Dreamweaver.

  11. Do pole Název souboru zadejte název souboru.

    V názvech souborů a složek nepoužívejte mezery a speciální znaky a název souboru nezačínejte číslicí. Zejména nepoužívejte speciální znaky (například é, ç nebo ¥) nebo interpunkční znaménka (například dvojtečky, lomítka nebo tečky) v názvech souborů, které chcete umístit na vzdálený server. Mnoho serverů tyto znaky při odesílání změní, což způsobí přerušení odkazů na soubory.

Vytvoření prázdné předlohy

Pomocí dialogového okna Nový dokument můžete vytvářet předlohy aplikace Dreamweaver. Předlohy jsou standardně uloženy ve složce Předlohy vašeho webu.

Poznámka:

Bez předchozího vytvoření webu nelze vytvořit předlohu. Informace o webech a pokyny k vytvoření webu naleznete v tématu O webech aplikace Dreamweaver.

  1. Vyberte volbu Soubor > Nový.

  2. V dialogovém okně Nový dokument vyberte kategorii Předlohy webu.

  3. Vyberte typ dokumentu z rozbalovací nabídky Typ dokumentu. Většinou budete chtít ponechat výchozí výběr, volbu Jazyk XHTML 1.0 Transitional.

    Výběrem typu definice dokumentu XHTML z nabídky Typ dokumentu (DTD) změníte stránku tak, aby vyhovovala XHTML. Změnit dokument HTML tak, aby vyhovoval XHTML, můžete například výběrem volby XHTML 1.0 přechodný nebo volby XHTML 1.0 Strict z nabídky. XHTML (Extensible Hypertext Markup Language) je přeformulování jazyka HTML jako aplikace XML. Užívání XHTML obecně nabízí výhody XML spolu se zajištěním zpětné i budoucí kompatibility webových dokumentů.

    Poznámka:

    Další informace o XHTML najdete na webových stránkách World Wide Web Consortium (W3C), které obsahují specifikaci XHTML 1.1 – modulově založené XHTML (www.w3.org/TR/xhtml11/) a XHTML 1.0 (www.w3c.org/TR/xhtml1/), a také webové stránky s moduly ověření XHTML pro webově založené soubory (http://validator.w3.org/) a lokální soubory (http://validator.w3.org/file-upload.html).

  4. Možnost Aktualizovat stránku při změně předlohy vyberte, pokud chcete automaticky aktualizovat stránku při každé úpravě předlohy.

  5. Klikněte na tlačítko Vytvořit.

  6. Uložte nový dokument (Soubor > Uložit). Pokud dosud nemáte do předlohy přidány upravitelné oblasti, zobrazí se dialogové okno, které vám řekne, že v dokumentu nejsou žádné upravitelné oblasti. Klepnutím na tlačítko OK dialogové okno zavřete.

  7. V dialogu Uložit jako vyberte web, do kterého chcete uložit předlohu.
  8. Do pole Název souboru zadejte název nové předlohy. Příponu souboru nemusíte k názvu předlohy přidávat. Když kliknete na tlačítko Uložit, k nové předloze se přidá přípona .dwt a předloha se uloží do složky Předlohy vašeho webu.

    V názvech souborů a složek nepoužívejte mezery a speciální znaky a název souboru nezačínejte číslicí. Zejména nepoužívejte speciální znaky (například é, ç nebo ¥) nebo interpunkci (například dvojtečky, lomítka nebo tečky) v názvech souborů, které chcete umístit na vzdálený server. Mnoho serverů tyto znaky při odesílání změní, což způsobí přerušení odkazů na soubory.

Vytvoření stránky na základě předlohy

Podle potřeby můžete vybrat, zobrazit náhled a vytvořit nový dokument pomocí jedné z existujících předloh nebo počáteční předlohy aplikace Dreamweaver. Pomocí dialogového okna Nový dokument můžete vybrat předlohu z aplikací definovaného webu nebo můžete pomocí panelu Datové zdroje vytvořit nový dokument z existující předlohy.

Vytvoření dokumentu podle předlohy

  1. Vyberte volbu Soubor > Nový.

  2. V dialogovém okně Nový dokument vyberte kategorii Stránka z předlohy.

  3. Ze sloupce Web vyberte web aplikace Dreamweaver obsahující předlohy, které chcete použít, a ze seznamu vpravo vyberte předlohu.

  4. Pokud nechcete aktualizovat tuto stránku pokaždé, když uděláte změny v předloze, na které je tato stránka založena, odznačte volbu Aktualizovat stránku při změně předlohy.

  5. Chcete-li nastavit výchozí předvolby dokumentu, například typ dokumentu, kódování a příponu souboru, klikněte na tlačítko Předvolby.

  6. Chcete-li otevřít web Dreamweaver Exchange, odkud můžete stáhnout další obsah stránky, klikněte na tlačítko Získat více obsahu.

  7. Klikněte na tlačítko Vytvořit a uložte dokument (Soubor > Uložit).

Vytvoření dokumentu z předlohy v panelu Datové zdroje

  1. Pokud není již otevřen, otevřete panel Datové zdroje (Okna > Datové zdroje).

  2. Chcete-li zobrazit seznam předloh aktuálního webu, klikněte vlevo v panelu Datové zdroje na ikonu Předlohy .

    Poznámka:

    Pokud jste už vytvořili předlohu, kterou chcete aplikovat, budete možná muset kliknout na tlačítko Obnovit, aby se zobrazila.

  3. Klikněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) na šablonu, kterou chcete použít, a vyberte volbu Nový z předlohy.

    Dokument se otevře v okně Dokument.

  4. Uložte dokument.

Vytvoření stránky na základě počáteční předlohy aplikace Dreamweaver

Aplikace Dreamweaver obsahuje několik profesionálně vyvinutých úvodních souborů pro mobilní aplikace. Tyto vzorové soubory můžete použít jako výchozí bod pro návrh stránek vašeho webu.

Když vytvoříte dokument založený na počáteční předloze, aplikace Dreamweaver vytvoří kopii tohoto souboru, takže nedojde k přepsání úvodních souborů.

V dialogovém okně Nový dokument můžete zobrazit náhled vzorového souboru a přečíst si krátký popis elementů návrhu dokumentu.

  1. Vyberte volbu Soubor > Nový.

  2. V dialogovém okně Nový dokument vyberte kategorii Počáteční předlohy.

    Počáteční předlohy v aplikaci Dreamweaver
    Počáteční předlohy v aplikaci Dreamweaver

    Společně s výběrem různých možností se vám na pravé straně panelu zobrazí příslušné podrobnosti o vzorové stránce a její vizualizace.

  3. Klikněte na tlačítko Vytvořit.

    Nový dokument a veškeré související soubory se otevřou v okně dokumentu.

  4. Uložte dokument (Soubor > Uložit).

Vytvoření nových souborů s kódem pro různé jazyky k psaní kódu

v aplikaci Dreamweaver můžete vytvářet soubory s kódem pro nejrůznější jazyky k psaní kódu.

Další informace o podpoře psaní kódu v aplikaci Dreamweaver naleznete v tématu O psaní kódu v aplikaci Dreamweaver.

Při vytváření nového souboru s kódem v aplikaci Dreamweaver použijte následujících pokyny:

  1. Vyberte možnost Soubor > Nový dokument.

  2. Z nabídky Typ dokumentu vyberte soubor s kódem, který chcete vytvořit.

  3. Ve sloupci Typ dokumentu vyberte druh dokumentu, který chcete vytvořit (například soubor PHP).

    Vytvoření nové stránky PHP
    Vytvoření nové stránky PHP

  4. V závislosti na vybraném typu souboru vám budou při vytváření dokumentu k dispozici další možnosti. 

    Pokud například vytváříte soubor PHP, můžete vybrat možnosti Typ dokumentu nebo některé možnosti pro soubor CSS.

  5. Klikněte na tlačítko Vytvořit. Následně dokument uložte (Soubor > Uložit).

Uložit a obnovit dokumenty

Je možné uložit dokument s aktuálním názvem a umístěním nebo jeho kopii s jiným názvem a umístěním.

Poznámka:

Při pojmenovávání souborů se v názvech souborů a složek vyhýbejte používání mezer a speciálních znaků. Zejména nepoužívejte speciální znaky (například é, ç nebo ¥) nebo interpunkci (například dvojtečky, lomítka nebo tečky) v názvech souborů, které chcete umístit na vzdálený server. Mnoho serverů tyto znaky při odesílání změní, což způsobí přerušení odkazů na soubory. Na začátku názvů souborů také nepoužívejte číslice.

Uložení dokumentu

  1. Proveďte jeden z následujících úkonů:
    • Chcete-li přepsat aktuální verzi na disku a uložit provedené změny, vyberte volbu Soubor > Uložit.
    • Chcete-li soubor uložit do jiné složky nebo pod jiným názvem, vyberte volbu Soubor > Uložit jako.
  2. V dialogovém okně Uložit jako, které se zobrazí, přejděte do složky, do které chcete soubor uložit.
  3. Do textového pole Název souboru zadejte název souboru.

  4. Kliknutím na tlačítko Uložit uložíte soubor PNG.

Uložení všech otevřených dokumentů

  1. Vyberte volbu Soubor > Uložit vše.

  2. Pokud jsou otevřené neuložené dokumenty, pro každý z nich se zobrazí dialogové okno Uložit jako.

    V dialogovém okně, které se zobrazí, přejděte do složky, do které chcete soubor uložit.

  3. Do textového pole Název souboru zadejte název souboru a klikněte na tlačítko Uložit.

Obnovení naposledy uložené verze dokumentu

  1. Vyberte volbu Soubor > Obnovit.

    Zobrazí se dialogové okno s dotazem, zda chcete zrušit změny a vrátit se k naposledy uložené verzi.

  2. Kliknutím na tlačítko Ano se vrátíte k předchozí verzi, kliknutím na tlačítko Ne zachováte změny.

    Poznámka:

    Pokud uložíte dokument a ukončíte aplikaci Dreamweaver, nebudete se po novém spuštění aplikace Dreamweaver moci k předchozí verzi vrátit.

Nastavení výchozího typu dokumentu a předvoleb kódování

Pokud je většina stránek ve webovém místě určitého typu souboru (například HTML, PHP nebo JavaScript), můžete nastavit předvolby dokumentu tak, že nové dokumenty se automaticky vytvoří jako tento typ souboru.

  1. Vyberte volbu Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh).

    Poznámka:

    Chcete-li nastavit předvolby nového dokumentu při jeho vytváření, můžete také v dialogovém okně Nový dokument kliknout na tlačítko Předvolby.

  2. V seznamu kategorií vlevo klikněte na tlačítko Nový dokument.

  3. Nastavte nebo změňte předvolby podle potřeby a klikněte na tlačítko OK, abyste změny uložili.

    Výchozí dokument

    Vyberte typ dokumentu, který se použije pro vytvářené stránky.

    Výchozí přípona

    Určete příponu souboru, které dáváte přednost (.htm nebo .html), pro nové stránky HTML, které vytváříte.

    Poznámka: Tato volba je pro další typy souborů vypnutá.

    Výchozí typ dokumentu (DDT)

    Chcete-li vytvořit novou stránku, která vyhovuje XHTML, vyberte jednu z definic typu dokumentu XHTML (DTD). Změnit dokument HTML tak, aby vyhovoval XHTML, můžete například výběrem volby Jazyk XHTML 1.0 Transitional nebo volby Jazyk XHTML 1.0 Strict z nabídky.

    Výchozí kódování

    Určete kódování, které se má použít při vytváření nové stránky a stejně tak i při otevření dokumentu, ve kterém není určeno žádné kódování.

    Pokud jako kódování dokumentu vyberete volbu Unicode (UTF-8), kódování entit není nutné, protože kódování UTF-8 dokáže spolehlivě zobrazit všechny znaky. Pokud vyberete jiné kódování dokumentu, bude možná nutné zadat kódování entit pro zobrazení určitých znaků. Další informace o entitách znaků naleznete na adrese www.w3.org/TR/REC-html40/sgml/entities.html.

    Pokud jako výchozí kódování vyberete volbu Unicode (UTF-8), výběrem volby Zahrnout signaturu Unicode (BOM) můžete do dokumentu vložit značku pořadí bytů (BOM).

    Signatura BOM jsou 2 až 4 byty na začátku textového souboru, které identifikují soubor s kódováním Unicode a také pořadí následujících bytů. Protože UTF-8 nemá žádné pořadí bytů, je přidání signatury BOM pro UTF-8 nepovinné. Pro UTF-16 a UTF-32 je přidání signatury BOM vyžadované.

    Typ normalizace Unicode

    Pokud jako výchozí kódování zvolíte Unicode (UTF-8), vyberte jednu z těchto voleb.

    Existují čtyři typy normalizace Unicode. Nejdůležitější je normalizační forma C, protože se nejběžněji používá ve znakovém modelu pro web. Společnost Adobe nabízí pro úplnost i ostatní tři typy normalizace Unicode.

    Při Ctrl+N zobrazit dialogové okno Nový dokument

    Chcete-li automaticky vytvořit dokument výchozího typu, když použijete klávesovou zkratku, zrušte zaškrtnutí této volby („Apple+N“ pro Macintosh).

    V systému Unicode se vyskytují znaky, které jsou si vzhledově podobné, ale mohou být v dokumentu uloženy různými způsoby. Například „ë“ (přehlasované e) může být zobrazeno jako jeden znak „přehlasované e“ nebo jako dva znaky „normální latinkové e“ + „kombinační znaménko přehlásky“. Kombinační znak Unicode je takový znak, který se používá s předchozím znakem, takže znaménko přehlásky se zobrazí nad „latinkovým e“. Oba tyto tvary mají stejnou vizuální typografii, ale v souboru je uložen každý jinak.

    Normalizace je proces kontroly, zda všechny znaky, které mohou být uloženy v rozdílných formách, jsou uloženy ve stejné formě. Všechny znaky „ë“ v dokumentu jsou tedy uloženy buď jako jedno „přehlasované e“, nebo jako „e“ + „kombinační znaménko přehlásky“, a ne v obou tvarech v jednom dokumentu.

    Další informace o normalizaci Unicode a specifických formách, které mohou být použity, naleznete na webových stránkách Unicode na adrese www.unicode.org/reports/tr15.

Otevření a úpravy existujících dokumentů

Existující webovou stránku nebo textový dokument můžete otevřít bez ohledu na to, zda byl nebo nebyl vytvořen v aplikaci Dreamweaver, a upravit ho v zobrazení Návrh nebo v zobrazení Kód.

Pokud je otevřený dokument soubor aplikace Microsoft Word, který je uložen jako dokument HTML, můžete pomocí nabídky Nástroje > Vyčistit HTML z aplikace Word odstranit nadbytečné tagy, které aplikace Word vkládá do souborů HTML.

Chcete-li vyčistit HTML nebo XHTML, který nebyl vytvořen z aplikace Microsoft Word, použijte nabídku Nástroje > Vyčistit HTML. Další informace naleznete v tématu Vyčištění souborů HTML z aplikace Microsoft Word.

Otevřít můžete i textové soubory, které nejsou ve formátu HTML, například soubory JavaScript, soubory XML, seznamy stylů CSS nebo textové soubory vytvořené pomocí textových procesorů nebo editorů.

  1. Vyberte volbu Soubor > Otevřít.

    Poznámka:

    K otevírání souborů můžete také použít panel Soubory.

  2. Vyhledejte a vyberte soubor, který chcete otevřít.
    Poznámka:

    Pokud jste to ještě neudělali, je vhodné uspořádat soubory, které plánujete otevřít a upravit, ve webu aplikace Dreamweaver místo jejich otevření z jiného umístění. Další informace O webech aplikace Dreamweaver naleznete v tématu O webech aplikace Dreamweaver.

  3. Klikněte na tlačítko Otevřít.

    Dokument se otevře v okně dokumentu. JavaScript, text a seznamy stylů CSS se standardně otevírají v zobrazení Kód. Během práce v aplikaci Dreamweaver můžete dokument aktualizovat a změny ukládat do souboru.

Aplikace Dreamweaver umožňuje zobrazovat soubory související s hlavním dokumentem bez ztráty aktivního hlavního dokumentu. Například v případě připojených souborů CSS a JavaScript k hlavnímu dokumentu umožňuje aplikace Dreamweaver zobrazovat a upravovat tyto související soubory v okně Dokument, zatímco hlavní dokument je stále viditelný.

Další informace o dynamických souvisejících souborech naleznete v tématu Otevření dynamicky souvisejících souborů.

Poznámka:

Pokud chcete při práci se soubory HTML provést rychlé změny v souvisejících souborech CSS, JavaScript nebo PHP, aniž by bylo nutné na tento soubor přejít, můžete použít rychlé úpravy. Další informace naleznete v tématu Rychlá úprava.

Ve výchozím nastavení aplikace Dreamweaver zobrazuje titulky všech souborů souvisejících s hlavním dokumentem v panelu nástrojů Související soubory pod názvem hlavního dokumentu. Pořadí tlačítek na panelu nástrojů je určeno pořadím odkazů na související soubory v hlavním dokumentu.

Poznámka:

Pokud související soubor chybí, aplikace Dreamweaver zobrazí odpovídající tlačítko na panelu nástrojů Související soubory. Kliknete-li na toto tlačítko, aplikace Dreamweaver nic nezobrazí.

Aplikace Dreamweaver podporuje následující typy souvisejících souborů:

  • soubory skriptů na straně klienta,
  • zahrnutí na straně serveru,
  • externí seznamy stylu CSS (včetně vnořených seznamů stylu).

Proveďte jeden z následujících úkonů:

  • Na panelu nástrojů Související soubory v horní části dokumentu klikněte na název souvisejícího souboru, který chcete otevřít.

  • V panelu nástrojů Související soubory klikněte pravým tlačítkem na název souvisejícího souboru, který chcete otevřít, a z kontextové nabídky vyberte volbu Otevřít jako samostatný soubor. Otevřete-li související soubor tímto způsobem, hlavní dokument nezůstane viditelný.

  1. Umístěte textový kurzor na řádek nebo do oblasti, o níž víte, že je ovlivněna souvisejícím souborem.

  2. Počkejte, dokud se nezobrazí ukazatel aplikace Navigace v kódu, a poté kliknutím na něj aplikaci Navigátor kódu otevřete.

  3. Umístěním ukazatele na položky v aplikaci Navigátor kódu zobrazíte další informace. Například chcete-li změnit určitou barevnou vlastnost CSS, ale nevíte, které pravidlo se jí týká, tuto vlastnost můžete zjistit umístěním ukazatele na dostupná pravidla v aplikaci Navigace v kódu.

  4. Kliknutím na tuto položku otevřete odpovídající související soubor.

Návrat do zdrojového kódu hlavního dokumentu

  1. Klikněte na tlačítko Zdrojový kód na panelu nástrojů Související soubory.

Otevřete-li související soubor v zobrazení návrhu nebo v zobrazení kódunávrhu (rozdělené zobrazení), související soubor se zobrazí v rozděleném zobrazení.

Pokud budete chtít rozdělené zobrazení přizpůsobit, můžete vybrat možnost Zobrazit > Rozdělit a vybrat z různých možností rozděleného zobrazení.

Pokud chcete zobrazit související soubory pouze v zobrazení kódu, vyberte v horní části panelu možnost Kód.

Poznámka:

Standardní zobrazení kódu neumožňuje současně zobrazit související dokumenty společně se zdrojovým kódem hlavního dokumentu.

Poznámka:

Položka „Zobrazení kódu“ v možnostech zobrazení se vztahuje ke zdrojovému kódu hlavního dokumentu. Vyberete-li například možnost Zobrazení > Zobrazení kódu nahoře, aplikace Dreamweaver zobrazí zdrojový kód hlavního dokumentu v horní polovině okna dokumentu. Vyberete-li možnost Zobrazení > Zobrazení kódu vlevo, aplikace Dreamweaver zobrazí zdrojový kód hlavního dokumentu na levé straně okna dokumentu.

Ve výchozím nastavení se při otevření souboru HTML v aplikaci Dreamweaver zobrazí související soubory na samostatných kartách. Pokud budete chtít tuto funkci zakázat, můžete ji deaktivovat pomocí panelu Předvolby.

  1. Vyberte volbu Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh).

  2. V kategorii Všeobecné zrušte výběr volby Povolit související soubory.

Funkce Dynamicky související soubory rozšiřuje funkci Související soubory tím, že umožňuje zobrazení souvisejících souborů dynamických stránek v panelu nástrojů Související soubory. Konkrétně funkce Dynamicky související soubory umožňuje zobrazení množství dynamických vložení potřebných k vytvoření kódu rozhraní u oblíbených rozhraní systému správy obsahu (CMS) PHP s otevřeným zdrojem, jako je WordPress, Drupal nebo Joomla!

Pokud chcete funkci Dynamicky související soubory používat, je třeba mít přístup k místnímu nebo vzdálenému aplikačnímu serveru PHP, na kterém je spuštěno rozhraní WordPress, Drupa nebo Joomla! Jedním z běžných postupů při testování stránek je spuštění místního localhost aplikačního serveru PHP a testování stránek v místních podmínkách.

Před testováním stránek je třeba provést následující:

  • Nastavte web aplikace Dreamweaver a ujistěte se, že jste vyplnili textové pole Adresa URL webu v dialogovém okně Nastavení webu.

  • Nastavte aplikační server PHP.

    Poznámka: Před zahájením práce s dynamicky souvisejícími soubory v aplikaci Dreamweaver je třeba, aby byl server spuštěný.

  • Na aplikační server nainstalujte rozhraní WordPress, Drupal nebo Joomla!. Další informace:

  • V aplikaci Dreamweaver určete místní složku, kde budou soubory CMS stahovány a upravovány.

  • Umístění nainstalovaných souborů WordPress, Drupal nebo Joomla nastavte jako vaši vzdálenou a zkušební složku.

  • Stáhněte nebo si obstarejte soubory CMS ze vzdálené složky.

Po otevření stránky s přiřazenými dynamicky souvisejícími soubory aplikace Dreamweaver umožňuje soubory vyhledat automaticky, nebo vás nechá vyhledat je ručně (kliknutím na odkaz v informačním pruhu nad stránkou). Podle výchozího nastavení probíhá vyhledání ručně.

  1. Vyberte položky Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh OS).

  2. Ujistěte se, že je v kategorii Obecné označena možnost Povolit související soubory.

  3. V rozbalovací nabídce Dynamicky související soubory vyberte možnost Ručně nebo Automaticky. Vyhledávání můžete také zakázat úplně pomocí možnosti Zakázáno.

  1. Otevřete stránku s přiřazenými dynamicky souvisejícími soubory (např. kořenová stránka webu se souborem index.php na webu s rozhraním WordPress, Drupal nebo Joomla!).

  2. Pokud je vyhledávání dynamicky souvisejících souborů nastaveno na ruční režim (výchozí nastavení), klikněte na odkaz Vyhledat v informačním pruhu nad stránkou v okně Dokument.

    Pokud je vyhledávání dynamicky souvisejících souborů nastaveno na automatický režim, zobrazí se v panelu nástrojů Související soubory seznam dynamicky souvisejících souborů.

Pořadí souvisejících a dynamicky souvisejících souborů je v panelu nástrojů Související soubory určeno následovně:

  • statické související soubory (související soubory nevyžadující žádné dynamické zpracování),
  • externí související soubory (soubory .css a .js) přiřazené k vloženým souborům na serveru s dynamickým umístěním,
  • vložené soubory na serveru s dynamickým umístěním (soubory .php, .inc a .module).

Vzhledem k tomu, že počet souvisejících a dynamicky souvisejících souborů může být vysoký, aplikace Dreamweaver umožňuje související soubory filtrovat a přesně tak určit soubory, se kterými chcete pracovat.

  1. Otevřete stránku, ke které jsou přiřazeny související soubory.

  2. Podle potřeby vyhledejte dynamicky související soubory.

  3. Klikněte na ikonu Filtrovat související soubory na pravé straně panelu nástrojů Související soubory.

  4. Vyberte typ souborů, které chcete v panelu nástrojů Související soubory zobrazit. Podle výchozího nastavení jsou v aplikaci Dreamweaver vybrány všechny související soubory.

  5. Chcete-li vytvořit vlastní filtr, klikněte na ikonu Filtrovat související soubory a poté na možnost Vlastní filtr.

    Dialogové okno Vlastní filtr umožňuje filtrovat pouze soubory s přesným názvem (style.css), přípony souborů (.php) a výrazy se zástupným znakem v podobě hvězdičky (*menu*). Filtrovat můžete více výrazů se zástupným znakem, pokud každé z nich oddělíte středníkem (např. style.css;*.js;*tpl.php).

Poznámka:

Nastavení filtru nebude po zavření souboru uloženo.

Vyčištění souborů HTML z aplikace Microsoft Word

Dokumenty uložené aplikací Microsoft Word (aplikace Microsoft Word 97 a novější) jako soubory HTML můžete otevřít a pomocí nabídky Nástroje > Vyčistit HTML z aplikace Word odstranit nadbytečný kód HTML vytvořený aplikací Word.

Kód, který aplikace Dreamweaver odstraní, aplikace Word používá zejména k formátování a zobrazení dokumentů v aplikaci Word a není ve skutečnosti potřeba pro zobrazení souboru HTML.

Vytvořte si kopii svého původního souboru aplikace Word (.doc) jako zálohu, protože po vyčištění souboru HTML již nemusí jít daný dokument HTML v aplikaci Word otevřít.

Poznámka:

Chcete-li vyčistit HTML nebo XHTML, který nebyl vytvořen z aplikace Microsoft Word, použijte nabídku Nástroje > Vyčistit HTML.

  1. Uložte dokument v aplikaci Microsoft Word jako soubor HTML.
    Poznámka:

    Abyste se vyhnuli porušení sdílení v systému Windows, uzavřete původní soubor v aplikaci Word.

  2. Otevřete soubor HTML v aplikaci Dreamweaver.

    Chcete-li zobrazit kód HTML vytvořený aplikací Word, přepněte do zobrazení kódu (Zobrazení > Kód).

  3. Vyberte možnost Nástroje > Vyčistit HTML z aplikace Word.

    Poznámka:

    Pokud nedokáže aplikace Dreamweaver určit verzi aplikace Word použitou pro uložení souboru, vyberte správnou verzi z rozbalovací nabídky.

  4. Vyberte (nebo odznačte) volby vyčištění. Předvolby, které zadáte, se uloží jako výchozí nastavení pro vyčištění.

    Aplikace Dreamweaver aplikuje nastavení pro vyčištění na dokument HTML a zobrazí seznam změn (pokud jste tuto volbu v dialogovém okně neodznačili).

    Možnosti vyčištění souborů HTML z aplikace Microsoft Word
    Možnosti vyčištění souborů HTML z aplikace Microsoft Word

    Odstranit všechny specifické značky aplikace Word

    Odstraní všechen kód HTML specifický pro aplikaci Microsoft Word včetně XML z tagů HTML, vlastních metadat aplikace Word a tagů odkazů v hlavičce dokumentu, značek XML aplikace Word, podmíněných tagů a jejich obsahů a prázdných odstavců a okrajů ze stylů. Pomocí záložky Podrobné můžete vybrat jednotlivě každou z těchto voleb.

    Vyčistit CSS

    Odstraní všechen kód CSS specifický pro aplikaci Microsoft Word včetně inline stylů CSS, když je to možné (kde rodičovský styl má stejné vlastnosti stylu), atributů stylů začínajících na „mso“, deklarací stylů jiných než CSS, atributů stylů CSS z tabulek a všech nepoužitých definic stylů ze záhlaví. Pomocí záložky Podrobné můžete tuto volbu nastavit podrobněji.

    Vyčistit tagy <font>

    Odstraní tagy HTML a převede výchozí základní text na text HTML o velikosti 2.

    Opravit chybně vnořené tagy

    Odstraní tagy značek písma vložené aplikací Word mimo tagy odstavců a nadpisů (na úrovni bloku).

    Aplikovat formátování zdroje

    Aplikuje na dokument volby formátování zdroje, které jste zadali v předvolbách Formát HTML a v souboru SourceFormat.txt.

    Po dokončení zobrazit zprávu

    Zobrazí po vyčištění výstražné okno s podrobnostmi o změnách, které byly v dokumentu provedeny.

  5. Chcete-li podrobněji změnit volby Odstranit všechny specifické značky Wordu a Vyčistit CSS, klikněte na tlačítko OK nebo na záložku Podrobné a pak klikněte na tlačítko OK.

 Adobe

Získejte pomoc rychleji a snáze

Nový uživatel?