Verze aplikace Dreamweaver CC pro rok 2015 se zaměřuje na responzivní design, lepší funkce pro úpravu kódu, náhled webových stránek ze zařízení a dávkovou extrakci několika rozlišení obrázků optimalizovaných pro web z kompozic aplikace Photoshop. Díky integraci s rozhraním Bootstrap můžete vytvářet responzivní webové stránky optimalizované pro mobilní zařízení. Vizuální multimediální dotazy dále prohlubují možnosti při práci na responzivním webovém designu tím, že umožňují vizualizaci a úpravu návrhu v různých bodech přerušení. 

V této verzi naleznete také řadu rozšíření možností úprav v živém zobrazení a nástroji CSS Designer. Tento článek poskytuje popis uvedených nových funkcí i rozšíření a obsahuje odkazy na zdroje další nápovědy a informací.

Aplikace Dreamweaver nově umožňuje testování webových stránek připravených k publikaci současně na více zařízeních. Podle potřeby můžete sledovat, jak se webové stránky projevují v různých velikostech a testovat jejich interaktivní funkce. To vše bez nutnosti instalovat jakékoli mobilní aplikace nebo muset fyzicky připojit zařízení ke stolnímu počítači! Jednoduše v zařízení naskenujte automaticky generovaný QR kód, skrze který můžete v tomto zařízení otevřít náhled vašich webových stránek.

Funkce Živá kontrola se po spuštění ve stolním počítači zkopíruje do každého připojeného zařízení a umožní vám kontrolovat různé elementy a měnit návrh podle vašich potřeb.

Podrobné informace naleznete v tématu Náhled a kontrola webových stránek na více zařízeních.

Dotazy na vizuální multimédia

Řádky s dotazy na vizuální multimédia jsou vizuální reprezentací multimediálních dotazů na stránce. Tyto řádky vám pomáhají vizualizovat webovou stránku na různých místech a ukazují, jak jsou různé součásti webové stránky přeformátovány na různých velikostech displejů. Zatímco zobrazujete svou stránku na různých velikostech displeje, můžete změnit design pro konkrétní velikost displeje bez vlivu na design stránky při jiných velikostech.

Řádky s dotazy na vizuální multimédia obsahují tři vodorovné řádky, z nichž každý představuje kategorii multimediálního dotazu:

•  Zelená: Multimediální dotazy s podmínkami max-width (maximální šířka)
•  Modrá: Multimediální dotazy s podmínkami min-width a max-width (minimální šířka i maximální šířka)
•  Nachová: Multimediální dotazy s podmínkami min-width (minimální šířka)

Další informace naleznete v tématu Dotazy na vizuální multimédia.

Podpora pro linting kódu

V této nové verzi aplikace Dreamweaver můžete ladit svůj kód a vyhledávat v něm pomocí lintingu běžné chyby. Linting představuje proces analýzy kódu a vyznačení potenciálních chyb nebo podezřelého použití kódu. Aplikace Dreamweaver dokáže linting používat u souborů HTML, CSS a JavaScript při jejich načtení, uložení nebo upravení. Chyby a varování jsou poté uvedeny na novém panelu výstupu.

Další informace naleznete v tématu Linting kód.

Podpora doplňku Emmet

Jste vášnivým vývojářem, který v aplikaci Dreamweaver vytváří nejeden řádek kódu? Ušetřete čas při psaní kódu díky zkratkám Emmet. Tyto zkratky se snadno pamatují a píší a po stisknutí klávesy Tab se v zobrazení kódu rozbalí do úplného kódu.

Podrobné informace naleznete v tématu Vložení kódu pomocí doplňku Emmet.

Náhled v Zobrazení kódu

Pokud pracujete v rozděleném zobrazení, vidíte veškeré změny obrázků a barev okamžitě v zobrazení Živě nebo Návrh. Pokud však raději pracujete pouze v Zobrazení kódu, obrázky jsou jen názvy souborů, které zpravidla nejsou intuitivní. Barvy (pokud nejsou použity předem definované barvy) jsou také sadou nesrozumitelných čísel. V této verzi softwaru Dreamweaver můžete rychle zobrazit náhled obrázků a barev přímo v Zobrazení kódu. Tato funkce vám pomáhá vytvořit vizuální spojení mezi názvy souborů obrázků a formáty barev a skutečnými obrázky a barvami, které představují. Můžete se tedy rychleji rozhodovat a výrazně zkrátit dobu potřebnou k vývoji.

Další informace naleznete v části Prohlížejte náhled obrázků a barev v Zobrazení kódu.

