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

Inteligentní funkce Našeptávání kódu a dokončování kódu aplikace Dreamweaver umožňují rychlé vkládání a úpravy kódu díky snížení počtu překlepů a dalších běžných chyb.

Tuto funkci lze také použít k zobrazení následujících:

• dostupné atributy tagu,
• dostupné parametry funkce,
• dostupné metody objektu.

Podporované jazyky a technologie

• HTML
• CSS
• JavaScript 
• PHP.

Přečtěte si, jak funguje našeptávání a dokončování kódu u těchto jazyků.

Povolit nápovědy při psaní kódu

Chcete-li povolit nápovědy při psaní kódu, klikněte na nabídku Upravit > Předvolby > Nápovědy při psaní kódu a vyberte volbu Povolit nápovědy při psaní kódu. Chcete-li nápovědy při psaní kódu zakázat, zrušte zaškrtnutí políčka Povolit nápovědy při psaní kódu.

Pokud budete chtít povolit automatické vkládání složených závorek a uvozovek, vyberte možnost Automaticky vkládat závorky a Automaticky vkládat uvozovky.

Pokud chcete zapnout popisy u našeptávání kódu, použijte možnost Zapnout popisky. Popisy potom uvidíte spolu s našeptáváním kódu.

Našeptávání kódu HTML

Pro HTML jsou k dispozici následující typy nápověd při psaní kódu:

• nápovědy pro tag,
• nápovědy pro název atributu,
• nápovědy pro hodnotu atributu.

Nápovědy pro tag

Stisknutím klávesy < na klávesnici začněte psát kód. Aplikace Dreamweaver při zadávání zobrazí platné tagy HTML. Pokud se zadávaný řetězec zobrazí v nabídce, přejděte k němu a dokončete jeho zadání stisknutím klávesy Enter nebo Return.

Pokud například zadáte<, zobrazí se rozbalovací nabídka se seznamem názvů tagů. Nemusíte dopsat zbytek název tagu, stačí příslušný tag vybrat z nabídky a vložit jej tak do textu.

Tyto nápovědy při psaní kódu tagů HTML podle okolností obsahují i stručný popis daného tagu.

Nápovědy pro název atributu

Aplikace Dreamweaver zobrazí odpovídající atributy pro tagy při psaní kódu v aplikaci Dreamweaver. Zadejte název tagu a stisknutím mezerníku zobrazte platné názvy atributů, které lze použít.

Nápovědy pro hodnotu atributu

Text nápovědy pro hodnotu atributu může být statický nebo dynamický (stejně jako nápovědy při psaní kódu zobrazují hodnoty podle obsahu
souvisejících souborů). 

Většina nápověd pro hodnotu atributu je statická. Jako příklad si vezměme cílový atribut value, který je sám statický, a proto jsou nápovědy k němu také statické. 

Aplikace Dreamweaver zobrazí dynamické nápovědy při psaní kódu pro hodnoty atributů, které je vyžadují – například id, target, src, href a class.

Následuje několik příkladů dynamicky zobrazených nápověd při psaní kódu. 

Dynamické nápovědy při psaní kódu pro src

V tomto příkladu se po vložení řetězce src zobrazí platné hodnoty atributů a když vyberete obrazy, aplikace Dreamweaver zobrazí aktuální platné obrazy, které jsou k dispozici ve složce obrazů. Potom můžete projít seznamem a vybrat ten, který chcete.

Pokud máte datové zdroje v CC knihovnách, zobrazí se při zadání textu src také tyto datové zdroje. Tyto datové zdroje CC knihoven jsou označeny ikonou cloudu.

Pokud vyberete datový zdroj CC knihoven, otevře se rozbalovací nabídka umožňující převzorkovat velikost obrazu a změnit jeho formát.

Dynamické nápovědy při psaní kódu pro href

Pokud zadáte text href, aplikace Dreamweaver zobrazí seznam souborů ve složce a současně nabídne možnost procházet a vybrat soubor, na který chcete vytvořit odkaz.

Dynamické nápovědy při psaní kódu pro id a style

Pokud jste v souborech CSS definovali id, při zadání textu id v souborech HTML zobrazí aplikace Dreamweaver všechna dostupná id.

