Úprava kódu v zobrazení Návrh

Naposledy aktualizováno 27. 4. 2021

V tomto tématu se naučíte upravovat kód v návrhovém zobrazení pomocí inspektoru vlastností Adobe Dreamweaver.

Dreamweaver umožňuje vizuálně vytvářet a upravovat webové stránky, aniž byste se museli starat o základní zdrojový kód, ale někdy možná budete potřebovat kód upravit pro větší kontrolu nebo k řešení problémů s webovou stránkou. Dreamweaver umožňuje upravovat část kódu při práci v návrhovém zobrazení.

Tato část je určena pro osoby, které dávají přednost práci v zobrazení Design, ale chtějí také rychlý přístup ke kódu.

V návrhovém zobrazení zvolte podřízené tagy

Pokud v zobrazení Design vyberete objekt který obsahuje podřízené značky—například HTML tabulku—můžete rychle vybrat první podřízenou značku daného objektu výběrem Upravit > Vybrat podřízený.

Poznámka

Tento příkaz je dostupný pouze v zobrazení Návrh.

Například značka <table> obvykle má podřízené značky <tr>. Pokud v selektoru značek vyberete značku <table>, můžete vybrat první řádek v tabulce výběrem Upravit > Vybrat podřízený. Dreamweaver vybere první značku <tr> v selektoru značek.Protože značka <tr> sama má podřízené značky, konkrétně značky <td>, výběr Upravit > Vybrat podřízený znovu vybere první buňku v tabulce.

Úpravy kódu pomocí inspektoru Vlastnosti

Můžete použít inspektor vlastností k prohlížení a upravování atributů textu nebo objektů na stránce.Vlastnosti zobrazené v Inspektoru vlastností obecně odpovídají atributům značek; změna vlastnosti v Inspektoru vlastností obecně má stejný účinek jako změna odpovídajícího atributu v zobrazení Code.

Poznámka

Inspektor značek a Inspektor vlastností umožňují zobrazovat a upravovat atributy značky. Inspektor značek umožňuje zobrazit a upravit všechny atributy přidružené k dané značce. Inspektor vlastností zobrazuje pouze nejběžnější atributy, ale poskytuje bohatší sadu ovládacích prvků pro změnu hodnot těchto atributů a umožňuje upravovat určité objekty (například sloupce tabulky), které neodpovídají specifickým značkám.

Klepněte do textu nebo vyberte objekt na stránce.

Inspektor vlastností pro text nebo objekt se zobrazí pod oknem dokumentu. Pokud inspektor vlastností není viditelný, vyberte Okno > Vlastnosti.

Provádění změn atributů v inspektoru Vlastnosti.

Úpravy CFML pomocí inspektoru Vlastnosti

Použijte Inspektor vlastností k prohlížení a úpravě značek ColdFusion v zobrazení Design.

V Inspektoru vlastností klikněte na tlačítko Atributy k úpravě atributů značky nebo k přidání nových.
Pokud značka obsahuje obsah mezi svými otevírací a uzavírací značkami, klikněte na tlačítko Obsah k úpravě obsahu.

Tlačítko Obsah se zobrazí pouze pokud vybraná značka není prázdná značka (to znamená, pokud má jak otevírací, tak uzavírací značku).

Pokud značka obsahuje podmíněný výraz, proveďte změny v poli Výraz.

Rychlý editor tagů – přehled

Editor rychlých značek použijete k rychlému prohlížení, vkládání a upravování HTML značek bez opuštění zobrazení Design.

Pokud do Editoru rychlých značek napíšete neplatný kód HTML, Dreamweaver se jej pokusí opravit vložením uzavíracích uvozovek a uzavíracích lomených závorek tam, kde je to potřeba.

K nastavení možností Editoru rychlých značek otevřete Editor rychlých značek stisknutím Control-T (Windows) nebo Command-T (Macintosh).

Rychlý editor tagů má tři režimy:

  • Režim Vkládání HTML se používá pro vložení nového HTML kódu.
  • Režim Úpravy tagu se používá k úpravě existujícího tagu.
  • Režim Vkládání HTML se používá pro vložení nového HTML kódu.

  • Režim Úpravy tagu se používá k úpravě existujícího tagu.

  • Režim Uzavřít do tagu se používá k uzavření aktuálního výběru do nového tagu.

Poznámka

Režim, ve kterém se Rychlý editor tagů otevře, záleží na aktuálním výběru v zobrazení Návrh.

Ve všech třech režimech jsou základní postupy pro užívání Rychlého editoru tagů stejné: otevřete editor, zadáte nebo upravíte tagy a atributy a pak editor zavřete.

