Chapter 13

Creating Web Sites with Macromedia's Backstage Desktop Studio

by Dennis Hamilton


Macromedia's Backstage Desktop Studio is one of a new generation of tools that combine dynamic Web page authoring facilities with Web site management features. The key word in all of that is dynamic. That means adding, with relative simplicity, multimedia and database connectivity into pages whose information needs to change as often as the person viewing it changes. In their ultimate form, dynamic pages are pages tailored specifically to the person who calls them up.

At the time of this writing, the majority of pages being created for the World Wide Web-and there are more than seven million of them-are static monuments to passivity. No motion, no interactivity, no applications, no database access, no viewer customization. For a lot of sites, these are lost opportunities.

The most successful, useful, and visited sites are dynamic in one way or another. They involve the viewer. They enable viewers to correspond with web page creators. They provide gateways to specific information. They help them solve problems. And they do it in interesting and creative ways. With 3,000 new pages being added to the Web every day, the question becomes one of new objectives: If dynamic sites are the future, how do you build and manage them today?

Macromedia, known for such multimedia tools as Shockwave and Director, purchased the original developer of the Backstage line-iband, based in Campbell, California-last March. It has moved with the Backstage line into the total Web site management end of things, from creating through administering, and now has assembled a variety of tools flying the Backstage colors (see Figure 13.1).

Figure 13.1 : Macromedia's home a prime look at a Backstage-developed dynamic page.

These tools range from a WYSIWYG authoring environment called Backstage Designer on the low end to a comprehensive Web site creation and management system with client/server facilities called Backstage Enterprise Studio on the high end. The former is for anyone, Web professional or otherwise, who wants to create fast, interesting Web pages; the latter is for high-end pros looking for optimum multimedia pages, client/server Web applications, and maximum database connectivity, including mainframes.

Backstage Desktop Studio, which lies between the two, contains all of the facilities found in Enterprise Studio except for the extensive client/server application development and connectivity tools. It does have facilities for connecting to popular desktop databases such as Microsoft Access, FoxPro, and Paradox.

Who Backstage Desktop Studio Is for

Backstage Desktop Studio is an extremely function-rich suite of tools. That often has meant it is too advanced for personal Web-page developers or Webmasters at smaller sites who have limited technical knowledge. But in fact Backstage Desktop Studio, thanks to the tools in its suite, is as good as the people using it and can even make the site better. If you're creating your first Web site, you can do some interesting things quickly; if you're a high-level Webmaster, you can apply your own custom techniques and ideas to bring truly unique pages to life.

Backstage Desktop Studio's preinstalled links to popular desktop databases acknowledge a trend in Web publishing: you don't need a mainframe client/server environment to have a useful, functioning Web server with database applications.

The software was developed with Web dynamism in mind. That means being able to create or change pages quickly and easily, as information needs demand. It means being able to link into desktop databases quickly and easily. It means having an "intelligent" site that is able to customize itself to the person viewing it. It means the fast, simple insertion of compelling visual images.

While all of that functionality isn't needed on every Web page or even every Web site, the process of making it available helped make Desktop Studio useful for almost any level of expertise. The point-and-click features, the ability to drag-and-drop heretofore complex functionality onto a page, and the WYSIWYG HTML editor all turned the software into a tool for the masses, even if it wasn't necessarily intended that way originally.

The ability to add customized HTML by using the source edit mode enables high-tech professionals to add even more functionality to their pages. Another development aid-this one is not included with the Desktop Studio suite but is available from Macromedia for use with it-is the Xtras Developer's Kit (XDK), which higher-level developers can use to create their own custom objects.

The creative end of the Web page development process is helped by the management end of it. Backstage Manager, the Web site project management and administration system that is included with Desktop Studio, enables developers of any level to keep track of their work easily. As Web sites grow and their pages multiply, the complexity and coherence of the whole gets tough to control. Because Backstage Manager is a visual tool, control is simpler to see and maintain, as are logical extensions to what should be developed next to make a better site.

