WebSite101 Frontpage, Dreamweaver template & CSS/HTML template Tutorial

Having been web template designers since 1994, we are often asked what the difference is between a Frontpage template, Dreamweaver template and CSS/HTML template. The second most popular support question is which HTML editor is best to use to build a web site.

Our advice back in the early days of web template design is the same as it is today. Firstly, you should be aware that any template designed to be used with any one proprietary HTML editor program has an increased risk of high maintenance for future evolution of your site *if* you decide to switch HTML editors.

Before you roll your eyes, the fact is that more than 75% of the web designers who are using HTML editors today will have switched to a different HTML editor or dynamic (rather than static web programming language) within 3-4 years. This is not to say that you should not use templates that are proprietary to any particular HTML editor software. Utilizing a template within one of these programs makes it easy to make changes sitewide and is a static alternative to dynamic web design.

Dynamic sites separate content from design much like the concept of external CSS (cascading style sheets). It takes sections of the original HTML-CSS template and it delivers it to the browser via the server rather than the client side.

So in answer to the first question, “Which type of web template is best to use: Frontpage, Dreamweaver or CSS – HTML?” we have to honestly say it depends on you, your budget and your site’s objectives.

Ask yourself the following questions and then read our comments on each:

Q1. How many years of web design experience do you currently have? How much time are you willing to devote to learning HTML and CSS? Is this a job field you expect to pursue as a career or part-time job?

A1. If you are new to web design and anticipate making it your career (even on a part-time basis), we highly recommend and cannot stress enough the importance of learning basic HTML and external CSS first before ever purchasing an HTML editor. Relying on a WYSIWYG (what you see is what you get) HTML editor such as Frontpage or Dreamweaver without learning the code this software produces for you behind the scenes will put you at a high risk of not accomplishing your career goals. If you experience a problem, and you will, and do not know how to read and edit the source code, you will quickly get discouraged and frustrated. It is as equally important to learn basic CSS as it is basic HTML. Do not skip this step once you have experienced the magic of HTML. The magic of CSS makes your life as a web designer even better! We also stress the importance of utilizing “external” CSS in any web template you use to create your web pages. Why external and not internal? Although there are situations where you may want to use internal CSS, it is not an effective method for producing many web pages. The reason is internal CSS is coded within each page (just like cosmetic HTML properties such as fonts) and making changes would require you to edit each and every page. Using external CSS is the only professional and highly effective method to use in your web site’s design. You make changes in one file that effects every page linked to the external style sheet. We have seen web template designers boast endlessly about how they use or have used internal CSS and it makes us sincerely wonder just how much they actually know about web template design. Utilizing any template to design your site that uses only HTML or even internal CSS is a bad reflection on the original designer and end user (consumer) suffers the most when they decide to change their text from black to blue, as an example. Argh! Learn how to design your site right the first time by learning how to hand code HTML and CSS. You like so many others over the years will thank us for this valuable advice. Trust us.

Q2. How large will your site be initially and will it expand one, two, three years from now? If so, how will you design your site now to make room for the expansion and make it a smooth transition?

A2. If your website will only be a maximum of a few pages and you have no intention of expanding, redesigning or doing regular maintenance, this paragraph will not apply to your situation. However, for many folks who own an ecommerce site or provide information to their visitors, the preplanning of your site’s expansion is a critical step if you want to save yourself a lot of time and money. Who wouldn’t, right? Utilizing a template designed for a specific proprietary program (such as Frontpage and Dreamweaver) could cause issues later if you switch HTML editors. Or using a template with redundant HTML and redundant internal CSS code will be a maintenance nightmare for you.

Many folks start out using a version of Frontpage most likely because it is free software that comes packaged with MS Windows. Serious designers than venture to what is considered the professional design software (such as Homesite and Macromedia Studio MX – Dreamweaver – Flash – Fireworks) realm in the web design industry circle. For sites that are very large or will grow considerably, we highly recommend using a server side web programming language (SSI, PHP, ASP, CMS) that enables you to separate content (your page text) from design (HTML and CSS) and from repetitive page elements (navigational bars, ads, copyrights, news reels, etc.). It is important to note that HTML editors such as Frontpage and Dreamweaver contain features that enable you make sitewide changes with repetitive page elements. However, these changes are not done on the server side.

Q3. What is your financial budget for design software? Are you prepared to keep your software up-to-date?

A3. Obviously, if you have a small project you need to get online fast or do not have the finances available to dive right into a high-end program, Frontpage may be your best option. Be prepared though to purchase upgrade versions later down the road when technologies change. If you anticipate that you will be going into web design on a professional level or will be a webmaster for one or more large sites, your best initial options are to purchase high-rated software within the industry and HTML templates that utilize “external CSS”. Using HTML templates that utilize “external CSS” and which were designed correctly are a valuable investment because you can use them in any HTML editor you wish and they are sure to be useable for many years even when technology changes. They can easily be converted to extended forms of HTML such as XHTML. You should also learn (at least to an intermediate level) any programming languages you will be using (SSI, PHP, ASP, CMS). Start out slowly. Don’t expect to learn it all overnight. And don’t pay out hundreds of dollars on software to find out later you don’t need it all or that it will take you years to learn. Be prepared to keep up with the latest technology in whatever web programming language or software you choose.

Regardless of what HTML software you choose, this one bit of advice is applicable to all: “Thoroughly get to know and feel comfortable using your software of choice.” The more you understand any software package, the more effective and creative you will become. If you are not comfortable using it, because it just doesn’t “feel right”, move onto something else that does. Trust your instincts and what works for you. Everyone is different in the way they learn and work. If the way you learn and work makes you productive and creative, then it’s “right for you”.

The web is an ever changing platform of opportunity. It can also be a very frustrating, time consuming and financial expense if you do not plan ahead. Plan your site’s objectives and goals 2-4 years in advance. If your plans change or fail because of lack of funds, time, technology changes, new trends, or your competition, be sure you have a Plan B, C, D and E outlined if you need to switch gears. Making a plan is not something you have to consider a concrete path. But it does give you a better understanding of what you want to accomplish, where you are going when technology does the about-face that it WILL do, and you would be surprised at how quickly you can see loopholes of uncharted opportunities when you lay it all out on paper rather than leaving it in your head. 🙂

© Copyright 2003 by BasicTips.com, division of BasicTemplates.com

View all contributions by

Search Engine Veteran - Enterprise SEO & Small Business Entrepreneurs. Advisor to startups for pre-launch optimization SEO Audits & consulting.