Pracovní plocha aplikace Dreamweaver

Úvodní nastavení aplikace Dreamweaver

Po instalaci Dreamweaver se při prvním spuštění aplikace na obrazovce zobrazí nabídka QuickStart, která vám položí tři otázky, jež vám pomohou přizpůsobit Workspace Dreamweaver podle vašich potřeb.

Na základě vašich odpovědí na tyto otázky se Dreamweaver otevře v Developer Workspace (minimální rozložení zaměřené na kód) nebo Standard Workspace (rozdělené rozložení s vizuálními nástroji a náhledem v aplikaci během kódování). 

Po volbě pracovní plochy vyberte barevný motiv, který vám bude nejpříjemnější. Poté můžete začít.

Vylepšená domovská obrazovka

Domovská obrazovka v Dreamweaver vám poskytuje rychlý přístup k naposledy použitým souborům, typům souborů a počátečním šablonám.

Podle stavu vašeho předplatného se na pracovní ploše také může zobrazovat obsah šitý na míru vašim požadavkům.

Dreamweaver zobrazí domovskou obrazovku při spuštění nebo když nejsou otevřeny žádné dokumenty.

Možnosti úvodního prostředí v aplikaci Dreamweaver

Klikněte na Učení pro okamžitý přístup k výukovým lekcím Dreamweaver z této obrazovky.

Začněte vytvářet dokumenty v Dreamweaver kliknutím na kterýkoli ze zobrazených typů souborů.

Otevřít jednu ze startovních šablon dodávaných s aplikací Dreamweaver. 

Klikněte na Domů pro návrat na úvodní obrazovku. 

Na úvodní obrazovce uvidíte soubory, na kterých jste v poslední době pracovali. Pokud nemáte žádné nedávné soubory, tato karta je prázdná.

Pomocí ikony Hledat v pravé horní části této obrazovky můžete využít také funkci hledání. Když zadáte vyhledávací dotaz, aplikace zobrazí vaše nedávné soubory, prostředky Creative Cloud, odkazy nápovědy a Stock obrázky, které odpovídají vyhledávacímu dotazu.

Po kliknutí na možnost Vytvořit nový můžete začít vytvářet nové soubory aplikace Dreamweaver. Pokud už ve svém systému nějaké soubory máte, klikněte na tlačítko Otevřít. Informace o vytváření a otevírání dokumentů v aplikaci Dreamweaver najdete v části Vytvoření a otevření souborů.

Pracovní plocha – přehled

Pracovní plocha aplikace Dreamweaver umožňuje zobrazovat dokumenty a vlastnosti objektů. Na pracovní ploše je také většina běžných operací umístěna v panelech nástrojů, takže můžete rychle provádět změny svých dokumentů.

Přehled elementů pracovní plochy

Pracovní plocha zahrnuje následující prvky:

Nachází se v horní části okna aplikace a obsahuje přepínač pracovní plochy, nabídky (pouze Windows) a další ovládací prvky aplikace.

Obsahuje tlačítka, která poskytují možnosti pro různá zobrazení okna Dokument (jako je zobrazení Design, Live view a zobrazení Kód).

Chcete-li zobrazit panel nástrojů Standardní, vyberte možnost Okno > Panely nástrojů > Standardní. Panel nástrojů obsahuje tlačítka pro běžné operace z nabídek Soubor a Upravit: Nový, Otevřít, Uložit, Uložit vše, Tisknout kód, Vyjmout, Kopírovat, Vložit, Zpět a Znovu.

Nachází se na levé straně okna aplikace a obsahuje tlačítka specifická pro zobrazení.

Zde se zobrazí aktuální dokument, jakmile jej vytvoříte, zobrazí se také jeho případné úpravy.

Umožňuje zobrazovat a měnit různé vlastnosti vybraného objektu nebo textu. Každý objekt má jiné vlastnosti.

Je umístěn ve Stavovém řádku v dolní části okna Dokument. Zobrazuje hierarchii tagů, které jsou spojeny s aktuálním výběrem. Kliknutím na libovolný tag v hierarchii vyberete tento tag a veškerý jeho obsah.

Pomáhají monitorovat a upravovat práci. Mezi příklady patří panel Vložit, panel CSS Designer a panel Soubory. Panel zobrazte poklepáním na jeho záložku.

Umožňuje odesílat a prohlížet soubory PSD ve službě Creative Cloud. Pomocí tohoto panelu můžete do dokumentu extrahovat CSS, text, obrázky, písma, barvy, přechody a rozměry ze svých PSD kompů.

