• Abstract and Figures
• Public Full-text

Lession 3 Designing simple website using KompoZer A website helps to presenting the business to the world. It helps in promoting the business, selling the products and attracting the large number of customers. The website is a collection of interlinked web pages for a specific purpose. The challenge however is in creating a website that is interactive, user friendly and providing accurate and useful information. Planning for the website: Developing a good website is a project similar to any other projects and requires detailed planning. Following are the important points which should be considered for developing a good website as part of planning process. Purpose: The purpose of the website should be clearly identified. Before creating a website, we should be clear with the definition and goal of the website. Audience: Before we start with the designing part, we should know the expected users of the website. The website should contain both general and detailed information. Another consideration is the speed of connection that the expected users will have. In case, large graphical file are kept on the website, they will take a long time to download. Content: The website must contain complete and relevant information. Also if the information provided is incomplete, the user can leave the website. The website content should be classified into general and detailed categories. Medium: More and more people are using internet through smart phones and tablets. The website design should scale for all the devices like computers, smart phones, and tablets. Creating a simple website using KompoZer: Let us create a Ecommerce website named “School Plaza”. On Our website, all the school related items like books, stationary, school bags, water bottle, Lunch box, files, folders and other such related item are available and can be easily ordered. We will also create a shopping cart which will show us all the products and the total amount Of the items that we have purchased. Homepage of Website Now if we want to select any item and give the Quantity of the item and then click the purchase button. It will open the new page Shopping cart. Let us learn to create our website step by step. To start With, we should first design the home page of our website. The homepage of our website should list all the categories Of the items that are available. to start with the designing of home page, Open KompoZer and create a new webpage. Now inserttable. Select a single cell. save the webpage with suitable title. The title will be displayed on the title bar. Save the file with the name “index.html”. Whenever the user type the URL of the website in the browser, say for example www.schoolplaza.com, he/she does not specify the file to be opened. but the web server needs a default file name in order to display some content. This default file is the page named index.html. Thus, when we type a URL without the filename, the server looks for the default file and displays it automatically. Now we will give the background color to the inserted table. Select the table and double click it. Alternatively, we can also right click the table and Select “Table Cell Properties”. This will open Table Property dialog box like.. you can see the two tabs ‘Table’ and ‘Cells’ This allows user to control several aspects of either the table or individual cells. The options seen in the table tag are: 1) Size 2) Borders and Spacing 3) Caption 4) Table Alignment 5) Background Color Now, to display the text “School Plaza” and the related image, we will insert another table with One row and two columns. Give a background color to the table. Now in the left cell we will insert the text and in the right cell the image. To insert image, select InsertImage. Specify the location of the image. Specify the alternate text in the input box otherwise select the “Don’t use alternate text” radio button in case you do not want to give alternate text. Giving alternate text will display the text in case the image is not displayed in the browser. Now we will insert another table with 2 rows and 2 columns to display the categories and New Products. In the first row cells, type the text “Categories” and “New Products”. Next in the second row just below the categories we will insert another table with single column and multiple rows. In This table, we will insert different categories in each row like school bag, water bottle and others. Here, we have inserted a horizontal line to differentiate the categories. To insert a horizontal line, go to inserthorizontal line. Insert the table depending on the item we want to display on the page. Here we have inserted the table with 3 rows and 3 columns. If we want to change the title of the web page, go to FormatPage title and Properties. Open the index.html. to create link, select the text (school bag), go to insertlink. Select the file to be opened. Press ok button. Now, us insert the details of the new products in the home page. In each cell of the table, we will insert an image of the item, name of the item, price and add to cart checkbox and quantity textbox. Add the product name and price. Now insert a checkbox by going to form field. We will add an HTML attribute”id” named c1 to the checkbox which will be used in JavaScript later on. We will add a button “purchase” at the bottom of the page which will take us to the bill details web page. This page displays the total items purchased and total amount. on the buttons onclick event we will add a JavaScript code. function oncart() { var check=false; var cookievalue=""; if(document.getElementById("c1").checked) { check=true; var qnt=document.getElementById("t1").value; var price=399; var total=(price*qnt); cookievalue+=":School Bag,"+price+","+qnt+","+total; } if(document.getElementById("c2").checked) { check=true; var qnt=document.getElementById("t2").value; var price=410; var total=(price*qnt); cookievalue+=":School Bag,"+price+","+qnt+","+total; } if(document.getElementById("c3").checked) { check=true; var qnt=document.getElementById("t3").value; var price=500; var total=(price*qnt); cookievalue+=":School Bag,"+price+","+qnt+","+total; } if(document.getElementById("c4").checked) { check=true; var qnt=document.getElementById("t4").value; var price=150; var total=(price*qnt); cookievalue+=":Water Bottle,"+price+","+qnt+","+total; } if(document.getElementById("c5").checked) { check=true; var qnt=document.getElementById("t5").value; var price=200; var total=(price*qnt); cookievalue+=":Water Bottle,"+price+","+qnt+","+total; } if(document.getElementById("c6").checked) { check=true; var qnt=document.getElementById("t6").value; var price=300; var total=(price*qnt); cookievalue+=":Water Bottle,"+price+","+qnt+","+total; } if(!check) { alert("No Item Selected"); } else { document.cookie=cookievalue; window.location="bill.html"; } } The first if statement block checks whether the checkbox for item1 is checked or not. Earlier we have given an id named “c1” to the checkbox of item 1. Using document.getElementById(“c1”).checked, we will check whether the user has checked the item. if it is checked then we will save the quantity into a variable and calculate the total price. We finally save the product name, price, quantity and amount as a string in a variable. If the user has not selected any of the items then pressing the purchase button will show a message with text ”no item is selected” . otherwise, the items are saved as cookie. A cookie is a variable that is stored on the user’s computer. When the user clicks on the purchase button, the script call the webpage “bill.html”. the JavaScript in bill.html will calculate the total of all the items selected along with the total amount to be paid . Here we have defined a function myfun(). The function is accepting data from cookie and storing it in an array. Then we are converting the data into number by using function parseFloat() and add it to total. Finally we print the values of the total. function myfun() { var cookiearr=new Array(); cookiearr=document.cookie.split(":"); document.write("<center><h1>Welcome To Billing</h1></center>"); document.write("<center><table border=3><thead><tr><th>Description</th><th>Price</th><th>Quantity</th><th>Total</th>< /tr></thead>"); var total2=0; var total3=0; for(var i=1;i<cookiearr.length;i++) { var cookiedata=cookiearr[i].split(","); document.write("<tr><td>"+cookiedata[0]+"</td><td>"+cookiedata[1]+"</td><td>"+cookieda ta[2]+"</td><td>"+cookiedata[3]+"</td><td>"); total2+=parseFloat(cookiedata[2]); total3+=parseFloat(cookiedata[3]); } document.write("<tr><td>Total</td><td>"+""+"</td><td>"+total2+"</td><td>"+total3+"</td> </tr>"); document.write("</table></center>"); } Publishing a website Now, let us see how to publish our website. To publish a website means to transfer the web page, images and stylesheet related to the site. This process is generally called ‘Uploading’. We can upload the website if we have an account on the web server. The Internet Service Provider (IPS) offers limited free space on the web server. We can also buy space from professional hosting providers. Site Name: name of the website. Open the index.html page and go to HTTP Address of your homepage: specify the FilePublish. This will open a publish page actual web address or URL of the website. dialog box. Publishing address: if connecting via FTP (File Transfer Protocol) then Type in FTP address. And give username and password. Now click the publish button. This will Open a dialog box. Select the site name from the dropdown box.

Load more

  6

Copy Link