Points To Note

Switch styles: Normal || Basic || Pink || XP

The example page was designed to be quite a simple interface.
I chose the following:

Where possible, and to show what these software packages can do, I opted to use the Wizard to guide me through making the pages.
This was to compare the HTML I use when handwriting code to that generated by HTML design software in general.



Frontpage - Observations

I found that the FrontPage program was difficult to add styles. It appeared that in the version of FrontPage i was using (Office XP), DHTML effects are preferred over standard style code.
FireFox, as standard will not allow DHTML code to be run. Microsoft have also shot themselves in the foot, as Internet Explorer 6 on Windows XP with Service Pack 2 installed does not allow Active Content to be run as default.
To allow this DHTML code to run in IE, you have to enable ActiveX content on that page. This is a security risk as ActiveX exploits can easily take control over a users system.
FrontPage also uses double-spacing between lines of text when the Enter key is pressed.
Standard cell spacing for tables is too big, and the Wizard uses % for 'Height' and 'Width', instead of correct measurements; IE - In pixels.
Standard Wizard cell padding / margin defaults aren't particularly useful / aesthetically pleasing.
It has issues with Font tags, as I selected to use Arial throughout, but had to keep altering it in the code / through the Wizard to make it appear like that when viewed in the browser.
Most of the issues with the code are easliy ironed out with a little manual editing of the code. After a quick clean-up I managed to make the Frontpage code validate, but i did have to remove all the DHTML code, and take out several lines of other code, including font-family and font-size tags.
Notice how the links are all the same colour on the page. Without knowledge of CSS and avoiding the use of DHTML styling hyperlinks is extremely difficult.

Time spent on page: Wizard: 10 minutes, Visual: 1.5 hours. Cleaning: 15 minutes.
Ease to update content of page: Time consuming.
Ease to update layout / styles: Time consuming. No stylesheet.




Dreamweaver using Layers - Observations

Having used DreamWeaver before, I found the interface a little more intuitive. However, when I first began using it, I found it extremely difficult to navigate. It has a multitude of functions that most users will possibly never use. Whereas Frontpage is as simple as it possibly could be, DreamWeaver likes to have more options than you could probably ever understand.
The initial code I got designing the page using layers was actually slightly slimmer in size to the frontpage code.

Quite often changes made in the DreamWeaver workspace do not show up the same in browsers. EG - IE puts text too high, FireFox puts gaps between the layers. IE attempts to block some form of active content, while FireFox jus doesn't bother to load it.
I initially had some problems with FireFox not restricting the text to the edge of the layer boxes, resulting in overflow.
The default line spacing is double, jus as in FrontPage.
Layers are not very good for determining how the page will look in different browsers. Layers are not good coding practice.
Link styles are difficult to add without any prior knowledge of CSS. You can easily change the colours for links and text, but not styles for rollovers, etc.
Using images in the document, DreamWeaver attempts to use the default "file:///" as the root path for images and files in links. This would be much easier if it were "./".
DreamWeaver likes you to set the defaults for your site within the program so it can keep track of changes structures more easily. This is generally more iritating than helpful.
As with FrontPage, hyperlinks are difficult to style. It is easy enough to set a global hyperlink colour, but not a seperate definition for 2 or more sets of hyperlink colours.

Time spent on page: Layout: 15 minutes, Visual: 45 minutes. Cleaning: 5 minutes.
Ease to update content: Time consuming if there was more than one page.
Ease to update layout / styles: Time consuming. No stylesheet.




Dreamweaver using Tables - Observations

The default margins / cell padding for tables means that quite often the text in a cell is touching the cell wall.
Also the default settings for tables mean that there is a border a larger-than-necessary cell space / pad which isn't very pleasing to the eye.
There is no easy way in DreamWeaver to set the styles for links like in FrontPage with DHTML. You can attach a stylesheet with a bit of messing about, but for beginners, this is very difficult to do.
As above, styles are hard to do, but link colours are easy to change. The only problem still being that you can only really change the hyperlink colours globally without CSS knowledge.

Time spent on page: Wizard: 10 minutes, Visual: 45 minutes. Cleaning: 15 minutes.
Ease to update content: Time consuming.
Ease to update layout / styles: Time consuming. No stylesheet.




Handwritten Code using CSS Layout - Observations

Looks as close to identical in all browsers as is possible, compensating for cross-browser coding differences.
Valid code for HTML and CSS.
Styles for hyperlinks can be changed all over the page, as several different link styles can be defined and used on one single page.
Final page is more usable, easier to maitain, and easier to update.

Time spent on page: HTML Code: 10 minutes, CSS Code: 1.5 hours. Tweaking: 2 hours
Ease to update content: Simple.
Ease to update layout / styles: Simple.




Overview of results

After making these pages, then spending time cleaning them up and tweaking them - I also tested each of them in both FireFox Version 1.0.1 and Internet Explorer 6.0.2900 with Service Pack 2 installed.

For these basic examples there are still differences in how Internet Explorer and FireFox interpret the code given to them. Curiously enough, FireFox interprets web standard code correctly, and Internet Explorer manages to fail on the standards regularly, but do crappy code very well.

In the example pages I made, IE displays the DreamWeaver tables example better than FireFox does. To make up for this, FireFox reads my CSS documents correctly. To make this work correctly in IE, I had to add 10 lines of extra code in the main.css file for the mini-site and 4 lines of code in the test.css file for the example to work around IE's faults.

As far as time consumation goes, the handwritten code took longer to write initially, but the extra time taken to perfect the CSS document will have saved me many many hours of coding later on if I were to use this for an entire site.

For non-standard code, initial build time was much quicker, but overall for coding an entire site, the build time would have been much greater than that compared with the CSS layout.

Time taken:

As you can see for a one basic page build, web standard code takes around 3 times longer to get exactly correct. It validates. The other three didn't first time. Some didn't even validate the second time.
For ease of updating and changing the layout of pages, CSS is by far the most simple.To take this one step further, the coding for web standard code has been done using PHP
<? include ("pagename.php"); ?> commands.

These allow all content that is likely to be updated regularly to be kept seperate from the standard HTML page code. To the end user, all looks the same, but back-end it allows for much easier updates to the site.