Příručka uživatele Zrušit

Funkce Extrakt v aplikaci Dreamweaver

Hledat

Naposledy aktualizováno 30. 12. 2021

Naučte se rychlý převod souborů PSD na webové návrhy založený na HTML pro mobilní zařízení a stolní počítače. Získávání prvků CSS, obrázků, měr, písma, barev, přechodů a mnohého dalšího z aplikace Photoshop přímo v aplikaci Dreamweaver.

Poznámka:

K 1. červenci 2022 přestanou být funkce na panelu Extrakt v aplikaci Dreamweaver v21.2 a dřívějších verzích k dispozici. K extrahování informací o stylu a datových zdrojů z komponent PSD pro jejich opětovné použití v aplikaci Dreamweaver můžete používat aplikaci Adobe Photoshop.

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

Začínáme s funkcí Extrakt

Získání prvků CSS

Nastavení předvoleb funkce Extrakt

Kopírování textu

Extrahování obrázků

Extrahování písma, barev a přechodů

Extrahování měr

Začínáme s funkcí Extrakt

Díky funkci Extrakt v aplikaci Dreamweaver budete mít přístup ke svým souborům PSD přímo prostřednictvím panelu Extrakt v aplikaci Dreamweaver. Další informace o panelu Extrakt, pracovní ploše a nahrávání souborů PSD do panelu Extrakt naleznete v rámci následujících témat:

Panel Extrakt a pracovní plocha

Pracovní plocha Extrakt byla navržena tak, aby vám umožnila efektivně využívat funkci Extrakt v aplikaci Dreamweaver. Tato pracovní plocha obsahuje v levé části panel Extrakt a na straně pravé webovou stránku v rozděleném zobrazení (živé zobrazení a zobrazení kódu). Pracovní plochu si můžete podle svých představ přizpůsobit přetažením, ukotvením, sbalením nebo rozbalením příslušných panelů. Přizpůsobenou pracovní plochu lze následně i uložit pro pozdější použití.

Poznámka:

Pokud omylem panel Extrakt zavřete, můžete ho znovu otevřít pomocí klávesové zkratky Ctrl + K (Win), Cmd + K (Mac) nebo nabídky Okno > Extrakt.

Po prvním spuštění aplikace Dreamweaver se v rámci panelu Extrakt spustí interaktivní výuková lekce, která vám představí související pracovní postupy. K procházení různých výukových lekcí můžete využít rozevírací seznam v horní části panelu.

K samotné práci s funkcí Extrakt v aplikaci Dreamweaver můžete po dokončení výukové lekce přejít kliknutím na tlačítko Začínáme. Panel Extrakt nabízí zobrazení miniatur složek a souborů PSD ve vašem účtu Creative Cloud. Jedná se o soubory, které byly dříve odeslány nebo synchronizovány ze stolního počítače nebo které s vámi byly sdíleny ve složce pro spolupráci ve službě Creative Cloud.

Panel Extrakt se soubory PSD uloženými ve službě Creative Cloud

Poznámka:

Pokud budete chtít výukovou lekci spustit znovu, klikněte na místní nabídku v pravém horním rohu panelu a vyberte možnost Spustit výukovou lekci.

Odeslání souborů PSD do služby Creative Cloud

Chcete-li nahrát soubor PSD do aplikace Creative Cloud, vyberte možnost Okna > Extrakce a klikněte na Odeslat soubor PSD. Jestliže kompozice souboru PSD vlastní jiný vývojář nebo tým, můžete je požádat o sdílení ve službě Creative Cloud. Soubory můžete následně stáhnout a odeslat do svého účtu přímo přihlášením ke službě Creative Cloud nebo prostřednictvím panelu Extrakt v aplikaci Dreamweaver.

Poznámka:

Pokud na zařízení macOS používáte aplikaci Dreamweaver 21.2 nebo novější verze, povolte soubory PSD v oknu aplikace Finder a odešlete soubor.

Systém macOS

Chcete-li povolit a odeslat soubory PSD, postupujte podle následujících kroků:

Na panelu Extrakt klikněte na možnost Odeslat PSD.
V okně aplikace Finder klikněte na Možnosti a vyberte *.psd rozbalovací nabídky, která se zobrazí.
Vyberte soubor PSD a odešlete jej kliknutím na Otevřít.

Otevření souborů PSD na panelu Extrakt

Klikněte na miniaturu požadovaného souboru PSD na panelu Extrakt. Pokud se po otevření souboru PSD zpřístupní ve službě Creative Cloud jeho novější verze, můžete soubor PSD znovu načíst prostřednictvím panelu Extrakt. Toho dosáhnete tak, že kliknete na název souboru PSD nebo na možnost Znovu načíst PSD v místní nabídce v pravé horní části. Kliknutím na ikonu Creative Cloud v levé horní části panelu můžete přejít zpět na zobrazení miniatur a zvolit odlišný soubor.