Můžete se přepínat mezi jednotlivými režimy stisknutím kombinace kláves Ctrl+T (Windows) nebo Cmd+T (Macintosh), zatímco Rychlý editor tagů zůstává aktivní.  

Úpravy kódu pomocí Rychlého editoru tagů

Pomocí Rychlého editoru tagů (Úpravy > Rychlý editor tagů) můžete rychle vložit nebo upravit tagy HTML, aniž byste museli opustit zobrazení návrhu.

Vložení tagu HTML

V zobrazení Design klikněte na stránku a umístěte kurzor tam, kde chcete vložit kód.
Stiskněte kombinaci kláves Ctrl+T (Windows) nebo Apple+T (Macintosh).

Rychlý editor tagů se otevře v režimu Vkládání HTML.

Rychlý editor tagů v režimu Vkládání HTML
Rychlý editor tagů v režimu Vkládání HTML

Zadejte tag HTML a stiskněte klávesu Enter.

Značka je vložena do vašeho kódu spolu s odpovídající uzavírací značkou, pokud je to možné.

Stiskněte klávesu Esc, abyste editor opustili bez uložení změn.

Úpravy tagu HTML

Vyberte objekt v zobrazení Návrh.

Značku, kterou chcete upravit, můžete také vybrat ze selektoru značek ve spodní části okna Dokumentu.Další informace naleznete v části Úpravy kódu pomocí selektoru značek.

Stiskněte kombinaci kláves Ctrl+T (Windows) nebo Apple+T (Macintosh).

Rychlý editor tagů se otevře v režimu Úpravy tagu.

Zadejte nové atributy, upravte existující atributy nebo upravte název značky.
Stisknutím klávesy Tab se přesunete vpřed z jednoho atributu na další; stisknutím kláves Shift+Tab se přesunete zpět.
Poznámka

Ve výchozím Nastavení se změny použijí pro dokument, když stisknete klávesu Tab nebo Shift+Tab.

Pro zavření editoru rychlých značek a použití všech změn stiskněte klávesu Enter.
Chcete-li opustit editor bez provedení dalších změn, stiskněte klávesu Esc.

Zabalit aktuální výběr do značek HTML

Vyberte neformátovaný text nebo objekt v zobrazení Návrh.
Poznámka

Pokud vyberete text nebo objekt, který obsahuje počáteční nebo uzavírací HTML tag, otevře se Rychlý editor tagů v režimu Úprava tagů namísto režimu Uzavření do tagu.

Stiskněte klávesy Control+T (Windows) nebo Command+T (Macintosh) nebo klikněte na tlačítko Editor rychlých značek v Inspektoru vlastností.

Rychlý editor tagů se otevře v režimu Uzavření do tagu.

Zadejte jednu počáteční značku, například strong, a stiskněte klávesu Enter (Windows) nebo Return (Macintosh).

Značka se vloží na začátek aktuálního výběru a odpovídající koncová značka se vloží na konec.

Abyste opustili editor bez provedení změn, stiskněte klávesu Escape.

Použití nabídky tipů v Editoru rychlých značek

Editor rychlých značek obsahuje nabídku tipů pro atributy, která zobrazuje všechny platné atributy značky, kterou upravujete nebo vkládáte.

Můžete také zakázat nabídku tipů nebo upravit zpoždění před zobrazením nabídky v Editoru rychlých značek.

Pro zobrazení nabídky tipů se seznamem platných atributů pro značku se krátce pozastavte při úpravách názvu atributu v Editoru rychlých značek. Zobrazí se nabídka tipů se seznamem všech platných atributů pro značku, kterou upravujete.

Podobně pro zobrazení nabídky tipů se seznamem platných názvů značek se krátce pozastavte při zadávání nebo úpravách názvu značky v Editoru rychlých značek.

Poznámka

Předvolby nápovědy kódu Editoru rychlých značek jsou řízeny běžnými předvolbami nápovědy kódu. Další informace naleznete v části Nastavení předvoleb nápovědy kódu.

Proveďte jeden z následujících úkonů:
  • Začněte zadávat název tagu nebo atributu. Výběr v nabídce Nápověda kódu přeskočí na první položku, která začíná písmeny, které jste napsali.

  • Použijte klávesy se šipkami nahoru a dolů, abyste vybrali položku.

  • Použijte posuvník, abyste nalezli položku.

Stisknutím klávesy Enter vložíte vybranou položku nebo dvojitým kliknutím na položku ji vložíte.
Pro zavření nabídky tipů bez vložení položky stiskněte klávesu Escape nebo pokračujte v psaní.

Zakázání nabídky tipů nebo změna zpoždění před jejím zobrazením

Vyberte Upravit > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh) a vyberte Nápověda kódu.

Zobrazí se dialogové okno Předvolby rad při psaní kódu.

