Zjistěte, jak navrhnout, upravit nebo zobrazit náhled webových stránek v Živém zobrazení. Využijte možnost vkládat elementy nebo změnit jejich uspořádání, používat selektory, upravovat atributy obrázku nebo vkládat, měnit a formátovat text bez nutnosti přepínat na zobrazení Kód.

Živé zobrazení využívá vykreslovací modul využívající technologii Chromium, takže váš obsah vypadá stejně v aplikaci Dreamweaver i v oblíbených prohlížečích. Během práce na vývoji své webové stránky si můžete pomocí živého zobrazení rychle a jednoduše zobrazit její náhled. Přímo v živém zobrazení můžete také měnit elementy HTML, což vám ušetří čas jinak potřebný pro přechod na další zobrazení (zobrazení kódu a návrhu).

Živé zobrazení se obnoví okamžitě po každé úpravě stránky.

Při úpravě stránky v živém zobrazení můžete použít následující komponenty:

  • Panel DOM: (Okno > DOM) umožňuje vám prohlížet strukturu HTML dokumentu a v rámci tohoto zobrazení kopírovat, vkládat, duplikovat, odstraňovat nebo měnit pořadí elementů. Další informace naleznete v tématu Panel DOM.
  • Zobrazení elementu: nachází se nad vybraným elementem HTML v Živém zobrazení. Zobrazení elementu umožňuje Přiřazení elementů HTML ke třídám a identifikátorům. Další informace naleznete v tématu Přiřazení elementů HTML ke třídám a identifikátorům.
  • Rychlý inspektor vlastností: zobrazí se po klepnutí na ikonu vrstev v rámci zobrazení elementu nebo po výběru textu. Pomocí Rychlého inspektora vlastností můžete v Živém zobrazení měnit atributy obrázku nebo formátovat text. Další informace naleznete v tématu Rychlý Inspektor vlastností.
  • Inspektor vlastností v živém zobrazení: zobrazí se pod oknem Dokument a umožňuje v Živém zobrazení měnit řadu vlastností HTML a CSS. Další informace naleznete v tématu Inspektor vlastností v živém zobrazení.
  • Panel Vložit: (Okno > Vložit) umožňuje přenášet elementy z panelu přímo do živého zobrazení. Další informace naleznete v tématu Vložení elementů přímo v Živém zobrazení.

Poznámka:

Pokud se stránka dynamicky mění (na základě skriptů) nebo má povolen meta tag aktualizace, můžete přijít o úpravy provedené v Živém zobrazení.

Tipy:

  • Pokud se živé zobrazení při úpravě stránky vyprázdní, vypněte je a znovu je zapněte.
  • Pokud se úpravy stránky neprojeví, klikněte v Živém zobrazení na tlačítko Obnovit.

Obsah, který se vykresluje dynamicky pomocí databází nebo jazyka JavaScript, a neupravovatelné oblasti předloh nelze v Živém zobrazení upravovat. Pokud na tyto elementy v Živém zobrazení klepnete, ohraničí se šedým okrajem, který oznamuje, že je nelze upravovat.

Element s šedým okrajem v živém zobrazení nelze upravovat.
Element s šedým okrajem v živém zobrazení nelze upravovat.

Poznámka:

V hlavní nabídce živého zobrazení jsou k dispozici pouze možnosti, které lze zvolit pro příslušný element. Pokud vyberete element, možnosti, které nelze použít, jsou neaktivní.

Zobrazení elementu

Díky Zobrazení elementu můžete přiřadit elementy HTML s třídami a identifikátory přímo v Živém zobrazení. Zobrazení elementu obsahuje nápovědu s dostupnými třídami a identifikátory, se kterou můžete rychle prohlížet a vybírat potřebné možnosti. 

Tabulky můžete také formátovat v zobrazení elementu. Další informace získáte po kliknutí na následující odkaz.

Přiřazení elementů HTML ke třídám a identifikátorům

živém zobrazení klepněte na požadovaný element. Zobrazí se nástroj Zobrazení elementu s aktuálně přiřazenou třídou a identifikátorem.

V rámci živého zobrazení můžete kliknutím na element HTML na panelu DOM otevřít Zobrazení elementu pro daný element.

