Spusťte aplikaci Dreamweaver provedením následujícího příkazu:
- Windows: <installation_path> -enableRemoteDebugging
- Mac: open <installation_path> --args -enableRemoteDebugging
Poznámka: před parametr args zadejte dvě pomlčky.
Součástí nejnovějších aktualizací aplikace Dreamweaver CC verze 2014 je integrace ve funkci Extrakt, která usnadňuje sestavení webů pro mobilní zařízení i stolní počítače z kompozice souboru PSD přímo v aplikaci Dreamweaver. Nová živá vodítka vám usnadní přesné vkládání a změnu polohy elementů HTML a rozšířené funkce pro úpravu v Živém zobrazení umožňují provádět změny v reálném čase.
Tento článek poskytuje popis uvedených nových funkcí i dalších rozšíření a obsahuje odkazy na zdroje další nápovědy a informací.
Začínáte s aplikací Dreamweaver? Používáte aplikaci Dreamweaver a chcete s ní umět víc? Chcete vědět, co nového přináší aktuální verze oproti té předchozí? Ať už jste začátečník nebo zkušený uživatel, nebo novou verzi aplikace Dreamweaver jen zkoušíte, všechny důležité výukové zdroje nyní můžete mít na dosah z úvodní obrazovky.
Nejnovější aktualizace aplikace Dreamweaver verze CC 2014 poskytuje rychlý přístup k videím (včetně nových funkcí), praktickým výukovým lekcím, tipům, technikám atd. na úvodní obrazovce.
Nová úvodní obrazovka je dostupná pouze pro uživatele v anglicky mluvících oblastech. Uživatelům v jiných oblastech se v aplikaci Dreamweaver CC 2014.1 zobrazí úvodní obrazovka a průvodce novými funkcemi.
V živém zobrazení se po přetažení obrázků z panelu Extrakt zobrazí živá vodítka a ikona rychlého zobrazení elementu. Tyto vizuální pomůcky pomáhají s rychlým a přesným umístěním obrázku na požadované místo.
Elementy nyní můžete v živém zobrazení přesunout přetažením názvu přiřazeného tagu. Po přesunutí kurzoru myši nad název tagu se kurzor změní na ruku a element je možné přetáhnout myší. Při přetahování elementu znázorňují vizuálně živá vodítka umístění elementu po přetažení.
Text, obrázky a další elementy v tagu teď můžete vybírat kliknutím a přetažením kdekoli v rámci tagu (ohraničovací rámeček). Výběr pomocí rámečku usnadňuje vybrání několika elementů v tagu.
Při výběru rámečkem v živém zobrazení jsou podporovány pouze ty operace, které podporuje prohlížeč.
V zobrazení elementu se zobrazuje text rady „Třída/ID“, aby bylo zřejmé, že je možné zadat třídu nebo ID.
A navíc změny provedené v zobrazení elementu lze uložit kliknutím na tlačítko „+“. Stejně jako v předchozích verzích aplikace Dreamweaver můžete uložit změny také stisknutím klávesy Enter nebo Return.
Do zobrazení kódu bylo přidáno deset nových barevných motivů:
Další informace o motivech pro zobrazení kódu najdete zde: Nastavení barevného motivu pro zobrazení kódu.
Tato aktualizace obsahuje několik změn uživatelského rozhraní nástroje CSS Designer a změnu ve výchozím nastavení pole Zobrazit sadu.
Při spuštění je podle výchozího nastavení zaškrtávací pole Zobr. sadu vybrané a změny provedené na tomto prvku zůstanou platné i v dalších relacích aplikace Dreamweaver. Pokud tedy například zrušíte vybrání pole, v příští relaci aplikace Dreamweaver bude toto nastavení zachováno a pole nebude zaškrtnuté.
V uživatelském rozhraní došlo k následujícím změnám:
Nyní můžete vzdáleně ladit dokumenty aplikace Dreamweaver otevřené v živém zobrazení pomocí nástrojů Google Chrome DevTools. V prohlížeči Google Chrome můžete použít port 5471, který můžete aktivovat provedením následujících kroků:
Spusťte aplikaci Dreamweaver provedením následujícího příkazu:
Poznámka: před parametr args zadejte dvě pomlčky.
V otevřeném dialogovém okně, které informuje o tom, že je port 5471 aktivován pro potřeby ladění, klikněte na tlačítko OK.
Spustí se aplikace Dreamweaver.
V živém zobrazení otevřete dokumenty, které chcete ladit.
Chcete-li zahájit ladění, otevřete prohlížeč Google Chrome a přejděte na adresu localhost:5471. Otevře se seznam odkazů na všechny dokumenty otevřené v aplikaci Dreamweaver.
Poznámka: vzhledem k tomu, že nová úvodní obrazovka a panel Extrakt používají framework Chromium Embedded Framework (CEF), zobrazí se také položky související s těmito funkcemi.
Teď již můžete pomocí nástrojů Google Chrome DevTools ladit požadované dokumenty.
Chcete-li zastavit ladění a otevřít aplikaci Dreamweaver v normálním režimu, ukončete aplikaci Dreamweaver a znovu ji spusťte.
Když nově pomocí klávesové zkratky obnovíte předvolby, aplikace Dreamweaver vytvoří zálohu předvoleb ve složce Adobe Dreamweaver CC 2014.1 Backups. Tato složka se v systémech Windows a Mac automaticky vytvoří ve stejné složce jako složka s původními předvolbami aplikace Dreamweaver.
Úplná cesta ke složce se zálohami se zobrazí v dialogovém okně Obnovit předvolby.
Podle výchozího nastavení se již dynamické dokumenty, např. PHP, ASP a CFM, nezobrazují v zobrazení kódu. Otevírají se ve stejném režimu (Kód / Živé / Rozdělit), v jakém byl poslední zavřený dokument nebo poslední aktivní dokument.
Integrace Funkce Extrakt v aplikaci Dreamweaver umožňuje vývojářům a webovým návrhářům využívat informace o návrhu a získávat datové zdroje optimalizované pro web přímo v rámci prostředí pro psaní kódu. Funkce Extrakt poskytuje úplné soběstačné řešení pro získávání informací o stylu a datových zdrojů z kompozice souboru PSD a omezuje potřebu neustálého přecházení mezi aplikací Photoshop a Dreamweaver.
Prostřednictvím panelu Extrakt v aplikaci Dreamweaver můžete získávat prvky CSS, obrázky, písma, barvy, přechody a míry přímo pro svůj web. Mimo tyto primární možnosti funkce Extrakt poskytuje aplikace Dreamweaver následující jedinečné vlastnosti:
Výchozí pracovní plocha v aplikaci Dreamweaver (s názvem Extract) nabízí v levé části panel Extract umožňující rychlé zahájení práce. Po prvním spuštění aplikace Dreamweaver se v rámci panelu Extrakt spustí jednoduchá výuková lekce, která vám představí pracovní postupy funkce Extrakt. K funkci Extrakt můžete přejít kliknutím na tlačítko Začínáme.
Další informace o pracovních postupech pro funkci Extrakt v aplikaci Dreamweaver najdete v části Integrace aplikace Dreamweaver s funkcí Extrakt.
Nově je k dispozici také 64bitová verze aplikace Dreamweaver, která podporuje všechny funkce dostupné v 32bitové verzi. Díky této novince můžete stahovat z aplikací Adobe Creative Cloud následující sestavení Dreamweaver:
OS |
Výchozí umístění instalace |
Složka pro předvolby aplikace |
---|---|---|
Windows (32bitový) |
C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Windows (64bitový) |
C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 |
%appdata%/Adobe/Adobe Dreamweaver CC 2014.1 |
Mac (64bitový) |
/Applications/Adobe Dreamweaver CC 2014.1 |
~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1 |
Ujistěte se, že máte v počítači nainstalován 64bitový operační systém:
Při ověření 64bitového systému postupujte podle pokynů uvedených v následujících článcích:
Stáhněte 64bitovou verzi aplikace Dreamweaver ze služby Creative Cloud a nainstalujte ji.
Živá vodítka poskytují pro následující scénáře v živém zobrazení vizuální kontrolu nad možnými polohami, ve kterých můžete vložit element:
Dokumenty s plovoucí mřížkou živá vodítka nepodporují.
Živá vodítka se zobrazí v případě, že před dokončením přetažení elementu umístíte kurzor nad jednotlivé elementy na stránce. Zobrazit se mohou nad, pod, nalevo nebo napravo od elementu, nad kterým máte umístěný kurzor.
Rychlé zobrazení elementu můžete společně s živými vodítky používat k přesnějšímu vložení elementu HTML do struktury dokumentu.
Pokud během přetahování elementu na okamžik zastavíte, zobrazí se ikona Rychlého zobrazení elementu (</>). Jestliže umístíte kurzor nad tuto ikonu, otevře se Rychlé zobrazení elementu, do kterého můžete element přesunout.
Nově můžete elementy v živém zobrazení vyjmout, kopírovat, vložit nebo odstranit pomocí kontextové nabídky, která se otevře po kliknutí pravým tlačítkem. V kontextové nabídce živého zobrazení můžete elementy duplikovat nebo vybrat nadřazený/podřízený tag.
Podle potřeby můžete použít také klávesové zkratky pro živé zobrazení (např. Ctrl + x, Ctrl + c, Ctrl + v, Ctrl + d nebo Delete pro systém Windows).
Nejprve v živém zobrazení označte element, a otevřete tak zobrazení elementu. Následně klikněte pravým tlačítkem na oblast tagu a prohlédněte si výše uvedené možnosti v kontextové nabídce. Možnosti jsou platné na úrovni tagu.
Nově můžete kromě použití selektorů v elementu také vytvářet selektory ve zvoleném zdroji CSS a přiřadit multimediální dotaz pomocí Zobrazení elementu. Pokud zadáte selektor, který v žádném seznam stylů neexistuje, a stisknete klávesu Enter, objeví se v Zobrazení elementu možnost zvolit zdroj CSS a multimediální dotaz.
Jestli nebudete chtít zvolit zdroj CSS ani multimediální dotaz, stisknutím klávesy Esc můžete tyto možnosti zrušit.
Podle potřeby můžete nově také kliknout na použitý selektor a přejít k odpovídajícímu kódu (možnost Přejít ke kódu) nebo vložit zkopírované styly (možnost Vložit styly).
Pokud stejný selektor přidáte do několika multimediálních dotazů, možnost Přejít ke kódu bude obsahovat dílčí možnosti. Dílčí možnosti v nabídce Vložit styly naleznete i v případě, že zkopírované selektory jsou pseudoselektory nebo složenými selektory.
Aplikace Dreamweaver nově podporuje přesouvání elementů v živém zobrazení (na úrovni tagů). V živém zobrazení můžete zvolit element a přetáhnout jej na libovolné jiné místo.
Klikněte na element, který chcete přesunout, a po otevření Zobrazení elementu (modré pole okolo elementu) element přetáhněte. Jakmile s přetahováním začnete, kurzor myši se změní, a upozorní vás tak na skutečnost, že s elementem můžete pohybovat.
Referenční element (element, ke kterému chcete přetahovaný element umístit) bude označen pomocí modrého okraje. Současně se zobrazí živá vodítka (zelená) označující možné umístění s ohledem na referenční element.
V živém zobrazení můžete pohybovat pouze se statickými elementy. Tagy s dynamickým obsahem (například PHP) přesouvat nelze.
Pokud během přetahování elementu na okamžik zastavíte, zobrazí se ikona Rychlého zobrazení elementu (</>). Jestliže umístíte kurzor nad tuto ikonu, otevře se Rychlé zobrazení elementu, do kterého můžete element přesunout.
Aplikace Dreamweaver nově podporuje navigaci v elementech stránky pomocí klávesnice, která usnadňuje práci uživatelům preferujícím klávesnici a urychluje vytváření webu. Můžete použít následující:
Další informace najdete na stránce Ovládání pomocí klávesnice v živém zobrazení.
Stisknutím kláves Ctrl+T v systému Windows nebo Cmd+T v systému Mac můžete pro zvolený element v živém zobrazení otevřít Rychlý editor tagů. Rychlý editor tagů nabízí tři režimy: Upravit tag, Uzavřít do tagu a Vložit HTML. Mezi těmito režimy můžete přepínat pomocí kláves Ctrl/Cmd + T.
Na panelu nástrojů Dokument došlo ke změnám usnadňujícím jeho používání.
U základních pracovních ploch dostupných v aplikaci Dreamweaver došlo k následujícím změnám:
Výchozí pracovní plocha je nově plocha Extrakt. Tato pracovní plocha obsahuje panel Extrakt na své levé straně a webovou stránku na straně pravé. Po prvním spuštění aplikace Dreamweaver se v rámci panelu Extrakt spustí jednoduchá výuková lekce, která vám představí pracovní postupy funkce Extrakt. Funkci Extrakt můžete začít používat kliknutím na tlačítko Začínáme.
Výchozí zobrazení dokumentů HTML je nově Rozdělené zobrazení (vodorovné rozdělené na živé zobrazení a zobrazení kódu). Dynamické soubory jako ty, které jsou uvedeny níže, se ve výchozím nastavení otvírají v plném zobrazení kódu. Při rozdělení zobrazení budou tyto dokumenty uvedeny v zobrazení návrhu a zobrazení kódu.
Tip: Do zobrazení Návrh můžete přejít kliknutím na rozevírací seznam v blízkosti položky „Živě“ a výběrem možnosti Návrh. Budete-li chtít změnit vodorovné rozdělení na svislé, vyberte položky Zobrazit > Rozdělit svisle. Živé zobrazení / zobrazení Návrh se nyní bude nacházet na levé straně. Pokud budete chtít živé zobrazení / zobrazení návrhu otevřít na pravé straně, zrušte výběr možnosti Zobrazit > Živé zobrazení vlevo nebo Zobrazení návrh vlevo.
Aplikace Dreamweaver si nově dokáže zapamatovat zvolený stav Živého zobrazení dokumentu HTML a dané zobrazení použije u všech dokumentů HTML, které později otevřete. Představme si například dokument HTML1, který otevřete jako první. Zobrazení dokumentu je rozděleno na zobrazení kódu a živé zobrazení. Zobrazení tohoto dokumentu se následně upraví na plné živé zobrazení. Následující otevřený dokument, např. dokument HTML2, se otevře v plném živém zobrazení.
Nové možnosti úprav v živém zobrazení byly představeny již v předchozí verzi aplikace Dreamweaver CC. V této verzi jsou tyto možnosti úprav v živém zobrazení k dispozici také pro dokumenty s plovoucí mřížkou. Úpravy v živém zobrazení umožňují provádět změny a prohlížet výsledný náhled v jediném zobrazení, a přináší tak možnost rychlejšího vývoje webové stránky s plovoucí mřížkou.
Úpravu dokumentů s plovoucí mřížkou v živém zobrazení vám usnadní následující funkce:
Strukturu DOM HTML v dokumentu s plovoucí mřížkou můžete nově vizualizovat pomocí nástroje Rychlé zobrazení elementu.
Poznámka: Rychlé zobrazení elementu v rozvržení s plovoucí mřížkou neumožňuje kopírování, vkládání, duplikaci ani změnu elementů HTML.
V uživatelském rozhraní pro prohlížení a úpravu dokumentů s plovoucí mřížkou došlo ke změnám, které umožňují přístup k úpravě funkcí v živém zobrazení. Pokud nově zvolíte element v dokumentu s plovoucí mřížkou, otevře se společně s ovládacími prvky, jako jsou Skrýt elementy nebo Otevřít nový řádek, také zobrazení elementu.
Dokumenty s plovoucí mřížkou se také nově otevírají přímo v živém zobrazení. V zobrazení návrhu již dokumenty s plovoucí mřížkou nelze prohlížet ani měnit.
Další informace o dokumentech s plovoucí mřížkou najdete v části Responzivní návrh s využitím rozvržení s plovoucí mřížkou.
Dialogové okno Vložit pro dokumenty s plovoucí mřížkou nově nabízí „asistované určení polohy“. Tato funkce umožňuje umístit vložený element před nebo za označený element, nebo jej do elementu vnořit (v živém zobrazení). Další informace o vložení elementů plovoucí mřížky viz Vložení elementů plovoucí mřížky.
Možnost Spravovat skryté elementy (tlačítko se symbolem oka na panelu nástrojů Dokument) byla přesunuta do kontextové nabídky pro dokument s plovoucí mřížkou.
Pokud budete chtít spravovat skryté elementy, klikněte pravým tlačítkem na stránku s plovoucí mřížkou a kliknutím na možnost „Spravovat skryté elementy“ zobrazte skryté elementy. Tyto elementy můžete opět skrýt kliknutím na ikonu oka v rámci uživatelského rozhraní.
Nově si můžete zvolit jeden z následujících předem připravených barevných motivů pro zobrazení kódu:
K nastavení motivu pro zobrazení kódu použijte předvolby barevného zvýraznění kódu. Motiv můžete podle potřeby přizpůsobit volbou různých barevných motivů pro pozadí, popředí a pro skryté znaky.
V případě každého uvedeného typu dokumentu můžete přizpůsobit barvy pro jednotlivé kategorie tagů a elementů kódu, jako třeba tagy formulářů nebo identifikátory jazyka JavaScript. Pokud například u všech typů dokumentů použijete motiv Raven, můžete výlučně v dokumentech HTML označit tagy formulářů modrou barvou.
Všechna vlastní nastavení se v motivu uloží po kliknutí na tlačítko Použít a přizpůsobený motiv bude k dispozici v rámci všech relací aplikace Dreamweaver.
S využitím možnosti Synchronizace nastavení v nabídce Předvolby můžete zachovat synchronizaci přizpůsobených motivů kódu mezi instancemi aplikace Dreamweaver. Další informace najdete v tématu Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud.
Další informace najdete v části Nastavení barevného motivu pro zobrazení kódu.
Synchronizace zobrazení kódu s živým zobrazením umožňuje ihned zobrazit náhled změn v kódu v živém zobrazení. Oproti předchozím verzím aplikace Dreamweaver není třeba před zobrazením změn v živém zobrazení kliknout na tlačítko Obnovit.
Synchronizaci zobrazení kódu s živým zobrazením vám představíme v rámci následujícího pracovního postupu (kdy je aktivní zobrazení kódu):
Veškeré změny v kódu JavaScript se v živém zobrazení projeví až po opětovném úplném načtení či obnovení stránky.
V živém zobrazení je nově k dispozici panel Datové zdroje (Okno > Datové zdroje). Pomocí panelu Datové zdroje můžete jednoduše provádět následující úlohy:
Poznámka: Datové zdroje můžete z panelu s náhledem přetahovat pouze v počítačích Mac.
Podrobné pokyny k používání panelu Datové zdroje najdete v části Práce s datovými zdroji.
Aplikace Dreamweaver nově nabízí nové responzivní počáteční šablony, které vám usnadní začátky při vytváření responzivních webových stránek. K dispozici máte libovolnou z následujících šablon v dialogovém okně Nový dokument (Soubor > Nový > Počáteční šablony):
Jakmile zvolíte šablonu a klikněte v dialogovém okně Nový dokument na tlačítko Vytvořit, aplikace Dreamweaver vás vyzve k uložení nového dokumentu. Uložením dokumentu vytvoříte kopii šablony, kterou můžete následně přizpůsobit tak, aby vyhovovala vašim požadavkům.
Řešení potíží s aplikací Dreamweaver může někdy vyžadovat odstranění složky s předvolbami obsahující veškerá přizpůsobená nastavení. V předchozích verzích bylo nutné v zařízení ručně přejít ke složce s předvolbami a složku odstranit. V této verzi je vám k dispozici možnost odstranit předvolby jedním kliknutím pomocí dialogového okna:
Dialogové okno Obnovit předvolby otevřete tak, že během spouštění aplikace Dreamweaver přidržíte následující klávesové zkratky:
Možnost obnovení předvoleb používejte uvážlivě. Po obnovení předvoleb a nastavení dojde ke ztrátě všech vlastních nastavení pracovní plochy, klávesových zkratek, rozšíření a předvoleb aplikace.
V systému Mac podržte klávesy Cmd + Option + Shift a spusťte aplikaci Dreamweaver (kliknutím na ikonu aplikace Dreamweaver v Docku).
V systému Windows postupujte následovně:
Přejděte k instalační složce, vyhledejte soubor Dreamweaver.exe a klikněte na něj.
Podržte klávesy Windows + Ctrl + Shift a dvakrát na soubor Dreamweaver.exe klikněte.
Mějte na paměti, že výše uvedené klávesové zkratky je třeba držet stisknuté i po otevření dialogového okna pro řízení uživatelských účtů (UAC).
Následně můžete pomocí dialogového okna Předvolby importovat nastavení z předchozích verzí aplikace Dreamweaver uložených ve službě Creative Cloud. Veškerá místní nastavení se přepíšou nastavením importovaným z prostředí cloudu; dané změny se projeví při dalším spuštění aplikace Dreamweaver.
Mimo jiné je v této verzi i ve všech následujících vydáních společně s nastavením synchronizovaným v předchozích verzích ve službě Creative Cloud synchronizováno také následující nastavení:
Tato verze aplikace Dreamweaver nabízí řadu vylepšených pracovních postupů v nástroji CSS Designer. Panel CSS Designer nově nabízí místní možnosti pro rychlejší zahájení pracovního postupu.
Možnost Šablony webu na úvodní obrazovce byla nahrazena možností Počáteční šablony. Šablony webu jsou nově k dispozici v dialogovém okně Nový dokument (Soubor > Nový).
Aplikace Dreamweaver nově nabízí následující aktualizované knihovny jQuery:
Základní stránky jQuery byly odstraněny.
Přímá integrace aplikace Dreamweaver ve službě PhoneGap Build pro vytváření balíčků aplikací není v nejnovější aktualizaci aplikace Dreamweaver CC verze 2014 (říjen 2014) a novějších verzích k dispozici.
Podle potřeby však můžete službu PhoneGap Build využívat přímo online a nejnovější aktualizace funkcí pro vytváření balíčků nativních webových aplikací pro mobilní zařízení využít zde.
Přihlaste se ke svému účtu.