Úpravy v živém zobrazení

Ž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 kliknutí 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í.

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í kliknete, ohraničí se šedým okrajem, který oznamuje, že je nelze upravovat.

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

V živém zobrazení klikně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.

• Chcete-li zrušit přiřazení elementu HTML ke třídě nebo identifikátoru, klikně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, klikněte na pole. Zobrazí se seznam dostupných tříd a identifikátorů. Klikně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, klikně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.

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í můžete zobrazit nebo skrýt kombinací kláves Ctrl+Alt+H (Win) / CMD+Ctrl+H (Mac).

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

• 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.

• 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.

Chcete-li použít nápovědu pro konkrétního Inspektora vlastností, klikně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í:

Ú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 kliknutí 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. 

Pokud budete chtít upravit atributy, klikně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 Šířka a Výška.

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

• po kliknutí 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í. Chcete‑li element textu upravit, stačí na něj kliknout. Pokud jste v režimu Zobrazení elementu, stiskněte klávesu Enter a upravte text.

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

Kurzor se umístí tam, kam kliknete. Trojitým kliknutí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.

Díky funkci automatické synchronizace je možné všechny úpravy provedené v živém zobrazení automaticky synchronizovat se zobrazením kódu. 

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

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.

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.

• 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“.

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ě:

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. 

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.

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.).

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í.

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: 

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

Zakázání úprav v Živém 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.
• Mřížky CSS jsou v živém zobrazení podporovány pouze v aplikaci Dreamweaver 2019 a novějších verzích.