Zobrazení elementu pro daný element
Zobrazení elementu pro daný element

  • Chcete-li zrušit přiřazení elementu HTML ke třídě nebo identifikátoru, klepněte na symbol „x“ vedle dané třídy nebo identifikátoru.
  • Pokud budete chtít třídu nebo identifikátor přiřazený k elementu HTML změnit, klepněte na pole. Zobrazí se seznam dostupných tříd a identifikátorů. Klepněte na požadovanou možnost.
  • Pokud budete chtít přidat třídu nebo identifikátor a použít je u vybraného elementu, klepněte na symbol „+“ a zadejte název. Chcete-li změny uložit, klikněte na tlačítko „+“ nebo stiskněte klávesu Enter.

Následně můžete otevřít nástroj CSS Designer a určit selektor zahrnující tuto třídu nebo identifikátor. Další informace naleznete v tématu Rozvržení stránek pomocí panelu CSS Designer.

Poznámka:

Když se aktivuje přechod, zobrazení přechodných elementů se nepohybuje společně s elementy. Změny provedené pomocí zobrazení elementu se projeví, přestože se daný element nenachází na stejném místě jako přechodný element. 

Rychlý inspektor vlastností

Rychlý inspektor vlastností obrázků

Rychlý inspektor vlastností se zobrazí přímo nad vybranými elementy v živém zobrazení. Pomocí nástroje Inspektor vlastností můžete v živém zobrazení měnit vlastnosti nebo formátovat text.

Rychlý inspektor vlastností se nachází přímo nad elementy stránky v živém zobrazení
Rychlý inspektor vlastností se nachází přímo nad elementy stránky v živém zobrazení

Rychlý inspektor vlastností můžete zobrazit nebo skrýt kombinací kláves Ctrl+Alt+H (Win) / CMD+Ctrl+H (Mac).

Poznámka:

Při použití Rychlého inspektoru vlastností nebude v živém zobrazení k dispozici ikona pro navigaci v kódu.

V dokumentech Bootstrap nabízí Rychlý inspektor vlastností také možnosti přizpůsobení obrázků.

Rychlý inspektor vlastností pro obrázek v dokumentech Bootstrap
Rychlý inspektor vlastností pro obrázek v dokumentech Bootstrap

  • Omezit na tvar: Kliknutím lze oříznout rohy obrázků na kruhový tvar, tvar se zaoblenými rohy nebo miniaturu.
  • Nastavit obrázek jako responzivní: Kliknutím lze obrázky nastavit tak, aby se přizpůsobovaly různým šířkám obrazovky.

Rychlý inspektor vlastností textu

Pomocí Rychlého inspektoru vlastností textu v Živém zobrazení můžete rychle formátovat či odsazovat text a přidávat do něj hypertextové odkazy. Rychlý inspektor vlastností textu se zobrazí po kliknutí na ikonu vrstev pro textové elementy: h1–h6, pre a p.

Rychlý inspektor vlastností textu
Rychlý inspektor vlastností textu

  • Pomocí možnosti formátování lze tag elementu rychle změnit na jeden z následujících tagů: h1-h6, p a pre. 
  • Pomocí možnosti odkazu lze vytvořit z textového elementu hypertextový odkaz. 
  • Pomocí ikon pro tučné písmo a kurzívu lze k textovému elementu přidat tagy <strong> a <em>.
  • Ikony odsazení pomáhají přidat nebo odebrat odsazení textu. Na základě toho se v kódu přidá nebo odebere tag <blockquote>.

V dokumentech Bootstrap umožňuje Rychlý inspektor vlastností textu také zarovnat a transformovat textové elementy.

  • Zarovnání: Textové elementy dokumentu Bootstrap lze použitím příslušných tříd zarovnat doleva, na střed, doprava nebo do bloku.
  • Transformace: Velikost písmen textu elementu lze pomocí tříd nastavit na malá písmena, velká písmena nebo velká první písmena ve větě.

Inspektor vlastností v živém zobrazení

Inspektor vlastností v živém zobrazení je tradiční Inspektor vlastností, který je k dispozici pod oknem Dokument.

Inspektor vlastností v Živém zobrazení umožňuje prohlížení a úpravy většiny běžných vlastností aktuálně vybraného elementu stránky, například textu nebo vloženého objektu. Obsah Inspektora vlastností v Živém zobrazení se mění podle vybraného elementu.

Poznámka:

Inspektor vlastností v živém zobrazení není dostupný na stránkách s plovoucí mřížkou.

Chcete-li použít nápovědu pro konkrétního Inspektora vlastností, klepněte na tlačítko Nápověda v pravém horním rohu Inspektora vlastností nebo vyberte možnost Nápověda v nabídce Možnosti Inspektora vlastností. 

