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

Adobe Dreamweaver CC 2014.1.1 (únor 2015)

Nová úvodní obrazovka

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.

Úvodní obrazovka
Úvodní obrazovka

Poznámka:

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.

Vylepšení panelu Extrakt

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.

Panel Extrakt
Panel Extrakt

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

Přetažení elementů

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

Ohraničovací rámeček

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.

Poznámka:

Při výběru rámečkem v živém zobrazení jsou podporovány pouze ty operace, které podporuje prohlížeč.

Vylepšení zobrazení elementu

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. 

Nové motivy pro zobrazení kódu

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.

Vylepšení nástroje CSS Designer

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

Vzdálené ladění živého zobrazení

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

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

  2. V zobrazeném dialogovém okně, které informuje o tom, že je port 5471 aktivován pro ladění, klikněte na tlačítko OK.

    Spustí se aplikace Dreamweaver.

    Kliknutím na tlačítko OK v dialogovém okně spusťte aplikaci Dreamweaver
    Kliknutím na tlačítko OK v dialogovém okně spusťte aplikaci Dreamweaver

  3. Otevřete dokumenty, které chcete ladit v živém zobrazení.

  4. Chcete-li zahájit ladění, otevřete prohlížeč Google Chrome a přejděte na adresu localhost:5471. Zobrazí 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.

    Nyní můžete pomocí nástrojů Google Chrome DevTools ladit požadované dokumenty.

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

Další vylepšení

Změny v pracovním postupu obnovení předvoleb

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.

Obnovení předvoleb a nastavení
Obnovení předvoleb a nastavení

Změna v režimu zobrazení dynamických dokumentů

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.

Adobe Dreamweaver CC 2014.1 (říjen 2014)

Funkce Extrakt v aplikaci Dreamweaver

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.

Panel Extrakt výchozí pracovní plocha
Panel Extrakt

Další informace o pracovních postupech pro funkci Extrakt v aplikaci Dreamweaver najdete v části Integrace aplikace Dreamweaver s funkcí Extrakt.

64bitová architektura

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

Časté otázky

  • 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ů“.

Instalace 64bitové verze aplikace Dreamweaver

  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:

  2. Stáhněte 64bitovou verzi aplikace Dreamweaver ze služby Creative Cloud a nainstalujte ji.

Vylepšení živého zobrazení

Živá vodítka

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

Poznámka:

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.

  • 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.
Živá vodítka nad a pod elementem, na kterém máte umístěný kurzor
Živá vodítka nad a pod elementem, na kterém máte umístěný kurzor

  • 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“.
Živá vodítka napravo a nalevo od elementu, na kterém máte umístěný kurzor
Živá vodítka napravo a nalevo od elementu, na kterém máte umístěný kurzor

Přesné vložení strukturálního elementu

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.

Ikona Rychlé zobrazení elementu
Ikona Rychlé zobrazení elementu usnadňující přesné vložení

Kontextová nabídka v živém zobrazení

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.

Poznámka:

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

Změny v zobrazení elementu

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.

Možnosti Zdroj CSS a Multimediální dotaz v Zobrazení elementu
Možnosti Zdroj CSS a Multimediální dotaz v Zobrazení elementu

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

Možnosti Přejít ke kódu a Vložit styly v Zobrazení elementu
Možnosti Přejít ke kódu a Vložit styly v Zobrazení elementu

Poznámka:

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.

Přesouvání elementů v živém zobrazení

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.

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

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

Poznámka:

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. 

Ovládání pomocí klávesnice v živém zobrazení

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

Rychlý editor tagů 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.

Rychlý editor tagů v živém zobrazení
Rychlý editor tagů v živém zobrazení

Změny na pracovní ploše aplikace Dreamweaver

Změny na panelu nástrojů Dokument

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.
Možnosti zobrazení návrhu a&nbsp;živého zobrazení v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Možnosti zobrazení návrhu a živého zobrazení v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Tlačítka zobrazení Návrh a Živě na panelu nástrojů Dokument v předchozích verzích
Tlačítka zobrazení Návrh a Živě na panelu nástrojů Dokument v předchozích verzích

  • Pole Titul dokumentu bylo přesunuto do inspektora vlastností.
Panel nástrojů Dokument v aplikaci Dreamweaver CC (říjen 2014)
Panel nástrojů Dokument v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Pole Titul dokumentu přesunutý do inspektora vlastností v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Pole Titul dokumentu přesunutý do inspektora vlastností v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Pole Název na panelu nástrojů Dokument v předchozích verzích
Pole Název na panelu nástrojů Dokument v předchozích verzích

  • Tlačítka Prohlédnout a Živý kód byly nahrazeny ikonami.
