Product ReviewsDesign/DTP
In the cutthroat world of professional Web publishing, two applications have firmly established themselves at the top of the pile. Both in version 3, GoLive CyberStudio and NetObjects Fusion have left the likes of Dreamweaver and Freeway floundering in their wake. WYSIWYG Web design, dynamic HTML animation and interactivity alone are not enough to single either of these programs out. However, CyberStudio and Fusion both go one step further than other similar applications by also providing comprehensive site management, all within a single interface. The two programs offer similar features, but in actuality have radically different approaches to site production. NetObjects promotes Fusion as the ideal tool for building business Web sites, while GoLive places greater emphasis on creative control and flexibility. We put these two Web authoring heavyweights head-to-head to see what they're made of. User interface Unlike most Web design programs, Fusion's interface is deceptively simple and tidy, with a working window that toggles between the various stages of Web site design: site structure, page layout, styling, asset management and publishing. A context-sensitive Inspector palette adjusts most properties and parameters. The layout stage adds a tool palette and a collapsible 'object tree' listing all the items on a page. Elements are placed by choosing a tool and then dragging a marquee in the layout, often followed by a dialog box to define initial properties. CyberStudio has always been a Mac-friendly program, embracing the interface and even extending it in places, yet it does tend to sprawl a bit. It uses a six-tab working window, with sections for page layout and preview, HTML source and outline editor, frameset construction and preview. This is surrounded by various multi-tabbed palettes, including one holding drag-and-drop symbols representing page elements and HTML tags, the aforementioned Inspector palette, and a colour palette. With the Link Inspector and Site window open, you eat into screen real-estate. However, dragging a palette to the side of the screen minimises it to a small tab, and dragging a document to the bottom of the screen creates a Mac OS 8 pop-up window - something a lot of other programs would do well to copy. Practically everything is drag and drop, from placing an image to applying a colour, and GoLive has extended the metaphor with 'Point and Shoot' targeting, which allows links to be dragged between the Inspector and other windows. Site structure There are two ways a site development tool can handle the task of generating accurate HTML for a large Web site, while looking after all the links between files and assets, and coping with site-wide changes. One way is to forget about HTML and hold all the data in a single file as a database of pages, links, images and other assets, producing the HTML code when the job is complete. The other way is to start with HTML as the main page description language and hold every page and asset as a separate file, with a small associated database to keep track of all the links. Fusion takes the first route, with HTML code and images generated when the site is published. This means the working file can't be opened by other editing tools and, because it uses absolute file paths, can't be copied to another machine. Before you can share a Fusion file with other Fusion users it needs to be exported as a template, or published as HTML and imported into other programs. CyberStudio builds its HTML from the start, creating a site folder into which it places all the pages and copies any assets used in the site - so at any stage there is a fully working site available. Files can be opened and edited in SimpleText, or happily transferred to another user. However, site-wide changes can be slower in CyberStudio as it has a larger number of separate files to deal with. Both programs show the site structure as a hierarchical map of draggable page symbols, and Fusion can also view the structure in a more compact, text-based, nested list view. CyberStudio offers the additional options of presenting pages as icons, shaded rectangles, 'TV screens' or thumbnails of the actual content. As CyberStudio deals with actual files, creating a new blank page on the site structure generates a physical file in the site folder, and hyperlinks have to be added later. In contrast, adding a new page in Fusion automatically generates linked navigation buttons to associated pages and adds an appropriately named banner graphic. Changing the site structure will change all the buttons and links on each page. A convenient starting point for building a site structure is to use one of Fusion's many site and individual page templates, which provide a complete pre-built structure, navigation buttons, and even include suggested content. CyberStudio can also utilise full site and page templates, but you have to create them yourself. Layout Both programs can handle DTP-style precision layout, either by automatically generating a HTML table structure to hold graphics and text boxes in place, or by using Cascading Style Sheet (CSS) layers. Fusion divides the page into a layout area for page-specific elements, with a MasterBorder on each side for items like navigation buttons and logos that are common to the whole site or a section of the site. An object added to a MasterBorder of any page is immediately available on all pages using that border. It's also possible to set the MasterBorders to zero and just work within the Layout area. Alternative layouts can be saved for the same page, (toggled by a pop-up menu), so you can present options to a client, for instance. CyberStudio defaults to a standard top-down HTML layout, but items can be precisely positioned using a Layout grid. CyberStudio avoids any unacceptable page layouts by preventing you performing impossible tasks, like overlaying two images when using HTML 3.2. Fusion happily accepts any form of layout, only indicating possible problem areas with a discrete exclamation mark. New to version 3.0 of both programs is the use of CSS layers. CyberStudio refers to layers as 'floating boxes' while Fusion calls them 'layout regions'. These implement CSS definitions for absolute positioning and stacking order, allowing whole sections of a page to be precisely placed and even overlaid. However, to view CSS layers, a version 4 browser is required. If you're designing for earlier browsers, you'll need to stick to the more conventional HTML table format. Graphics Graphics work for a site is usually done in a program like Photoshop before being imported into the site. This is because of the need to control scaling, bit depth, resolution and colour to achieve the best compression. CyberStudio's graphics-handling capabilities are basic - image conversion (PICT or TIFF files to GIF or JPEG) and the automatic generation of LOWSRC black-and-white versions of images is as far as the program goes. Fusion provides much more. As well as conversion of PICT to GIF or JPEG, images can be scaled, cropped, tiled, rotated through multiples of 90¡, and have text applied over them. On publishing the site, a new image will be created based on your settings. Where Fusion comes into its own, however, is in the generation of banner and navigation button graphics, with each page automatically receiving a titled banner. Sadly, the text auto-generated over these graphics is not anti-aliased unless you're using ATM, so the end results can be rather crude. The look of Fusion's self-generated graphic items and other page elements like divider lines and backgrounds are controlled from within the Site Style section. This contains a range of professionally-designed styles that can be applied at any time, altering the look of the whole site in one go. There are over 150 styles available - from the seriously corporate to the weird and wacky - with new ones available from the NetObjects Web site. It's also possible to add your own library of custom styles. HTML scripting Web authoring tools are designed to remove the need to cut your own HTML. That said, no experienced Web developer will feel comfortable unless they can get under the bonnet and tinker with the engine. Fusion can't provide access to the HTML for a page as it has no built-in scripting environment, but it is possible, via the Inspector, to examine individual HTML tags generated for each element on the page. The tags can't be edited, but text can be entered or imported for inclusion before, within or after the tag via a dialog box. This procedure is very awkward, and the added text is not reflected on the page layout until you finally preview it. CyberStudio has two error- and syntax-checking HTML editors, one showing the source text
External HTML The ability to include external HTML in a page by reference is vital if the content of the site will be updated regularly. CyberStudio refers to embedded external HTML as 'dynamic components'. A component common to many pages may be referenced from a single external file, which only has to be edited for CyberStudio to automatically update all the pages containing it. The component displays properly in each page, but the fact that it's held as a referenced document is indicated by a dotted bounding box. Fusion represents imported external HTML by a large blank icon with no indication of the likely content or space it will require. Double-clicking this will launch a predefined external script editor like BBEdit, while any assets referenced in the external file will be managed by Fusion. Unlike CyberStudio, there is no syntax checking on any additionally-scripted HTML, so non-displaying code won't show any problems until the final preview. Asset management An asset is any image, media element, external HTML component or database included in a Web page. It is vital that a program lists assets for easy addition to new pages, and that the reference link can be checked in case the asset has been deleted or moved. In CyberStudio, assets can be added to a site by dragging them directly into the Site window, from where they can simply be dragged into a layout. CyberStudio can open assets in their creator application, reveal them in the Finder, Get Info, force updates, or delete them. Any asset can be previewed in the Inspector palette, making it easy to search through obscurely-named files. Broken link errors are listed, and all the links from any page to the pages or resources referenced in it can be graphically displayed in the Link Inspector. Fusion's Asset section is really just a list of assets and not much else. There is no preview available, and the only indication of a lost link to an asset is the lack of an entry in the file size column. Assets are added to a layout by following a set of nested dialog boxes to view a list of the assets available. Surprisingly, however, a preview is available by this route. Frames The use of frames in Web design is an issue that seems to split Web developers, but a decent authoring tool should at least make them simple to implement. Fusion handles frames by only allowing one or more of the page MasterBorders to be converted, which certainly restricts your options. For anything more adventurous, the frameset will have to be coded by hand. Fusion also has serious problems with targeting, so the whole frameset is refreshed instead of the contents of just one frame. CyberStudio, in complete contrast, offers comprehensive frame handling with dedicated frameset creation and previewing areas. Framesets are assembled by dropping in symbols showing the desired arrangement, which can then be subdivided, nested and resized to suit. The contents of any frame can be checked live in the frameset, or opened in a separate window to the size of that frame. All parameters are available in the Inspector, and frame targeting is simple using Point and Shoot. Animation and interactivity Animation using Dynamic HTML is a matter of controlling the CSS definition for the positioning and visibility of a layer via JavaScript. This is quite tricky and all but the simplest movements need complex scripting. Fusion and CyberStudio offer pre-built JavaScript components, like button rollovers, that can be used without any knowledge of JavaScript. Because of the varied support for JavaScript between browsers, both programs will generate code that can run in either environment. Fusion also includes Java components that can provide a clickable site map or even a message board. Fusion handles DHTML animation and interaction using menus rather than a timeline, which is surprisingly effective and saves a lot of screen space. A list of object commands is built by choosing trigger events like 'mousedown' and an associated action. There are a series of simple pre-built animations available - for example, 'Fly out Bottom Right' - and key positions can be saved and the item sent to each in turn. One object's Action can also pass a message to another object to modify its behaviour. However, for complex animations there is no overview, so you have to check each item's list of commands to see what it's supposed to do. A layer or 'floating box' is animated in CyberStudio by simply recording the motion of the box as you drag it about. The Timeline Controller palette shows the key points and allows the motion path to be adjusted. The frame rate can be adjusted or looping can be set, and multiple-named 'scenes' can be built, each with a different animation. Animations can be viewed in the program in both layout and full preview mode. Unfortunately, the Timeline palette is pretty big and can grow a lot larger, as all animated objects require a separate timeline. Type control CyberStudio is the only WYSIWYG creator on the typographic side of CSS. CSS definitions (supported by version 4 browsers) describe how different sections of the document should appear, providing total control over the layout, far beyond HTML. Creating styles really needs feedback, and CyberStudio handles it just like a professional DTP application. You can define font size and weight, typeface, layout, colour, margin, border and background, covering practically every option allowed by the CSS specification. All changes are reflected in the layout window. User-defined styles are then available on a style palette for you to apply anywhere on the site. CyberStudio's browser preview understands and reflects the different rendering of pages across the various browser implementations, and even allows for the apparent increase in text point size when viewed on a PC. It also generates style sheets that will work with all browsers currently supporting CSS. Database linking To create a viable Web site, it's essential to have a live link to a database. There are third-party plug-ins available which enable this - for instance, CyberStudio has WebDAL - but Fusion is unique in providing this functionality as standard. Fusion can publish an external FileMaker Pro database by simply dropping the file into the program. This will be used to generate a static site based on the content of the database at that moment, and can be extended by using AppleScript to schedule regular updates. Alternatively, Fusion sites can be connected dynamically to practically any ODBC-compliant database using one of a growing list of connectors and components available via the NetObjects Web site. No-frills or full-on? Both programs are highly professional tools, but the different approaches they take make them suitable for different users. Fusion holds the user's hand by simplifying the whole design process into a series of choices, and offers a large amount of pre-built material. This is marvellous for Web developers without a design background, as they can create a good-looking site with the minimum of effort, allowing them to focus instead on the content. Designers, on the other hand, will feel constrained by this way of working. Certainly, if you use the included styles for a business site on the Web, you run the risk of other Fusion users having chosen the same style and layout. Fusion also sees itself as the hub where files from a variety of applications and databases can be integrated into a Web site. However, designers will be irritated by the limited feedback provided during layout, which makes it very difficult to tell how this patchwork will finally look. There is no doubt, however, that the ability to work directly with FileMaker database files, and dynamic integration with external databases, makes Fusion a very useful tool for sites where content changes frequently. That's not to say CyberStudio can't be used to build business sites - in fact, it's the only Mac tool that's integrated with Apple's WebObjects. CyberStudio is much more intuitive for a designer familiar with DTP programs and has an elegance that makes it very enjoyable to use. It offers the flexibility of layout a designer needs, and with CSS typographic control, it will provide a better-looking layout. Its site management and file handling is very visual and extremely powerful, while the integration of external HTML snippets makes regularly-updated content simple to implement. So the bottom line is this: if you just want to get the job done, Fusion is the one to go for, but if you're feeling creative, choose CyberStudio. By Jon Keaty |
|||||||||||||||||
