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

Psaní a úprava kódu

Hledat

Naposledy aktualizováno 19. 5. 2021

Dreamweaver

Otevřít aplikaci

Naučte se, jak pracovat v zobrazení kódu a využít naplno funkce aplikace Dreamweaver pro psaní kódu.

S kódem můžete v aplikaci Dreamweaver pracovat několika způsoby.

Pomocí dialogového okna Nový dokument můžete otevřít nový soubor s kódem a začít psát svůj kód.

Vytvoření nového souboru s kódem v aplikaci Dreamweaver

Během psaní vám bude k dispozici našeptávání kódu, které vám pomůže vybrat kód a předcházet překlepům. Získejte pomoc s CSS vždy, kdy ji budete potřebovat, za pomoci rychlých dokumentů aplikace Dreamweaver.

Podle potřeby můžete vkládat kód také pomocí panelu Vložit nebo různých zkratek pro psaní kódu, jako jsou zkratky Emmet.

Pokud zjistíte, že neustále kopírujete a vkládáte ten samý kus kódu, vyzkoušejte tyto funkce, které vám ušetří čas:

Panel Výstřižky je nedocenitelný pro rychlé vytváření a vkládání předem naformátovaných výstřižků kódu do vašeho kódu.
Více kurzorů vám umožní vytvářet a upravovat více řádků kódu současně.

Aplikace Dreamweaver vám také nabízí nedocenitelnou sadu nástrojů pro úpravy, která vám zajistí snadnější a plynulejší navigaci a provádění změn ve vašem kódu.

Pomocí funkce Hledat a nahradit v aplikaci Dreamweaver můžete v kódu vyhledávat tagy, atributy nebo text.
Nástroj Navigace v kódu vám umožňuje vyhledávat související kód v rámci současného souboru i mimo něj. Nebo ještě lépe, využijte funkci Rychlé úpravy pro úpravu kódu v souvisejících souborech bez nutnosti otevřít soubor na nové kartě.
Kliknutím pravým tlačítkem na kód otevřete přehlednou související kontextovou nabídku, ve které můžete potřebné změny kódu provádět přímo.
Pomocí funkce Uzavřít do tagu můžete text uzavírat do tagů.

Pokud vás zajímají další informace o všech těchto funkcích pro práci s kódem, čtete dále.

Vložení kódu pomocí panelu Vložit

Umístěte do kódu textový kurzor.
Na panelu Vložit vyberte odpovídající kategorii.
Klepněte na tlačítko na panelu Vložit nebo vyberte položku z rozbalovací nabídky na panelu Vložit.

Po kliknutí na ikonu se okamžitě na stránce zobrazí kód nebo dialogové okno vyžadující další informace k doplnění kódu.

Počet a typ dostupných tlačítek na panelu Vložit se liší v závislosti na typu aktuálního dokumentu. Záleží také na tom, zda používáte zobrazení Kód nebo zobrazení Návrh.

Použití sady nástrojů Emmet v aplikaci Dreamweaver

Emmet představuje zásuvný modul umožňující rychlé psaní kódu a generování kódů HTML a CSS.

Zkratky Emmet můžete používat v zobrazení kódu nebo Inspektoru kódu aplikace Dreamweaver a stisknutím klávesy Tab je rozbalit do podoby značek HTML nebo prvků CSS.

Zkratky HTML se rozbalí na stránkách HTML a PHP. Zkratky CSS se rozbalí na stránkách CSS, LESS, SASS, SCSS nebo v rámci tagu stylu na stránce HTML.

Následuje několik příkladů použití zkratek doplňku Emmet v zobrazení kódu. Podrobné informace a reference najdete v části Dokumentace pro Emmet.

Poznámka:

Aplikace Dreamweaver aktuálně podporuje zkratky Emmet 1.2.2.

Příklad 1: Vložení kódu HTML pomocí doplňku Emmet

Chcete-li rychle přidat kód HTML do neuspořádaného seznamu se třemi elementy, otevřete soubor HTML a zadejte v zobrazení kódu následující zkratku Emmet v rámci tagu <body></body>:

div>(ul>li*3>{Lorem Ipsum})+p*4>lorem

Ujistěte se, že se kurzor nachází přímo za zkratkou Emmet a stiskem klávesy Tab zkratku rozbalte. Případně můžete vybrat také celou zkratku a stisknout klávesu Enter.

Zkratka se rozbalí do následujícího kódu:

<div>
    <ul>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
        <li>Lorem Ipsum</li>
    </ul>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, voluptatum, perferendis ad impedit iste assumenda et laborum doloribus optio molestiae perspiciatis modi quaerat corrupti velit cupiditate eligendi tempora temporibus vel.</p>
    <p>Ipsa, distinctio, eveniet ad numquam libero quam doloremque culpa illo ex possimus eligendi amet nesciunt provident inventore rerum facere ea veritatis itaque? Suscipit rem asperiores excepturi sapiente enim architecto esse.</p>
    <p>Harum, ad porro molestiae corporis natus aut non fugit. Recusandae, reprehenderit, voluptate voluptas reiciendis voluptatum tempora vero vel libero facere fuga maiores ratione eaque ad illum porro dignissimos sit eos.</p>
    <p>Dignissimos, molestiae, quis ducimus ratione temporibus sed accusamus libero consequuntur ex velit maiores illum repudiandae cum! Dolorum, dolore, pariatur, incidunt in saepe laudantium consequatur provident totam vero velit nobis accusantium!</p>
