O obrazech

Existuje mnoho různých typů formátů grafických souborů, ale pro webové stránky se obvykle používají tři z nich – GIF, JPEG a PNG. Soubory GIF a JPEG jsou nejlépe podporované a lze je zobrazit ve většině prohlížečů.

GIF (Graphic Interchange Format)

Soubory GIF používají maximálně 256 barev a jsou nejvhodnější pro zobrazování obrazů s nespojitými barevnými tóny nebo s velkými oblastmi jednolitých barev (například navigační pruhy, tlačítka, ikony, loga) nebo jiných obrazů s jednotnými barvami a tóny.

JPEG (Joint Photographic Experts Group)

Formát JPEG je výborný pro fotografie nebo obrazy s plynulými tóny, protože soubory JPEG mohou obsahovat miliony barev. Při zvětšení kvality souboru JPEG se zvětší také velikost souboru a doba stahování. Pomocí komprese souboru JPEG je často možné dosáhnout vyvážení kvality obrazu a velikosti souboru.

PNG (Portable Network Group)

Formát PNG je nepatentovaná náhrada souborů GIF a podporuje indexované barvy, stupně šedi a obrazy v barvách True Color a také alfa kanál pro průhlednost. PNG je nativní formát souboru v programu Adobe® Fireworks®. Soubory PNG si zachovávají všechny původní informace o vrstvách, vektorech, barvách a efektech (například vržené stíny) a všechny elementy jsou vždy plně upravitelné. Aby aplikace Dreamweaver rozpoznala soubory jako PNG, musí mít příponu .png.

Vložení obrazu

Při vložení obrazu do dokumentu aplikace Dreamweaver se ve zdrojovém kódu HTML vytvoří odkaz na soubor tohoto obrazu. Aby byl tento odkaz správný, musí se soubor obrazu nacházet v aktuálním webu. Pokud tomu tak není, aplikace Dreamweaver se dotáže, zda chcete soubor do webu zkopírovat.

Obrazy lze vkládat také dynamicky. Dynamické obrazy jsou obrazy, které se často mění. Například systémy rotace reklamních proužků náhodně vyberou jeden proužek ze seznamu dostupných proužků a při aktivaci stránky dynamicky zobrazí obraz vybraného proužku.

Po vložení obrazu můžete nastavit atributy usnadnění přístupu tagu obrazu, které mohou číst programy pro čtení z obrazovky pro slabozraké uživatele. Tyto atributy lze upravit v kódu HTML.

Výuková lekce o vkládání obrazů viz Přidávání obrazů.

  1. V okně dokumentu umístěte textový kurzor na místo, kde se má obraz zobrazit, a proveďte jeden z následujících úkonů:

    • V kategorii Společné na panelu Vložit klepněte na ikonu Obrazy .
    • V kategorii Společné na panelu Vložit klepněte na tlačítko Obrazy a vyberte ikonu Obraz. Ikonu Obraz zobrazenou v panelu Vložit je možné přetáhnout do okna Dokument (případně do okna zobrazení kódu).
    • Vyberte volbu Vložit > Obraz.
    • Přetáhněte obraz z panelu Datové zdroje (Okna > Datové zdroje) do požadovaného umístění v okně dokumentu; pokračujte krokem 3.
    • Přetáhněte obraz z panelu Soubory do požadovaného umístění v okně dokumentu; pokračujte krokem 3.
    • Přetáhněte obraz z pracovní plochy do požadovaného umístění v okně dokumentu; pokračujte krokem 3.
  2. V dialogovém okně, které se objeví, proveďte jeden z následujících úkonů:
    • Vyberte volbu Souborový systém a zvolte soubor obrazu.
    • Vyberte volbu Zdroj dat a zvolte zdroj dynamického obrazu.
    • Klikněte na tlačítko Weby a servery a zvolte soubor obrazu ve vzdálené složce jednoho z webů aplikace Dreamweaver.
  3. Vyhledejte obraz nebo zdroj obsahu, který chcete vložit.

    Pokud pracujete v neuloženém dokumentu, aplikace Dreamweaver vytvoří odkaz file:// na soubor obrazu. Po uložení dokumentu kdekoliv ve webovém místě aplikace Dreamweaver odkaz převede na cestu relativní k dokumentu.

    Poznámka:

    Při vkládání obrazů je také možné použít absolutní cestu k obrazu, který se nachází na vzdáleném serveru (například obraz, který není dostupný na lokálním pevném disku). Pokud se ale při práci vyskytnou problémy s výkonem počítače, můžete vypnout zobrazování obrazu v zobrazení Návrh odznačením volby Příkazy > Zobrazovat externí soubory.

  4. Klikněte na tlačítko OK. Pokud jste v předvolbách (Úpravy > Předvolby) aktivovali dialogové okno Atributy tagu obrazu pro usnadnění přístupu, toto okno se zobrazí.

  5. Zadejte hodnoty do textových polí Alternativní text a Dlouhý popis a klepněte na tlačítko OK.
    • Do pole Alternativní text zadejte název nebo krátký popis obrazu. Program pro čtení obrazovky přečte informace, které sem zadáte. Zadaný text byste měli omezit na přibližně 50 znaků. Chcete-li vytvořit delší popis, zvažte zadání odkazu na soubor, který o obrazu obsahuje více informací, do textového pole Dlouhý popis.
    • Do pole Dlouhý popis zadejte umístění souboru, který se zobrazí po klepnutí na obraz, nebo soubor vyhledejte klepnutím na ikonu složky. Toto textové pole obsahuje odkaz na soubor, který souvisí s obrazem nebo obsahuje více informací o něm.

    Poznámka:

    Podle potřeby můžete zadat informace do jednoho nebo obou textových polí. Program pro čtení z obrazovky čte atribut Alt obrazu.

    Poznámka:

    Pokud kliknete na tlačítko Zrušit, obraz se v dokumentu zobrazí, ale aplikace Dreamweaver k němu nepřiřadí atributy ani tagy pro usnadnění přístupu.

  6. V inspektoru Vlastnosti (Okna > Vlastnosti) nastavte vlastnosti obrazu.

Nastavení vlastností obrazu

Inspektor Vlastnosti obrazů umožňuje nastavení vlastností obrazu. Pokud nevidíte všechny vlastnosti obrazu, klepněte na rozbalovací šipku v pravém dolním rohu.

Vlastnosti obrazu v inspektoru Vlastnosti
  1. Výběrem volby Okna > Vlastnosti zobrazíte inspektor Vlastnosti vybraného obrazu.

  2. Do textového pole pod miniaturou zadejte název, abyste mohli na obraz odkazovat při použití chování aplikace Dreamweaver (například Zaměnit obraz) nebo při používání skriptovacího jazyka (například JavaScript nebo VBScript).
  3. Nastavte libovolné volby obrazu.

    Š a V

    Šířka a výška obrazu v obrazových bodech. Při vložení obrazu do stránky aplikace Dreamweaver automaticky vyplní tato textová pole původními rozměry obrazu.

    Pokud nastavíte hodnoty šířky a výšky, které neodpovídají skutečné výšce a šířce obrazu, obraz se nemusí v prohlížeči zobrazit správně. (Chcete-li obnovit původní hodnoty, klepněte na popisy textových polí Š a V nebo na tlačítko Obnovit velikost obrazu, které se zobrazí vpravo od textových polí Š a V při zadání nové hodnoty.)

    Poznámka:

    Tyto hodnoty můžete změnit a změnit tak i měřítko zobrazení této instance obrazu, ale doba stahování se tím nezmenší, protože prohlížeč před použitím měřítka stáhne veškerá obrazová data. Chcete-li zkrátit dobu stahování a zajistit, aby se všechny instance obrazu zobrazovaly ve stejné velikosti, upravte rozměry obrazů pomocí aplikace pro úpravy obrazů.

    Zdroj

    Určuje zdrojový soubor obrazu. Klepnutím na ikonu složky můžete soubor vyhledat; můžete také přímo zadat cestu.

    Odkaz

    Určuje hypertextový odkaz na obraz. Přetáhněte ikonu Ukázat na soubor na soubor v panelu Soubory, klepněte na ikonu složky a přejděte na dokument ve webovém místě nebo ručně zadejte adresu URL.

    Alt

    Určuje alternativní text, který se zobrazí na místě obrazu v textových prohlížečích nebo v prohlížečích nastavených na ruční stahování obrazů. Slabozrakým uživatelům čtou syntetizátory hlasu v textových prohlížečích tento text nahlas. V některých prohlížečích se tento text také zobrazí v případě, že nad obraz přesunete ukazatel.

    Nástroje název mapy a aktivní oblast

    Umožňují popsat a vytvořit obrazovou mapu na straně klienta.

    Cíl

    Určuje rámec nebo okno, do kterého se navázaná stránka načte. (Volba není dostupná v případě, že obraz není navázán na jiný soubor.) Názvy všech rámců v aktuální sadě rámců se zobrazují v seznamu Cíl. Můžete vybrat také z následujících vyhrazených názvů cílů:

    • _blank načte navázaný soubor do nového nepojmenovaného okna prohlížeče.

    • _parent načte navázaný soubor do rodičovské sady rámců nebo okna rámce, který obsahuje odkaz. Pokud rámec, který obsahuje odkaz, není vnořený, navázaný soubor se načte do celého okna prohlížeče.

    • _self načte navázaný soubor do stejného rámce nebo okna jako odkaz. Tento cíl je výchozí, takže ho obvykle nemusíte určovat.

    • _top načte navázaný soubor do celého okna prohlížeče a odstraní tak všechny rámce.

    Upravit

    Spustí editor obrazů, který zadáte v předvolbách externích editorů, a otevře vybraný obraz.

    Aktualizovat podle originálu

    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 Vlastnosti, 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.

    Úprava nastavení obrazu

     Otevře dialogové okno Optimalizace obrazu a umožní optimalizovat obraz.

    Oříznout

     Ořízne obraz a tak z něho odstraní nepotřebné oblasti.

    Převzorkovat

     Převzorkuje obraz se změněnou velikostí a zlepší tak jeho kvalitu pro novou velikost a tvar.

    Jas a kontrast

     Upravuje nastavení jasu a kontrastu obrazu.

    Zostřit

     Upravuje ostrost obrazu.

Úpravy atributů přístupnosti obrazu v kódu

Pokud jste pro obraz vložili atributy usnadnění přístupu, můžete jejich hodnoty upravit v kódu HTML.

  1. V okně dokumentu vyberte obraz.
  2. Proveďte jeden z následujících úkonů:
    • Upravte příslušné atributy obrazu v zobrazení kódu.
    • Klepněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) a vyberte volbu Upravit tag.
    • V inspektoru Vlastnosti upravte hodnotu Alt.

Vizuální změna velikosti obrazu

V aplikaci Dreamweaver můžete vizuálně měnit velikost elementů, jako jsou obrazy, zásuvné moduly, soubory Shockwave nebo SWF, aplety a ovladače ActiveX.

Pomocí vizuální změny velikosti obrazu zjistíte, jakým způsobem obraz ovlivňuje rozvržení při různých rozměrech, ale nedojde ke změně velikosti souboru obrazu na zadané proporce. Pokud v aplikaci Dreamweaver vizuálně změníte velikost obrazu bez změny měřítka souboru obrazu na požadovanou velikost v aplikaci pro úpravu obrazů (například Adobe Fireworks), prohlížeč uživatele změní měřítko obrazu po načtení stránky. To může způsobit prodlevu při stahování stránky a nesprávné zobrazení obrazu v prohlížeči uživatele. Chcete-li zkrátit dobu stahování a zajistit, aby se všechny instance obrazu zobrazovaly ve stejné velikosti, upravte rozměry obrazů pomocí aplikace pro úpravy obrazů.

Pokud v aplikaci Dreamweaver měníte velikost obrazu, můžete obraz převzorkovat, aby vyhovoval novým rozměrům. Převzorkování přidává nebo odebírá obrazové body z obrazových souborů JPEG a GIF se změněnou velikostí tak, aby co nejlépe odpovídaly původnímu obrazu. Převzorkováním obrazu se zmenší velikost souboru a zlepší rychlost stahování.

Vizuální změna velikosti elementu

  1. Vyberte element (například obraz nebo soubor SWF) v okně dokumentu.

    Ovladače pro změnu velikosti se zobrazují dole a vpravo u elementu a v pravém dolním rohu. Pokud se ovladače nezobrazí, klepněte mimo element, jehož velikost chcete změnit, a pak ho vyberte znovu nebo ho vyberte klepnutím na příslušný tag v selektoru tagů.

  2. Upravte velikost elementu jedním z následujících úkonů:
    • Chcete-li upravit šířku elementu, přetáhněte pravé táhlo výběru.
    • Pokud chcete upravit výšku elementu, přetáhněte dolní táhlo výběru.
    • Pokud chcete upravit šířku i výšku elementu zároveň, přetáhněte rohové táhlo výběru.
    • Chcete-li při úpravách rozměrů zachovat proporce elementu (poměr šířky k výšce), táhněte rohové táhlo výběru se stisknutou klávesou Shift.
    • Pokud chcete upravit šířku a výšku elementu na určitou velikost (například 1 × 1 obrazový bod), zadejte číselnou hodnotu v inspektoru Vlastnosti. Velikost elementů lze vizuálně změnit na minimální hodnotu 8 × 8 obrazových bodů.
  3. Chcete-li vrátit velikost elementu do původních rozměrů, odstraňte v inspektoru Vlastnosti hodnoty v textových polích Š a V nebo klepněte na tlačítko Obnovit velikost v inspektoru Vlastnosti obrazu.

Vrácení obrazu do původní velikosti

  1. Klepněte na tlačítko Obnovit velikost  v inspektoru Vlastnosti obrazu.

Převzorkování obrazu se změněnou velikostí

  1. Změňte velikost obrazu podle postupu výše.
  2. Klepněte na tlačítko Převzorkovat  v inspektoru Vlastnosti obrazu.

    Poznámka:

    Není možné převzorkovat vyhrazená místa pro obraz nebo jiné elementy než bitmapové obrazy.

Vložení vyhrazeného místa pro obraz

Vyhrazené místo pro obraz je grafický prvek, který používáte až do doby, kdy je možné dokončenou kresbu přidat na webovou stránku. Můžete nastavit velikost a barvu vyhrazeného místa a také vytvořit jeho textový popis.

  1. V okně dokumentu umístěte textový kurzor do místa, kam chcete grafický prvek vyhrazeného místa vložit.
  2. Vyberte volbu Vložit > Obrazové objekty > Vyhrazené místo pro obraz.

  3. Do pole Název (volitelné) zadejte text, který se zobrazí jako popis vyhrazeného místa pro obraz. Pokud nechcete popis zobrazit, nechte textové pole prázdné. Název musí začínat písmenem a může obsahovat pouze písmena a číslice; mezery a znaky z horní poloviny ASCII tabulky nejsou povoleny.
  4. Do polí Šířka a Výška (vyžadované) zadejte hodnoty velikosti obrazu v obrazových bodech.
  5. V poli Color (barva) (volitelné) vyberte barvu provedením jednoho z následujících úkonů:
    • Vyberte barvu pomocí dialogu pro výběr barvy.
    • Zadejte hexadecimální hodnotu barvy (například #FF0000).
    • Zadejte název bezpečné webové barvy (například red (červená)).
  6. Do pole Alternativní text (volitelné) zadejte text, který popisuje obraz uživatelům používajícím textové prohlížeče.

    Poznámka:

    Do kódu HTML se automaticky vloží tag image obsahující prázdný atribut src.

  7. Klepněte na tlačítko OK.

    Barva, atributy velikosti a popis vyhrazeného místa se zobrazují následujícím způsobem:

    Vyhrazené místo pro obraz s atributy

    Při zobrazení v prohlížeči se text popisu a velikosti nezobrazují.

Nahrazení vyhrazeného místa pro obraz

Vyhrazené místo pro obraz v prohlížeči nezobrazuje obraz. Před publikováním webového místa nahraďte přidaná vyhrazená místa soubory webových obrazů, například GIF nebo JPEG.

Pokud máte aplikaci Fireworks, můžete z vyhrazeného místa pro obraz aplikace Dreamweaver vytvořit novou grafiku. Nový obraz se nastaví na stejnou velikost jako vyhrazené místo pro obraz. Obraz můžete upravit a pak ho nahradit v aplikaci Dreamweaver.

  1. V okně dokumentu proveďte jeden z následujících úkonů:
    • Poklepejte na vyhrazené místo pro obraz.
    • Kliknutím vyberte vyhrazené místo pro obraz a poté v inspektoru Vlastnosti (Okna > Vlastnosti) klikněte na ikonu složky vedle textového pole Zdroj.
  2. V dialogovém okně Zdroj obrazu vyhledejte obraz, kterým chcete nahradit vyhrazené místo, a klepněte na tlačítko OK.

Nastavení vlastností vyhrazeného místa pro obraz

Chcete-li nastavit vlastnosti vyhrazeného místa pro obraz, vyberte vyhrazené místo v okně Dokument a poté výběrem volby Okna > Vlastnosti zobrazte inspektor Vlastnosti. Kliknutím na rozbalovací šipku v pravém dolním rohu zobrazíte všechny vlastnosti.

Pomocí inspektoru Vlastnosti nastavíte název, šířku, výšku, zdroj obrazu, alternativní textový popis, zarovnání a barvu vyhrazeného místa pro obraz.

Inspektor Vlastnosti vyhrazeného místa pro obraz

V inspektoru Vlastnosti vyhrazeného místa jsou šedé textové pole a textové pole Zarovnání vypnutá. Tyto vlastnosti je možné nastavit v inspektoru Vlastnosti obrazu při nahrazení vyhrazeného místa obrazem.

  1. Nastavte libovolné z následujících voleb:

    Š a V

    Nastavte šířku a výšku vyhrazeného místa pro obraz v obrazových bodech.

    Zdroj

    Určuje zdrojový soubor obrazu. U vyhrazeného místa pro obraz je toto textové pole prázdné. Po klepnutí na tlačítko Procházet lze vybrat náhradní obraz pro grafiku vyhrazeného místa.

    Odkaz

    Určuje hypertextový odkaz na vyhrazené místo pro obraz. Přetáhněte ikonu Ukázat na soubor na soubor v panelu Soubory, klepněte na ikonu složky a přejděte na dokument ve webovém místě nebo ručně zadejte adresu URL.

    Alt

    Určuje alternativní text, který se zobrazí na místě obrazu v textových prohlížečích nebo v prohlížečích nastavených na ruční stahování obrazů. Slabozrakým uživatelům čtou syntetizátory hlasu v textových prohlížečích tento text nahlas. V některých prohlížečích se tento text také zobrazí v případě, že nad obraz přesunete ukazatel.

    Vytvořit

    Spustí aplikaci Fireworks, kde je možné vytvořit náhradní obraz. Tlačítko Vytvořit je dostupné pouze v případě, že je v počítači nainstalovaná aplikace Fireworks.

    Aktualizovat podle originálu

    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 Vlastnosti, 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.

    Barva

    Určuje barvu vyhrazeného místa pro obraz.

Úpravy obrazů v aplikaci Dreamweaver

Obrázky v aplikaci Dreamweaver můžete převzorkovat, oříznout, optimalizovat a zaostřit. Můžete také upravit jejich jas a kontrast.

Funkce pro úpravy obrazů

Aplikace Dreamweaver nabízí základní funkce pro úpravy obrazů, které do určité míry umožňují upravovat obrazy i bez použití externích aplikací (například Fireworks nebo Photoshop). Nástroje pro úpravy obrazů v aplikaci Dreamweaver jsou navrženy tak, aby umožňovaly snadnou spolupráci s návrháři obsahu odpovědnými za vytváření souborů obrazů pro web.

Poznámka:

Aby bylo možné používat funkce pro úpravy obrázků aplikace Dreamweaver, není nutné mít v počítači instalovánu aplikaci Fireworks ani jinou aplikaci pro úpravy obrázků.

  1. Vyberte volbu Změnit > Obraz. Nastavte libovolnou z těchto funkcí pro úpravy obrazů v aplikaci Dreamweaver:

    Převzorkovat

    Přidává nebo odebírá obrazové body z obrazových souborů JPEG a GIF se změněnou velikostí tak, aby co nejlépe odpovídaly původnímu obrazu. Převzorkováním obrazu se zmenší velikost souboru a zlepší rychlost stahování.

    Pokud v aplikaci Dreamweaver měníte velikost obrazu, můžete obraz převzorkovat tak, aby vyhovoval novým rozměrům. Při převzorkování bitmapového objektu se přidají nebo odeberou obrazové body a obraz se tak zvětší nebo zmenší. Převzorkování obrazu na vyšší rozlišení obvykle způsobí nepatrnou ztrátu kvality. Převzorkování na nižší rozlišení ale vždy způsobí ztrátu dat a obvykle i pokles kvality.

    Oříznout

    Upraví obraz tak, že zmenší jeho plochu. Obvykle budete obrazy ořezávat proto, aby byl více zvýrazněn předmět obrazu a aby se odstranily nepotřebné prvky obklopující ústřední část obrazu.

    Jas a kontrast

    Upraví kontrast nebo jas obrazových bodů v obrazu. To ovlivní světla, stíny a střední tóny obrazu. Nastavení jasu a kontrastu se používá většinou při úpravách příliš světlých nebo příliš tmavých obrazů.

    Zostřit

    Zostří obraz zvýšením kontrastu hran v obrazu. Při skenování obrazu nebo fotografování digitální fotografie většina programů pro zaznamenání obrazů změkčí hrany objektů v obrazu. Tím se zabrání ztrátě velmi jemných detailů v obrazových bodech, ze kterých se digitální obrazy skládají. Často je ale nutné zvýraznit detaily v souborech digitálních obrazů zostřením obrazu a tím zvýšit kontrast hran; obraz díky tomu vypadá ostřejší.

    Poznámka:

    Funkce pro úpravy obrazů v aplikaci Dreamweaver lze použít pouze na obrazy s formátem souboru JPEG, GIF a PNG. Jiné bitmapové formáty obrazů nelze pomocí těchto funkcí upravit.

Oříznutí obrazu

V aplikaci Dreamweaver můžete ořezávat bitmapové obrazy.

Poznámka:

Při oříznutí obrazu se změní zdrojový soubor obrazu na disku. Z tohoto důvodu je vhodné zachovat si záložní kopii obrazového souboru pro případ, že bude nutné se vrátit k jeho původní verzi.

  1. Otevřete stránku obsahující obraz, který chcete oříznout, vyberte obraz a proveďte jeden z následujících úkonů:
    • Klikněte na tlačítko nástroje oříznutí  v inspektoru Vlastnosti obrazu.
    • Vyberte volbu Změnit > Obraz > Oříznutí.
    • Kolem vybraného obrazu se objeví táhla oříznutí.
  2. Nastavte táhla oříznutí tak, aby ohraničovací rámeček obklopoval oblast obrazu, kterou chcete zachovat.
  3. Poklepáním uvnitř ohraničovacího rámečku nebo stiskem klávesy Enter výběr oříznete.
  4. Dialogové okno informuje, že oříznutý soubor obrazu se změní na disku. Klepněte na tlačítko OK. Všechny obrazové body ve vybrané bitmapě mimo ohraničovací rámeček se odstraní, ale ostatní objekty v obrazu zůstanou.
  5. Na náhledu obrazu zkontrolujte, zda odpovídá požadavkům. Pokud tomu tak není, vyberte volbu Úpravy > Zpět oříznutí a vraťte se tak k původnímu obrazu.

    Poznámka:

    Výsledek příkazu Oříznutí je možné vrátit zpět až do doby, než ukončíte aplikaci Dreamweaver nebo soubor upravíte v externí aplikaci pro úpravy obrazů.

Optimalizace obrazu

Obrazy na webových stránkách můžete optimalizovat v aplikaci Dreamweaver.

  1. Otevřete stránku obsahující obraz, který chcete optimalizovat, vyberte obraz a proveďte jeden z následujících úkonů:
    • Klikněte na tlačítko Upravit nastavení obrazu  v inspektoru Vlastnosti obrazu.
    • Vyberte volbu Změnit > Obraz > Optimalizovat.
  2. V dialogovém okně Optimalizace obrazu proveďte potřebné úpravy a klikněte na tlačítko OK.

Zostření obrazu

Zostření zvýší kontrast obrazových bodů v okolí hran objektů a tím zvýší jasnost a ostrost obrazu.

  1. Otevřete stránku obsahující obraz, který chcete zostřit, vyberte obraz a proveďte jeden z následujících úkonů:
    • Klikněte na tlačítko Zostřit  v inspektoru Vlastnosti obrazu.
    • Vyberte volbu Změnit > Obraz > Zostřit.
  2. Přetažením jezdce nebo zadáním hodnoty v rozmezí od 0 do 10 do textového pole je možné určit stupeň zostření, který aplikace Dreamweaver pro obraz použije. Při úpravách ostrosti obrazu pomocí příslušného dialogového okna si můžete změny obrazu prohlédnout.
  3. Až budete s obrazem spokojeni, klikněte na tlačítko OK.
  4. Uložte změny výběrem volby Soubor > Uložit nebo se vraťte k původnímu obrazu výběrem volby Úpravy > Zpět zostřit.

    Poznámka:

    Výsledek příkazu Zostřit lze vrátit pouze před uložením stránky, která obraz obsahuje. Po uložení stránky se změny obrazu trvale uloží.

Úpravy jasu a kontrastu obrazu

Jas a kontrast upraví kontrast nebo jas obrazových bodů v obrazu. To ovlivní světla, stíny a střední tóny obrazu. Nastavení jasu a kontrastu se používá většinou při úpravách příliš světlých nebo příliš tmavých obrazů.

  1. Otevřete stránku obsahující obraz, který chcete upravit, vyberte obraz a proveďte jeden z následujících úkonů:
    • Klikněte na tlačítko Jas/Kontrast  v inspektoru Vlastnosti obrazu.
    • Vyberte volbu Změnit > Obraz > Jas a kontrast.
  2. Upravte nastavení přetažením jezdců Jas a Kontrast. Hodnoty jsou v rozsahu od -100 do 100.
  3. Klepněte na tlačítko OK.

Vytvoření obrazu s efektem přechodu

Do stránek můžete vkládat obrazy s efektem přechodu. Efekt přechodu (rollover) je obraz, který se změní v případě, že přes něj v prohlížeči přesunete ukazatel.

Pro vytvoření efektu přechodu potřebujete dva obrazy: primární obraz (obraz, který se zobrazí při načtení stránky) a sekundární obraz (obraz, který se zobrazí při přesunu ukazatele přes primární obraz). Oba obrazy v efektu přechodu by měly mít stejnou velikost. V případě, že je jejich velikost různá, aplikace Dreamweaver změní velikost druhého obrazu tak, aby odpovídala vlastnostem prvního obrazu.

Obrazy s efektem přechodu jsou automaticky nastaveny tak, aby odpovídaly na událost onMouseOver. Obraz lze nastavit tak, aby odpovídal na jinou událost (například klepnutí myší), nebo ho změnit.

  1. V okně dokumentu umístěte textový kurzor do místa, kde se má efekt přechodu zobrazit.
  2. Vložte efekt přechodu pomocí jednoho z následujících postupů:
    • V kategorii Společné v panelu Vložit klepněte na tlačítko Obrazy a vyberte ikonu Obraz s rolloverem. Když je ikona Obraz s rolloverem zobrazená v panelu Vložit, můžete ji přetáhnout do okna Dokument.
    • Vyberte volbu Vložit > Obrazové objekty > Obraz s rolloverem.
  3. Nastavte volby a klepněte na tlačítko OK.

    Název obrazu

    Název obrazu s efektem přechodu.

    Původní obraz

    Obraz, který chcete zobrazit při načtení stránky. Zadejte cestu do textového pole nebo klepněte na tlačítko Procházet a obraz vyberte.

    Obraz s efektem přechodu

    Obraz, který chcete zobrazit při přesunutí ukazatele nad původní obraz. Zadejte cestu nebo klepněte na tlačítko Procházet a obraz vyberte.

    Načíst předem obraz s efektem přechodu

    Načte obrazy předem do vyrovnávací paměti prohlížeče; při přesunu ukazatele přes obraz pak nedojde k žádné prodlevě.

    Alternativní text

    (Volitelně) Text, který popisuje obraz uživatelům používajícím textové prohlížeče.

    Po klepnutí jít na URL

    Soubor, který se otevře po klepnutí na obraz s efektem přechodu. Zadejte cestu nebo klepněte na tlačítko Procházet a soubor vyberte.

    Poznámka:

    Pokud pro obraz nenastavíte odkaz, aplikace Dreamweaver vloží do zdrojového kódu HTML, ke kterému je chování rolloveru připojeno, nulový odkaz (#). Pokud nulový odkaz odstraníte, obraz s rolloverem nebude nadále fungovat.

  4. Vyberte volbu Soubor > Náhled v prohlížeči nebo stiskněte klávesu F12.

  5. V prohlížeči zobrazte obraz s efektem přechodu přesunutím ukazatele přes původní obraz.

    Poznámka:

    V zobrazení Návrh funkci obrazu s efektem přechodu neuvidíte.

Používání externího editoru obrazů

V aplikaci Dreamweaver můžete otevřít vybraný obraz v externím editoru obrazů. Jakmile upravený soubor uložíte a vrátíte se do aplikace Dreamweaver, provedené změny se zobrazí v okně Dokument.

Jako primární externí editor lze nastavit aplikaci Fireworks. Je také možné nastavit, které typy souborů bude editor otvírat; můžete také vybrat více editorů obrazů. Můžete například nastavit předvolby tak, aby se pro úpravu souboru GIF spustil aplikaci Fireworks a pro úpravu souboru JPG nebo JPEG jiný editor obrazů.

Spuštění externího editoru obrazů

  1. Proveďte jeden z následujících úkonů:
    • Poklepejte na obraz, který chcete upravit.
    • Klikněte pravým tlačítkem (Windows) nebo s klávesou Ctrl (Macintosh) na obraz, který chcete upravit, vyberte volbu Upravit v programu > Procházet a vyberte editor.
    • Vyberte obraz, který chcete upravit, a v inspektoru Vlastnosti klepněte na tlačítko Upravit.
    • Dvakrát klikněte na soubor obrazu v panelu Soubory a spusťte tak primární editor obrazů. Pokud jste žádný editor obrazů neurčili, aplikace Dreamweaver spustí výchozí editor daného typu souborů.

    Poznámka:

    Při otevření obrazu z panelu Soubory se prvky integrace aplikace Fireworks neprojeví; aplikace Fireworks neotevře původní soubor PNG. Chcete-li prvky integrace aplikace Fireworks použít, otevírejte obrazy z okna dokumentu.

    Pokud po návratu do okna aplikace Dreamweaver nevidíte aktualizovaný obraz, vyberte ho a v inspektoru Vlastnosti klikněte na tlačítko Obnovit.

Nastavení externího editoru obrazů pro existující typ souboru

Můžete vybrat editor obrazů pro otevírání a úpravy grafických souborů.

  1. Otevřete dialogové okno s předvolbami Typy souborů/editory provedením jednoho z následujících úkonů:
    • Vyberte volbu Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh) a v seznamu kategorií vlevo vyberte Typy souborů/editory.
    • Vyberte volbu Úpravy > Upravit v: externí editor a vyberte volbu Typy souborů/editory.
  2. V seznamu Přípony vyberte příponu souborů, které se mají v externím editoru otevírat.
  3. Klikněte na tlačítko Přidat (+) nad seznamem Editory.
  4. V dialogovém okně Vybrat externí editor vyhledejte aplikaci, kterou chcete spouštět jako editor tohoto typu souboru.

  5. Pokud chcete, aby tento editor byl primárním editorem tohoto typu souboru, klikněte na volbu Změnit na primární v dialogovém okně Předvolby.

  6. Pokud chcete pro tento typ souboru nastavit další editor, opakujte kroky 3 a 4.

    Aplikace Dreamweaver pro úpravu tohoto typu obrazu automaticky používá primární editor. Ostatní uvedené editory je možné vybrat v kontextové nabídce obrazu v okně dokumentu.

Přidání nového typu souborů do seznamu Přípony

  1. Otevřete dialogové okno předvolby Typy souborů/editory provedením jednoho z následujících úkonů:

    • Vyberte volbu Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh) a v seznamu kategorií vlevo vyberte položku Typy souborů/editory.
    • Vyberte volbu Úpravy > Upravit v: externí editor a vyberte volbu Typy souborů/editory.
  2. V dialogovém okně předvolby Typy souborů/editory klikněte na tlačítko Přidat (+) nad seznamem Přípony.

    V seznamu Přípony se zobrazí textové pole.

  3. Zadejte příponu typu souboru, jehož editor chcete spustit.
  4. Chcete-li vybrat externí editor typu souboru, klepněte na tlačítko Přidat (+) nad seznamem Editory.
  5. V zobrazeném dialogovém okně vyberte aplikaci, pomocí které chcete tento typ obrazu upravovat.
  6. Pokud chcete, aby tento editor byl primárním editorem typu obrazu, klepněte na volbu Změnit na primární.

