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

Používání souborů Photoshop v aplikaci Dreamweaver

Hledat
Dreamweaver

Dreamweaver

Otevřít aplikaci
  1. Příručka uživatele aplikace Dreamweaver
  2. Úvod
    1. Základy navrhování responzivních webů
    2. Co je nového v aplikaci Dreamweaver
    3. Vývoj webu v aplikaci Dreamweaver – přehled
    4. Dreamweaver / Běžné otázky
    5. Klávesové zkratky
    6. Systémové požadavky aplikace Dreamweaver
    7. Přehled funkcí
  3. Dreamweaver a Creative Cloud
    1. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    2. Knihovny Creative Cloud v aplikaci Dreamweaver
    3. Používání souborů Photoshop v aplikaci Dreamweaver
    4. Práce s aplikací Adobe Animate a Dreamweaver
    5. Extrahujte soubory SVG optimalizované pro web z knihoven
  4. Pracovní plochy a zobrazení aplikace Dreamweaver
    1. Pracovní plocha aplikace Dreamweaver
    2. Optimalizace pracovní plochy aplikace Dreamweaver pro vizuální vývoj
    3. Hledání souborů podle názvu nebo obsahu | Mac OS
  5. Nastavení webů
    1. O webech aplikace Dreamweaver
    2. Nastavení lokální verze webu
    3. Připojení k publikačnímu serveru
    4. Nastavení testovacího serveru
    5. Import a export nastavení webu aplikace Dreamweaver
    6. Přenos stávajících webových stránek ze vzdáleného serveru do kořenové složky lokálního webového místa
    7. Funkce usnadnění přístupu v aplikaci Dreamweaver
    8. Rozšířená nastavení
    9. Nastavení předvoleb webového místa pro přenos souborů
    10. Úprava nastavení serveru proxy v aplikaci Dreamweaver
    11. Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
    12. Používání systému Git v aplikaci Dreamweaver
  6. Správa souborů
    1. Vytváření a otevírání souborů
    2. Správa souborů a složek
    3. Získání souborů ze serveru a odeslání souborů na server
    4. Zpřístupnění/vyhrazení souborů
    5. Synchronizace souborů
    6. Porovnání souborů a nalezení rozdílů
    7. Maskování souborů a složek ve webu aplikace Dreamweaver
    8. Povolení poznámek k návrhu pro weby Dreamweaver
    9. Předcházení potenciálnímu zneužití modulu Gatekeeper
  7. Rozvržení a návrh
    1. Používání vizuálních pomůcek pro rozvržení
    2. O používání souborů CCS k rozvržení stránky
    3. Navrhování responzivních webů pomocí nástroje Bootstrap
    4. Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
    5. Zobrazení obsahu pomocí tabulek
    6. Barvy
    7. Responzivní návrh s využitím rozvržení s plovoucí mřížkou
    8. Funkce Extrakt v aplikaci Dreamweaver
  8. CSS
    1. Vysvětlení kaskádových seznamů stylů
    2. Rozvržení stránek pomocí panelu CSS Designer
    3. Použití preprocesorů CSS v aplikaci Dreamweaver
    4. Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
    5. Přesunutí pravidel CSS v aplikaci Dreamweaver
    6. Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
    7. Práce s tagy div
    8. Použití přechodů na pozadí
    9. Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
    10. Formátování kódu
  9. Obsah stránky a datové zdroje
    1. Nastavení vlastností stránky
    2. Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
    3. Práce s textem
    4. Vyhledání a nahrazení textu, tagů a atributů
    5. Panel DOM
    6. Úpravy v živém zobrazení
    7. Kódování dokumentů v aplikaci Dreamweaver
    8. Výběr a zobrazení elementů v okně dokumentu
    9. Nastavení vlastností textu v Inspektoru vlastností
    10. Kontrola pravopisu webové stránky
    11. Pomocí vodorovných linek v aplikaci Dreamweaver
    12. Přidání a úprava kombinací písma v aplikaci Dreamweaver
    13. Práce s datovými zdroji
    14. Vložení a aktualizace dat v aplikaci Dreamweaver
    15. Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
    16. Vložení a úprava obrázků v aplikaci Dreamweaver
    17. Přidání multimediálních objektů
    18. Přidání videa v aplikaci Dreamweaver
    19. Vložení videa HTML 5
    20. Vložit soubory SWF
    21. Přidání zvukových efektů
    22. Vložte zvuk HTML5 v aplikaci Dreamweaver
    23. Práce s položkami knihoven
    24. Používání arabského a hebrejského textu v aplikaci Dreamweaver
  10. Odkazy a navigace
    1. O odkazech a navigaci
    2. Vytváření odkazů
    3. Obrazové mapy
    4. Odstraňování problémů s odkazy
  11. Ovládací prvky a efekty jQuery
    1. Používání widgetů jQuery UI a jQuery Mobile v aplikaci Dreamweaver
    2. Používání efektů jQuery v aplikaci Dreamweaver
  12. Kódování webových stránek
    1. Informace o psaní kódu v aplikaci Dreamweaver
    2. Prostředí pro psaní kódu v aplikaci Dreamweaver
    3. Nastavení předvoleb kódování
    4. Přizpůsobení barevného zvýraznění kódu
    5. Psaní a úprava kódu
    6. Našeptávání kódu a dokončování kódu
    7. Sbalení a rozbalení kódu
    8. Opakované použití kódu v podobě výstřižků
    9. Linting kódu
    10. Optimalizace kódu
    11. Úprava kódu v zobrazení Návrh
    12. Práce s obsahem hlavičky stránek
    13. Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
    14. Používání knihoven tagů v aplikaci Dreamweaver
    15. Import vlastních tagů do aplikace Dreamweaver
    16. Práce s funkcemi JavaScriptu (obecné pokyny)
    17. Použití vestavěných chování jazyka JavaScript
    18. O XML a XSLT
    19. Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
    20. Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
    21. Přidání entit znaku pro XSLT v aplikaci Dreamweaver
    22. Formátování kódu
  13. Pracovní postupy pro různé produkty
    1. Instalace a používání rozšíření v aplikaci Dreamweaver
    2. Aktualizace v rámci aplikace v aplikaci Dreamweaver
    3. Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
    4. Práce s aplikacemi Fireworks a Dreamweaver
    5. Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
    6. Integrace mezi aplikacemi Dreamweaver a Business Catalyst
    7. Vytváření e-mailových kampaní na míru
  14. Šablony
    1. O předlohách aplikace Dreamweaver
    2. Rozpoznání předloh a dokumentů založených na předloze
    3. Vytvoření předlohy aplikace Dreamweaver
    4. Vytváření upravitelných oblastí v šablonách
    5. Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
    6. Použijte volitelné oblasti v předlohách
    7. Definování upravitelných atributů tagu v aplikaci Dreamweaver
    8. Postup vytvoření vnořených šablon v aplikaci Dreamweaver
    9. Úprava, aktualizace nebo odstranění předloh
    10. Export a import obsahu XML v aplikaci Dreamweaver
    11. Aplikace nebo odstranění předlohy z existujícího dokumentu.
    12. Úprava obsahu v předlohách Dreamweaver
    13. Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
    14. Nastavení předvoleb zvýraznění pro oblasti předlohy
    15. Výhody používání předloh v aplikaci Dreamweaver
  15. Mobilní zařízení a zařízení s více displeji
    1. Vytvoření multimediálních dotazů
    2. Změna orientace stránky pro mobilní zařízení
    3. Vytvoření webových aplikací pro mobilní zařízení pomocí aplikace Dreamweaver
  16. Dynamické weby, stránky a webové formuláře
    1. Informace o webových aplikacích
    2. Nastavení počítače pro vývoj aplikací
    3. Řešení problémů s připojením databází
    4. Odstranění skriptů připojení v aplikaci Dreamweaver
    5. Návrh dynamických stránek
    6. Přehled zdrojů dynamického obsahu
    7. Definice zdrojů dynamického obsahu
    8. Přidání dynamického obsahu na stránky
    9. Změna dynamického obsahu v aplikaci Dreamweaver
    10. Zobrazení záznamů databáze
    11. Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
    12. Přidání uživatelského chování serveru v aplikaci Dreamweaver
    13. Vytváření formulářů pomocí aplikace Dreamweaver
    14. Shromažďování informací od uživatelů pomocí formulářů
    15. Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
    16. Vytváření webových formulářů
    17. Rozšířená podpora formátu HTML5 pro elementy formuláře
    18. Vytváření formuláře pomocí aplikace Dreamweaver
  17. Vizuální vytváření aplikací
    1. Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
    2. Vytváření vyhledávacích stránek a stránek s výsledky
    3. Vytvoření stránky vložení záznamu
    4. Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
    5. Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
    6. Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
    7. Vytvoření registrační stránky
    8. Vytvoření přihlašovací stránky
    9. Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
    10. Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
    11. Používání komponent ColdFusion v aplikaci Dreamweaver
  18. Testování, náhled a publikování webových stránek
    1. Náhled stránek
    2. Náhled webových stránek Dreamweaver na více zařízeních
    3. Testování webu aplikace Dreamweaver
  19. Odstraňování problémů
    1. Opravené problémy
    2. Známé problémy

 

 