Budete-li chtít zobrazení přiblížit a návrh si prohlédnout z blízka, můžete upravit míru zvětšení v horní části panelu Extrakt nebo použitím zkratky Alt +/–. Pomocí karty Vrstvy nebo rozevíracího seznamu Kompozice vrstev můžete zobrazit nebo skrýt elementy v souboru PSD.

Nyní je vše připraveno na přeměnu kompozice souboru PSD na webovou stránku.

Nastavení předvoleb funkce Extrakt

V rámci předvoleb funkce Extrakt můžete určit výchozí formát souboru, ve kterém je třeba získat obrázky, a zvolit výchozí jednotku písma, která se bude na panelu Extrakt používat.

Vyberte možnost Upravit > Předvolby (Windows) nebo Dreamweaver > Předvolby (Mac).
V seznamu Kategorie vyberte možnost Extrakt.
(Volitelně) Upravte výchozí formát, ve kterém je třeba získat obrázky.

Formát získaného obrázku
(Volitelné) V části Extrakt pro zařízení vyberte požadovaná rozlišení. Tato nastavení se použijí, pokud se rozhodnete uložit obrázek v několika verzích s různými rozlišeními.
- Chcete-li verze uložit s příponami, klikněte na odpovídající řádek ve sloupci Přípona a zadejte požadovaný text.
- Chcete-li uložit verze v několika rozlišeních do různých výstupných složek, klikněte na odpovídající řádek ve sloupci Složka a zadejte relativní cestu.
Funkce Extrakt pro zařízení
(Volitelně) Kliknutím na možnost Vymazat mezipaměť můžete vymazat informace o použití funkce Extrakt uložené v mezipaměti.
Klikněte na tlačítko Použít a zavřete dialogové okno Předvolby.
Změny na panelu Extrakt se projeví po opětovném načtení souboru PSD (místní nabídka > Znovu načíst PSD).

Možnost Znovu načíst PSD na panelu Extrakt

Získání prvků CSS ze souborů PSD

Podle potřeby můžete zkopírovat všechny nebo některé vlastnosti CSS elementů z kompozice souboru PSD a přímo vkládat styly v nástroji CSS Designer, Zobrazení elementu v živém zobrazení nebo ve svém kódu (zdroj CSS nebo dokument HTML).

Našeptávání kódu se automaticky vyplní podle vlastností CSS elementu zvoleného v kompozici souboru PSD. Pokud dáváte přednost psaní kódu, můžete toto našeptávání kódu využít pro získání vlastností CSS a jejich vložení do kódu.

Na panelu Extrakt (Okno > Extrakt) klikněte na požadovaný soubor PSD. Zobrazení miniatur souborů PSD se rozbalí a umožní vám přehledný náhled kompozice.
V souboru PSD klikněte na požadovaný element nebo datový zdroj. Otevřete tak místní nabídku se seznamem vlastností CSS elementu, ve které můžete uvedené prvky vybírat a kopírovat. Šířku a výšku vybraného elementu můžete zobrazit v pixelech nebo v procentech.

Poznámka: Pokud zde vyberete procenta, naměřené hodnoty se rovněž zobrazí v procentech.

Možnost Kopírovat CSS na panelu Extrakt

Pokud bude chtít prvek CSS zkopírovat, zvolte požadovanou vlastnost a klepněte na možnost Kopírovat CSS.
K vložení prvku CSS do dokumentu využijte jednu z následujících metod:
- Při vkládání prvku CSS do aplikace CSS Designer klikněte pravým tlačítkem na požadovaný selektor a poté na možnost Vložit styly.
- Při vkládání prvku CSS v nástroji Zobrazení elementu klikněte pravým tlačítkem na selektor a poté na možnost Vložit styly.
- Při vkládání prvku CSS v kódu umístěte textový kurzor na vhodné místo, klikněte pravým tlačítkem a vyberte možnost Vložit.

Pokud budete chtít pro získání prvků CSS využít našeptávání kódu, postupujte následovně:

Otevřete zdroj CSS přiložený k dokumentu nebo přejděte k zobrazení kódu dokumentu HTML.
Na panelu Extrakt klikněte na požadovaný soubor PSD a následně na vhodný element v kompozici.
V dokumentu umístěte textový kurzor na požadované místo v kódu.
Jakmile začnete psát název vlastnosti CSS, zobrazí se vám našeptávání kódu s vlastnostmi CSS zvoleného elementu z kompozice souboru PSD. Kliknutím na požadovanou vlastnost CSS ji vložíte do kódu.

