Student Portfolio of Kerstin Kegel

Portfolio Title

Comparison Report

Of three Web Authoring Tools:

1. Brief Product overview

•  Notepad

Notepad is a free application that is included in every windows version and can be run on 
any version of Windows. It takes up such small disk space that a decrease of disk space won't even be noticed.
Its simple menu bars enable everyone to figure out their usage on the spot without the need of further study.
It accepts HTML, JavaScript, Pearl , CGI Code and is also compatible with ActiveX technology. In addition 
it can also be used for simple text editing purposes like copying, cutting and pasting etc. 
It allows the user to have full control of the coding because it does not add any tags by itself.

•  FrontPage 2003

FrontPage is a Microsoft based application enabling the user to code and design complex websites. 
It can generate the HTML Code by itself and also enables the user to write the code. 
It contains a design section for inexperienced users in regards to coding and also a preview 
section showing the site. Coding tools for HTML, CSS, XSLT and scripting tools for JavaScript 
as well as Microsoft Visual Basic are also present. Websites can easily be uploaded via FTP.
Its toolbars are similar to those of Microsoft Office easing the use. Furthermore, it contains many 
templates that can be used for a website, pleasing inexperienced users.

•  Dreamweaver MX 2004

Dreamweaver is a Macromedia based web authoring tool that allows coding and designing and also 
includes a preview section. It contains secure FTP uploading and automatically checks CSS 
and HTML code for their correctness. It has a built in graphics editor 
(based on macromedia fireworks technology) and flash components.

Its improved and more logical work interface presents context in a clear manner. However, it still 
takes some time to figure out its wide range of features.

Its large variety of templates, not only for websites, but also for database inserts, navigation bars and 
forms speeds up development.

It also contains code validation to ensure correctness of code while it's being built.


2. Template Completeness

•  Notepad

Notepad is an editor which is entirely based on coding and does therefore NOT provide any templates. 
The user has to create the entire code and has full control over it.

•  FrontPage

It contains a broad variety of templates not only for an entire website but also for forms, CSS and even 
guestbook's. Some templates are fully designed containing fonts and colours as well as images that match. 
Some forms however are incomplete and kept simple, allowing the user to change them as they wish. 
A speedy feature of FrontPage is that when changes are made to the master template, all other pages 
linked to it are automatically changed too. In addition, the World Wide Web provides many more templates 
and users can also develop their own templates.

•  Dreamweaver

Provides the largest amount of templates. It contains templates for simple pages, CSS, Frames, JavaScript. 
Some templates are fully accessible and contain fixed space for links and pictures. They lack however on 
colour and design as they are kept simple in black and white giving design control to the user. Further 
templates are also available for download on the internet.

3. Do tools use complex tables, style sheets and positioned layers for formatting?

•  Notepad

Since notepad is a pure code-based editor, it does not contain any tables, style sheets and layers for 
formatting. It only contains 5 selections, File, Edit, Format, View and Help. The toolbars are therefore 
kept extremely simple making it impossible for someone not to understand their use.

•  FrontPage

FrontPage uses more complex layers for formatting. However, since FrontPage is Microsoft based, the 
layout it very similar to those of Microsoft Word, Excel etc. Having used these programs before, it gives 
the user a good idea on how to use the tools. They are also set out logically in order. Toolbars are at a 
fixed positioned but can be altered by the use for their own convenience.

•  Dreamweaver

Although dreamweaver has logically set out toolbars, it is rather difficult to use them simply because so 
many options are available. Many of which a beginner will not know about. Layers at first posses a fixed 
position but can also be moved and altered for the user's convenience.

4. How compatible is the code to a range of browsers?

(A) Notepad

Once again the compatibility of the code is entirely up to the programmer as everything is done by hand. 
In order to find out whether the code is compatible with certain browser, the user simply has to check by 
either using the browser or going to a validation website.

(B) FrontPage