Pro zakázání nabídky tipů zrušte zaškrtnutí možnosti Povolit nápovědu kódu .

Úpravy kódu pomocí selektoru tagů

Můžete použít selektor tagů k tomu, abyste vybrali, upravili nebo odstranili tagy, aniž byste opustili zobrazení návrhu. Selektor tagů se nachází ve stavovém pruhu ve spodní části okna dokumentu a ukazuje posloupnosti tagů.

Úpravy nebo odstranění tagu

Klepněte do dokumentu.

Značky, které se vztahují k místu vložení, se zobrazí ve voliči značek.

Klikněte pravým tlačítkem myši (Windows) nebo při stisknuté klávese Control (Macintosh) na značku ve voliči značek.
Abyste tag upravili, vyberte z nabídky Upravit tag. Proveďte změny v Editoru rychlých značek.Další informace naleznete v části Úpravy kódu pomocí Editoru rychlých značek.
Abyste tag smazali, vyberte z nabídky Odstranit tag.

Vyberte objekt odpovídající značce

Klepněte do dokumentu.

Značky, které se vztahují k místu vložení, se zobrazí ve voliči značek.

Klepněte na tag v selektoru tagů.

Objekt zastoupený tagem se na stránce vybere.

Poznámka

Tuto techniku použijte k výběru jednotlivých řádků tabulky (značky tr) nebo buněk (značky td).

Psaní a úpravy skriptů v zobrazení Návrh

Se skripty JavaScript a VBScript na straně klienta můžete pracovat v zobrazeních Kód i Návrh následujícími způsoby:

  • Napište skript JavaScript nebo VBScript pro svou stránku, aniž byste opustili zobrazení Návrh.

  • Vytvořte odkaz v dokumentu na externí soubor skriptu, aniž byste opustili zobrazení Návrh.

  • Upravit skript, aniž byste opustili zobrazení Návrh.

    Před zahájením vyberte Zobrazení > Vizuální pomůcky > Neviditelné prvky, abyste se ujistili, že se na stránce zobrazí označení skriptů.

Napsání skriptu na straně klienta

Umístěte místo vložení tam, kde chcete skript.

Vyberte možnost Vložit > HTML > Skript.

V okně pro výběr souboru vyberte skript.

Poznámka

Nemusíte přidávat počáteční a uzavírací tagy pro skript.

Do dokumentu se vloží tag skriptu pro vybraný soubor.

Úpravy skriptu

Vyberte značku skriptu.
V inspektoru Vlastnosti klepněte na tlačítko Upravit.

Skript se objeví v dialogovém okně Vlastnosti skriptu.

Pokud jste vytvořili odkaz na externí soubor skriptu, soubor se otevře v zobrazení Kód, kde můžete provést úpravy.

Poznámka

Pokud se mezi značkami skriptu nachází kód, otevře se dialogové okno Vlastnosti skriptu, i když existuje také odkaz na externí soubor skriptu.

V poli Jazyk zadejte buď JavaScript, nebo VBScript jako jazyk skriptu.
V rozbalovací nabídce Typ zadejte typ skriptu, buď na straně klienta, nebo na straně serveru.
(Volitelné) V poli Zdroj zadejte externě propojený soubor skriptu.

Klikněte na ikonu složky nebo na tlačítko Procházet a vyberte soubor nebo zadejte cestu.

Upravte skript a klepněte na tlačítko OK.

Upravit skripty ASP na straně serveru v zobrazení Návrh

Použijte inspektor vlastností skriptu ASP k prověření a úpravě skriptů ASP na straně serveru v zobrazení Návrh.

V zobrazení Návrh vyberte vizuální ikonu značky server-language.
V inspektoru vlastností skriptu ASP klikněte na tlačítko Upravit.
Upravte skript ASP na straně serveru a klepněte na tlačítko OK.

Upravit skripty na stránce pomocí inspektoru vlastností

V inspektoru vlastností vyberte skriptovací jazyk z rozbalovací nabídky Jazyk nebo zadejte název jazyka do pole Jazyk.
Poznámka

Pokud používáte JavaScript a nejste si jisti verzí, vyberte JavaScript místo JavaScript1.1 nebo JavaScript1.2.

V rozbalovací nabídce Typ určete typ skriptu, buď na straně klienta nebo na straně serveru.

(Volitelně) V okně Zdroj určete externí připojený soubor skriptu. Klikněte na ikonu složky a vyberte soubor nebo zadejte cestu.

Klikněte na tlačítko Upravit, abyste změnili skript.

Používání chování JavaScriptu

K prvkům stránky můžete snadno připojit chování JavaScript (na straně klienta) použitím karty Chování v inspektoru Tag. Další informace najdete v části Použití vestavěného chování JavaScript v aplikaci Dreamweaver.