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 zdrojový kód, ale někdy je vhodné s kódem pracovat, neboť získáte větší kontrolu nad výsledkem a můžete řešit případně problémy s webovou stránkou. Dreamweaver umožňuje upravovat kód při práci v zobrazení Návrh.

Tato oblast je navržena pro lidi, kteří upřednostňují práci v zobrazení Návrh, ale kteří zároveň chtějí rychlý přístup ke kódu.

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

Pokud v zobrazení Návrh vyberete objekt, který obsahuje dceřiné tagy – například tabulku HTML – můžete rychle vybrat první dceřiný tag tohoto objektu tím, že vyberete volbu Úpravy > Vybrat potomka.

Poznámka:

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

Například tag <table> má normálně dceřiné tagy <tr>. Pokud vyberete tag <table> v selektoru tagů, můžete vybrat první řadu v tabulce tak, že vyberete volbu Úpravy > Vybrat potomka. Aplikace Dreamweaver vybere první tag < tr > v selektoru značek. Protože tag <tr> sám o sobě má dceřiné tagy, konkrétně tagy <td>, opětovný výběr Úpravy > Vybrat potomka vybere první buňku v tabulce.

Úpravy kódu pomocí inspektoru Vlastnosti

Můžete použít inspektor Vlastnosti k tomu, abyste si mohli prohlédnout a upravit atributy textu nebo atributy objektů na vaší stránce. Vlastnosti zobrazené v inspektoru Vlastnosti obecně odpovídají atributům tagů; změna vlastností v inspektoru Vlastnosti má obecně stejný efekt jako změna odpovídajících atributů v zobrazení Kód.

Poznámka:

Jak Inspektor tagů, tak inspektor Vlastnosti umožňují zobrazit a upravovat atributy tagu. Inspektor tagů umožňuje zobrazit a upravovat každý atribut spojený s daným tagem. Inspektor Vlastnosti zobrazuje pouze nejběžnější atributy, ale poskytne vám bohatší sadu ovladačů pro změnu hodnot těchto atributů a umožní vám upravovat určité objekty (jako například sloupce tabulky), které odpovídají konkrétním tagům.

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

    Pod oknem dokumentu se objeví inspektor Vlastnosti textu nebo objektu. Pokud není inspektor Vlastnosti vidět, vyberte volbu Okna > Vlastnosti.

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

Úpravy CFML pomocí inspektoru Vlastnosti

Abyste si mohli prohlédnout a změnit značky ColdFusion v zobrazení Návrh, použijte inspektor Vlastnosti.

  1. V inspektoru Vlastnosti klepněte na tlačítko Atributy, abyste upravili atributy tagů nebo přidali nové.
  2. Pokud tag má mezi svým počátečním a uzavíracím tagem obsah, klepněte na tlačítko Obsah, abyste mohli obsah upravit.

    Tlačítko Obsah se objeví pouze v případě, pokud není zvolený tag tagem prázdným (to znamená, pokud má jak počáteční, tak uzavírací tag).

  3. Pokud tag obsahuje podmíněný výraz, změňte ho v poli Výraz.

Rychlý editor tagů – přehled

Abyste si mohli rychle prohlédnout, vložit nebo upravit tagy HTML, aniž byste museli opustit zobrazení Návrh, použijte Rychlý editor tagů.

Pokud zadáte v Rychlém editoru tagů neplatný kód HTML, Dreamweaver se pokusí kód opravit; doplní podle potřeby koncové uvozovky a hranaté závorky.

Abyste nastavili volby Rychlého editoru tagů, otevřete Rychlý editoru tagů tak, že stisknete kombinaci kláves Ctrl-T (Windows) nebo Apple-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

  1. V zobrazení Návrh klepněte do stránky, abyste umístili textový kurzor tam, kam chcete kód vložit.
  2. 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

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

    Tag se vloží do kódu, společně s odpovídajícím uzavíracím tagem, pokud je to potřeba.

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

Úpravy tagu HTML

  1. Vyberte objekt v zobrazení Návrh.

    Můžete také vybrat tag, který chcete upravit, v selektoru tagů ve spodní části okna dokumentu. Další informace viz část Úpravy kódu pomocí selektoru tagů.

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

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

  3. Zadejte nové atributy, upravte existující atributy nebo upravte název tagu.
  4. Stiskněte tabulátor, abyste se posunuli dopředu z jednoho atributu na druhý; stiskněte kombinaci kláves Shift+tabulátor, abyste se vrátili zpět.

    Poznámka:

    Standardně se provedené změny aplikují v dokumentu ve chvíli, kdy stisknete tabulátor nebo kombinaci kláves Shift+tabulátor.

  5. Chcete-li zavřít Rychlý editor tagů a aplikovat všechny změny, stiskněte klávesu Enter.
  6. Chcete-li opustit editor bez provedení dalších změn, stiskněte klávesu Esc.

Uzavření aktuálního výběru do tagu HTML

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

  2. Stiskněte kombinaci kláves Ctrl+T (Windows) nebo Apple+T (Macintosh) nebo klepněte na tlačítko Rychlý editor tagů v inspektoru Vlastnosti.

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

  3. Zadejte jednoduchý počáteční tag, například strong, a stiskněte klávesu Enter (Windows) nebo Return (Macintosh).

    Tag se vloží na začátek aktuálního výběru a odpovídající uzavírací tag se vloží na konec.

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

