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.

    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á místa 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. Klepně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 možnost 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á místa 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. Klepně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.

    U názvů 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. Klepně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. Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) na předlohu, 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 možnost 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. Klepnutí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. Klepnutí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 kódování předvolby

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ů najdete 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, najdete 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. Klepně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. Klepnete-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. Klepnutím na tuto položku otevřete odpovídající související soubor.

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

  1. Klepně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 možnost Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh).

  2. V kategorii Všeobecné zrušte výběr možnosti 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. Klepně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 aplikace Dreamweaver nedokáže 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.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online