Macromedia Dreamweaver 3 a Fireworks 3 Studio
Webové šitíčko
Integrace a poskytování integrovaných služeb je jedním z trendů současnosti. Nejinak je tomu i v oblasti webových nástrojů, kde vznikají balíky navzájem propojeného softwaru pro přípravu kompletního obsahu webu. Svůj příspěvek do této oblasti nedávno představila také firma Macromedia.

Vezměte nejnovější verze jedněch z nejlepších programů ve svých oblastech, přidejte integrující prvky, vše nabídněte v rámci jednoho softwarového balíku a úspěch je téměř zaručen. Takto lze stručně popsat vznik nového integrovaného balíku pro přípravu webového obsahu od firmy Macromedia. Řeč je samozřejmě o integraci špičkového editoru webové grafiky Fireworks a podobně úspěšného vizuálního editoru webových stránek Dreamweaver. Oba programy nyní již ve svých třetích verzích nabízejí snadný přístup k novým technologiím webu, takže příprava vizuálně atraktivních webových stránek je zase o něco snazší. Obsah a nápady si ovšem pořád musí každý obstarávat sám.

Macromedia Fireworks 3
Chcete-li pro přípravu webové grafiky používat jediný program, potom je Macromedia Fireworks jistě ten vhodný produkt. To jsme tvrdili již o verzi 2 (viz Chip 11/99) a nová verze 3 je v tomto směru ještě přesvědčivější. Řada novinek vede především ke zjednodušení používání programu a přibyly také nové užitečné funkce. Podívejme se ale na novinky v kontextu celého programu.
Stroj na obrázky
Macromedia Fireworks je program vhodný jak pro úpravu již hotových obrázků, kdy se využívají především jeho bitmapové funkce, tak i pro přípravu nových grafik, kdy se pro změnu uplatní vektorové nástroje. Integrace obou typů grafiky je zcela přirozená, což jen umocňuje plynulost práce s programem. Uživatel prostě pracuje tak, jak je zvyklý, a potřebné nástroje jsou vždy po ruce.
K dispozici jsou samozřejmě všechny běžné nástroje pro kreslení, úpravy výplní, textur a čar, pro snadnou práci s barvou a průhledností. Nechybí ani oblíbené vrstvy pro přehlednější organizaci obrázků při kolážích. Hezkým příkladem přirozené práce je text, který zůstává plně editovatelný i po aplikaci různých grafických efektů, jako jsou stíny, úkosy nebo záře. Novinkou je zobrazení všech typografických vlastností textu včetně písma při úpravách v samostatném okně. Hezká je také možnost připnout text na libovolnou křivku.
Uživatelé pracující s bitmapovou grafikou (je-li to potřeba, vektorové obrázky se na bitmapy převedou automaticky) uvítají nové editační možnosti, jako je změna jasu a kontrastu a možnost volby různých interpolačních technik při změně velikosti a rotacích. Rotovat lze nyní najednou také celé plátno.
Kreativní práci s obrázky může umocnit další nová funkce skrytá v panelu History. Ten se poprvé objevil ve Photoshopu 5 a uživatelé si ho nemohou vynachválit. V tomto panelu se totiž zaznamenávají veškeré akce provedené s obrázkem, takže se lze pohodlně vracet k předchozím verzím obrázku, je možné vybranou sekvenci úprav “přehrát” na jinou část obrázku nebo po uložení aplikovat na jiný obrázek. S panelem History se už nemusíte bát, že provedené změny budou nevratné. Jen pozor, historie změn zmizí po zavření dokumentu.
Náhled na obrázek je nyní k dispozici přímo v okně pro editaci, vyzkoušet je zde možné i veškeré animace a interaktivní efekty. Tato inovace si vyžádala přítomnost nového panelu pro nastavení parametrů určených pro optimalizaci grafiky. Obrázek lze ručně či automaticky rozřezat na části a každá taková část potom může používat jiné nastavení parametrů optimalizace. Pro porovnání různých nastavení lze opět přímo v editačním okně zobrazit 2 nebo 4 verze téhož obrázku. Když už je řeč o náhledech, nemůžeme opominout další novinku; tou je náhled na obrázek, jak bude vypadat na jiné počítačové platformě. Uživatelé Windows si tak mohou udělat představu, jak se grafika zobrazí na Macu (kde je díky jiné gama-funkci zpravidla světlejší) a naopak.
Efekty
Jedním z nejjednodušších způsobů, jak obrázky zatraktivnit, je aplikovat na ně některý z předem připravených efektů, jako jsou různá rozostření, mozaikování, barevné záře nebo třeba přidání stínu. Fireworks podporují zásuvnou architekturu Photoshopu, takže lze používat i filtry připravené pro tento program, například oblíbené Eye Candy.
Efekty je možné aplikovat tradičním nevratným způsobem (nabídka Xtras), Fireworks ovšem nabízejí mnohem příjemnější techniku tzv. živých efektů (Life Effects). U živého efektu můžete kdykoliv měnit jeho parametry nebo efekt z objektu snadno odstranit. Takto můžete na objekt aplikovat i více efektů, u kterých lze potom snadno měnit jejich pořadí. Zajímavé je, že jako živé efekty lze používat i řadu filtrů Photoshopu.
Živé efekty společně s paletou History tak definitivně otevírají brány kreativní tvorbě:   pohodlně lze zkoušet celou škálu různých variant obrázku bez obav, že se nebude možné vrátit k původnímu obrázku.
Dynamika
Fireworks se soustřeďují na přípravu obrazovkové grafiky a ta dnes musí být dynamická, ať už v podobě animací, nebo interaktivního chování. Pokud jde o animace a tvorbu map s odkazy, jsou schopnosti nové verze totožné s verzí 2. URL odkaz lze přiřadit každému objektu případně ručně vyznačené oblasti, potřebný HTML kód je automaticky vygenerován při exportu. Animace lze připravovat tradiční technikou kreslení jednotlivých políček animace. Novinkou je možnost exportu animace ve formátu programu Macromedia Flash, kdy lze navržené animace dále upravovat.
Již Fireworks 1 nabídly tvorbu rollover tlačítek bez nutnosti programování skriptů a tato schopnost byla ve verzi 2 dále zobecněna prostřednictvím tzv. Behaviors. Větší obecnost ovšem přinesla komplikovanější návrh jednoduchých rollover efektů, a tak se Macromedia ve Fireworks 3 soustředila hlavně na zjednodušení návrhu těchto efektů. Výsledkem je editor tlačítek, kdy je návrh interaktivního tlačítka měnícího svůj vzhled skutečně hračkou. Usnadnění práce přinášejí i další novinky, například společné editování vzhledu skupiny tlačítek, možnost změny textu tlačítka ve všech jeho stavech najednou a společné přemístění grafiky všech stavů při změně polohy tlačítka. Usnadněn je také návrh různých navigačních lišt.
Interaktivní chování grafiky samozřejmě potřebuje podporu skriptů, které jsou součástí HTML kódu. O tvorbu skriptů se ovšem grafik starat nemusí, vše za něj udělají Fireworks. Strach nemusíte mít ani s integrací takového kódu do stránek ve webových editorech, zvláště v případě Dreamweaveru nemusíte o kód ani zavadit (viz vložený článek).

Macromedia Dreamweaver 3.0
Musím se přiznat, že mé pocity  z první verze Dreamweaveru byly trochu smíšené. Program nabízel atraktivní vzhled, podporu (tehdy) zcela nových technologií webu, ale jeho ovládání mi ve srovnání s konkurencí připadalo cizí a složité. Od té doby jsme Dreamweaver, webové standardy i já urazili kus cesty a nový Dreamweaver 3 se mi líbí snad po všech stránkách. Program umožňuje snadnou přípravu jednoduchých webových stránek bez zbytečných efektů a zároveň, pokud to potřebujete, vám nabídne stejně snadný přístup k pokročilejším technologiím, jako je DHTML či CSS. To vše samozřejmě ve vizuálním obalu, který vás odstíní od HTML kódování (avšak ani příznivci HTML nepřijdou zkrátka). 
Ovládání
Deamweaver je vizuální editor webových stránek, od čehož se odvíjí i jeho uživatelské rozhraní. Program zobrazuje stránku téměř tak, jak bude vypadat ve webovém prohlížeči, takže si lze pohodlně udělat představu o uspořádání objektů na stránce. Speciální náhledový mod zde nenajdete,  vlastně ani není potřeba. Přímo z programu lze samozřejmě předat stránku pro zobrazení konkrétnímu prohlížeči.
Pro práci s programem budete jistě používat hlavně palety nástrojů. Základní objekty, které lze do stránek vkládat, najdete v paletě Objects (jak jinak), hlavní pozornost při dalších úpravách ale bude soustředěna do oblasti kolem palety Properties (vlastnosti). Na tuto paletu se budete obracet vždy, když budete měnit parametry nějakého objektu, ať už se bude jednat o změnu písma, velikosti obrázku, nebo nastavení odkazu. Obsah palety se automaticky mění podle aktuálně zvoleného objektu, takže v ní najdete vždy jen to, co právě potřebujete. Podobně jako Fireworks nabízí také Dreamweaver paletu History pro snadné návraty k předchozím verzím stránky či pro aplikování zvolené posloupnosti příkazů na jiný objekt. V dalších paletách najdete CSS styly, rámce, vrstvy, Behaviors, časovou osu, šablony a knihovny nebo zdrojový HTML kód stránky. K použití některých z nich se ještě vrátíme. Uživatel má možnost tyto palety libovolně kombinovat, a tak lze snadno přizpůsobit pracovní plochu právě navrhované stránce. A když už budete potřebovat jít do nabídek, pak ani zde se neztratíte; příkazy jsou přehledně uspořádány.
Design stránek
Dreamweaver vás při návrhu stránky nenutí k použití nějakého speciálního postupu. Pokud chcete mít na stránce hlavně text, píšete jako v textovém editoru; pokud naopak dbáte na přesné umístění objektů na stránce, můžete vkládat vrstvy a objekty umisťovat do nich. Vrstvy (Layers) patří samozřejmě k pokročilejším technologiím a kromě absolutního polohování na stránce s nimi lze dělat i další kouzla (viz dále). Stejně tak ale můžete program požádat, aby hlídal nežádoucí překryv vrstev, a ve vhodný okamžik pak vrstvy nechat převést na tabulky, které budou schopny zobrazit i starší verze prohlížečů. Podobně lze tabulky převést zpět na vrstvy.
Žádný problém není ani s návrhem rámců; Dreamweaver nyní dokonce poskytuje několik typických  uspořádání rámců. Pro úplnost dodejme, že v Dreamweaveru lze upravovat stránky přímo v rámcích, což celý návrh výrazně zjednodušuje.
Pokud jde o vlastní obsah stránek, pak Dreamweaver podporuje vše, co je dnes běžné, ať už jde o formát textu, tabulek či obrázků, nebo o různé vkládané objekty. Novinkou je snazší vkládání speciálních znaků a symbolů, jako je ©, které stačí vybrat z nabídky. Podobně můžete zjednodušit vkládání e-mailového odkazu, data modifikace stránky nebo přípravu navigačních list. Jednoduché je i navržení a úprava nabídky pro rozeskoky na další stránky, čímž se usnadní pohyb v sadě stránek. Z nových mediálních objektů lze přímo do stránek vkládat filmy Flash 4 a Shockwave 7 a objekty Generator, o podpoře Fireworks 3 ani nemluvě.
Správa stránek
Málokdo dnes navrhuje pouze jedinou webovou stránku; většinou se pracuje s celými sadami stránek a tuto práci několika způsoby podporuje i Dreamweaver.
Začít můžeme u jednotného vzhledu sady stránek a u problémů, které vznikají, když je potřeba tento vzhled globálně změnit. Techniky různého automatického generování stránek jsou přece jen trochu komplikovanější, a tak Dreamweaver přišel se starými známými šablonami. Šablona se zde připravuje jako každá jiná webová stránka, jen některé její oblasti jsou označeny jako modifikovatelné. Při návrhu nové stránky pak můžete zvolit jako základ některou z připravených šablon, program ovšem ve stránce umožní měnit jen modifikovatelné části. Pokud někdy později změníte šablonu (například se změní logo firmy nebo celkový design stránky), můžete tuto změnu nechat automaticky promítnout do všech stránek vytvořených podle dané šablony. Jednoduché a efektivní.
Dreamweaver 3 přichází také s tzv. HTML styly textu, které jsou zase obdobou stylů v textových editorech. Parametry textu, resp. odstavce tak můžete pojmenovat a aplikovat na další části dokumentu či na jiné dokumenty. Tentokrát ale není k dispozici automatický update, a tak pokud styl změníte, je potřeba ho znova ručně aplikovat na příslušné pasáže.
Když je řeč o správě webových stránek, každému se asi vybaví správce starající se o platnost odkazů a o snadný přenos stránek na webový server a z něj. A takového správce najdete i v Dreamweaveru. Můžete v něm měnit názvy souborů a přesouvat soubory mezi složkami, správce se vždy postará o změnu potřebných odkazů. Můžete také zobrazit hierarchickou strukturu stránek usnadňující orientaci v provázanosti stránek. Soubory na lokálním disku lze nyní automaticky synchronizovat s webovým serverem a k dispozici je i systém check in/check out pro zamykaní stránek na serveru při práci více návrhářů se stejnou sadou stránek.
Efekty
O tom, že Dreamweaver je skutečně na výši, pokud jde o podporu nových technologií webu, jste si mohli přečíst již v recenzi verze 2 (Chip 08/99). V trojce se toho mnoho nezměnilo, takže jen pro úplnost uveďme, že Dreamweaver umožňuje používat kaskádové styly (CSS) pro přesnější specifikaci vlastností textu a že jejich definice se provádí v přehledném dialogovém okně. Odpovídající HTML kód je generován automaticky.
Podobně snadno se pracuje s DHTML, tedy se spojením vrstev a skriptů řídících vlastnosti vrstev.  Polohu, rozměr, z-index a viditelnost vrstev lze snadno animovat pomocí přehledné časové osy.
Vlastnosti vrstev, ale třeba i obrázků a filmů lze také ovlivňovat prostřednictvím Behaviors, tj. předdefinovaných skriptů, které může uživatel používat bez dalšího programování. Behaviors se používají i při návrhu rollover tlačítek a dalších interaktivních vlastností a uživatel si může jejich sadu sám rozšiřovat.
HTML
Až doposud jsme hovořili především o vizuálních vlastnostech Dreamweaveru, ale vězte, že tento program vám poskytuje i přístup do HTML. HTML kód je samozřejmě generován automaticky podle vizuálního návrhu, ale zkušený uživatel může provádět jeho změny pomocí vestavěného editoru, resp. v externím editoru, jako je HomeSite (Windows) nebo BBEdit (Mac). Oba editory dostanete přímo s Dreamweaverem (BBEdit v lite verzi). Změny provedené v HTML kódu se zpětně přenášejí do vizuálního návrhu. Mimochodem, přidávání a úpravu HTML značek lze provádět přímo ve vizuálním návrhu prostřednictvím nového Quick Tag Editoru.
Říká se, že Dreamweaver generuje jeden z nejčistších HTML kódů mezi vizuálními editory. Použít ho můžete dokonce i na čištění kódu generovaného jinými programy; speciální “čistič kódu” je přítomen pro webové stránky vytvořené v Microsoft Wordu.

Závěr
Macromedia rozhodně udělala krok správným směrem, když uživatelům nabídla své dva nejnovější produkty v rámci jednoho balíku. Fireworks 3 a Dreamweaver 3 jsou samy o sobě vysoce kvalitní a efektivní nástroje a navíc se vzájemně výborně doplňují. Typickému tvůrci webových stránek je tak pod jednou střechou nabídnuto vše, co bude pro přípravu atraktivních webových stránek potřebovat. Neméně důležité je i to, že balík je dostupný jak pro macy, oblíbené u kreativních uživatelů, tak i pro Windows  Programy navíc nabízejí prostředky pro sdílenou práci, takže na jednom webovém projektu může pracovat více návrhářů najednou. Slabším místem by mohla být stabilita Dreamweaveru, který přece jen čas od času spadl při obyčejných úkonech, jako je psaní textu (Windows verze) nebo přepnutí oken (macovská verze).

Roman Barták

Integrace
Fireworks 3 i Dreamweaver 3 jsou zcela samostatné produkty a mohou bez problémů fungovat odděleně. Jejich síla je ale umocněna právě společným použitím, kdy Fireworks připraví a podle potřeby dále upraví grafiku, která se potom integruje s dalšími prvky do podoby finální webové stránky  v Dreamweaveru.
Integrace obou produktů je zvláště cenná při práci se složitější grafikou, ať už se jedná o předávání “nařezaných” obrázků, animací, nebo interaktivní grafiky. U takovýchto obrázků je nezbytný HTML kód, starající se o správné zarovnání a interaktivní chování.  Kód generovaný Fireworks jako samostatná stránka lze přitom načíst do dokumentu v Dreamweaveru, takže uživatel se nemusí o skutečný HTML kód vůbec starat. Navíc Behaviors z Fireworks jsou rozpoznávány i v Dreamweaveru, kde je lze případně snadno pozměnit (např. změnit odkaz).
Fireworks slouží také jako externí editor obrázků, který se vyvolá při požadavku na úpravu obrázku v Dreamweaveru. K dispozici je navíc automatické nalezení původního zdrojového souboru Fireworks, takže uživatel může při editování pracovat s původním obrázkem místo s jeho exportovanou podobou.
Pokud si budete chtít oba produkty (Macromedia Dreamweaver 3 a Fireworks 3) vyzkoušet, nemusíte chodit daleko. Stačí sáhnout po Chip CD 3/2000, na kterém byly umístěny jejich trial verze. Pro dokonalé využití integrace je přirozeně vhodné mít obě aplikace spuštěné najednou. Pro pohodlnou práci tudíž počítejte minimálně s 96 MB RAM.