Most of the people planning to start a website face the problem of designing it. Either they do not have skills and knowledge to design the page or they do not have money to hire a designer and design the page for them. In both cases, he is left with no choice and have to design his website on his own, which can be tedious and time consuming.
The solution to this may be opening a blog at Blogger or WordPress, but blogs are not the same as an ecommerce site and they are meant for a totally different audience. So if you are a beginner and want a simple website building tool, SiteSpinner can help. This application lets you create websites from scratch and without requiring any dirty hand coding.
Note: You will need a web hosting account to transfer the fies and pages in your website.
How to Create Web pages with SiteSpinner
1. Open the Sitespinner program and you will see the prompt to enter the serial number. Skip this step and hit on “Try it now” button to get started.
2. Once you are in the application interface, create a new project to build pages for your website from File > New project.
3. You will be shown the index page for editing. The index page in any website refers to the first page (home page) that is shown when the website loads. From the page menu button, you can create new pages for your website, set the page order, cut or copy pages etc.
Adding heading, subheadings in your page:
4. To add heading and subheadings, click the title editor button from the toolbox. You can then create headings and subsequent subheadings for your page. You can also align the headings, choose a custom font, size and color.
Adding formatted text and hyperlinks in your page:
5. To add formatted text, click the “Add formatted text” button from the toolbox. You will be shown a WYSIWYG editor where you can write text and enter hyperlinks.
Adding images in your page:
6. To add an image in your page, select the image button from the toolbox and browse to the image location stored in your computer. The image will be added in your page and then you can customize it, choose the width and height etc.
Adding Videos in your page:
7. Adding videos from video sharing sites is also easy. From the toolbox, click the code button and enter the embed code of the video in the code window.
Hit Enter and the video is added to your page. You can simply drag and drop to position the video where you want it to show in the page.
The video won’t appear in the design mode and is only available when you preview or publish the page as described later in the article.
Adding html or other codes in your page:
8. To add custom css classes or html codes, just hit the code button from the toolbox. A code window will appear and there you can enter the html code and css classes separately.
Let’s take a quick example to understand how it works. Let’s assume you want to add any html code and define a custom css class and styling. First create a custom css class and enter the html for that class in the body section of your page.
Now for the css part, enter a new code window and write the css code. Make sure you enter it in the header of the page you are editing.
Previewing your page in the browser:
9. You can preview how the page looks in different browsers e.g Firefox, Google Chrome and Internet explorer. Choose the desired browser and click the Preview button and the program opens a new browser tab or window which contains the preview of the page you have just designed in SiteSpinner.
Publishing pages in your website:
10. Now that you have designed your pages, it’s time to make them live. Click the Publish button and select the pages that you want to transfer to your web hosting account.
Next, go to the FTP tab and enter your FTP details. Hit Publish and the selected pages will be transferred to your web hosting account. You can now view your website and the pages in browser.
How easy was that? Even though it is not as powerful as Adobe Dreamweaver, Sitespinner is much more user friendly and novice users will find it very useful. Do let us know about your views and ideas in the comments section.