Web Authoring Software

A good web authoring tool is one of the most important software applications a web designer will use. For the purposes of this article, we will discuss WYSIWYG (What You See Is What You Get) web authoring software. A good WYSIWYG editor allows the designer to visualize a web page in real time as it is being built. A WYSIWYG application mimics the way a designer visualizes the finished product. Software developers came up with WYSIWYG tools that made it easy for creative people to concentrate on what they do best – to be creative. Web authoring is not all that different from designing print graphics with a DTP (desktop publishing) application.

In the first days of the Internet, web pages were made with a text editor. You would write all the content in a text file and then you would tag it with HTML tags: <p> for paragraphs, <h1>, <h2>, <h3>, <h4>, tags, etc. for headings, <ol> for ordered (numbered) lists, <ul> for unordered (bulleted) lists and <table> tags for tables (tabular information in rows and columns). As web pages became more complex, it became clear that creative people needed better tools than a text editor.

There is a wide range of available web authoring software, so we will just briefly discuss a few of them. For the purposes of this article, there are expensive, moderately priced and really inexpensive (free) web authoring tools that are available. There is a high priced one for professionals who make their living at it, a couple of medium priced ones for intermediate users who may design web sites on a part time basis and then, finally, there are the low priced ones – so low they are actually free :-).

Professional Web Authoring

Adobe Dreamweaver (Macintosh / Windows)

Adobe Dreamweaver (previously Macromedia Dreamweaver) is pretty much the De facto standard web authoring tool for professional web designers. It has no peer. Ever since version 1 or version 2 way back in the late 1990s Dreamweaver has dominated the number one slot for WYSIWYG web design software. There  is no question about it. If you are a web design professional, you will need Dreamweaver, but it is the most expensive web authoring tool of the ones discussed here.

Dreamweaver WYSIWYG View

Dreamweaver WYSIWYG View

The reasons for Dreamweaver being the top web authoring application are many:

  • It has built-in site management, with built-in FTP and site synchronization functionality. Files on the remote server can be synchronized with local files and vice versa.
  • All CSS file(s), JavaScipt file(s), and other associated files that are linked to the HTML file are opened automatically when the HTML file is opened. Edits made to any of these files are refreshed in real time with the other views.
  • It has built-in CSS editing with dialog boxes for building CSS syntax.
  • It has built-in code-hinting for working in code view.
  • It has a workflow for wrapping sections of code in <div> tags, and the ability to create CSS rules on the fly that apply to the selected code.
  • The main editing window is divided into sections for the <head> elements, a handy tag selector on the bottom that allows quick selection and editing of blocks of HTML inside particular tags.
  • There is a coding toolbar on the left side of the main editing window with buttons for collapsing or expanding sections of code, adding comments, selecting the parent tag, showing / hiding line numbers, highlighting code or syntax errors, moving / converting css, indenting / outdenting code, formatting code, showing / hiding recent code snippets.
  • It is a platform for database development in MySQL, PHP, or other scripting language.
Dreamweaver HTML Source Code View

Dreamweaver HTML Source Code View

The features just go on and on and on. Dreamweaver is a totally comprehensive package for serious, professional web development and is indispensible for anyone who builds websites for a living. If you develop websites full time, then Dreamweaver is a must.

Medium Priced Applications

Both medium priced web authoring applications discussed here are currently offered in the “just under $100.00″ price range. At the time of this writing, both providers offered these programs for $79.00 USD. Prices are always subject to change, but as it stands, today, this is what they are selling for. We think it is telling that both of these web authoring tools are being offered at the same price and so it seems they are both targetting the same customer on different platforms. These are users who need the convenience of a WYSIWYG web authoring tool with enough features to make it convenient but not to the same extent as a different user who works full time at the profession with more demands on his or her time.

Namo WebEditor (Windows)

Namo WebEditor is produced by the Korean company, S.J. Namo. We have used versions 5.5, 6, 8 and now version 9 of this software. At first we were very impressed with the sheer volume of features of this application putting it nearly on par with Dreamweaver for a fraction of the price. Earlier versions had one minor drawback. The HTML tags were all uppercase and, therefore, not fully XHTML complaint – which was not a big deal, but we see now that with the latest version they’ve got that all sorted out. This program is a bargain. It is loaded with features that rival Dreamweaver in many ways plus it has many cool features of its own. It has some real nice buit-in chart graphics that it generates from table data. So make no mistake about it, a web designer can do some serious work with Namo WebEditor.

Shown below is a WYSIWYG view of the main editing window. It has many of the conveniences of Dreamweaver like a Tag Selector on the bottom of the window which makes it convenient for selecting specific sections of code. Even though the Tag Selector is available only in Edit view or Edit & HTML view (the Tag Selector is not available in code view), it is easy enough to switch between code view and Edit view with the convenient tabbed interface located at the bottom of the main editing window.

