Přehled nových funkcí

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.

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 tažením kdekoli v tagu (ohraničovací rámeček). Výběr pomocí rámečku usnadňuje vybrání několika elementů v tagu.

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ů:

• RecognEyes
• Havenjark
• Solarizovaný tmavý
• Solarizovaný světlý
• Vombat
• Monaki
• Schuss
• Tango
• Studené světlo
• Roboticket

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:

• Zobrazení panelu CSS Designer se posouvá při přidávání vlastnosti: po klepnutí na tlačítko „+“ v části Vlastnosti se zobrazení panelu posune tak, aby se zhruba ve středu panelu Vlastnosti zobrazil řádek Přidat vlastnost. Pokud je část Vlastnosti příliš malá, zobrazení panelu se posune tak, aby se řádek Přidat vlastnost zobrazil v její dolní části.
• Zvýraznění pozadí: když je aktivní textové pole Přidat novou vlastnost, řádek je zvýrazněný šedým pozadím. 
• Pozice tlačítek „+“ a „–“: tlačítka „+“ a „–“, které se zobrazují v každé části panelu CSS Designer (Zdroj, Selektory, Multimediální dotaz a Vlastnosti), se posunula z pozice zcela vpravo doleva, aby byla lépe vidět.
• Kategorie „Vlastní“ se přejmenovala na „Více“.

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ů:

Když nyní 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:

• Přímý přístup k souborům PSD ve službě Creative Cloud a souborům PSD, které s vámi ostatní sdílí ve složce pro spolupráci.
• Kontextové našeptávání kódu umožňuje snadno definovat písma, barvy a přechody ve stylech CSS.
• Podpora vytváření tagů obrázku přetažením z rozvržení souboru PSD.
• Vkládání stylů přímo v živém zobrazení (například v nástroji CSS Designer a zobrazení elementu).

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:

• Je možné 64bitovou verzi aplikace spustit na 32bitové verzi systému Windows? – Ne
• Mohu na jednom počítači se systémem Windows nainstalovat 32 i 64bitovou verzi aplikace? – Ne
  
• Jak mohu zjistit, zda je v systému nainstalována 32 nebo 64bitová verze aplikace Dreamweaver?
  • Windows: Spusťte aplikaci Dreamweaver. Otevřete Správce úloh a vyhledejte proces Dreamweaver. Pokud jste spustili 64bitovou verzi aplikace Dreamweaver, bude název procesu „Dreamweaver.exe“. Pokud jste spustili 32bitovou verzi, bude název procesu „Dreamweaver.exe *32“.
    
  • Mac: Otevřete Monitor aktivit a přejděte do nabídky Zobrazit > Sloupce > Druh. V rámci Monitoru aktivit vyhledejte aplikaci Dreamweaver ve sloupci Druh. Pokud se jedná o 64bitovou verzi aplikace Dreamweaver, bude ve sloupci Druh uveden údaj „64 bitů“.
    

• Živá vodítka
• Přesné vložení strukturálního elementu
• Kontextová nabídka v živém zobrazení
• Změny v zobrazení elementu
• Přesouvání elementů v živém zobrazení
• Ovládání pomocí klávesnice v živém zobrazení
• Rychlý editor tagů v živém zobrazení

Ž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:

• při přetahování z panelu Vložit,
• při přetahování z panelu Datové zdroje,
• přetahování (přesouvání) elementů v živém zobrazení.

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

• Nad a pod – zobrazí se při umístění kurzoru nad libovolný druh elementu/tagu mimo inline tagy. Při umístění kurzoru na první (horní) polovinu elementu se zobrazí vodítka nad tímto elementem. Při umístění kurzoru na druhou (spodní) polovinu elementu se zobrazí vodítka pod tímto elementem.

• Vlevo a vpravo – zobrazí se při umístění kurzoru nad inline tagy (například <a> nebo <span>) nebo nad tagy s parametrem „float property“.

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 klepnutí pravým tlačítkem. V kontextové nabídce živého zobrazení můžete elementy duplikovat nebo vybrat nadřazený/podřízený tag.

Nejprve v živém zobrazení označte element, a otevřete tak zobrazení elementu. Následně klepně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).

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.

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:

• Klávesy se šipkami nahoru a dolů umožňující navigaci v elementech stránky. Ovládání pomocí klávesnice v živém zobrazení umožňuje snadný přístup ke vnořeným a ohraničeným elementům.
• K procházení selektorů v zobrazení elementu můžete použít klávesu tabulátor.

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

• Možnosti pro zobrazení návrhu a živé zobrazení byly sloučeny do jediné rozevírací nabídky.

• Pole Titul dokumentu bylo přesunuto do inspektora vlastností.

• Tlačítka Prohlédnout a Živý kód byly nahrazeny ikonami.

• Možnosti Zpět, Dopředu a Obnovit jsou seskupeny na řádku s adresou a umístěny na střed panelu nástrojů Dokument.

• Ikony Náhled, Ladění v prohlížeči, Možnosti živého zobrazení a Správa souborů jsou seskupeny a umístěny na pravé straně panelu nástrojů Dokument.

U základních pracovních ploch dostupných v aplikaci Dreamweaver došlo k následujícím změnám:

• Kód
• Návrh
• Extrakt

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.

• PHP
• Šablona PHP (příklad.dwt.cfm)
• ASP
• Šablona ASP (příklad.dwt.asp)
• JSP
• Šablona JSP (příklad.dwt.jsp)
• CFM
• Šablona CFM (příklad.dwt.cfm)

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ávrh 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:

• Zobrazení elementu
• Rychlý inspektor vlastností
• Inspektor vlastností v živém zobrazení
• Vložení elementů a Úprava textu přímo v živém zobrazení

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, klepněte pravým tlačítkem na stránku s plovoucí mřížkou a klepnutím na možnost „Spravovat skryté elementy“ zobrazte skryté elementy. Tyto elementy můžete opět skrýt klepnutí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:

• Classic (výchozí, shodné s předchozí verzí aplikace Dreamweaver)
• Raven
• Slate
• Blanche
• Geneva

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 klepnutí na tlačítko Použít a přizpůsobený motiv bude k dispozici v rámci všech relací aplikace Dreamweaver.

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í klepnout 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):

• Práce s textem, jako jsou příkazy Vyjmout / Kopírovat / Vložit / Odstranit / Zpět / Provést znovu.
• Přesouvání elementů v rychlém zobrazení elementu, když je aktivní zobrazení kódu.
• Psaní v zobrazení Kód.
• Funkce Odstranit / Duplikovat / Kopírovat / Vložit v rychlém zobrazení elementu (možnosti dostupné po klepnutí pravým tlačítkem).
• Funkce v inspektorovi vlastností, jako je např. změna formátování textu – Tučně / Kurzíva, Změna třídy, ID, Formát, Vlastnosti stránky a Použití písma.
• Přidání / Odstranění tříd nebo ID pomocí našeptávání kódu v rámci zobrazení kódu.
• Vložení elementů, jako je element div / obrázek / hypertextový odkaz či strukturální element z panelu Vložit do zobrazení kódu.
• Přidání/úprava stylů CSS v rámci tagu <style>. 
• Úprava kódu v souborech CSS.

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:

• Přetahovat nebo vkládat datové zdroje (obrázky, adresy URL, barvy nebo média) z panelu s náhledem nebo zobrazení seznamu na panelu Datové zdroje.

Poznámka: Datové zdroje můžete z panelu s náhledem přetahovat pouze v počítačích Mac.

• Kopírovat a vkládat hodnoty barev do libovolného textového pole v aplikaci Dreamweaver, jako například v rámci vlastností CSS Designer, zobrazení kódu, nástroji Color picker nebo dokonce i v jiných aplikacích, jako je například Poznámkový blok.
  

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):

• Informační stránka
• Příspěvek na blogu
• Elektronické obchodování
• E-mail
• Portfolio

Jakmile zvolíte šablonu a klepnete 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 klepnutí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:

• (Windows) Windows + Ctrl + Shift
• (Mac) Cmd + Option + Shift

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ě:

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í:

• Nově byly přidány barevné motivy pro zobrazení kódu
• Nastavení aplikačního panelu a rámečku aplikace v systému Mac

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:

• jQuery - 1.8.3 > jQuery - 1.11.1
• jQuery UI - 1.9.2 > jQuery UI - 1.10.4

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. Další informace najdete v části Používání služby PhoneGap Build v nejnovější aktualizaci aplikace Dreamweaver CC verze 2014.