Website

WEBSITE DESIGN AND
IMPLEMENTATION
Project work submitted in partial fulfillment of the
Requirements for the award of the degree of
BACHELOR OF SCIENCE
(Visual Communication)
V.MANICKASUNDARAM
Enrolment no: 1711000212
Project Guide
R.PRASANAVENKATESAN, M.C.A., M.Phil
2012 - 2013
ANNAMALAI
UNIVERSITY
DIRECTORATE OF DISTANCE EDUCATION
ANNAMALAI
UNIVERSITY
Directorate of Distance Education

BONAFIDE CERTIFICATE
Name of the Student
: V.MANICKASUNDARAM
Enrolment No
: 1711000212
Registration No
Title
: WEBSITE DESIGN AND IMPLEMENTATION
This is to certify that the project work entitled WEBSITE DESIGN AND
IMPLEMENTATION is a bonafide work done by V.MANICKASUNDARAM
REGNO:.. in partial fulfillment of the requirements for
the BACHELOR OF SCIENCE (Visual Communication) year 2012-2013 is the
original work of the candidate.
GUIDE
Internal Examiner
Place :
Date :
External Examiner
ACKNOWLEDGEMENT
ACKNOWLEDGEMENT
I would like to add a few heartfelt words for the people who were a part of my
work in numerous wayspeople who gave unending support right from the stage the
project was commenced. Without these people this exploration could never have
materialized and I am very much elated to express my thanks to all those who extended
their helping hands in making my project a reality.
I take the privilege to acknowledge my sincere thanks to The Director, DDE

ANNAMALAI UNIVERSITY to do this project.
I express my genuine thanks to our center coordinator and my guide for

providing necessary facilities to carry out this project successfully and also I thank Mr.
Mr. R.PRASANNA VENKATESAN, M.C.A,. M.Phil., Faculty of Annamalai
University Computer training Center for his valuable guidance for doing this project.
I heart fully thanks to all my staff members for their kind help and co-operation. I also
thank all non-teaching staff members for their timely help.
Finally I thank all our classmates, friends and others who have helped us in
completing this project successfully.
SYNOPSIS
SYNOPSIS
Website is the one of the powerful and attractive media. Now a days most of the
people use Internet to gain informations and knowledge. Through Internet we get all
details, which we require. So we decided to provide a huge amount of data through
Internet. We have selected to provide all the necessary datas about our college in the
internet.
The project entitled WEBSITE DESIGN & IMPLEMENTATION this project
explains about the Mind Track Training academy, Erode in a grand manner. It gives about
the company details and their services provides to various institution and other companies
and corporate sectors.
Here, it explains what the company information and what they are giving, their
clients and about their services to society. Using our project any one can collect any
information in just a few seconds.
We have used HTML, FLASH, Photoshop and XML software to create an
attractive website and make the access much faster.
The Website Information regards like
About Us
News
Services
Solutions
Partners
Contacts
CONTENTS
1. INTRODUCTION
2. OBJECTIVES
3. SYSTEM REQUIREMENT
4. SOFTWARE SPECIFICATION
DREAMWEAVER
ADOBE FLASH
HTML
PHOTOSHOP CS2
5. BROWSING THE WEBSITE

WORLD WIDE WEB
HOW THE WWW DOES WORKS?
6. SYSTEM DESIGN
7. INPUT DESIGN
8. SOURCE CODE
9. SCREEN SHOTS
10. CONCLUSION
11. BIBLOGRAPHY
INTRODUCTION
INTRODUCTION
A website is a collection of Web pages, images, videos and other digital assets
that is hosted on one or several Web server, usually accessible via Internet.
The pages of websites can usually be accessed from a common root URL called
the homepage, and usually reside on the same physical server. The URLs of the pages
organize them into a hierarchy, although the hyperlinks between them control how the
reader perceives the overall structure and how the traffic flows between the different
parts of the sites.
A website requires attractive design and proper arrangement of links and

images, which enables a browser to easily interpret and access the properties of the site.
Hence it provides the browser with adequate information and functionality about the
organization, community, network etc.
Today's teenagers are being socialised into a society complicated by shifts in the
public and private. New social technologies have altered the underlying architecture of
social interaction and information distribution. They are embracing this change, albeit
often with the clumsy candour of an elephant in a china shop. Meanwhile, most adults are
panicking. They do not understand the shifts that are taking place and, regardless, they
don't like what theyre seeing.
This leaves educators in a peculiar bind. More conservative educators view social
technologies as a product of the devil, bound to do nothing but corrupt and destroy
today's youth. Utterly confused, the vast majority of educators are playing ostrich,
burying their heads in the sand and hoping that the moral panics and chaos that surround
the social technologies will just disappear. Slowly, a third group of educators are
emerging - those who believe that it is essential to understand and embrace the new social
technologies so as to guide youth through the murky waters that they present. This path is
tricky because it requires educators to let go of their pre-existing assumptions about how
the world works. Furthermore, as youth are far more adept at navigating the technologies
through which these changes are taking place, educators must learn from their students in
order to help them work through the challenges that they face.
OBJECTIVES
It gives about the company details and their services provides to various
institution and other companies and corporate sectors.
Here, it explains what the company information and what they are giving, their
clients and about their services to society. Using our project any one can collect any
information in just a few seconds.
SYSTEM REQUIREMENT
3. SYSTEM REQUIREMENTS
HARDWARE SPECIFICATION
Processor
Pentium Dual Core
RAM
1 GB
Keyboard
Multimedia Keyboard
Mouse
Optical Mouse
Drive
CD Writer & pen drive
Monitor
17-color monitor
Hard Disk
160 GB
Modem
256 mbps
Internet Connection
SOFTWARE SPECIFICATION
OP/S
Windows XP
Designing Software
Dreamweaver
Macromedia Flash MX
HTML
Photoshop CS2
SOFTWARE SPECIFICATION
4. SOFTWARE SPECIFICATION
ADOBE DREAMWEAVER
Adobe Dreamweaver is a proprietary web development application developed
by Adobe Systems. Dreamweaver was originally developed by Macromedia in 1997 and