</div>

Příklad 2: Vložení kódu CSS pomocí doplňku Emmet

Pokud budete chtít vložit kód CSS a vytvořit poloměr okraje s továrními předvolbami, otevřete soubor CSS a zadejte následující zkratku Emmet uvnitř třídy:

-bdrs

Zkratka se po stisknutí klávesy Tab rozbalí do následujícího kódu:

-webkit-border-radius: ;
 
-moz-border-radius: ;
 
border-radius: ;

Práce s komentáři ke kódu

Komentář je popisný text, který vkládáte do HTML kódu kvůli vysvětlení kódu nebo kvůli poskytnutí dalších informací. Text poznámky se objeví pouze v zobrazení kódu a nezobrazí se v prohlížeči.

Přidání komentářů ke kódu

Pokud budete chtít přidat komentáře, nejprve zadejte jeho text. Poté můžete umístit myš na textový kurzor a kliknutím na ikonu Vložit z panelu nástrojů otevřít podnabídku Aplikovat komentář.

Podle potřeby můžete také vybrat text a označit jej za komentář. Okolo vybraného textu se vytvoří blok komentáře.

Komentáře můžete přidávat pomocí různých možností syntaxe. Vyberte vhodnou syntaxi a aplikace Dreamweaver vloží potřebné tagy za vás. Stačí jednoduše zadat text komentáře.

K přidání komentářů můžete také použít klávesovou zkratku Ctrl + / (systém Windows) nebo Cmd + / (systém Mac).

Pokud použijete klávesovou zkratku bez výběru textu, za komentář se označí celý aktuální řádek. Pokud vyberete text a použijete klávesovou zkratku, za komentář se označí vybraný text.

Odebrání komentářů z kódu

Budete-li chtít komentáře ke kódu odebrat, vyberte kód a klikněte na ikonu Odstranit komentář na panelu nástrojů. K odebrání komentářů můžete také použít klávesovou zkratku Ctrl - / (systém Windows) nebo Cmd - / (systém Mac).

Přepnutí zobrazení komentářů ke kódu

Budete-li chtít přepnout mezi zobrazením a skrytím komentářů v zobrazení kódu, jednoduše u vybraného komentáře nebo řádku použijte klávesovou zkratku Ctrl + / (systém Windows) nebo Cmd + / (systém Mac).

Použití více kurzorů s cílem vložit nebo upravit text na různých místech

Podle potřeby můžete na různých místech přidat kurzory nebo vybrat více částí kódu a upravit je současně pomocí funkce více kurzorů v aplikaci Dreamweaver.

Poznámka:

Operace kopírování, vkládání, hledat a nahradit nefungují s více kurzory nebo vícenásobným výběrem.

Přidání více kurzorů nebo vícenásobného výběru

V závislosti na vašich požadavcích můžete více kurzorů přidávat různými způsoby.

Pokud budete chtít přidat stejný text na různých místech bez nahrazení existujícího textu, přidejte více kurzorů.

Jestliže budete chtít existující text nahradit, můžete využít vícenásobný výběr. Můžete vybrat souvislé/nesouvislé řádky textu nebo obojí a kurzory přidat k nim.

Postup přidání více kurzorů nebo vícenásobného výběru ve stejném sloupci mezi souvislými řádky:

Podržte stisknutou klávesu Alt, klikněte a začněte s přetahováním ve svislém směru. Během svislého přetahování budou kurzory přidány na každý řádek, přes který budete přetahovat.

Pokud budete chtít vybrat souvislé řádky textu, podržte stisknutou klávesu Alt a začněte přetahovat šikmo. Během šikmého přetahování aplikace Dreamweaver vybere obdélníkový blok textu v rámci vašeho výběru.

Výběr a aktualizace více řádků textu současně

Poznámka:

Pokud budete chtít rychle přidat kurzory nebo do výběru zahrnout více řádků, použijte klávesovou zkratku Shift + Alt + šipka nahoru nebo Shift + Alt + šipka dolů.

Po přidání kurzorů (nebo vybraného textu) na různých místech můžete začít psát.

Pokud jste vložili více kurzorů, bude vložen i nový text.

Pokud jste vybrali obsah na více řádcích textu, vybraný text bude nahrazen novým zadaným textem.

Postup přidání více kurzorů v různých sloupcích napříč řádky:

Pokud budete chtít přidat kurzory do textu s nesouvislými řádky, stiskněte jednoduše klávesu Ctrl a klikněte na jednotlivé řádky, na které chcete kurzor umístit.

Přidání kurzorů na více nesouvislých řádků textu