Následuje seznam elementů, které je možné upravit s využitím Inspektora vlastností v Živém zobrazení:

  • HTML
  • CSS
  • Obraz
  • Tabulka
  • Média – pouze zvuk a video HTML5
  • Kotva
  • Formulář
  • FormButton
  • FormTextArea
  • FormSubmitButton
  • FormRange
  • FormRadioButton
  • FormList
  • FormImage
  • FormFile
  • FormCheckBox
  • FormColor
  • FormDate
  • FormDateTime
  • FormDateTimeLocal
  • FormMonth
  • FormTime
  • FormWeek
  • FormNumber
  • FormLabel
  • FormHidden
  • FormGeneric

Poznámka:

Vlastnosti související s elementy jQuery UI a předlohami nelze v Inspektoru vlastností v Živém zobrazení upravovat.

Úprava atributů HTML

Podle potřeby můžete rychle přidávat, měnit nebo odebírat atributy HTML obrázků přímo v živém zobrazení za pomoci Rychlého inspektora vlastností.

Rychlý inspektor vlastností pro dané obrázky se zobrazí po klepnutí na ikonu vrstev . V závislosti na dostupném prostoru se Inspektor vlastností zobrazí vpravo, vlevo, nahoře nebo dole po obrázkem. Inspektora vlastností můžete volně přesouvat a umístit jej na nejvhodnější místo. 

Rychlý inspektor vlastností pro úpravu atributů
Rychlý inspektor vlastností pro úpravu atributů

Pokud budete chtít upravit atributy, klepněte na ikonu vrstev v Rychlém inspektoru vlastností. Podle potřeby můžete změnit zdroj obrázku i jeho další atributy, jako např. „title“ a „alt“. Tyto změny se projeví ihned. Stejně tak můžete v živém zobrazení upravit parametry ŠířkaVýška.

Provedené změny se uloží ihned po provedení libovolné z následujících akcí:

  • po klepnutí kdekoli vně Inspektora vlastností,
  • po stisknutí klávesy Enter,
  • po stisknutí klávesy Tab a zahájení úpravy dalšího atributu v Inspektoru vlastností,
  • Soubor uložte

Při dynamickém načítání obrázků můžete prostřednictvím Rychlého inspektora vlastností rychle upravovat atributy přiřazené k obrázku. 

Úprava textu přímo v živém zobrazení

Elementy textu lze nově měnit přímo v živém zobrazení. Úpravu textu lze snadno provést po dvojitém klepnutí na element textu. Případně můžete klepnutím na element textu otevřít Zobrazení elementu a následně stisknout klávesu Enter.

Poznámka:

Po stisknutí klávesy Enter v režimu úprav se bude výsledná akce lišit podle toho, kde se nacházel textový kurzor před stisknutím klávesy Enter. Změny jsou podobné tomu, co se stane při stisknutí klávesy Enter při úpravách textu v zobrazení Návrh.

Oranžový okraj okolo textového elementu označuje, že jste aktivovali režim úprav. 

Oranžový okraj značí režim úprav
Oranžový okraj značí režim úprav

Kurzor se zobrazí v místě, do kterého jste dvakrát klepnuli. Trojitým klepnutím můžete označit veškerý text v rámci textového elementu.

Při úpravě textu v živém zobrazení je možné daný text vyjmout, kopírovat/vložit a vrátit akci zpět / provést znovu. Při vložení se text vloží jako běžný text.

Následující tabulka popisuje podporované a nepodporované scénáře během úpravy textu v živém zobrazení:

Podporováno Nepodporováno
Všechny elementy HTML, které mohou obsahovat text

Úprava neplatných nebo poškozených tagů. Pokud prvky HTML obsahují poškozené nebo neplatné tagy, bude se úprava takových tagů řídit podle toho, jak prohlížeč na dané tagy nahlíží:

  • Pokud prohlížeč za vás HTML opraví (např. uzavře poškozený tag), bude možné tagy v Živém zobrazení upravit.
  • Pokud prohlížeč během vykreslování přidá nový tag, poškozené a neplatné tagy nebude možné měnit.

 

Soubory HTML odvozené od předloh v Živém zobrazení
Úprava stránek jQuery
Strukturální tagy obsahující inline elementy. Při úpravě jsou uvedeny společně v jednom poli.
Úprava tagů se statickým i dynamickým obsahem. U takových tagů je v Živém zobrazení možné měnit selektory, ale nelze přímo měnit text. Při dvojitém kliknutí na takový element v Živém zobrazení se okolo něj zobrazí šedý okraj, který informuje o tom, že úprava textu není podporována.
Statický text na dynamických stránkách
 
Stránky s plovoucí mřížkou v Živém zobrazení bez mřížky
 
