Psaní a úprava kódu

Naposledy aktualizováno 27. 4. 2021

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

Existuje několik způsobů, jak můžete v aplikaci Dreamweaver pracovat s kódem.

Můžete otevřít nový soubor s kódem pomocí dialogového okna Nový dokument a začít zadávat 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, když ji potřebujete, pomocí užitečné funkce Rychlá dokumentace aplikace Dreamweaver.

Můžete také vkládat kód pomocí panelu Vložit nebo používat zkratky kódování jako například zkratky Emmet.

Pokud se přistihnete, že kopírujete a vkládáte stejný kus kódu vícekrát, zkuste tyto funkce, které šetří čas:

Panel Fragmenty je neocenitelný pro rychlé vytváření a vkládání předformátovaných fragmentů kódu do vašeho kódu.
Více kurzorů vám umožňuje vytvářet a upravovat více řádků kódu najednou.

Dreamweaver také poskytuje silnou sadu nástrojů pro úpravy, které usnadňují navigaci v kódu a provádění změn.

Použijte funkci vyhledat a nahradit v Dreamweaveru k vyhledávání značek, atributů nebo textu v kódu.
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. Ještě lépe, použijte funkci Rychlé úpravy k úpravě kódu v souvisejících souborech bez nutnosti otevírat soubor na nové kartě.
Klikněte pravým tlačítkem na kód a zobrazí se jednoduché, relevantní kontextové menu, které vám umožní upravovat kód přímo.
Použijte Zabalit značku k zabalení textu do značek.

Pokračujte ve čtení, abyste získali více informací o všech těchto funkcích kódu.

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.

Klikněte na tlačítko na panelu Vložit nebo vyberte položku z rozbalovacího menu na panelu Vložit.

Když kliknete na ikonu, kód se objeví na vaší stránce okamžitě, nebo se zobrazí dialogové okno požadující další informace k dokončení 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 značky style na HTML stránce.

Následuje několik příkladů použití zkratek doplňku Emmet v zobrazení kódu. Pro podrobné informace a reference se podívejte na dokumentaci Emmet.

Poznámka

Dreamweaver v současnosti podporuje zkratky Emmet 1.2.2.

Příklad 1: Vkládání HTML kódu pomocí Emmet

Pro rychlé přidání HTML kódu pro neuspořádaný seznam se třemi prvky otevřete HTML soubor a zadejte následující zkratku Emmet v zobrazení kódu mezi <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ě vyberte celou zkratku a stiskněte klávesu Enter.

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

<div>

<ul>

<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: Vkládání kódu CSS pomocí Emmet

Pro vložení CSS kódu na vytvoření poloměru ohraničení s vendor prefixy otevřete soubor CSS a do třídy zadejte následující zkratku Emmet:

-bdrs

Po stisknutí klávesy Tab se zkratka 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. Pak můžete umístit kurzor do bodu vložení a kliknout na ikonu Vložit z panelu nástrojů. Otevře se podnabídka Použít poznámku.

Podle potřeby můžete také vybrat text a označit jej za komentář. Vybraný text se zabalí do bloku poznámky.

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čí zadat text poznámky.

Můžete také použít klávesové zkratky Ctrl+/ (ve Windows) nebo Cmd+/ (na Mac) pro přidání poznámek.

Pokud použijete klávesovou zkratku bez výběru textu, za komentář se označí celý aktuální řádek. Pokud označíte text a použijete klávesovou zkratku, poznámka se použije na označený 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ů. Můžete také použít klávesové zkratky Ctrl-/ (ve Windows) nebo Cmd-/ (na Mac) k odstranění poznámek.

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

Chcete-li přepínat mezi zobrazením a skrytím komentářů v zobrazení kódu, jednoduše stiskněte klávesu Ctrl+/ ve Windows nebo Cmd+/ na Mac pro vybraný komentář nebo řádek.

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í a vkládání a hledání a nahrazování nefungují s více kurzory nebo více výběry.

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

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

Pokud chcete přidat stejný text na více míst, aniž byste nahradili existující text, 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é řádky textu nebo nesouvislé řádky textu, nebo oboje, a přidat k nim kurzory.

Přidání více kurzorů nebo více výběrů ve stejném sloupci napříč 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. Když táhnete svisle, kurzory se přidávají do každého řádku, přes který táhnete.

