Click on a thumbnail to enlarge it. Use your browser's "BACK" button to return to this review when done.
 
Type of Product

IBM NetObjects TopPage is a new Web page authoring and design software program which is suitable for beginners and experts to create Web pages without any HTML knowledge or programming skills. It includes all the tools necessary to create a Web page, including a WebArt Designer which lets you create logos and buttons, and a Web Animator which lets you create animation GIF files with just a few simple steps. There is a step-by-step multimedia tutorial that guides you through the various aspects of Web design, and the program includes up-to-date technology--such as Cascading Style Sheets, Java applets and Dynamic HTML. TopPage is part of a suite of three software programs for small businesses, individuals, and schools who want to build their own Web site quickly and inexpensively, but with professional results. The other two programs are: (1) IBM Perfect Photo--for manipulating digital camera shots, turn scanned photographs into finished designs, or customizing greeting cards, brochures, posters and calendars; (2) IBM Startup 2 for e-business--includes tools necessary to go online to publish and process credit card orders. Prices: TopPage--$59.95; Perfect Photo--$39.95; and Startup 2 for e-bussiness--$29.95. Additional information can be obtained from the IBM Web site for TopPage: http://www.JP.ibm.com/esbu/E/toppage/index.htm

User Level

NetObjects TopPage is an all-in-one tool for Beginners, Intermediate, and Advanced PC users. It has a user-friendly interface and templates that make it perfect for beginners. But the program also has advanced features so that intermediate and advanced Web designers can apply Dynamic HTML effects to links or graphics, edit Cascading Style Sheets, build editable site maps, crop or rotate images, build JavaScript, and create and manage frames.

Features

  • Templates--web design is easy using templates to create drag-and-drop images, image maps, frames and links;
  • Extensive Library--users can choose from an extensive library of more than 2,000 ready-to-use images, animations, sounds and Java applets for their Web site;
  • Color-coded Tags--these tags make it easy to edit source codes;
  • Pixel Positioning Layout--enables users to arrange their images by pixel, allowing for greater control and clarity;
  • Dynamic HTML--allows users without Java script or HTML programming skills to easily give images motion with a layer capability;
  • Cascading Style Sheets--makes it easy for users to change the appearance of your Web pages at will and to unify the appearance of the entire site;
  • Page Link Management--automatically checks each page for broken links and strayed pages and files. Links are automatically updated if files are relocated;
  • Uploading and Downloading--only updated and newly added files can be selectively uploaded to a server;
  • WebArt Designer--enables users to create logos and buttons for their Web sites quickly and easily;
  • Animation GIF Creation--enables users to easily add lively animated sequences to create an animation GIF file with just a few simple steps.

Review

Installation

The program is easy to install. But the Tutorial and User's Guide are accessible only with a Custom Install, not the Typical Install. There is no printed manual or tutorial included with the program, but there is a User's Guide on the CD, and you can print it out. IBM states that they will include the Tutorial and User's Guide in the Typical Install with the next version. They will also include more printed material.


Interface
The interface is very intuitive and user-friendly. The main window of TopPage has a typical Windows menu bar on the top, with tool bars directly below. The site management area is on the left of the screen and is used to display information for manaToolbarsging the site, such as the link structure and file lists. There are three panes on the Link Manager: Link Tab--displays the link Interfacelayers starting from the top page; File Tab--a list of folders and files within the site; and Contents Tab--images, sounds, or HTML files in the selected folder appear here. On the right side of the screen is the page edit area, which is used for creating and editing pages. You can open multiple pages at the same time. There are three panes for viewing the page edit area: Normal--where you create and edit a page; HTML--used to edit the HTML source directly;and Preview--used to check how a page will look in a Web browser. There is also a status bar along the bottom that displays an explanation about the menu or tags that are currently being edited.

Creating a Site