was maintained by them until Macromedia was acquired by Adobe Systems in 2005.
Adobe Dreamweaver is available for both Mac and Windows operating systems.
Following Adobe's acquisition of the Macromedia product suite, releases of
Dreamweaver subsequent to version 8.0 have been more compliant with W3C standards.
Recent versions have improved support for Web technologies such as CSS, JavaScript,
and
various server-side
scripting languages and frameworks including ASP (ASP
JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB), ColdFusion, Scriptlet, and PHP
Features
Adobe Dreamweaver is a web design and development application that provides a
visual WYSIWYG editor (colloquially referred to as the Design view) and a code editor
with standard features such as syntax highlighting, code completion, and code collapsing
as well as more sophisticated features such as real-time syntax checking and code
introspection for generating code hints to assist the user in writing code. [4] The Design
view facilitates rapid layout design and code generation as it allows users to quickly
create and manipulate the layout of HTML elements. Dreamweaver features an integrated
browser for previewing developed webpages in the program's own preview pane in
addition to allowing content to be open in locally installed web browsers. It provides
transfer and synchronization features, the ability to find and replace lines of text or code
by search terms or regular expressions across the entire site, and a templating feature that
allows single-source update of shared code and layout across entire sites without serverside includes or scripting. The behaviors panel also enables use of basic JavaScript
without any coding knowledge, and integration with Adobe's Spry Ajax framework offers
easy access to dynamically-generated content and interfaces.
Dreamweaver can use third-party "Extensions" to extend core functionality of the
application, which any web developer can write (largely in HTML and JavaScript).
Dreamweaver is supported by a large community of extension developers who make
extensions available (both commercial and free) for most web development tasks from
simple rollover effects to full-featured shopping carts.
Dreamweaver, like other HTML editors, edits files locally then uploads them to
the remote web server using FTP, SFTP, or WebDAV. Dreamweaver CS4 now supports
the Subversion (SVN)version control system.
A Dreamweaver user will definitely reckon what a powerhouse it is. Packed with
tonnes of features, options and debatably one among the most well known IDE
(Integrated Development Environment) in todays market. It may not meet the criteria
that some developers demanded however, Dreamweaver undeniably provides a decent
range of development, collaborating and coding tools. These options and tools are hidden
under layers of regrettable less intuitive menus, which is why we are providing tutorials
in todays post.
Dreamweaver comes with an intelligent and complete HTML and CSS code
completion, but what about Javascripts? If you code jQuery or Prototype in
Dreamweaver, then you should know there are API extensions that provide Javascript
code completion. It reduces the typing needed and can come in pretty handy for fast
coders.
ADOBE FLASH
Adobe Flash is a multimedia and software platform used for authoring of Vector
graphics, animation, games and Rich Internet Applications (RIAs) which can be viewed,
played
and
executed
in Adobe
Flash
Player.
Flash
is
frequently
used
to
add streamed video or audio players, advertisement and interactive multimedia content
to web pages, although usage of Flash on websites is declining.
Flash manipulates vector and raster graphics to provide animation of text,
drawings, and still images. It allows bidirectional streaming of audio and video, and it can
capture user input via mouse, keyboard, microphone and camera. Flash applications and
animations
can
be
programmed
using
the object-oriented
language called ActionScript. Adobe Flash Professional is the most popular and user-
friendly authoring tool for creating the Flash content, which also allows automation via
the JavaScript Flash language (JSFL).
Adobe Flash Player makes the Flash content accessible on various computer
systems and devices and is available free of charge for common web browsers (as a plugin) under a few of the major operating systems, some smart phones and tablets, and a few
other electronic devices using Flash Lite.
Flash originated with the application Smart Sketch, developed by Jonathan Gay. It
was published by FutureWave Software, which was founded by Charlie Jackson, Jonathan
Gay and Michelle Welsh. Smart Sketch was a drawing application for pen computers
running the PenPoint OS. When PenPoint failed in the marketplace, SmartSketch was
ported to Microsoft Windows and Mac OS. As the Internet became more popular,
FutureWave added cell animation editing to the vector drawing capabilities of
SmartSketch and released FutureSplash Animator on multiple platforms.[4] FutureWave
approached Adobe Systems with an offer to sell them FutureSplash in 1995, but Adobe
turned them down at that time. FutureSplash was used by Microsoft in its early work with
the Internet (MSN), and also by Disney Online for their subscription-based service,
Disney's Daily Blast. In 1996, FutureSplash was acquired by Macromedia and released
as Flash, contracting "Future" and "Splash". Flash is currently developed and distributed
by Adobe Systems, as the result of their 2005 purchase of Macromedia.
The first version of Flash, called FutureSplash Animator, was created by Jon Gay
and Charlie Jackson, co-founders of FutureWave software. It was the animation extension
of FutureWaves SmartSketch, a vector drawing application. The first version of
FutureSplash Animator was shipped in 1996 and a mere 7 months later, Macromedia
bought FutureWave and renamed FutureSplash to simply Flash.
Flash 2 wasnt marked by many new features, but it was the version that a lot of
old-school Flash users (including myself) started with. The main addition was the library
feature, which allowed users to store, organize, and export their various assets. Flash 2
was already capable of button rollovers, sound effects, and type, so it quickly became the
avant-garde tool for illustrators, animators, and nascent web motion graphic artists.
Flash 3 came out a year after Flash 2, and brought with it a host of new features.
Movieclips were introduced, transparency was added, and the projector format made
standalone executables a viable format for Flash animators. Actions made their debut and
Flash movies inched ever closer to the incredible interactivity seen today.
By the time version 4 came out, Flash was the de facto standard for animation on
the web. The fourth version pushed the application into even more advanced territory. The
tools were changed, as were their icons. The interface now allowed for users to move
between scenes and objects. The new Inspector panels, similar to todays Info and
Transform panels, made control over objects and animation more precise. The Library
was redesigned, with folders added, and editing in place now available.
Flash 4 could arguably be called the breakout version of the software, since
motion tweening now took center stage, instead of being hidden in cumbersome menus in
the past versions. Layer control, such as visibility, locking, and outlining became an
integral part of the interface. Flash also started supporting the MP3 sound format, making
music players and unwanted soundtracks a routine part of the internet.
Editable text fields were included, as was the Get URL action (with POST and
GET variables!). Load Variables and Load Movie were also introduced, creating a
fantastic array of possibilities. Flash experiments became very popular as users leveraged
the new powerful features to create amazing new applications and demos.
Flash 5 ditched the old 90s look of the application and roared into the new
millennium with a host of new features. The Info and Transform palettes finally came into
their own, as did a few other newly-floating ex-Inspectors. The shared library made
collaboration across several movies trivial. The most important feature of the new release,
however, was the introduction of ActionScript. Previously, users built up actions using a
dropdown menu. Freedom (and syntax errors) reigned as now users could script anything
they wanted. Flash experiments became even more numerous and Flash games took off.
Flash MX was the starting point of a long descent into increasing complexity.
Flash became integrated into the MX suite, Creative Suites precursor, and it finally made
a distinction between designer and developer in the application. UI components were
introduced, as was XML. The Free Transform tool was added along with layer folders.
The most defining feature of this release was the introduction of video support. Streaming
video became commonplace and laid the groundwork for YouTube.
More components, ActionScript 2, and Unicode support. Flash MX 2004 marked

