Vaarwel Kladblok

Dreamweaver: eindelijk een goed programma voor webontwerp

Marc van Oostendorp

Dit artikel verscheen in 1998 in Emnet

Hoe kleurig en multimediaal webpagina's de laatste jaren ook geworden zijn, hoeveel functies er ook steeds bijkomen, veel ontwerpers van webpagina's werken nog steeds het liefst met een eenvoudig ASCII-programma om hun producten te maken. Het programma Dreamweaver van het bedrijf Macromedia kan hieraan definitief een einde maken. Macromedia is bekend van programma's om multimediatitels mee te maken, zoals Director. Nu komt het met -- eindelijk -- een goed programma om snel webpagina's te maken.

Er waren al alternatieven te over. Programma's zoals Netscape Composer en Microsoft Frontpage boden al jarenlang de mogelijkheid om met een zogenaamde WYSISYG-methode te werken: what you see is what you get, de ontwerper ziet op zijn scherm hetzelfde als de gebruiker zal zien. Het probleem met die programma's is dat ze vaak net niet prettig genoeg in gebruik zijn, dat ze vaak net niet de mogelijkheden bieden die de ontwerper nodig heeft, of dat ze vaak net niet zo WYSIWYG zijn als de ontwerper zal willen. Microsoft Frontpage zou bijvoorbeeld best een aardig programma zijn, als het de bladerprogramma's van Netscape net zo goed zou bedienen als die van Microsoft zelf. Als webontwerper wil je nu eenmaal je doelgroep niet beperken tot de gebruikers van een bepaalde bladeraar.

Laat ik mezelf als voorbeeld nemen. Ik heb in de afgelopen jaren enkele tienduizenden webpagina's ontworpen. En ik heb dat bijna steeds gedaan met zeer eenvoudige programma's zoals het Kladblok van Windows 95. Met de hand voerde ik alle opmaak-codes in die nodig waren om duidelijk te maken hoe ik mijn kopjes eruit wilde laten zien, naar welke pagina's ik wilde verwijzen, en welke pagina-onderdelen ik welke kleur wilde geven.

Dreamweaver maakt een einde aan mijn hang naar het Kladblok. Dat komt doordat het programma zowel een WYSIWYG-gedeelte heeft als een ASCII-editor, en doordat het deze onderdelen heel prettig laat samenwerken. De codes die in de ene worden toegevoegd, zijn meteen zichtbaar in de andere. Bovendien maakt het WYSIWYG-gedeelte zelf heel goede en doorzichtige codes aan, die in alle gebruikelijke bladerprogramma's zonder problemen bekeken kunnen worden. Nog belangrijker is dat Dreamweaver respect heeft voor de codes die de ontwerper zelf invoert. Veel programma's verwijderen codes die ze niet kennen of niet begrijpen uit de bestanden. Dat gebeurt ongetwijfeld met de beste bedoelingen, maar de ontwerper die weet wat hij doet wordt erdoor belemmerd om geavanceerde technieken te gebruiken.

Met mijn voorkeur voor het Kladblok was ik toch al langzaam maar zeker in de problemen gekomen. De bladerprogramma's Netscape Navigator en Microsoft Internet Explorer bieden allebei al ruim anderhalf jaar -- sinds hun eerste versies 4 op de markt kwamen -- spectaculaire mogelijkheden om pagina's te animeren: tekstelementen kunnen bewegen, verkleuren, geluiden maken, afbeeldingen kunnen terplekke van vorm veranderen, geluidjes kunnen weerklinken als de gebruiker op een knop drukt. Bovendien kan de webontwerper zijn pagina zeer nauwkeurig vormgeven: tot op de millimeter nauwkeurig kan hij bepalen op welke plaats op het scherm welke tekst of welke decoratie komt te staan. Dit alles wordt mogelijk gemaakt door een systeem dat Dynamic HTML (DHTML) heet.

DHTML zou een uitkomst voor veel webontwerpers zijn, als er niet twee problemen aan verbonden waren. In de eerste plaats hebben Netscape en Microsoft de basisprincipes van dit systeem op nogal verschillende manieren toegepast. Een DHTML-pagina die voor het ene systeem is gemaakt, werkt nauwelijks op de andere. Het is voor veel functies wel mogelijk om pagina's te maken die op allebei de systemen te bekijken te zijn, maar dat vereist een enorme hoeveelheid saai en ondankbaar programmeerwerk. Daar komt nog bij dat DHTML-pagina's er op oudere browsers over het algemeen heel slecht uitzien; en op dit moment werkt naar schatting bijna de helft van de websurfers nog met Netscape 3, Internet Explorer 3 of een nog oudere versie van deze programma's. Voor die doelgroep moet een geheel nieuw ontwerp gemaakt worden.

