Chapter 3

Designing Simple Website using

KompoZer

Std. XII 1
 Introduction
• A website plays a very important role in a business now a day.
• It helps to present the business to the world.
• It helps in promoting the business, selling the products and
attracting the large number of customers.
• The website should have good design techniques which will
enable the company to get the maximum amount of traffic,
therefore making the maximum amount of profit.
• 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.
Std. XII 2
 Planning for the website
• Developing a good website is a project similar
to any other projects and requires detailed
planning.
• The better the planning, the chances of
success in terms of usefulness of the website
is higher.

Std. XII 3
Planning for the website - Purpose
• Developing a good website is a project similar to
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.
• A properly designed website will be helpful to the
organization.
• Having decided the purpose, the content and
layout of the website can be properly developed.

Std. XII 4
 Planning for 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.
• It should also contain specific and non-specific data.
• 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.

Std. XII 5
Planning for the website - Content
• The website must contain complete and relevant
information. Also if the information provided is
incomplete, the user can leave the website.
• Placing appropriate and relevant content will
satisfy users and sustain their interest in the
• website.
• The website content should be classified into
general and detailed categories.

Std. XII 6
Planning for the website - Content

• The general content provides an overview of

the site, organization, products and services,
and other item.
• The detailed content provides users with the
detailed information on the site like product
and services description.
• The navigation in the website should also be
made as easy as possible.
Std. XII 7
Planning for the website - 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.
• Also the website should be designed keeping
in mind that it is well displayed in all the
popular web browsers like Mozilla Firefox,
Chrome, Opera or Internet Explorer.

Std. XII 8
 Designing Website using KompoZer

• To start with the designing of home page, Open KompoZer and

create a new webpage.
• Now inserttable. 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.

Std. XII 9
 Designing Website using KompoZer
• Apply 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

Std. XII 10
 Designing Website using KompoZer
• To insert image, select
InsertImage.
• 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.

Std. XII 11
 Designing Website using KompoZer
• To insert a horizontal line, go to inserthorizontal line.
• If we want to change the title of the web page, go to FormatPage title
and Properties.
• Open the index.html. to create link, select the text (school bag), go to
insertlink.
• Select the file to be opened. Press ok button.
• we are converting the data into number by using function parseFloat ().

Std. XII 12
 Publishing a 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.
• Open the index.html page and go to FilePublish. This will open a
publish page dialog box.
• Now click the publish button. This will Open a dialog box.
• Select the site name from the dropdown box.
• Enter page title.
• Provide the file name.
• If this web page needs to be a sub-directory of your site. Specify the
directory for image.
• Click Publish button.
Std. XII 13
Publishing a website

Std. XII 14
 Other Open Source Web Development
Tool

1) Aptana Studio:
• Aptana studio is a powerful open source IDE for building
web application.
• Aptana studio 2.0.5 (also known as Aptana studio 2) is
currently used to develop web applications using HTML,
CSS and JavaScript.
• It can be easily downloaded from its website
www.aptana.com.

Std. XII 15
 Other Open Source Web Development
Tool
2) BlueGriffon:
• BlueGriffon is another free open source WYSIWYG HTML editor.
• It can be easily downloaded from www.bluegriffon.org.
• IT support Language like English, Dutch, German, Chinese and
many more.
3) Amaya:
• Amaya is other free open source WYSIWYG web editor
developed by the world wide web (W3C).
• It was initially started as an HTML/CSS editor and has now grown
into an editor and has grown into an editor for many XML –based
system.
• it can be easily downloaded from www.w3.org/Amaya

Std. XII 16