Zjistěte, jak je aplikace Photoshop integrována v aplikaci Dreamweaver. Práce s inteligentními objekty v pracovních postupech aplikace Photoshop a Dreamweaver.

O integraci aplikace Photoshop

Poznámka:

Pracovní postupy s integrací aplikace Photoshop již nejsou v aplikaci Dreamweaver verze 21.0 a novějších verzích k dispozici.

Máte možnost vložit obrazové soubory aplikace Photoshop (formát PSD) na webové stránky v aplikaci Dreamweaver a nechat aplikaci Dreamweaver, ať je optimalizuje jako obrazy vhodné pro web (formáty GIF, JPEG a PNG). Při provedení této akce aplikace Dreamweaver vloží obraz jako inteligentní objekt a udržuje živé spojení s původním souborem PSD.

Máte také možnost vložit část nebo vše z obrazu aplikace Photoshop s více vrstvami nebo více řezy na webovou stránku v aplikaci Dreamweaver. Při kopírování a vkládání v aplikaci Photoshop však není zachováno žádné živé připojení s původním souborem. Chcete-li obraz aktualizovat, proveďte změny v aplikaci Photoshop a obraz zkopírujte a znovu vložte.

Poznámka:

Používáte-li funkci integrace často, můžete chtít soubory aplikace Photoshop uložit na webu Dreamweaver, odkud k nim lze snadněji získat přístup. Pokud tak učiníte, zamaskujte je, aby nedocházelo k vystavení původních položek a zbytečným přenosům mezi místním webem a vzdáleným serverem.

