How To Build A Website Step By Step

Web Easy Professional 8 - Template Wizard - Website Built Within Minutes

In the next few sections I am going to show you how to use Avanquest Web Easy Professional 8 (WEP8) to build a website from scratch, using its Website Assistant (template wizard) and some of its editing tools/features.

In this first lesson I will show you how to use the website assistant, as opposed to building an empty template, so that you can have a ready-made website built within minutes. In the lesson after that I will show you how to modify the text, drag the text and change the font for example. These editing features are found in most, if not all, major website builders and therefore apply across the board.

Although I am using WEP8 these lessons apply equally to any website builder software that has similar tools/features, such as Serif WebPlus X4 or Back To The Beach Software Web Studio 5.

Once you have WEP8 installed (not shown here) begin by double clicking on its desktop icon to launch it. Doing so will bring up the Activity Centre window (Fig 1.1) which you should CLOSE, ideally, simply because the main menus of WEP8 offer more features and tools - The activity centre window is just to get you started/familiar with creating a new website, but all this does is bring you to the Website Assistant and other features/tools that you will end up using from the main menus anyway. So untick its SHOW AT STARTUP option (bottom-left corner) before clicking on its CLOSE button to continue.

Fig 1.0  Double click on the WEP8 desktop icon to launch WEP8




Fig 1.1  Untick the SHOW AT STARTUP option and then click on the CLOSE button to continue

After clicking on the CLOSE button, above, click on the WEBSITE button on the main window (Fig 1.2 below) to bring up the Website Assistant (Fig 1.3). Its first window displays a Welcome message only, so just click on the NEXT button to actually start building yourself a website template.

Fig 1.2  Click on the WEBSITE button to bring up the Website Assistant (Template Wizard)




Fig 1.3  The website assistant's Welcome message - Click on its NEXT button to continue

The next window to appear, after clicking on the above NEXT button, allows you to select one of the pre-created website templates. These pre-created website templates are split into five categories - BUSINESS, FAMILY AND PERSONAL, HOBBIES AND EVENTS, ORGANIZATIONS AND CLUBS and IPHONE AND MOBILE PHONE - that are accessed using the Template Style drop-down menu.

After selecting a category, or using the currently selected category, you can then go down the list of themed website templates (underneath the drop-down menu) that are associated with your currently selected category. In this example I have selected the ORGANIZATIONS AND CLUBS category and then clicked on (highlighted) the NEWSLETTER website template whereby a preview of the first page of that newsletter template appears in the Preview pane.

Fig 1.4  Select a Category and then a Website Template to preview its web page stylings (layouts)

The preview pane has FIRST PAGE, PREVIOUS PAGE, NEXT PAGE and LAST PAGE buttons on its right-hand side that allow you to preview the other page styles within that template. In this example the NEWSLETTER website template has two pages, so clicking on the NEXT PAGE button (above) displays a preview of page two (Fig 1.5).

Don't worry about the preview pane being too small because it is only meant as a rough preview of the template layout rather than a preview of the absolute (large) details. You will see the large template later.

Fig 1.5  A preview of the NEWSLETTER website template, page two.

Ideally, you should preview the pages of your highlighted website template simply because some of its pages may dramatically change in style (layout) and will therefore not be consistent. Saying this, you can always change the styling of a page later but for this example you want to get a website template that more or less fits your needs straight away - You will never get the perfect template though! All website templates need slight editing, regardless of which software package or online business they came from.

Clicking on the NEXT button (Fig 1.5 above) brings you to the folder destination area (below) whereby you can choose where you would like your templates kept. To keep things simple just leave this feature alone and click on its NEXT button to continue. Doing so will leave the destination folder set to your DOCUMENTS folder, and more precisely to the WEB EASY >> DOCUMENTS sub-sub-folder that resides within your DOCUMENTS folder.

This means that when you save the NEWSLETTER template as a document (.alb) file it will be saved inside the WEB EASY >> DOCUMENTS folder. When you save the NEWSLETTER template as a template (.tpl) file it will be saved inside the WEB EASY >> TEMPLATES folder. And when you save the NEWSLETTER template as a website (.html web page files) it will be saved inside the WEB EASY >> HTML folder. If you do not like this scenario you can always change the destination folder to a folder of your choice by clicking on the BROWSE (Select Folder) button.