the emergence of enterprise Flash, moving the software further away from its humble
origins and towards being the dominant RIA platform.
Flash 8 introduced filters and blending modes to simplify special effects for
animation. Object drawing was also introduces so Flash would behave more like
Illustrator, reducing the learning curve required for its idiosyncratic approach to drawing.
End cap control was introduced along with stroke hinting, ensuring the best appearance of
straight lines so far in the programs lineage. The addition of custom easing curves
allowed animators to fine-tune the speed of tweens. The Sorensen codec used for video in
the past versions was replaced by the On2 VP6 codec and, coincidentally, YouTube went
live just three months later.
Newly integrated into the Adobe Creative Suite, Flash CS3 revamped the
interface, added better handling of videos, and made skinning components easier. CS3
also introduced motion export which allows users to animate an object and apply the
same animation to an entirely different object. The release was marked by comprehensive
integration with the rest of the Creative Suite, particularly Photoshop and Flex, and the
introduction of ActionScript 3.0.
CS4 added inverse kinematics, another interface overhaul, the Motion Editor,
which allowed for granular control over animation properties (similar to a dope sheet in
3D programs), and basic 3D support.
Flash CS5 improved the code editor, the inverse kinematics, added code snippets,
and introduced new XML-based file formats, .XFL and .FXG, to simplify source
management and reduce the errors associated with the old binary-based file format. CS5
furthered suite integration along by including Flash Catalyst, a new tool designed to make
exporting assets from other Creative Suite applications to Flash easy and painless.
Flash has had an illustrious history, starting as a simple vector package and ending up
as a complex, extremely capable, and versatile platform. For some, its transition from
pure animation to RIA and games has been overwhelming, but the possibilities Flash
allowed countless artists, animators, developers, and designers to explore have more than
made up for the complexity along the way. The future of Flash as an animation tool looks
uncertain, as SVG, JavaScript, and CSS3 inch ever closer to replacing the need for a
special vector animation package. However, its one of the best choices today for RIA and
game development and looks to remain that way for years to come.
HTML (Hyper Text Markup Language)

HTML is a system of codes made up of tags and attributes that serve to identity
parts and characteristics of active documents, where tags provide document structure and
attributes provide additional information within the tags. Hyper Technology refers to the
randomly accessing process of any topic or document, especially while reading and
finding in World Wide Web.
Hyper Text is a term originated by Vane ever Bush in the late 1940s, which
implements merging the network and hypertext to provide linked information from a
distributed set of computers. In 1980, P Tim Berners-Lee developed the initial program
that allowed pages to links to one another. This development later on moved realm of
text-only hypertext browsers and this is the origin of World Wide Web. In 1992 CERN
(Central European purls Recharge Nuclear-a) physics Laboratory ado the system and
software available to the rest of the world through the interest. From this time only, Web
was extended to other academic research centers and universities throughout the world.
HTML is easy to understand. Web page development using HTML is very easy.
HTML is a system of codes made up of tags attributes that serve to identify parts and a
characteristic of active documents, where tags provide document structure and attributes
provides additional information within the tags. Hyper Text technology refers to the
randomly accessing process of any topics of document, especially while reading and
finding in the World Wide Web.
To publish information for global distribution, one needs a universally understood
language, a kind of publishing mother tongue that all computers may potentially
understand. The publishing language used by the World Wide Web is HTML (from Hyper
Text Markup Language).
HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in
searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in
their documents.
HTML was originally developed by Tim Berners-Lee while at CERN, and
popularized by the Mosaic browser developed at NCSA. During the course of the 1990s it
has blossomed with the explosive growth of the Web. During this time, HTML has been
extended in a number of ways. The Web depends on Web page authors and vendors
sharing the same conventions for HTML. This has motivated joint work on specifications
for HTML.
It is a platform independent language that can be used on any platform such as
Windows, Linux, Macintosh, and so on. To display a document in web it is essential to
mark-up the different elements (headings, paragraphs, tables, and so on) of the document
with the HTML tags. To view a mark-up document, user has to open the document in a
browser. A browser understands and interpret the HTML tags, identifies the structure of
the document (which part are which) and makes decision about presentation (how the
parts look) of the document.
GETTING STARTED :
HTML (Hyper Text Markup Language) documents are written in plain text
(ASCII) with special markup codes embedded right in the text. This means HTML files
contain nothing but printable characters and HTML markup codes. This is unlike a word
file which can contain special characters for formatting functios.
What distinguishes an HTML file from any other plain text file is the presence
of markup codes. Markup codes are typed into document and control the formatting and
layout of our finished document. The markup codes that are typed into a document are
enclosed within these angle brackets: < >. The angle brackets and the markup codes
together constitue a tag. When we are talking about an HTML document we refer to it as
a source document. Here is an example of the source of a simple HTML document:
<HTML>
<HEAD>
<TITLE> Simple HTML document </TITLE>

</HEAD>
<BODY>
This is very simple html document.
</BODY>
</HTML>
CREATING A SIMPLE HTML DOCUMENT :
The essential tags that are required to create a HTML document are:
<HTML>.............</HTML>
<HEAD>.............</HEAD>
<BODY>.............</BODY>
HTML Tag <HTML>
The <HTML> tag encloses all other HTML tags and associated text within your
document. It is an optional tag. We can create an HTML document that omits these tags,
and our browser can still read it and display it. But it is always a good form to include the
start and stop tags.
The format is:
<HTML>
Your Title and Document (contains text with HTML tags) goes here
</HTML>
Most HTML tags have two parts, an opening tag and closing tag. The closing tag is the
same as the opening tag, except for the slash mark e.g </HTML>. The slash mark is
always used in closing tags.
An HTML document has two distinct parts HEAD and BODY.
The Format is:
<HTML>
<HEAD>
.............
.............
.............
</HEAD>
<BODY>
.............
.............
.............
</BODY>
</HTML>
HEAD Tag <HEAD>
HEAD tag comes after the HTML start tag. It contains TITLE tag to give the document a
title that displays on the browsers title bar at the top.
The Format is:
<HEAD>
<TITLE>
Your title goes here
</TITLE>
</HEAD>
BODY Tag <BODY>
The BODY tag contains all the text and graphics of the document with all the HTML tags
that are used for control and formatting of the page.
The Format is:
<BODY>
Your Document goes here
</BODY>
An HTML document, web page can be created using a text editor, Notepad or WordPad.
All the HTML documents should have the extension .htm or .html. It require a web
browser like Internet Explorer or Netscape Navigator/Communicator to view the
document.
Example: It is my first web page
Follow the steps to create and view in browser:
Step-1: Open text editor Notepad
Step-2: Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>
Step-3: Save the file as myfirstpage.html
Step-4: Viewing document in web browser
PHOTOSHOP CS2
In Adobe Photoshop CS, the File Browser comes into its own as your digital
imaging hub. With flags, keywords, and editable metadata, you can now use the
File Browser to quickly organize and locate the image assets you need. Perform
batch procedures on groups of images without having to first open the image files
in Photoshop.
Create, edit, and save multiple keyboard shortcut sets for menu items, tools,
and palette commands, so the functions that you use most are always at your
fingertips.
Use the File Browser to quickly search for files using editable metadata,
without having to open each file. Fully customize your image metadata with
custom panels and fields in the File Info dialog, and use the File Browser to edit
the metadata of one or many images at a time.
Easily bind multiple files into a single, multi-page Adobe PDF document,
complete with optional page transitions and security.
Use professionally-designed Web Photo Gallery templates, including
support for client feedback with no extra Web coding required.
Save your editing history in a external log file and in metadata attached to
individual files.
The new Filter Gallery brings Photoshop CS filters into a single, easy-touse dialog. Now you can access, control, and apply multiple filters at once, with a
new, larger preview for easier planning of stacked filter effects.
Save time by automating repeated tasks, such as outputting your layers to

files or saving Layer Comps as separate pages of an Adobe PDF file, using custom
or new built-in scripts. See the documentation available in your Photoshop
CS/Scripting Guide folder.
BROWSING THE WEBSITE
5. BROWSING THE WEBSITE

WORLD WIDE WEB
The World Wide Web (WWW) has been the most talked about and the most users
friendly of all Internet applications. In a very short span of time, since was first started, it
now stretches across it. We shall now study more about this web.
The WWW could be very simply defined as a universal database of knowledge

Information that is easily accessible to people around the world and links easily to other
pieces of information. This allows any user to quickly find the thanks most important to
themselves.
It is an Internet resource where one can get information about different topics such
as the latest trends of programming languages or the first aircraft designed by engineers at
Boeing or grow strawberries in your 10th floor apartment, the list of endless. Above all,
this information is available in a very attractive format.
All the information of WWW is presented in the form pages. These pages are like
the pages of a book, with one difference, one page can take you to another totally
different page. For e.g., suppose you could use your mouse to click on a word on this
page, if this was a web pages, this mouse click should show you a completely a different
page, new page. Then from that page, you would have the option of coming back this
page or click on another word on that page to go somewhere else. This complex web of
transactions that get created that give web is name. This connected text called Hypertext
and the page on which it is contained is called a Web page.
These web pages are files, similar to those created on a word processor. The
difference is those word processors files have an extension like DOC or TXT where as
that web document have a HTML extension. These web documents are stored on
computer connected to a network. Many such networks join together to form the Internet.
Therefore, when we need to read such document stored on a networked computer, we
need to access that computer through the network. Simply put, this is how the Internet
works.
How the WWW does works?
Let us use this simple day-to-day example to understand how the WWW works.
We have all born to a restaurant, may be because we are really hungry or may be just with
friends. When we go to a restaurant, we sit down and we look at the menu card, and then
tell a waiter to bring the item we want. The waiter, him self does not cook. Instead, he
goes to the kitchen, tells the cook to prepare our item, and then brings it to us, ones it is
cooked.
In the same way, we look at some hypertext in our web documents, select it use it
using a mouse and instruct the browser software to fetch the selected page. The browser
software then goes to the address contained in the link, connects to the server computer
and requites for the page. The server services this request and the browser that page to
use after formatting it.
In the Internet community, people believe in sharing their idea and options with
others. This is so mainly because it is an open form that has no Government and no
restrictions at all. This policy of openness has led Internet-citizens to put up an enormous
variety of hypertext documents on the Web. This has led to information of every kind
being available to anybody who wants it.
The main reason behind the user-friend environment of the WWW is Hypertext.
Hypertext allows to physically seeing one document linked to another documents. The
even more magical reality of the web is that it allows you to link just text but also
pictures, sound clippings and movies, which are called Hypermedia.
So far, we have understood a few related to the WWW, we should now see how
the entire transaction takes place.
Web software, like the browser or the software used by the server to search for a
file is designed keeping the client-server model in mind. A browser (also called as Web
client) as explained above is a program that can send requests for documents to any Web
server. A Web server is a computer running a program that, upon receipt of a request,
sends the document requested, back to the requesting client.
It may also be possible that the client program may be running on a completely
separate machine from that of the server, possibly in another room or even in another
country. Since the task of the document storage is left to server and the task of document
formatting and presentation is left to the client, each program can concentrate on those
duties and work independently of each other.
Because servers usually operate only when documents are requested, they put a
minimal amount---of workload on the computers they run on.
Heres an example of how the process works

A user, who has a computer running browser software, selects a hyperlink
in a
piece of Hyper Text connecting to another document. The History of Computers for
example.
The Web, client/browser uses the address associated with the Hyperlink to connect to
the Web server at a specified network address and asks for the document associated
with The History of Computers.
The server responds by sending the text and any other media with in the text (pictures,
sounds, or movies) to the client, which the client formats and presents onto the users
screen.
Send me The History of Computers The client sends an HTTP message to

computer running a web server program and asks for a document.
The Web server sends the hypermedia HTML documents to the client you and up
seeing the document on your screen.
The World -Wide Web is composed of thousands of this virtual transaction-taking

place per hour throughout the world, creating a web of information flow.
The language that web clients and servers use to communicate with each others is
called the Hyper Text Transfer protocol (HTTP). All web clients and server must be able
to speak HTTP in order to send and receive Hypermedia document. For this reason, Web
servers are often called HTTP servers.
Through the Internet has been around since 1968-69, the WWW was born as
recently as March 1989 and the credit of its development goes to Tim Berners-Lee while
he was with an organization called CERN (stands for the European Particle Physical
Laboratory) at Germany. The WWW shows the highest rate of growth of all the Internet
application as the number of its users doubles every six-month.
SYSTEM DESIGN
The design of the system is essentially a blue print, or plan for a solution
of the system to be developed. A part of the system or subsystem of a whole of the
system can itself be considered a system with its own complements.
Here the focus is on detecting that which is all the modules method needed for the
system, the specification of these design is the only way by which we can accurately
translate the end-user requirements in to a finished software product or system.
The data flow oriented design in an architectural design method that allows a
convenient transition from the analysis model to a design description of program structure
the DFD presents a system overview depicting its overall purpose an its interactions with
external objects it provides a general pictorial of data transformations in the system.
A DFD shows the flow of data through a system which may be an manual
procedure software system, a hard ware system or any combination of these. A DFD
shows the movements of the data through the different transformations, which are the
process in the system. DFD are made up of a number of symbols, which represent system
components, process, data store, and data flow and external entities.
4.1 INPUT DESIGN

Input Design is one of the most expensive phases of the operation of
computerized system and is often the major problem of a system. A large number of
problems with a sytem can usually be tracked backs to fault input design and
method. Needless to say, therefore, that the input data is the life blood of a system
and have to be analysed and designed with utmost case and consideration. The
decisions made during the input design are
To provide cost effective method of input.

To achieve the highest possible level of accuracy.
To ensure that the input is understand by the user.
System analysis decide the following input design details like, what data to
input, what medium to use, hoe the data should be arranged or coded, data iems
and transactions needing validations to detect errors and at last the dialogue to
guide user in providing input.
Input data of a system may not be necessarily be raw data captured in the
system from scratch. These can also be the output of another system or sub
system. The design of input covers all phases of input from the creation of initial
data to actual entering the data to the system for processing. The design of inputs
involves identifying the data needed, specifying the characteristics of each data item,
capturing and preparing data for computer processing and ensuring correctness of data.
OUTPUT DESIGN
Output Design generally refers to the results and informations that
are generated by the system for many end-users, output is the main reason for
developing the system and the basis on which they evaluate the usefulness of the
application.
The objective of a system finds its shape in terms of the output. The
analysis of the objective of a system leads to determination of outputs. Outputs of
a system can face various forms. The most common are reports, screen displays,
printed forms, graphical drawings etc.,The output also vary in terms of their
contents frequency, timing and format. The user of the output from a system are
the justification for its existence. If the output are inadequate in any way, the
system are itself is adequate. The basic requirements of output are that it should be
accurate, timely and appropriate, in terms of content, medium and layout for its
intended purpose.
When designing output, system analysis most accomplish things like, to
determine what information to be present, to decide whether to display or print the
information and select the output medium and to decide how to distribute the
output to intended recipients.
SYSTEM IMPLEMENTATION
IMPLEMENTATION
When the initial design was done for the system, the client was consulted
for the acceptance of the design so that further proceedings of the system development
can be carried on. After the development of the system a demonstration was given to them
about the working of the system. The aim of the system illustration was to identify any
malfunction of the system.
After the management of the system was approved the system implemented in the
concern, initially the system was run parallaly with existing manual system. The system
has been tested with live data and has proved to be error free and user friendly.
Implementation is the process of converting a new or revised system design into
an operational one when the initial design was done by the system; a demonstration was
given to the end user about the working system. This process is uses to verify and
identify any logical mess working of the system by feeding various combinations of test
data. After the approval of the system by both end user and management the system was
implemented.
System implementation is made up of many activities. The six major activities as
follows.
CODING
Coding is the process of whereby the physical design specifications created by
the analysis team turned into working computer code by the programming team.
TESTING
Once the coding process is begin and proceed in parallel, as each program module
can be tested.
INSTALLATION
Installation is the process during which the current system is replaced by
the new system. This includes conversion of existing data, software, and documentation
and work procedures to those consistent with the new system.
DOCUMENTATION
It is result from the installation process, user guides provides the information of
how the use the system and its flow.
INPUT DESIGN
6. INPUT DESIGN
HOME
ABOUT US
NEWS
WHO WE ARE
MAIN
LATEST
SERVICES
COMPANY SOLUTIONS
SOLUTIONS
ASSESSMENT & DEVELOPMENT
PARTNERS / CLIENTS
CONTACTS
SOURCE CODE
SOURCE CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" type="text/css" media="all">
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="spinner"></div>
<div class="extra">
<div class="main1"></div>
<div class="main2">
<header><a href="index.html" class="logo">Empower - MIND TRACK
</a></header>
<a href="#!/page_SPLASH" class="close"><span></span></a>
<div class="kv1"></div>
<ul class="icons">
<li><a href="#"><img
</ul>
src="images/social_ic1.png"></a></li>
<footer>
<div class="copyright">Copyright 2013. All rights reserved. MIND TRACK<br />
<a href="#!/page_PRIVACY">Privacy policy</a> | Design by
<a href="http://www.srstech.org/">SRS Technologies</a>
</div>
<div class="tola">
<div id="jquery_jplayer" class="jp-jplayer"></div>