Našeptávání kódu s vlastnostmi CSS elementu ze souboru PSD
Pokud budete chtít získat několik vlastností CSS, zvolte požadované vlastnosti v místním okně panelu Extrakt. Následně v rámci našeptávání kódu klikněte na možnost Vložit vybrané.

Dávkové vkládání vlastností CSS

Kopírování textu ze souborů PSD

Text i obsah kompozic souboru PSD můžete jediným kliknutím vložit na svoji webovou stránku. Pokud chcete z kompozice souboru PSD na panelu Extrakt zkopírovat text, zvolte textový element a klikněte na možnost Kopírovat text. Text se zkopíruje do schránky. Následně můžete text vložit, kamkoli budete chtít.

Možnost Kopírovat text na panelu Extrakt

Poznámka:

Po získání textu můžete získat také vlastnosti, jako je písmo a barvy přiřazené k textu. Další informace naleznete v části Získání písma, barev a přechodů ze souborů PSD.

Získání obrázků ze souborů PSD

Podle potřeby můžete libovolnou vrstvu z kompozic souboru PSD na panelu Extrakt jednoduše přetáhnout do přesného umístění v živém zobrazení své webové stránky. Vizuální pomůcky v živém zobrazení, jako jsou Živá vodítka nebo ikona DOM, vám umožňují snadno přetáhnout element na požadované místo. Pokud během přetahování elementu na okamžik zastavíte, zobrazí se ikona DOM (</>). Struktura DOM se zobrazí při umístění ukazatele myši nad ikonu </>. Element je dále možné přetáhnout do struktury. Pokud dáváte přednost psaní kódu, můžete k získání obrázků využít kontextové našeptávání kódu. Našeptávání kódu vám umožní získávat barvy a přechody v podobě obrázků.

Poznámka:

Pokud soubor PSD obsahuje několik pláten, každé plátno se na panelu Vrstvy zobrazí jako složka. Složku můžete podle potřeby rozbalit nebo sbalit a zobrazit nebo skrýt tak její obsah. Pokud budete chtít určité plátno zvětšit, jednoduše klikněte na název plátna. Chcete-li provést oddálení, klikněte kamkoli mimo plátno a poté na možnost Přizp.

Před vložením získaných obrázků se v aplikaci Dreamweaver zobrazí název obrázku s možností jeho úpravy. Obrázky jsou standardně uloženy v kořenové složce vašeho webu. V případě zájmu můžete zadat úplnou cestu k adresáři a název souboru, a uložit tak obrázek ve vlastním umístění.

Poznámka: Pokud obrázek rozbalíte do dokumentu, který se nachází mimo uvedený web, obrázek se rozbalí v adresáři, ve kterém se daný dokument nachází. V případě neuložených dokumentů se nejprve otevře výzva k uložení dokumentu.

Obrázek lze také uložit na místním disku a zavolat jej na webovou stránku později. Pokud navrhujete responzivní webové stránky, můžete také jedním kliknutím uložit verze obrázku v různých rozlišeních pro jednotlivá zařízení.

Na panelu Extrakt klikněte na soubor PSD, ze kterého chcete obrázek stáhnout.
V souboru PSD klikněte na požadovaný obraz.

Poznámka:

Pomocí karty Vrstvy a rozevíracího seznamu Kompozice vrstev na panelu Extrakt můžete obrázky kompozice souboru PSD zobrazit nebo skrýt. Pokud je obrázek tvořen více vrstvami, můžete v obrázku zvolit jednotlivé vrstvy, které si přejete rozbalit.

Povšimněte si otevřené nápovědy pro psaní kódu na pravé straně pracovní plochy v zobrazení kódu.
Pokud budete chtít importovat více obrázků, přidržte klávesu Shift nebo Cmd a klikněte na požadované obrázky. Vybrané obrázky budou získány jako jediný obrázek.
Proveďte jednu z následujících akcí:
- V místní nabídce otevřené po kliknutí na obrázek klikněte na možnost . Zadejte cestu, název souboru, jeho formát a měřítko (podle potřeby). Poté proveďte jednu z následujících akcí:
  
  Kliknutím na tlačítko Uložit uložte obrázek v 1 rozlišení. Chcete-li změnit velikost obrázku, vyberte možnost Měřítko a zadejte požadované měřítko.
  
  Chcete-li uložit verze obrázku v několika různých rozlišeních, klikněte na možnost Uložit několik. Soubor PSD nemusí nutně tyto verze obsahovat. Aplikace Dreamweaver dokáže při extrakci uložit obrázek v několika rozlišeních.