Nesouvislé řádky textu vyberete tak, že označíte určitý text, podržíte stisknutou klávesu Ctrl (systém Windows) nebo Cmd (systém Mac) a budete v označování pokračovat.

Postup přidání kurzorů na začátek/konec každého řádku:

Vyberte více řádků textu a stiskněte klávesu se šipkou doleva nebo doprava.

Postup přidání kurzorů na předchozí nebo následující řádky po výběru:

Stiskněte klávesy Shift + Alt + šipka nahoru nebo Shift + Alt + šipka dolů a poté stiskněte klávesu se šipkou doprava.

Postup výběru souvislých a nesouvislých řádků textu:

Tyto metody můžete kombinovat a vybírat tak souvislé i samostatné řádky textu v rámci jednoho výběru.

Nejprve vyberte nesouvislé řádky textu a poté podržte stisknutou kombinaci kláves Ctrl + Alt (systém Windows) nebo Cmd + Alt (systém Mac) a přetažením přidejte sadu řádků do stávajícího vícenásobného výběru.

Výběr souvislých i nesouvislých řádků textu

Získání pomoci s CSS v rámci aplikace Dreamweaver pomocí rychlých dokumentů

Při práci se soubory CSS, LESS nebo SCSS v aplikaci Dreamweaver můžete rychle získat další informace o vlastnostech nebo hodnotách CSS.

Pokud umístíte kurzor na vlastnost nebo hodnotu a stisknete kombinaci kláves Ctrl + K, aplikace Dreamweaver otevře dokumentaci z projektu dokumentů pro webovou platformu.

Podle potřeby můžete otevřít několik inline editorů a prohlížečů dokumentů současně.

Dokumentace CSS v rámci aplikace Dreamweaver

Pokud budete chtít zavřít jeden inline editor nebo prohlížeč dokumentů, klikněte na symbol „X“ v levém horním rohu nebo přejděte na rychlé dokumenty a stiskněte klávesu Esc.

Budete-li chtít zavřít všechny inline editory a dokumenty, umístěte kurzor zpět do hlavního vnějšího editoru kódu a stiskněte klávesu Esc.

Analýza kódu

Aplikace Dreamweaver podporuje linting (analýzu kódu a vyhledávání potenciálních chyb) pro jazyky HTML, CSS a JavaScript.

Na panelu Výstup je uveden seznam chyb a varování zjištěných při lintingu. Další informace naleznete v tématu Linting kódu.

Aplikace Dreamweaver dále zobrazuje rychlý náhled chyby ve sloupci s číslem příslušného řádku. Pokud je číslo řádku uvedeno červeně, znamená to, že daný řádek obsahuje chybu. Pokud nad něj umístíte kurzor myši, zobrazí se stručný popis chyby.

Poznámka: Zobrazí se pouze první chyba v řádku. Pokud řádek obsahuje pouze varování, zobrazí se popis varování. Pokud řádek obsahuje varování a chybu, zobrazí se pouze popis chyby.

Obklopení textu kódem pomocí funkce Uzavřít do tagu

Pomocí funkce Uzavřít do tagu v zobrazení kódu můžete uzavřít vybrané řádky textu do tagu. V zobrazení návrhu nebo živém zobrazení lze tuto funkci použít k uzavření objektů do tagů.

V zobrazení kódu vyberte text nebo v zobrazení návrhu vyberte objekt a na klávesnici stiskněte klávesy Ctrl + T.

Otevře se místní nabídka, ve které si můžete vybrat z řady různých tagů HTML.
Vyberte tag z nabídky.

Pokud pracujete v zobrazení kódu, vybraný text bude obklopen do tagu. Pokud pracujete v zobrazení návrhu nebo živém zobrazení, vybraný objekt bude obklopen do tagu.

Úpravy kódu pomocí kontextové nabídky Kódování

Pomocí kontextové nabídky aplikace Dreamweaver můžete provádět rychlé změny ve vašem kódu.

Kontextová nabídka je k dispozici po kliknutí pravým tlačítkem (systém Windows) nebo kliknutí s přidrženou klávesou Command (systém Mac). K dispozici jsou vám následující možnosti:

Rychlá úprava

Kliknutím na tuto možnost přejdete do režimu rychlé úpravy. V tomto režimu aplikace Dreamweaver poskytuje specifický kód a inline nástroje podle kontextu, které vám umožní rychle přecházet k požadované části kódu. Další informace naleznete v tématu Rychlá úprava.

Vyjmout, kopírovat, vložit

Kliknutím na tyto možnosti můžete rychle vyjmout, kopírovat a vložit text bez nutnosti používat nabídku Upravit.

Najít a nahradit, najít další, najít předchozí

Kliknutím na tyto možnosti můžete rychle vyhledat a nahradit text bez nutnosti používat nabídku Najít.

Vytvořit nový výstřižek

Tuto možnost můžete použít, pokud chcete vytvořit výstřižky kódu, které lze uložit pro pozdější opětovné použití. Vyberte kód a kliknutím na tlačítko Vytvořit nový výstřižek uložte vybraný kód jako výstřižek. Další informace naleznete v tématu Práce s výstřižky kódu.