Výukovou lekci o integraci aplikace Photoshop v aplikaci Dreamweaver najdete v tématu Integrace aplikace Dreamweaver s aplikací Photoshop.

O pracovních postupech s inteligentními objekty a mezi aplikacemi Photoshop a Dreamweaver

Pro práci se soubory Photoshop v aplikaci Dreamweaver jsou k dispozici dva hlavní pracovní postupy: pracovní postup kopírovat/vložit a pracovní postup využívající inteligentní objekty.

Pracovní postup kopírovat/vložit

Pracovní postup kopírovat/vložit vám umožňuje vybírat v souboru Photoshop řezy nebo vrstvy a poté je v aplikaci Dreamweaver vložit jako obrazy připravené na Internetu. Pokud však budete chtít později aktualizovat obsah, musíte otevřít původní soubor v aplikaci Photoshop, provést změny, nakopírovat svůj řez nebo vrstvu znovu do schránky a vložit aktualizovaný řez nebo vrstvu do aplikace Dreamweaver. Tento pracovní postup se doporučuje pouze tehdy, když chcete vložit část souboru aplikace Photoshop (např. část designové kompozice) jako obraz na internetovou stránku.

Pracovní postup využívající inteligentní objekty

Při práci s kompletními soubory aplikace Photoshop doporučuje společnost Adobe pracovní postup využívající Smart Objects. Smart Object (inteligentní objekt) v aplikaci Dreamweaver je obraz umístěný na internetové stránce, který je aktivně propojen s původním souborem v aplikaci Photoshop (PSD). V návrhovém zobrazení aplikace Dreamweaver je Smart Object označen ikonou v levém horním rohu obrázku.

Inteligentní objekt

Když tento webový obrázek (to jest obrázek na stránce aplikace Dreamweaver) není synchronizován s původním souborem aplikace Photoshop, Dreamweaver zaznamená, že původní soubor byl aktualizován, a zobrazí jednu ze šipek ikony inteligentního objektu červeně. Když vyberete webový obrázek v návrhovém zobrazení a kliknete na tlačítko Aktualizovat z originálu v Inspektoru vlastností, obrázek se automaticky zaktualizuje a objeví se v něm všechny změny, které jste provedli v původním souboru aplikace Photoshop.

Když používáte Smart Objects, nemusíte otevírat Photoshop a aktualizovat v něm webový obraz. Kromě toho, veškeré změny inteligentního objektu, které provedete v aplikaci Dreamweaver, nemají destruktivní povahu. To znamená, že můžete provést změny ve webové verzi obrazu na vaší stránce a přitom si uchovat původní obraz aplikace Photoshop nedotčený.

Inteligentní objekt můžete také aktualizovat, aniž byste museli vybrat webový obraz v návrhovém zobrazení. Na panelu Položky lze aktualizovat všechny inteligentní objekty včetně obrazů, které nemusí být možné vybrat v okně Dokument (například obrazy pozadí CSS).

Nastavení optimalizace obrazu

U obou pracovních postupů (kopírovat/vložit a inteligentní objekty) můžete v dialogovém okně Optimalizace obrazu zadat nastavení optimalizace. Toto dialogové okno vám umožňuje nastavit formát souboru a kvalitu obrazu. Pokud poprvé kopírujete řez či vrstvu nebo poprvé vkládáte soubor aplikace Photoshop jako inteligentní objekt, aplikace Dreamweaver zobrazí toto dialogové okno tak, abyste mohli snadno vytvořit webový obraz.

Pokud kopírujete a vkládáte aktualizaci určitého řezu nebo vrstvy, Dreamweaver si pamatuje původní nastavení a znovu vytvoří webový obraz s těmito nastaveními. Podobně, když aktualizujete Smart Object s pomocí Inspektoru vlastnosti, Dreamweaver použije stejná nastavení, jaká jste použili při prvním vkládání obrazu. Nastavení obrazu můžete kdykoliv změnit tak, že vyberete webový obraz v zobrazení Návrh a kliknete na tlačítko Upravit nastavení obrazu v Inspektoru vlastností.

Ukládání souborů aplikace Photoshop

Pokud jste vložili webový obraz a neuložili původní soubor aplikace Photoshop na vaší stránce vytvořené v programu Dreamweaver, rozpozná Dreamweaver cestu k původnímu souboru jako absolutní lokální cestu k souboru. (To platí pro pracovní postup kopírovat/vložit i se Smart Object.) Pokud má například cesta k vaší stránce Dreamweaver tvar C:\Sites\mySite a soubor aplikace Photoshop je uložen na adrese C:\Images\Photoshop, Dreameaver nerozpozná původní položku jako součást webu s názvem mySite. To způsobí problémy, pokud budete někdy chtít sdílet soubor aplikace Photoshop s ostatními členy týmu, protože Dreamweaver pouze rozpozná, že soubor je k dispozici na konkrétním lokálním disku.

Pokud soubor aplikace Photoshop uložíte uvnitř vaší stránky, Dreamweaver vytvoří cestu k souboru vztahující se ke stránce. Jakýkoliv uživatel s přístupem na stránku bude také schopen vytvořit správnou cestu k souboru, a to za předpokladu, že jste soubor také poskytl ostatním ke stažení.

Výukové video o úpravě se zpětným převodem v aplikaci Photoshop najdete v tématu Úprava se zpětným převodem v aplikaci Photoshop.

Vytvoření inteligentního objektu

Při vkládání obrazu aplikace Photoshop (soubor PSD) na stránku aplikace Dreamweaver vytvoří inteligentní objekt. Inteligentní objekt je obraz připravený pro web, který si zachovává živé spojení s původním obrazem aplikace Photoshop. Při každé aktualizaci původního obrazu v aplikaci Photoshop nabízí aplikace Dreamweaver možnost aktualizace obrazu jediným kliknutím.

  1. V aplikaci Dreamweaver (zobrazení Návrh nebo Kód) umístěte kurzor na stránku do místa, kam chcete obraz vložit.

  2. Vyberte volbu Vložit > Obraz.

    Poznámka:

    Můžete také přetáhnout soubor PSD na stránku z panelu Soubory, pokud jsou soubory aplikace Photoshop uloženy na vašem webu. Tím překročíte další krok.

  3. V dialogovém okně Vybrat zdrojový obraz vyhledejte obrazový soubor PSD aplikace Photoshop tak, že kliknete na tlačítko Procházet a pak přejdete na soubor.

  4. V dialogovém okně Optimalizace obrazu, které se zobrazí, upravte dle potřeby nastavení optimalizace a klikněte na tlačítko OK.

  5. Uložte soubor obrazu pro web do místa uvnitř kořenové složky webového místa.

Aplikace Dreamweaver vytvoří inteligentní objekt na základě vybraného nastavení optimalizace a umístí verzi obrazu připravenou pro web na požadovanou stránku. Inteligentní objekt si zachová živé připojení k původnímu obrazu a uvede okamžik, kdy tyto objekty nejsou synchronizované.

Poznámka:

Jestliže se později rozhodnete, že chcete změnit nastavení optimalizace obrazu na stránkách, můžete obraz vybrat, kliknout na tlačítko Upravit nastavení obrazu v Inspektoru vlastností a provést změny v dialogovém okně Optimalizace obrazu. Změny provedené v dialogovém okně Optimalizace obrazu jsou použity nedestruktivně. Aplikace Dreamweaver nikdy nezmění původní soubor aplikace Photoshop a vždy znovu vytvoří webový obraz na základě původních dat.

Výukové video o úpravě se zpětným převodem v aplikaci Photoshop najdete v tématu Úprava se zpětným převodem v aplikaci Photoshop.

Aktualizace inteligentního objektu

Pokud změníte soubor aplikace Photoshop, s nímž je inteligentní objekt spojený, aplikace Dreamweaver vás upozorní, že je obraz připravený pro web mimo synchronizaci s předlohou. V aplikaci Dreamweaver jsou inteligentní objekty označeny ikonou v levém horním rohu. Jakmile je obraz připravený pro web Dreamweaver synchronizován s původním souborem aplikace Photoshop, obě šipky v této ikoně jsou zelené. Je-li obraz připravený pro web mimo synchronizaci s původním souborem aplikace Photoshop, jedna ze šipek ikon se zbarví červeně.

  1. Chcete-li aktualizovat inteligentní objekt aktuálním obsahem původního souboru aplikace Photoshop, vyberte jej v okně Dokument a pak klikněte v Inspektoru vlastností na tlačítko Aktualizovat podle originálu.

Poznámka:

Není nutné mít instalovánu aktualizaci aplikace Photoshop, aby bylo možné provést aktualizaci z aplikace Dreamweaver.

Aktualizace více inteligentních objektů

Je možné aktualizovat více inteligentních objektů současně pomocí panelu Datové zdroje. Ten rovněž umožňuje zobrazování inteligentních objektů, které nemusí být možné vybrat v okně Dokument (například obrazy na pozadí šablon CSS).

  1. Na panelu Soubory zobrazte kliknutím na záložku Datové zdroje tyto zdroje na webu.

  2. Ujistěte se, zda je vybráno zobrazení Obrazy. Pokud tomu tak není, klikněte na tlačítko Obrazy.

  3. Vyberte jednotlivé datové zdroje obrazů na panelu Datové zdroje. Po výběru inteligentního objektu se v levém horním rohu obrazu zobrazí ikona inteligentního objektu. Běžné obrazy tuto ikonu nemají.
  4. U každého inteligentního objektu, který chcete aktualizovat, klikněte pravým tlačítkem myši na název souboru a klikněte na příkaz Aktualizovat podle originálu. Můžete také podržet stisknutou klávesu CTRL a vybrat více názvů souborů, které pak aktualizujete všechny najednou.
Poznámka:

Není nutné mít instalovánu aktualizaci aplikace Photoshop, aby bylo možné provést aktualizaci z aplikace Dreamweaver.

Změna velikosti inteligentního objektu

V okně Dokument můžete změnit velikost inteligentního objektu stejně jako u jakéhokoli jiného obrazu.

  1. Vyberte inteligentní objekt v okně Dokument a přetažením úchytů pro změnu velikosti změňte jeho velikost. Můžete zachovat poměr výšky a šířky podržením klávesy Shift při přetahování.

  2. Klikněte na tlačítko Aktualizovat podle předlohy v Inspektoru vlastností.

    Při aktualizaci inteligentního objektu se webový obraz nedestruktivně vykreslí v nové velikosti na základě stávajícího obsahu původního obrazu a původního nastavení optimalizace.

Úprava původního souboru aplikace Photoshop inteligentního objektu

Po vytvoření inteligentního objektu na stránce aplikace Dreamweaver můžete původní soubor PSD upravit v aplikaci Photoshop. Po provedení změn v aplikaci Photoshop pak můžete webový obraz snadno aktualizovat v aplikaci Dreamweaver.

Poznámka:

Aplikaci Photoshop musíte mít nastavenu jako primární editor externích obrazů.

  1. Vyberte inteligentní objekt v okně Dokument.

  2. V Inspektoru vlastností klikněte na tlačítko Upravit.

  3. Proveďte změny v aplikaci Photoshop a uložte nový soubor PSD.

  4. V aplikaci Dreamweaver znovu vyberte inteligentní objekt a klikněte na tlačítko Aktualizovat podle originálu.

Poznámka:

Pokud jste změnili velikost obrazu v aplikaci Photoshop, bude nutné znovu nastavit velikost webového obrazu v aplikaci Dreamweaver. Aplikace Dreamweaver aktualizuje inteligentní objekt pouze na základě obsahu původního souboru aplikace Photoshop a nikoli na základě velikosti. Chcete-li synchronizovat velikost webového obrazu s původním souborem aplikace Photoshop, klikněte pravým tlačítkem myši na obraz a vyberte volbu Obnovit velikost podle originálu.

Stavy inteligentních objektů

Následující tabulka uvádí různé stavy inteligentních objektů.

Stav inteligentního objektu

Popis

Doporučená akce

Synchronizované obrazy

Webový obraz je synchronizován se stávajícím obsahem původního souboru aplikace Photoshop. Atributy výšky a šířky v kódu HTML odpovídají rozměrům webového obrazu.

Žádné

Původní datový zdroj změněn

Původní soubor aplikace Photoshop se po vytvoření webového obrazu v aplikaci Dreamweaver změnil.

K synchronizaci dvou obrazů použijte tlačítko Aktualizovat podle předlohy v Inspektoru vlastností.

Rozměry webového obrazu se liší od vybrané výšky a šířky HTML

Atributy výšky a šířky v kódu HTML se liší od výšky a šířky webového obrazu, který aplikace Dreamweaver vytvořila při vkládání. Pokud jsou rozměry webového obrazu menší než hodnoty výšky a šířky vybraného souboru HTML, mohou být na webovém obrazu patrné jednotlivé pixely.

Pomocí tlačítka Aktualizovat podle originálu v Inspektoru vlastností znovu vytvořte webový obraz z původního souboru aplikace Photoshop. Aplikace Dreamweaver použije aktuálně zadanou výšku a šířku při opětovném vytváření obrazu.

Rozměry původního datového zdroje jsou příliš malé pro vybranou šířku a výšku HTML

Atributy Výška a Šířka v kódu HTML jsou větší než rozměry výšky a šířky v původním souboru aplikace Photoshop. Na webovém obrazu mohou být patrné jednotlivé pixely.

Nevytvářejte webové obrazy s většími rozměry, než má původní soubor aplikace Photoshop.

Původní datový zdroj nenalezen

Aplikace Dreamweaver nemůže najít původní soubor aplikace Photoshop zadaný v textovém poli Originál Inspektoru vlastností.

Opravte cestu k souboru v textovém poli Originál v Inspektoru vlastností nebo přesuňte soubor aplikace Photoshop do aktuálně uvedeného umístění.

Kopírování a vložení výběru z aplikace Photoshop

Máte možnost zkopírovat část obrazu nebo celý obraz z aplikace Photoshop a výběr vložit na stránku aplikace Dreamweaver jako obraz připravený pro web. Můžete kopírovat jednu vrstvu nebo více vrstev z vybrané oblasti obrazu nebo kopírovat řez obrazu. Pokud tak však učiníte, aplikace Dreamweaver nevytvoří inteligentní objekt.

Poznámka:

I když funkce Aktualizovat podle originálu není k dispozici u vkládaných obrazů, máte možnost otevřít a upravit původní soubor aplikace Photoshop výběrem vloženého obrazu a kliknutím na tlačítko Upravit v Inspektoru vlastností.

  1. V aplikaci Photoshop proveďte jeden z následujících úkonů:
    • Zkopírujte část jedné vrstvy nebo celou vrstvu pomocí nástroje pro výběr a pak vyberte volbu Úpravy > Kopírovat. To zkopíruje do schránky jen vybranou část aktivní vrstvy. Pokud používáte efekty založené na vrstvách, nezkopírují se.
    • Více vrstev zkopírujete a sloučíte tak, že je vyberete nástrojem pro výběr a pak vyberete volbu Úpravy > Kopírovat sloučené. Tím sloučíte a do schránky zkopírujete vybranou oblast aktivní vrstvy a všech vrstev pod ní. Pokud používáte efekty založené na těchto vrstvách, zkopírují se.
    • Řez zkopírujete tak, že ho vyberete nástrojem pro výběr řezu a pak vyberete volbu Úpravy > Kopírovat. Tím do schránky systému zkopírujete aktivní vrstvu řezu a všechny vrstvy pod ní.
    Poznámka:

    Celý obraz můžete rychle vybrat výběrem volby Vybrat > Vše.

  2. V aplikaci Dreamweaver (zobrazení Návrh nebo Kód) umístěte kurzor na stránku do místa, kam chcete obraz vložit.

  3. Vyberte volbu Úpravy > Vložit.

  4. V dialogovém okně Optimalizace obrazu podle potřeby upravte nastavení optimalizace a klikněte na tlačítko OK.

  5. Uložte soubor obrazu pro web do místa uvnitř kořenové složky webového místa.

Aplikace Dreamweaver definuje obraz podle nastavení optimalizace a vloží verzi připravenou pro web na stránku. Informace o obrazu, například umístění zdrojového souboru PSD, se uloží do poznámky k návrhu, nezávisle na tom, zda jste ve webovém místě povolili poznámky k návrhu nebo ne. Poznámka k návrhu umožňuje vrátit se z aplikace Dreamweaver k původnímu souboru aplikace Photoshop.

Úprava vložených obrazů

