Vyhledávání:

Sekce

Náhodný snímek

Důležité články

Reklama

Poslední články

Reklama

Poslední komentáře

Macromedia Dreamweaver MXProgramy

Nástroje pro tvorbu webových stránek by se daly rozdělit na ty, ve kterých je přímo vidět výsledný vzhled (tzv. WYSIWYG editory, kde se s dokumentem pracuje jako například ve Wordu) a na ty, kde uživatel vidí a přímo píše zdrojový kód stránky. Dreamweaver MX (dále jen DMX) je profesionální nástroj, který lze zařadit do obou skupin.

Pracoviště

Při prvním spuštění se vás program zeptá na vzhled pracovní plochy (zda má být stejný jako u verze předchozí nebo nový – MXový). Provedení pracovní plochy je jedna ze základních novinek a já vřele doporučuji ji plně využívat, neboť se tento nový styl pracovní plochy firmě Macromedia velice povedl (není proto divu, že na něj narazíte v každém jejich produktu nové série MX).

Pracovní prostředí DMX: v horní části je zdrojový kód, pod ním vlastní stránka (obojí lze editovat), dole záložky ostatních stránek a panel s vlastnostmi aktuálního elementu. Vpravo nápověda a stromová struktura souborů webu.

V čem tedy spočívají výhody uvedeného uspořádání? Veškerá otevřená okna aplikace a její panely (tedy okno s editovanou stránkou, panel s vlastnostmi, strom se soubory, nápovědy, …) lze dokovat, nastavovat jejich umístěni a velikost, případně je minimalizovat do malého pruhu (takže jsou po ruce, ale nezabírají téměř žádné místo). Snadno si tak upravíte své pracoviště k obrazu svému.

Minulá verze tohoto produktu mě rozčilovala tím, že pro každou editovanou stránku vytvořila nové okno celé aplikace, čímž vznikal nepříjemný chaos a navíc zavření posledního okna se chápalo jako ukončení práce s tímto produktem. Nová verze mě mile překvapila, neboť editační okna jsou součástí hlavního okna aplikace a v jednom okamžiku je aktuální pouze jedno, ostatní jsou přístupné přes záložky na spodní straně a celý program zabírá na pruhu úloh jednu jedinou položku.

Editace

Základem práce v Dreamweavru je vytvoření tzv. „site“, ve které se definují vlastnosti vytvářeného (či editovaného) webu. Mimo jiné se uvádí i vzdálený server, kde jsou stránky fyzicky umístěny, aby šlo snadno aktualizovat soubory (stahovat, uploadovat, synchronizovat). Po definici webového sídla stačí již jen vybrat soubor a začít editovat. To lze provádět buď ve WYSIWYG módu, kde se zobrazuje vzhled stránky a nebo v módu zdrojového kódu. Osobně nejčastěji používám mód, kdy vidím jak zdrojový kód tak výsledný vzhled (což program také umožňuje). Snadno a rychle tak píši a v případě, že program nedělá přesně to co bych chtěl, přepnu se do druhého okna a poopravím přímo kód. Oproti minulé verzi doznal i editor kódu několika změn.

Mezi nejzajímavější řadím Qick Tag Editor – automatická kompletace kódu dle napsaného útržku názvu tagu. Netýká se to ale pouze názvů tagů, ale i jejich atributů a dokonce i hodnot těchto atributů (velmi výhodné je to například při dopisování názvu třídy, kdy si člověk nemůže vzpomenout, jak jen ji ve stylech pojmenoval).

Při editování se na spodní liště okna ukazuje zásobník zanořených tagů, uživatel tak vidí, kam píše. Hlavně však kliknutím myši (případně klávesovou zkratkou) může snadno označit kterýkoliv mateřský tag, což opravdu plně využije pokud je hlouběji zanořen např. v tabulkách.

Šablony

Šablony jsou jedním z nejsilnějších argumentů proti zastáncům jednodušších editorů kódu HTML jako je třeba UltraEdit a podobně. Díky šablonám lze totiž snadno nadefinovat základní vzhled stránek (například za pomoci tabulek – v levé části je sloupeček s obsahem, v pravé části se zobrazují informace dle zvolené položky z obsahu) a z něj snadno vytvářet výsledné stránky. Rozhodnete-li se později trochu poupravit vzhled webu (přidat další položku do obsahu v levé čísti, změnit uspořádání všech stránek a podobně), není to nic těžkého. Stačí změnit šablonu a Dreamveawer udělá zbytek za vás. Jinými slovy sám přegeneruje všechny stránky odvozené od této šablony.

Od poslední verze byly šablony vylepšeny o další vlastnosti: Vnořené šablony (neboli šablony v šabloně), Optional Regions a Editable Optional Regions (za jejichž pomoci lze měnit vzhled odvozených stránek dle přednastavených parametrů šablony), Repeated Regions a Repeating Table slouží ku vkládání opakovaného kusu kódu s nastavenými políčky pro editaci (jako například řádky katalogu, galerie a jiné „seznamy“).

Vkládání objektů

Pro snazší editaci kódu stránky obsahuje DMX několik palet s přednastavenými objekty, které lze snadno do stránek vkládat. Tyto objekty jsou rozčleněny do několika skupin: základní (obrázek, tabulka, odkaz, …), styly (teď nemám na mysli kaskádové styly, ale kurzívu, tučné písmo, nadpis apod.), formuláře a jejich prvky, již výše zmiňované šablony, speciální znaky, které se do textu zapíší v podobě html entit, flash, aplety, active-x prvky, parametry hlavičky HTML souboru, skripty a mnohé další.

Samozřejmě všechny tyto objekty lze do zdrojového textu zapsat ručně, ale proč dělat věci složitěji, když to jde tak snadno (navíc na většinu těchto funkcí existují klávesové zkratky a pokud není zkratka přidělena, stačí si ji nastavit). Je jasné, že některé objekty v životě nepoužijete, ale u mnohých má smysl zjistit (či nastavit) jejich klávesovou zkratku a tu pak používat (zejména u těch, které slouží pro základní formátování textu).

Útržky

DMX pro ulehčení a urychlení práce obsahuje i několik desítek (až stovek) takzvaných útržků (snippets), což není nic jiného než kousky kódu HTML či JavaScriptu, které by se mohly vývojáři stránek hodit. Všechny „útržky“ jsou pro lepší přehlednost roztříděny do několika skupin a podskupin. Naleznete zde kódy pro uspořádání vzhledu stránek (třísloupcová sazba, hlavičky, patičky), formuláře, navigace, základní JavaScripty (přednačtení obrázků, detekce verze prohlížeče, přesměrování, práce s koláčky, obrázky a další). Pokud vám bude nějaký útržek chybět, můžete si jej sami napsat a přidat do tohoto archívu.

Import & Export

Samozřejmostí tohoto produktu jsou možnosti pro import a export dokumentů. Nejvíce se využije import tabulkových dat. Například, dostanete-li od šéfa za úkol vystavit některé excelovské tabulky na webové stránky, je postup velmi jednoduchý (pomineme-li ještě jednodušší za to však většinou nevhodnou možnost, kterou je vystavení přímo excelovského souboru) – tabulka se uloží v CSV formátu a pak se za pomoci položky menu File/Import/Tabular data a po specifikaci některých parametrů vstupního souboru (oddělovač a parametry tabulky) vytvoří přehledná html tabulka.

Find & Replace

V životě webdesignera se může stát, že musí mírně pozměnit stávající stránky. S hrůzou ale zjistí, že jeho předchůdce nepoužíval žádný pořádný vývojový nástroj, natož pak šablony v Dreamveawru. Co s tím? Řešením je využití mocného aparátu Find & Replace, který DMX nabízí. Ten umožňuje hledání jak v obsahu aktuálního dokumentu, v jeho zdrojovém kódu tak i ve všech stránkách editovaného webu nebo jen ve vybraných adresářích. Krom toho lze ignorovat bílé znaky nebo použít ještě mocnější (a pro mnohé naprosto nepochopitelný) nástroj s názvem „regulární výraz“. Existuje i další možnost – pokročilé vyhledávání, ve kterém se snadno díky jednoduchému průvodci detailně specifikuje, co vlastně hledáte (který tag, s jakými atributy, co s ním provést…). Možnosti jsou neobyčejně bohaté. Co se jednou najde, lze i nahradit a tak není problém překopat vzhled všech stránek během okamžiku. Oproti minulé verzi přibyla poměrně hezká možnost ukládání vytvořeného vyhledávacího (a nahrazovacího) výrazu do souboru.

Výstupní kontrola

Na závěr práce na stránkách, by se měl výsledek (před jeho vypuštěním do světa www) zkontrolovat. DMX vývojáři opět šetří práci a nabízí mu několik možností: základní kontrola, kontrola odkazů, tagů, ověření zda jsou stránky stravitelné pro jednotlivé prohlížeče (Internet Explorer, Netscape Navigator a Opera). Po zkontrolování si můžete výsledky prohlížet buď přímo v aplikaci nebo si je uložit ve formátu HTML.

Testování

Při editaci je občas nutné vyzkoušet, jak vypadají stránky v prohlížeči (DMX je sice sám o sobě WYSIWYG editor, ale jednotlivé prohlížeče přece jen zobrazují stejné stránky rozdílně). K tomu slouží tlačítko Preview v nástrojové liště. Po poklepání se rozbalí a nabídne několik prohlížečů, ve kterých je možno stránky zobrazit (jednotlivé browsery v této nabídce je samozřejmě možné navolit a to včetně klávesových zkratek). Rozšířením oproti verzi minulé je možnost nejen prohlížet, ale také i krokovat stránky (obsahují-li Javascript) například za pomoci Microsoft Script Debuggeru.

Nevyhovuje-li vám naopak vestavěný editor zdrojových kódů HTML, CSS a podobně, není problém nastavit si vlastní.

Konfigurace

Jednou z mnoha dalších výhod aplikace jsou široké možnosti nastavení, které jsou umocněny ještě způsobem jejich zápisu na disk ve formátu XML. Případně za pomoci JavaScriptu (týká se zejména maker a příkazů). Makra (když už jsem se o nich zmínil) lze vytvářet několika způsoby. Buď za pomoci záznamu činnosti, nebo vybráním několika kroků z přehledu historie a nebo (jestliže jste opravdu zkušení) je přímo napsat v JavaScriptu.

Předdefinované šablony

Jelikož začátek je vždycky těžký, nabízí DMX několik šablon pro rychlejší start – soubory s přednastavenými kaskádovými styly, stránky rozdělené na rámce a dokonce již vytvořené stránky s použitelným designem například pro webový obchod a podobně. Naleznete zde i průvodce pro vytvoření webového fotoalba.

Pomoc, pomoc!

Každý vývojářský nástroj by měl obsahovat nápovědu alespoň k jazyku, který se v něm používá. Nejinak to je u DMX a tak zde naleznete krom běžné nápovědy k aplikaci a tutoriálů i podrobné referenční příručky jazyků HTML, CFML, CSS, JavaScript, ASP a další. K úplné spokojenosti mi zde chybí nápověda k PHP. Všechny jsou velmi kvalitně provedené a snadno se vyvolají klávesovou zkratkou SHIFT+F1 nad vybraným příkazem libovolného jazyka (z výše uvedených).

Podtrženo sečteno

Dreamweaver MX je výborný profesionální nástroj pro návrh a správu webových stránek. Oproti minulé verzi (Dreamweaver 4) se velmi zlepšil, zejména co se týče pracovního prostředí a vlastní editace. Již nemá problémy s PHP a správně zobrazuje stránky s kaskádovými styly.

Plusy

• způsob práce, pracovní prostředí, vyhledávání, nastavitelnost aplikace, referenční příručky, šablony

Mínusy

• chybí nápověda k PHP

HW nároky (Windows)

Intel Pentium 300, 96 MB RAM, 275 MB volného prostoru na disku, operační systém Windows 98/Me/NT 4,0/2000/XP. Dokumentace – stručný anglický papírový manuál

HW nároky (Macintosh)

Power Macintosh G3 a vyšší, 96 MB RAM, 275 MB volného prostoru na disku, operační systém MacOS 9.1 a vyšší nebo Mac OS X 10.1 a vyšší

Související články

• Adobe Creative Suite 3
• Macromedia Studio 8 – nová verze profesionálních nástrojů pro tvorbu webu
• Novinky v Macromedia Studiu 8 aneb co bylo na Macromedia Day 2005
• Macromedia Flash MX
• Macromedia Fireworks MX
• Macromedia RoboDemo 5.0
• Macromedia FreeHand MX
• Macromedia Studio MX 2004
• Shane Rebenschied: Macromedia Flash 8 Professional - praktický výukový kurz
• Nate Weiss: Flash MX 2004 professional pro vývojáře webových aplikací

©2005 Petr Václavek | technologie: Textpattern CZ | Václavek WEBLOG | Václavek FOTOBLOG