Změna předvolby existujícího editoru

  1. Otevřete dialogové okno předvolby Typy souborů/editory provedením jednoho z následujících úkonů:

    • Vyberte volbu Úpravy > Předvolby (Windows) nebo Dreamweaver > Předvolby (Macintosh) a v seznamu kategorií vlevo vyberte Typy souborů/editory.
    • Vyberte volbu Úpravy > Upravit v: externí editor a vyberte volbu Typy souborů/editory.
  2. V dialogovém okně předvoleb Typy souborů/editory vyberte v seznamu Přípony typ souboru, který chcete změnit, a zobrazte tak existující editory.

  3. V seznamu Editory vyberte editor, který chcete upravit, a proveďte jeden z následujících úkonů:
    • Klepnutím na tlačítka Přidat (+) nebo Odstranit (-) nad seznamem Editory přidáte nebo odstraníte editor.
    • Klepnutím na tlačítko Změnit na primární vyberete editor, který se standardně otevře pro úpravy.

Aplikování chování na obrazy

Na obraz nebo aktivní oblast obrazu můžete aplikovat libovolné dostupné chování. Při použití chování na aktivní oblast aplikace Dreamweaver vloží zdrojový kód HTML do tagu area. Výslovně pro obrazy se používají tři chování: Načíst obrazy předem, Zaměnit obraz a Obnovit zaměněný obraz.

Načíst obrazy předem

Načte do vyrovnávací paměti prohlížeče obrazy, které se na stránce nezobrazí hned (například ty, které budou zaměněny pomocí chování, AP elementů nebo JavaScript). Tím se zabrání prodlevám způsobeným stahováním obrazů ve chvíli, kdy se mají zobrazit.

Zaměnit obraz

Zamění jeden obraz za jiný změnou atributu SRC tagu img. Pomocí této akce vytvoříte efekty přechodu tlačítek a jiné obrazové efekty (včetně zaměňování více obrazů zároveň).

Obnovit zaměněný obraz

Obnoví poslední sadu zaměněných obrazů na jejich předchozí zdrojové soubory. Tato akce se standardně automaticky přidá při každém připojení akce Zaměnit obraz k objektu; pravděpodobně ji nikdy nebudete muset vybírat ručně.

Pomocí chování můžete také vytvářet dokonalejší navigační systémy, například navigační pruhy nebo nabídky odkazů.

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