Zobrazení kódu také zobrazí náhled chyby. Číslo řádku chybného kódu je zvýrazněno červeně. Po přesunutí kurzoru myši nad číslo se zobrazí krátký popisek chyby.

Poznámka: Zobrazí se pouze první chyba v řádku. Pokud řádek obsahuje pouze varování, zobrazí se popis varování. Pokud řádek obsahuje varování a chybu, zobrazí se pouze popis chyby.

Nové výstřižky kódu

Výstřižky představují části kódu, které můžete ve svém projektu používat opakovaně. V této verzi aplikace Dreamweaver naleznete nové a aktualizované výstřižky kódu:

• Výstřižky Boostrap
• Animace a přechody CSS
• Efekty CSS
• Výstřižky CSS
• Výstřižky HTML
• Výstřižky kódu JavaScript (aktualizováno)
• Výstřižky PHP
• Výstřižky preprocesorů
• Výstřižky responzivního návrhu

Informace o použití výstřižků kódu naleznete v části Práce s výstřižky kódu.

Nově také můžete prostřednictvím funkce pro synchronizaci v cloudu uchovávat své výstřižky kódu aktuální v jednotlivých instalacích aplikace Dreamweaver. Informace o synchronizaci výstřižků kódu ve službě Creative Cloud a instalacích aplikace Dreamweaver naleznete v tématu Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud.

Integrace nástroje Bootstrap

Bootstrap představuje nejoblíbenější bezplatný framework pro HTML, CSS a JavaScript, který umožňuje vývoj responzivních webových stránek optimalizovaných pro mobilní zařízení. Framework zahrnuje responzivní šablony CSS a HTML pro tlačítka, tabulky, navigaci, otočné obrázky a další elementy použitelné na webové stránce. K dispozici je vám i několik volitelných zásuvných modulů JavaScript, se kterými mohou i vývojáři s pouze základní znalostí psaní kódu vytvářet špičkové responzivní webové stránky.

Aplikace Dreamweaver umožňuje vytvářet dokumenty Bootstrap a měnit stávající webové stránky vytvořené pomocí služby Bootstrap. Své weby Bootstrap můžete začít navrhovat prostřednictvím jedné z počátečních šablon Bootstrap, které jsou k dispozici v dialogovém okně Nový dokument (Počáteční šablony > Šablony Bootstrap). 

• Bootstrap – Agentura
  
• Bootstrap – Elektronický obchod
• Bootstrap – Portfolio
• Bootstrap – Produkt
• Bootstrap – Nemovitost
• Bootstrap – Shrnutí
  

V dialogovém okně Nový dokument můžete vytvořit také vlastní dokument Bootstrap (Nový dokument > Bootstrap). Poté můžete pomocí panelu Vložit v aplikaci Dreamweaver vytvořit web po jednotlivých částech z komponent Bootstrap, jako jsou např. skládačky a otočné obrázky. Případně pokud disponujete kompozicemi Photoshop, můžete využít funkci Extrakt pro přenos obrázků, písma, stylů, textu a dalších do dokumentu Bootstrap.

Ať už se jedná o plně navržený soubor Bootstrap, nebo o rozpracovaný návrh – můžete tyto soubory upravit v aplikaci Dreamweaver a společně s úpravou kódu měnit také design pomocí funkcí pro vizuální úpravy, jako je úprava v živém zobrazení, vizuální verze nástroje CSS Designer, vizuální multimediální dotazy a funkce Extract. 

Podrobné informace naleznete v části Práce se soubory Bootstrap.

Podpora úpravy tabulek v živém zobrazení

Tabulky můžete snadno a rychle měnit v živém zobrazení pomocí jedné nebo několika z následujících možností:

Další informace naleznete v tématu Změna velikosti tabulek a Formátování tabulek a buněk.

Nové nabídky v živém zobrazení

Živé zobrazení nově nabízí lepší možnosti úprav v podobě následujících nabídek, které jsou zde k dispozici:

• Změnit
• Formát
• Příkazy
• Web
• Možnost „Vložit jinak“ v nabídce Upravit a v kontextové nabídce

Podpora UI elementů jQuery v živém zobrazení

Pomocí panelu Vložit můžete nově přímo vkládat widgety jQuery v živém zobrazení. Přetáhněte požadovaný element z panelu Vložit do živého zobrazení a přidržením tlačítka myši využijte jednu z následujících funkcí:

• Živá vodítka: Tato vodítka se zobrazí při umístění kurzoru nad elementy v živém zobrazení po přetažení požadovaných elementů z panelu Vložit. Pomocí živých vodítek můžete elementy vložit nahoru, dolů, vlevo nebo vpravo od aktivního elementu.

• Ikona DOM: Ikona DOM se zobrazí při krátkém pozastavení po zobrazení živých vodítek. Kliknutím na tuto ikonu zobrazíte v místním okně strukturu DOM, ve které můžete umístit element na přesnou pozici ve struktuře dokumentu.

• Asistované určení polohy: Funkce Asistované určení polohy umožňuje umístit element před nebo za aktivní element, nebo jej do elementu vnořit (v živém zobrazení).

Další informace naleznete v tématu Vložení elementů přímo do živého zobrazení.

Panel DOM

Rychlé zobrazení elementu bylo změněno na panel DOM (Okna > DOM). Panel DOM obsahuje všechny funkce rychlého zobrazení elementu, ale i mnohé další. Tento panel je k dispozici trvale ve všech pracovních plochách, takže můžete například otevřít dva dokumenty a současně používat jejich příslušné panely DOM.

Pomocí panelu DOM můžete provést následující:

• přetahovat elementy z panelu Vložit a vkládat je přesně do struktury dokumentu,
• kopírovat, vkládat, duplikovat, přesouvat nebo mazat strukturální elementy v dokumentu,
• zobrazit libovolný prvek na stránce v souvislosti se strukturou dokumentu – aktivní prvek bude na panelu DOM zvýrazněn.

Podrobné informace o práci s panelem DOM a úpravách struktury HTML pomocí tohoto panelu naleznete v tématu Panel DOM.

Našeptávání kódu SVG v dokumentech HTML

Nová podpora rad při psaní kódu pro všechny elementy a atributy SVG v dokumentech HTML. Pomocí těchto rad při psaní kódu můžete nyní přidávat elementy SVG v zobrazení kódu pro dokumenty HTML, stejně jako je můžete přidávat v dokumentu SVG.

Technologické náhledy

Počínaje touto verzí vám tým Dreamweaver poskytuje náhledy vybraných funkcí s cílem získat zpětnou vazbu od zákazníků. Na základě přijatých informací bude možné tyto funkce dále zdokonalovat a začlenit je jako základní funkce aplikace Dreamweaver. Dané funkce jsou vám dostupné z kategorie Technologické náhledy v dialogovém okně Předvolby.

Zkušební funkcí v této verzi je Zvýraznění kódu. Tato funkce zvýrazní všechny výskyty vybraného textu v zobrazení kódu.

Pokud chcete tuto funkci využívat, postupujte následovně:

Mezi jednotlivými výskyty zvýrazněného textu můžete přecházet pomocí následujících klávesových zkratek:

• Vyberte další výskyt: F3 (Win); Cmd + G (Mac)
• Výběr předchozího výskytu: Shift+F3 (Win); Cmd+Shift+G (Mac)

Vlastní náhled v zobrazení kódu pomocí rozhraní ShowPreview API

V této verzi aplikace Dreamweaver můžete vytvářet vlastní místní okna náhledu, která se zobrazí při umístění ukazatele myši nad kód v zobrazení kódu. K implementaci přizpůsobených náhledů můžete použít nové rozhraní showPreview API a také stávající rozhraní mm:browsercontrol API. Tato rozhraní API můžete použít třeba k zobrazení náhledu všech parametrů javascriptové funkce, když umístíte ukazatel myši na název dané funkce.

Další informace najdete v části Reference pro rozhraní API aplikace Dreamweaver: Funkce zobrazení kódu.

Skládání kódu

V předchozích verzích aplikace Dreamweaver jste museli vybrat bloky kódu v Zobrazení kódu a pak je sbalit. V této verzi a novějších verzích můžete sbalit bloky kódu jednoduše umístěním kurzoru nad čísla řádků a kliknutím na trojúhelník, který se objeví.

Skládání kódu (sbalení) je dostupné u souborů HTML, CSS, LESS, Sass, SCSS, JS, PHP, XML a SVG a využívá bloky tagů.

U akcí Kopírovat/Vyjmout/Vložit a přetažení se zachová stav skládaní kódu. Například při kopírování sbaleného bloku kódu bude zkopírovaný text vložen akcí Vložit jako sbalený blok.

V souborech HTML si na rozdíl od dřívější funkce sbalený kód nově zachová závěrečný tag a jeho vykreslení proběhne odlišně. Byl také zvýšen počet znaků, které lze zobrazit ve sbaleném bloku kódu. Díky tomu je vám k dispozici náhled případných výchozích atributů.

