Creating your website with a WYSIWYG editor

1 Comment » Written on November 7th, 2010 by
Categories: WYSIWYG

Once you have in mind what exactly you want to do, it’s time to see how we can put the website idea in practice. In this article we will discuss about a WYSIWYG (What You See Is What You get) editor, for easy creation of static websites.

The output of websites developed with the WYSIWYG editors are HTML files. Coding knowledge is not required. As WYSIWYG stands for “What You See Is What You Get”, these editors are simple to use. Basically you will be working in a user friendly environment similar to Word (MS) (very similar to Word actually, and we are sure you know how to use Word). It’s as simple as writing the text on a page and adding some graphic elements for beauty or in support of your content.


Personally I use the FrontPage (built under Microsoft Office 2003 suite). You can still grab it online, but you can also use Webawy that is similar with the old FrontPage, but free to use.

Once you have downloaded any of the above applications and installed on your computer you will see you have built-in templates to use, but they are simplistic and sometimes that might not be exactly what you expected. What I do is do a search on Google for "free web templates", "free HTML templates" or "free HTM CSS templates". Some great websites to visit and check for free templates are below:

Virtually you can find anything on the web: if you want to make a site about dogs you will find a template with this theme, or anything else you want. Download any of the web templates you wish to use from above web resources (or any other sites you will find on your search), and modify as you wish in your WYSIWYG editor.

Below are some screen shots with the process, make sure when you start modifying to make use of the ideas and website structure detailed in the How to start making a website.

The home page of any website must be named index (and the file format you use: .htm, .html, .php etc). The name of index is commonly used and tells the server that is the first page to show to users typing in your web domain address. If you do not have a file called index, users typing in www.YourWebsite.com will not see your website. All the other pages you can call them as you like.

- FrontPage layout (similar with Word as you can see, with all the same options on top to text and link editing, saving, drawing tools and more)

Once you have opened the web template in Frontpage, you may start editing the text, links, menu and page properties. We will not say anything about text editing, as this is a simple task (just add your content), so I will jump to editing links and the page properties.

- Adding a hyperlink (to text or image, simply select the object to hyperlink, click on the Hyperlink button and insert the link to direct when clicked)

As you can see in above image, you need to insert the web address where the text / image will direct when clicked (you can also click on any of the files like index.html and any other pages you have there if the link is inside your website).

- Page properties (edit page properties like title, description, keywords, page language). To do that right click on the page and hit Page Properties in the menu that popped-up.

From the above window you will see the minimalistic settings you need to do in Page Properties. Why is that important? Well the changes you make here will have a huge impact on your search engine optimization. The Title must be short, about the website or web page itself, the Description should be no more than 200 characters long (a short description of what the user will find on this page), while the Keywords are the main words that would cover the subject approached on the page, delimited by commas.

When you made all the changes you wanted to the page, Save it. You can built another page now using the similar template (just copy-paste the page you just worked on, and start making the new page on the copy, rename it and save it.. and so on).

One Response to “Creating your website with a WYSIWYG editor”


Leave a Reply

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image