WYSIWYG The Massive Buying Guide: Comparison Between Microsoft FrontPage and Macromedia Dreamweaver 4
Mar 24 '02
The Bottom Line The Massive Buying Guide: FrontPage 2000 compared to Dreamweaver 4
What You See, Is What You Get!
¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯
Many of you will have come across the WYSIWYG HTML packages lately and you might notice the various types brands and products. I have chosen two packages both from two different type of background and both made for ease of use and still being full of features that you’ll need. The two packages, which seem a good choice to battle between, are Microsoft’s FrontPage 2000 and Macromedia’s Dreamweaver 4. Yes, Dreamweaver 4 is probably more up to date than FrontPage 2000, but I shouldn’t think it would be an overall threat.
For starters you have a pair of packages that come in a number of forms, such as FrontPage, which comes with Office 2000. Dreamweaver 4 however is a stand-alone package and costing something different altogether. Although you can get the Dreamweaver program with Fireworks 4 Studio (animated web graphics) and it can come as packages which integrate with one another. The prices for these packages are as follows:
[Inc VAT]
Dreamweaver 4
£249.99, $349.98
Dreamweaver 4 + Fireworks 4
£354.99, $496.98
FrontPage 2000
£132.72, $185.80
(Prices taken from jungle.com, Feb 2002)
As you can see Dreamweaver is a much pricier package, however you don’t get the advantage of being compatible with other programs like MS Word or Excel, like FrontPage can- thus giving the ability to share data between sources. Dreamweaver is much more concentrated on what it should do, hence you get more HTML tools and a better package altogether. There isn’t much you will like about Dreamweaver when you first start, but as time passes its interface and floating tool bars make sense to FrontPage’s menu city. For example with FrontPage you must enter a drop menu and click hyperlink then find the file or type in the address, where you simply enter it into a text box on screen in Dreamweaver. Things like these floating tool bars make it easier to use as they change with what is selected, whereas FrontPage will never change unless you customize the tool bars. So lets get down to the real review.
Table Of Contents
- Interface
- Help & Assistants
- HTML Filing Efficiency
- Word Processing
- Navigational Bars
- Creating a page.
---- How to create the Epinions homepage
- Advanced Features
- Conclusions
- Pros And Cons of each package
_________________________________________
╓═─═─═─═─═─═─
║Interface
╙═─═─═─═─═─═─
When you first load up each program for the first time there is nothing going on, you get all the default menus and stuff. Dreamweaver starts up pretty fast entering you into a New Document, where FrontPage starts up the typical Office New File menu complete with Templates and other accessories. On the whole, this is a nice feature, but sometimes you just want to ignore it.
Operating FrontPage is very easy, the drop menus allow you to navigate without getting lost, there are some good features in the menus you won’t realize you could do until later. With Dreamweaver this is more complex, you get a larger array of sub-menus and more options and preferences than FrontPage, it can be confusing at first, but options like adding a ruler in pixels and a background grid just make the experience so much more pleasant when its just a few clicks away. FrontPage doesn’t have these features though.
The twin horizontal bars on the FrontPage display and numerous bars to the left act as navigational tools, there is a views option bar, offering you a view of a folder of HTML pages, or even a Browser bar – users of Explorer will be familiar with this. You can remove these bars easily, and even add more using the customize tool – so you can add ‘recent file’ buttons at the top of the page for easy page switching. While this exact feature won’t be used for beginners, as it’s difficult to get to at first. The Dreamweaver interface is remarkably clean, there are no interfering bars hanging down, and any that are there can be scrolled out of view. The few buttons on display act as additional drop menus, and there is a Page Title text box, with FrontPage you’d need to pass through Format, Page Properties and onto a floating panel.
The general feel of the two packages lead to different opinion, with time Dreamweaver could be less stressful to use over FrontPage, but FrontPage has some of the least complex menus and even longer descriptions for new users. Yes Dreamweaver has tonnes of features, and FrontPage has some nicer easier to use menus, but for most the menus and menus are too time consuming to take over and control regularly. Remember with web pages you will be using the hyperlink editors frequently and deciding whether the link should open a new page or be in the same frame shouldn’t take you through two pop-up panel menus on FrontPage compared to none with Dreamweaver – in this case type the link into the floating panel and select the page link target settings from the drop menu at the top. Simple.
╓═─═─═─═─═─═─
║Help & Assistants
╙═─═─═─═─═─═─
Everyone will inevitably end up getting stuck with a program; find themselves saying, “why is this doing this” or “why it isn’t?” Well, to get help you should be able to rely on the help of the program itself, in the help files should lie your answers. To start with FrontPage has – like the office packages – an office assistant that is either going to help you or annoy you to death. This little fella will interrupt you and try to help you, and if you feel confident you can ask a question, but in response you get less than a human answer. The help files however are not quite as expansive as those with Dreamweaver. The Help menu sees to about 4 different type of help functions, What’s this – a click on something to see a summary of it type of program, Microsoft FrontPage Help (F1) – the complete help file, Office on the web – no idea, Detect and repair – repair office by reinstalling it.
Dreamweaver’s help section is much more vast. Here you have the best example of fine – easy to use help. They’re a number of modes and functions which make it easy to get started or get unstuck. The drop menu is very extensive; to start with you have some primers for beginners, such as the ‘Welcome’ screen including tutorials and other links to the help system. ‘Using Dreamweaver’, this being a web page full of thorough tutorials and help to what Dreamweaver can do, and of course it was built using the program, all the files are held in the install folder. One of the neat things about this web page is that it is designed similar to the Help file window found with FrontPage, so you have ‘Contents Index’ and ‘Search’, the latter brings up a HTML window complete with a form and search criteria text box – this is very good, but you would expect it at this price. ‘Reference’, function will bring up a floating tool bar that gives you long descriptions of the various tags in the HTML and all the descriptions are taken from books such as ‘O’Reilly HTML Reference’. Within this Reference panel there are also a separate area that gives you tools to test and analyse things like ‘Websafe colours’ for colours in images where 256 colours is the safest option. All the above is just three options from the possible 14 options, which are as follows:
What’s New Promotion of the updates from DW3
Guided Tour
Lessons
Dreamweaver Exchange - Updates and program aids
Manage Extensions -Check on extensions running for DW
DW Support centre - Online help
Macromedia Forums - Lots of countries listed
Extending DW - Extended help file like Using DW
Register DW
About DW – The people who designed
There is a lot of help from the Dreamweaver program compared to FrontPage, which leaves you with little you cannot do, however there is the idea that the more help you have the more likely you are to use it. In this case Dreamweaver could be harder to use over FrontPage, or rather, it has more features to get used to.
Within the help files in each program you can find pretty much anything you search for, but still there is that fact that you need to know the term you’re looking for. For example to find help on how to put in a drop down menu on the page (like the one Epinions uses next to its search button) you would need to use the expression “Drop-Down Menu” in FrontPage and “Jump Menu” in Dreamweaver to locate the specific help.
╓═─═─═─═─═─═─
║HTML Filing Efficiency
╙═─═─═─═─═─═─
Before actually getting down to the creating area, we should first take a look at how each package handles HTML and how easy it is to edit from the package.
Each package will give you two generic displays, Design (WYSIWYG), and Code (HTML for FrontPage) which displays the HTML. FrontPage also has a preview button which works, but if you have a running applet - it won’t run correctly unless used in a browser. Dreamweaver doesn’t have a preview button but does have a Code and Design window split, which is good for finding code and changing code by clicking on an item.
To test this first a page needs to be made; a simple one would be best. The aim is to get the same looking document but see which package has the lowest file size and that means efficiency. The page created has the following features:
White background, default font, default hyperlink colours; so anything special would be added by the program only.
The page content is as follows:
One table with 100% width (all appearance by default) with the following content;
One table with 25 rows and 25 columns (all appearance by default).
The file sizes:
Dreamweaver: 24.0 KB [16,610 characters]
FrontPage: 32.0 KB [23,554]
Aha! As you can see the clear winner is Dreamweaver. Now looking at the actual coding and comparing it -- it was found that Dreamweaver’s code has 16,610 characters whereas FrontPage was a mighty 23,554. On a 64k modem it would take four seconds to download the Dreamweaver one, while FrontPage’s would take an extra second. This sort of efficiency loss when added to how much other stuff on the page that you’d have would simply add up to a more demanding file size. So where is FrontPage lagging at?
Comparing the Head sections:
Dreamweaver:
◄head►
◄title►Untitled Document◄/title►
◄meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"►
◄/head►
FrontPage:
◄head►
◄meta http-equiv="Content-Type" content="text/html; charset=windows-1252"►
◄meta name="GENERATOR" content="Microsoft FrontPage 4.0"►
◄meta name="ProgId" content="FrontPage.Editor.Document"►
◄title►New Page 1◄/title►
◄meta name="Microsoft Border" content="none"►
◄/head►
As you can see, this FrontPage program is holding a decidedly larger amount of data for the Head section. And a lot of it is pure nonsense, or so it would appear, the few lines above that appear useless are actually used for FrontPage’s personal use, so that it can use its “Web” system (talked over later). Moreover so that people who have FrontPage can use an “Edit” button on their browser – not a good thing.
Dreamweaver, by default doesn’t include the Meta tags, but does have a useful tool that will let you write them in. The following line was done using the tool:
◄meta name="keywords" content="hello"►
It also does descriptions:
◄meta name="description" content="this is a web page"►
FrontPage doesn’t include this feature, so you’d have to insert it yourself. And these are the key elements most search engines use to locate pages with.
In the overall comparison of HTML Efficiency, Dreamweaver outperforms FrontPage in every aspect, for the testing page, in a case with so many cells, the line which displays their content should be a small amount of characters such that you have ◄td►”Content” ◄/td► for each cell, these will follow for each row and each cell.
The two packages give you two very different readings:
Dreamweaver:
◄td►xxxx◄/td►
FrontPage:
◄td width="4%"► xxxx◄/td►
Please note; the xxxx portion is actually written as:
& n b s p ;
With no spaces…(If this was used here, you would see a blank space!)
As you can see, there is more to the FrontPage line, and it suggests that for each cell it is given a size from ‘width =”4%”’ where Dreamweaver doesn’t’ have anything. For both however the ‘xxxx ’ is simply saying there is a space. In retrospect, FrontPage is safe to do this size thing, but most browsers would assume the 4% spacing anyway.
Viewing the HTML from each program will give you colour coded areas, FrontPage will usually highlight tags like ‘◄p►’ ‘◄body►’ and all the other types in blue, and such content like ‘xxxx’ in black, any code it doesn’t understand will be displayed in a dull purple such as some scripts. The same sort of system is used in Dreamweaver.
Now, with each package you do get the ability to change and alter any part of the HTML and in some circumstances each package handles this in different ways. Dreamweaver does best by offering the ability to “see” the code with an associated item, this can be a Jump box, hyperlink, or even standard text. With FrontPage you don’t get this feature, but it does allow you to enter your own HTML on a page without navigating the HTML window.
Although the need for altering HTML will be rare, but its nice to have these features in a WYSIWYG package.
╓═─═─═─═─═─═─
║Word Processing
╙═─═─═─═─═─═─
If there is any area worth noting, it’s definitely this one. Neither of these packages makes out to be an alternative Word but do have the standard features you should expect for these prices. To start with FrontPage has a typical office line up including the Spelling error highlight and grammar highlight as in Word. It also includes a Thesaurus. It also has the full font list and you can select font sizes using the standard Windows style, like this text is default at “10” which in HTML sizes is “2”, and so “8” is “1”, “12” is “3” and so on until 36 – “7”. You can also enter Symbols like “◄”.
With both packages you get a default line separation, where you would have a missing line everytime you hit return. This is normal and can be missed by holding shift down for both programs.
With Dreamweaver you miss out on a few niceties like the Thesaurus, but you do get a proper spell checker – though it doesn’t highlight your mistakes. Though it’s font range and ability with text far surpasses FrontPage’s. Firstly, you can extend the font size from
“-3” to “+4” thus your fonts can be smaller or larger than normal. Secondly you can get a font combination – what this will do is give the browser three or more definable fonts it can use for a particular paragraph: if for example there is no “Arial” font then you would get “Helvetica” and if that is not available then you get “San’s Serif” automatically. This is there for those so-varied amount of Linux, Mac or Windows users who won’t have those fonts on their system. This is a must for any professional webpage.
With either package you get a formatting box that switches the font settings automatically, these allow you to draw up emphasized headings or paragraph marks – these can also be edited so you can change the colour size or position respectively.
╓═─═─═─═─═─═─
║Navigational Bars
╙═─═─═─═─═─═─
A navigational bar is something that maps the web site, so if you went into Electronics, it will display on the line below the Epinions header. This is automatically updated with the page title and where it is on the web folder. For this to work you need to have a special folder which is defined as a Web folder. This will enable the program to work within the folder. This enables it to keep and update all files simultaneously when a web change is made.
In FrontPage the system is that you have in integrated side bar containing folders of a “Web” as FrontPage calls it. A Web can be made or an existing folder created into a web. This folder is then a place where FrontPage can keep tabs on each page which is known as the View’s list, this allows you to view reports on the web, such as the file sizes, broken links and the site map used for the Navigation bar. Inserting a bar is easy, but editing is troublesome. You can have text – the pages’ title and they look something like this:
[Index] [Computers & Internet]…
There is nothing you can do to alter this, and it’s almost impossible to get pictures in place of the text.
For Dreamweaver, you still have to declare a web folder – and you can’t create one. But Dreamweaver uses the term ‘Site’ instead of web. With this tool you can look up a folder and convert it to a working site. This will bring up a panel where it displays all the files and will calculate the hyperlinks so that it can check it out for broken links and such. You can also see the map of the site, and organize it simply by dragging and dropping or inserting other pages too. The navigation bar is much nicer and can be edited from the default:
Index ► Computers & Internet
The two strategies of organizing the map of a site/web are basically identical for both programs. Both will allow you to move, rename or even remove pages from a site/web without it occurring as broken links in the pages, which is fantastic.
Dreamweaver’s navigation bar is much more complex to add, though allows you to add images and define its looks easier, still it’s very complex to do.
Creating a page. How to create the Epinions homepage
As a test review, this will test how easy these packages make it to build a commercial site that, in the end, will be identical to the Epinions.com homepage. There are some elements, which haven’t been crossed over just yet, such as how Epinions uses active borders, on pretty much all the pages. Active borders are one thing which FrontPage excels at, these are borders of small page which appear on all the page headings, sides or bottoms of every page in the web – that has been made to show them.
Dreamweaver however doesn’t have this feature, and will be interesting to see what it uses for these “critical” systems, which so many web pages today need to stay on track with every update.
The Epinions header including its categories bar and search portions and such are all in with the border. For this example I won’t use the borders feature, as there aren’t going to be any more pages except one.
To start with the main page content suggests a simple single table split into one row at the top, two columns below and a row at the bottom. Within these portions lay smaller nested tables – these often build up file size as aforementioned in the HTML efficiency section.
Within the first row at the top we have a four row table with a 0 spacing and possible 2 padding. And an estimated 800-pixel width -- centred too. In the left column, there is a complex content bar, this is a table with two rows, a border possible 2 pixels, no spacing of cells, and has a background light blue, whereas the top cell has a darker blue the same colour as the border.
The centre content (2nd column) is a three-row table with a split of two columns in the middle of row three. With the simple two row tables as described for the right hand side, except they don’t have borders.
The lower row is just a text centred. And that’s the simple Epinions design.
So how would you recreate this?
Well just about all the steps are covered above such as how many rows and what spacing the tables should have. To build tables and enter data is an altogether different method for both packages:
FrontPage…
You need to create a table by using the Table drawer on the top panel, which will automatically draw the table for you with the specific cells –rows-and-columns you see on screen. You will need to draw that huge mainframe where all the sub-nested-tables go. Then all you do is format this table so that it has no borders, a suggested 8 pixel spacing for the cells and a white background. Furthermore the page needs to be edited for the “look” of the document, by entering the page properties, whereby you can select the colour of fonts, and the hyperlink colours too. Also you can select the background image/colour and any rollover colours or editing – this will change the look of links when hovered over and is a very cool feature. Here’s a tip; to get out of the “Default Font” of the page, go into Styles (page properties) and select formatting – font, here you can enter any font which will make all the text -unless edited- the same for the whole page. So you can chose Arial with a size of 10. This will make the entire page default font Arial at 10. Colouring backgrounds of cells is troublesome, you need to select the cell using the arrow cursors, then go to formatting and properties, whereby you colour the cell background from a further two panels. The font colours/sizes/styles are all editable from the second menu bar. For most the layout of FrontPage is a little cumbersome, you can’t get quick access to popular features such as the Hyperlink tool, otherwise use “CTRL+K”. It’s hard to colour borders of cells and tables without having to faff on with the formatting and selection. By the end of getting through drawing the third table and having to go through the rigorous drawing-formatting-additional formatting and more formatting to get the right look, you will give up as it is so laborious to do this more than a few times. It’s also difficult to copy tables within cells without getting some weird side effects. When you get a load of nested tables it’s hard to get the table you want for properties.
Dreamweaver…
Getting to the inserting tables is quite simple, still not as easy as the drawer on FrontPage, but still the panel that pops up gives you all you need if you know what you need of course. This offers cell padding spacing, border size, rows, columns and sizing of the table. This is luxury after the torment of FrontPage. Once you have the three celled main frame set up, you’ll get the standard two shade borders. They’re easily eradicated with the floating formatting bar at the side. You can also adjust the settings like the table size and such from here, as well as the background font and more! The buttons are quite small, especially on high resolutions. After a few tables are drawn, it’s conclusive that the panel at the start makes drawing tables and stuff far breezier than FrontPage’s torture. You can also select a table (which gives you resizing handles too) so that you can reformat it with the floating panel.
However once in the page properties box, there are less than usual options. You can change page title, text colour and background and some other stuff, but the rollover feature from FrontPage is not here, I’ve searched through the help web page and found zilch, clearly Dreamweaver doesn’t do rollover. With that said, the rest of the Epinions cloning went down as easy as pie. The colour panels for changing the colour of text, borders or backgrounds are a nice feature; they even have a button for cancelling the colour.
Looking at both programs features and trying them, it must be said that making a Database driven website isn’t quite out of the question, they both pose the necessary functions to help you, but don’t exactly make it a generic feature.
╓═─═─═─═─═─═─
║Advanced Features
╙═─═─═─═─═─═─
Both packages have their foibles in a few areas, but here is where they should excel on. They both have some things, which are new to the genre, but getting to the features is proven to be a difficult experience.
You won’t find that rollover feature straight away and the navigation system will be a complete blind spot. But here are some features you should check out.
Of the two packages Dreamweaver is the easiest to find the features, as they are pretty much all laid out on the drop menus, although you may need to look them up in the help files before using them.
FrontPage…
There have already been a sum up of the load of features you get of FrontPage already. You can do a lot with the package, but the only area it slows up on is with the user interface.
The database utilities are as much a waste of time as using the built in templates. However building a home-made template is a good way of saving time copying the same stuff to a blank page. Still with the use of a web this method is painful to complete- as any image will not show because the file is saved elsewhere.
The publish web feature was tried and failed on most parts, it was used with Geocities, and didn’t seen to work properly. However if it does work with other servers (by the way I’m aware you need the feature turned on at the web server) then it could well be a time saver. Otherwise I’ll take Tripods Zip file uploader thanks.
Trying to setup a database using the system is troublesome, firstly you need to know how this is going to work, and also how FrontPage will work it. You can’t just Mail Merge a query to the file, nor link table columns. You really have to practise using the features to get it to work, and in time it will work. Though the results were less than satisfactory.
With the Frames setting, it is impossible to make a frame to a none-frame document, but when you get one from the “New” panel, you can edit and adjust them easily. Although stuff like removing the border or the width of the border and whether it has scroll bars are harder to access.
The “Include Page” function is by far the most versatile function in FrontPage, it allows you to add a page – say the Epinions copyright notes – to every page and everytime it is updated the same goes for the pages containing it. Another feature original to Dreamweaver is the Shared Borders function. This adds a special section – similar to a frame – to each page edited to have it. So that each time you edit that bar it will be changed for every page with it on.
Dreamweaver 4
Unlike FrontPage, there is practically a book size of features untold of. The most critical of all the features is the compatibility of Flash and Fireworks. Of course, being a Macromedia project it has its share of Flash elements such as an Interactive button. You can also insert flash text. There are the usual foray of animated buttons and navigation bar.
And unlike FrontPage, you can add layers and organize layers. This will allow you to place an image floating just over a –too-small cell so that it overlaps. There a loads of features for use on different types of object, such as the ability to add CSS styles to hyperlinks and pages.
Editing the head tags like Meta keywords and others is simple you can edit them using the Head Tags button, and it works well.
The Include Page feature found with FrontPage is here called ‘Server Side Include’, and this will do the same thing and include the entire page in an area. This type of feature allows you to edit one page and then the entire site will be updated which include that page.
One more, very important and learning tool for new users it the ability to view the HTML that goes with an object. So you can see what makes a Jump Box, and so, you can see how they work and how you could alter it.
Dreamweaver like FrontPage also features the compatibility restrictions for some Browsers common today. You can also set what Script language to use, and where to use it on each page!
╓═─═─═─═─═─═─
║Conclusions
╙═─═─═─═─═─═─
It is clear now, that cost will get you functions in HTML editors. Both package reviewed here is independently a very expensive package, which have their merits but still lag behind with some of the simple and overlooked areas.
FrontPage: here you have the Office family servant, ready to create your webpage, which you can add edit and change with ease, but getting to the stage of a web with included pages and perhaps navigation bars is going to take a few months to get to, or more. It is really let down in its functionality; running through menu after menu won’t bother most a few times a day, but since you’re paying such a price you want to use it properly, and in time you will tire of the interface and poor reliability. It is also a poor HTML writer and takes too much space over the competitor. Features like Macros – great tools – are often easy to write, but in FrontPage a torment to use. The visual script program in FrontPage requires different compiling and therefore different scripts to use properly compared to Access’s Visual Basic sub program. Still it’s a fun package to use and far easier to understand to beginners than Dreamweaver.
Dreamweaver: this is the package for pros, and one, which will give you all the features you want and the functionality to adjust or add the unenclosed. It’s a program for the office company, the local shop perhaps, or small business. In any case a program for the experienced. Not made for beginners, hence its no fuss straightforward interface. The help sheets are very well written and they cover all the areas. The compatibility with Flash and Fireworks also adds the functionality for webpages, and this is the latest craze for many designer webpages today. The endless arrays of features are all at hand if not exactly obvious at first site. The only downside of this package is its lack of smaller feature, such as the rollover function touched on earlier. Its performance with HTML and scripting are also impressive, as is they interface of the tool bars and navigational tools and external windows. Its also well equipped to handle different operating systems and their fonts. Its no reason why it is doing so well, it costs over £300.
╓═─═─═─═─═─═─
║Pros And Cons of each package
╙═─═─═─═─═─═─
Dreamweaver 4 ~ Macromedia
Pros: Excellent HTML efficiency; compatibility with web graphics; functionality and interface; vast range of tools and settings – all customisable.
Cons: Expensive; not for the beginner; lack of smaller tools; no examples in help files.
Value:
4/5
Performance:
5/5
FrontPage 2000 ~ Microsoft
Pros: Easy to use and understand; fine ability with images; plenty of advanced features.
Cons: Time consuming menus; overlong HTML writing; hard to find features.
Value:
4/5
Performance:
3½/5
Do you know somewhere better for this article to go? Tell the author.
 |
|
|
|
|
|
|
Epinions.com ID:
MichaelHatton
|
 - Top 200 |
|
Location: Darlington, England
Reviews written: 192
Trusted by: 59 members
About Me:
Retired
|
|
|
© 1999-2009 Shopping.com, Inc.