Pokud budete chtít vybrat souvislé řádky textu, podržte stisknutou klávesu Alt a začněte přetahovat šikmo. Když táhnete diagonálně, Dreamweaver vybere obdélníkový blok textu v rámci tohoto výběru.

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

Poznámka

Chcete-li rychle přidat kurzory nebo zahrnout více řádků do výběru, použijte klávesovou zkratku Shift-Alt-Up nebo Down.

Jakmile přidáte kurzory (nebo vyberete text) na více místech, můžete začít psát.

Pokud máte více kurzorů, nový text se přidá.

Pokud jste vybrali obsah ve více řádcích textu, vybraný text se nahradí novým textem, který zadáte.

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

Chcete-li přidat kurzory do nesouvislých řádků textu, jednoduše stiskněte klávesu Ctrl a klikněte na různé řádky, kam chcete umístit kurzor.

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

Chcete-li vybrat nesouvislé řádky textu, vyberte nějaký text, pak stiskněte klávesu Ctrl (Windows) nebo klávesu Cmd (Mac) a pokračujte v dalším výběru.

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

Vyberte více řádků textu a stiskněte klávesy Left nebo Right.

Přidání kurzorů v předchozích nebo následujících řádcích pro výběr:

Stiskněte klávesy Shift+Alt+šipka nahoru/dolů a pak stiskněte klávesu šipka doprava.

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

Tyto techniky můžete kombinovat a vybrat jak souvislé, tak samostatné řádky textu v rámci jednoho výběru.

Nejprve vyberte jednotlivé nesouvislé řádky textu, poté stiskněte Ctrl+Alt (ve Windows) nebo Cmd+Alt (na Mac) a přetažením přidejte sadu řádků ke stávajícím vícenásobným výběrům.

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.

Umístěte kurzor do vlastnosti nebo hodnoty a stiskněte klávesu Ctrl+K. Dreamweaver otevře dokumentaci z projektu Web Platform Docs.

Můžete současně otevřít více vložených editorů a prohlížečů dokumentace.

Dokumentace CSS v rámci aplikace Dreamweaver

Pro zavření jednoho vloženého editoru nebo prohlížeče dokumentace klikněte na "X" v levém horním rohu nebo stiskněte Escape, když je Rychlá dokumentace aktivní.

Pro zavření všech vložených editorů a dokumentace umístěte kurzor zpět do hlavního editoru kódu a stiskněte Escape.

Analyzovat kód

Dreamweaver podporuje linting (analýzu kódu kvůli možným chybám) pro HTML, CSS a JavaScript.

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

Aplikace Dreamweaver dále zobrazuje rychlý náhled chyby ve sloupci s číslem příslušného řádku. Číslo řádku je zobrazeno červeně, což znamená, že obsahuje chyby, a když na něj najedete myší, 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 pohledu Design nebo Live můžete tuto funkci použít k obalení objektů tagem.

Vyberte text v zobrazení Kód nebo objekt v zobrazení Design a stiskněte Ctrl+T na klávesnici.

Objeví se vyskakovací okno, které vám umožní vybrat z řady HTML značek.

Vybrat značku z nabídky.

Pokud pracujete v zobrazení kódu, vybraný text bude obklopen do tagu. Pokud pracujete v zobrazení Design nebo Live, vybraný objekt se zabalí značkou.

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

Použijte kontextovou nabídku aplikace Dreamweaver k rychlým úpravám 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 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 najdete v části Rychlé úpravy.

Vyjmout, kopírovat, vložit

Kliknutím na tyto možnosti můžete rychle vyjmout, kopírovat a vložit text bez nutnosti přístupu do nabídky Upravit.

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

Kliknutím na tyto možnosti můžete rychle najít a nahradit text bez nutnosti přístupu do nabídky 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 viz část Práce s výstřižky kódu.

Otevřít související soubory

Klikněte pravým tlačítkem na odkaz/značku skriptu a klikněte na otevřít související soubor.

Připojit seznam stylů

Připojte k stránce existující šablonu stylů CSS.

Výběr

Podnabídka Výběr zahrnuje různé možnosti úprav kódu, které můžete použít na vybraný kus kódu, jako je přepínání řádkových a blokových komentářů, rozšíření a sbalení výběru, převod vloženého CSS na pravidla, přesun 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 viz část Vyhledání souvisejícího kódu.

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

Podnabídka Nástroje nápovědy kódu vám přináší výběr barvy, prohlížeč URL a nástroje seznamu písem na dosah ruky.