Ikony Živý kód a&nbsp;Prohlédnout v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Ikony Živý kód a Prohlédnout v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Tlačítka Živý kód a Prohlédnout v předchozích verzích
Tlačítka Živý kód a Prohlédnout v předchozích verzích

  • 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.
Řádek s&nbsp;adresou a&nbsp;možnostmi Zpět, Dopředu a&nbsp;Obnovit v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Řádek s adresou a možnostmi Zpět, Dopředu a Obnovit v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Řádek s adresou a možnostmi Zpět, Dopředu a Obnovit v předchozích verzích
Řádek s adresou a možnostmi Zpět, Dopředu a Obnovit v předchozích verzích

  • 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.
Ikony Náhled, Ladění v&nbsp;prohlížeči, Možnosti živého zobrazení a&nbsp;Správa souborů v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Ikony Náhled, Ladění v prohlížeči, Možnosti živého zobrazení a Správa souborů v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Ikony Náhled, Ladění v prohlížeči, Možnosti živého zobrazení a Správa souborů v předchozích verzích
Ikony Náhled, Ladění v prohlížeči, Možnosti živého zobrazení a Správa souborů v předchozích verzích

Změny výchozí pracovní plochy

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
Pracovní plochy
Pracovní plochy

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.

Pracovní plocha Extrakt
Pracovní plocha Extrakt

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)
Výchozí zobrazení dokumentů HTML sestává z&nbsp;živého zobrazení a&nbsp;zobrazení kódu
Výchozí zobrazení dokumentů HTML sestává z živého zobrazení a zobrazení kódu

Výchozí zobrazení dynamických dokumentů sestává z plného zobrazení kódu
Výchozí zobrazení dynamických dokumentů sestává z plného 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á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í.  

Změny v dokumentech s plovoucí mřížkou

Podpora úprav v ž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.

Možnosti plovoucí mřížky v předchozích verzích
Možnosti plovoucí mřížky v předchozích verzích

Možnosti plovoucí mřížky se zobrazením elementu v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Možnosti plovoucí mřížky se zobrazením elementu v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)


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.

Panel nástrojů Dokument v aplikaci Dreamweaver CC (říjen 2014)
Panel nástrojů Dokument v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Panel nástrojů Dokument v dokumentu s plovoucí mřížkou v předchozích verzích
Panel nástrojů Dokument v dokumentu s plovoucí mřížkou v předchozích verzích

Další informace o dokumentech s plovoucí mřížkou najdete v části Responzivní návrh s využitím rozvržení s plovoucí mřížkou.

Změny pracovních postupů v nabídce Vložit

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.

Změny možnosti Spravovat skryté elementy

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

Možnost Spravovat skryté elementy v&nbsp;nabídce otevřené kliknutím pravým tlačítkem v&nbsp;aplikaci Dreamweaver CC (říjen 2014)
Možnost Spravovat skryté elementy v nabídce otevřené klepnutím pravým tlačítkem v nejnovější aktualizaci aplikace Dreamweaver CC (říjen 2014)

Ikona oka umožňující spravovat skryté elementy v předchozích verzích
Ikona oka umožňující spravovat skryté elementy v předchozích verzích

Jiné než základní barevné motivy pro zobrazení kódu

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
Motivy Classic, Raven, Slate, Blanche a Geneva
Motivy Classic, Raven, Slate, Blanche a 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.

Poznámka:

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

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.

Poznámka:

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. 

Panel Datové zdroje v živém zobrazení

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.

Poznámka:

 

  • Kategorie Skripty, Předloha a Knihovna se nově více váží k zobrazení kódu a jsou tak na panelu Datové zdroje v živém zobrazení skryté.
  • V této verzi aplikace Dreamweaver CC byly kategorie Flash a Filmy sloučeny do jedné kategorie s názvem „Média“.
         

Panel Datové zdroje v&nbsp;živém zobrazení
Panel Datové zdroje v živém zobrazení

Panel Datové zdroje v zobrazení návrhu a kódu
Panel Datové zdroje v zobrazení návrhu a kódu


Podrobné pokyny k používání panelu Datové zdroje najdete v části Práce s datovými zdroji.

Nové počáteční šablony

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
Nové responzivní počáteční šablony
Nové responzivní počáteční šablony

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.

Obnovení předvoleb při spuštění

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

Obnovit předvolby
Obnovit předvolby

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

Poznámka:

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

  1. Přejděte k instalační složce, vyhledejte soubor Dreamweaver.exe a klikněte na něj.

  2. 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). 

Další vylepšení

Změny v nastavení synchronizace

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.

Importování nastavení z předchozích verzí aplikace Dreamweaver
Importování nastavení z předchozích verzí 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í:

Změny v aplikaci CSS Designer

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.

Změny na úvodní obrazovce

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ý).

Aktualizace pro verzi jQuery

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. 

Aktualizace služby PhoneGap

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.

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