TopPage provides two procedures to help you build your site: Opening Dialog Box and Site Wizard. Each one leads you step-by-step through the process. It is an easy process with both methods and does not involve many steps or take a long time.
Opening Dialog Box--With the Opening Dialog Box, you can create a new page and site; create a site with multipOpening Dialogle pages from a template; or create a site from an existing page. For beginners, it is very easy to create a site with a consistent theme using one of the templates provided with TopPage and following the step-by-step procedures in the Opening Dialog Box.Templates You enter a site name; select a genre and theme; select a background; select a banner; select a header/footer image; select an icon image; enter the title of your first page; enter the mail address; add or delete pages; confirm your choices; click ok; and you have a site with multiple pages that has a consistent look. Each element in the templates, such as icons, banners, background, is selected individually so you have a variety of choices. At any time during this process, you can go back and change your choices. Once the pages are set up though, you cannot go back and make global changes to the template as in some other programs. But you can go back and edit the individual pages and the individual items. TopPage has templates for a single page, a frame, an application, and multiple pages. IBM has a sample of some of the templates on their Web site. I used test reviewers who were interested in Web design, but had no experience, and had them try out TopPage, and they especially liked creating a multiple page site using the templates. I would have preferred more templates, but I have always found it difficult to find a pre-made template that is exactly what I want, even in the most expensive programs. Even if you don't like all of the elements, they give you a starting point and you can then edit them. It is a good way for beginners to start. You can also use templates from other companies. I used templates from Adobe ImageStyler in TopPage and had no problem. http://www.JP.ibm.com/esbu/E/toppage/index.htm
Site Wizard
Site Wizard--With the Site Wizard, you can create a new page and site or create a site from an existing page. You can also make other settings, such as those for the destination server, at the same time. As with creating a site with the Opening Dialog Box, the procedure is easy and fast. To create a new page and site, you enter a site name; set site items; name your first page; set up the destination server; click the complete button and you have a site.

Site Management Tools
TopPage has a variety of functions and features that help you manage your site. The site management area or Site Manager displays information that is used to manage a site, such as the link structure and file lists. The Site Manager is displayed to the left of your working page and can be closed if you need more room for display. These three panes and the page editing area are linked, and when you save a document, the panes are updated. There are three panes: Link Pane, File Pane, and Contents Pane, with each pane having an upper and lower area.
Link Pane--Displays the link layers starting from the top page. In the upper area of the LiLink Panenk Pane, a link hierarchy appears, in which the top page of the site is the top. If you select a file here, a list of files linked to this file or a list of files linked from this file appear in the lower area. The following information can be obtained in the lower area: URL, title, size, type, and date of update. With the Option dialog box, the type of files to be displayed can be set. By dragging and dropping or right-clicking, you can use the Link Pane for the following functions: open and edit an HTML document, text file, or CSV file; link a document or insert an image; open a document in a WWW Browser; or upload pages or site.
File Pane
File Pane--Displays a list of folders and files. Site names appear in the upper area, and it shows the hierarchical file structure below the top folder of the site and displays the following file types: the files to be uploaded or not uploaded (unused files); image files; and CSS files. These types of files can be displayed separately by changing the settings in the Option dialog box. As with the Link Pane, if you select a file or folder here, a list of files belonging to the items selected appear in the lower area, and the following information can be confirmed: URL, title, size, type, and date of update. And you can use the File Pane for the same functions as the Link Pane.
Contents Pane
Contents Pane--Displays images, sounds,and HTML files. The upper area of the Contents Pane shows the hierarchical file structure. If you select a file or folder here, a list of images, sounds, and files appear in the lower area. From the lower area, you can paste an object by selecting it and then dragging the object and dropping it onto the current HTML document. The Option dialog box can be used to display just certain types of files.
Besides the Site Manager there are other features in TopPage that help you manage your site. Link update is performed automatically when necessitated by a file name change. Site transfer is supported (all the files constituting a site can be transferred). You can perform a check of the entire site.

Style Sheets & Manager
TopPage supports CSS1 and CSS2 (Cascading Style Sheet, Level 1 and 2). A style sheet makes it easy for users to change the appearance of Web pages and to unify the appearance of the entire site. You can set suchStyle Definition styles as font name, font size, font color, appearance such as bold and italic, and many other attributes. I created a style for the blue section headings for this review. There is a Style Definition dialog box where you can define styles. Some of the templates in TopPage use style sheets. A variety of factors in an HTML document can be set with a style sheet.
Set the Style for an HTML Tag--You can directly change the style of an element (for example, main body, paragraph, and headings) in a document. You can set the color of heading "H1" to red and all H1 headings will be displayed in red. You can set the font size of paragraphs "P" to 12 points and all paragraphs in the document will be displayed with a 12-point font.

Set a Style for a Class--You can assign one class to multiple HTML tags, so you do not have to define the same style several times. You can then assign the same class both to a table and to text.

Set an ID for the Style--You can embed one ID to only one HTML tag.

External Style Sheet--A style definition can be created as another file, not only as an HTML document. You can create the style definition in an external style sheet and link or import it to the HTML document. You can use the same external style sheet for multiple HTML documents.
TopPage has a Style Sheet Manger where you can create, add, and edit styles. There are two panes: Style List Pane and Current Style Status Pane.
Style Sheet Manager
Style List Pane--Displays the object, class, and ID for which the style is defined. You can add, edit or delete style by using the Add, Edit, and Delete buttons.