Fig 1.6  BROWSE for a Destination folder, if need be, and then click on the NEXT button to continue

After clicking on the NEXT button (Fig 1.6 above) the next window to appear (below) asks you to select and insert one or more images into template via the preview pane. This is done by selecting an image on the left-side of the window and then adding it to the template preview pane on the right-side of the window via the ADD button in the center of the window.

You can search for your own images or use the WEP8 predefined template images by clicking on the BROWSE (Select Folder) button. This includes the ability to search for, and later insert, GIF Animation files.

Fig 1.7  Click on the BROWSE button to manually search for images




Fig 1.8  Select a folder and then click on the OK button to continue




Fig 1.9  Select an image and then click on the ADD button to insert it

In Figures 1.7 to 1.8 above I have used the BROWSE (Select Folder) button to select the FLOWERS folder. After clicking on the OK button a preview of the first image within that folder is automatically selected and previewed - flower.jpg (Fig 1.9 above).

If I want to use that selected image all I need to do is click on the ADD button, which I did (Fig 1.9 above), to have it inserted into the currently selected image slot (Image Slot 1 in the preview pane).

Fig 1.10  The first image has been inserted into image slot 1 of the template

To add another image you simply go down the Images list, which automatically selects the currently highlighted image for you, and then click on the ADD button again. In this case that selected image would automatically be inserted into image slot 2 of the template.

If I wanted to insert that image into another image slot, either on the current page or on a different page, I would do so by clicking on its image slot first and then click on the ADD button.

In Fig 1.10 above I have selected a different image from the Images list (O_C_fo03bu.jpg), clicked on image slot 3 of the template and then clicked on the ADD button. From there I have selected image p10213.jpg, clicked on image slot 2 and am just about to click on the ADD button. Doing so will make the template jump to the next page, page 2 in this case (not shown here).

When you have inserted all of your images, which you can change later if need be, click on the NEXT button to continue. You will then be asked to type in your Title (i.e. Website Name) and Headline (i.e. Slogan).

Fig 1.11  Type in your Title (enter name 1) and Headline (enter name 2)

In this example I have typed in Flowers & Green Fingers as the title and Monthly Newsletter as the headline (slogan/tag-line), which can be seen by clicking on their respective Enter Name options once you have changed their text entries. In other templates these text options might state Enter Name, Enter Address and so on depending on the actual template.

When you have entered your text for each entry, which can be changed later, click on the NEXT button to complete the website assistant process.

Fig 1.12  Click on the FINISH button to complete the website assistant process

Before clicking on the FINISH button make sure the PREVIEW WEBSITE NOW and ADD RSS TO YOUR WEBSITE options are unticked. These options can be applied later if need be. Clicking on the FINISH button takes you to the main WEP8 window where you can edit the template further (explained in the next lessons).

Fig 1.13  Click on the PREVIEW drop-down menu and select your preferred Web Browser

After editing your template further (explained in the next lessons) you can use the PREVIEW drop-down menu to select the Web Browser used for previewing your templated website. You can even preview its code using a preferred text/html editor.

If you want to save the template, for later editing or to pass onto a website designer as a rough layout, as a template (.tpl) file or document (.alb) file click on the FILE menu and hover over the SAVE AS sub-menu menu-item. This will make its menu-items appear whereby you can select either TEMPLATE or DOCUMENT to bring up the appropriate instructions and SAVE AS file requester (not shown here).

Fig 1.14  Click on the FILE menu, SAVE AS sub-menu and then select the TEMPLATE menu-item

As said above, the editing of this NEWSLETTER template will be taken further in the next few lessons (next few sections) so do not worry too much about text editing, inserting images, dragging objects around and so on here. What I wanted to show you here is the template wizard (website assistant) and its ability to create a basic website for you, even if that website needs further editing by you or a website designer.

In the next section I will show you how to insert text, editing existing text and drag text around the template amongst other things.