Prostředí pro psaní kódu v aplikaci Dreamweaver

Pokud chcete v aplikaci Dreamweaver pracovat s kódem, můžete využít pracovní plochu Vývojář. Ve výchozím nastavení je na této pracovní ploše otevřeno zobrazení kódu a v levé části obrazovky naleznete ukotvený panel Soubory a Výstřižky.

Pokud budete chtít přidat další funkce, klikněte na možnost Okno a vyberte příslušný potřebný panel.

S kódem můžete v aplikaci Dreamweaver pracovat několika způsoby. Můžete použít následující:

• Zobrazení kódu: Přehledné a minimalistické rozvržení, které vám umožní pracovat čistě s kódem bez nadbytečných panelů nebo oken. Další informace naleznete v tématu Zobrazení kódu v okně dokumentu.
• Rozdělené zobrazení: V tomto zobrazení je vám k dispozici zobrazení kódu i živé zobrazení / zobrazení návrhu, ve kterém můžete sledovat změny souběžně s psaním kódu. Další informace naleznete v tématu Současné psaní kódu a úprava stránky v okně dokumentu – rozdělené zobrazení.

Mezi jednotlivými zobrazeními můžete přecházet kliknutím na tlačítko Kód, Rozdělit a Návrh/Živé v horní části pracovní plochy.

Pomocí Inspektoru kódu můžete zobrazit svůj kód HTML ve formě plovoucího okna. Inspektor kódu vám umožní prohlížet svůj návrh webu a kód současně, aniž by bylo nutné rozdělit zobrazení na poloviny. Další informace naleznete v tématu Zobrazení kódu v samostatném okně pomocí Inspektoru kódu.

Zobrazení kódu v okně dokumentu – zobrazení kódu

Pište kód a upravujte stránku současně v okně dokumentu – rozdělené zobrazení

Zobrazení kódu v samostatném okně pomocí Inspektoru kódu

Inspektor kódu umožňuje pracovat v samostatném okně pro psaní kódu, stejně jako byste pracovali v zobrazení kódu.

Rychlejší psaní kódu v aplikaci Dreamweaver

Zobrazení kódu v aplikaci Dreamweaver nabízí funkce pro snadnější psaní kódu, které usnadňují návrhářům přechod k vývoji v zobrazení kódu. Zkušení programátoři tak mohou těžit z vizuálních pomůcek, jako je automatické odsazení, barevné zvýraznění kódu a změna velikosti písma, se kterými mohou omezit počet chyb a zlepšit čitelnost kódu.

Zde jsou některé funkce, které aplikace Dreamweaver nabízí.

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

Funkce Našeptávání kódu (nebo Dokončování kódu) v aplikaci Dreamweaver vám umožňuje během psaní vybrat tagy, atributy a styly CSS z rozbalovací nabídky. Toto automatické dokončování kódu přináší rychlejší psaní kódu s méně chybami.

Prohlédněte si příklad toho, jak tato funkce funguje v prostředí HTML. 

Jakmile začnete psát znak „<“, aplikace Dreamweaver otevře místní nabídku se všemi dostupnými tagy HTML. Když budete pokračovat v psaní tagu, aplikace Dreamweaver automaticky aktualizuje dostupné prvky HTML a umožní vybrat vhodný tag. Po stisknutí klávesy Enter aplikace Dreamweaver za vás automaticky vloží tag. Následně se otevře druhá místní nabídka se seznamem všech dostupných vlastností daného tagu.

Podpora našeptávání kódu je k dispozici také pro formát CSS, JavaScript a PHP (PHP verze 5.6 a 7.1). 

Další informace naleznete v tématu Našeptávání kódu a dokončování kódu.

Podpora verze PHP 5.6 a 7.1

Aplikace Dreamweaver podporuje PHP verze 5.6 a 7.1. 

Podle potřeby můžete kompilovat soubory PHP na vašem webu s verzí PHP 5.6 nebo 7.1 za pomoci dialogového okna Nastavení webu (pro jednotlivé weby) nebo předvoleb aplikace (pro všechny soubory PHP uložené mimo weby Dreamweaver). Aplikace Dreamweaver poté nastaví našeptávání kódu a kontroly lintingu pro vybranou verzi jazyka PHP.

