Využití funkcí našeptávání kódu a dokončování kódu aplikace Dreamweaver ke zkrácení času při psaní 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

Podporované jazyky a technologie

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 chcete zapnout popisy u našeptávání kódu, použijte volbu Zapnout tooltipy s popisem. 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.

Základní nápovědy při psaní kódu HTML
Základní nápovědy při psaní kódu HTML

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 při psaní kódu názvů atributů
Nápovědy při psaní kódu názvů atributů

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

Příklad statických nápověd pro hodnotu atributu
Příklad statických nápověd pro hodnotu atributu

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.

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

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.

Vložení datového zdroje CC knihoven do kódu
Vložení datového zdroje CC knihoven do kódu

Poznámka:

V nápovědách při psaní kódu lze zobrazit pouze 50 datových zdrojů CC knihoven. Tyto nápovědy se zobrazují v abecedním pořadí.

Poznámka:

Zahrnutí vzdálených datových zdrojů CC knihoven do kódu aplikace Dreamweaver není podporováno.

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 href
Dynamické nápovědy při psaní kódu pro href

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.

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

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

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

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.

Nápovědy při psaní kódu CSS @rule
Nápovědy při psaní kódu CSS @rule

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. 

Nápovědy při psaní kódu a nápověda pro vlastnosti CSS
Nápovědy při psaní kódu a nápověda pro vlastnosti CSS

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.

Nápovědy při psaní kódu související s barvami CSS
Nápovědy při psaní kódu související s barvami CSS

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

Vzorky barev z CC knihoven jsou označeny ikonou cloudu
Vzorky barev z CC knihoven jsou označeny ikonou cloudu

Poznámka:

V nápovědách při psaní kódu lze zobrazit pouze 50 datových zdrojů CC knihoven. Tyto nápovědy se zobrazují v abecedním pořadí.

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.

Našeptávání kódu pro pseudo-selektory
Našeptávání kódu pro pseudo-selektory

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í kódu pseudo-elementů
Našeptávání kódu pseudo-elementů

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.
Našeptávání kódu pro CSS vlastnost background
Našeptávání kódu pro CSS vlastnost background

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.

Tipy, které se zobrazí u vlastností CSS
Tipy, které se zobrazí u vlastností 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.

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

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. 

Poznámka:

Tato automatická aktualizace však funguje pouze v případě, že upravujete soubory JavaScript v aplikaci Dreamweaver.

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

Našeptávání kódu označující druh proměnné
Našeptávání kódu označující druh proměnné

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.

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

Příklad našeptávání kódu PHP objektu
Příklad našeptávání kódu PHP objektu

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: 

  1. Ukončete Dreamweaver.

  2. Otevřete soubor brackets.json z následujícího umístění pomocí textového editoru:

    • Win%appdata%\Adobe\Dreamweaver CC 2017\<locale>\Configuration\Brackets\
    • macOS~/Library/Application Support/Adobe/Dreamweaver CC 2017/<locale>/Configuration/Brackets/
  3. Klikněte na tlačítko Uložit strukturu v pravém horním rohu dialogového okna.

    V souboru JSON přidejte čárku po dvojici příjmení/hodnota.

    Přidejte následující řádek s vámi zvolenou časovou prodlevou (v milisekundách): "delayInPHPHint": <čas v milisekundách>. Například "delayInPHPHint": 200.

  4. Soubor uložte a spusťte aplikaci Dreamweaver.

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.

Poznámka:

Vytvořená nápověda při psaní kódu je určena konkrétně na web, který byl vybrán na panelu Soubory v aplikaci Dreamweaver. Pokud se má nápověda při psaní kódu zobrazit, musí být stránka, se kterou pracujete, umístěna na aktuálně vybraném webu.

  1. Vyberte Web > Možnosti webu > Nápovědy při psaní kódu konkrétních webů.

    Podle výchozího nastavení funkce Nápovědy při psaní kódu konkrétních webů prohledá váš web a určí, které rozhraní systému správy obsahu (CMS) používáte. Aplikace Dreamweaver ve výchozím nastavení podporuje tři rozhraní: Drupal, Joomla a Wordpress.

    Čtyři tlačítka napravo od rozbalovací nabídky Struktura umožňují importovat, ukládat nebo odstranit struktury rozhraní.

    Poznámka:

    Stávající výchozí struktury rozhraní nelze odstranit ani přejmenovat.

  2. V textovém poli podsložky určete podsložku, kde jsou uloženy soubory rozhraní. Kliknutím na ikonu složky vedle textového pole můžete umístění těchto souborů vyhledat.

    Aplikace Dreamweaver obsahuje zobrazení stromové struktury adresářů obsahující soubory rozhraní. Po zobrazení složek a souborů, které chcete prohledat, spustíte kontrolu kliknutím na tlačítko OK. Pokud chcete prohledání přizpůsobit, pokračujte podle následujících kroků.

  3. Kliknutím na tlačítko se symbolem (+) nad oknem Soubory vyberte soubor nebo složku, kterou chcete přidat mezi prohledávané položky. V dialogovém okně Přidat soubor/složku můžete zvolit názvy souborů s konkrétní příponou, které chcete přidat.

    Poznámka:

    Zadání konkrétní přípony názvu souborů umožňuje prohledávání urychlit.

  4. Pokud chcete odebrat soubory, které nechcete prohledat, označte je a klikněte na tlačítko se symbolem (-) nad oknem Soubory.

    Poznámka:

    Pokud je vybráno rozhraní Drupal nebo Joomla, zobrazí se v dialogovém okně Nápovědy při psaní kódu konkrétních webů dodatečná informace o umístění souborů ve složce s konfigurací aplikace Dreamweaver.

    Neodstraňujte je. Jsou zapotřebí při prácí s těmito rozhraními.

  5. Pokud chcete přizpůsobit, jak funkce Nápověda při psaní kódu konkrétních webů zachází s konkrétním souborem nebo složkou, vyberte ji ze seznamu a pokračujte jedním z následujících způsobů:

    • Výběrem možnosti Zkontrolovat tuto složku ji přidáte mezi prohledávané položky.
    • Výběrem možnosti Opakovatelný přidáte všechny soubory a složky ve vybraném adresáři.
    • Kliknutím na tlačítko Přípony otevřete dialogové okno Najít přípony, ve kterém můžete určit přípony názvů souborů, které budou při prohledávání konkrétního souboru nebo složky přidány.

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

  1. Ukončete Dreamweaver.

  2. Vytvořte požadovanou strukturu souborů a složek přidáním nebo odstraněním souborů a složek podle potřeby.

  3. Zadejte název struktury webu a klikněte na tlačítko Uložit.

Poznámka:

Pokud je zadaný název již používán, aplikace Dreamweaver zobrazí výzvu k zadání jiného názvu nebo potvrzení přepsání struktury se stejným názvem. Výchozí struktury rozhraní přepsat nelze.

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

  1. Otevřete strukturu, kterou chcete přejmenovat.

  2. Klikněte na tlačítko Přejmenovat strukturu v pravém horním rohu dialogového okna.

  3. Zadejte nový název struktury a klikněte na tlačítko Přejmenovat.

Poznámka:

Pokud je zadaný název již používán, aplikace Dreamweaver zobrazí výzvu k zadání jiného názvu nebo potvrzení přepsání struktury se stejným názvem. Výchozí struktury rozhraní přepsat nelze.

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. 

  1. Kliknutím na tlačítko se symbolem (+) nad oknem Soubory otevřete dialogové okno Přidat soubor/složku.

  2. V textovém poli Přidat soubor/složku zadejte umístění souboru nebo složky, kterou chcete přidat. Můžete také kliknout na ikonu složky vedle textového pole a umístění souboru nebo složky vyhledat.

  3. Kliknutím na tlačítko se symbolem (+) nad oknem Přípony vyberte přípony názvů souborů, které chcete prohledat.

    Poznámka:

    Zadání konkrétní přípony názvu souborů umožňuje prohledávání urychlit.

  4. Klikněte na tlačítko Přidat.

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.

  1. V dialogovém okně Nápověda při psaní kódu konkrétních webů klikněte na tlačítko Přípony.

    Dialogové okno Najít přípony obsahuje seznam stávajících přípon, které je možné prohledat.

  2. Pokud chcete do seznamu přidat další přípony, klikněte na tlačítko se symbolem (+) nad oknem Přípony.

  3. Pokud chcete ze seznamu příponu odebrat, klikněte na tlačítko se symbolem (-).

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online