How to build a website with no knowledge of HTML?
So you have this great idea for a website and you're all excited about getting your "feet wet" as an online entrepreneur, but there's one problem: You have no idea how to create a site. ("HTML? What's that?")
If this sounds familiar, have no fear --templates are here. (Sorry for the rhyme; I just couldn't help myself.)
Templates are prefabricated websites; complete with graphics and sometimes even a cascading style sheet attached. You download them, edit in your infor- mation and upload them to your server. Presto, instant website!
If you take some time and do a search around the Net you'll find some beautiful templates, some even free, that will have you looking like a true online professional before you can say "CSS or HTML."
Let's take a look at some options:
1) APlusTemplates: (http://APlusTemplates.com)
A professional template membership site where you pay a one time membership fee of 9.95 and gain access to over 200 Web templates and their "Flash Intro Builder." Browse templates by category; even download a free template to check out the quality. There's some real nice stuff here.
2)ATemplate.com: (http://ATemplate.com)
All Web templates come complete with CSS or image rollovers and PSD files. If you're looking for something a bit fancier, they also offer an assort- ment of Flash templates. All templates are compatible with Frontpage and Dreamweaver.
3) BasicTemplates: (http://BasicTemplates.com)
I really love this site. The templates are top quality and designed using external CSS. You can join as a member for a one time fee and access all of the templates or purchase them individually. Easy to browse by category.
4) WebTemplateWorld.com: (http://WebTemplateWorld.com)
With most templates starting at only 4.99 apiece, there are some real beauties here. You can browse templates by the type of HTML editor you use (i.e., Dreamweaver or Frontpage), or by category. There are also some "bundled" value packages if you'd like to buy in multiples.
5) TheTemplateStore: (http://TheTemplateStore.com)
This site offers a nice selection of templates searchable by the editor you plan on using, such as Dreamweaver or FrontPage. They also have templates for GoLive and even Swish. Most start at only 5.00 and they go up from there.
6) Template Monster: (http://TemplateMonster.com)
Although a bit on the higher end, the designers at Template Monster are a talented group. You'll find some real gems to download here. Each template comes complete with PSD files. Download the free site template to get a small sample of what you'll be purchasing.
Don't let your lack of design skills stop you from being the proud owner of the site you've always dreamed of. With the right template you can have a professional looking site and no one need know you didn't design it yourself. Shhhh, it'll be our little secret!
Frontpage Template, Dreamweaver Template and CSS/HTML Template 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. :)
How to create unique websites with web templates?
Web templates are raw materials that need to be refurnished/edited to be published online. Editing web-templates could include content insertion, graphic insertion/modification, inserting company logo, changing styles, changing links, changing flash images etc. Editing is quite easy but in case you feel otherwise you can always make use of template customization services that most template providers offer at affordable costs. Some template providers like (http://www.buytemplates.net) offer affordable customization services irrespective of where you actually purchased the template from. This article discusses the techniques that you can use to edit your web templates effectively to create unique looking websites.
Editing website templates effectively
For editing web templates all you would require is an html editor like Dreamweaver, Photoshop, FrontPage or Go-live. Most of these html editors are WYSIWYG (what you see is what you get) kind and have a user friendly interface. You can do two types of editing to your web-templates. One is content editing and the other is graphics editing.
1.) Editing the content of your web templates
The template provider would have supplied you with an index.html' file along with your template. This is the file that you would require for editing content of your templates. You can edit content using a text editor or an html editor software program.
Editing using text editors
Editing using text editors is the best possible way to edit your templates. This will ensure that your html coding remains clean and no unnecessary junk code is added. But of course you need to be some what conversant with Html to hand code your templates. Notepad is probably the most well-known of all text editors. Other than Notepad some other good and advanced text editors are editpad (editpadpro.com), NoteTab Light (notetab.com), and arachnophilia (arachnoid.com/arachnophilia/index.html).
Editing using Html editors
Making use of an html editor is probably the easiest way of editing templates and would be useful to those who are not conversant with html. Most html editors are user friendly and have an easy-to-use interface. Some well known html web template editors are Dreamweaver, FrontPage and Go-live. To edit content of the template, all that you would need to do is load the index.html file in an editor. After that you can simply cut and paste your content where the dummy content is provided and you are done. Adding content would also include changing links, adding content to tags and changing image sources if required.
Handy tips for content editing
1.) Make sure to change the title of all pages. The title can be a keyword or words that are most repeated in your content. It can also be a description of your webpage. For instance you can use Florida tourism' as the title for a webpage related to tourism in Florida.
2.) Change alt text of images and keep the alter text as a keyword. Search engines don't read images but they do ready the Alt texts. For instance you can use the tag Florida beach' for a Florida beach image.
3.) Make sure to add proper anchor text to all your links. Anchor texts are given special importance in search engines.
4.) Give proper headings to all your pages. Heading can contain specific keywords. Headings are given using h1, h2, h3 .. h6' tags. Text with-in heading tags are given more value by search bots.
5.) Be sure to check for spelling mistakes, grammatical errors, broken links and misspellings before loading the site
7.) Provide contact information.
2.) Editing images and graphics
Editing images would involve changing image colors, add/remove image layers, add/change text used in images etc. In order to make changes to the images used in the web template you would need to use the PSD file. Almost all template providers would supply you with a PSD file (although some may charge you extra for the file). PSD file is basically a layered file that is created using Adobe PhotoShop. This file is compatible with many graphic editing programs. Some good programs that can be used to edit PSD files are Jasc Paint Shop Pro 7, Ulead PhotoImpact 7 & 8, ImageReady and of course Photoshop. For more information on PSD files you can visit adobe.com.
In case you don't have access to any of the above mentioned software programs for editing the templates, you may request your web template provider to give you BMP files instead of PSD files. A BMP file is a high quality bitmap image file that can be edited using any image editing software program.
Handy tips
1.) Change the color of images to suite and enhance your text visibility
2.) If needed you can also replace images used in the templates to add your own professional images. (One good website from where you can get professional images is gettyimages.com')
3.) Editing the styles of a template
CSS style sheets are the ones that allow you to make changes to the style of the webpage like changing font color, line and paragraph spacing, font size, link color etc. Style sheets are useful as they allow you to make changes to many WebPages by altering one document. CSS can be edited using any Html editor or text editor. Although there are some specialized programs available that are meant specifically for editing CSS Stylesheets like TopStyle' (bradsoft.com).
There are many web template providers who offer internal style sheets or multiple font styles. It is difficult to edit internal style sheets and therefore is not recommended. Always make sure to go for template providers who offer you with external CSS Style Sheets.
Handy tips
1.) Make sure to use contrasting text and background colors
2.) Make sure to use same font type through out a webpage. Making use of different font types can make reading difficult. Arial and veranda are best suited for online reading.
3.) Never use justification for your text as it can make reading difficult.
4.) Provide a site map
Quality tutorials to help you with HTML
If you are not familiar with html/CSS and need some start up lessons then there are plenty of free resources available over the internet that will allow you to do just that. Some of the best ones are w3cschools.com' and webmonkey.com'. W3cschools offers the best tutorials for html where as webmonkey offers the best tutorial for CSS Style-sheets (just type Mulder's Stylesheets Tutorial' in a search engine like google or yahoo! to reach directly to the tutorial page). For getting knowledge about web usability you can refer to (http://www.usability.gov/guidelines)'. For researching keywords for your website content you can refer wordtracker.com or overtune.com.
|