Podrobné informace naleznete v tématu Sbalení kódu.

Vylepšení panelu Extrakt

• Funkce Extrakt pro zařízení
• Podpora jednotek %

Funkce Extrakt pro zařízení

Zařízení se liší nejen velikostí, ale také rozlišením. Při plánování responzivního designu webu musíte počítat s více verzemi rozlišení obrázků, které se musí adekvátně vykreslit na každém zařízení. Vytváření takového počtu různých verzí rozlišení pro všechny obrázky v projektu však může být nelehký úkol.

Funkce Extrakt v aplikaci Dreamweaver vám tento úkol do značné míry usnadňuje. Při extrahování obrázků z kompozic Photoshop do verze 2015 aplikace Dreamweaver se můžete rozhodnout extrahovat obrázek v několika verzích podle jeho rozlišení. Velikost obrázku se v aplikaci Photoshop během extrakce automaticky mění podle předem definovaných rozlišení.

Tyto obrázky poté můžete volat ve funkci JavaScript nebo multimediálních dotazech a zobrazit je v podobě, v jaké budou vypadat ve vybraném zařízení. Například u displejů Retina s vysokou hustotou můžete využít dvojnásobnou verzi obrázku. 

Další informace naleznete v tématu Získávání obrázků ze souborů PSD.

Podpora jednotek %

Na panelu Extrakt můžete nově zobrazit šířku a výšku obrázků společně s pixely i v procentuálních hodnotách. V procentech je možné zobrazit také výsledky měření.

Po kliknutí na datový zdroj na panelu Extrakt se otevře místní nabídka s možností přepnout mezi pixely a procenty. Jednotky vybrané v této místní nabídce budou zachovány pro měření i mimo datové zdroje.

Vylepšení úprav v živém zobrazení

Vnořené vložení v živém zobrazení

Nově je možné v živém zobrazení vkládat elementy i do ostatních elementů. Při přetahování elementů z panelu Vložit, panelu Datové zdroje nebo v rámci živého zobrazení a umístění kurzoru nad jednotlivé elementy na stránce vám bude k dispozici vizuální zpětná vazba pro vnoření elementů (společně s vodítky „před“ a „po“).

• Vodítka před/po: Umístění kurzoru nad horních a spodních 30 % elementu.
• Vizuální zpětná vazba pro vnoření: Umístění kurzoru nad prostředních 40 % elementu.

Úpravy selektorů přímo v zobrazení elementu

Chcete-li upravit selektor, nyní stačí v zobrazení elementu kliknout na jeho název. Provedené změny lze potvrdit kliknutím na libovolné místo na stránce.

Změny na panelu nástrojů Kódování

Následující možnosti panelu nástrojů Kódování související se sbalením kódu byly odebrány:

• Sbalit celý tag
• Sbalit výběr

Poznámka: Tyto možnosti byly odebrány z kontextové nabídky otevřené po kliknutí pravým tlačítkem i z nabídky Upravit.   Nyní můžete sbalit kód umístěním kurzoru myši nad číslo řádku a kliknutím na trojúhelník, který se objeví.   Následující možnosti nyní nejsou k dispozici ani pro soubory HTML, CSS a JS.

• Zvýraznit neplatný kód
• Výstrahy na chyby syntaxe v informačním pruhu

Nyní můžete použít k hledání chyb v kódu možnost linting, panel výstupu zobrazí výsledky funkce linting.

Vylepšení nástroje CSS Designer

• Režimy Vše a Současný
• Našeptávání hodnot vlastností
• Barvy kódu pro multimediální dotazy
• Další změny

Režimy Vše a Současný

Nástroj CSS Designer nyní poskytuje dva různé režimy zobrazení a úprav vlastností kódu CSS:

• Vše: V tomto režimu jsou uvedeny všechny prvky CSS, multimediální dotazy a selektory. Tento režim se nepřizpůsobuje výběru v zobrazení návrhu a živém zobrazení.

Tento režim je optimální, chcete-li vytvářet kód CSS, multimediální dotazy nebo selektory.

• Současný: V tomto režimu jsou pro každý prvek vybraný v zobrazení návrhu nebo živém zobrazení uvedeny vypočítané styly. Pokud je v souboru CSS aktivní selektor, tento režim zobrazí vlastnosti daného selektoru.

Rady k hodnotám vlastností

Aplikace Dreamweaver nově zobrazuje rady při psaní kódu pro nastavení nových vlastností v nástroji CSS Designer, podobně jako v zobrazení kódu.