Obsahuje tlačítka pro vkládání různých typů objektů, například obrazů, tabulek a elementů médií do dokumentu. Všechny objekty jsou kusem HTML kódu, které vám při vkládání umožňují nastavit různé atributy. Například kliknutím na tlačítko Tabulka na panelu Vložit můžete vložit tabulku. Pokud chcete, můžete objekty vkládat pomocí nabídky Vložit místo panelu Vložit.

Umožňuje spravovat soubory a složky, které jsou součástí webu aplikace Dreamweaver nebo se nachází na vzdáleném serveru. Panel Soubory vám rovněž umožňuje přístup ke všem souborům na lokálním disku. Další informace najdete v části Správa souborů a složek.

Umožňuje uložit a opakovaně používat výstřižky kódu na různých webových stránkách, různých webech a různých instalacích aplikace Dreamweaver (s použitím nastavení synchronizace). Další informace naleznete v tématu Opakované použití kódu v podobě výstřižků.

je CSS Property Inspector, který vám umožňuje "vizuálně" vytvářet CSS styly, soubory a nastavovat vlastnosti spolu s media queries.

Přehled oken dokumentu

V okně dokumentu se zobrazuje aktuální dokument. Pro přepínání zobrazení dokumentu použijte možnosti zobrazení na panelu nástrojů Document. 

Zobrazení můžete také přepnout pomocí možností Zobrazení v nabídce Zobrazení.

nabízí realističtější náhled na to, jak by dokument vypadal v prohlížeči, a umožňuje interakci s dokumentem snadnou jako v prohlížeči. Přímo v Živém zobrazení je možné měnit elementy HTML a okamžitě prohlížet náhled změn. Další informace o úpravách v Live View najdete v části Úprava HTML prvků v Live View.

je návrhové prostředí pro vizuální rozvržení stránky, vizuální úpravy a rychlý vývoj aplikací. V tomto zobrazení aplikace Dreamweaver zobrazuje plně upravitelnou vizuální reprezentaci dokumentu podobnou tomu, co byste viděli při zobrazení stránky v prohlížeči.

je prostředí pro ruční kódování pro psaní a úpravu HTML, JavaScript a jakéhokoli jiného typu kódu.

je rozdělená verze zobrazení Code, která vám umožňuje procházet a pracovat na různých částech dokumentu současně. 

umožňuje zobrazit současně zobrazení Code i Live pro stejný dokument v jednom okně.

umožňuje zobrazit současně zobrazení Code i Design pro stejný dokument v jednom okně.

zobrazuje skutečný kód, který prohlížeč používá k vykonání stránky, a může se dynamicky měnit při interakci se stránkou v zobrazení Live.

Když je okno Dokument maximalizované (výchozí zobrazení), na horním okraji okna Dokument se objeví záložky zobrazující názvy všech otevřených dokumentů. Dreamweaver zobrazuje hvězdičku za názvem souboru, pokud jste provedli změny, které jste ještě neuložili.

Aplikace Dreamweaver také zobrazí panel nástrojů Související soubory pod záložkou dokumentu (nebo pod pruhem titulků dokumentu, pokud dokumenty zobrazujete v samostatných oknech). Související dokumenty jsou dokumenty spojené s aktuálním souborem, například soubory CSS nebo JavaScript. Chcete-li otevřít jeden z těchto souvisejících souborů v okně Dokument, klikněte na jeho název souboru na panelu nástrojů Související soubory.

Přepínání mezi zobrazeními

Panel nástrojů dokumentu umožňuje rychlé přepínání mezi různými zobrazeními. Další informace najdete v části Přehled panelu nástrojů dokumentu.

Mezi zobrazeními můžete také přepínat pomocí následujících možností v nabídce Zobrazení:

• Pouze zobrazení Code: Vyberte Code
• Rozdělené zobrazení: Vyberte Split a vyberte některou z možností rozdělení
• Režim zobrazení: Přepínání mezi zobrazeními Live a Design
• Přepnout zobrazení: Pro přepnutí z jednoho zobrazení do druhého.

Stupňovité/dlaždicové zobrazení nebo změna pořadí u oken dokumentu

Pokud máte otevřeno mnoho dokumentů zároveň, můžete je zobrazit dlaždicově nebo stupňovitě.

Pro kaskádové uspořádání oken dokumentů: vyberte Window > Arrange > Cascade.