Pro nové stránky v aplikaci Dreamweaver je nastaven výchozí kompilátor PHP na verzi zadanou v části Úpravy > Předvolby > PHP.

Další informace o podpoře PHP v aplikaci Dreamweaver naleznete v tématu:

• Nastavení předvoleb PHP
• Našeptávání kódu PHP

Obecné informace o PHP verze 5.6 a 7.1 naleznete v následujících odkazech:

• Přechod z PHP 5.6.x PHP 7.0.x:http://php.net/manual/en/migration70.php
• Přechod z PHP 7.0.x PHP 7.1:http://php.net/manual/en/migration71.php
• Další informace o PHP 7.1:http://php.net/releases/7_1_0.php

Našeptávání kódu pro objekty JavaScript

Aplikace Dreamweaver podporuje našeptávání kódu pro objekty JavaScript. V aplikaci Dreamweaver je k dispozici našeptávání kódu pro základní objekty JavaScript, jako jsou pole, data, čísla a řetězce. 

Mimo to aplikace Dreamweaver sleduje právě vytvářené funkce jazyka JavaScript a podporuje našeptávání kódu pro vaše vlastní názvy funkcí.

Další informace naleznete v tématu Našeptávání kódu a dokončování kódu.

Refaktorování kódu JavaScript

Aplikace Dreamweaver podporuje refaktorování kódu. Refaktorování kódu je proces restrukturalizace stávajícího kódu beze změny chování navenek. Kód je pak čitelnější a srozumitelnější. 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é. V rámci refaktorování kódu JavaScript můžete přejmenovávat funkce a proměnné s ohledem na obor.

Další informace naleznete v tématu Psaní a úprava kódu.

Barevné zvýraznění kódu pro různé typy souborů

Aplikace Dreamweaver podporuje barevné zvýraznění kódu pro formáty HTML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML a YAML.

Více kurzorů pro opakující se úkoly

Využijte možnosti psát více než jeden řádek kódu současně a urychlit tak procesy, jako je vytváření seznamu s odrážkami, aktualizace řady řetězců a provádění více úprav najednou.

Tato funkce umožňuje velké zvýšení produktivity, protože již nemusíte opakovaně psát ten samý řádek kódu. Více kurzorů to udělá za vás najednou.

Při úpravách kódu máte následující možnosti:

• Přidání více kurzorů s cílem vložit nový obsah na různá místa
• Výběr textu na několika místech a použití stejných úprav v různých částech dokumentu

Další informace naleznete v tématu Přidání více kurzorů nebo vícenásobného výběru.

Rychlá úprava souvisejících souborů s kódem

Chcete-li provést rychlé změny ve svém kódu, umístěte kurzor na konkrétní výstřižek kódu a pomocí kontextové nabídky nebo stiskem kláves Ctrl + E (systém Windows) nebo Cmd + E (systém Mac) otevřete rychlé úpravy.

Aplikace Dreamweaver vám nabízí možnosti kódu podle daných okolností a nástroje inline.

Vzorový scénář použití

Vezměte v úvahu následující příklad:

Upravujete soubor HTML a zjistíte, že něco v živém zobrazení nevypadá správně. Přejdete tedy do zobrazení kódu a uvědomíte si, že kvůli napravení problémů budete muset upravit další související soubor (řekněme soubor CSS). 

Namísto přepínání karet kliknete pravým tlačítkem na odpovídající kód a kliknutím na možnost Rychlé úpravy nebo pomocí klávesové zkratky v aplikaci Dreamweaver otevřete odpovídající část kódu ze souvisejícího souboru CSS přímo v souboru HTML.

Díky tomu můžete upravit kód CSS bez nutnosti procházet jiné soubory nebo přepínat karty. Změny se projeví v souboru CSS automaticky.

Další informace naleznete v tématu Rychlá úprava.

Kontextová dokumentace CSS

Rychlé dokumenty obsahují dokumentaci pro vlastnosti CSS a jsou dostupné přímo v rámci zobrazení kódu.

Při hledání informací o vlastnostech CSS již nemusíte přecházet mimo aplikaci Dreamweaver na webovou stránku. Rychlé dokumenty otevřete kombinací kláves Ctrl + K (systém Windows) nebo Cmd + K (systém Mac).