Backstage Desktop Studio is only for developers who really need strong page-creation tools along with accessibility to desktop databases. If you do not need to interact with desktop databases (and don't intend to in the near future), you should probably consider Backstage Designer Plus, which is the page-creation element of Desktop Studio. You can bring all of the same design tools, including the Objects Library, to bear on your Web site. You just won't have the database tools. But Backstage Designer Plus is considerably less expensive when purchased alone.

Conversely, if you need the highest-end tools available-for example, to connect client/server applications from your Web site to a remote mainframe database-the Backstage Enterprise Studio is the option you would consider. But at close to $3,000, this option is only for the most advanced Web sites and developers.

For most people, Backstage Desktop Studio is the happy medium. It brings a strong suite of easy-to-use design tools, site management features, and connectivity options. Both new developers (it helps to be at least technically intuitive) and tenured high-tech Web wizards can use it, and that makes it one of the more interesting tools to come along this year.

Point-and-Click Simplicity

Backstage Desktop Studio puts its emphasis on creating highly functional dynamic Web pages with point-and-click simplicity. Anyone who has labored through coding with HyperText Markup Language (HTML), the pre-eminent page language of the Internet, knows how tedious it is. Desktop Studio brings a WYSIWYG HTML editor that enables designers to build multimedia pages without coding any HTML.

Backstage Desktop Studio has a strong variety of point-and-click features to render HTML, so you don't need to code every tag; skilled HTML developers also can use the source edit mode to create even more customized page designs. An HTML validation facility reviews all of the HTML tags so the developer doesn't have to do so.

But HTML alone has limitations, no matter how patient and creative the developer. Backstage Desktop Studio takes the point-and-click functionality beyond HTML into multimedia and desktop database connectivity. Using Backstage Objects, a library of which is included with the software, page developers can create and integrate robust database front ends, discussion groups, forms to e-mail, and much more in a simple drag-and-drop environment. And they can manage all of these things, including remote servers, from a central Backstage Desktop Studio site.

To do this, Macromedia has tied together several discrete tools to create the Backstage Desktop Studio suite. A discussion of the basic components of Backstage Desktop Studio follows.

Backstage Designer Plus

Backstage Designer Plus is the primary design tool for building Web pages in any of the Backstage environments. Using simple point-and-click, drag-and-drop, WYSIWYG tools, Backstage Designer Plus was created to make dynamic, multimedia page creation easy for just about anyone (see Figure 13.2). It is available from Macromedia as a separate Web page authoring product but is included as part of the Backstage Desktop Studio suite. It's also the tool used to build interactive Web-based applications using Backstage Objects. Backstage Designer provides a visual Web page editor that enables developers to insert Backstage Objects as they build the pages. It provides standard word processing features and supplements them with a range of HTML-specific functions. They include text and hyperlink formatting, an HTML source edit mode, a form-building toolbar, and menu selections and toolbar buttons for a wide range of standard HTML tags.

Figure 13.2 : Backstage Designer Plus, the page design tool of Desktop Studio, enables you to turn a page of text into a fully-coded, full-color, multimedia Web page with just a few point and-click commands.

Backstage Manager

A key component of Backstage Desktop Studio, Backstage Manager is a project management system that helps Web site developers create and administer their sites. It is used in tandem with Backstage Designer Plus. It provides a project-level view of all of the pages that make up a site, enabling developers to visualize and manage the site in its entirety (see Figure 13.3). It is also the source of Backstage Objects that provide the functionality to Backstage-developed pages.

Figure 13.3 : Backstage Manager provides an overview of all of the pages of a Web site, local and remote, to help developers and Webmasters manage the entire site.

Backstage Manager organizes Web sites into four major categories:

Using remote file transfer protocol (FTP) servers, Backstage Manager also enables Webmasters and developers to administer remote sites. The local site is where developers usually keep the applications they are developing. When an application is ready to be deployed, Backstage Manager automatically posts all components of the Web application to a remote site.

If you travel on business, Backstage Manager enables you to download an entire site, work on it wherever you might be, and then upload changes and additions when you dock with your Web server or dial in to your local area network.

Backstage Objects

The library of Backstage Objects contains most of the advanced functionality of Backstage Desktop Studio (see Figure 13.4). They are used to develop Web-based applications. The 16 scalable, built-in objects provide connectivity to desktop databases, forms, threaded discussion groups, automated e-mail, user log-in and authentication, page hit count, browser ID, and more, all without scripting or programming.

Figure 13.4 : Instead of programming functionality into Web pages, developers can drag and drop functional objects into place from Backstage's Objects Library.

Most of the objects can be inserted into a Web page right from the Insert menu on the toolbar, and then configured quickly by double-clicking on the object to display its Properties dialog boxes.

Backstage Object Server

The Backstage Object Server for Desktop Studio works with most Web servers and all Web browsers. It serves up the functions of the Backstage Objects that have been inserted into the Web pages-dynamic features such as e-mail, discussion groups, and so forth. It uses ODBC compliance to be instantly compatible with most popular desktop databases. It can also tailor page visits to the page visitor. The authentication object identifies the visitors to your site and then tailors your site to their profiles. Dynamic HTML page generation creates pages that are customized at run time, each time a visitor accesses a page.

These components constitute the core of Backstage Desktop Studio, but other tools extend its dynamic page creation functionality even further. Included in the suite of tools are what Macromedia calls PowerApplets, six fully customizable applets using Director and Java. You can use them to instantly add multimedia features to any Backstage-developed Web page (see Figure 13.5). Included are Animator, SlideShow, Icons, Banners, Bullets, and Charts.

Figure 13.5 : Backstage's PowerApplets combine two strong Web technologies--Java and Director--to create six ready-to-use multimedia applets that turn visually static pages into dynamic ones.

Desktop Studio also includes Macromedia xRes SE, a powerful image editor for creating Web graphics, a collection of Web-page templates, and a library of clip art. In practical terms, these tools mean a developer could get a functioning Web site up and running in just a few hours.

What Equipment and Software You Need

Like most full-featured Web-page development environments, Backstage Desktop Studio takes up quite a bit of disk and RAM space, though it is by no means the worst. Developers can actually do all of the design work with fairly old equipment; the Backstage Server and Backstage Object Library require a boost in power and memory to work well.

The four components are installed in twos. The Backstage Designer Plus and Backstage Manager components, which run on a client computer, require

The Backstage Server and Backstage Object Library, which are intended to run on your Web server, require 24 M of RAM for Windows NT or 16 M RAM for Windows 95.

Although the Backstage Server and Objects Library are meant to run on your Web server, they can also be installed on the client computer. The latter requires you to have the same recommended disk and RAM storage on the client as you would on the server.

You will also need the following:

Creating a Backstage Site

The first thing to do in creating a Backstage site, and then individual Backstage pages, is to start Backstage Manager. This is the control point for the site. All pages from the home page on are originally created and named in Backstage Manager. Backstage Designer Plus is then used to do the actual creative work on the Web pages. Unlike a lot of project management systems, Backstage Manager does not require that you configure it extensively. It simply provides a control point for and access path to all of the pages in your site.

To creating a new site project with Backstage Manager is a simple three-step process:

  1. Start Backstage Manager by double-clicking the icon.
  2. Select the Local icon in the Projects pane (see Figure 13.6).
    Figure 13.6 : Projects and pages are created and named in Backstage Manager, which then works in tandem with Backstage Designer Plus while you develop the pages.
  3. Select File | New | Project.

This creates a new project icon under the Local icon. The default name of the project is NewProject, which you will see has been selected. Just enter the name of the new project and you're off and running into Backstage Designer Plus to begin creating.

Creating the Backstage Home Page

The home page is just what its name implies. It is the point of entry for anyone who wishes to access your Web site, the most important page you will create. The best way to think of a home page is like a magazine cover or a table of contents. It is from here that viewers will find a link to the specific information they're seeking when they visit.

Backstage Manager is used to create the home (and other) pages for the Web. The pages then are kept in the project folders and any one can be accessed just by double-clicking on the project (Web site) name. This will open Backstage Designer Plus (see Figure 13.7), where you can begin the process of actually developing the creative content of the home page.

Figure 13.7 : Once you create the Web site project and home page in Backstage Manager, it automatically opens this screen in Backstage Designer Plus to begin the page development process.

Designing in WYSIWYG

WYSIWYG is the acronym for "what you see is what you get." In the online world, that has two special meanings: what you see when you design the page and what you see when you view the page in a browser. The first point is that WYSIWYG development enables designers to create a Web page much as they would a page of text (with design elements added), and then have it show up in their browser exactly as they designed it. Before the automatic HTML creation that Backstage and others have brought to Web page development, designers would code the HTML tags onto text, and then switch to a browser to check their work (often finding several elements not as they had intended). Then it was back and forth, back and forth, until the bugs were out.

Backstage's WYSIWYG, an extremely important feature of the software, enables Web page designers to create the text naturally, in a browser-like screen, without worrying about HTML.

Without WYSIWYG, for example, you would write a Web page this way:



<TITLE>WebFeat Home Page</TITLE>




<H1><FONT COLOR="Maroon">WebFeat</FONT></H1>


<FONT COLOR="Teal">Java Page of Web Champions</FONT></H1>


<P ALIGN="LEFT">From this site, you can learn how to add fast, easy Java to your

Web page.

You can place your applet anywhere and Backstage Designer will do the rest. </P>

<P ALIGN="LEFT">&nbsp;</P>

With WYSIWYG in Backstage Designer Plus, you would write this to do the same thing:


Java Page of Web Champions

From this site, you can learn how to add fast, easy Java to your Web page.

You can place your applet anywhere and Backstage Designer will do the rest.

The second aspect of WYSIWYG is how different browsers present the Web pages you create. Is what you see in one browser what you see in another? Not always. Developers have suffered through five years (the World Wide Web was started in 1991 with the ncSA Mosaic browser) of finding their pages sometimes looking fine in one browser and awful in another. There were line breaks in text where there shouldn't be. Some design elements weren't accommodated. Some pages were barely recognizable as coming from the same source.

Macromedia has eliminated some of the problems. Web pages created in Backstage are largely browser-independent (though they clearly get the best servicing from Netscape Navigator 2.0 or 3.0 and Microsoft Internet Explorer 3.0, which together constitute at least 85 percent of the browser market; they also support the widest range of plug-ins and applets that can bring a Web page to life and that are Backstage Desktop Studio's strength). The HTML 2.0 tags that are the standard output for Backstage Designer Plus are usable on virtually any Web server (and you can still add, while in source mode, the latest HTML tags developed to create even more advanced pages).

There is a little work to be done here, however. Although first-hand examinations show that most browsers display Backstage-developed pages similarly, one of its own Web site pages still broke the headlined word "Plus"-as in Backstage Designer Plus-in half while being viewed in Netscape Navigator 2.0, dropping the "us" to a second line. The same problem wasn't evident in Internet Explorer. It was the only anomaly among all the pages at the site. A minor point, but interesting.

Using the WYSIWYG facility is fairly simple, especially if you are familiar with any Microsoft Office products. Once you set the Properties for a page-a quick procedure from the File menu-you can start creating the text using the WYSIWYG editor. This is one of the real joys of Backstage, especially for developers who can remember encoding every HTML tag manually.

Via point-and-click facilities, you can do the following:

In addition, the Backstage Designer toolbars enable you to insert design features such as horizontal rules, plug-ins for browsers such as Netscape, Java applets, images, and objects. Placing these features into your WYSIWYG-created page automatically adjusts the HTML coding to accommodate them.

In Figure 13.8, the WYSIWYG page looks pretty much as if it had been created with a typewriter. You enter text right on a screen that looks very much like one you might see (and far too often do see) on the World Wide Web. This default look gives you a better sense of what you would have as a starting point if you just sent basically unformatted text out as your home page.

Figure 13.8 : You can enter text for your home page, or open a file of text that you want to display. This is what it looks like before you do some quick WYSIWYG formatting.

From this starting point, you can work quickly to add the touches that will separate your Web pages from the millions that compete with it (see Figure 13.9). Adjust the sizes of your headlines and subheads, add color to the words you want to draw attention to, and add links to the "hot words" you'll use to jump to other pages.

Figure 13.9 : The changes to the text took about 60 seconds and required not a single line of manual HTML coding.

If you want to view or modify the HTML coding that has been created while you developed the page, you can display it by a simple click on the toolbar (see Figure 13.10).

Figure 13.10: All of the HTML code seen here, which once had to be tediously coded tag by tag, is generated automatically by Designer Plus. If you want to add more HTML functionality by adding new code, just enter it from this screen.

Adding Hypertext Links

In the final analysis, the thing that makes the Web navigable is the hypertext link. Without these links, you would need to find and enter uniform resource locators (URLs)-the name for Web addresses-every time you wanted to advance to another destination page. With the links, you need only click on a word or image to make the jump.

The process of adding hypertext links used to be a tedious affair, but Backstage has greatly simplified it. Adding hypertext links in Backstage requires only highlighting the text that you want to link, and then entering the URL in the Hyperlink properties dialog box. In the field designated URL:, type the address or click the Browse button next to the field to navigate to the file you want users to go to when they select the hyperlink.

It is no more complicated to create links to one Backstage Object that you will work with in Desktop Studio (e-mail, forms, discussion groups, and so forth). You do it by linking to the Backstage page containing the object. In the Hyperlink properties dialog box, click the radio button for Hyperlink to Backstage Page instead of that for Standard Hyperlink. Then in the URL field, enter what is called a relative URL-that is, one that is not fully specified. For example, a specified URL might be: A relative URL might look more like this: client_server.htm. Fully specified URLs don't work here.

After you've entered the relative URL, determine the Backstage link option (see Figure 13.11). When you click the Hyperlink to Backstage Page radio button, it will enable the controls just beneath it in the dialog box. You can choose Start New Session, which means you will be using a new object; Preserve Existing Session, which just extends the use of the object you have been using; or Custom, which enables you to configure a custom session link.

Figure 13.11: In the past, using a hyperlink to link to objects required HTML coding and perhaps even some programming, depending on the object. Backstage has reduced the creation of hyperlinks to a 10 second proposition, just as long as you know the URL.

The distinguishing feature for Backstage in all of this is that most of the linking is done via point-and-click configuring. The default hyperlink color is the standard blue, but you can choose any color you like from the Backstage palette. Anytime you need to recheck or change a URL, you can do it right from the Hyperlink properties dialog box instead of sifting through the HTML source. Just highlight the URL, and then click the Hyperlink button on the toolbar. No more needle-in-a-haystack searches, which are especially difficult when you have a lot of URLs listed together in HTML source.

Using Backstage's Objects Library

Backstage Desktop Studio comes with a library of Backstage Objects that, along with the WYSIWYG facilities, are what really speed up the Web page development process. All of the Backstage Objects are point-and-click elements. Inserting them is a matter of placing your cursor where you want the object on the page, and then double-clicking the object to display a dialog box in which you configure it.

The following list describes the objects in the Objects Library in Backstage Desktop Studio. The references to a "Backstage Web page" distinguish it from a standard Web page, which does not have any objects in it. The preprogrammed Backstage Objects include the following:

Authentication. Defines attributes of a user profile to allow or restrict access.
Backstage Button. Specifies attributes associated with a button placed on a Backstage Web page.
Backstage Checkbox. Specifies attributes associated with a checkbox placed on a Backstage Web page.
Backstage Menu/List. Specifies attributes associated with a list or menu placed on a Backstage Web page.
Backstage Radio Group. Specifies attributes associated with a radio button group placed on a Backstage Web page.
Backstage Table. Specifies attributes associated with a table and associated columns placed on a Backstage Web page.
Backstage Text. Specifies attributes associated with a Backstage text object placed on a Web page.
Backstage Text Field. Specifies attributes associated with a Backstage text field object placed on a Backstage Web page.
Browser Information. Defines browser attributes that can be placed on Web pages.
Conditional Include. Defines conditions and files to include in a Web page display based on whether the condition is TRUE or FALSE.
Database Connection. Specifies logon, database connection, and query attributes.
Date & Time. Specifies format of date and time stamp, which can be included on a Web page.
Debug Dump. Displays HTTP parameters from the last page.
Discussion Group. Specifies attributes associated with discussion groups, topics, and topic messages.
Field Link. Specifies attributes associated with a Backstage field link specified on a Backstage Web page.
Next Data-Page. Specifies processing for a Next Data-Page object placed on a Backstage Web page (when displaying multiple pages of data retrieved from a database).
Pagehit Counter. No attributes. Corresponds to the Pagehit object that indicates the number of times users have accessed a specific Web page.
Previous Data-Page. Specifies processing for a Previous Data-Page object placed on a Backstage Web page (when displaying multiple pages of data retrieved from a database).
Session Link. Specifies attributes associated with a Web page session link and associated database connection and processing of page-to-page links.

Although it isn't possible in this chapter to go into detail about each Backstage Object (some are self-explanatory), I'll discuss some of their more important uses.

Creating Forms with Backstage

Backstage Desktop Studio makes it a relatively simple job to create both standard and Backstage (those with objects in them) forms for your Web site. It uses a library of point-and-click form elements. You can place any of them simply by putting the cursor at the point in the form you wish the element to appear, and then adding that element. You can add the following elements:

These elements make forms creation pretty much a mouse-based affair. You can access all of these form elements from a toolbar along the left side of the Backstage Designer Plus screen. You can also reach them from the Insert menu.

Forms enable Web site developers to collect information from people. Backstage provides two types of forms: standard and Backstage. With the standard forms, you can use the library of form elements to create your standard form via pointing and clicking (see Figure 13.12). The Backstage forms differ in that they contain Backstage objects. The forms creation process is similar regardless of which type of form you are creating.

Figure 13.12: Forms contain a variety of common elements, all of which are available from the Insert menu on the Backstage Designer toolbar.

After you have placed the standard form elements into your form, you can change the properties of each one by placing the cursor on the form element and double-clicking. This displays the Properties dialog box for whichever element you clicked on (text field, radio button, and so on). You customize your form's content in these Properties dialog boxes(Figure 13.13). Your options include the following:

Figure 13.13: The Text Field Properties box illustrates how much latitude a developer has in customizing a form element.

This part of the forms creation process departs only slightly from point-and-click construction. The Properties dialog boxes demand a small amount of naming and value defining, but you can do this extremely quickly if you know the parameters before starting.

You could create an "average" form-defined here as one with 10 form elements-and define its values in 5 to 15 minutes (only something such as a lengthy scrolling list could slow the process at all).

Inserting a Form Object

Backstage's Objects are often the primary reason that a form might exist, but adding them is somewhat more complex than setting up a standard form. Even so, much of the configuration manages to stick with Backstage's commitment to a point-and-click world. The form elements for Backstage Objects appear the same on the screen, but in fact are quite different underneath. You must select these form elements from the Backstage Form Field (not the Standard Form Field, as previously described). Figure 13.14 illustrates how many additional specifications potentially need to be set to create a Backstage Object form.

Figure 13.14: Each of the Properties tabs for the form elements needs to be configured for the database the form will interact with. In this figure, by double-clicking on the form element itself you can configure the Textfield properties in the dialog box.

Backstage Desktop Studio has a great deal of built-in interconnectivity with several popular desktop databases such as FoxPro, Paradox, and Access, thanks to its ODBC standards compliance. This means that while the delivering information to and from these databases via forms isn't exactly simple, it doesn't require a database guru either.

Creating Discussion Groups with Backstage

Backstage Desktop Studio is delivered with a Discussion Group Object, with which you can create discussion groups. Discussion groups are like newsgroups you would find on the Internet. They contain one or more groups devoted to specific subjects. Viewers can select a subject, read postings from other people, and post messages themselves. The responses can be threaded, meaning they are linked to an original posting. The difference is that discussion groups are essentially confined to subjects your particular Web site deals with, instead of the more generic newsgroup approach.

Discussion groups can be used for gathering information from clients, posting research and getting comments on it, and debating the merits of new products, even as a form of online help (with messages from people with product problems and replies from people with solutions). They can have juries or moderators to keep the postings relevant.

Creating an actual discussion group page in Backstage is a simple four-step process (although this procedure only places the object onto your Web page; there still is some configuring to do):

  1. Place your cursor on your Web page at the point you want the discussion group page to appear.
  2. Choose the Insert | Backstage Object command from the menu bar.
  3. From the Insert Backstage Object dialog box that appears, choose Community Objects (as shown in Figure 13.15).
    Figure 13.15: Adding the Discussion Group Object from Backstage's Object Library is a four-step process during which your index finger never leaves the mouse.
  4. Choose Discussion Group, and then click Insert. The Discussion Group Object is then inserted into your Web page.

After you insert the Discussion Group Object into the page, you need to set its properties. This is done from two dialog boxes that you access from Backstage Manager, which always works in conjunction with Backstage Designer Plus in creating pages. You will be asked for information such as the name of the discussion group, a URL (optional) to return a visitor to when they exit the discussion group, the name of the administrator and the administrator's e-mail, and what access privileges you wish to assign. Then you just need to set your topic headings (to establish precisely what you want discussed, lest it become an open forum), and the site is ready (see Figure 13.16). The entire process consumes only a few minutes.

Figure 13.16: The inserted Discussion Group Object shows up on your screen as shown here, with the group name between two bold lines.

Adding Plug-ins, Java Applets, and ActiveX

Backstage Desktop Studio was developed with page dynamism in mind, so dynamic elements such as Java applets, plug-ins for Netscape Navigator and Microsoft Internet Explorer, and ActiveX applets all have been accommodated in the point-and-click scheme.

Java and ActiveX applets, along with plug-ins such as VRealm (a Virtual Reality Modeling Language-VRML-viewing tool) and Shockwave (Macromedia's tool for video/sound/animation support), are placed into pages using the Insert menu. Put your cursor where you want the applet or plug-in to go and then choose the Insert menu and select Java applet/ActiveX/Netscape Plug-in. Backstage Designer Plus then places an icon on the page at the location you designated (see Figure 13.17).

Figure 13.17: To insert a Java applet, just place your cursor in the position on the page you want the applet to appear, and then click Insert and select Java Applet. An icon like those here will be displayed.

When an applet icon has been inserted into the page, you need to double-click the icon to display the Java Applet Properties dialog box (see Figure 13.18). Just select the applet you want to place, set the dimensions and attributes, and click OK.

Figure 13.18: You can configure the Java Applet Properties in a few seconds as long as you know the location of the applet you wish to insert.

All of these elements are installed in essentially the same way, which is using the place cursor/insert icon/double-click icon/set properties sequence. Versions of Backstage Desktop Studio, at this writing, include several applets called PowerApplets (but no plug-ins); many more applets and plug-ins, along with Microsoft's ActiveX applets, are increasingly plentiful and often available as freeware or shareware on the Web. (To check out the range of plug-ins that have been developed for Netscape Navigator, go to on the Web; to see what is actually being done with some of the plug-ins, Macromedia- a gallery of best sites showing how Shockwave and other plug-ins have been creatively added to sites.)

Using PowerApplets to Jazz up Pages

PowerApplets are about instant dynamism. They are a collection of Shockwave for Director and Java applets that will help you rapidly create multimedia Web pages. Macromedia's goal here, as in the WYSIWYG HTML editor and the point-and-click objects, was to make it easy for you to achieve compelling visual impact without complex programming.

PowerApplets are installed through Backstage Designer Plus and are easy to customize so that your page design can be uniquely tailored to your specific needs. The AppletAce is a new utility that makes configuring the PowerApplets a fairly simple, visual task. Together, AppletAce and the PowerApplets enable you to add memorable effects to your Web pages quickly. Although more PowerApplets are said to be coming, the current portfolio includes the following features.


You can animate your company's logo, or anything else, right on your Web page. Animator enables you to animate an image or image sequence across a display area by using a simple set of animation paths and options. A single screen interface enables you to determine the motion path, timing, and duration of the animation.


The Banners PowerApplet will make your text message stand out with animation of its own. It will display text in several animated styles against a background image or solid color. Using Banners, you will be able to select animation styles, font and color combinations, and special text effects that will stand out when visitors view your site. Additionally, the displayed text will also serve as a link to other locations, either on your site or elsewhere on the Web. You can configure Banners in dozens of ways to best suit your application.


The non-static bullets in the Bullets PowerApplet add a distinct design flair. You can add color-cycling to bullets and horizontal bars for a unique online look (see Figure 13.19). With this applet, you can simply insert bullets and horizontal bars to spice up the look of a page. There are several options with Bullets. There are five from which to choose, and each has five styles that can be applied to it.

Figure 13.19: These bullets, called Fades, display a continuous rolling change of colors that can draw attention to special items on your Web page.


You can add bar charts to your Web page to communicate complex numeric data simply. The Chart applet reads a simply formatted data file and plots up to six data series together in a bar chart (see Figure 13.20). Read data from a local file or one located anywhere on the Web and plot its contents. Select from vertical bars, stacked vertical bars, horizontal bars, or stacked horizontal bars.

Figure 13.20: Like conventional bar chart applications such as PowerPoint, the Charts Power Applet converts data from a file into a Web-ready image.


Image maps are increasingly popular as more graphics and multimedia are added to Web pages. Instead of clicking on hyperlinked text, you can click on a relevant image to jump to a site (see Figure 13.21). You can use the Imagemap applet to highlight hot regions with any color, invert the colors, or replace the region with a new image. You can assign separate effects to each region-one effect when the mouse enters a region and one when it is clicked. You can also add ToolTips of any color to a region, displaying different explanations for each area.

Figure 13.21: You can combine image maps such as this one with Backstage Desktop Studio's image mapping facilities to create compelling visual links in your Web site.


Icons is a collection of animation objects. This collection helps you to add professionally designed, graphically coordinated buttons and icons to your Web pages (see Figure 13.22). To the icons, you can assign links to other pages on your Web site or anywhere on the World Wide Web.

Figure 13.22: Animated icons such as a spinning cube spelling out H-O-M-E- can direct people to your home page and are placed with simple point-and-click procedures.

Using xRes SE for Dynamic Images in Backstage

Macromedia's xRes SE is a tool primarily for graphic designers developing images for Backstage Web pages, which is to say it doesn't include features that are designed for use in printing (such as those found in its standard xRes). It enables designers to edit high-resolution files fast with a complete suite of retouching, natural texture painting, and compositing tools (see Figure 13.23). Another point-and-click-driven component of Backstage Desktop Studio, the software provides print designers and multimedia artists with a solid creative tool in the Web page development arena. It provides built-in support for Web- and Internet-friendly formats such as gif89, Progressive JPEG, and PNG.

Figure 13.23: You can use xRes SE to create even complex and subtle images such as this coral reef. Then you can let it stand alone or map it with hotlinks.

One of xRes SE's strengths is time management, which can be a sensitive area when dealing with sometimes slow images on the Web. xRes SE uses delayed processing to bypass big-image RAM bottlenecks. Selective processing enables designers to see their edits of even high-resolution bitmaps onscreen in near real time.

If you use Adobe Photoshop, you'll find xRes SE more than a little familiar. It uses similar imaging metaphors and conventions, including floating objects, selections, filters, and alpha channel transparency. Macromedia xRes SE also features a direct mode for processing low-resolution pixel data in real time with a suite of features, such as support for plug-ins, RGB, CMYK, index color, and multi-object editing. Layering multiple image elements is relatively simple with xRes SE objects, which include their own undo and channel information.

xRes SE provides developers with considerable flexibility in developing Web page images. Multiple undos (a terrific facility) let graphic designers test images without committing to them. Text objects enable multimedia artists to place and move text at any time. And a complete suite of customizable artistic brushes and textures enables them to create complex images. With the power to create and edit high-resolution files quickly without extra RAM or hardware, xRes SE is a useful tool for any Web page graphic designer.


Backstage Desktop Studio is an ambitious suite of tools that attempts to assemble almost anything a Web page developer or Webmaster requires for end-to-end site management. The advantage that Macromedia brings to the effort is its undeniable excellence in multimedia Web authoring. By combining that experience in imagery with the simplicity of a point-and-click, drag-and-drop, WYSIWYG strategy for the implementation tools, Macromedia has come up with a winner. The product's shortcomings really lie in its documentation, which at this stage isn't very visual (which is unusual for a highly visual product such as this) and is missing some explanation of the latest components to be included in the suite (such as the PowerApplets and the xRes SE facilities). But this examination of the software was done with a beta product and with beta documentation. By the time the product is introduced-about the time this book is published-the problems will likely be fixed.

Although you can't download a test version of Backstage Desktop Studio, Macromedia does have a free version of Backstage Designer Plus, the principal Web page design tool, that you can download. It would be worthwhile to check it out at]