Web site Creation made Simple, Web Design Templates, Web Design Graphics, How to Construct a Web Site

Open Source Web Design OSWB for short is another great Open Source Project. The site has no less that 2080 Templates which can be downloaded for free. The Templates can be opened in most Web Editing Software packages and then simply add your own content.

These templates are of a very high professional standard and to be honest are far superior to the templates available on a great deal of Web Editing programs that you pay for. The amount of design time you can save is using these templates is staggering and unless you are a very compitent Web Artist you probably won't be able to create such quality designs on your own.

Even if you are a Web Designer you would do well to have a look at these Templates, they represent an excellent diverse range of styles and subject matter which will give you great ideas and approaches to Web Design.

I Recommend Komposer as a Free Open Source Web editor, it is simple to use, has good help files and best of all its free. I opened up some of the free templates from OSWB and had no problem adding content and editing the files. You will still need to understand the basics of Web Design, such as creating Directories and the basic format of Web Page menu navigation, but for anyone with a bit of knowledge the combination of OSWB and Komposer is awesome.

Komposer is also Cross Platform and available for Windows, Mac and Linux systems. The details of how to access the OSWB site and download Komposer are available HERE along with other great free Graphic Design and Web resources.

Constructing a Web Site:

Working Out The Structure:

Before you begin designing a Web Site you need to have the 'Structure' of the Entire Site worked out first. It's worthwhile grabbing a note pad and drawing a diagram. Start with the Home page (called the index page) Work out what text will go on this page and what Images. From this page you will navigate to all the other pages on your site. You may have a simple site that has a Home Page, a Contact Us Page, and a Products or 'Main Content' page. However your Products Page may have Sub Categories leading to othe pages. Draw a flow diagram showing how each page will link to another. This is important because you will need to make 'Menus' on each page that allow a visitor to Navigate throughout the Whole Site.

Creating Folders:

Next it is a really good idea to make folders on your computer where you can place the final Web Site material. Start with a main Folder with the name of your Web Site eg. VintageCaps. Inside this folder you then create a Folder called HTML and another called Images. I then open up a simple text editor like Note Pad and create blank pages for each of the pages on the Web Site. You leave the page blank and Choose Save As and save the files in the following way: The main home page should be called index.html (just type in the .html extension and click save.) Save the file in the main folder eg. VintageCaps. Create the other pages like ContactUs.html and save them in the HTML folder. Important: If you are using one of the Templates from OSWB you can copy all the contents from their folder into your folder. They have a file called Index.html  let it overwrite your file.

The reason why we have all the pages already on your site before you even start a Web Editor is this: When you do begin Editing and start with your Home Page (index) you will create a menu to the rest of your site. Having Blank pages already there allows you to Point and Click to the pages to add hyperlinks. If you use a template you then have an page with a working menu, a format, Images, headers etc. You can then choose Save As and rename the page to overwrite the blank pages. Each page will then have a header design, format and a working menu. It saves you constructing each page from scratch. You can then edit and change the content of each page separately.

Preparing the Contents:

Next it is a good idea to prepare the Images that you plan to use on your Web Site. Make sure they are either 72dpi or 96dpi but no higher. Re- Scale the Images to fit the size of the area you intend to place them on the Web Site. For example the Images on this page are roughly 250pixels x 250 pixels at 72dpi. When you have done this save the file to the Images folder. If you want to know more about this read my Hub Article on Bitmaps.If you want a great program that will prepare a lot of Images in one go read another one of my Hub articles.

Don't forget to read my Hubs on Meta Tag writing and Creating Web Headers.

Cheers and may the Graphics be with You.