Další informace naleznete v tématu Získání pomoci s CSS v rámci aplikace Dreamweaver pomocí rychlých dokumentů.

Nadstandardní podpora pro modul Emmet

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

Modul Emmet je součástí aplikace Dreamweaver a umožňuje zkratky Emmet používat, aniž by bylo nutné věnovat další čas instalaci zásuvného modulu.

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.

Další informace o použití doplňku Emmet naleznete v tématu Použití sady nástrojů Emmet v aplikaci Dreamweaver.

Sbalení kódu

Aplikace Dreamweaver umožňuje sbalit části kódu tak, aby bylo možné se snadněji soustředit na části, které právě upravujete. 

Kód můžete sbalit na základě tagů či závorek nebo můžete kód sbalit na základě výběru. 

Další informace naleznete v tématu Sbalení a rozbalení kódu.

Ověření kódu

Aplikace Dreamweaver nabízí všestrannou funkci lintingu pro ladění chyb v kódu. 

Tato funkce umožňuje analýzu kódu a vyznačení potenciálních chyb nebo podezřelého použití kódu. Chyby v syntaxi HTML, chyby analýzy v CSS nebo upozornění pro soubory JavaScript jsou příkladem bodů, na které vás linting aplikace Dreamweaver upozorní.

Další informace o lintingu kódu v aplikaci Dreamweaver naleznete v tématu Linting kódu.

Pokud pracujete s jazykem PHP a dokument obsahuje chybný kód, aplikace Dreamweaver tento kód přenese do zobrazení návrhu (pokud je otevřený) a zvýrazní jej v zobrazení kódu (v závislosti na nastavených předvolbách).

Ať už vyberete kód v jakémkoliv okně, inspektor vlastností zobrazí informaci o tom, proč je kód neplatný a jak ho opravit.

Podpora pro preprocesory CSS

Aplikace Dreamweaver nově podporuje běžné preprocesory CSS, například SASS, Less a SCSS, s plnou podporou barevného zvýraznění kódu, našeptávání kódu a kompilace. 

Díky podpoře preprocesorů CSS můžete ušetřit čas při práci na velkých webech se složitým seznamem stylů.

Další informace o podpoře preprocesorů CSS v aplikaci Dreamweaver naleznete v tématu Použití preprocesorů CSS v aplikaci Dreamweaver.

Ukládání a opakované použití výstřižků kódu

Ukládejte bloky často používaného kódu jako výstřižky kódu na panelu Výstřižky. Tyto bloky kódu poté můžete vložit na více stránkách.

Výstřižky uložené na panelu Výstřižky nejsou určeny výhradně pro jeden web, takže je můžete používat opakovaně na více webech.

Výstřižky kódu lze díky synchronizaci nastavení používat v různých zařízeních a také v různých verzích aplikace Dreamweaver.

Další informace naleznete v tématu Opakované použití kódu v podobě výstřižků.

Náhled v prohlížeči v reálném čase

Využijte možnosti rychle prohlížet náhled kódu v reálném čase bez nutnosti ručního opětovného načtení stránky v prohlížeči. Aplikace Dreamweaver je nově spojena s vaším prohlížečem, takže se změny v prohlížeči zobrazí okamžitě bez nutnosti znovu načíst stránku.

Další informace naleznete v tématu Náhled v prohlížeči v reálném čase.

Přizpůsobení klávesových zkratek

V aplikaci Dreamweaver můžete používat oblíbené klávesové zkratky. Pokud jste zvyklí na specifické klávesové zkratky, například Shift + Enter pro přidání zalomení řádku nebo Ctrl + G pro přechod na konkrétní pozici v kódu, můžete je přidat do aplikace Dreamweaver pomocí Editoru klávesových zkratek.

Instrukce viz část Přizpůsobení klávesových zkratek.

Standardní otevření souboru v zobrazení kódu

Když otevíráte typ souboru, který za normálních okolností neobsahuje HTML (například soubor JavaScript), otevře se soubor v zobrazení Kód (nebo inspektoru kódu) místo otevření v zobrazení Návrh. Můžete určit, které soubory se mají v zobrazení kódu otevřít.