Een tweede probleem is dat voor het nauwkeurig plaatsen van pagina-elementen op een scherm echt een WYSIWYG-programma nodig is. Tot nu toe waren er geen WYSIWYG-programma's voorhanden die dit goed konden.

De voornaamste charme van Dreamweaver is dat het aan (bijna) al deze problemen een einde maakt. In een handomdraai heeft de ontwerper in het WYSIWYG-gedeelte een pagina gemaakt. Het programma maakt dan zelf de codes aan die nodig zijn om de pagina zowel in Netscape Navigator 4 als in Internet Explorer 4 te bekijken. Met een druk op de knop wordt bovendien een pagina gemaakt die in oudere browsers te bekijken is en het oorspronkelijke ontwerp zo goed mogelijk benaderd. In de ASCII-editor kan de ontwerper bovendien als hij dat wil alle details afstemmen.

Ook animaties maken is een fluitje van een cent. Zeker wie ervaring heeft met Macromedia's Director -- verreweg het populairste programma dat er bestaat om multimediale producties op cd-rom te maken -- heeft in een handomdraai een interactieve en geanimeerde pagina ontworpen. De interface van dit onderdeel van het programma is duidelijk geïnspireerd op Director. Op een tijdslijn kan de gebruiker de `acteurs' in het filmpje plaatsen, en bepalen op welk moment welke acteur welke verandering moet ondergaan. Ook hier worden de benodigde JavaScript-codes weer automatisch gemaakt, en wel op zo'n manier dat de animaties desgewenst zowel met Netscape als met Internet Explorer te bekijken zijn. Wie dat wil kan overigens ook de instellingen zo veranderen dat de pagina exclusief gebruik maakt van de mogelijkheden van (bijvoorbeeld) Internet Explorer 4. Dat is handig voor gebruik op een intranet, of verspreiding op een cd-rom met een bijgevoegde browser.

Macromedia Dreamweaver biedt nog veel andere kleinigheden die het tot een begerenswaardig pakket maken. In de rechterbenedenhoek ziet de ontwerper de hele tijd hoe groot de laadtijd is van de pagina die hij nu bewerkt op (bijvoorbeeld) een modem met snelheid 28.8. De documentatie van het programma is zeer helder. Bovendien heeft Macromedia een eigen website ingericht met informatie over het programma. De website voor webontwerpers Webmonkey bouwt bovendien aan een bibliotheek met (gratis) handige JavaScripts die in Dreamweaver kunnen worden ingebouwd, en waarmee bijvoorbeeld een mooie user interface kan worden gemaakt.

Het programma is in versie 1.2 beschikbaar voor PowerMacintosh en voor Windows 95. De Macintosh-versie werkt naat mijn indruk iets soepeler dan die voor Windows 95. Het heen en weer springen tussen Dreamweaver en browserprogramma's (om te controleren of alles er inderdaad in alle programma's zo uitziet als je als ontwerper bedoelt) gaat in Windows niet helemaal vlekkeloos, en bovendien is het programma op de Macintosh naar mijn indruk iets sneller. Waarschijnlijk is dit toe te schrijven aan de grotere ervaring van Macromedia met de Mac -- van oudsher het systeem voor ontwerpers.

Zeg ik nu definitief vaarwel aan mijn Kladblok? Zover wil ik voorlopig ook weer niet gaan. Dreamweaver is wel een nogal groot programma dat enige tijd nodig heeft om op te laden en vervolgens mijn laptop wel behoorlijk wat trager maakt. Voor het onderhoud van relatief eenvoudige pagina's zal ik daarom mijn toevlucht blijven nemen tot mijn oude vertrouwde ASCII-editor. Maar als ik voortaan een pagina ontwerp en van de grond af opbouw, zal ik automatisch dit programma starten. De websites die ik maak kunnen er alleen maar op vooruitgaan.


Dreamweaver: http://www.dreamweaver.com/. Op dit adres vindt u een volledig functionerende proefversie van het programma (+/- 6 Mb). Online kopen kan ook. Prijs: $300.

Webmonkey: http://www.webmonkey.com/