- Příručka uživatele aplikace Dreamweaver
- Úvod
- Dreamweaver a Creative Cloud
- Pracovní plochy a zobrazení aplikace Dreamweaver
- Nastavení webů
- O webech aplikace Dreamweaver
- Nastavení lokální verze webu
- Připojení k publikačnímu serveru
- Nastavení testovacího serveru
- Import a export nastavení webu aplikace Dreamweaver
- 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
- Funkce usnadnění přístupu v aplikaci Dreamweaver
- Rozšířená nastavení
- Nastavení předvoleb webového místa pro přenos souborů
- Úprava nastavení serveru proxy v aplikaci Dreamweaver
- Synchronizace nastavení aplikace Dreamweaver ve službě Creative Cloud
- Používání systému Git v aplikaci Dreamweaver
- Správa souborů
- Vytváření a otevírání souborů
- Správa souborů a složek
- Získání souborů ze serveru a odeslání souborů na server
- Zpřístupnění/vyhrazení souborů
- Synchronizace souborů
- Porovnání souborů a nalezení rozdílů
- Maskování souborů a složek ve webu aplikace Dreamweaver
- Povolení poznámek k návrhu pro weby Dreamweaver
- Předcházení potenciálnímu zneužití modulu Gatekeeper
- Rozvržení a návrh
- Používání vizuálních pomůcek pro rozvržení
- O používání souborů CCS k rozvržení stránky
- Navrhování responzivních webů pomocí nástroje Bootstrap
- Vytvoření a používání multimediálních dotazů v aplikaci Dreamweaver
- Zobrazení obsahu pomocí tabulek
- Barvy
- Responzivní návrh s využitím rozvržení s plovoucí mřížkou
- Funkce Extrakt v aplikaci Dreamweaver
- CSS
- Vysvětlení kaskádových seznamů stylů
- Rozvržení stránek pomocí panelu CSS Designer
- Použití preprocesorů CSS v aplikaci Dreamweaver
- Postup nastavení předvoleb stylu CSS v aplikaci Dreamweaver
- Přesunutí pravidel CSS v aplikaci Dreamweaver
- Převedení inline CSS na pravidlo CSS v aplikaci Dreamweaver
- Práce s tagy div
- Použití přechodů na pozadí
- Vytváření a úprava efektů přechodů v aplikaci Dreamweaver
- Formátování kódu
- Obsah stránky a datové zdroje
- Nastavení vlastností stránky
- Nastavení vlastností nadpisů CSS a vlastností odkazu CSS
- Práce s textem
- Vyhledání a nahrazení textu, tagů a atributů
- Panel DOM
- Úpravy v živém zobrazení
- Kódování dokumentů v aplikaci Dreamweaver
- Výběr a zobrazení elementů v okně dokumentu
- Nastavení vlastností textu v Inspektoru vlastností
- Kontrola pravopisu webové stránky
- Pomocí vodorovných linek v aplikaci Dreamweaver
- Přidání a úprava kombinací písma v aplikaci Dreamweaver
- Práce s datovými zdroji
- Vložení a aktualizace dat v aplikaci Dreamweaver
- Vytvoření a správa oblíbených datových zdrojů v aplikaci Dreamweaver
- Vložení a úprava obrázků v aplikaci Dreamweaver
- Přidání multimediálních objektů
- Přidání videa v aplikaci Dreamweaver
- Vložení videa HTML 5
- Vložit soubory SWF
- Přidání zvukových efektů
- Vložte zvuk HTML5 v aplikaci Dreamweaver
- Práce s položkami knihoven
- Používání arabského a hebrejského textu v aplikaci Dreamweaver
- Odkazy a navigace
- Ovládací prvky a efekty jQuery
- Kódování webových stránek
- Informace o psaní kódu v aplikaci Dreamweaver
- Prostředí pro psaní kódu v aplikaci Dreamweaver
- Nastavení předvoleb kódování
- Přizpůsobení barevného zvýraznění kódu
- Psaní a úprava kódu
- Našeptávání kódu a dokončování kódu
- Sbalení a rozbalení kódu
- Opakované použití kódu v podobě výstřižků
- Linting kódu
- Optimalizace kódu
- Úprava kódu v zobrazení Návrh
- Práce s obsahem hlavičky stránek
- Vložení zahrnutí na straně serveru v aplikaci Dreamweaver
- Používání knihoven tagů v aplikaci Dreamweaver
- Import vlastních tagů do aplikace Dreamweaver
- Práce s funkcemi JavaScriptu (obecné pokyny)
- Použití vestavěných chování jazyka JavaScript
- O XML a XSLT
- Provádění transformace XSL na straně serveru v aplikaci Dreamweaver
- Provádění transformace XSL na straně klienta v aplikaci Dreamweaver
- Přidání entit znaku pro XSLT v aplikaci Dreamweaver
- Formátování kódu
- Pracovní postupy pro různé produkty
- Instalace a používání rozšíření v aplikaci Dreamweaver
- Aktualizace v rámci aplikace v aplikaci Dreamweaver
- Vkládání dokumentů sady Microsoft Office v aplikaci Dreamweaver (jen ve Windows)
- Práce s aplikacemi Fireworks a Dreamweaver
- Úprava obsahu na webech Dreamweaver za pomoci aplikace Contribute
- Integrace mezi aplikacemi Dreamweaver a Business Catalyst
- Vytváření e-mailových kampaní na míru
- Šablony
- O předlohách aplikace Dreamweaver
- Rozpoznání předloh a dokumentů založených na předloze
- Vytvoření předlohy aplikace Dreamweaver
- Vytváření upravitelných oblastí v šablonách
- Vytváření opakovaných oblastí a tabulek v aplikaci Dreamweaver
- Použijte volitelné oblasti v předlohách
- Definování upravitelných atributů tagu v aplikaci Dreamweaver
- Postup vytvoření vnořených šablon v aplikaci Dreamweaver
- Úprava, aktualizace nebo odstranění předloh
- Export a import obsahu XML v aplikaci Dreamweaver
- Aplikace nebo odstranění předlohy z existujícího dokumentu.
- Úprava obsahu v předlohách Dreamweaver
- Pravidla syntaxe pro tagy předloh v aplikaci Dreamweaver
- Nastavení předvoleb zvýraznění pro oblasti předlohy
- Výhody používání předloh v aplikaci Dreamweaver
- Mobilní zařízení a zařízení s více displeji
- Dynamické weby, stránky a webové formuláře
- Informace o webových aplikacích
- Nastavení počítače pro vývoj aplikací
- Řešení problémů s připojením databází
- Odstranění skriptů připojení v aplikaci Dreamweaver
- Návrh dynamických stránek
- Přehled zdrojů dynamického obsahu
- Definice zdrojů dynamického obsahu
- Přidání dynamického obsahu na stránky
- Změna dynamického obsahu v aplikaci Dreamweaver
- Zobrazení záznamů databáze
- Zajišťování a řešení potíží s živými daty v aplikaci Dreamweaver
- Přidání uživatelského chování serveru v aplikaci Dreamweaver
- Vytváření formulářů pomocí aplikace Dreamweaver
- Shromažďování informací od uživatelů pomocí formulářů
- Vytváření a povolení formulářů ColdFusion v aplikaci Dreamweaver
- Vytváření webových formulářů
- Rozšířená podpora formátu HTML5 pro elementy formuláře
- Vytváření formuláře pomocí aplikace Dreamweaver
- Vizuální vytváření aplikací
- Vytváření hlavních a podrobných stránek v aplikaci Dreamweaver
- Vytváření vyhledávacích stránek a stránek s výsledky
- Vytvoření stránky vložení záznamu
- Vytvoření stránky pro aktualizaci záznamu v aplikaci Dreamweaver
- Budování stránek pro odstranění záznamu v aplikaci Dreamweaver
- Používání příkazů ASP k úpravě databáze v aplikaci Dreamweaver
- Vytvoření registrační stránky
- Vytvoření přihlašovací stránky
- Vytvoření stránky, na kterou mají přístup pouze autorizovaní uživatelé
- Zabezpečení složek ve službě ColdFusion pomocí aplikace Dreamweaver
- Používání komponent ColdFusion v aplikaci Dreamweaver
- Testování, náhled a publikování webových stránek
- Odstraňování problémů
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
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.
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.
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.
-
V aplikaci Dreamweaver (zobrazení Návrh nebo Kód) umístěte kurzor na stránku do místa, kam chcete obraz vložit.
-
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.
-
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.
-
V dialogovém okně Optimalizace obrazu, které se zobrazí, upravte dle potřeby nastavení optimalizace a klikněte na tlačítko OK.
-
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é.
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ě.
-
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.
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).
-
Na panelu Soubory zobrazte kliknutím na záložku Datové zdroje tyto zdroje na webu.
-
Ujistěte se, zda je vybráno zobrazení Obrazy. Pokud tomu tak není, klikněte na tlačítko Obrazy.
-
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í.
-
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.
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.
-
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í.
-
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.
Aplikaci Photoshop musíte mít nastavenu jako primární editor externích obrazů.
-
Vyberte inteligentní objekt v okně Dokument.
-
V Inspektoru vlastností klikněte na tlačítko Upravit.
-
Proveďte změny v aplikaci Photoshop a uložte nový soubor PSD.
-
V aplikaci Dreamweaver znovu vyberte inteligentní objekt a klikněte na tlačítko Aktualizovat podle originálu.
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.
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í.
-
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.
-
V aplikaci Dreamweaver (zobrazení Návrh nebo Kód) umístěte kurzor na stránku do místa, kam chcete obraz vložit.
-
Vyberte volbu Úpravy > Vložit.
-
V dialogovém okně Optimalizace obrazu podle potřeby upravte nastavení optimalizace a klikněte na tlačítko OK.
-
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.
Aplikace Photoshop musí být nastavena jako primární editor externích obrazů pro typ souboru, které chcete upravovat.
-
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.
-
Upravte soubor v aplikaci Photoshop.
-
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.
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.