FrontPage contains a program which enables the user to choose which browsers will be used. It can then 
determine whether certain codes can not be run on particular browsers. Therefore the software is able to 
determine what can be run on particular browsers and which features can't be done. However, when I 
created a website on FrontPage it was viewable in the Internet Explorer but it had slight changes on 
the layout and text format when viewing the same site with Mozilla and Netscape Navigator.

(C) Dreamweaver

Dreamweaver creates very compatible codes however; it must be kept in mind that Netscape for 
example has limited understanding of CSS. However, Dreamweaver comes with a code check to see 
if your HTML / XHTML and CSS code is supported by the minimum browser versions you specify in the 
Browser Target Check menu. This means, that depending on which browser the code will be run, 
Dreamweaver is able to change the code for compatibility with the browser! Therefore the code 
compatibility does not depend on dreamweaver, but on the abilities of the browsers.

5. Is it easy to modify the code the tools create?

The ease of the manipulation of the code actually depends on the user and his understanding of the code. 
However, I will create a 1 page website, consisting of a black background, and 5 headings beneath each other 
in different sizes and fonts with dreamweaver and FrontPage and I will then comment on the complexity of the 
code based on my own point of view. Beneath is a picture of the website.

Code created by Frontpage:

<html>

<head>

<meta http-equiv="Content-Language" content="en-au">

<meta name="GENERATOR" content="Microsoft FrontPage 5.0">

<meta name="ProgId" content="FrontPage.Editor.Document">

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>Website</title>

</head>

<body text="#FFFFFF" bgcolor="#000000">

<p><font face="Arial Black" size="7">Heading 1</font></p>

<p>&nbsp;</p>

<p><font face="BankGothic Md BT" size="7">Heading 2</font></p>

<p>&nbsp;</p>

<p><font face="CommercialScript BT" size="7">Heading 3</font></p>

<p>&nbsp;</p>

<p><img border="0" src="Work%20091.jpg" width="257" height="195"></p>

</body>

</html>



Code created by Dreamweaver:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

<!--

body,td,th {

color: #FFFFFF;

body {

background-color: #333333;

.style1 {

font-family: Arial;

font-weight: bold;

.style2 {font-family: "BankGothic Md BT"}

.style3 {font-family: "CommercialScript BT"}

-->

</style></head>

<body>

<h1><span class="style1">Heading 1 </span></h1>

<h4 class="style2">Heading 2 </h4>

<h3 class="style3">Heading 3 </h3>

<p class="style3">&nbsp;</p>

<p class="style3"><img src="file:///C|/Documents%20and%20Settings/Jona%20Jacinto/Desktop/Work%20091.jpg" 
width="221" height="165"> </p>

</body>

</html>

In my opinion the code created by dreamweaver is easier to edit because it's easier to read. It's set out 
clearer and it also uses CSS in the 
beginning whereas frontpage does not. However, in order to edit the dreamweaver code, a more thorough 
understand of HTML must be present because of the use of CSS.

Once again in regards to Notepad, the code depends on the user therefore I did not include it in this section 
of my comparison.

6. Overall Rating based on my opinion

Overall I must say I much prefer macromedia dreamweaver not only for use as a design tool but also 
for use as an editing tool. Even though notepad is a cheaper version with wide spread access it confuses 
me when I write the code. In dreamweaver different areas of the code have different colours making it easier 
for the eye to find what you're looking for. FrontPage is very similar to dreamweaver; however it does not have 
the broad variety of tools and options that dreamweaver contains, which is why it is my first choice.



BIBLIOGRAPHY

Macromedia Inc. (2005) Macromedia Dreamweaver MX 2004 [online]. Macromedia Inc: Macromedia Inc.. 
Available from:
< http://www.macromedia.com/software/dreamweaver > [Accessed 17 February 2005]

Microsoft Corp (2005) Microsoft FrontPage [online] Microsoft Corp: Microsoft Corp.Available from: 
< http://www.microsoft.com/office/frontpage > [Accessed 17 February 2005]

Anon. (n.d) Notepad [Online] Anon.: Anon. Available from: <http://www.notepad.org> 
[Accessed 17 February 2005]