This article is not intended to humiliate Dreamweaver or FrontPage editors. I just attempted to analyze both programs from different points, based on Internet research, experience of other users and my years of html coding experience.

To say honest I am not the fan both of them. In our production we regularly use AceHtmlPro but the fact is that many of our customers DO use either FrontPage or Dreamweaver and that’s the reason our employee have to be familiar with both. Writing the article I have talked to our stuff and did some research about both editors and I came up with the facts I’d like to share with you.

Pluses and minuses of MS FrontPage:

1. FrontPage as all Microsoft product has so many templates and ready to use solutions that you cannot admit it is easier for beginner to start using FrontPage to build his first website. You can create simple website personal or business with several clicks and all you will need to do next is to enter your text and pictures instead of used by FrontPage by default.

2. The good news is FrontPage html pages look exactly as they appear in MS Explorer and the bad news is that they look perfect ONLY in MS Explorer. However you may program FrontPage to get rid of nasty tags but I believe it requires some hand coding to adjust pages to Netscape or Opera. Another good news for FrontPage users: about 93% of all internet clients use MS Explorer 5 and higher.

3. As Microsoft application FrontPage is better with ASP pages, which are standard for Windows based hosting and windows based programming.

4. MS FrontPage perfectly interacts with other MS Office products. For example you can easily cut and paste some chart from MS Excel into FrontPage working area.

5. By default MS FrontPage uses table with the fixed width and sometimes it can be a problem to make it display tables with percentage width.

Pluses and minuses of Macromedia Dreamweaver:

1. You can build your own templates and use them to edit hundreds of pages of your website with one single click. Although Dreamweaver adds some comment tags to html file to distinguish editable and non-editable areas and I read in one forum that people experience some troubles applying template to more then 700 pages as they ran out of memory but I had never chance to test that.

2. Pages done with Dreamweaver usually have less trash in coding. They look almost perfect with Netscape, Opera and MS Explorer.

3. Dreamweaver doing amazing thing with SSI files and other server side include technology. Php code looks much nicer however with ASP scripts FrontPage still better.

4. Dreamweaver is much better interacts with other macromedia products.

5. Both editors in most cases display CSS (Cascading Style Sheets) correctly. But if you enter style attribute twice in Dreamweaver for
it will definitely ruin your page and you will be able preview your page partly before this error. FrontPage however handles such mistakes easily.

There are many others pluses and minuses in both editors if I wrote about al of them I should probably start a book rather then single article, but those I have mention I heard most about.

My idea is that MS FrontPage is ideal for beginners as it provides so much help and templates, then you should move to Dreamweaver when you feel yourself more comfortable with the html code and finally, if you are serious about web design, you should reach the hand coding level as it still best way for coding pages. It gives you the freedom of using tags and styles, as you want them to use. Do not forget however validate you hand coding, or code generated with FrontPage or Dreamweaver. You will be surprised if you knew how many errors produced during coding starting from broken links to invalid tag attributes.
Author Info:

Oleg Lazarenko Production manager of Metamorphosis Website Design Studio - Custom design, Website Templates, Web design Articles and Tutorials. You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.

A few years ago, there was a “trick” that was used by web site owners, to put either real small text at the very bottom of the page, of just the keywords to trick the search engines into thinking that the keywords were used right. Guess what?.. The search engines figured this out and now will penalize a site for doing that. Another “trick’ from the past was to put the keywords as the same color of the background of the page. So they would not be seen by the surfer, but would be picked up by the search engines. Again, this has been figured out by the search engines, and they will penalize a site, by either banning them,from being indexed, or just never indexed. The rule of thumb to use is, write your pages with good content, utilizing your keywords in an effective manner. To many people create their website, for the search engines, not for the surfers. Last I heard, search engines don’t do much buying of things on the internet, but the surfers still do.

Do not fall into the trap of constantly changing your page to try and get listed high on a search engine. Because what you do for one search engine, you will have to do something else for another one. Write your pages for the people that will be coming to your site.
Utilizing this basic but sound practice, will keep your visitors coming back time and time again.

Now for the codes.



<meta name="description" content="[enter your description here]"/>

<meta name="keywords" content="[enter keywords separated by a comma]"/>

Just put in between the brackets  a good description of your site and in the keyword line, your keywords that you want to be indexed under.

Your keywords need to be utilized in your html document effectively. If your content is good, and you have utilized your keywords effectively, then your job is done. Just sit back, and wait, for the search engines to reward you.

