Product ReviewsDesign/DTP
The fragmentation of the Web browser market has inevitably led to incompatibility problems for many Internet designers. Dreamweaver is Macromedia's attempt to get around this, and with a little JavaScript trickery, it can generate code for both Netscape Navigator 3.0 and Microsoft Internet Explorer 4.0. It also functions as the first DHTML (dynamic HTML) editor, and unlike many of its contemporaries, it's one that actually works, and one that deserves a place on every Web designer's machine. Most designers are still wedded to Explorer 3.0 and Navigator 3.0, but the terrible twins of Explorer 4.0 and Communicator/Navigator 4.0 are gaining acceptance. Both enable designers to create much richer and more interactive pages through the use of DHTML, which will transform the Web from the dowdy thing it is now, into a multimedia playing field. Unfortunately, the versions of DHTML implemented in Explorer 4.0 and Navigator 4.0 are completely incompatible, causing the majority of Web developers to steer clear of using it - and it's this DHTML incompatibility that Dreamweaver seeks to address. A common refrain in Web design companies is that 'all visual Web editors are useless'. Dreamweaver also tackles this gripe by handing off source code editing to a dedicated text editor, with BBEdit for the Mac and Allaire Homesite for the PC both included free with the full package. BBEdit and Allaire Homesite are the leading HTML-oriented text editors on their respective platforms, which means professional designers won't have to give up their favourite tools to use the package. There's an HTML view within Dreamweaver, which is editable, enabling the user to tweak without launching a separate application, and the Preview window updates automatically. Dreamweaver can cope with a lot of variation in the type of code it can interpret, which makes it more powerful than a one-trick pony like Adobe PageMill. Browser compatibility Thanks to its built-in cross-browser compatibility, Dreamweaver generates complex code, so it takes a stout-hearted user to get in and meddle with the more unpleasant chunks of nested JavaScript-driven pages. Having said that, the simplicity of the Layers/DIV extensions means the code is nothing like as illegible as that produced by a poorly thought-out application like NetObjects Fusion. And Dreamweaver code provides even greater control over positioning than the previous method of making nested tables to achieve pixel-perfect placement. To position and fix an element, simply click on a layer's top-left-hand corner handle and drag it into position on the page. Anyone who has struggled with making HTML look like a Photoshop layout will appreciate the control that DHTML gives them. Considering how this drag-and-drop positioning is so fundamental to the way Dreamweaver works, it's a shame Macromedia didn't make creating and placing layers a matter of pushing a button. Instead, you have to create your 'layer' from a menu item, and manually add its contents (pictures, text, and so on). Layers and animation Layers can be visible or invisible (an attribute that can be switched on and off with JavaScript, enabling you to create elements that react to mouse and keyboard events, or to the timeline) and can overlay each other by controlling their position on the z-plane. Having positioned your layer, you can add animation or behaviour to it. Dreamweaver uses a timeline directly pinched from Director's score. Just like Director, you drag-and-drop elements from the editing window into the Score, create keyframes for animation, and let the score work out the tweening for you. Producing HTML that moves takes some getting used to, but Macromedia's animation method is both familiar and intuitive (and better than the equivalent in Flash). It even lets you determine a frame rate, using JavaScript's onTimeOut handlers. By this point, anyone brought up with static HTML will be feeling giddy with euphoria, as they've just broken through two of HTML's traditional limitations: arbitrary placement and lack of movement. But there's more. As well as making page elements move, Dreamweaver can make them react to user input and to each other by scripting them through JavaScript. Creating interactive multimedia activity through JavaScript is a step beyond the kind of trivial scripting used to make pages redirect their content and detect plug-ins or other browser properties. This is the point where simple scripting becomes programming. But by stealing another idea from Director 6.0, Dreamweaver allows users with only a vague idea of how to use JavaScript create complex applications. It does this by attaching Behaviours to page elements, or to frames in the timeline. A Behaviour is a predefined JavaScript to which the user simply has to add a few parameters. Image replacement on a mouseOver, for example, is just a matter of telling Dreamweaver which image you want to change, and the path to the replacement image. The program comes with a collection of useful scripts, including the all important ones for browser and plug-in detection. Dreamweaver's user interface is a little clunky in this department; image replacement is such a common trick that it would have been nice to see it appear from a pop-up menu within the main editing screen. And when using onMouseOver, events can only be attached to tags in all browsers (Explorer 4.0 allows you to use the onMouseOver handler without having to assign a URL to the object). This means it takes some nifty mouse pointing to get the Behaviour inspector to notice you want to add a Behaviour to the link, and not the image. Behaviours The real power of Dreamweaver's Behaviours lies in the fact that they are extensible via a straightforward API (application programmer interface). In a reasonable Web development set-up, this means the JavaScript programmer need only write a handful of custom scripts which can then be deployed by site-builders or designers, without the need for the latter to master JavaScript. Behaviours is one of the package's major strengths, and makes Dreamweaver more akin to a RAD (rapid application development) program than a simple point-and-click animation tool. There's no reason why the JavaScript involved needn't be a full-on financial transaction system as much
Style sheets CSS (cascading style sheets) go hand-in-hand with DHTML, even if they aren't crucial to creating dynamic content in Netscape (Explorer's equivalent of layers is called CSS-P, and uses style sheets as blocks of layout information, as well as simple rules about font, colour, and so on). Style sheets allow designers to specify attributes of text on a Web page way beyond the old HTML options of font size, colour and typeface. Leading, spacing, margins, alignment, and so on can all be defined, making DHTML as flexible to use as a rich text word processor like Microsoft Word. Dreamweaver's style sheet interface is very easy to use. You just create a style sheet name, then edit the options from a dialog box. To apply the style sheet to the text, select it from a floating palette (unless you've already used the style sheet to redefine HTML tags such as or ), which makes the changes automatically.
The 'cascading' part of the CSS acronym refers to the fact that one page can pick up its style sheet information from a number of sources. Styles can be applied to individual page elements, to all the elements in a page via a definition in the tag, or from an external document, in that order of priority. This allows one text file to control the entire look of a site, while giving designers control over individual portions of text in a document. This is because local changes supersede global ones - so if 22pt Arial with 24pt leading is applied to a paragraph and the global style sheet for the paragraph tag says Times 18pt, the browser displays the text as the former style.While Macromedia's implementation of style sheets is near perfect, there are a couple of minor irritations. I couldn't find a way to pick up a style from the document and define it in the Styles palette, and you have to get in and hack the HTML directly rather than use the graphical tools when adjusting local styles. Designers brought up with HTML 3.2 are going to have a life-changing experience when they come to use CSS for the first time. Macromedia's method of implementing style sheets is so straightforward that even Web-hostile designers will find it a joy to use. The best news is that CSS is already an official standard. For once, the technology comes directly from the World Wide Web Consortium and not the HTML extension programme of Netscape or Microsoft, so there's no chance of getting stuck with one-browser-only tags like | |||||||||||||||||
