Využijte možnosti zobrazit náhled webových stránek v aplikaci Dreamweaver, a to v prohlížečích a na mobilních zařízení.

Náhled v reálném čase umožňuje zobrazit náhled stránek v prohlížeči a z mobilního zařízení a sledovat v reálném čase v prohlížeči nebo ze zařízení změny při psaní kódu.

Živé zobrazení vám poskytne představu o tom, jak budou stránky vypadat na webu, a umožňuje upravovat položky v zobrazení kódu.

Zobrazení návrhu vám také poskytne představu o tom, jak bude vaše stránka vypadat na webu, ale nevykreslí stránku přesně jako prohlížeče.

Funkce Otevřít v prohlížeči umožňuje vidět to, jak budou stránky vypadat v prohlížečích. Tento postup je nejvhodnější při práci se stránkami, které používají dynamická data z databází, protože práce neprobíhá v reálném čase.

Přečtěte si další informace o různých typech možností náhledu v aplikaci Dreamweaver.

Náhled v prohlížeči v reálném čase

Podle potřeby můžete sledovat náhled webových stránek v reálném čase během psaní kódu a vytváření návrhu v aplikaci Dreamweaver. Tato funkce umožňuje současně psát kód a sledovat náhled webových stránek na více prohlížečích. 

Náhled změn v reálném čase v prohlížeči
Náhled změn v reálném čase v prohlížeči

Poznámka:

Podle potřeby můžete také sledovat náhled kódu v mobilních zařízeních v reálném čase. Další informace naleznete v tématu Náhled webových stránek aplikace Dreamweaver na několika zařízeních.

  1. Na stavovém řádku aplikace Dreamweaver klikněte na možnost Náhled v reálném čase.

    Náhled v reálném čase
    Náhled v reálném čase

    Nově získáváte možnost zobrazit náhled svých webových stránek v reálném čase v rámci prohlížeče nebo na zařízení.

    Pokud chcete zobrazit náhled webových stránek na zařízení, přečtěte si téma Náhled webových stránek Dreamweaver na více zařízeních.

  2. Pokud budete chtít zobrazit náhled webových stránek v prohlížeči, klikněte na některou z možností prohlížeče.

    Poznámka:

    Seznam prohlížečů uvedených v tomto seznamu můžete upravit. Pokyny k přidání nebo odebrání prohlížeče z tohoto seznamu naleznete v tématu Nastavení předvoleb prohlížeče.

    Pokud máte testovací server, nezapomeňte během nastavení testovacího serveru povolit možnost Automatické odesílání souborů na testovací server. 

    Náhled v reálném čase získává údaje ze souborů na testovacím serveru. Povolením automatického odesílání na testovací server zajistíte, že se změny zobrazí v reálném čase. 

    Povolení automatického odesílání na testovací server
    Povolení automatického odesílání na testovací server

  3. Po zobrazení výzvy uložte webovou stránku a související dokumenty.

    V prohlížeči se zobrazí webová stránka.

  4. Pokračujte v psaní kódu a sledujte, jak se změny ihned projevují v prohlížeči.

Nastavení předvoleb náhledu v prohlížeči

Pro prohlížeč můžete nastavit předvolby pro náhled stránky a definovat výchozí primární a sekundární prohlížeč.

Tyto předvolby prohlížeče se použijí bez ohledu na to, zda zobrazujete náhled živého webu s náhledem v reálném čase, nebo jednoduše otevíráte stránku v prohlížeči.

  1. Vyberte možnosti Soubor > Náhled v reálném čase > Upravit seznam prohlížečů.

  2. Chcete-li do seznamu přidat prohlížeč, klepněte na tlačítko plus (+), vyplňte dialogové okno Přidat prohlížeč a klepněte na tlačítko OK.
  3. Chcete-li ze seznamu odstranit prohlížeč, vyberte ho a klepněte na tlačítko minus (-).
  4. Chcete-li změnit nastavení pro vybraný prohlížeč, klikněte na tlačítko Upravit, proveďte změny v dialogovém okně Upravit prohlížeč a pak klikněte na tlačítko OK.
  5. Výběrem volby Primární prohlížeč nebo Sekundární prohlížeč určíte, zda bude vybraný prohlížeč primárním nebo sekundárním prohlížečem.

    Klávesami F12 (Windows) nebo Alt+F12 (Macintosh) otevřete primární prohlížeč; pomocí kláves Ctrl+F12 (Windows) nebo Apple+F12 (Macintosh) otevřete sekundární prohlížeč.

  6. Vyberte volbu Náhled s použitím dočasného souboru, chcete-li vytvořit dočasnou kopii pro zobrazení náhledu a ladění na serveru. (Chcete-li aktualizovat dokument přímo, odznačte tuto volbu.)

Zobrazení náhledu stránek v Živém zobrazení

Živé zobrazení se od tradičního zobrazení návrhu v aplikaci Dreamweaver liší v tom, že poskytuje společně s možností úpravy také realističtější vykreslování, aby stránka vypadala jako v prohlížeči. 