<div id="jp_container" class="jp-audio">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-mute" tabindex="1"

title="mute">Sound: <span>ON</span></a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1"
title="unmute">Sound: <span>OFF</span></a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</footer>
<div class="lines">
<div class="vl1"></div>
<div class="hl1"></div>
</div>
<nav class="menu_splash">
<ul id="menu_splash">
<li class="nav1"><a href="#!/page_ABOUT"><img
src="images/nav1.png"><span class="txt1">about us</span><span
class="txt2">who we are</span><span class="over"></span></a></li>
<li class="nav2"><a href="#!/page_NEWS"><img
src="images/nav2.png"><span class="txt1">news</span><span
class="txt2">events</span><span class="over"></span></a></li>
<li class="nav3"><a href="#!/page_SERVICES"><img
src="images/nav3.png"><span class="txt1">services</span><span
class="txt2">what we do</span><span class="over"></span></a></li>
<li class="nav4"><a href="#!/page_SOLUTIONS"><img
src="images/nav4.png"><span class="txt1">solutions</span><span
class="txt2">what we offer</span><span class="over"></span></a></li>
<li class="nav5"><a href="#!/page_PARTNERS"><img
src="images/nav5.png"><span class="txt1">partners</span><span
class="txt2">our clients</span><span class="over"></span></a></li>
<li class="nav6"><a href="#!/page_CONTACTS"><img
src="images/nav6.png"><span class="txt1">contact us</span><span
class="txt2">mail us</span><span class="over"></span></a></li>
</ul>
</nav>
<div class="menu">
<ul id="menu">
<li>
<a href="#!/page_ABOUT"><img src="images/ic1.png"></a>
<div class="pop_up"><span class="s1"></span><span class="s2">about
us</span></div>
</li>
<li>
<a href="#!/page_NEWS"><img src="images/ic2.png"></a>
<div class="pop_up"><span class="s1"></span><span
class="s2">news</span></div>
</li>
<li>
<a href="#!/page_SERVICES"><img src="images/ic3.png"></a>
class="s2">Services</span></div>
</li>
<li>
<a href="#!/page_SOLUTIONS"><img src="images/ic4.png"></a>
class="s2">solutions</span></div>
</li>
<li>
<a href="#!/page_PARTNERS"><img src="images/ic5.png"></a>
class="s2">partners</span></div>
</li>
<li>
<a href="#!/page_CONTACTS"><img src="images/ic6.png"></a>
<div class="pop_up"><span class="s1"></span><span class="s2">contact
us</span></div>
</li>
</ul>
</div>

<article id="content">
<ul>
<li id="page_SPLASH"></li>