Odsazení bloků kódu

Při psaní a úpravách kódu v zobrazení Kód nebo v inspektoru kódu můžete změnit úroveň odsazení vybraného bloku nebo řádku kódu a posunout jej doprava nebo doleva o jeden tabulátor.

Odsazení vybraného bloku kódu

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

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

Stiskněte klávesu Shift+Tab nebo
Stiskněte 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.

K navigátoru kódu máte přístup ze zobrazení Návrh, Kód a Rozdělené a také z inspektoru kódu.

Video s přehledem od inženýrského týmu Dreamweaver o práci s navigátorem kódu najdete na adrese www.adobe.com/go/dw10codenav.

Výuková lekce videa o práci s živým zobrazením, souvisejícími soubory a navigátorem kódu je k dispozici na adrese www.adobe.com/go/lrvid4044_dw.

Otevření aplikace Code Navigator

Alt+klikněte (Windows) nebo Command+Option+klikněte (Macintosh) kamkoliv na stránku. Navigátor kódu zobrazí odkazy na kód ovlivňující oblast, na kterou jste klikli.

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

Poznámka

Navigátor kódu můžete také otevřít kliknutím na indikátor navigátoru kódu . Tento indikátor se zobrazí poblíž kurzoru na vaší stránce, pokud byla myš 2 sekundy nečinná.

Navigace ke kódu pomocí navigátoru kódu

Otevřete navigátor kódu z oblasti stránky, která vás zajímá.

Klepně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 šablon CSS spojených s daným výběrem aplikace Code Navigator funguje jako panel šablon stylů CSS v aktuálním režimu.

Poznámka

Pokud umístíte ukazatel na odkazy na pravidla CSS, aplikace Code Navigator zobrazí tipy k nástrojům vlastností v pravidle. Tyto popisky nástrojů jsou užitečné, když chcete rozlišit mezi mnoha pravidly 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.

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

Chcete-li znovu povolit indikátor navigátoru kódu, stiskněte Alt+klikněte (Windows) nebo Command+Option+klikněte (Macintosh), aby se otevřel navigátor kódu a zrušte výběr možnosti Zakázat indikátor.

Přejít na funkci JavaScript nebo VBScript

V zobrazení Kód a inspektoru kódu můžete zobrazit seznam všech funkcí JavaScript nebo VBScript v kódu a přejít k libovolné z nich.

Zobrazit dokument v zobrazení Kód (Zobrazit > Kód) nebo v inspektoru kódu (Okno > 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ávrh.

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í, klepněte pravým tlačítkem s klávesou Ctrl (Windows) nebo s klávesami Alt+Ctrl (Macintosh) do zobrazení Kód a pak vyberte podnabídku Funkce.

V Inspektoru kódu klikněte na tlačítko Navigace kódu ({ }) na panelu nástrojů.

Vyberte název funkce pro přechod na funkci v kódu.

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.

Před použitím JavaScript Extractor vezměte v úvahu následující omezení:

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 (šablona aplikace Dreamweaver), neupravitelných oblastí instancí šablony 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 globálními proměnnými postupujte opatrně.

Video s přehledem od inženýrského týmu Dreamweaver o podpoře JavaScript v aplikaci Dreamweaver najdete na adrese www.adobe.com/go/dw10javascript.

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

Otevřít stránku obsahující JavaScript.

Klikněte na Nástroje > Externalizovat JavaScript.

V dialogovém okně Externalizovat JavaScript upravte výchozí volby v případě potřeby.

Vyberte možnost Pouze externalizovat JavaScript, pokud chcete, aby Dreamweaver přesunul veškerý JavaScript do externího souboru a odkazoval na tento soubor v aktuálním dokumentu. Tato možnost ponechá obsluhy událostí, jako je onclick a onload, v dokumentu a ponechá Chování viditelné na panelu Chování.
Vyberte možnost Externalizovat JavaScript a připojit nenápadně, pokud chcete, aby Dreamweaver 1) přesunul JavaScript do externího souboru a odkazoval na něj v aktuálním dokumentu a 2) odstranil obsluhy událostí z HTML a vložil je za běhu pomocí JavaScriptu. Když vyberete tuto možnost, již nebudete moci upravovat Chování na panelu Chování.
Ve sloupci Upravit zrušte výběr všech úprav, které nechcete provést, nebo vyberte úpravy, které Dreamweaver nevybral ve výchozím nastavení.
Ve výchozím nastavení Dreamweaver vypíše, ale nevybere následující úpravy:
- Bloky skriptů v hlavičce dokumentu, které obsahují volání document.write() nebo document.writeln().
- Bloky skriptů v hlavičce dokumentu, které obsahují podpisy funkcí souvisících s kódem pro zpracování EOLAS, o kterém je známo, že používá document.write().
- Bloky skriptů v těle dokumentu, s výjimkou bloků obsahujících pouze konstruktory widgetů Spry nebo datových sad Spry.
Dreamweaver automaticky přiřadí ID prvkům, které ještě nemají ID.Pokud se vám tato ID nelíbí, můžete je změnit upravením textových polí ID.