Current Style Status Pane--Many styles defined with style sheets can often affect subordinate objects. This pane displays the information defined for each object up to the top-level objects.
Despite the fact that style sheets make it easier to design a site, not all Web browsers can display them and the same style sheet might appear differently depending on the Web browser used. TopPage advises beginners of this fact and suggests: (1) create your Web pages without using a style sheet; (2) change the appearance using a style sheet; and (3) check the appearance of your Web pages on different browsers. For advanced users, there is an excellent Appendix in the User's Guide that describes what HTML tags and CSS attributes are supported by TopPage.

Editing Tools
You have various editing tools in TopPage. You can edit frames while viewing the layout on the screen; perform source editing and preview the results by simply clicking the corresponding tabs; and create, edit, and change attributes such as heading, list, horizontal rule, link, table, form, and frame. With the Edit Image dialog box you can process images while editing a page, and perform the following alterations:
Edit Image Dialog Box
  • Converting image file formats
  • Removing unnecessary parts of an image
  • Rotating an image
  • Adjust the image file size to the viewed size
  • Lowering image quality (or decreasing the number of colors)
  • Increasing the resolution of images gradually in a Web browser
  • Making a single color in an image transparent
  • Making an image sharper or tinting it with sepia

File Transfer
TopPage allows you to upload directly from within the program or you can use other FTPs. Created Web pages and/or a site can be transferred easily by using TopPage's Site Upload and Page Upload features. You need toFile Transfer choose a destination server before you can transfer a site, and TopPage has a wizard to help you choose a server that is easy to navigate even for a beginner. There is a Site Check function that enables you to find errors in the site for images without alternate text and spelling errors. There is also a file transfer program to use when you want to transfer individual files, delete a file on the server, or view the list of files on the server.

WebArt Designer
WebArt Designer is a tool that makes it feel easy to create various materials for your Web pages. The source materials are referred to as objects. There are the following types of objects: Logo, Button, Photo Frame, Clip Art, and Image. Objects are not placed on the canvas at random. Instead, they are stacked in order so that the last one to be placed appears to be on the top of the stack. For example, if you place a button first and lay a logo over that button, the two objects are stacked sequentially in the order in which they were placed. On the screen, the logo appears to be written on the button. Using WebArt designer, a variety of objects can be stacked on a canvas to create new images. You can overlay a logo on a button, a logo on a photograph, and then a photo frame on that photo. In this way, you can combine multiple objects to create relatively complicated images. The title and headings for this review were made with WebArt Designer in a matter of minutes.
Interface--In the center of the main window, a blank white rectangle appears which is called the canvaWebArt Designers. The canvas is the work area on which you can place materials. On the left is the template gallery which displays the information needed to set the provided logos, buttons, frame samples, and backgrounds. The object stack is on the right and it displays the sequence of the objects. Thumbnails of the objects are displayed on the panels. The menu bar runs along the top of the screen and all the functions supported by WebArt Designer can be accessed from this bar. There is a tool bar directly below that has frequently used functions. A status bar runs along the bottom of the screen.
Wizards--There are the following wizards: logo, button, and photo frame. They areButton Wizard step-by-step procedures for making objects. To create a button you: (1) click the Button Wizard icon; (2) select a shape; and (3) select a color. You then can adjust the size on the screen with the mouse or use the menu bar and edit properties to specify the width and height in pixels. You can edit the shape and color of the object at any time. Shapes to choose from are circles, quadrangles, goods, and nature. Color choices are plain colors, gradations, or textures.

Object Options Objects--You can modify or change any part of the objects. You have a variety of options for modification. You can move an object to the head, to the end, forward, and backward; flip an object vertically or horizontally; rotate an object 90 degrees right or left and 180 degrees; align an object; combine objects; rasterize an object; and fit to size objects.
Brightness/Contrast Correction
Tools--There are also a variety of tools to use on objects such as: paint, crop, effect, shadow, button, color tone, brightness/contrast, red eyes, and gradation. I was amazed at the features of this program and the optioTool Optionsns it provided. There is a great dialog box for correcting the brightness and contrast of an image. For the brightness group, the current setting appears in the middle. Brighter images appear above, while darker images appear below. For the contrast group, the current setting appears in the middle. Images with less coEffects Palettentrast appear on the left while images with more contrast appear on the right. You can click on an image in the dialog box and preview the change on your screen image. The amount of brightness and contrast correction can be adjusted. As you move the slider to the right, the amount of correction increases. Most of the other options under the tool menu have similar dialog boxes that help you to create unique images. The effects palette is another great tool.