Pro uspořádání oken dokumentů vedle sebe:

• (Windows) Vyberte Window > Arrange > Tile Horizontally nebo Tile Vertically.
• (Macintosh) Vyberte Window > Arrange > Tile.

Při otevření jednoho nebo více souborů jsou okna Dokument označeny značkami. Chcete-li změnit pořadí okna Dokument označeného značkami, přetáhněte kartu okna do nového umístění ve skupině.

Změna velikosti okna dokumentu

Stavový řádek zobrazuje aktuální rozměry okna dokumentu v obrazových bodech. Pokud chcete stránku navrhnout tak, aby vypadala co nejlépe v určité velikosti, můžete nastavit okno dokumentu na některou z přednastavených velikostí, upravit tyto velikosti nebo vytvořit nové velikosti.

Pokud změníte velikost zobrazení v návrhu nebo v živém zobrazení, změní se pouze rozměry zobrazení. Velikost dokumentu zůstane nezměněna.

Kromě předem nastavených a vlastních velikostí budou v aplikaci Dreamweaver uvedeny také velikosti zadané v multimediálním dotazu. Pokud vyberete velikost odpovídající multimediálnímu dotazu, aplikace Dreamweaver použije k zobrazení stránky multimediální dotaz. Také můžete změnit orientaci stránky k zobrazení náhledu stránky v mobilních zařízeních, kde se rozložení stránky mění podle způsobu držení zařízení.

Pro změnu velikosti okna dokumentu vyberte jednu z velikostí z rozbalovací nabídky Window Size v dolní části okna dokumentu.

Zobrazená velikost okna vyjadřuje vnitřní rozměry okna prohlížeče bez okrajů; velikost monitoru nebo mobilních zařízení je uvedena vpravo.

Změna hodnot uvedených v rozbalovací nabídce Velikosti oken

Přidání nové velikosti do rozbalovací nabídky Velikost okna

Přehled panelu nástrojů Dokument

Panel nástrojů Dokument obsahuje tlačítka umožňující rychlé přepínání mezi různými zobrazeními dokumentu. Panel nástrojů také obsahuje některé běžné příkazy a volby související se zobrazením dokumentu a jeho přenosem mezi vzdálenými a lokálními webovými místy.

V panelu nástrojů Dokument se zobrazují následující volby:

Zobrazí v okně Dokument pouze zobrazení Kód.

Rozdělí okno Dokument na zobrazení kódu a živé zobrazení / zobrazení návrhu. Možnost zobrazení Design není k dispozici pro dokumenty s plynulou mřížkou.

Jedná se o interaktivní náhled, který přesně vykresluje projekty HTML5 a aktualizuje v reálném čase vámi provedené změny. Elementy HTML lze také měnit přímo v Živém zobrazení. Rozevírací seznam v blízkosti živého zobrazení umožňuje přecházet mezi živým zobrazením a zobrazením návrhu. Tento rozbalovací seznam není k dispozici u dokumentů s plynulou mřížkou.

Zobrazuje reprezentaci dokumentu ukazující, jak ho uživatel vidí ve webovém prohlížeči. 

Přehled panelu nástrojů Standardní

Chcete-li zobrazit panel nástrojů Standardní, vyberte možnost Okno > Panely nástrojů > Standardní. Panel nástrojů obsahuje tlačítka pro běžné operace z nabídek File a Edit: New, Open, Save, Save All, Print Code, Cut, Copy, Paste, Undo a Redo.

Přehled panelu nástrojů Navigace v prohlížeči