Do zobrazení Živé zobrazení můžete kdykoli přepnout ze zobrazení Návrh. Přepnutí do zobrazení Živé zobrazení se ale nevztahuje na přepínání mezi dalšími tradičními zobrazeními v aplikaci Dreamweaver (Kód/Rozdělené zobrazení/Návrh). Přepnete-li do zobrazení Živé zobrazení ze zobrazení Náhled, jedná se o jednoduché přepnutí zobrazení Návrh mezi upravitelným a „živým“ pohledem.

Zatímco zobrazení Návrh při vstupu do zobrazení Živé zobrazení zůstane zmrazené, zobrazení Kód bude i nadále upravitelné, takže budete moci kód změnit a poté obnovit Živé zobrazení, abyste si mohli prohlédnout provedené změny. V zobrazení Živé zobrazení máte také další volby zobrazení živého kódu. Zobrazení Živý kód je podobné zobrazení Živé zobrazení, ale zobrazuje verzi kódu, který je zpracováván prohlížečem při vykreslování stránky. Stejně jako Živé zobrazení, zobrazení Živý kód není upravitelné.

Další výhodou Živého zobrazení je možnost zmrazení kódu jazyka JavaScript. Můžete například přepnout do živého zobrazení a umístit ukazatel na řádky tabulky jQuery, které mění barvu na základě interakce s uživatelem. Zmrazíte-li kód jazyka JavaScript, Živé zobrazení zmrazí stránku v aktuálním stavu. Styly CSS a kód jazyka JavaScript můžete upravit a poté stránku obnovit a prohlédnout si provedené změny. Zmrazení kódu jazyka JavaScript v Živém zobrazení je užitečné, chcete-li zobrazit a změnit vlastnosti různých stavů rozbalovacích nabídek nebo jiných interaktivních prvků, které nemůžete zobrazit v tradičním zobrazení Návrh.

Postup zobrazení náhledu stránek v Živém zobrazení:

  1. Ujistěte se, zda pracujete v zobrazení Návrh (Zobrazení > Návrh) nebo Kód a Návrh (Zobrazení > Kód a Návrh).

  2. Klepněte na tlačítko Živé zobrazení.

  3. (Volitelně) Změny můžete provádět v zobrazení Kód, v panelu Styly CSS, v externím seznamu stylů CSS nebo v jiném souvisejícím souboru.

    Ačkoli nemůžete provádět úpravy v zobrazení Živé zobrazení, možnosti provádění úprav v jiných oblastech (například v panelu Styly CSS nebo v zobrazení Kód) se změní, jakmile klepnete do živého zobrazení.

    Poznámka:

    Pracovat můžete se souvisejícími soubory (jako jsou seznamy stylů CSS) při otevřeném Živém zobrazení – stačí je otevřít na panelu nástrojů Související soubory v horní části dokumentu.

  4. Pokud jste provedli změny v zobrazení Kód nebo v souvisejícím souboru, Živé zobrazení obnovíte klepnutím na tlačítko Obnovit v panelu nástrojů Dokument nebo stisknutím klávesy F5.

  5. Chcete-li se vrátit do upravitelného zobrazení Návrh, klepněte znovu na tlačítko Živé zobrazení.

Zobrazení náhledu živého kódu

Kód zobrazený v zobrazení Živý kód je podobný kódu, který se zobrazí při otevření zdroje stránky v prohlížeči. Zatímco tyto zdroje stránek jsou statické a poskytují pouze zdroj stránky z prohlížeče, Živý kód je dynamický a aktualizuje se současně s interakcí se stránkou v Živém zobrazení.

  1. Ujistěte se, že se nacházíte v Živém zobrazení.

  2. Klepněte na tlačítko Živý kód.

    Aplikace Dreamweaver zobrazuje živý kód, který by prohlížeč použil k zobrazení stránky. Žlutě zvýrazněný kód nelze upravovat.

    Při použití interaktivních elementů na stránce zvýrazní živý kód dynamické změny v kódu.

  3. Chcete-li zvýraznění změn při zobrazení živého kódu vypnout, zvolte možnosti Zobrazit > Možnosti živého zobrazení > Zvýraznit změny v Živém kódu.

  4. Chcete-li se vrátit do upravitelného zobrazení kódu, klepněte znovu na tlačítko Živý kód.

Chcete-li změnit předvolby pro živý kód, zvolte možnosti Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh) a vyberte kategorii Barevné zvýraznění kódu.

Zmrazit JavaScript

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

  • Stiskněte klávesu F6.

  • Vyberte volbu Zmrazit JavaScript z rozbalovací nabídky tlačítka Živé zobrazení.

Informační panel v horní části dokumentu oznámí, že kód jazyka JavaScript je zmrazený. Chcete-li informační panel zavřít, klepněte na odkaz Zavřít.

Možnosti Živého zobrazení

Vedle možnosti Zafixovat JavaScript je v rozbalovací nabídce tlačítka Živé zobrazení nebo v položce nabídky Zobrazení > Možnosti Živého zobrazení dostupných několik dalších možností.