Otevřít související soubory

Klikněte pravým tlačítkem na odkaz/tag skriptu a kliknutím na tlačítko Otevřít související soubory otevřete soubor.

Připojit seznam stylů

Připojte stávající seznam stylů CSS k vaší stránce.

Výběr

Podnabídka Výběr nabízí různé možnosti pro úpravu kódu, které můžete použít u vybrané části kódu, jako je přepnutí řádku, blokování komentářů, rozbalení a sbalení části, převádění inline CSS na pravidla, přesouvání pravidel CSS a tisk kódu.

Navigace v kódu

Tato možnost po kliknutí umožňuje přechod k souvisejícím zdrojům kódů, jako jsou interní a externí pravidla CSS, zahrnutí na straně serveru, externích souborů JavaScript, nadřízených souborů předloh, souborů knihovny a zdrojových souborů iframe. Další informace naleznete v tématu Vyhledání souvisejícího kódu.

Nástroje pro našeptávání kódu

V podnabídce Nástroje pro našeptávání kódu naleznete na dosah ruky nástroje, jako je Color Picker, prohlížeč adres URL a seznam písem.

Odsazení bloků kódu

Zatímco píšete a upravujete kód v zobrazení kódu nebo v inspektoru kódu, můžete měnit úroveň odsazení vybraného bloku nebo řádku kódu tím, že ho posunete doprava nebo doleva o jeden tabulátor.

Odsazení vybraného bloku kódu

Stiskněte klávesu Tab nebo
Stiskněte klávesy Ctrl + ] nebo
Vyberte volbu Úpravy > Odsadit kód.

Zrušení odsazení vybraného bloku kódu

Stiskněte klávesy Shift + Tab nebo
Stiskněte klávesy Ctrl + [ nebo
Vyberte volbu Úpravy > Odsadit kód doleva.

Přechod na související kód

Navigátor kódů zobrazuje seznam zdrojů kódů souvisejících s konkrétním výběrem na stránce. Použijte jej pro přechod k souvisejícím zdrojům kódů, jako jsou interní a externí pravidla CSS, zahrnutí na straně serveru, externích souborů JavaScript, nadřízených souborů předloh, souborů knihovny a zdrojových souborů iframe. Po klepnutí na odkaz v aplikaci Code Navigator aplikace Dreamweaver otevře soubor obsahující příslušný kód. Pokud je soubor aktivní, zobrazí se v příslušné oblasti souborů. Jestliže nemáte povoleny související soubory, aplikace Dreamweaver otevře vybraný soubor jako samostatný dokument v okně Dokument.

Pokud klepnete na pravidlo CSS v aplikaci Code Navigator, aplikace Dreamweaver vás převede přímo k tomuto pravidlu. Je-li pravidlo v souboru interní, aplikace Dreamweaver je zobrazí v rozděleném zobrazení. Je-li pravidlo v externím souboru CSS, aplikace Dreamweaver soubor otevře a zobrazí pravidlo v oblasti souvisejících souborů nad hlavním dokumentem.

Do nástroje Navigace v kódu můžete přejít ze zobrazení návrhu, kódu nebo rozděleného zobrazení, jakož i z Inspektoru kódu.

Video od vývojového týmu produktu Dreamweaver s přehledem způsobu práce s aplikací Code Navigator: www.adobe.com/go/dw10codenav.

Výukové video o práci s funkcí Živé zobrazení, souvisejících souborech a aplikaci Code Navigator najdete na webové stránce www.adobe.com/go/lrvid4044_dw.

Otevření aplikace Code Navigator

Podržte stisknutou klávesu Alt a klepněte (Windows) nebo klávesy Command+Option a klepněte (Macintosh) do libovolného umístění na stránce. Aplikace Code Navigator zobrazí odkazy na kód, který ovlivňuje oblast, do níž jste klepli.

Kliknutím mimo aplikaci Code Navigator ji zavřete.

Poznámka:

Aplikaci Code Navigator můžete otevřít také kliknutím na ukazatel aplikace Code Navigator . Tento ukazatel se zobrazí poblíž bodu vložení na stránce, pokud myš byla 2 sekundy v nečinnosti.

Přejděte ke kódu v aplikaci Code Navigator

Otevřete aplikaci Code Navigator z oblasti stránky, která vás zajímá.
Klikněte na kód, na nějž chcete přejít.

Aplikace Code Navigator seskupí zdroje souvisejících kódů podle souborů a uvede soubory v abecedním pořadí. Předpokládejme například, že pravidla CSS v externích souborech mají vliv na výběr v dokumentu. V takovém případě nástroj Navigace v kódu uvede seznam těchto tří souborů spolu s pravidly CSS, které souvisejí v výběrem. U předloh CSS spojených s daným výběrem nástroj Navigace v kódu funguje jako panel stylů CSS v aktuálním režimu.

Poznámka:

Pokud umístíte ukazatel na odkazy na pravidla CSS, nástroj Navigace v kódu zobrazí tipy k nástrojům vlastností v pravidle. Tyto tipy jsou užitečné, pokud chcete rozlišovat mezi řadou pravidel se stejným názvem.

Zakázání ukazatele Code Navigator

Otevřete aplikaci Code Navigator.
Vyberte volbu Zakázat ukazatel v pravém dolním rohu.
Kliknutím mimo aplikaci Code Navigator ji zavřete.

Chcete-li ukazatel Code Navigator znovu aktivovat, podržte stisknutou klávesu Alt a klikněte (Windows) nebo podržte klávesy Command + Option a klikněte (Macintosh). Otevře se aplikace Code Navigator, kde můžete zrušit výběr volby Zakázat ukazatel.

Přechod na funkci JavaScript nebo VBScript

V zobrazení kódu a Inspektoru kódu si můžete zobrazit seznam všech funkcí JavaScript nebo VBScript ve vašem kódu a přeskočit na kteroukoli z nich.

Zobrazení dokumentu v zobrazení Kód (Zobrazení > Kód) nebo v Inspektoru kódu (Okna > Inspektor kódu).
Proveďte jeden z následujících úkonů:
- V zobrazení Kód klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) kamkoliv do zobrazení Kód a vyberte podnabídku Funkce z kontextové nabídky.
Poznámka:

Podnabídka Funkce se neobjeví v zobrazení návrhu.

Veškeré funkce JavaScript nebo VBScript z vašeho kódu se objeví v podnabídce.

Poznámka:

Chcete-li seznam funkcí zobrazit v abecedním pořadí, klikněte pravým tlačítkem s klávesou Ctrl (Windows) nebo s klávesami Alt + Ctrl (Macintosh) do zobrazení kódu a pak vyberte podnabídku Funkce.
- V Inspektoru kódu klikněte v panelu nástrojů na tlačítko Navigace v kódu ({ }).
Vyberte název funkce, na kterou chcete v kódu přeskočit.

Vyjmutí jazyka JavaScript

Nástroj JavaScript Extractor (JSE) odstraňuje celý kód nebo většinu kódu jazyka JavaScript z dokumentů aplikace Dreamweaver, exportuje jej do externího souboru a v dokumentu na něj vytvoří odkaz. Nástroj JSE také dokáže z kódu odebírat skripty pro zpracování událostí, jako jsou onclick nebo onmouseover a poté bez problémů k dokumentu připojí kód jazyka JavaScript související s těmito skripty.

Nástroj JavaScript Extractor má několik následujících omezení, která je před jeho použitím potřeba vzít na vědomí:

Nástroj JSE nevyjímá tagy script z těla dokumentu (kromě widgetů Spry). Umístění těchto skriptů externě může za jistých okolností vést k neočekávaným výsledkům. Aplikace Dreamweaver ve výchozím nastavení uvede tyto skripty v seznamu v dialogovém okně Externalizovat JavaScript, ale nevybere je k vyjmutí. (Pokud chcete, můžete je vybrat ručně.)
Nástroj JSE nevyjímá kód jazyka JavaScript z upravitelných oblastí souborů .dwt (předloha aplikace Dreamweaver), neupravitelných oblastí instancí předlohy a položek knihovny aplikace Dreamweaver.
Po vyjmutí kódu jazyka JavaScript pomocí volby Externalizovat JavaScript a připojit nezávadně již nebudete moci upravovat chování aplikace Dreamweaver pomocí panelu Chování. Aplikace Dreamweaver neumí prohlížet a naplňovat panel Chování chováními, která jsou připojena nezávadně.
Jakmile stránku zavřete, změny již nebude možné vrátit. Změny ale můžete vrátit po celou dobu, během níž setrváte ve stejné relaci úprav. Akci vrátíte klepnutím na položky Úpravy > Zpět externalizovat JavaScript.
Některé složité stránky nemusí fungovat podle očekávání. Při vyjímání kódu jazyka JavaScript ze stránek s parametrem document.write() v těle dokumentu nebo s globálními proměnnými postupujte opatrně.

Video od vývojového týmu produktu Dreamweaver s přehledem o podpoře jazyka JavaScript v aplikaci Dreamweaver: www.adobe.com/go/dw10javascript.

Používání nástroje JavaScript Extractor:

Otevřete stránku obsahující kód JavaScript.
Klikněte na tlačítko Nástroje > Externalizovat JavaScript.
V dialogovém okně Externalizovat JavaScript v případě potřeby upravte výchozí nastavení.
- Volba Externalizovat JavaScript vyberte pouze tehdy, pokud chcete, aby aplikace Dreamweaver přesunula jakýkoli kód jazyka JavaScript do externího souboru a aby odkázala na tento soubor v aktuálním dokumentu. Tato volba v dokumentu ponechá skripty pro zpracování událostí, jako jsou onclick a onload a ponechá volbu Chování viditelnou v panelu Chování.
- Volba Externalizovat JavaScript a připojit nezávadně vyberte pouze tehdy, pokud chcete, aby aplikace Dreamweaver 1) přesunula kód jazyka JavaScript do externího souboru a odkázala na tento soubor v aktuálním dokumentu nebo 2) odebrala skripty pro zpracování událostí z kódu HTML a vložila je při běhu s použitím jazyka JavaScript. Pokud vyberete tuto volbu, již nebudete moci upravovat Chování v panelu Chování.
- Ve sloupci Úpravy zrušte výběr jakýchkoli úprav, které nechcete provést, nebo vyberte úpravy, které aplikace Dreamweaver ve výchozím nastavení nevybrala.
  Aplikace Dreamweaver ve výchozím nastavení uvede na seznam, ale nevybere následující úpravy:
  
  bloky skriptu v hlavičce dokumentu obsahující volání document.write() nebo document.writeln(),
  
  bloky skriptu v hlavičce dokumentu obsahující signatury funkcí vztahující se ke kódu zpracování EOLAS, který používá volání document.write().
  
  bloky skriptu v těle dokumentu v případě, že neobsahují pouze widget Spry nebo konstruktory sady dat Spry.
- Aplikace Dreamweaver automaticky přiřazuje identifikátory prvkům, které je ještě nemají. Pokud se vám tyto identifikátory nelíbí, můžete je změnit úpravou textových polí identifikátoru.
Klikněte na tlačítko OK.

Dialogové okno Souhrn poskytuje souhrn informací o vyjmutí. Zkontrolujte vyjmutí a klikněte na tlačítko OK.
Uložte stránku.

Aplikace Dreamweaver vytvoří soubor SpryDOMUtils.js společně s dalším souborem obsahujícím vyjmutý kód jazyka JavaScript. Aplikace Dreamweaver uloží soubor SpryDOMUtils.js do složky SpryAssets na vašich stránkách. Druhý soubor uloží ve stejné úrovni, v jaké je stránka, z níž jste kód jazyka JavaScript vyjmuli. Při nahrávání původní stránky nezapomeňte oba tyto závislé soubory nahrát na webový server.

Rychlá úprava

Namísto snížení přehlednosti kódu kvůli velkému množství panelů a ikon vám režim rychlých úprav v aplikaci Dreamweaver umožní používat kód podle daných okolností a nástroje inline a rychle tak přecházet k požadované části kódu.

Režim rychlých úprav aktivujete následovně:

Klikněte pravým tlačítkem na výstřižek kódu a z nově otevřené kontextové nabídky vyberte možnost Rychlé úpravy.
Stiskněte klávesy Ctrl + E (systém Windows) nebo Cmd + E (systém Mac).

Použití režimu rychlých úprav u souborů HTML

V souboru HTML umístěte kurzor uvnitř třídy nebo identifikačního atributu (název nebo hodnota) nebo na název tagu. V režimu rychlých úprav se zobrazí všechna odpovídající pravidla CSS, SCSS a LESS z vašeho projektu. Tato pravidla můžete upravit přímo na řádku, aniž byste museli opustit kontext souboru HTML.

Pokud se bude shodovat více pravidel, můžete mezi nimi procházet pomocí seznamu na pravé straně (nebo pomocí kláves Alt + šipka nahoru nebo dolů).

Budete-li chtít vytvořit pravidlo CSS přímo z editoru inline, klikněte na tlačítko Nové pravidlo nebo stiskněte klávesy Ctrl + Alt + N (systém Windows) nebo Cmd + Alt + N (systém Mac).

Použití režimu rychlých úprav u souborů JavaScript

V souboru JavaScript umístěte kurzor na název funkce. V režimu rychlých úprav se zobrazí hlavní text funkce (i když je k dispozici v ostatních souborech odkazovaných výrazem require()).

Použití režimu rychlých úprav u souborů CSS, SCSS nebo LESS

Pokud aktivujete režim rychlých úprav po umístění kurzoru do oblasti hodnoty barvy, můžete pomocí nástroje Color Picker rychle upravovat barvy použité ve vašem kódu CSS.

Přístup k nástroji Color Picker ze souboru CSS

Pokud v souboru CSS, LESS nebo SCSS umístíte kurzor na funkci pro časování přechodů cubic-bezier() nebo steps(), v režimu rychlých úprav se zobrazí editor křivky pro grafický přechod.

Platné počáteční body jsou také předdefinované funkce časování ease, ease-in, ease-out, ease-in-out, step-start a step-end.

Zpracování Bézierovy křivky pomocí režimu rychlých úprav

Refaktorování kódu

Refaktorování kódu je proces restrukturalizace stávajícího kódu beze změny chování navenek, takže je pak kód lépe čitelný, udržovatelný a srozumitelný a snadněji se ladí. Používá se v případě, že v kódu máte duplicitní kód, dlouhé metody nebo velké třídy. Ladění kódu je pak díky malým funkcím a správným náhradám časově méně náročné.

Při refaktorování kódu JavaScript můžete přejmenovávat funkce a nastavovat obor proměnných tak, abyste je mohli volat zevnitř bloku kódu, ve kterém jsou definovány.

Poznámka:

Refaktorování kódu je nyní dostupné pouze v souborech .js.

Refaktorování kódu JavaScript

Refaktorovat kód můžete u dokumentů typu html, php a javascript. Když v aplikaci Dreamweaver kliknete tlačítkem myši na oblast kódu, v rozevírací nabídce se zobrazí možnost Refaktoring. Nabídka Refaktoring obsahuje následující možnosti:

Přejmenovat
Extrahovat do proměnné
Extrahovat do funkce
Vložit mezi Try/Catch
Vložit mezi podmínky
Převést na funkci šipky
Vytvořit volání/definice

Význam jednotlivých možností refaktorování naleznete v následujících částech:

Přejmenovat

Možnost Přejmenovat se používá ke změně všech výskytů názvu proměnné nebo funkce v kódu JavaScript. Výběr proměnné kliknutím a přetažením není pro refaktorování nezbytný.

Přejmenování v kódu JavaScript provedete následovně:

Vyberte kód, který vyžaduje změnu, nebo na něj přeneste textový kurzor.
Na vybraný text klikněte pravým tlačítkem a vyberte možnost Refaktoring > Přejmenovat. K přejmenování můžete v operačním systému Windows také použít zkratku Ctrl + Alt + R a v operačním systému macOS zkratku Command + option + R.
Na obrazovce se objeví zobrazení více kurzorů, pomocí něhož můžete změnit všechny výskyty proměnné. Pomocí vylepšení vícenásobného kurzoru se vybere další výskyt aktuálního výběru. Znovu napište jedinečný název proměnné nebo funkce, kterým chcete nahradit stávající.

Předtím: Přejmenovat

Potom: Přejmenovat

Extrahovat do proměnné

Funkci Extrahovat do proměnné použijte k nahrazení výrazu s proměnnou, místní proměnnou nebo konstantami v kódu JavaScript tak, že pravým kliknutím vyberete výraz. Potom vyberte možnost Refaktoring > Extrahovat do proměnné. V systému Windows také můžete použít zkratku Ctrl + Alt + V a v systému macOS zkratku Cmd + Alt + V.

Extrahovat do funkce

Funkci Extrahovat do funkce použijte k nahrazení výrazu ve volání funkce v parametru. Výchozí hodnotu nového parametru lze inicializovat do těla funkce nebo předávat přes volání funkce.

Pro refaktorování pomocí funkce Extrahovat do funkce proveďte následující:

V kódu JavaScript vyberte libovolný výraz nebo sadu výrazů.

Výběr výrazu
Klikněte pravým tlačítkem a vyberte možnost Refaktoring > Extrahovat do funkce. Můžete v systému Windows také použít zkratku Ctrl + Alt + M a v systému Mac OS zkratku Cmd + Alt + M.
Z rozevírací nabídky na obrazovce vyberte cílový obor, do kterého se má funkce extrahovat.

Typy oboru
Výstup se liší v závislosti na vybraném cílovém oboru. Cílový obor může být například konstruktor, vybraná třída nebo globální funkce.

Charakteristiky funkce Extrahovat do funkce jsou následující:
- Identifikuje parametry, které lze předat, na základě identifikátorů dostupných ve výběru nebo v extrahovaném oboru.
- Identifikuje vrácené parametry, které se vrátí z funkce, na základě identifikátorů, jejichž hodnoty jsou ve výběru změněny.
- Také vytvoří funkci s jedinečným názvem.
Na následujících snímcích obrazovky je zobrazen výstup na základě příslušného vybraného cílového oboru.
Konstruktor

Třída

Globální

Vložit mezi Try Catch

Funkci Vložit mezi Try Catch použijte na výjimku v bloku kódu, který po kompilaci programu vypadá jako chyba. Tato funkce vloží blok kódu do bloku try catch. Tento blok kódu je při spuštění programu označen jako výjimka.

Vyberte nebo umístěte kurzor na kód, klikněte pravým tlačítkem a vyberte možnost Refaktoring > Vložit mezi Try Catch. Když umístíte kurzor na nějakou pozici, vyhledá okolní příkazy nebo zkontroluje, zda se kód skládá z příkazů. Pokud jsou příkazy přítomné, vloží je do kódu try catch.

Vložit mezi podmínky

Funkci Vložit mezi podmínky použijte, pokud chcete, aby se výraz v kódu kompiloval pouze za určité podmínky.

V kódu vyberte výraz, klikněte pravým tlačítkem a vyberte možnost Refaktoring > Vložit mezi podmínky.

Převést na funkci šipky

Funkce šipky je výraz, který nemá vlastní výrazy funkce, například this, arguments, super nebo new.target. Tyto výrazy funkce jsou určeny pro výrazy bez metody a nelze je použít jako konstruktor.

Umístěte kurzor do funkce, klikněte pravým tlačítkem a vyberte možnost Refaktoring > Převést na funkci šipky.

Poznámka:

Pokud má vybraný příkaz jeden parametr, pak se struktura parametrů zobrazí jako param => {příkazy}.
Pokud nemá vybraný příkaz žádný parametr nebo má více než jeden, např. param (param1, param), struktura paremetru se zobrazí jako (param1, param2) => {příkazy}.