This is especially true if you are using a WYSIWYG (What You See Is What You Get) web design package such as FrontPage or Dreamweaver. These programs will speed up your web site creation, but they are not that efficient at writing clean html code.

We will be focusing this discussion on the actual html coding, ignoring other programming languages that may be used in a page such as JavaScript. In the code examples I will be using ( and ) characters instead of correct html so that the code examples will display properly in this newsletter.

Up until recently when coding a page in HTML we would be using tags such as the (font) tag and (p) paragraph tags. Between these tags would be our page content, text, images and links. Each time a formatting change was made on the page new tags were needed with complete formatting for the new section. More recently we have gained the ability to use Cascading Style Sheets, allowing us to write the formatting once and then refer to that formatting several times within a web page.

In order to speed up page load times we need to have fewer characters on the page when viewed in an html editor. Since we really do not want to remove any of our visible content we need to look to the html code. By cleaning up this code we can remove characters, thereby creating a smaller web page that will load more quickly.

Over time HTML has changed and we now have many different ways to do the same thing. An example would be the code used to show a bold type face. In HTML we have two main choices, the (strong) tag and the (b) tag. As you can see the (strong) tag uses 5 more characters than the (b) tag, and if we consider the closing tags as well we see that using the (strong)(/strong) tag pair uses 10 more characters than the cleaner (b)(/b) tag pair.

This is our First Principle of clean HTML code: Use the simplest coding method available.

HTML has the ability of nesting code within other code. For instance we could have a line with three words where the middle word was in bold. This could be accomplished by changing the formatting completely each time the visible formatting changes. Consider this code:

(font face=”times”)This(/font)
(font face=”times”)(strong)BOLD(/strong)(/font)
(font face=”times”)Word(/font)
This takes up 90 characters.

This is very poorly written html and is what you occasionally will get when using a WYSIWYG editor. Since the (font) tags are repeating the same information we can simply nest the (strong) tags inside the (font) tags, and better yet use the (b) tag instead of the (strong) tag. This would give us this code (font face=”times)This (b)BOLD(/b) Word(/font), taking up only 46 characters.

This is our Second Principle of clean HTML code: Use nested tags when possible. Be aware that WYSIWYG editors will frequently update formatting by adding layer after layer of nested code. So while you are cleaning up the code look for redundant nested code placed there by your WYSIWYG editing program.

A big problem with using HTML tags is that we need to repeat the tag coding whenever we change the formatting. The advent of CSS allows us a great advantage in clean coding by allowing us to layout the formatting once in a document, then simply refer to it over and over again.

If we had six paragraphs in a page that switch between two different types of formatting, such as headings in Blue, Bold, Ariel, size 4 and paragraph text in Black, Times, size 2, using tags we would need to list that complete formatting each time we make a change.

(font face=”Ariel” color=”blue” size=”4”)(b)Our heading(/b)(/font)
(font face=”Times color=”black” size=”2”)Our paragraph(/font)
(font face=”Ariel” color=”blue” size=”4”)(b)Our next heading(/b)(/font)
(font face=”Times color=”black” size=”2”)Our next paragraph(/font)

We would then repeat this for each heading and paragraph, lots of html code.

With CSS we could create CSS Styles for each formatting type, list the Styles once in the Header of the page, and then simply refer to the Style each time we make a change.

(head)
(style type=”text/css”)
(!–
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 24px;
}
.style2 {
font-family: “Times New Roman”, Times, serif;
font-size: 12px;
}
–)
(/style)
(/head)
(body)
(p class=”style1″)Heading(/p)
(p class=”style2″)Paragraph Text(/p)
(/body)

Notice that the Styles are created in the Head section of the page and then simply referenced in the Body section. As we add more formatting we would simply continue to refer to the previously created Styles.

This is our Third Principle of Clean HTML Code: Use CSS styles when ever possible. CSS has several other benefits, such as being able to place the CSS styles in an external file, thereby reducing the page size even more, and the ability to quickly update formatting site-wide by simply updating the external CSS Style file.

So with some simple cleaning of your HTML code you can easily reduce the file size and make a fast loading, lean and mean web page.

Author Info:

George Peirson: George Peirson is a successful Entrepreneur and Internet Trainer. He is the author of over 30 multimedia based tutorial training titles covering such topics as Photoshop, Flash and Dreamweaver. To see his training sets visit www.howtogurus.com Article copyright 2005 George Peirson

So here’s a list of useful sites that I use all the time: