Dreamveawer CS4 - sajtóanyag

Míg a nyomdaipari programok fő fejlődési iránya a keresztplatformos szolgáltatások felé hajlik, a két fő internetes program, a HTML szerkesztő Dreamweaver és a vektoros animációkészítő Flash, szerencsére megtartja vezető szerepét az internetes szakmában. Kérdéses, ha egyébként is rendelkezésre áll két ilyen jól használható program erre, miért kell a nyomdai programokat felszerelni hasonló vagy legalább kompatibilis kimenetekkel? Az internetes szerkesztőprogramok felől nézve nem teljesen haszontalan hogy bemenetként tudják fogadni a Photoshop és az Illustrator anyagait, hiszen ezekben sokkal könnyebb elkészíteni az oldal képi alapanyagát.

Származási hely: Adobe CS4

A Dreamweaver erőssége a többi hasonló próbálkozáshoz képest (Frontpage) a kompatibilitása, illetve hogy ezt beállítva odafigyel az oldalszerkesztés szabványos lehetőségeire, figyelembe véve a böngészők gyengéit is. Egy webszerkesztő számára mindenképpen ez a legfontosabb szempont (olvasgassuk gyakran a useit.com weboldalt oldaltervezéssel kapcsolatban). A korábbi CS3 verzió nem változott említésre méltóan a korábbi Macromédia verzióhoz képest, így felületét tekintve kicsit kilógott a sorból. Nézzük miért érdemes vagy nem érdemes a CS4 verzióra áttérni.

A Dreamweaver ma már nem csak egyszerű HTML szerkesztő. Erőteljesen támogatja a CSS eddig megjelent verzióit, most összekapcsolva a JavaSript és az Ajax lehetőségeivel. Mindezek a lehetőségek kétféle felületet is kaptak, varázslót az egyszerűbb kezelhetőséget kedvelőknek, és „Advanced” felületet a hozzáértőknek, vagy azoknak akik szerint ami egyszerű az unalmas. Az új Dreamweverben több erőteljes „SpryAsset” is belekerült, még az adatbázis-kezelést és bizonyos fokú interaktivátást is készíthetünk ezzel megspórolva a szerveroldali programozást. a program kompatibilitása a plug-int igénylő beágyazott Flash elemek eseté is javult, a kód leellenőrzi a Flash-lejátszó verziószámát, és ha régebbi elehetővé teszi a frissítést.

A felület

Ennek a programnak a felülete jelentős változáson ment keresztül, köszönhetően annak hogy a CS3 verzióba szinte a korábbi Macromedia MX verzió került be. A menüsor alatt itt is van egy „Workspace Switcher”, és a többi CS4-es Adobe programhoz hasonló elven működő ikonméretűvé zsugorítható oldalsó úszómenüket (paneleket) kapott a program. Megjelent a függőleges eszközsor is a menü alatti kontrolpalettával együtt. Így most már jelentősen több helyünk van a szerkesztésre miközben a látható eszközválaszték és bővült, másrészt a felület kezd hasonlítani a megszokott nyomdaipari programokra.

A programot funkciójából eredően többféle célra, többféle szemlélettel lehet használni. A felület választéka (azzal együtt hogy egyedire szabható és elmenthető tetszőleges név alá) ezt a célt is kiszolgálja. Fejlesztőknek, grafikus designereknek, codereknek, „dual screen” usereknek is kedvez az egyéni felületválaszték. Rengetek kódolást igénylő funkció kapott „varázslót” vagy könnyen kezelhető dialógusboxot. A LiveView és LiveCode módok pedig apró interaktív kódok szerkesztés közbeni megtekintését teszik lehetővé.

Saját munkafelület készítése és elmentése

1. Válasszuk a Windows > Snippets menüt.
2. Válasszuk a View > Split Vertically menüt. Ez a menüpont felosztja a munkaterületet vertikálisan, de a horizontális felosztás is lehetséges.
3. A munkaterület felosztása mellett a korábbi módon lehetséges a kódablak felosztása is.
4. A „Workspace Switcher” listából válasszuk a „New Workspace” menüpontot.
5. Adjunk nevet a saját munkafelületnek.
6. Arra is van lehetőség, hogy ha finomítunk kezdeti elképzeléseinken, módosítsuk a már elmentett munkafelület beállításait. Ehhez ugyan úgy kell eljárni mint a létrehozásnál, de a névadásnál a korábbi (felülírandó) munkafelület nevét kell megadni, így ezen név alatt az aktuális elrendezés lesz kiválasztható.

Miután a munkaterület elmentésre került, ideiglenesen megváltoztathatjuk azt, majd gyorsan visszakapcsolhatunk az elmentett verzióra.

1. Nyissunk ki egy tetszőleges (de éppen zárt) panelt a Window menüből.
2. Vigyük az oldalsó részre a többi panelhez. Itt tetszőlegesen dokkolhatjuk az új panelt oldalra, alulra, vagy a meglévő csoportok közé. Amennyiben több helyre dokkoljuk a paneleket, egyszerre több ilyen lehet nyitva (minden dokkból 1-1).
3. Amennyiben elvégeztük azt a munkát amihez az új panel is szükségeltetett, a „Workspace Switcher” listából válasszuk a „Reset ‘munkaterület neve’ menüpontot az eredetileg elmentett állapot visszaállításához.

A megjelenítés és kódolás fejlesztései

A weboldalba ágyazható kliensoldali és szerveroldali elemek nagy száma miatt az oldalkészítés ma már rég nem a html nyelvezetről szól. CSS, Javascript, PHP, SSI, több oldalhoz kapcsolódó azonos tartalmi vagy formai elemek, hogy csak a legnépszerűbbeket említsem. Ezek beépítését a HTML kódba és tesztelését az új CS4 jobban támogatja.

Kapcsolódó file-ok

Az oldalhoz már eddig is kapcsolhattunk olyan elemeket, amelyekre az oldal felől nézve csak egy hivatkozást láttunk, és most nem a képekre gondolok. Ezek kezelése, felderítése, editálása válik egyszerűbbé azzal, hogy a megnyitott oldal felső sorában ezek felsorolásra kerülnek. Ha például az oldalhoz CSS stylesheet tartozik, azt könnyedén egérkattintással elővehetjük innen. A CSS szöveges tartalma megjelenik a Code View ablakban, az oldal maga pedig függőlegesen szétosztott képernyőn a másik oldalon. Ha bármit megváltoztatunk a CSS-ben, az, ha nem is azonnal, de az F5 billentyű (frissítés) megnyomása után láthatóvá válik a design nézetben is.

Code Navigator

A Code navigátor egy kis ablak, amely az oldal kijelölt részének forráskódját mutatja meg. Ez bonyolult, összetett oldalaknál nagyon hasznos lehet. Ha például egy szövegrész CSS segítségével van megformázva, egyszerűen kattanjunk rá a Command+Option (Alt – PC) billentyűt lenyomva tartva. A megjelenő Code Navigator ablakba kattintva egyszerűen módosíthatjuk a kapcsolódó forráskódot. Itt dolgozhatunk a CSS kód egy-egy részével is, módosíthatjuk az alá tartozó tulajdonságokat, majd F5-el frissíthetjük a design nézetet.

Live View és Live Code

Új szolgáltatás a Live View és Live Code a CS4-es Dreamweaverben. A Live View arra szolgál, hogy az interaktivitást vagy XML kódot tartalmazó oldalakat ne kelljen a böngészőben leellenőrizni, hanem a munkafelületen megtekinthető legyen az eredmény. A Live Code a Live View kiegészítése. A kódszerkesztő ablakban azt a részt látjuk, amit a design ablakban kijelölünk. A Live Code bekapcsolt állapotában a forráskódot nem lehet szerkeszteni, a Design ablakban pontosan leellenőrizhető az eredmény kisebb interaktív megoldások esetén is.

CSS támogatás

Lassan elfelejthetjük a szövegformázó HTML kódokat, a „de-facto” szabvány a modern oldalaknál a CSS. A CS4 Dreamweaver ebben próbálja segíteni a designereket. Ennek megfelelően alakult a Properties panel, amely az oldalszerkesztés egyik legkézenfekvőbb eszköze. Most ez jelentős mértékben támogatja a CSS parancsokat, külön CSS és HTML szerkesztő felületet kapott.

A Properties panelnek két módja van, HTML és CSS. A HTML módban tudunk linkeket, #class neveket, egyéb hagyományos dolgokat definiálni. A többi (betűk, szövegigazítás, színek) a CSS panelre került.

CSS Properties panel

1. Vegyünk elő egy megszerkesztett oldalt.
2. Ha a Properties panel nincs nyitva, használjuk a Window > Properties menüpontot.
3. Jelöljünk ki az oldal tartalmi részéből egy tetszőleges szövegrészt.
4. A Properties panelen a HTML szerkesztési mód legyen aktív.
5. Itt a korábbihoz hasonló módon alkalmazhatjuk a hagyományos HTML parancsokat szövegformázás céljára.
6. Kapcsoljunk át a CSS módra. Itt megjelennek a már alkalmazható CSS szabályok, illetve mi magunk is itt állíthatunk elő ilyeneket a „New CSS Rule” parancs segítségével. Az alkalmazásuk és módosításuk is itt lehetséges. Az új CSS létrehozásánál a feljövő dialógusboxban a „Selector type” legyen „Class”, és adjunk neki lehetőleg .-al kezdődő nevet a „Selector name” mezőben.

CSS módosítása

1. Jelöljük ki az egyik, CSS-el már megformázott szövegrészt a design felületen. Ha nincs ilyen régebbről, készítsünk egyet.
2. A munkafelület tetején megjelenik az oldalhoz tartozó CSS szerkesztési lehetősége, az alsó palettán viszont a "targeted rule" mezőben felsorolja a kijelölt elemekre vonatkozó CSS szabályokat.
3. Ezeket a szabályokat (illetve egy részüket, mint betűtípus, szín, stb...) könnyedén megváltoztathatjuk a Properties paletta jobboldali részében.
4. Amennyiben nem elegendő a változásokhoz a paletta jobb oldalán látható pr lehetőség, úgy használjuk a baloldali részben található "Edit rule" gombot, így a teljes CSS szabályrendszert elérhetjük módosítás céljából.

Előfordul, hogy nem egy nagyobb terület esetlegesen több szabályrendszerét szeretnénk módosítani, hanem egyetlen részletét, netán egy link-ét. Ekkor a szövegszerkesztő eszközzel csak kattanjunk a kérdéses szövegbe mintha írni szeretnénk hozzá.

5. A Properties panel segítségével könnyedén módosíthatjuk azokat a szabályokat, amelyek az aktuális részre vonatkoznak, illetve könnyedén létrehozhatunk egy új szabályrendszert is csak erre a részre vonatkoztatva. Amennyiben az aktív részlet több CSS szabályt is tartalmaz, a CSS Rule dialógus boxban a Detector Type lista Compund módba kerül. Ez akkor következik be, ha a kijelölt területen több CSS definíció keveredik.
6. Adjunk nevet a szabálynak. Alatta láthatóvá válik, hogyan épülnek egymásba a CSS elemek.
7. Előfordulhat, hogy nem akarjuk az egymásra épülő CSS definíciók mindegyikét megváltoztatni. Ekkor használhatjuk a "More specific" Less Specific" gombokat. Ezeket a gombokat többször is meg lehet nyomni egymás után, így lehet elérni, hogy mely elemekre akarjuk alkalmazni a CSS szabályrendszert. Ezt mind a "Selector name" mezőben nyomon követhetjük, az alatta lévő mező tájékoztat minket az így kialakuló struktúráról, vagyis arról, hogy a "Selector name" mezőben létrehozott stílus mely oldalelemekre lesz hatással (bekezdések, linkek, táblázatok, stb...).

Photoshop Smart Objects

A Photoshop központi szerepe mind a nyomdai, mind az internetes programoknál egyértelmű. A képanyag nagy része abban készülhet el. De míg a nyomdai programokban elképzelhető az a megoldás hogy Photoshop PSD file-okat is helyesen dolgoznak fel, addig az internet oldalon ezek a böngésző szintjén már nem jelenhetnek meg. A Dreamweaver egy olyan megoldást kínál, hogy a beillesztett PSD képanyagot maga a program alakítja át megfelelő JPG képpé, amely azt is biztosíthatja, hogy egyazon képanyag két teljesen mást igénylő kimeneten jelenjen meg az adott platformnak megfelelő méretben és felbontásban. Ez a megoldás szinkronizálásra is lehetőséget ad. Ha a beágyazott Photosohop kép megváltozik, a Dreamweaver figyelmeztethet, illetve a képet könnyedén upgradelhetjük.

1. Szúrjunk be egy Photoshop képet egy tetszőleges oldalra. Insert > Image.
2. A program felkínálja a lehetőséget, hogy a PSD képet webes formátumra konvertálja.
3. Az "Image Preview" dialógus boxban a file formátumát, minőségét lehet meghatározni. Itt lehet vágni és átméretezni is a képet.
4. Miután a "Save Web Image" dialógus box megjelenik, mentsük el az így képzett képet az oldal számára elérhető helyre.
5. Az így beimportált kép bal felső sarkában találjuk meg a szinkronizáció állapotát jelző ikont. Ha ez zöld, az eredeti Photoshop kép és a beillesztett (abból konvertált) JPG kép egyforma.
6. Amennyiben a forrásként szolgáló PSD file-t módosítjuk, a szinkronizáció állapotát egy felül zöld alul piros nyíl jelzi.
7. A képen jobb egérgomb, és módosíthatjuk a képet magában Photoshopban, de nem a beillesztett JPG-t hanem az eredeti PSD-t.
8. A módosítás után a Properties panelen a "Update from Original" parancs fogja frissíteni a weboldalba ágyazott képet.
9. A frissítés során a program figyelembe veszi az előző kép beállításait, méretét, minőségét, vágását.
10. Amennyiben egy kép többféle verzióban is beágyazásra került, (az Image Preview dialógusboxban más-más méret vagy vágás történt ugyan arra a PSD forrásra), és a forrásként szolgáló kép mérete is megváltozik, úgy a Dreamweaver átmértezi az összes képet amelyek az eredeti PSD-ből származnak az import során megadott paraméterek szerint.

Ez a képkezelési mód elvileg lehetővé teszi hogy egyazon forrást felhasználjunk több célra is több programban, és a forrás frissítésével nem csak egy, hanem ha úgy hozzák az igények több, többféleképpen felhasznált kép is generálódjon illetve frissüljön.

Dinamikus adatkezelés

Az adatbázisokból kiolvasott tartalom megjelenítése ma már szinte kötelező nagyobb és kisebb tartalomkezelő rendszerek, blogok, portálok számára. Az adatbázis kezelés vagy adatbázis szerver üzemeltetés, illetve olyan programok üzembe helyezése amelyek ezekkel dolgoznak, netán az adatbázis karbantartása, már komoly szakértelmet igénylő feladat, nem HTML szerkesztés. Nem beszélve arról, ha egy nyers adatbázisból szeretnénk tartalmat kinyerni, rendszerezni, keresni, vagy ilyet formába önteni, szerveroldali megoldás.

Gyakori, hogy a nyersanyag egyszerűen szöveges táblázat formájában áll rendelkezésre. Ezt még az elterjedt adatbázis szerverek sem eszik meg, bár van amelyik Excel táblát elfogad bemenetként. Ha emlékszünk rá, az Indesign is képes XML bement fogadására, és abból oldalt generálni ha a paraméterek és a nyersanyag megfelelően elő vannak készítve.

A Dreamweaver egyszerű lehetőséget biztosít arra, hogyha HTML táblázat az adatforrás, azt dinamikusan kezelje az oldal tartalmi részében, lehetőséget adva a formai módosításokra és beillesztésekre. Az importhoz használható varázsló lehetővé teszi az adatok sorbarendezését, külső adatokkal való együttműködését (képek linkjei például). Az adatbement lehet RSS hírforrás is.

1. Készítsük el a nyers adatforrást egyszerű HTML táblázatként. Minden sor legyen egy rekord, egy cella egy adat. A cellák tartalmazhatnak képet illetve ezek elérési útvonalát is. Könnyebbséget jelent, hogy ilyen egyszerű HTML táblázatot szövegszerkesztőkből és táblázatkezelőkből is exportálhatunk, illetve ha txt formában álla rendelkezésre, ezt könnyen táblázattá alakíthatjuk akár egy Word-ben is.
2. Nyissunk egy üres HTML oldalt és mentsük el rögtön.
3. A mentésnél lehetőségünk van a "Spry Data Set wizard" használatára: "Insert > Spry > Spry Data Set."
4. A varázsló 3 lépésen keresztül teszi lehetővé az adatforrás beillesztését. Elsőként a "Detect" listát állítsuk "Table" módba, a "Select Data Type" pedig HTML legyen, majd válasszuk ki az adatokat tartalmazó táblázatot. XML nyersanyagot is feldolgozhatunk ha az áll rendelkezésre.
5. Az adatforrásként szolgáló táblázat a site-ról elérhető útvonalon legyen, mert frissítésnél a végeredmény is megváltozik ha újra tudja olvasni.
6. A "Data Container" listából válasszuk a "Calendar List"-et.
7. Forrásként nem csak egy, hanem több táblázat is megadható.
8. Next.
9. A következő oldalon válasszunk ki egy-egy oszlopot, és definiáljunk rá adattípust. Lehetnek dátum, szöveges, numerikus, HTML típusú oszlopaink. Itt van lehetőség a táblázat oszlopai szerinti sorbarendezésre is.
10. Next.
11. Az utolsó oldalon dönthetjük el, hogyan jelenjen meg a táblázat végső formája. Alapvetően három forma közül választhatunk: Table, Master/Detail, Stacked. Saját egyedi Layout készítésére is lehetőség van, illetve letilthatóak a HTML kódot tartalmazó oszlopok. A kiválasztható Layoutokról ikon tájékoztat.
12. Set Up.
13. Ezután a "Spry Data Set – Insert Master/Detail Layout" dialógus box megjelenik, itt kattanjunk az "Add" gombra a "Master Columns" terület felett.
14. Az "Add Columns" dialógusban válasszuk ki a szükséges oszlopokat a Shift billentyű segítségével.
15. Sorrendbe rendezhetjük a kiválasztott oszlopokat a "Master Columns" listában.
16. Hasonlóképpen rendezhetjük a "Detail Columns" területet is.
17. OK, Done.
18. Válasszuk a "Live View" módot. Ebben a módban a szerkesztőfelületen elvégzett akciók megjelennek az oldalon. Vigyük az egeret a létrehozott táblázat azon elemére (a "master item"), amelynek hatására megváltozik az oldal összeállítása.
19. Változtassuk meg a forrásként szolgáló egyszerű HTML táblázatot, lehetőleg valamely olyan elemét amely szerint rendezési szempont is ki van adva (dátum pl.)
20. Mentés után kacsoljunk vissza a késznek tekinthető táblázatra, és használjuk a "Refresh Design view"-t a Document Toolbar-ból.
21. A frissítés után a módosított mező nem csak tartalmilag változik, hanem a sorbarendezés korábban megadott szabályai szerint is előrébb vagy hátrébb kerül a táblázatban az adott sor.

InContext Editing szolgáltatás

Az InContext Editing szolgáltatással a szerkesztés során kijelölhetünk egy régiót az oldalból, amit a látogatók szerkeszthetnek (böngészőn keresztül). Az oldal többi részét csak a tulajdonosa szerkesztheti. A látogatók által bevitt tartalmat CSS stílusokkal előre meg lehet formázni. Készítsünk egy ilyen módosítható régiót tartalmazó oldalt, és ellenőrizzük le hogyan lehet a kijelölt részt böngészőben szerkeszteni.

1. Készítsünk egy olyan oldalt formailag, amibe blogbejegyzéseket lehet felvinni. Készíthetünk olyan szerkeszthető régiót amibe több terület is módosítható, vagy olyat ami a szerkesztések során megismételhető.
2. Válasszuk a Window > Insert menüpontot.
3. Itt az objektumok kategóriái állnak rendelkezésünkre.
4. Az Insert panelből válasszuk az InContext Editing elemet.
5. Elsőként készítsünk olyan elkülönített területeket, amelyeket a látogató szerkeszthet. Itt három választási lehetőség áll rendelkezésre: ismétlődő régió létrehozása, egy szerkeszthető régió létrehozása, és az oldalra vonatkozó CSS szabályok managelése, kezelése, beleértve a látogató által szerkesztett területet is.
6. A módosítható tartalmat egy olyan részbe kell (lehet) beszúrni amelyet

tag definiál.
7. Az "Insert" panel "InContext Editing" kategóriájából válasszuk a "Create Editable Region" elemet.
8. Az oldalon egy kék fül és keret fogja jelezni, hogy az adott régió szerkeszthető lesz (mint DIV-es Layerek esetén). A Properties panelen beállítható, hogyan legyen szerkeszthető a kijelölt terület. Mint az oldal készítője lehetőség van korlátozásokra.
9. A Properties panelen, válasszuk azt „Uncheck all” parancsgombot. Ekkor kikapcsoljuk a szövegformázás összes korábban bekapcsolt ezáltal engedélyezett lehetőségét.
10. A szerkeszthető régióhoz hozzárendelhetünk egy CSS-t, de engedhetünk egy kis beleszólást a látogatónak. Az "Options" felirat melletti ikonok közül azokat a lehetőségeket pipáljuk ki, amelyeket engedélyezni akarunk.
11. Több ilyen területet is kijelölhetünk, amelyek egymástól függetlenül működnek majd. Más és más engedéllyel láthatjuk el őket a Properties paletta értelemszerű használatával.
12. A fent leírt módosíthatóság csak DIV-tagen belül engedélyezhető. Ettől függetlenül előfordulhat, hogy egy nem DIV utasítással formázott régiót választunk erre a célra. Ekkor egy dialógus boxot kapunk amiben eldönthetjük hogy a szelekcióra akarunk-e egy új DIV-taget definiálni, vagy a "szülő" tag-et akarjuk használni és módosíthatóvá tenni.
13. Egy ilyen művelet után is a Properties palettán kell beállítani mindazt amit tiltunk vagy engedélyezünk a user számára.
14. Ha elkészítettük az összes módosítható területet egyenként a megfelelő paraméterekkel, ki kell jelölni egy olyan területet, amely ismételhető régióként működik. Ebbe a területbe beletartozhat több egyenként módosítható terület is. Egy blog-szerű oldal esetén a téma, szerző, dátum, tartalom, cikkek esetén cím, közcím, bevezető, törsz, stb... Ha ezeket egyenként meghatároztuk, az egészet kijelölve tehetjük megismételhetővé az előzőekhez hasonlóan DIV-tag segítségével.
15. Az "Insert" panel "OnContext Editing" régiójából a " Create Repeating Region" elemet válasszuk. A kiválasztásnál fontos, hogy a " Repeating Region" tartalmazza az összes szükséges "Editable Region"-t.
16. Az "InContext Editing" szekcióból válasszuk a "Manage Available CSS Classes" elemet.
17. A feljövő dialógus boxban megjelennek a rendelkezésre álló CSS stílusok, azok amelyeket külső file-ban definiáltunk illetve csatoltunk az oldalhoz. Innen válasszunk egyet, és OK.
18. Mentsük el az oldalt. A publikálás után a kijelölt régió módosítható lesz, amennyiben nem felejtjük el feltölteni a szükséges JavaScripteket és CSS stílusokat.

SWF file-ok beszúrása

Az SWF file-ok az Internet oldalak népszerű elemei. Reklámok, nyomógombok, menürendszerek, komplett site-ok épülnek fel belőle. Az ilyen animációk beszúrása egyszerű drag-and-drop módszerrel is lehetséges. Problémát okozhat viszont, ha a kliensoldalon egy régebbi verziójú Flash lejátszó van üzembe helyezve. Ekkor előfordulhat hogy a beszúrt animáció nem működik vagy meg sem jelenik (képzeljük el ezt egy menürendszer esetében). Erre kínál olyan megoldást a Dreamweaver, ami leellenőrzi a Flash lejátszó verziószámát, és ha kell frissít illetve felajánlja a frissítést.

1. Készítsünk egy oldalt amibe Flash grafikát vagy animációt szeretnénk beszúrni. Mentsük el.
2. A Window menüpből válasszuk az "AP elements" menüpontot. AP: Absolutely Positioned.
3. Szúrjunk be a megfelelő helyre egy SWF file-t: Insert > Media > SWF. A beszúrt rész könnyedén lejátszható ellenőrzés céljából a szerkesztőfelületen. A Properties panelen ezt a célt szolgálja a Play és a Stop gomb. A Dreamweaver az oldalhoz csatolta a szükséges file-okat.
4. Mentsük el az oldalt.
5. Feltöltésnél a program rákérdez, feltöltse-e a működéshez szükséges csatolt elemeket is.

Végül...

Míg a nyomdaipari programoknak megfelelő fejlődési irányt biztosít az Internet felé történő nyitás, addig az Internetes programok számára a fejlődés alternatívája az interaktivitás. Az ezt szolgáló kliensoldali megoldások szépen fejlődnek, és egyszerű esetekben kisebb látogatottsággal számolva vagy belső vállalati célokra megfelelő megoldást kínálhat erre a célra a program által generált JavaScript. A Dremveawerben ez fejlődött leginkább a CSS kezeléssel párhuzamosan. Mindemellett az arra való törekvés is látszik, hogy ezek a korábban komoly szakértelemmel, szinte csak szerveroldalon megvalósítható interaktív funkciók, a HTML szerkesztők vagy designerek számára is érthetőek és használhatóak legyenek.