Panel nástrojů Navigace v prohlížeči se aktivuje v okně živého zobrazení (v případě, že jste to povolili výběrem možnosti Okno -> Panely nástrojů -> Standardní) a zobrazí adresu právě sledované stránky v okně Dokument. Okno Živé zobrazení slouží jako běžný prohlížeč, takže i když přejdete na stránku mimo váš místní web (například http://www.adobe.com), aplikace Dreamweaver načte tuto stránku v okně Dokument.

Ve výchozím nastavení nejsou odkazy v okně Živé zobrazení aktivní. Neaktivní odkazy umožňují vybrat nebo kliknout na text odkazu v okně Dokument, aniž byste přecházeli na danou stránku. Chcete-li otestovat odkazy v Live zobrazení, můžete povolit jednorázové klikání nebo nepřetržité klikání výběrem Zobrazit > Možnosti zobrazení Live > Následovat odkazy (Ctrl+kliknutí na odkaz) nebo Následovat odkazy nepřetržitě.

Přehled panelu nástrojů

Panel nástrojů je umístěn svisle na levé straně okna dokumentu a je viditelný v každém ze zobrazení, tedy v Živém zobrazení a zobrazení kódu/návrhu. Tlačítka na panelu nástrojů mají funkce specifické pro konkrétní zobrazení a viditelná jsou pouze tehdy, pokud je lze použít pro zobrazení, ve kterém právě pracujete. Pokud například pracujete v zobrazení Live, pak nejsou viditelné možnosti specifické pro zobrazení Code, jako je například Formátovat zdrojový kód. 

Přizpůsobit panel nástrojů

Můžete si tento panel nástrojů přizpůsobit podle svých potřeb přidáním možností nabídky nebo odebráním nežádoucích možností nabídky z panelu nástrojů.

Chcete-li panel nástrojů přizpůsobit, postupujte následovně:

Chcete-li obnovit výchozí tlačítka panelu nástrojů, klikněte na Obnovit výchozí v dialogovém okně Přizpůsobit panel nástrojů.

Přehled stavového řádku

Stavový řádek na dolním okraji okna Dokument poskytuje další informace o dokumentu, který vytváříte.

Selektor tagů

Zobrazuje hierarchii tagů, kterými je obalen aktuální výběr. Kliknutím na libovolný tag v hierarchii vyberete tento tag a veškerý jeho obsah. Kliknutím na text <body> vyberete celý základní obsah dokumentu. Chcete-li nastavit atributy class nebo ID pro tag v selektoru tagů, klikněte na tag pravým tlačítkem (Windows) nebo se stisknutou klávesou Ctrl (Macintosh) a vyberte třídu nebo identifikátor z kontextové nabídky.

Panel Výstup

Kliknutím na tuto ikonu zobrazíte panel Output, který zobrazuje chyby kódování ve vašem dokumentu.

Barevné zvýraznění kódu

(Dostupné pouze v zobrazení kódu)

Vyberte kterýkoli z programovacích jazyků z této rozbalovací nabídky, abyste změnili zvýraznění kódu tak, aby se zobrazoval podle programovacího jazyka.

Přepínání režimu vkládání a přepisování

(Dostupné pouze v zobrazení kódu)

Umožňuje přepínání mezi režimy Vložit a Přepsat při práci v zobrazení Code.

Číslo řádku a sloupce

(Dostupné pouze v zobrazení Code.)

Zobrazuje číslo řádku a číslo sloupce, kde se kurzor nachází.

Přehled inspektoru vlastností

Inspektor vlastností (Okno > Vlastnosti) vám umožňuje prozkoumat a upravit nejběžnější vlastnosti aktuálně vybraného prvku stránky, například textu nebo vloženého objektu.

Obsah Inspektoru vlastností se mění podle vybraného elementu. Pokud například vyberete na stránce obraz, Inspektor vlastností se změní a zobrazí vlastnosti pro obraz (jako je cesta souboru obrazu, šířka a výška obrazu, okraj kolem obrazu, pokud existuje, a podobně).

Inspektor Vlastnosti se ve výchozím nastavení nachází na dolním okraji pracovní plochy, ale můžete zrušit jeho ukotvení a učinit z něj plovoucí panel v pracovním prostoru.

Chcete-li použít nápovědu pro konkrétní Inspektor vlastností, klepněte na tlačítko Nápověda v pravém horním rohu inspektoru Vlastnosti nebo vyberte možnost Nápověda v nabídce Možnosti inspektoru Vlastnosti.

Zobrazení a změna vlastností elementu stránky

Kontextové nabídky

Kontextové nabídky nabízí pohodlný přístup k nejužitečnějším příkazům a vlastnostem souvisejícím s objektem nebo oknem, se kterým pracujete. Kontextové nabídky uvádějí pouze ty příkazy, které lze použít pro aktuální výběr.

Chcete-li otevřít kontextovou nabídku, klikněte pravým tlačítkem (Windows) nebo Ctrl+kliknutí (Mac) na sekci kódu v zobrazení Code nebo na objekt v zobrazení Live nebo Designer.

Změna pořadí panelů v aplikaci Dreamweaver

Můžete přizpůsobit umístění a vzhled všech panelů Dreamweaver podle svých požadavků.

Ukotvení panelů a zrušení ukotvení

• Chcete-li panel ukotvit, přetáhněte ho za jeho záložku do zásuvky, nad, pod nebo mezi ostatní panely.
• Chcete-li ukotvit skupinu panelů, přetáhněte ji za její titulní pruh (prázdný pruh nad záložkami) do zásuvky.
• Chcete-li odstranit panel nebo skupinu panelů, přetáhněte je mimo zásuvku za záložku nebo titulní pruh. Můžete ho přetáhnout do jiné zásuvky nebo ho můžete změnit na volně plovoucí.

Přemísťování panelů

Při přemísťování panelů uvidíte modře zvýrazněné cílové zóny přetažení, což jsou oblasti, kam můžete panel přemístit. Můžete například posunout panel nahoru nebo dolů v zásuvce jeho přetažením do úzké modré cílové zóny přetažení nad nebo pod jiným panelem. Pokud ho přetáhnete do oblasti, která není cílovou zónou přetažení, panel bude plovoucí na pracovní ploše.

• Chcete-li panel přesunout, přetáhněte ho za jeho záložku.
• Chcete-li přesunout skupinu panelů, přetáhněte ji za titulní pruh.

Přidání a odebrání panelů

Pokud odstraníte všechny panely ze zásuvky, tato zásuvka zmizí. Ukotvení můžete vytvořit přesunutím panelů na pravou stranu pracovního prostoru, dokud se nezobrazí zóna pro umístění panelu.

• Chcete-li panel odebrat, klepněte na něj pravým tlačítkem myši (Windows) nebo podržte stisknutou klávesu Control (Mac) a klepněte na jeho ouško a pak vyberte tlačítko Zavřít nebo zrušte výběr z nabídky Okno.
• Chcete-li přidat panel, vyberte ho z nabídky Okno a ukotvěte ho do libovolného místa.

Manipulace se skupinami panelů

• Chcete-li přesunout panel do skupiny, přetáhněte jeho záložku do zvýrazněné cílové zóny přetažení ve skupině.
• Chcete-li změnit uspořádání panelů ve skupině, přetáhněte záložku panelu na nové místo ve skupině.
• Chcete-li odstranit panel ze skupiny tak, aby byl plovoucí, přetáhněte panel za jeho záložku ven ze skupiny.
• Chcete-li přesunout skupinu, přetáhněte ji za titulní pruh (oblast nad záložkami).

Svázání plovoucích panelů

Když přetahujete panel mimo ukotvení, ale jinam než do cílové zóny přetažení, panel volně plave. Plovoucí panel lze umístit kdekoli na pracovní ploše. Plovoucí panely nebo skupiny panelů můžete svázat, aby se při přetažení horního titulního pruhu pohybovaly jako jeden celek.

• Chcete-li svázat plovoucí panely, přetáhněte panel za záložku do cílové zóny přetažení na dolním okraji jiného panelu.
• Chcete-li změnit pořadí ve svazku, přetáhněte panel nahoru nebo dolů za jeho záložku.
• Chcete-li odstranit panel nebo skupinu panelů ze svazku, aby byl volně plovoucí, přetáhněte ho ven za jeho záložku nebo titulní pruh.

Změna velikosti panelů

• Poklepejte na záložku, chcete-li minimalizovat nebo maximalizovat panel, skupinu panelů nebo svázané panely. Můžete také poklepat na oblast záložky (prázdný prostor vedle záložek).
• Chcete-li změnit velikost panelu, přetáhněte jeho libovolnou stranu. 

Sbalení a rozbalení ikon panelu

Panely můžete sbalit do ikon a omezit tím přeplnění pracovní plochy. V některých případech jsou panely sbaleny do ikon již ve výchozí pracovní ploše.

• Chcete-li sbalit nebo rozbalit všechny ikony panelů ve sloupci, klepněte na dvojitou šipku nahoře v ukotvení.
• Chcete-li rozbalit ikonu jednoho panelu, klepněte na ni.
• Chcete-li změnit ikony panelů tak, aby se zobrazovaly pouze ikony (a nikoli popisky), upravte šířku ukotvení, dokud text nezmizí. Chcete-li text ikony znovu zobrazit, nastavte ukotvení jako širší.
• Chcete-li sbalit rozbalený panel zpátky do ikony, klepněte na jeho záložku, ikonu nebo na dvojitou šipku v titulním pruhu panelu.

Vytvoření vlastních pracovních ploch

Svoji pracovní plochu můžete přizpůsobit přidáním nebo odebráním panelů podle vašich požadavků. Tyto změny pak můžete uložit do pracovního prostoru jeho uložením, abyste k němu měli později přístup z Přepínače pracovního prostoru na panelu nástrojů dokumentu.

Když uložíte stávající velikost a polohu panelů jako pojmenovanou pracovní plochu, můžete obnovit tuto pracovní plochu i v případě, že přesunete nebo zavřete některý panel.

Uložení vlastní pracovní plochy:

1. Zvolte Okno > Rozvržení pracovního prostoru > Nové pracovní prostředí.
2. Zadejte název pracovní plochy.

Pracovní plocha se uloží a bude viditelná v nabídce Přepínač pracovní plochy na panelu nástrojů dokumentu.

Odstranění vlastního pracovního prostoru:

V přepínači pracovní plochy na pruhu Aplikace vyberte položku Správa pracovních ploch a otevřete tak dialogové okno Spravovat pracovní plochy. Vyberte pracovní plochu a klikněte na Odstranit.

Zobrazení nebo přepínání mezi pracovními plochami

Vyberte pracovní plochu z přepínače pracovních ploch na panelu nástrojů dokumentu.

Přizpůsobení aplikace Dreamweaver ve víceuživatelských systémech

Dreamweaver si můžete přizpůsobit podle svých potřeb i ve víceuživatelském operačním systému, jako je Windows XP nebo Mac OS X.

Aplikace Dreamweaver zabrání tomu, aby přizpůsobená konfigurace některého uživatele ovlivnila přizpůsobenou konfiguraci kteréhokoli jiného uživatele. K dosažení výše uvedeného si aplikace Dreamweaver při prvním spuštění v jednom z rozpoznaných víceuživatelských systémů vytvoří kopie konfiguračních souborů. Tyto uživatelské konfigurační soubory se uloží do složky, která patří aktuálnímu uživateli.

Pokud Dreamweaver přeinstalujete nebo aktualizujete, Dreamweaver automaticky vytvoří záložní kopie existujících konfiguračních souborů uživatele, takže pokud jste tyto soubory ručně přizpůsobili, máte i nadále přístup ke změnám, které jste provedli.

Zobrazení dokumentů se záložkami (pouze v systému Mac)

V jednom okně dokumentu můžete zobrazit více dokumentů s použitím záložek pro identifikaci jednotlivých dokumentů. Můžete je také zobrazit jako součást plovoucí pracovní plochy, ve které se každý dokument zobrazí ve vlastním okně.

Otevření dokumentu v záložce v samostatném okně

Klepněte na záložku se stisknutou klávesou Ctrl a z kontextové nabídky vyberte volbu Přesunout do nového okna.

Změna výchozího nastavení dokumentů se záložkami

1. Vyberte volbu Dreamweaver > Předvolby a pak vyberte kategorii Všeobecné.
2. Vyberte nebo odznačte volbu Otevírat dokumenty v záložkách a klepněte na tlačítko OK.

Aplikace Dreamweaver při změně předvoleb nezmění zobrazení aktuálně otevřených dokumentů. Dokumenty otevřené po výběru nové předvolby se ale zobrazí podle této předvolby.

Úvodní obrazovka se objeví, když spustíte aplikaci Dreamweaver nebo když nejsou otevřené žádné dokumenty. Úvodní obrazovku můžete skrýt a pak později znovu zobrazit. Když je úvodní obrazovka skrytá a nejsou otevřené žádné dokumenty, okno Dokument je prázdné.

Běžné panely aplikace Dreamweaver

V aplikaci Dreamweaver budete pracovat s celou řadou panelů. Zde je popsáno několik běžně používaných panelů.

Přehled panelu Vložit

Panel Vložit (Okno > Vložit) obsahuje tlačítka pro vytváření a vkládání objektů, jako jsou tabulky, obrázky a odkazy. Tlačítka jsou uspořádána do několika kategorií, mezi kterými můžete přepínat výběrem požadované kategorie z rozbalovacího seznamu v horní části.

Některé kategorie mají tlačítka s rozbalovacími nabídkami. Když vyberete volbu z rozbalovací nabídky, stane se z ní výchozí akce tohoto tlačítka. Pokud například vyberete Line Break z rozbalovací nabídky tlačítka Character, při příštím kliknutí na tlačítko Character Dreamweaver vloží zalomení řádku.Pokaždé, když vyberete novou volbu z rozbalovací nabídky, výchozí akce tlačítka se změní.

Panel Vložit je uspořádán do následujících kategorií:

Umožňuje vytvářet a vkládat nejčastěji používané HTML prvky, jako jsou značky div a objekty, jako jsou obrázky a tabulky.

Obsahuje tlačítka pro vytváření formulářů a vkládání prvků formulářů, jako jsou vyhledávání, měsíc a heslo.

Umožňuje uložit dokument jako šablonu a označit konkrétní oblasti jako editovatelné, volitelné, opakované nebo editovatelné volitelné oblasti.

Obsahuje Bootstrap komponenty pro poskytování navigace, kontejnerů, rozbalovacích nabídek a dalších prvků, které můžete použít v responzivních projektech.

Obsahuje tlačítka pro vytváření webů, které používají jQuery Mobile.

Umožňuje vkládat prvky jQuery UI, jako jsou akordeon, posuvníky a tlačítka.

Umožňuje seskupit a uspořádat tlačítka z panelu Vložit, která nejčastěji používáte, v jednom společném místě.

Vložit objekt

Vložení objektu pomocí panelu Vložení:

Úprava předvoleb panelu Vložit

Přidání, odstranění a správa položek v kategorii Oblíbené v panelu Vložit

Přehled panelu Soubory

Pomocí panelu Soubory můžete zobrazit a spravovat soubory na svém webu Dreamweaver.

Panel Soubory vám umožní zobrazit soubory a složky, když jsou i když nejsou připojené k webovému místu aplikace Dreamweaver, a provádí standardní operace údržby, například otevírání a přesouvání souborů.

Panel Soubory také pomáhá spravovat a přenášet soubory ze vzdáleného serveru a na tento server. 

Další informace o všech možnostech panelu Soubory naleznete v části Správa souborů a složek.

CSS Designer

Panel CSS Designer (Windows > CSS Designer) je inspektor vlastností CSS, který umožňuje „vizuálně" vytvářet styly CSS, soubory a nastavovat vlastnosti spolu s dotazy na média.

Pomocí kombinace kláves Ctrl/Cmd + Z můžete vrátit a pomocí kláves Ctrl/Cmd + Y znovu provést všechny akce provedené v nástroji CSS Designer. Změny se automaticky projeví v Živém zobrazení i souvisejícím souboru CSS. Aby bylo patrné, že se související soubor změnil, jeho karta se na několik okamžiků rozsvítí (přibližně na 8 sekund).

Panel nástroje CSS Designer se skládá z následujících podoken a možností:

Vše Uvedeny jsou všechny prvky CSS, multimediální dotazy a selektory přiřazené v aktuálním dokumentu. Podle potřeby můžete filtrovat požadovaná pravidla CCS a měnit vlastnosti. Tento režim můžete také použít k zahájení vytváření selektorů nebo dotazů médií.

Tento režim se nepřizpůsobuje výběru. To znamená, že když vyberete prvek na stránce, přidružený selektor, dotaz média nebo CSS nejsou v nástroji CSS Designer zvýrazněny.

Současný Uvedeny jsou všechny vypočítané styly pro každý vybraný prvek v zobrazení návrhu nebo živém zobrazení aktuálního dokumentu. Když tento režim použijete pro soubor CSS v zobrazení Kód, zobrazí se všechny vlastnosti selektoru v aktivním výběru.

Tento režim se přizpůsobuje aktuálnímu obsahu. Tuto možnost použijte k úpravě vlastností selektorů přidružených k vybraným prvkům v dokumentu.

Zdroje Obsahuje všechny seznamy stylů CSS přiřazené k dokumentu. Pomocí tohoto podokna můžete vytvářet a připojit prvky CSS k dokumentu nebo určit jeho styl.

@Média Seznam všech multimediálních dotazů ze zdroje vybraného v podokně Zdroje. Pokud nevyberete konkrétní prvek CSS, toto podokno bude obsahovat všechny multimediální dotazy související s daným dokumentem.

Selektory Seznam všech selektorů ze zdroje vybraného v podokně Zdroje. Jestliže vyberete současně také multimediální dotaz, toto podokno bude obsahovat seznam selektorů pro daný multimediální dotaz. Pokud nevyberete konkrétní prvek CSS ani multimediální dotaz, toto podokno bude obsahovat všechny selektory dokumentu.

Když v podokně @Media vyberete možnost Globální, zobrazí se všechny selektory, které nejsou zahrnuty v dotazu na média vybraného zdroje.

Vlastnosti Vlastnosti, které můžete u daného selektoru měnit. Další informace naleznete v tématu Nastavení vlastností.

Pokud panely v nástroji CSS Designer sbalíte nebo rozbalíte, upravená velikost těchto panelů bude uložena po celou dobu trvání relace. Panely Zdroje a Média si zapamatují upravenou velikost až do její další úpravy.

Poznámka: Při výběru prvku stránky se v podokně Selektory vybere nejvhodnější selektor. Chcete-li zobrazit vlastnosti určitého selektoru, klikněte na název tohoto selektoru v podokně.

Budete-li chtít zobrazit všechny selektory, vyberte v podokně Zdroje možnost Všechny zdroje. Chcete-li zobrazit selektory, které nepatří k žádnému mediálnímu dotazu ve vybraném zdroji, klikněte na možnost Globální v podokně @Media.

Přehled vizuálních pomůcek

Dreamweaver poskytuje několik typů vizuálních průvodců, které vám pomohou navrhovat dokumenty a přibližně předvídat, jak budou vypadat v prohlížečích.Můžete provést kteroukoli z následujících akcí:

• Okamžitě přepínat okno Dokument do požadované velikosti, abyste viděli, jak se elementy vejdou na stránku.

• Používat obkreslovaný obraz jako pozadí stránky, které pomáhá duplikovat návrh vytvořený v ilustraci nebo aplikaci pro úpravu obrazů, jako je Adobe® Photoshop® nebo Adobe® Fireworks®.

• Používat pravítka a vodítka jako vizuální pomůcku pro přesné umísťování a nastavení velikosti elementů stránky.

• Používat mřížku pro přesné umísťování a nastavení velikosti absolutně polohovaných elementů (AP elementů).

  Značky mřížky na stránce vám pomohou zarovnat AP elementy, a když je zapnuté přitahování, AP elementy se při přemísťování nebo změně velikosti automaticky přitáhnou na nejbližší bod mřížky. (Ostatní objekty, například obrazy a odstavce, se na mřížku nepřitahují.) Přitahování funguje bez ohledu na to, zda je mřížka viditelná.

Zvětšení a zmenšení stránky

Aplikace Dreamweaver v okně dokumentu umožňuje zvětšit zobrazení, takže můžete kontrolovat přesnost obrazových bodů grafiky, snáze vybírat malé položky, navrhovat stránky s malým textem, navrhovat velké stránky a tak dále.

Chcete-li přiblížit nebo oddálit stránku, vyberte možnost Zobrazit > Možnosti zobrazení návrhu > Zvětšení a zvolte kteroukoli z dostupných možností zvětšení.

Vybírat můžete z řady možností zvětšení. Můžete také zvolit:

• Přizpůsobit výběru - Vyberte objekt nebo text a zvolte tuto možnost pro vyplnění okna dokumentu výběrem.
• Přizpůsobit vše - Vyplnit okno dokumentu celou stránkou
• Přizpůsobit šířce - Vyplnit okno dokumentu celou šířkou stránky

Nastavení všeobecných předvoleb aplikace Dreamweaver

Nastavení předvoleb Písma pro dokumenty v aplikaci Dreamweaver

Kódování dokumentu určuje jeho vzhled v prohlížeči. Předvolby písma aplikace Dreamweaver umožňují zobrazit dané kódování s použitím preferovaného písma a velikosti. Písma vybraná v dialogovém okně Předvolby písem však mají vliv pouze na způsob, jakým se zobrazují písma v aplikaci Dreamweaver, nemají vliv na způsob zobrazení dokumentu v prohlížeči návštěvníka. Chcete-li změnit způsob, jakým se písma zobrazují v prohlížeči, je nutné změnit text pomocí inspektoru Vlastnosti nebo pomocí pravidla CSS.

Pro informace o nastavení výchozího kódování pro nové dokumenty viz Vytváření a otevírání dokumentů.

Přizpůsobení barev zvýraznění aplikace Dreamweaver

Použijte předvolby zvýrazňování k přizpůsobení barev, které identifikují oblasti šablon, položky knihovny, značky třetích stran, prvky rozvržení a kód v aplikaci Dreamweaver.

Další podobné

• Otevřít související soubory
• Obecné informace o kódování v aplikaci Dreamweaver
• Nastavení předvoleb kódování
• Zobrazení a úpravy obsahu hlavičky
• Používání vizuálních pomůcek pro rozvržení
• Náhled stránek
• Práce se soubory na panelu Soubory