Klikněte na tlačítko OK.

Dialog shrnutí poskytuje přehled extrakcí.Zkontrolujte vyjmutí a klepně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

Místo zaplňování vývojového prostředí množstvím panelů a ikon umístí režim Rychlá úprava v Dreamweaveru kontextový kód a nástroje přímo do řádku, což vám umožní rychle se dostat k části kódu, kterou potřebujete.

Režim rychlých úprav můžete spustit:

Kliknutím pravým tlačítkem na úryvek kódu a výběrem možnosti Rychlá úprava z kontextové nabídky, která se zobrazí
Stiskněte klávesy Ctrl + E (ve Windows) nebo Cmd + E (na 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 upravovat přímo inline, aniž byste opustili kontext souboru HTML.

Když se shoduje více pravidel, procházejte mezi nimi pomocí seznamu na pravé straně (nebo použijte Alt-Nahoru/Dolů).

Chcete-li vytvořit pravidlo CSS přímo z inline editoru, klikněte na Nové pravidlo nebo stiskněte klávesy Ctrl-Alt-N (ve Windows) nebo Cmd-Opt-N (na Macu).

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

V souboru JavaScript umístěte kurzor na název funkce. Rychlá úprava vám ukáže tělo funkce (i když je přítomno v jiných souborech odkazovaných příkazem require()).

Použití režimu Rychlá úprava se soubory CSS, SCSS nebo LESS

Když vyvoláte Rychlou úpravu s kurzorem umístěným v hodnotě barvy, můžete získat přístup k nástroji Výběr barvy a rychle upravit barvy používané v kódu CSS.

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

V souboru CSS, LESS nebo SCSS umístěte kurzor na funkci časování přechodu cubic-bezier() nebo steps() a nástroj Rychlé úpravy zobrazí grafický editor křivky přechodu.

Předdefinované funkce časování ease, ease-in, ease-out, ease-in-out, step-start a step-end jsou také platnými výchozími body.

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

Pomocí refaktorování JavaScriptu můžete přejmenovat funkce a nastavit rozsah proměnné tak, abyste ji mohli volat z bloku kódu, ve kterém je definována.

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ž kliknete pravým tlačítkem myši na oblast kódu v aplikaci Dreamweaver, zobrazí se v rozbalovací nabídce možnost Refaktor.Refaktor se skládá z následujících možností:

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

Pro pochopení funkcí jednotlivých možností refaktorování se podívejte do následujících částí:

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 tažením není pro refaktorování nutný.

Chcete-li přejmenovat v JavaScript, proveďte následující kroky:

Zvýrazněte nebo umístěte textový kurzor do kódu, který vyžaduje změnu.

Klikněte pravým tlačítkem myši na vybraný text a poté vyberte Refactor > Rename. Můžete také použít klávesové zkratky Ctrl + Alt + R v operačním systému Windows nebo Command + Option + R v macOS k přejmenování.

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. Retype jedinečný název proměnné nebo funkce, který nahradí současný název.

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é. Můžete také použít Ctrl + Alt + V v operačním systému Windows a Cmd + Alt + V v macOS.

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 uvnitř těla funkce nebo předat prostřednictvím volání funkcí.

Chcete-li provést refaktoring pomocí Extrakce do funkce, postupujte podle následujících kroků:

Vyberte libovolný výraz nebo sadu výrazů v JavaScriptu.

Klikněte pravým tlačítkem myši a vyberte Refactor > Extract to Function. Můžete také použít Ctrl + Alt + M v operačním systému Windows nebo Cmd + Alt + M v Mac OS.

Vyberte cílový rozsah pro extrakci funkce z vyskakovací nabídky, která se zobrazí na obrazovce.

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

Charakteristiky Extrakce do funkce jsou:

Identifikuje parametry k předání na základě identifikátorů dostupných ve výběru nebo v extrahovaném rozsahu.
Identifikuje návratové parametry, které má vrátit z funkce na základě identifikátorů, jejichž hodnoty se ve výběru změnily.
Také vytváří funkci s jedinečným názvem.

Následující snímky obrazovky zobrazují výstup založený na vybraném příslušném cílovém rozsahu.

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 označený jako výjimka při spouštění programu.

Vyberte nebo umístěte kurzor na kód, klikněte pravým tlačítkem a vyberte Refactor > Wrap in Try Catch. Pokud umístíte kurzor na pozici, pak najde okolní příkazy, jinak zkontroluje, zda kód obsahuje příkazy nebo ne. Pokud existují příkazy, pak zabalí kód do bloku Try Catch.

Vložit mezi podmínky

Použijte Zabalit do podmínky pro výraz v kódu ke kompilaci pouze pro konkrétní podmínku.

Vyberte výraz v kódu, klikněte pravým tlačítkem a vyberte Refaktor > Zabalit do podmínky.

Převést na funkci šipky

Šipková funkce je výraz, který nemá vlastní funkční výrazy jako this, arguments, super nebo new.target. Tyto funkční výrazy jsou určeny pro výrazy, které nejsou metodami, a nemohou být použity jako konstruktor.

Umístěte kurzor do funkce, klikněte pravým tlačítkem a vyberte Refaktor > Převést na Arrow funkci.

Poznámka

Pokud má vybraný příkaz jeden parametr, pak se struktura parametru zobrazí jako param => {statements}.
Pokud má vybraný příkaz nula nebo více než jeden parametr, jako je param (param1, param2), pak se struktura parametru zobrazí jako param (param1, param2) => {statements}.

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. Nelze vytvořit setter pro vlastnost, která má skutečnou hodnotu.

Umístěte kurzor na člen objektového výrazu, klikněte pravým tlačítkem a vyberte Refaktorovat > Vytvořit gettery/settery.

Tipy pro řešení problémů

Následující tabulka poskytuje tipy pro řešení problémů s odpovídajícími chybovými zprávami, které se zobrazují na obrazovce v důsledku nesprávného výběru kódu:

Název funkce	Chybová zpráva	Tip pro ř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

Můžete použít funkce vyhledávání a nahrazování aplikace Dreamweaver k vyhledávání jakéhokoli druhu textu, kódu nebo prázdných znaků na svém webu nebo 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

Po vložení příslušného kódu pro obrázky a barvy si je můžete prohlédnout přímo v zobrazení Kód.

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 zobrazit náhled obrázků, na které se odkazuje jako na některou z následujících možností:

url();
data-uri()
Hodnota atributu src značky img

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

Pokud Dreamweaver nedokáže zobrazit náhled pro vzdálené cesty, zobrazí zprávu „Nelze načíst obrázek".

Můžete zobrazit náhled následujících typů obrázků:

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:

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ředdefinované názvy barev, například Olive, Teal, red.

Náhled barvy je dostupný ve všech typech dokumentů pro výše uvedené formáty barev.

Klikněte pravým tlačítkem na hodnotu a vyberte Rychlá úprava, čímž otevřete výběr barvy a vyberete jinou barvu.

Poznámka

Chcete-li zakázat náhledy obrázků a barev, zrušte zaškrtnutí možnosti Zobrazení > Možnosti zobrazení kódu > Náhled prostředků.

Tisk kódu

Můžete si vytisknout svůj kód a upravit jej offline, archivovat jej nebo distribuovat.

Otevřete stránku v zobrazení Kód.

Vyberte volbu Soubor > Tisknout kódu.

Zadejte možnosti tisku a potom klikněte na tlačítko OK (Windows) nebo Tisk (Macintosh).

Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.

Aplikaci otevřete

Předchozí

Přizpůsobení barevného zvýraznění kódu

Další

Našeptávání kódu a dokončování kódu

Informace

Učte se pomocí podrobných výukových videí a praktických pokynů přímo v aplikaci.

Komunita

Zapojte se do diskuzí, najděte odpovědi, učte se od odborníků a sdílejte své znalosti.

Domovská stránka Adobe

Získejte přístup k oblíbeným aplikacím, službám, správě souborů a dalším funkcím Creative Cloud.