Naučte se vytvářet fragmenty kódu pomocí panelu Výstřižky v aplikaci Dreamweaver a znovu používat svůj kód na různých webech Dreamweaver.

Pokud zjistíte, že určité části kódu používáte stále dokola, můžete si jeho psaní urychlit použitím výstřižků kódu. Jednou kód napište a uložte jej jako výstřižek, na který můžete později dvakrát kliknout na panelu Výstřižky a vložit jej opakovaně na různých místech.

Výstřižky vytvořené pomocí 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í také používat jak v různých zařízení, tak i v různých verzích aplikace Dreamweaver.

Aplikace Dreamweaver se dodává s řadou výstřižků kódu. Můžete však také vytvářet a ukládat vlastní výstřižky kódu.

Jak výstřižky nejlépe využít?

Následující případy použití vám pomohou vysvětlit, kde je možné v rámci pracovních postupů výstřižky použít:

  • Ať už pracujete v organizaci, která dodržuje určité standardy designu, nebo jste nezávislý pracovník účastnící se více projektů, můžete použít výstřižky kódu k dosažení jednotného designu uložením společných částí kódu v podobě výstřižků a jejich následným vložením do kódu.
  • Výstřižky kódu jsou užitečné také v případě, kdy je vyžadováno, abyste definovali, udržovali a zajistili určité normy kódování.
  • Ruční psaní kódu pro responzivní elementy na webových stránkách může být časově náročné. V takových případech můžete použít vhodné výstřižky v sekci Bootstrap nebo Výstřižky responzivního návrhu na panelu Výstřižky (například výstřižek kódu pro responzivní tabulku). Jedním kliknutím tak můžete vložit téměř 20 řádků kódu pro vytvoření responzivní tabulky.
    Tabulku poté můžete podle potřeby upravit. Podle potřeby můžete sloupce nebo řádky sloučit, přidat je, upravit je podle vašich požadavků a nakonec vybrat kód a uložit jej jako nový výstřižek, který můžete opakovaně používat na všech ostatních vytvářených stránkách. Další informace o vytváření výstřižků kódu naleznete v tématu Vytvoření výstřižků.
  • Chování jazyka JavaScript, efekty CSS a styly CSS jsou další skvělí kandidáti pro opakované používání kódu.

Panel Výstřižky

V aplikaci Dreamweaver můžete spravovat výstřižky kódu za pomoci panelu Výstřižky (Okno > Výstřižky).

Panel s výstřižky funguje jako sbírka dílků kódu.

Panel Výstřižky v aplikaci Dreamweaver
Panel Výstřižky v aplikaci Dreamweaver

Možnosti na panelu Výstřižky

Panel Výstřižky vám umožňuje provádět následující.

Vložení výstřižků

Rozbalte složky, přejděte k výstřižku kódu a dvakrát na něj klikněte nebo kliknutím na ikonu Vložit vložte výstřižek na místo kurzoru. Pokud chcete vložit výstřižek kódu okolo existujícího textu, vyberte text a vložením výstřižku umístíte text do výstřižku kódu. Další informace naleznete v tématu Vložení výstřižků.

Vytvoření složek s výstřižky

Své výstřižky můžete spravovat přidáním do složek s vhodným popisným názvem. Když budete chtít vytvořit složku pro výstřižek, klikněte na ikonu Nová složka. Ve vybraném uzlu se vytvoří nová složka pro výstřižky. Chcete-li změnit umístění složky pro výstřižky, přetáhněte jej na požadované místo. Další informace naleznete v tématu Vytvoření složek s výstřižky

Vytvoření výstřižků

Předem vytvořené výstřižky můžete upravit a vytvořit tak své vlastní výstřižky kódu. Výstřižky můžete vytvořit také od začátku a uložit je na panelu Výstřižky pro pozdější použití. Další informace naleznete v tématu Vytvoření výstřižků.

Úprava výstřižků

Chcete-li upravit existující výstřižek, vyberte výstřižek a klikněte na ikonu Upravit. Další informace naleznete v tématu Úprava výstřižků.

Odstranění výstřižků

Výstřižky, které již nevyužíváte, můžete odstranit. Pokud chcete výstřižek odstranit, vyberte jej a klikněte na ikonu Odstranit.

Přejmenování výstřižků

Pokud budete chtít výstřižek přejmenovat, otevřete kontextovou nabídku tím, že na něj kliknete na pravým tlačítkem. Vyberte možnost Přejmenovat výstřižek a zadejte nový název výstřižku.

Přidání/úprava aktivátorů

Aktivátory umožňují vytvořit intuitivní krátké kódy, které můžete zadat namísto toho, abyste museli vyhledat konkrétní výstřižek na panelu Výstřižky a ty poté vkládat. Pokud jste definovali aktivátory, umístěte kurzor na požadované místo v kódu. Následně zadejte text aktivátoru a stiskněte klávesu Tab. Výstřižek kódu se vloží do kódu. Další informace naleznete v tématu Přidání aktivátoru a vložení výstřižků kódu pomocí aktivátorů.

Vložení výstřižků

Výstřižky kódu můžete vložit do kódu na místo, na kterém se nachází kurzor.

  1. Umístěte kurzor na místo, kam chcete vložit výstřižek kódu.

  2. V panelu Výstřižky (Okno > Výstřižky) dvakrát klikněte na výstřižek nebo klikněte na ikonu Vložit ve spodní části panelu Výstřižky.

    Můžete také kliknout pravým tlačítkem (systém Windows) nebo s klávesou Ctrl (systém Mac) na výstřižek a vybrat možnost Vložit z rozbalovací nabídky.