Text obsahující entity  

Formátování textu

Formátování textu a textu hypertextových odkazů lze nově měnit přímo v živém zobrazení. Možnosti formátování textu zobrazíte označením vybraného slova nebo fráze. Rychlý inspektor vlastností s možnostmi formátování textu se zobrazí přímo nad označeným textem.

Rychlý inspektor vlastností pro formátování textu
Rychlý inspektor vlastností pro formátování textu

Vložení elementů přímo v Živém zobrazení

Pomocí panelu Vložit můžete přenášet elementy přímo na požadovanou pozici v dokumentu v živém zobrazení. Vizuální pomůcky v Živém zobrazení, jako jsou Živá vodítka a ikony DOM, vám usnadní určení polohy přetahovaných elementů v poměru k elementu, nad který jste umístili kurzor.

Živá vodítka (zelená) se zobrazí v případě, že před dokončením přetažení elementu umístíte kurzor nad jednotlivé elementy na stránce. Tato vodítka značí polohy, ve kterých je možné elementy vkládat. Zobrazit se mohou nad, pod, nalevo nebo napravo od elementu, nad kterým máte umístěný kurzor.

  • Nad a pod – zobrazí se při umístění kurzoru nad libovolný druh elementu/tagu mimo inline tagy. Při umístění kurzoru na první (horní) polovinu elementu se zobrazí vodítka nad tímto elementem. Při umístění kurzoru na druhou (spodní) polovinu elementu se zobrazí vodítka pod tímto elementem.
Živá vodítka nahoře a&nbsp;dole
Živá vodítka nad a pod elementem, na kterém máte umístěný kurzor

  • Vlevo a vpravo – zobrazí se při umístění kurzoru nad inline tagy (například <a> nebo <span>) nebo nad tagy s parametrem „float property“.
Živá vodítka napravo a&nbsp;nalevo od elementu, na kterém máte umístěný kurzor
Živá vodítka napravo a nalevo od elementu, na kterém máte umístěný kurzor

Pokud během přetahování elementu na okamžik zastavíte, zobrazí se ikona DOM (</>). Jestliže umístíte kurzor nad tuto ikonu, otevře se panel DOM a můžete element umístit do struktury DOM dokumentu.

Pokud budete chtít vložit elementy přímo do živého zobrazení, postupujte následovně:

  1. Přejděte do živého zobrazení.

  2. Na panelu Vložit klepněte na požadovaný element a přetáhněte jej do dokumentu. Případně můžete jednoduše klepnout na požadovaný element na panelu Vložit.

    Tip: Pokud nemůžete přetáhnout element z panelu Vložit na stránku, restartujte počítač a zkuste to znovu.

  3. Element podle živých vodítek přeneste nahoru, dolů, napravo nebo nalevo od elementu. Případně jej můžete přenést na přesnou polohu ve struktuře dokumentu kliknutím na ikonu </> a využitím panelu DOM.

    Element se vloží na stránku a automaticky se označí.

Ohraničovací rámeček

Ohraničovací rámeček umožňuje jednoduše vybrat blok textu kliknutím a přetažením kurzoru uvnitř tagu v Živém zobrazení. Kliknutí a přetažení bloku textu v aplikaci Dreamweaver před verzí 2014.1 způsobovalo, že se prvek přesunul jako celek. 

Poznámka:

Ohraničovací rámeček v Živém zobrazení je omezen pouze na činnosti podporované prohlížečem. 

Výběr a přetažení elementů

v Živém zobrazení můžete element přesunout kliknutím na název tagu a přetažením do požadovaného umístění. Po kliknutí na název tagu se zobrazí ikona ruky, která značí, že můžete tag začít přesouvat. Při přetahování tagu se zobrazí vodítka usnadňující jeho vložení na přesné místo.  

Kliknutím na název tagu v živém zobrazení můžete vybrat úplný obsah tagu ze zobrazení kódu.

Kliknutím na název tagu v živém zobrazení můžete vybrat úplný obsah tagu ze zobrazení kódu
Kliknutím na název tagu v živém zobrazení můžete vybrat úplný obsah tagu ze zobrazení kódu

Prohlédnutí kódu v Živém zobrazení

Režim prohlédnutí funguje společně s živým zobrazením a umožňuje rychle určit elementy HTML a jejich přidružené styly CSS. Pokud je režim prohlédnutí zapnutý, posunutím kurzoru na elementy na stránce můžete zjistit atributy modelu rámečku CSS týkající se jakéhokoli elementu na úrovni bloku.