Barvy kódu pro multimediální dotazy

Multimediální dotazy v panelu CSS Designer jsou nyní barevně označeny tak, aby odpovídaly Vizuálním multimediálním dotazům.

•  Zelená: Multimediální dotazy s podmínkami max-width (maximální šířka)
•  Modrá: Multimediální dotazy s podmínkami min-width a max-width (minimální šířka i maximální šířka)
•  Nachová: Multimediální dotazy s podmínkami min-width (minimální šířka)

Další změny

• Možnost Zobr. sadu: Zaškrtávací pole Zobr. sadu v části Vlastnosti je nyní zaškrtnuto ve výchozím nastavení při prvním spuštění aplikace Dreamweaver. Každá změna této možnosti (zaškrtnutí nebo zrušení zaškrtnutí) je trvalá pro každou následnou relaci aplikace Dreamweaver.

• Zobrazení panelu se posouvá tak, aby zobrazilo možnost Přidat vlastnost uprostřed: Po klepnutí na tlačítko + v části Vlastnosti se tato část posune tak, aby se ve středu panelu zobrazil řádek Přidat vlastnost. Pokud je část Vlastnosti příliš malá, je řádek Přidat vlastnost zobrazen v dolní části panelu.

• Zvýraznění pozadí při přidávání nové vlastnosti: Když je aktivní textové pole Přidat novou vlastnost, řádek je zvýrazněný šedým pozadím.

• Změna pozice tlačítek + a –: Tlačítka + a –, zobrazená v každé části panelu CSS Designer, jsou posunuta z pozice zcela vpravo do pozice zcela vlevo, aby byla lépe vidět.

• Kategorie Vlastní byla přejmenována: Název kategorie pro vlastní vlastnosti byl změněn na Více.

Změny pracovních postupů testovacího serveru

Vylepšení postupů při práci s testovacím serverem dostupná v této verzi jsou zaměřena na snadnější a bezproblémovější úpravu dokumentů s kódem na straně serveru v rámci živého zobrazení.

Změny v nastavení serveru

Na rozdíl od předchozích verzí aplikace Dreamweaver můžete nově určit konkrétní server a používat jej jako testovací nebo vzdálený server. Ne však jako obojí. Zaškrtávací políčka v uživatelském rozhraní instalačního programu serveru jsou nahrazena přepínači, které slouží jako vynucení pro specifikaci serveru.

Pokud otevřete web nebo importujete nastavení webu vytvořená v předchozích verzích aplikace Dreamweaver a pokud daný web má jako testovací i vzdálený server nastaven jeden server, vytvoří se duplicitní záznam daného serveru. Jeden je poté označen jako vzdálený (s příponou _remote) a druhý jako testovací server (s příponou _testing).

Automatické odesílání dynamických souborů

Aplikace Dreamweaver nově při otevření, vytvoření nebo uložení změn v dynamických dokumentech automaticky synchronizuje dynamické dokumenty s vaším testovacím serverem. Aplikace Dreamweaver v rámci pracovních postupů pro testovací server již nezobrazí dialogové okno „Aktualizace testovacího serveru“ ani „Odeslání závislých souborů“.

Další informace najdete v části Automatické odesílání dynamických souborů.

Změny pracovních postupů v aplikaci Business Catalyst

Rozšíření Business Catalyst bylo zrušeno a v aplikaci Dreamweaver CC 2015 a novějších verzích nebude k dispozici. Dreamweaver CC 2014.1.1 je poslední verze aplikace, která je dostupná s rozšířením Business Catalyst.

Chcete-li používat rozšíření Business Catalyst s aplikací Dreamweaver CC 2015 nebo novější, použijte v aplikaci Dreamweaver možnost připojení SFTP. Další informace naleznete na adrese Dokumentace pro aplikaci Business Catalyst.

Oficiální oznámení této změny naleznete na webu aplikace Business Catalyst. 

Další změny

• Uspořádání panelu Vložit bylo změněno tak, aby se všechny možnosti v kategoriích Společné, Rozvržení a Média nacházely v kategorii s příhodnějším názvem, HTML.

• Videa s krátkými prohlídkami a odkaz k jejich spuštění v nabídce Nápověda byly odebrány. Tato možnost není vedle angličtiny dostupná ani pro ostatní jazyky.

• Možnosti rozevírací nabídky na panelu Dokument v dolní části stránky byly zredukovány. Nyní jsou k dispozici pouze možnosti Orientace, Plná velikost a Upravit velikosti.