|
Click on a thumbnail to enlarge it. Use your
browser's
"BACK" button to return to this
review when done.
|
|
|
|
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 |
|
 |
|
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. |
|
|
|
- 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.
|
|
|
|
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 mana ging
the site, such as the link structure and file lists. There are three panes
on the Link Manager: Link Tab--displays the link layers
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 multip le
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.
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--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 Li nk
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--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--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 such
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 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:
- 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
to
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 canva s.
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 are
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.
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.

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 optio ns
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 co ntrast
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 edite d.
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 i s
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.
|
|
 |
|
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.
- 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.
- 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.
- 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.
|
|
 |
|
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) |
|
 |
|
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.
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 |
|
|