Mastering the art of Web design

Mastering the art of Web design

Today, a Web presence is almost mandatory for businesses. And if their staffs, like so many of us, are among the design-impaired, they usually pay someone with talent to build their external site.
However, even if the budget can handle a designer for that all-important Web site, it rarely stretches to employing a pro to build the internal intranet. That task gets dumped on a likely victim internally who didn't duck quickly enough. And that's where Web site development tools come in.
In days of yore, building either Inter- or intranet sites meant firing up good old Windows Notepad and typing reams of HTML code. For the amateurs, it also meant a lot of frustration as they viewed the fruits of their labour in a browser, and realized something was wrong - but had no idea what.
Even for experienced Web designers, as pages became more complex, both authoring and maintenance became tedious and difficult. Simple text "brochureware" could no longer cut it - users demanded graphics and animations and other active content, on huge sites with lots of links to manage.
To address these needs, vendors introduced graphical Web authoring tools. At first, all they did was insert the HTMI tags as the formatted document was created. But that's no longer enough. Today's tools produce all-singing, all-dancing Web pages, that help manage the sites they live in.
We gathered five tools for various levels of users. Some will delight the pros, and baffle the amateurs. Others are just right for the first-time designer building simple pages. For this roundup, we concentrated on reviews of the authoring tool, although most of the packages we received contained other peripheral tools to help produce components for Web sites.
Adobe Web Collection
Adobe's Web Collection consists of Adobe Photoshop 7.0, authoring tool Adobe GoLive 6.0, Adobe LiveMotion 2.0, and Adobe Illustrator 10, for both PC and Mac. This is a professional's toy shop, even capable of producing interactive Macromedia Flash animations (in LiveMotion) and embedding them in the sites created in GoLive.
At almost $1,800 (street), it is not a cheap toy, nor is it the sort of thing you can fire up and instantly produce wonderful things with, unless you already know what you're doing. To make life even more interesting for the newbie, there's no tutorial; you can find some instruction if you go on a quest on the Adobe Web site. The manual (each program in the collection has an extensive printed manual) discusses operations in detail, but doesn't walk you through examples, and has the irritating habit of bouncing you from page to page to discover simple things like how to dock a palette.
GoLive's user interface, although busy, is customizable. Palettes of tools can be grouped, ungrouped and saved in a custom workspace. Eight site templates (everything from a simple page with navigation bar through a small company intranet), in conjunction with a site builder wizard, help establish the basic form of the Web site; it's then up to you to fill in the pages. You can do so in the WYSIWYG editor, or get down and dirty and write HTML code, then let the Syntax Checker make sure you did it right.
GoLive's menu structure is a bit perplexing to the uninitiated. To view tool palettes, for example, you don't use the View menu, you go to the Window menu. There's no Insert menu - you drag a placeholder from the Objects palette, then choose the item to display. It makes for a steep learning curve.
That said, this program (and its suitemates, which integrate nicely), offer plenty of flexibility in building Web sites, once you figure it out - it even contains components for generating pages to display on cell phones.
Evrsoft 1St Page 2000
1St Page 2000 was a surprise. It's free to download (www.evrsoft.com), so I didn't expect a whole lot.
It doesn't include all of the spiffy site management tools offered by the suites. All it does, reasonably well, is help you create Web pages.
There are four possible interfaces, ranging from Easy to Hardcore, each offering the opportunity to build increasingly complex pages. The HTML tags are always on display, but the program generates the code for you in most cases. For example, to insert an image, go to the toolbar and click the "Insert Image Quickly" button, then navigate to the graphic's location. You have to flip to the Preview tab to see how it looks - this isn't a WYSIWYG editor.
The program supplies a herd of useful scripts to embed in your pages, including a credit card validator, hit counter and message board. It can import text files, check your spelling, preview in up to four browsers and convert your pages to XML. There's a simple Task List so you can keep track of what needs to be done on the site; that's about it for management.
The HTML 1St Page 2000 generates isn't quite perfect. When I checked the code in HoTMetaL and Dreamweaver, both reported problems with font and table tags. Despite this, the page displayed pretty well n Internet Explorer, although Netscape 6 had problems.
Macromedia Studio MX
Macromedia, like Adobe, has created a bundle of goodies that's the professional Web developer's dream. The Macromedia Studio MX for PC and Mac ($1,225) consists of Macromedia Dreamweaver MX, Flash MX, Fireworks MX, and FreeHand, plus the ColdFusion MX Server and the Macromedia Extension Manager. Unlike the Adobe collection, in which each program was installed separately from its own CD, this is really a suite, with unified installation.
Dreamweaver's interface is easier to fathom than Adobe's. The menus and buttons are familiar to the Microsoft Office user, and the palettes more intuitive to me (your mileage, however, may vary). When you select a component of a page, the Properties windows across the bottom fifth of the screen tells you about it, and allows you to make alterations. You can further split the screen to display both the WYSIWYG and raw code (GoLive offers this feature too), but unless you have a huge monitor, the windows become pretty small.
One manual encompasses all of the products, and provides good step-by-step tutorials for each. The extensive online help includes the text from eight reference books, including texts on CSS, HTML, JavaScript, JSP, ASP, CFML and accessibility.
FrontPage 2002
FrontPage 2002 was designed to work best when it's talking to Internet Information Server (IIS) on a Windows box, although its pages work well with most Web servers. Under IIS, with the FrontPage Extensions loaded, extra goodies are available (for example, hit counters, forms, database integration), including SharePoint Team Services, a Web-based collaboration environment. The extensions are also available for popular Unix platforms, though they cannot host SharePoint Team Services sites.
The $269 program has the look and feel of its fellow Microsoft Office XP programs, making it relatively easy to learn. The primary editing interface is WYSIWYG, although you can also edit the HTML directly. The optional tags view in the graphical interface gives a HoTMetal-like look.
FrontPage 2002 includes basic PowerPoint-like graphics-editing functionality, like WordArt, AutoShapes, and drop shadows, but no separate graphics creation and editing tools. Wizards and templates provide plenty of varied looks for Web sites (and there are many more to download from the Microsoft Web site), leaving the user free to concentrate on content. Integrated site management tools help with the publishing and maintenance aspects of the job.
Documentation consists of an 80-page booklet, adapted from a larger, separately available volume, combining feature descriptions and tutorials.
SoftQuad HoTMetal. Pro 6
MetaL Pro, despite its $175 price tag, includes a collection of useful tools as well as the authoring software. You get WS_FTP Pro, Ulead's PhotoImpact SE (which offers photo editing, viewing, and converting, plus an editor that lets you create and edit animated GIFs), HoTMetaL Personal Server, and Netscape 4.7 and Internet Explorer 5.0. There are also self-study courses in HTML and JavaScript, and CSS and HTML reference guides.
The interface is clean, with a tabbed editing area that offers five possible views (HTML, WYSIWYG with tags, WYSIWYG without tags, frames and preview) occupying two-thirds of the screen, and a tabbed Resource Manager pane that allows you to access Assets (program-supplied items such as graphics, buttons, forms, and counters), local files and network or Webbased components, filling up the rest. You can hide the Resource Manager if you need more editing room.
If you want to produce Web pages with frames, the first thing you should do after installing HoTMetaL Pro 6 is check the product version. If it is earlier than 6.0.3.164, run, don't walk, to the HoTMetaL Pro Web site (www.hotmetalpro.com) and download update 4. It fixes a nasty frame editing bug.
Like the high-end products, HoTMetaL Pro lets you diagram your site, check it for errors, find and fix broken links, and publish it. The program is cranky about the integrity of the HTML - it will only allow WYSIWYG editing on pages without errors in the code. While it provides a list of the bloopers, explanations (and fixes) weren't as easy to find. Fortunately, HoTMetaL Pro produces clean code; the errors popped up when I was checking imported pages. And, one small caveat - once you've saved, Undo becomes unavailable for any pre-save changes.
The Bottom Line
For the pro, there's no contest - the Macromedia and Adobe suites offer pretty much everything you need to build the most complex sites. But for the occasional developer, they are probably overkill. One of the other three programs will serve much better, and will be much easier to learn.
In fact, for someone who's not sure whether long-term Web development is in the cards, getting your feet wet with the freebie isn't a bad idea. Then you may want to move up in the world and examine the alternatives. SoftQuad (now owned by Corel) has long been well regarded for the quality of its HTML, and the HoTMetaL Pro package includes some interactive components and additional tools to play with. Microsoft shops with IIS servers may want to take advantage of the extra functionality offered by the FrontPage extensions.
None of these products completely eliminates the need to learn some HTML, but they can make the process of building Web sites less tedious.