Zmrazit JavaScript Zmrazí prvky ovlivněné kódem jazyka JavaScript v aktuálním stavu.

Zakázat JavaScript Zakáže kód jazyka JavaScript a znovu vykreslí stránku, jak by vypadala v prohlížeči, který nemá povolený jazyk JavaScript.

Zakázat zásuvné moduly Zakáže zásuvné moduly a znovu vykreslí stránku, jak by vypadala v prohlížeči, který nemá povolené zásuvné moduly.

Zvýraznit změny v Živém kódu Aktivace nebo deaktivace zvýraznění změn při zobrazení živého kódu.

Upravit stránku živého zobrazení v nové záložce Umožňuje otevřít nové záložky pro dokumenty na webu, které procházíte pomocí panelu nástrojů Navigace v prohlížeči nebo funkce Sledovat odkazy. Chcete-li vytvořit novou kartu pro dokument, nejprve přejděte na dokument a potom vyberte možnost Upravit stránku živého zobrazení v nové kartě.

Sledovat odkazy Nastaví další odkaz v Živém zobrazení jako aktivní. Toto můžete provést také stisknutím klávesy Ctrl a klepnutím v okně Živé zobrazení.

Sledovat odkazy nepřetržitě Nastaví odkazy v Živém zobrazení jako trvale aktivní. Aktivní zůstanou, dokud je znovu nezakážete a stránku nezavřete.

Automatická synchronizace vzdálených souborů Kliknutím na ikonu Obnovit na panelu nástrojů Navigace v prohlížeči automaticky synchronizuje místní a vzdálený soubor. Aplikace Dreamweaver před aktualizací uloží soubor na server, aby byly oba soubory synchronizovány.

Používání testovacího serveru pro zdroj dokumentu Slouží především pro dynamické stránky (například stránky ColdFusion) a ve výchozím nastavení je pro ně vybrán. Je-li tato volba vybrána, aplikace Dreamweaver použije verzi souboru na testovacím serveru stránek jako zdroj pro Živé zobrazení.

Používání lokálních souborů pro odkazy dokumentu Výchozí nastavení pro nedynamické stránky. Je-li tato volba vybrána pro dynamické stránky používající Testovací server, aplikace Dreamweaver použije místní verze souborů, které souvisí s dokumentem (například soubory CSS nebo JavaScript), kromě souborů na Testovacím serveru. Poté můžete provádět místní změny v souvisejících souborech, abyste viděli, jak vypadají, než je nahrajete na Testovací server. Je-li výběr této volby zrušen, aplikace Dreamweaver použije verze souvisejících souborů nacházejících se na Testovacím serveru.

Nastavení požadavků HTTP Otevře dialogové okno s dalšími nastaveními, kde můžete zadávat hodnoty pro zobrazování živých dat. Více informací získáte klepnutím na tlačítko Nápověda v dialogovém okně.

Otevřít v prohlížeči

Zobrazit si otevřenou stránku v prohlížeči můžete kdykoliv. Nemusíte ji předtím odesílat na webový server. Když zobrazujete náhled stránky, všechny funkce spojené s prohlížečem by měly fungovat, včetně chování jazyka JavaScript, odkazů relativních k dokumentu a absolutních odkazů, ovládacích prvků ActiveX® a zásuvných modulů prohlížeče za předpokladu, že jste nainstalovali potřebné zásuvné moduly a ovládací prvky ActiveX do svých prohlížečů.

Před otevřením dokumentu v prohlížeči tento dokument uložte, jinak prohlížeč nezobrazí poslední provedené změny.

  1. Klikněte pravým tlačítkem myši na název souboru v panelu nástrojů Dokument a klikněte na tlačítko Otevřít v prohlížeči.

    Poznámka:

    Pokud je seznam prohlížečů prázdný, vyberte možnost Úpravy > Předvolby nebo Dreamweaver > Předvolby (Macintosh), poté nalevo vyberte kategorii Náhled v prohlížeči a vyberte prohlížeč. Další informace naleznete v tématu Nastavení předvoleb náhledu v prohlížeči.

  2. Klepněte na odkazy a otestujte obsah stránky.

    Poznámka:

    Obsah, na který je odkaz s cestou relativní ke kořenu webového místa, se nezobrazí, když zobrazujete náhled dokumentů v lokálním prohlížeči, pokud neurčíte testovací server nebo nevyberete volbu Náhled pomocí dočasného souboru (Úpravy > Předvolby > Náhled v prohlížeči). To je způsobeno tím, že prohlížeče nerozpoznají kořeny webových míst, ale servery ano.

    Poznámka:

    Chcete-li zobrazit náhled obsahu, na který jsou odkazy s cestami relativními ke kořenu, uložte soubor na vzdálený server a pak ho zobrazte pomocí volby Soubor > Zobrazit náhled v prohlížeči.

  3. Až skončíte s testováním, zavřete stránku v prohlížeči.

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