Kromě možnosti zobrazení vizuální podoby modelu rámečku v režimu prohlédnutí můžete při posunutí na elementy v Živém zobrazení použít také panel CSS Designer.

Pokud máte panel CSS Designer otevřený v režimu Současný a posunete kurzor na element stránky, pravidla a vlastnosti na panelu CSS Designer se automaticky aktualizují a zobrazí se pravidla a vlastnosti vybraného elementu.

Stejně tak se aktualizuje i jakékoli zobrazení nebo panel související s elementem, na kterém je umístěn kurzor (například zobrazení kódu, selektor tagů, inspektor vlastností atd.).

  1. K otevření dokumentu v okně dokumentu klikněte na tlačítko Zobrazit > Prohlédnout.

    Poznámka:

    Pokud již není aktivováno živé zobrazení, režim prohlédnutí jej automaticky povolí.

  2. Posunutím kurzoru na elementy stránky zjistěte model rámečku CSS. Režim prohlédnutí zvýrazní různými barvami okraje, odsazení a obsah.

  3. (Volitelné) Stisknutím klávesy se šipkou vlevo na klávesnici zvýrazníte nadřazený prvek aktuálně zvýrazněného elementu. Stisknutím klávesy se šipkou vpravo obnovíte zvýraznění podřízeného elementu.

  4. (Volitelné) Klepnutím na element uzamknete zvýrazněný výběr.

    Poznámka:

    Klepnutím na element za účelem uzamčení zvýrazněného výběru se vypne režim prohlédnutí.

Ovládání pomocí klávesnice v Živém zobrazení

Elementy stránky nebo selektory v zobrazení elementu můžete procházet pomocí klávesnice a celý proces úprav tak urychlit. 

Procházení elementů stránky

K procházení elementů stránky v Živém zobrazení můžete využívat klávesy se šipkou nahoru a dolů. Procházení probíhá s využitím struktury dokumentu DOM.

Ovládání pomocí klávesnice v Živém zobrazení umožňuje snadný přístup ke vnořeným a ohraničeným elementům.

Zobrazení elementu pro daný element se otevře v případě, kdy k otevření elementu použijete klávesu se šipkou nahoru nebo dolů. Následně můžete přejít k selektorům v zobrazení elementu nebo stisknout klávesu Enter a text upravit přímo v Živém zobrazení.

Nejprve je zaostřeno na obrázek
Zde je nejprve zaostřeno na obrázek. Po stisknutí klávesy se šipkou dolů se zvolí odstavec pod obrázkem (jak je uvedeno na následujícím obrázku).

Označí se tučný text
Označí se tučný text.

Zde se označí odstavec
Zde se označí odstavec. Po opětovném stisknutí klávesy se šipkou dolů se označí další element ve struktuře DOM – tučný text (jak je uvedeno na následujícím obrázku).


Procházení selektorů

K procházení selektorů v zobrazení elementu můžete použít klávesu tabulátor. Aktivní selektor bude lemován žlutým okrajem: 

Je označen aktivní selektor
Aktivní selektor bude označen pomocí žlutého okraje.

Pokud stisknete klávesu tabulátoru po použití posledního selektoru, otevře se textové pole pro přidání selektoru. 

Poznámka:

Pomocí kombinace kláves Ctrl + [ nebo Cmd + [ můžete vybrat nadřazený element a pomocí kombinace Ctrl + ] nebo Cmd + ] vybrat element podřízený.

Zakázání úprav v Živém zobrazení

Pokud si Zobrazení elementu a Rychlého inspektora vlastností v Živém zobrazení nepřejete používat, můžete tyto nástroje pro úpravu zakázat.

Klávesové zkratky:

  • (Win) Ctrl+Alt+H
  • (Mac) Cmd+Ctrl+H

  1. Přejděte do živého zobrazení a klikněte na možnost Zobrazit > Možnosti živého zobrazení.

  2. Vyberte možnost Skrýt živá zobrazení.

Nepodporované scénáře

  • Soubory s předlohami Dreamweaver není možné v Živém zobrazení měnit.
  • Tagy se statickým i dynamickým obsahem. U takových tagů je v Živém zobrazení možné měnit selektory, ale nelze měnit text. Při dvojitém kliknutí na takový element v Živém zobrazení se okolo něj zobrazí šedý okraj, který informuje o tom, že úprava textu není podporována.
  • Tagy s aplikovanými pseudo-selektory. Pokud se v Živém zobrazení pokusíte tyto elementy upravit, nelze zaručit spolehlivé výsledky.

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