Namo WebEditor WYSIWYG View

Namo WebEditor WYSIWYG View

The HTML code editing view is color coded and easy to read with basic features like line numbering, auto-indenting and soft-wrapping plus some more advanced features like code helpers with context-sensitive prompts that speed up completing lines of code. There is also a Quick Tag Editor to insert HTML, edit HTML or wrap HTML around selected text or tags. The Quick Tag Editor and the Tag Selector work well together when used in combination with each other.

Namo WebEditor HTML View

Namo WebEditor HTML View

Namo WebEditor is a good all-around WYSIWYG web authoring tool with a workflow and workspace very much in the tradition of its predecessors, Microsoft FrontPage, Mozilla Composer and Dreamweaver. It covers the basics, WYSIWYG layout, HTML editing, site management and FTP (publishing) support.

RapidWeaver (Macintosh)

RapidWeaver has the right idea for modern WYSIWYG website authoring in CSS. In the “old days” you would layout some HTML tables as containers and insert text and graphics into the table cells and your WYSIWYG workspace would look pretty close to how the page would render in a browser. Dreamweaver and Microsoft FrontPage were perfect for this scheme.

RapidWeaver CSS styling with templates.

RapidWeaver CSS styling with templates.

With CSS that has all changed. Nowadays, the layout of a website is established by <div> tags that are structured in a hierarchial arrangement that allows for logical styling with CSS rules. The structure can be almost uniform from site to site. For example, a web page will have a header with a company logo, a menubar for navigation, one or two sidebars (depending on whether the site uses a 2-column or 3-column layout), a central space for the main content and a footer for the copyright info, site owner info, etc.

RapidWeaver HTML source editing.

RapidWeaver HTML source editing.

It makes no sense to build up the structure every single time from one website to another in an application like Dreamweaver. Unless the web page structure is completely unique, then why not import the structure and its accompanying CSS rules like a skeleton and then “flesh it out” by styling it with graphics and edits to the CSS? This is how RapidWeaver goes about it and we would like to say, “It’s about time!” RapidWeaver is another good all-around web authoring tool with WYSIWYG layout, HTML editing and site publishing capability with FTP and SFTP (Secure FTP).

Low Price (Free) Web Authoring

We love the free WYSIWYG web  authoring tools that are available today. These tools are invaluable for the student or first time web designer who would like to explore the art without having to spend any money. Good software is often expensive, but sometimes there is good software that doesn’t cost anything. This affords a great opportunity for those who would like to try something and learn but don’t have the funds to be able to experiment with something that could cost them.

KompoZer (Macintosh / Windows / Linux)

KompoZer is an open source WYSIWYG web authoring application available for the Macintosh, Windows or Linux platform. It is the successor to Nvu, a previous open source program which has now been discontinued.  Kompozer is an amazing application with lots of features, considering that it’s free. Shown below is a screenshot of the main editing window in Design edit mode (WYSIWYG) with the main editing area on the right pane and the Site Manager showing on the left pane with a list of all the files in the site.

KompoZer Design View

KompoZer Design View

In addition to the Site Manager, the left pane has a DOM Explorer as well as an FTP console. The screenshot below shows the main editing window in Split mode that shows both a WYSIWYG view and an HTML source view of the editing area. In the screenshot there is a <div> tag that is selected. The HTML source in the split pane under the WYSIWYG view displays only the relevant HTML that is selected. The DOM Explorer includes a sub-pane with tabs for HTML attributes and CSS properties of the relevant HTML and CSS of the selected tags.

KompoZer Split View

KompoZer Split View

KompoZer has a Status Toolbar that functions like the tag selector in Dreamweaver and Namo WebEditor. In the screenshot above, the tag hierarchy is visible in the status bar area. When a tag is clicked in the Status Toolbar, the affected part of the design appears with selection handles in the main Design editing window as well as the corresponding code in the Split view pane below.

KompoZer includes CaScadeS, which is an excellent open source CSS editor for creating and editing CSS style rules.  Style rules are added and changed in an interface that uses a tabbed dialog boxes. The finished rules are stored in an external .css file or as embedded styles in the html document.

Website publishing and FTP settings are configured in the Publishing Settings of KompoZer, which are stored along with the Site definitions and file and folder locations on the local and remote sites. KompoZer supports Secure FTP as well as regular FTP connections during file transfer.

Final Thoughts

There are many more web authoring applications than the few presented here, but these are our favorites as it stands right now. Which one a designer may wind up using will depend a lot on how often it will be used and under what circumstances. Certainly, the amount of money one has to spend on the software will be a big factor in determining which software would be right for one’s own situation.

The amount of money a designer will make in his or her profession has a lot to do with the selection of software one ultimately has to make. But even if one can’t justify the expenditure of any amount of money to invest in a web authoring tool, surely he or she can make good use of one of the free, open source applications that are available.

Check out on Google+