Poznámka:

Pokud jste definovali aktivátory, umístěte kurzor na požadované místo v kódu. Následně zadejte text aktivátoru a stiskněte klávesu Tab. Výstřižek kódu se vloží do kódu. Další informace naleznete v tématu Přidání aktivátoru a vložení výstřižků kódu pomocí aktivátorů.

Poznámka:

Výslednou podobu výstřižku kódu můžete zkontrolovat jeho vložením do zobrazení návrhu.

Vytvoření výstřižků

  1. V panelu Výstřižky klikněte na ikonu Nový výstřižek na spodním okraji panelu.

  2. Zadejte název výstřižku.

    Poznámka:

    Názvy výstřižků nesmí obsahovat znaky, které jsou neplatné v názvech souborů, například lomítka (/ nebo \), speciální znaky nebo uvozovky („ nebo “).

  3. (Volitelně) Zadejte textový popis výstřižku.

    Textový popis usnadní ostatním členům týmu rozpoznat a používat výstřižek.

    Pokud při vytváření výstřižek kódu doplníte o dostatečný popis, usnadní to jeho identifikaci při pozdějším použití
    Pokud při vytváření výstřižek kódu doplníte o dostatečný popis, usnadní to jeho identifikaci při pozdějším použití

    Poznámka:

    Podle potřeby můžete také vytvořit aktivátory pro vložení výstřižků do vašeho kódu. Další informace naleznete v tématu Přidání aktivátoru a vložení výstřižků kódu pomocí aktivátorů.

  4. Klikněte na tlačítko OK.

Úprava výstřižků

Pokud budete chtít provést změny ve stávajícím výstřižku, postupujte následovně:

  • Kliknutím pravým tlačítkem myši na výstřižek otevřete dialogové okno Upravit výstřižek.
  • Vyberte výstřižek a klikněte na ikonu Upravit výstřižek ve spodní části panelu.

Při úpravě výstřižku se stávající instance výstřižku v dokumentu nezmění.

V dialogu Výstřižek můžete upravit všechna pole, jako je Název, Popis, aktivátor nebo samotný kód.

Vytvoření složek s výstřižky

  1. V panelu Výstřižky klikněte na tlačítko Nová složka výstřižků na spodním okraji panelu.

  2. Přetáhněte výstřižky do nové složky nebo do jiných složek podle potřeby.

Přidání aktivátoru a vložení výstřižků kódu pomocí aktivátorů

Pomocí aktivátorů můžete rychle přidávat výstřižky kódu.

Nejdříve přiřaďte aktivátory k často používaným výstřižkům. Poté v zobrazení kódu zadejte text aktivátoru a stiskněte klávesu Tab, což způsobí, že aplikace Dreamweaver přidá výstřižek v místě kurzoru.

  1. Na panelu Výstřižky klikněte pravým tlačítkem (systém Windows) nebo s klávesou Ctrl (systém Mac) a vyberte možnost Přidat aktivátor.

    Výběr možnosti Přidat aktivátor na panelu Výstřižky
    Výběr možnosti Přidat aktivátor na panelu Výstřižky
  2. Do pole s aktivátorem zadejte požadovaný text.

    Na následujícím obrázku je k výstřižku kódu pro vytvoření odkazu mailto přiřazen aktivátor s názvem „mailto“, který usnadní jeho pozdější rozeznání. Vždy používejte jednoduché, krátké a intuitivní názvy aktivátorů.

    Zadání textu do pole Spouštěč
    Zadání textu do pole Spouštěč

    Poznámka:

    Aktivátory nesmí obsahovat žádné zvláštní znaky (mimo podtržítka). Kromě toho stejný aktivátor nelze používat pro dva různé výstřižky.

  3. Pokud chcete přidat výstřižky do svého kódu pomocí aktivátorů, zadejte v zobrazení kódu text aktivátoru a stisknutím klávesy Tab vložte výstřižek do kódu.

Postup distribuce výstřižků mezi různá zařízení

Funkce pro synchronizaci v cloudu u aplikace Dreamweaver umožňuje synchronizaci výstřižků u dvou různých počítačů.

Pomocí funkce synchronizace nastavení u aplikace Dreamweaver můžete přenést výstřižky vytvořené v jedné instanci aplikace Dreamweaver do jiného počítače s aplikací Dreamweaver (například aplikace Dreamweaver v kancelářském a domácím počítači). 

Postup synchronizace nastavení:

  1. Klikněte na možnost Úpravy > Předvolby.

  2. V sekci Synchronizace nastavení klikněte na možnost Synchronizovat nastavení.

    Nastavení budou uložena v cloudu. Při příštím spuštění aplikace Dreamweaver proběhne import těchto nastavení. Nastavení importované z cloudu přepíše místní nastavení.

    To způsobí synchronizaci vašich výstřižků a dalšího nastavení předvoleb.

    Další informace o synchronizaci nastavení naleznete v tématu Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud.

Poznámka:

Pokud synchronizaci nastavení provádíte často, můžete kliknutím na možnost Povolit automatickou synchronizaci v sekci Synchronizace nastavení na panelu Předvolby povolit automatickou synchronizaci. Veškeré změny v nastavení se automaticky ukládají v cloudu.

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