Obdobně, pokud jste definovali styly CSS, při zadání textu style v souborech HTML zobrazí aplikace Dreamweaver všechny dostupné styly.

Našeptávání kódu CSS

Našeptávání kódu je k dispozici pro následující různé typy CSS:

• @rules,
• vlastnosti,
• pseudo-selektory a pseudo-elementy,
• zkrácený zápis.

Kromě našeptávání kódu jsou tipy k dispozici také pro vlastnosti CSS.

Našeptávání při psaní kódu CSS @rules

Aplikace Dreamweaver zobrazí nápovědy při psaní kódu pro všechny @rules společně s popisem pravidla CSS, jak je zde uvedeno.

Našeptávání vlastností CSS

Pokud zadáte text CSS properties, po vložení dvojtečky se zobrazí nápověda, která vám pomůže zvolit platnou hodnotu.

V následujícím ukázkovém kódu se po zadání textu font-family: zobrazí platné sady písem.

Můžete zvolit jednu ze sad písem nebo můžete v těchto nápovědách otevřít dialogové okno Spravovat písma a nastavit zvolená písma. 

Dalším příkladem užitečných nápověd při psaní kódu je práce s barvami v CSS. Pokud zadáte libovolnou vlastnost související s barvami (například border color nebo background color), po zadání dvojtečky zobrazí nápověda při psaní kódu seznam barev. Můžete vybrat barvu ze seznamu, případně můžete přímo z nápověd při psaní kódu otevřít výběr barvy a nastavit požadovanou barvu.

Pokud máte v CC knihovnách vzorky barev, nápovědy při psaní kódu zobrazí i tyto vzorky barev.

Našeptávání pseudo-selektorů a pseudo-elementů

K selektoru CSS můžete přidat pseudo-selektor a definovat konkrétní stav elementu. Například když používáte :hover, styl se použije, když uživatel přejede přes prvek určený selektorem.

Pokud zadáte „:“, Dreamweaver zobrazí seznam platných pseudo-selektorů, když se kurzor nachází ve správném kontextu.

Pokud zadáte „::“, Dreamweaver zobrazí seznam platných pseudo-prvků (používají se k nastavení stylu určených částí elementu), když se kurzor nachází ve správném kontextu.

Našeptávání zkráceného zápisu CSS

Vlastnosti ve zkráceném zápisu jsou vlastnosti CSS, které umožňují současně nastavit hodnoty několika dalších vlastností CSS. Mezi příklady zkráceného zápisu vlastností CSS patří vlastnosti pozadí a písma.

Jak je vidět v následujícím příkladu, pokud zadáte vlastnost CSS ve zkráceném zápisu (například pozadí), po zadání mezery Dreamweaver zobrazí:

• příslušné hodnoty vlastností v pořadí podle relevance,
• povinné hodnoty, které musí být použity (například pokud používáte font, vlastnosti font-size a font-family jsou povinné),
• rozšíření prohlížeče pro danou vlastnost.

Když se vyplní vlastnosti CSS ve zkráceném zápisu, našeptávání kódu zobrazí i hodnoty vlastností, které jste zadali.

Tipy pro kód CSS

Pro některé vlastnosti CSS (například parametr box-shadow nebo text-shadow) Dreamweaver zobrazí tipy, které značí, jaké hodnoty by měly následovat, a také určuje, které hodnoty jsou povinné hodnoty pomocí hvězdičky. 

Zobrazí se také, jak prohlížeč interpretuje CSS.

Nápovědy při psaní kódu JavaScript

V souborech JavaScript nabízí aplikace Dreamweaver nápovědy při psaní kódu pro proměnné a parametry funkcí. 

V následujícím příkladu označuje výstřižek kódu typ.

Aplikace Dreamweaver automaticky obnoví seznam dostupných rad při psaní kódu při práci se soubory JavaScript. Například pokud pracujete v primárním souboru HTML a přepnete na soubor JavaScript, abyste mohli provést změnu. Změna provedená v souboru JavaScript se po návratu k primárnímu souboru HTML projeví v seznamu nápověd při psaní kódu. 

Živá kontrola objektu

