WEBSITE DESIGN MANUAL
HOW TO DESIGN A WEBSITE
INTRODUCTION
Website Designing is the most tedious aspect of website development. It involves putting information about your website on the web hosting server. This information can be text, images, multimedia (video and audio) and so on. Designing of a website can be done in TWO DIFFERENT WAYS:
1. Writing the code yourself
2. Using software
WRITING THE CODE YOURSELF
This method takes more time than using the software. You need to be knowledgeable about the web design scripting. It is the belief of many people that writing code is very difficult but I can tell you that it is very easy and you will enjoy doing it. While software can design very attractive website for you in few minutes, there are some jobs you will get that will involve you getting into the Control Panel (CPanel) of your website to make some adjustment or customization, in this case you will need to understand the web design scripting especially HTML. As a starter, you can start designing using software to design websites for yourself and your clients but I advise you to start learning the web programming little by little because some jobs will come that will require a sound knowledge of web programming.
You can learn web programming online at your own time and pace. There are many free tutorials online but many are not comprehensive enough for your need. I recommend www.ittutors.net for you. Their fees are affordable and they provide live support.
USING SOFTWARE
Software can be used by a novice and an experienced web programmer to design website. As a novice you don’t need any previous knowledge to use it. The software can be desktop software (that is you will download the software and run it on your computer, design offline and upload it to your web hosting server through FTP, File Transfer Protocol) or online software. The one we shall be discussing here is online software which is provided by the hosting company. Not all hosting companies provide this on their servers but ours provide it.
STEPS IN USING THE ONLINE SOFTWARE
FIRST LOGIN TO YOUR HOSTING CPANEL
Once your CPanel finished loading, click on RVSiteBuilder (see the arrow pointer in the picture below)
Once you click, you will see a page like the one below:
Then you need to click on create website button as shown below:
After clicking on create website button, you will see a page like the one shown below:
Fill the form as follows:
Project Name: You can give it any name e.g. Dynamic Website
Website Language: Select English Language
Website Title: The name of the company you are build site for e.g. DYNAMIC WEALTH TRAINING
Company Name: Same as above that is DYNAMIC WEALTH TRAINING but you can format it. If you can use Microsoft Word, then you should be able to do the formatting
Slogan: The slogan of the company e.g. the best internet business trainer. This can be formatted as well. If there is no slogan, tick the small box beside the slogan.
Logo: Browse to upload logo. If there is no logo, tick the small box beside logo.
After filling the above form, you will have something like the ones shown below; click on save and continue to step 2 button
After clicking the “Save and continue to step 2 button”, you will see a page like the one below showing different template styles and template categories. Just click on the categories you want and select the template style of your choice.
In this tutorial I click on Hosting category on the left and the following page appears:
Under each template style, your will see a preview button and three boxes with three different colors. The preview button is to see the design in a bigger form while the color boxes are to change the color scheme of the design.
Assuming I like the first style/design, I select it by clicking on it and the following page appears:
I
If you look at this page, you will see the following:
1. EMBED CODE SIDE 1 Section: If you click on it, it will allow you to type text or insert images to the left hand side of the web page.
2. EMBED CODE SIDE 2 Section: If you click on it, it will allow you to type text or insert images to the right hand side of the web page.
3. EMBED CODE TOP Section: If you click on it, it will allow you to type text or insert images to the top of the web page.
4. Content Section: If you click this, it will allow you to put the main content of your web page.
5. EMBED CODE BOTTOM Section: If you click this, it will allow you to type text or insert image to the bottom of the web page. This section usually contains the copyright information.
Now let’s click on the Top Section to insert an image. Once you click, the following will appear:
|
Then click on the icon the arrow above pointed to insert an image. The image can be the one you have saved on your computer or from the image library of the website builder. Here, we are inserting image from the image library of the website builder. Once the image icon above is click, a new window will be opened and appear as follows:
|
Once you click on rvs_library icon above, the following will appear:
|
You can see from above that the image library shows series of image folders with the sizes of the images in each folder specified.
Let’s go for the folder with size 468 x 60 which means the widths of the images are 480pixels and the heights are 60pixels.
Click on the folder icon for 468 x 60, you will see the following:
Tick the image you like and click on the insert button by the bottom right. That is it, an image has been inserted. Remember, you can put text there instead of images. The choice is yours and you can still put both text and images at that top section.
Assuming we also want to add text to the top menu, just type you text in the text editor provided, format it to you satisfaction and click the save button by the top left corner. This is shown below:
|
You will see a notice that your configuration was successfully updated. Then close the pop-up through the red X button at the top right as shown below:
|
|
You can follow the same procedure to insert text/images to the left side section, right side section, and the bottom section. Any section with information will show lemon green color while anyone without information will show white color. Once you have edited the four sections; right, left, top and bottom, the builder will look as follows:
We shall discuss the content section later.
Now click on the save button by the top right to move to the next step. See below:
|
The next step is page structure, that is create the pages you want for your website. You can create as many pages as possible. You can select from the page suggestion on the left side or use the Add New Page button on the right to create your own. By default, the Home page has already been selected for you. Look at the picture below:
Assuming we want to select the About us menu on the left, you should click on it so that it is highlighted as shown above. Then click the move button to move it to your selection at the center. See below:
Assuming we want to create one more page to make it a 3 pages website and what we want is not among the selection on the left, then click Add New Page button on the right and you will see a page like the one shown below:
Type the page name you want in the box provided in the pop-up above and click the save button. See below:
Once you click save, you will see the following:
You can see that your selection at the center contains 3 pages: Home, About us and My Products. If you want to re-arrange, you will use the move up and move down button on the right. If you want to move the page “My Products” up, click on it to make it highlighted and click on the move up button, it will move it up above the “About us” page.
You can delete a page that you don’t want by selecting it from your selection at the center and click the delete button on the right.
You can rename a page by selecting the page and click the rename button on the right. Let’s assume we want to rename the page “My Products”, we should click on it to make it highlighted, click rename button on the right, you will see a page like the one below:
Change My Products to the new name you want and click save button. I change it to My New Products. See below:
You can use the menus the arrow pointed in the picture below to create some useful components to your site. Component like photo album, newsletter, FAQ, Contact form, guestbook, etc.
|
|
Next step is to put content to each page. See below:
You will click on the page one by one to add content. For each page, you will click “What You See Is What You Get” (WYSIWYG) menu to add content. The HTML menu can be used by someone that can write code. For now don’t go there since you cannot write code. See below
|
|
Now I want to put content to Home page. You will click the WYSIWYG menu beside the Home page and the following will appear in new window:
Just delete the images and text you see at the content section and replaced them with your own text and images. I have deleted them and put my own content see below: Just type your own content there and import your own image. You can even copy text and images and paste. See what we have after I have copy and paste below:
|
Once you are through with your content, click the save button to save your work as shown above.
After saving, click on the remaining pages one by one and add content to them as well and save them. Close the window and go back to the previous window. Click step 6 at the top right. See below:
|
At this step, you will customize each page you have created.
You will do the following:
1. Edit page title
2. Edit page name
3. Add meta tag
4. Add page effect (optional)
Page title is what people will see at the very top of your browser. If you look at the very top of your window now, you will see WEBSITE DESIGN, this is page title.
Page Name is the name of each web page. For instance the page where you introduce your company can be called “ABOUT US” or “COMPANY PROFILE”. It is the heading of each page and it may be bigger in size to differentiate it from other contents.
Meta Tags is adding description of your site and keywords describing your site to each page. This will enable search engines like Google to be able to detect your website. Without meta tags, search engines may not recognize your site.
Page effect is to entertain your viewers with some kinds of animation when they enter or exit your site.
Now let’s apply these four to our Home page.
Click the edit button that relates to the Home page.
See below:
|
You will see the following:
In the pop-up, you can rename the web page title. If you like the previous one as it is, click the save button or cancel. It will not make any changes but if you want a new page title, delete the previous one and type what you want there.
Now click meta tag menu and the left and you will see the following:
Enter keywords that relate to your site and also your site description. Once finished, click save button. See below.
You can edit the meta tags for each page separately if different keywords describe each page.
Now let’s go to the last step which is publishing the site. This means sending the website design and contents you have done to the web host server so that the entire world can start accessing your website.
Just click on step 7 button which is at the top right corner. See below:
|
|
Once you click the publish button, the following will appea
No comments:
Post a Comment