Vytvořit volání/definice

V kódu JavaScript se dá definice použít k vykonání funkce, u které konkrétní vlastnost vyžaduje změnit. Definice se nejčastěji používají ve spojení s voláním k vytvoření určitého druhy pseudovlastnosti. Definici nelze vytvořit u vlastnosti, která nemá žádnou skutečnou hodnotu.

Umístěte kurzor na člen objektového výrazu, klikněte pravým tlačítkem a vyberte možnost Refaktoring > Vytvořit volání/definice.

Tipy pro řešení problémů

V následující tabulce jsou uvedeny tipy pro řešení potíží u příslušných chybových zpráv na obrazovce vzniklých v důsledku nesprávného výběru kódu:

Název funkce	Chybová zpráva	Rada k řešení problémů
Přejmenovat	Na daném místě není žádný výraz	Umístěte kurzor na název proměnné nebo funkce nebo před něj.
Extrahovat do proměnné	Výběr nevytvoří výraz	Před refaktorováním kódu vyberte v kódu výraz.
Extrahovat do funkce	Vybraný blok by měl představovat soubor příkazů nebo výrazů	Vyberte blok se sadou příkazů nebo výrazem.
Vložit mezi Try Catch	Zvolte platný kód, který chcete vložit do bloku Try/Catch	Před možností refaktorování try catch musíte vybrat nějaký kód.
Vložit mezi podmínky	Zvolte platný kód, který chcete vložit do podmínkového bloku	Před použitím refaktorování Vložit mezi podmínky musíte vybrat výraz.
Převést na funkci šipky	Umístění kurzoru do výrazu funkce	Před použitím funkce refaktorování musíte kurzor umístit dovnitř výrazu funkce.
Vytvořit volání/definice	Umístění kurzoru do pozice člena výrazu objektu	Před použitím možnosti refaktorování Vytvořit volání/definice musíte kurzor umístit na člen objektového výrazu.

Hledání a nahrazování textu

Funkce pro vyhledání a nahrazení v aplikaci Dreamweaver můžete vyhledat libovolný text, kód nebo mezery na webu či ve složce.

Můžete hledat celé značky, nebo se můžete omezit jen na vyhledávání vykresleného textu v zobrazení návrhu nebo jen na kód.

Můžete také využít špičkový algoritmus pro srovnávání vzorců (regulární výrazy) a nastavit tak komplexní podmínky hledání a nahrazování.

Jakmile najdete text, můžete se rozhodnout nahradit jej zadaným textem, kódem nebo mezerou.

Další informace naleznete v tématu Hledání a nahrazování textu.

Náhled obrázků a barev v zobrazení kódu

Jakmile vložíte příslušný kód obrázků či barev, můžete si jejich náhled prohlédnout přímo v zobrazení kódu.

Náhled obrazu

Umístěte kurzor myši nad adresu URL libovolného obrázku, jehož náhled chcete zobrazit v Zobrazení kódu. Můžete prohlížet náhled obrázků, které jsou v kódu odkazovány jedním z následujících způsobů:

url();
data-uri()
Hodnota atributu src tagu img

Aplikace Dreamweaver také zobrazuje náhledy vzdáleně hostovaných obrázků.

Pokud aplikace Dreamweaver nedokáže zobrazit náhled u vzdálených umístění, zobrazí se zpráva „Nelze načíst obrázek“.

Náhled je možné zobrazit u následujících typů obrázku:

JPEG
JPG
PNG
GIF
SVG

Náhled barvy

Chcete-li zobrazit Náhled barvy v zobrazení kódu, umístěte kurzor myši nad příslušnou hodnotu barvy. Podporované formáty jsou následující:

3- a 6místné hexadecimální hodnoty barev: #ff0000;
RGB: rgb(0, 0, 0);
RGBA: rgba(0, 255, 228,0.5);
HSL: hsl(120, 100%, 50%);
HSLA: hsla(120, 60%, 70%, 0.3);
Předem definované názvy barev: Olive, Teal, red.

Náhled barev je dostupný u všech typů dokumentů s výše uvedenými formáty barev.

Kliknutím pravým tlačítkem na hodnotu a výběrem možnosti Rychlé úpravy otevřete nástroj pro výběr barvy, ve kterém můžete vybrat jinou barvu.

Poznámka:

Chcete-li zakázat náhled obrázků a barev, zrušte zaškrtnutí volby Zobrazit > Možnosti zobrazení kódu > Náhled datového zdroje.

Tisk kódu

Můžete si vytisknout kód, abyste ho mohli upravovat offline, archivovat ho nebo ho distribuovat.

Otevřete stránku v zobrazení Kód.
Vyberte volbu Soubor > Tisknout kódu.
Určete volby tisku a pak klikněte na tlačítko OK (Windows) nebo na tlačítko Tisknout (Macintosh).

Adobe

Získejte pomoc rychleji a snáze

Nový uživatel?