-: Main :- -: News :- -: Tips :- -: Directory :- -: Feedback :-

Mastering the art of Web design Today, a Web presence is almost mandatory for businesses. And if their staffs, like so many of us, are among the design-impaired, they usually pay someone with talent to build their external site. However, even if the budget can handle a designer for that all-important Web site, it rarely stretches to employing a pro to build the internal intranet. That task gets dumped on a likely victim internally who didn't duck quickly enough. And that's where Web site development tools come in. In days of yore, building either Inter- or intranet sites meant firing up good old Windows Notepad and typing reams of HTML code. For the amateurs, it also meant a lot of frustration as they viewed the fruits of their labour in a browser, and realized something was wrong - but had no idea what. Even for experienced Web designers, as pages became more complex, both authoring and maintenance became tedious and difficult. Simple text "brochureware" could no longer cut it - users demanded graphics and animations and other active content, on huge sites with lots of links to manage. To address these needs, vendors introduced graphical Web authoring tools. At first, all they did was insert the HTMI tags as the formatted document was created. But that's no longer enough. Today's tools produce all-singing, all-dancing Web pages, that help manage the sites they live in. We gathered five tools for various levels of users. Some will delight the pros, and baffle the amateurs. Others are just right for the first-time designer building simple pages. For this roundup, we concentrated on reviews of the authoring tool, although most of the packages we received contained other peripheral tools to help produce components for Web sites. Adobe Web Collection Adobe's Web Collection consists of Adobe Photoshop 7.0, authoring tool Adobe GoLive 6.0, Adobe LiveMotion 2.0, and Adobe Illustrator 10, for both PC and Mac. This is a professional's toy shop, even capable of producing interactive Macromedia Flash animations (in LiveMotion) and embedding them in the sites created in GoLive. At almost $1,800 (street), it is not a cheap toy, nor is it the sort of thing you can fire up and instantly produce wonderful things with, unless you already know what you're doing. To make life even more interesting for the newbie, there's no tutorial; you can find some instruction if you go on a quest on the Adobe Web site. The manual (each program in the collection has an extensive printed manual) discusses operations in detail, but doesn't walk you through examples, and has the irritating habit of bouncing you from page to page to discover simple things like how to dock a palette. GoLive's user interface, although busy, is customizable. Palettes of tools can be grouped, ungrouped and saved in a custom workspace. Eight site templates (everything from a simple page with navigation bar through a small company intranet), in conjunction with a site builder wizard, help establish the basic form of the Web site; it's then up to you to fill in the pages. You can do so in the WYSIWYG editor, or get down and dirty and write HTML code, then let the Syntax Checker make sure you did it right. GoLive's menu structure is a bit perplexing to the uninitiated. To view tool palettes, for example, you don't use the View menu, you go to the Window menu. There's no Insert menu - you drag a placeholder from the Objects palette, then choose the item to display. It makes for a steep learning curve. That said, this program (and its suitemates, which integrate nicely), offer plenty of flexibility in building Web sites, once you figure it out - it even contains components for generating pages to display on cell phones. Evrsoft 1St Page 2000 1St Page 2000 was a surprise. It's free to download (www.evrsoft.com), so I didn't expect a whole lot. It doesn't include all of the spiffy site management tools offered by the suites. All it does, reasonably well, is help you create Web pages. There are four possible interfaces, ranging from Easy to Hardcore, each offering the opportunity to build increasingly complex pages. The HTML tags are always on display, but the program generates the code for you in most cases. For example, to insert an image, go to the toolbar and click the "Insert Image Quickly" button, then navigate to the graphic's location. You have to flip to the Preview tab to see how it looks - this isn't a WYSIWYG editor. The program supplies a herd of useful scripts to embed in your pages, including a credit card validator, hit counter and message board. It can import text files, check your spelling, preview in up to four browsers and convert your pages to XML. There's a simple Task List so you can keep track of what needs to be done on the site; that's about it for management. The HTML 1St Page 2000 generates isn't quite perfect. When I checked the code in HoTMetaL and Dreamweaver, both reported problems with font and table tags. Despite this, the page displayed pretty well n Internet Explorer, although Netscape 6 had problems. Macromedia Studio MX Macromedia, like Adobe, has created a bundle of goodies that's the professional Web developer's dream. The Macromedia Studio MX for PC and Mac ($1,225) consists of Macromedia Dreamweaver MX, Flash MX, Fireworks MX, and FreeHand, plus the ColdFusion MX Server and the Macromedia Extension Manager. Unlike the Adobe collection, in which each program was installed separately from its own CD, this is really a suite, with unified installation. Dreamweaver's interface is easier to fathom than Adobe's. The menus and buttons are familiar to the Microsoft Office user, and the palettes more intuitive to me (your mileage, however, may vary). When you select a component of a page, the Properties windows across the bottom fifth of the screen tells you about it, and allows you to make alterations. You can further split the screen to display both the WYSIWYG and raw code (GoLive offers this feature too), but unless you have a huge monitor, the windows become pretty small. One manual encompasses all of the products, and provides good step-by-step tutorials for each. The extensive online help includes the text from eight reference books, including texts on CSS, HTML, JavaScript, JSP, ASP, CFML and accessibility. FrontPage 2002 FrontPage 2002 was designed to work best when it's talking to Internet Information Server (IIS) on a Windows box, although its pages work well with most Web servers. Under IIS, with the FrontPage Extensions loaded, extra goodies are available (for example, hit counters, forms, database integration), including SharePoint Team Services, a Web-based collaboration environment. The extensions are also available for popular Unix platforms, though they cannot host SharePoint Team Services sites. The $269 program has the look and feel of its fellow Microsoft Office XP programs, making it relatively easy to learn. The primary editing interface is WYSIWYG, although you can also edit the HTML directly. The optional tags view in the graphical interface gives a HoTMetal-like look. FrontPage 2002 includes basic PowerPoint-like graphics-editing functionality, like WordArt, AutoShapes, and drop shadows, but no separate graphics creation and editing tools. Wizards and templates provide plenty of varied looks for Web sites (and there are many more to download from the Microsoft Web site), leaving the user free to concentrate on content. Integrated site management tools help with the publishing and maintenance aspects of the job. Documentation consists of an 80-page booklet, adapted from a larger, separately available volume, combining feature descriptions and tutorials. SoftQuad HoTMetal. Pro 6 MetaL Pro, despite its $175 price tag, includes a collection of useful tools as well as the authoring software. You get WS_FTP Pro, Ulead's PhotoImpact SE (which offers photo editing, viewing, and converting, plus an editor that lets you create and edit animated GIFs), HoTMetaL Personal Server, and Netscape 4.7 and Internet Explorer 5.0. There are also self-study courses in HTML and JavaScript, and CSS and HTML reference guides. The interface is clean, with a tabbed editing area that offers five possible views (HTML, WYSIWYG with tags, WYSIWYG without tags, frames and preview) occupying two-thirds of the screen, and a tabbed Resource Manager pane that allows you to access Assets (program-supplied items such as graphics, buttons, forms, and counters), local files and network or Webbased components, filling up the rest. You can hide the Resource Manager if you need more editing room. If you want to produce Web pages with frames, the first thing you should do after installing HoTMetaL Pro 6 is check the product version. If it is earlier than 6.0.3.164, run, don't walk, to the HoTMetaL Pro Web site (www.hotmetalpro.com) and download update 4. It fixes a nasty frame editing bug. Like the high-end products, HoTMetaL Pro lets you diagram your site, check it for errors, find and fix broken links, and publish it. The program is cranky about the integrity of the HTML - it will only allow WYSIWYG editing on pages without errors in the code. While it provides a list of the bloopers, explanations (and fixes) weren't as easy to find. Fortunately, HoTMetaL Pro produces clean code; the errors popped up when I was checking imported pages. And, one small caveat - once you've saved, Undo becomes unavailable for any pre-save changes. The Bottom Line For the pro, there's no contest - the Macromedia and Adobe suites offer pretty much everything you need to build the most complex sites. But for the occasional developer, they are probably overkill. One of the other three programs will serve much better, and will be much easier to learn. In fact, for someone who's not sure whether long-term Web development is in the cards, getting your feet wet with the freebie isn't a bad idea. Then you may want to move up in the world and examine the alternatives. SoftQuad (now owned by Corel) has long been well regarded for the quality of its HTML, and the HoTMetaL Pro package includes some interactive components and additional tools to play with. Microsoft shops with IIS servers may want to take advantage of the extra functionality offered by the FrontPage extensions. None of these products completely eliminates the need to learn some HTML, but they can make the process of building Web sites less tedious.