Požadovaná rozlišení verzí a odpovídající výstupní složku můžete vybrat v okně Předvolby.
Získání obrázků pomocí ikony Získat zdroj
- Přetáhněte obrázek do živého zobrazení dokumentu. V živém zobrazení se zobrazí živá vodítka, která vám usnadní umístění obrázku.
Po přesunutí obrázku se v aplikaci Dreamweaver zobrazí jeho název. Podle potřeby upravte název obrázku nebo jeho příponu a stiskem klávesy Enter obrázek uložte. Obrázky jsou standardně uloženy v kořenové složce vašeho webu. V případě zájmu můžete zadat cestu a název souboru, a uložit tak obrázek ve vlastním umístění.
Možnosti změny názvu souboru a jeho přípony při přetažení obrázku z panelu Extrakt
- Po kliknutí na obrázek se automaticky přizpůsobí kontextové našeptávání kódu v aplikaci Dreamweaver. V zobrazení kódu dokumentu HTML nebo CSS umístěte kurzor na požadované místo. Název zvoleného obrázku se v rámci našeptávání kódu zobrazí po zadání názvu vlastnosti pozadí obrázku nebo tagu <img>. Vyberte obrázek, podle potřeby upravte jeho název nebo příponu a stiskněte klávesu Enter.
Obrázky jsou standardně uloženy v kořenové složce vašeho webu. V případě zájmu můžete zadat vlastní cestu a název souboru, a uložit tak obrázek ve vlastním umístění.
Získání obrázků pomocí našeptávání kódu

Získání měr ze souborů PSD

Prostřednictvím panelu Extrakt můžete jednoduše kontrolovat nebo získávat hodnoty vzdáleností mezi dvěma elementy v kompozici souboru PSD.

Podržte stisknutou klávesu Shift nebo Cmd a na panelu Extrakt klikněte v souboru PSD na požadovaný element.

Na panelu Extrakt se zobrazí vodorovná a svislá vzdálenost mezi dvěma elementy.

Míry na panelu Extrakt

Poznámka:

Chcete-li zobrazit naměřené hodnoty v procentech, klikněte na libovolný element a poté na procenta.
Kliknutím na požadovanou hodnotu ji zkopírujte do schránky.
Hodnoty poté můžete vložit kamkoli podle svých potřeb, například do vlastností CSS nástroje CSS Designer nebo do kódu.

Získání písma, barev a přechodů ze souborů PSD

Prostřednictvím panelu Extrakt můžete z kompozic souboru PSD získat vlastnosti CSS, jako jsou písma, barvy nebo přechody.

Na panelu Extrakt klikněte na možnost Styly.
Při získávání písma proveďte následující akce v části Písma.
1. Získání požadovaného typu písma.
  
  Další informace o písmu naleznete po kliknutí na ikonu služby Adobe Fonts ().
2. Klikněte na formát a velikost, kterou si přejete zkopírovat, a v nově otevřené místní nabídce klikněte na možnost Kopírovat CSS. Funkce Extrakt označí textové elementy využívající písmo, formát a velikost, na které jste kliknuli.
  
  Poznámka:
  
  V rámci předvoleb funkce Extrakt (Předvolby > Extrakt) můžete určit, zda chcete použít jednotky písma „em“ nebo „rem“. Změny se projeví po kliknutí na možnost Znovu načíst PSD v místní nabídce v pravém horním rohu panelu Extrakt.
  
  Získávání písma
3. Prvky CSS poté můžete vložit kamkoli podle svých potřeb, například do kódu nebo nástroje CSS Designer.
Při získávání barev proveďte následující akce v části Barvy:
1. Klikněte na požadovanou barevnou paletu. Funkce Extrakt označí elementy využívající zvolenou barvu.
  
  Poznámka: Za použití nástroje Color Picker můžete z kompozice souboru PSD vybrat jakoukoli jinou barvu.
2. V místní nabídce otevřené po kliknutí na barevnou paletu vyberte požadovaný barevný model (RGB, Hex nebo HSL) a barevnou hodnotu zkopírujte (Ctrl + c nebo Cmd + c).
  
  Získávání barev
3. Barevnou hodnotu poté můžete vložit kamkoli podle svých potřeb, například do kódu nebo nástroje CSS Designer.
Budete-li chtít získat přechody, klikněte na paletu přechodů v části Přechody. V nově otevřené místní nabídce klikněte na možnost Kopírovat CSS. Prvky CSS poté můžete vložit kamkoli podle svých potřeb, například do kódu nebo nástroje CSS Designer.

Tovární předvolby vybrané v rámci předvoleb (Předvolby > Styly CSS) budou vloženy společně s přechody. Při získání kruhových přechodů se odpovídající prvek CSS vloží bez uvedené tovární předvolby, protože kruhové přechody nejsou podporovány.

Získávání přechodů