Po vložení obrazů aplikace Photoshop na stránky aplikace Dreamweaver můžete upravit původní soubor PSD v aplikaci Photoshop. Při použití pracovního postupu kopírovat/vložit doporučuje společnost Adobe vždy provádět úpravy původního souboru PSD (místo vlastního obrazu připraveného pro web) a pak jej znovu vložit, aby se zachoval jeden zdroj.

Poznámka:

Aplikace Photoshop musí být nastavena jako primární editor externích obrazů pro typ souboru, které chcete upravovat.

  1. V aplikaci Dreamweaver vyberte obraz připravený pro web, který byl původně vytvořen v aplikaci Photoshop, a poté proveďte jeden z následujících úkonů:
    • Klikněte na tlačítko Úpravy v Inspektoru vlastností obrazu.
    • Při dvojitém kliknutí na soubor stiskněte klávesu Ctrl (Windows) nebo Apple (Macintosh).
    • Klepněte pravým tlačítkem myši (Windows) nebo podržte stisknutou klávesu Ctrl a klepněte (Macintosh) na obrázek, v místní nabídce vyberte volbu Upravit originál pomocí programu a pak zvolte aplikaci Photoshop.
    Poznámka:

    Tento postup předpokládá, že je aplikace Photoshop nastavena jako primární externí editor obrazu pro soubory PSD. Můžete také chtít nastavit aplikaci Photoshop jako výchozí editor souborů typu JPEG, GIF a PNG.

  2. Upravte soubor v aplikaci Photoshop.
  3. Vraťte se do aplikace Dreamweaver a vložte aktualizovaný obraz nebo výběr na stránku.

Chcete-li kdykoli změnit optimalizaci obrazu, můžete obraz vybrat a kliknout na tlačítko Upravit nastavení obrazu v Inspektoru vlastností.

Nastavení voleb dialogového okna Optimalizace obrazu

Pokud vytvoříte inteligentní objekt nebo vložíte výběr z aplikace Photoshop, aplikace Dreamweaver zobrazí dialogové okno Optimalizace obrazu. (Aplikace Dreamweaver zobrazí toto dialogové okno také pro jakýkoli jiný typ obrazu, pokud tento obraz vyberete a kliknete na tlačítko Upravit nastavení obrazu v Inspektoru vlastností.) V tomto dialogovém okně je možné definovat nastavení pro obrazy připravené pro web pomocí správného poměru barvy, komprese a kvality a zobrazit jeho náhled.

Obraz připravený pro web je obraz, který dokážou zobrazit všechny moderní prohlížeče webu a který vypadá vždy stejně, nezávisle na operačním systému a prohlížeči. Obecně platí, že nastavení umožní dosáhnout kompromisu mezi kvalitou a velikostí souboru.

Poznámka:

Provedené nastavení ovlivní jen importovanou verzi souboru obrazu. Původní soubor PSD aplikace Photoshop nebo soubor PNG aplikace Fireworks vždy zůstane beze změny.

Přednastavení

Zvolte přednastavení, které nejlépe odpovídá vašim potřebám. Velikost souboru obrazu se změní v závislosti na vybraném přednastavení. Na pozadí se zobrazí okamžitý náhled obrazu s použitými nastaveními.

Například pro obrazy, které je třeba zobrazit s vysokou průzračností, zvolte přednastavení PNG24 pro fotografie (ostré detaily).  Pokud vkládáte vzorek, který poslouží jako pozadí stránky, zvolte přednastavení GIF pro obrazy na pozadí (vzory).


Jakmile přednastavení vyberete, zobrazí se jeho konfigurovatelné volby.  Chcete-li pokračovat v přizpůsobování nastavení optimalizace, změňte hodnoty pro tyto volby.

Získejte pomoc rychleji a snáze

Nový uživatel?

Rychlé odkazy

Zobrazit všechny vaše plány Správa plánů
Zobrazit rychlé odkazy
Skrýt rychlé odkazy

Právní upozornění    |    Zásady ochrany osobních údajů online