<li id="page_ABOUT">
<div class="box">
<div class="col1">
<h2>Who We Are</h2>
<div class="video1"><a href="http://www.youtube.com/watch?
v=kh29_SERH0Y?rel=0" rel="prettyPhoto[mixed]" title="YouTube Demo"><img
src="images/about01.jpg"><span></span></a></div>
<strong class="text">
We are dedicated to and passionate about improving the performance and
effectiveness of individuals, leaders, teams and organizations
</strong>
<p class="text">
We provide smart training and consulting solutions in the areas of leadership,
sales and sales management, customer service and soft skills training such as
communication and negotiation and beyond. We have established our credibility by
providing comprehensive and broad branded training solutions across a vast crosssection of competency domains.
</p>
</div>
<div class="col0"></div>
<div class="col2">
<h2>About Us</h2>
<div class="scroll-pane"><div>
Our ability to design and deliver quality products consistently is
complemented by the maturity of our business processes and systems.
</strong>
<p class="text">
We're here to help you learn the practical, straightforward skills you need to
excel in your career. (You can explore the menus on the left hand side to see our core
skill areas. Used together, these skills can help you become exceptionally effective,
be a great manager and leader, be more successful in your career and even
become happier at work. .
</p>
<br>
<p class="text">
* Our full and comprehensive leadership, team management, decisionmaking, project management, personal productivity, and communication skills toolkit,
with more than 700 skills, techniques, and tools explained in detail. <br>
* More than 60 downloadable training packs, teaching specific skills in focused onehour sessions. <br>
* More than 250 downloadable Book Insights and Expert Interviews, giving you
convenient access to the ideas and opinions of key global experts. <br>
* Our community, providing the help, support, coaching, and advice that you need
to solve career problems, and advance your career in a positive way.
<br>
</div></div>
</div>
</div>
</li>


<li id="page_NEWS">
<div class="box">
<div class="col1">
<h2>Main News</h2>
<p class="text">
"Amongst the many leadership gurus, advisors and consultants considered by
Merit Group, MMM stood head and shoulders above their peers; MMM develops a
deep and well rounded understanding of each and every manager before building and
implementing programmes to develop and guide those individuals to fulfill their
leadership potential."
- Cornelius, CEO, Merit Group
</p>
<p class="text">
"Pramila, I recently attended your session on leadership at SBI Conclave in
Mumbai. It was a lifetime experience, touched everybody's heart. You are a true
leader - a source of never ending inspiration. Keep this spirit up. Please start writing a
book which will benefit millions."
- Nilesh, Branch Manager, SBI
</p>
</div>
<div class="col2">
<h2>Latest News</h2>
<img src="images/art.png" alt="" class="left border1 border2 img2">
<div class="table">
<p class="h3">
</p>
Learn a powerful yet simple 5-Step process of delegation, which is useful for
managers and leaders. "The best executive is the one who has sense enough to pick
good men to do what he wants done, and self-restraint enough to keep from meddling
with them while they do it." -Theodore Roosevelt."
</strong>
</p>
</div>
<br>
<img src="images/blog.png" alt="" class="left border1 border2 img2">
<div class="table">
<p class="h3">
</p>
What are the issues that businesses are faced with today? Rapidly changing
environments, overworked staff, attrition and the lack of time for leadership
development. Online Training.a buzz word in the Industry. Can Online Training bring
a solution to these issues? if yes, then what are its advantages...
</strong>
</div>
<br>
<img src="images/free.jpg" alt="" class="left border1 border2 img2">
<div class="table">
<p class="h3">
</p>
We have presentations of 18 soft skills programs that we conduct at MMM
Training Solutions that you can download for free. These presentations will help you to
understand our experience and quality in the area of soft skills training. We regularly
update our database to include new topics as well as add new content to the already
available topics. Games and articles are also available.
</strong>
</div>
<br>
<img src="images/video.jpg" alt="" class="left border1 border2 img2">
<div class="table">
<p class="h3">
</p>
Innovation has always been known to be difficult to quantify and measure.
Yet, when we judge innovation we see it on the basis of results and not a process.
In this video, Nirmalaya Kumar, insightfully explores Innovation as a key strength and
are of opportunity for India.
</strong>
</div>
</div></div>
</div>
</div>
</li>


<li id="page_SERVICES">
<div class="box">
<div class="col1">
<h2>Services List</h2>
<ul class="ul1">
<li><a href="#">Leadership skills</a></li>
<li><a href="#">Time Management</a></li>
<li><a href="#">Problem Solving</a></li>
<li><a href="#">Decision Making</a></li>
<li><a href="#">Stress management</a></li>
<li><a href="#">Communication Skills</a></li>
<li><a href="#">Creativity</a></li>
<li><a href="#">Learning skills</a></li>
<li><a href="#">Career Skills</a></li>
<li><a href="#">Team Management</a></li>
<li><a href="#">Project Management</a></li>
</ul>
</div></div>
</div>
<div class="col2">
<h2>Main Services</h2>
<div class="services1">
<img src="images/lead.jpg" alt="">
<div class="table">
<p>
The old-fashioned view of leadership is that leaders are marked out for
leadership from early on in their lives; and that if you are not a born leader, there's
little you can do to become one..
</p>
</div>
</div>
<div class="services1 last">
<img src="images/time.jpg" alt="">
<div class="table">
<p>
This section of Mind Tools teaches you time management skills. These are
the simple, practical techniques that have helped the leading people in business,
sport and public service reach the pinnacles of their careers.
</p>
</div>
</div>
<div class="services1">
<img src="images/creative.jpg" alt="">
<div class="table">
<p>
This section of Mind Tools teaches more than 20 techniques that you can use
to develop creative and imaginative solutions to business problems.
</p>
</div>
</div>
<div class="services1 last">
<img src="images/services04.png" alt="">
<div class="table">
<p>
Regardless of the size of your organization whether it's a large corporation,
a small company, or even a home-based business you need good communication
skills if you want to succeed.
</p>
</div>
</div>
</div>
</div>
</li>


<li id="page_SOLUTIONS">
<div class="box">
<div class="col1">
<h2>Our Solutions</h2>
<ul class="ul1">
<li><a href="#">Consulting Selling</a></li>
<li><a href="#">Defining the Customer</a></li>
<li><a href="#">Negotation Skills</a></li>
<li><a href="#">Networking</a></li>
<li><a href="#">Presentation and Performance</a></li>
<li><a href="#">Profession Selling</a></li>
<li><a href="#">Writing and winning proposal</a></li>
<li><a href="#">Improving Results</a></li>
<li><a href="#">Managing the Gobal</a></li>
<li><a href="#">Employees</a></li>
<li><a
<li><a
<li><a
<li><a
href="#">Change Management</a></li>
href="#">Problem Solving</a></li>
href="#">Coaching with Passion</a></li>
href="#">Interview Skills</a></li>
</ul>
</div></div>
</div>
<div class="col2">
<h2>Assessment and Development Solutions</h2>
<img src="images/pencil.jpg" alt="" class="left border1 border2 img1">
Lorem ipsum dolor sit amet conse ctetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna. Ipsum dolor.
</strong>
<p class="text">
At the helm of many HR processes remains the accurate assessment of people,
the requirement to identify with clarity the abilities of employees and then align them
to their functions. Misplaced talent can be detrimental to any organisation's financial
health and results in loss of human capital.
</p>
<p class="text">
Miind Track expertise through our assessment centres and development
centres, utilising structured tools of assessment and competency mapping helping in
the correct development and placement of employees. It extends entire processes of
identifying and placing the right talent in the right place at the right time. DOOR
assessments are validated by measurable results while they use effective and
sophisticated tools via our 360 degrees feedback multirators and impact surveys
along with succession planning. Unless a gap is assessed it cannot be closed, DOOR's
development centre helps seal these gaps using contemporary assessment tools.
</p>
</div>
</div>
</li>


<li id="page_PARTNERS">
<div class="box">
<div class="col3">
<h2>Our Clients</h2>
<p class="text">
As the world's largest developer of custom e-learning solutions, we have deep

knowledge and experience of the learning and development challenges in each
industry that we serve.
</p>
<div class="partners1"><img src="images/partners01.png" alt=""></div>
<div class="partners1 last"><img src="images/partners03.png"
alt=""></div>
alt=""></div>
alt=""></div>
alt=""></div>
</div></div>
</div>
<div class="col4">
<h2>Be Our Partner</h2>
<img src="images/partners00.jpg" alt="" class="border1 border2 img3">
Give your people the 1,000+ proven resources they need to be impactful
managers, inspiring leaders, and exceptionally effective contributors in the
workplace. Use this site to learn more, and to explore our resources for yourself!
</strong>
<p class="text">
This vertical knowledge has helped us shape innovative learning solutions that
address industry-specific challenges effectively, a fact borne out by our track record
of working extensively with Fortune 500 companies and leading educational
institutions
</p>
</div>
</div>
</li>


<li id="page_CONTACTS">
<div class="box">
<div class="col5">
<h2>Mail Us</h2>
<div id="note"></div>
<div id="fields">
<form id="ajax-contact-form" action="javascript:alert('success!');">
<INPUT type="text" name="name" value="Your full name:"
onBlur="if(this.value=='') this.value='Your full name:'"
onFocus="if(this.value =='Your full name:' ) this.value=''">
<INPUT type="text" name="email" value="Your email:"
onBlur="if(this.value=='') this.value='Your email:'"
onFocus="if(this.value =='Your email:' ) this.value=''">
<INPUT type="text" name="phone" value="Phone number:"
onBlur="if(this.value=='') this.value='Phone number:'"
onFocus="if(this.value =='Phone number:' ) this.value=''">
<TEXTAREA NAME="content" onBlur="if(this.value=='') this.value='Message:'"
onFocus="if(this.value =='Message:' )
this.value=''">Message:</TEXTAREA>
<div class="left">
<INPUT class="submit" type="submit" name="submit" value="submit">
</div>
</form>
</div>
</div>
<div class="col6">
<h2>Our Location</h2>
<figure class="google_map"></figure>
<strong class="text upper">
MIND TRACK
</strong>
<p class="text">
7E LMR Tower,<br>
Poosari Street, Surampatti 4 Road,<br>
Erode - 638 009. <br>
Telephone: + 91 94434 98433 <br>
E-mail: <a href="#">mail2@yahoo.com</a>
</p>
</p>
</div></div>
</div>
</li>


<li id="page_MORE">
</div></div>
</div>
</li>

SCREEN SHOTS
SCREEN SHOTS
HOME PAGE
ABOUT US
NEWS
SERVICES
SOLUTIONS
CLIENTS
CONTACTS
CONCLUSION
CONCLUSION
Finally I would like to conclude that in the 6 weeks while i was working on this
project we learned many new technologies, concepts and have also learn about working in
a team.
This insulates the application from technical implementation and enhancement to
support future technologies in a transparent manner without having the major impact on
the application. This also enables the easy portability of application to other operating
system and databases.
This project followed the maintenance SDLC, which involved the steps of the
REQUIREMENT ANALYSIS
DESIGN
CODING
TESTING
IMPLEMENTATION
MAINTENANCE
Thus we were able to understand in greater details the various software engineering
processes, and were able to apply them to our live project.
With this enduring and simulating experience we admit that the people of this website has
really enlightened me. With due regards, i want to express our heart-felt thanks to all for
their support and cooperation towards the completion of our project.
BIBLOGRAPHY
BIBLIOGRAPHY
1.
Advanced HTML 4.0 - Author: A. Ramatho
2.
HTML Programming - Author: Simon Oliver
3.
Student guide, Designing and creating a website
4.
Flash Platform from start to finish: Working collaboratively using
Adobe by Aaron Pederson, James Polanco, Doug Winnie

Website

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Website

Uploaded by

Copyright:

Available Formats

WEBSITE DESIGN AND

DIRECTORATE OF DISTANCE EDUCATION

Directorate of Distance Education

: WEBSITE DESIGN AND IMPLEMENTATION

I take the privilege to acknowledge my sincere thanks to The Director, DDE

I express my genuine thanks to our center coordinator and my guide for

5. BROWSING THE WEBSITE

A website requires attractive design and proper arrangement of links and

Pentium Dual Core

CD Writer & pen drive

by Adobe Systems. Dreamweaver was originally developed by Macromedia in 1997 and

scripting languages and frameworks including ASP (ASP

More components, ActionScript 2, and Unicode support. Flash MX 2004 marked

HTML (Hyper Text Markup Language)

Retrieve online information via hypertext links, at the click of a button.

<TITLE> Simple HTML document </TITLE>

Save time by automating repeated tasks, such as outputting your layers to

BROWSING THE WEBSITE

5. BROWSING THE WEBSITE

The WWW could be very simply defined as a universal database of knowledge

How the WWW does works?

Heres an example of how the process works

Send me The History of Computers The client sends an HTTP message to

The World -Wide Web is composed of thousands of this virtual transaction-taking

4.1 INPUT DESIGN

To provide cost effective method of input.

ASSESSMENT & DEVELOPMENT

<li><a href="javascript:;" class="jp-mute" tabindex="1"

As the world's largest developer of custom e-learning solutions, we have deep

Advanced HTML 4.0 - Author: A. Ramatho

HTML Programming - Author: Simon Oliver

Student guide, Designing and creating a website

Flash Platform from start to finish: Working collaboratively using

Adobe by Aaron Pederson, James Polanco, Doug Winnie

You might also like