Web Animator
Web Animator is a tool for animating GIF image files, that allows you to easily create moving images on your Web pages. You can create animations using the same principle as an animated cartoon or a flipbook. You can add animation to an image to give it greater impact. You can paste an animated GIF onto a page in the same way as a regular image file. You can view it on a regular Web browser without any special plug-ins. Making animations is fun with this program.
Interface--The animation window displays the animation that is currently being editeAnimator Interfaced. One animation, or one GIF file is associated with an animation window. The animation window is divided into a top half and a bottom half. The top half displays images, while the bottom half displays frames. The image display window, top, is like a screen onto which a movie is projected. An animation is played back in this window. The frame display window, bottom, is used to display the frames that constitute an animation. The image in this window iBird Animations similar to a single frame on a reel of a movie.

Animation Wizard--This wizard guides you through the animation process. It is so easy that beginners will be amazed at how fast it is to create an animation. You select an image, set the frame alignment, set number of repeats, and play the results. I created the bird animation using the wizard.

Personal Comments

If you are planing to create a Web site or redesign an existing site, run out and buy this program. I was very impressed. I have to admit when I first received the application for review and saw the low price of $59.95, I thought, oh well, this is probably one of those cheap, plastic-fantastic programs that you can buy at your local discount store and would love to give to your worst enemy so that they would produce a tacky and unprofessional site. I thought I would give it just a quick review and go on to review more expensive Web design programs. Well, I was pleasantly surprised to find out that I was wrong. Not only did I like the program, I felt it was professional enough to do the review in and that it deserved a thorough and lengthy review. The program was so intuitive that I did not experience any problem writing the review in another application. Most of the commands or functions were similar, and if not, it was easy to find the correct ones. Even though there were a few features in other programs that I found lacking in TopPage, I was more impressed by what it did include than disappointed by what it didn't. Below is just a summary of some of the reasons whyI thought the program rated five stars.
  1. Beginner and Expert Suitability--TopPage is equally suitable for beginners and experts. Many programs make this claim but only a few truly have features that appeal to both. For beginners, TopPage has an interface that is intuitive, clean, and easy to use. There are wizards galore to help you with every aspect of the program. And there are templates to help you get up and running with a consistent and professional looking site. And it is not a program that beginners will outgrow as their knowledge increases. For intermediate and advanced users, TopPage uses up-to-date technology and allows you to get into the coding to tweak your site. You have the ability to use Dynamic HTML and Cascading Style Sheets, build editable site maps, and build JavaScript.
  2. All-in-One Tool--TopPage really does provide all the tools you need to build a Web site. You can build and edit pages; scan in images; create buttons and logos; edit images and apply effects; and make animations. Usually for a review I use a variety of programs such as: Photoshop, PaintShop Pro, WebSpice, ImageStyler; and Eye Candy, to name a few. It can get quite expensive if you have to buy different programs for each aspect of your Web site or page. This review, headings, and animation were all created in TopPage. I thought the variety of tools and effects in WebArt Designer would allow even the most inexperienced user to created professional looking buttons, headings, logos, and icons. And the Web Animator is also an easy to use feature for a beginner to use for the experience of making animations painlessly.
  3. Interaction with Other Applications--The program works well with other applications. I had no problem importing pages into TopPage from other programs or importing TopPage pages into other applications. Some existing HTML code is slightly reformatted when imported but not to a significant degree. I even brought in template pages from Adobe ImageStyler. It is also beneficial to have the option of transferring files from within TopPage or from another FOP.

System Requirements

Processor: Pentium (166 MHz or more recommended)
Operating System: Windows 95/98 or NT 4.0
Memory: 16MB (32MB recommended)
Hard Disk Space: 30MB (150MB is required for all samples)
VGA (640x480, 256 colors)

Tips

There is a wealth of information on creating a Web site on the Internet. IBM has supplied us with some tips, also. Click on the image on the right for tips on creating a Web site.Tips The Internet has a wealth of information on creating a Web site and on learning HTML. A good source to check out is the CNET Web Building site. It has information on everything and anything you would want to know about Web building, plus free downloads and free tutorials. http://www.builder.com

Graphics: IBM NetObjects TopPage
Web Page Editor: IBM NetObjects TopPage
Scanner: Hewlett Packard ScanJet 6250C Professional Series
 
Back