Používání nabídky rad v Rychlém editoru tagů

Rychlý editor tagů zahrnuje nabídku rad k atributům, která obsahuje všechny platné atributy tagu, který upravujete nebo vkládáte.

Nabídku rad můžete také vypnout nebo změnit zpoždění, se kterým se nabídka v Rychlém editoru tagů rozbaluje.

Abyste viděli nabídku rad, která obsahuje platné atributy tagu, chvíli při úpravě názvu atributu v Rychlém editoru tagů počkejte. Objeví se nabídka rad, obsahující všechny platné atributy tagu, který právě upravujete.

Podobně, abyste viděli nabídku rad platných názvů tagu, počkejte chvíli při zadávání nebo úpravě názvu atributu v Rychlém editoru tagů.

Poznámka:

Předvolby rad při psaní kódu Rychlého editoru tagů se řídí normálními předvolbami rad při psaní kódu. Další informace viz část Nastavení předvoleb rad při psaní kódu.

  1. 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 Rady při psaní kódu skočí na první položku, která začíná písmeny, které jste zadali.

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

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

  2. Položku vložíte stisknutím klávesy Enter nebo poklepáním na ni.
  3. Abyste zavřeli nabídku rad bez vložení položky, stiskněte klávesu Escape, nebo pokračujte v psaní.

Vypnutí nabídky rad nebo změna zpoždění zobrazení

  1. Vyberte Úpravy > Předvolby (systém Windows) nebo Dreamweaver > Předvolby (systém Macintosh) a zvolte Tipy pro kód.

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

  2. Abyste vypnuli nabídku rad, odznačte volbu Povolit rady při psaní 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

  1. Klepněte do dokumentu.

    Tagy, které se vztahují k pozici, kde je umístěný kurzor, se objeví v selektoru tagů.

  2. Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) na tag v selektoru tagů.
  3. Abyste tag upravili, vyberte z nabídky Upravit tag. Proveďte změny v Rychlém editoru tagů. Další informace viz část Úpravy kódu pomocí Rychlého editoru tagů.
  4. Abyste tag smazali, vyberte z nabídky Odstranit tag.

Výběr objektu odpovídajícího tagu

  1. Klepněte do dokumentu.

    Tagy, které se vztahují k pozici, kde je umístěný kurzor, se objeví v selektoru tagů.

  2. 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ů (tagy tr) nebo buněk (tagy td) tabulky.

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

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

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

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

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

    Dříve než začnete, vyberte volbu Zobrazení > Vizuální pomůcky > Neviditelné elementy, abyste se ujistili, že značky skriptu se na stránce objeví.

Napsání skriptu na straně klienta

  1. Umístěte kurzor tam, kde chcete mít skript.
  2. Vyberte možnost Vložit > HTML > Skript.

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

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

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

    Pokud jste ho připojili z externího souboru, otevře se tento soubor v zobrazení Kód, kde můžete provádět úpravy.

    Poznámka:

    Pokud je mezi tagy skriptů kód, dialogové okno Vlastnosti skriptu se otevře, i když je tam také odkaz na externí soubor skriptu.

  3. V okně Jazyk určete buď volbu JavaScript, nebo VBScript jako jazyk skriptu.
  4. V rozbalovací nabídce Typ určete typ skriptu, buď skript na straně klienta, nebo na straně serveru.
  5. (Volitelně) V okně Zdroj určete externí připojený soubor skriptu.

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

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

Úpravy skriptů ASP na straně serveru v zobrazení Návrh

Použijte inspektor Vlastnosti skriptu ASP, abyste si mohli prohlédnout a změnit skripty ASP na straně serveru v zobrazení Návrh.

  1. V zobrazení Návrh vyberte vizuální ikonu tagu jazyka serveru.
  2. V inspektoru Vlastnosti skriptu ASP klepněte na tlačítko Upravit.
  3. Upravte skript ASP na straně serveru a klepněte na tlačítko OK.

Úpravy skriptů na stránce pomocí inspektoru Vlastnosti

  1. V inspektoru Vlastnosti vyberte skriptovací jazyk z rozbalovací nabídky Jazyk nebo zadejte název jazyka v poli Jazyk.

    Poznámka:

    Pokud používáte jazyk JavaScript a nejste si jisti verzí, vyberte raději volbu JavaScript než volbu JavaScript1.1 nebo JavaScript1.2.

  2. V rozbalovací nabídce Typ určete typ skriptu, buď skript na straně klienta, nebo na straně serveru.
  3. (Volitelně) V okně Zdroj určete externí připojený soubor skriptu. Klikněte na ikonu složky a vyberte soubor nebo zadejte cestu.

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

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

Můžete snadno připojit chování jazyka JavaScript (na straně klienta) k elementům stránky, když použijete záložku Chování v Inspektoru tagů. Další informace viz část Aplikace vestavěných chování JavaScriptu aplikace Dreamweaver.

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