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

Úpravy v živém zobrazení

  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

 

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

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

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í, 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í:

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

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

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 ŠířkaVýš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.

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

Podporováno

Nepodporováno

Všechny elementy HTML, které mohou obsahovat text a sémantické značky

Ú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

 

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 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 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 klikně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é) Kliknutím na element uzamknete zvýrazněný výběr.

    Poznámka:

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

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

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

Vybere se tučný text
Vybere se tučný text.

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

Přihlaste se ke svému účtu.