Expression Web aneb Frontpage dnes kradou jen hlupáci

Náhradou Frontpage by se měl stát Microsoft Expression Web. Jde o povedenou kombinaci vizuálního editoru s možností úprav kódu. Expression Web je určen především jako rychlá pomůcka pro návrh vzhledu webové stránky. Vytvoříte s ním kompletní weby pracující se statickým XHTML. Jestliže vytváříte webovou aplikaci využívající prvky ASP.NET, můžete je do návrhu webové stránky zabudovat a celý projekt pak předat vývojářům do Visual Studia, resp. do Visual Web Developeru. 

MS Expression Web je založen na XHTML a kaskádových stylech. Snaží se přísně dodržovat tyto standardy, takže se nemusíte bát, že by po práci ve vizuálním režimu vznikl balast podobný webové stránce vytvořené třeba ve Wordu. Pro nastavování hodnot kaskádových stylů je připraven speciální panel, ve kterém vyplňujete konkrétní vlastnosti. Expression Web pak zadání automaticky promítá do připojeného souboru stylů. Vlastnosti stylů jsou také automaticky měněny například při přetahování nebo změnách velikosti prvků pomocí myši. 

Jestliže v rámci kaskádových stylů pracujete s vrstvami, tj. používáte vlastnost z-index, pak Expression Web automaticky tyto vrstvy rozeznává a nabízí vám jednoduchého správce pro snadnou orientaci v těchto vrstvách.

Ve vizuálním režimu máte k dispozici klasické formátovací nástroje, výběr konkrétních stylů, práci s mezinadpisy, nástroje pro vkládání obrázků atd. Ve speciálním panelu pak najdete všechny HTML komponenty, které můžete přetahovat na plochu stránky. Jednoduše tak poskládáte třeba webový formulář. V nabídce nechybí ani zmíněné ASP.NET komponenty, včetně propojení na datové zdroje.

Co se vizuálních úprav týče, bez problému můžete vkládat text třeba z Wordu a přitom si zvolit, v jaké podobě bude vložen. Je možné zachovat jeho zdrojové formátování, použít cílové z HTML stránky nebo vložit obsah stránky čistě jako text. Tedy klasická nabídka, kterou znáte například z Wordu nebo Excelu.

Ve vizuálním režimu jsou automaticky označovány vybrané značky, pomocí jakési obdoby drobečkové navigaci v horní části okna programu máte možnost označovat nadřazené prvky. Každý z nich má přitom rozbalovací nabídku, která ukrývá funkce pro výběr značky, výběr jejího obsahu, vyvolání úprav, odstranění, zalomení, vložení HTML, nebo nastavení vlastnosti CSS position (fixed, absolute, static, relative).

Vizuální režim má výhodu, že stránku vidíte ihned takovou, jak bude vypadat na webu. Expression Web používá vykreslovací jádro Internet Exploreru 7. Na základě DOCTYPE se vykreslování ve vizuálním režimu provádí buď standardně, nebo v režimu Quirks. Na základě DOCTYPE se také automaticky vytváří kód dokumentu – Expression Web se snaží být validní vzhledem ke zvolené deklaraci.

Vizuální režim je pěkná a praktická věc, ale řada profesionálů často potřebuje zasáhnout přímo do kódu. Expression Web má co nabídnout i v tomto režimu práce. Automatická nabídka pro rychlé vkládání kódu pružně reaguje na vaše zadávání, samozřejmostí je automatické uzavírání párových značek. V nabídce je množství praktických funkcí pro práci se značkami a bloky kódu.

Editor umí kód přeformátovat tak, aby byl co nejlépe čitelný. V nabídce jsou čisticí funkce pro odstranění nadbytečných značek vzniklých například při importu HTML stránky vytvořené v nestandardním editoru nebo třeba ve Wordu. Napsat si můžete i vlastní makra, která budou kód zpracovávat.

Poněkud ukryto zůstává ověřování validity kódu. K tomuto účelu Expression Web nabízí tzv. reporty. Accessibility Reports vám podá hlášení o přístupnosti stránek dle WCAG a Access Board Section 508. Compatibility Reports prověří validitu dokumentu na základě zvoleného DOCTYPE a použitelnost kaskádových stylů na základě zvolené verze CSS. Standardně je nabízeno CSS 2.1, k dispozici jsou i starší verze a specialita v podobě CSS IE. Konečně specializované CSS Reports vám nabídnou obrázek o tom, zda nemáte definovány nepoužité a chybné styly.

Pro co nejrychlejší tvorbu stránek se kdysi používaly rámce, později se přešlo na útržky PHP nebo ASP kódu. Bylo to z toho důvodu, že v rámci každého webu mají stránky řadu společných prvků, například hlavičku a navigační menu. Změna takovéto části by znamenala úpravy ve všech HTML stránkách. Rámce a použití PHP/ASP to řešily tak, že daná část byla tvořena samostatným souborem a pomocí rámců (nebo PHP/ASP) přiložena ke každé zobrazované stránce. Mělo a má to řadu nevýhod, od nemožnosti optimalizace stránky pro vyhledávače u rámců až k potřebě znalosti práce s PHP/ASP.

Expression Web se inspiroval u Visual Studia a řeší zmíněný problém mnohem elegantněji. Pro statické HTML jsou nabízeny tzv. Dynamic Web Templates. Pro přípravu ASP.NET webových aplikací použijete obdobu pod názvem Master Pages. Obojí funguje na principu vzorové předlohy pro všechny stránky v projektu. Touto předlohou je jakási kostra společná všem stránkám. Vytvoříte hlavičku, menu, patičku a všechny společné prvky stránek. S předlohou zkrátka pracujete jako s kteroukoli jinou stránkou.

Po dokončení předlohy pak určíte, které části se budou měnit. Jednotlivé stránky webu pak vytváříte na základě těchto předloh. Při úpravách takto vytvořených stránek vám Expression Web dovolí změnit pouze ty části, které byly v předloze určeny k úpravám. Výhoda je zřejmá. Odpadá tvorba nebo kopírování společných částí při vytváření každé nové stránky v projektu. To nejlepší však spočívá v pozdějších úpravách předlohy. 

Pokud třeba zjistíte, že je potřeba doplnit položku do navigace, změnit obrázek v hlavičce stránky nebo cokoli dalšího, stačí to provést pouze v souboru s předlohou. Expression Web pak dovede tyto změny automaticky promítnout do všech HTML stránek v projektu. Jakékoli úpravy jsou tedy stejně rychlé jako při použití rámců nebo ASP/PHP, pracujete však stále s HTML a stránky jsou dokonale přívětivé pro vyhledávače.

Šablony a kostry stránek 

Součástí Expression Webu je řada šablon pro začínající uživatele. Pokud vám nebudou vyhovovat návrhy kompletních webů, pak třeba využijete návrhy layoutů, kdy je vytvořena pouze základní kostra HTML doplněná o několik kaskádových stylů. Nemusíte se tedy zdržovat vymýšlením a sestavováním dvousloupcového layoutu s navigací a hlavičkou nebo podobnými kombinacemi. Vše je navíc funkční v různých prohlížečích.

Expression Web podporuje zobrazení náhledu v různých velikostech, stránky tak odladíte třeba pro rozlišení obrazovky 1 024  × 768 nebo jiné. Potěšila mě podpora různých prohlížečů instalovaných v systému. V mém případě Expression Web našel kromě Internet Exploreru i Firefox, přičemž různé režimy náhledu nabízí pro oba. Specialitou je spuštění všech nalezených prohlížečů ve zvoleném režimu. 

Jestliže vás zajímá spojení Expression Web a čeština, pak vězte, že čeština je podporována při kontrole pravopisu. Expression Web se chová stejně jako textový editor, čili pokud máte třeba v rámci MS Office instalován pravopisný slovník s češtinou, můžete používat českou kontrolu pravopisu a slovník synonym.

Expression Web je povedený program, který je více než důstojnou náhradou za Frontpage. Spoustu dalších informací o tomto povedeném editoru najdete na domovské stránce produktů z rodiny Expression (www.microsoft.com/expression). Patří mezi ně také grafický editor, nástroj pro návrh vzhledu aplikací a správce multimédií Microsoft Expression Media, o kterém jste si na Maxiorlovi mohli přečíst nedávno. 

Cena programu nepatří k nejnižším ( 9 454 Kč s DPH na Cybexu). Mnohem zajímavější je upgrade. Ten vás vyjde zhruba na třetinu částky za nový program (3 143 Kč s DPH na Cybexu). Ještě nižší cena je pak nabízena pro školy. Také vám doporučuji sledovat nejrůznější akce, Expression Web pak lze pořídit i bez upgradu za zajímavou cenu, případně lze čas od času upgradovat i z jiných produktů. Pokud tedy chcete pracovat s profesionálním programem, není důvod jej krást.

Chcete-li si program stáhnout ve zkušební verzi, vyhledejte na jeho domovské stránce rozbalovací nabídku Expression Web, položku Free Trial a poté klepněte na odkaz Download.