Dreamweaver také automaticky aktualizuje našeptávání kódu pro JavaScript.

Například pokud jste definovali proměnnou jako číslici, Dreamweaver zachová tuto informaci. Když na tuto proměnnou odkazujete později v kódu, ukáže svůj typ.

Pokud změníte typ proměnné (třeba na řetězec), našeptávání kódu Dreamweaveru automaticky označuje, že proměnná je řetězec.

Začlenění dynamické dokumentace

Pokud jste přidali komentáře pro konkrétní funkci, Dreamweaver zobrazuje dokumentace pro tuto funkci, když ji našeptává. 

Našeptávání kódu PHP

Aplikace Dreamweaver podporuje nápovědu při psaní kódu PHP ve verzích 5.6 a 7.1. Tyto nápovědy při psaní kódu PHP jsou určeny pro konkrétní weby a zahrnují všechny základní funkce, třídy a konstanty.

Další informace o PHP 5.6 a 7.1 naleznete v tématu Příručka PHP.

Další informace o nápovědách při psaní kódu konkrétních webů naleznete v tématu Nápovědy při psaní kódu konkrétních webů.

Užitečnou funkcí nápovědy při psaní kódu PHP je automatické dokončování proměnných.

Pokud zadáte znak dolaru ($), zobrazí se seznam všech proměnných v aktuálním skriptu. Vyberte požadovanou proměnnou a stiskněte klávesu Enter/Return. Jsou uvedeny také proměnné ze souvisejících souborů, aby se zabránilo opětovnému použití stejné proměnné k jinému účelu.

Pokud je PHP 7.1 nastaveno jako výchozí, aplikace Dreamweaver zobrazí konkrétní našeptávání kódu PHP 7.1.

Upravte nastavení zpoždění pro našeptávání kódu PHP

za účelem lepšího výkonu psaní kódu v .php souborech je v aplikaci Dreamweaver 2017.5 a novějších přidáno zpoždění našeptávání kódu PHP. Při psaní kódu PHP aplikace Dreamweaver zobrazí našeptávání po 400ms prodlevě. Pokud budete chtít změnit nastavení zpoždění pro PHP kód, postupujte takto: 

Nápovědy při psaní kódu konkrétních webů

Aplikace Dreamweaver vývojářům umožňuje pracovat s rozhraním Joomla, Drupal Wordpress nebo dalšími, které jim v náhledu Zobrazení kódu umožní kontrolovat nápovědu při psaní kódu PHP. Chcete-li tuto nápovědu při psaní kódu zobrazit, je třeba prvně pomocí dialogového okna Nápovědy při psaní kódu konkrétních webů vytvořit konfigurační soubor. Toto nastavení poskytne aplikaci Dreamweaver informace, kde vyhledat nápovědu při psaní kódu konkrétně na vašem webu.

Výukové video o práci s nápovědou při psaní kódu konkrétních webů najdete na webu www.adobe.com/go/learn_dw_comm13_cz.

Vytvoření konfiguračního souboru

Pomocí dialogového okna Nápovědy při psaní kódu konkrétních webů vytvořte konfigurační soubor potřebný k zobrazení nápovědy při psaní kódu v aplikaci Dreamweaver.

Podle výchozího nastavení je konfigurační soubor aplikací Adobe Dreamweaver CS5 uložen v adresáři CS5\configuration\Shared\Dinamico\Presets.

Uložit strukturu webového místa

Umožňuje uložit přizpůsobenou strukturu webu vytvořenou v rámci dialogového okna Nápověda při psaní kódu konkrétních webů.

Přejmenovat struktury webového místa

Během přejmenování struktury webu mějte na paměti, že není možné použít název žádné ze tří výchozích struktur rozhraní webu, ani ji pojmenovat „custom“ (vlastní).

Přidat soubory nebo složky do struktury webového místa

Můžete přidat jakýkoliv soubor nebo složku, která souvisí s vaším rozhraním. Po zadání souborů nebo složek můžete určit přípony názvů souborů, které chcete prohledat. 

Prohledejte na webu přípony názvů souborů

Pomocí dialogového okna Najít přípony vyhledejte a upravte přípony názvů souborů, které jsou součástí struktury webu.