Look At Designing Interactive Websites

Published Date: 02 Nov 2017

Website Designing

Table of Contents

Understand website design concepts

In this part we would be discussing about the design concepts of the website and thoroughly analyzing what parts of website is to be put where and then making an optimum functional website.

Design concepts that have to be considered when designing a website

The website design principles primarily focus on user acceptability and user friendliness. As the user has to be well acquainted with the attractions of See Chicheste it is mandatory for the site to provide the realistic view of the city. The principles can be listed as follows:

The design must be user friendly and pleasant to view.

Delivers all the information necessary to the user and makes the object popular and give branding to it.

Symmetry is important in designing as it makes the site more lucrative and appealing.

Choosing a color contrast that best reflects the object under display makes the design look good. See Chicheste is a blend of various forms of life both energetic, calm and luxury thus we have chosen a mix of green and orange with leaf pattern in background to reflect life.

To give good overview it is necessary that user gets a glimpse of what he is actually intending to explore. Keeping this in mind the website contains numerous pictures and snaps of hotels, tourist attractions, restaurants and cafes.

The menu bar at the top makes navigation simple and friendly to users of all ages. The inner menus make the site more explorative as users can see details under specified headings and domains important to them.

The search menu is one of the key features of any site as it helps in searching the keywords without having to explore each and every menu, saving time and resources.

(Jenkins, 2009)

Designing interactive websites

In this part we would be analyzing different features while implementing the design of the website of See Chicheste.

Design Notes & Story Board

The website is having four webpage with it those are describing the whole information about See Chicheste. The website is also providing a lot of pictures or snaps of See Chicheste as a part of gallery. The whole website is follows a standard pattern of which is listed below:

Standard Font (font-size: 14px; color: #7F7F81; font-family: Arial, Helvetica, sans-serif;)

Background (#F2F2F2 url(images/img01.jpg) repeat-x left top;)

Headings (h1, h2, h3)

Images (for galley: width: 920px; height: 472px; margin: 0px auto 30px auto; padding: 30px 0px 0px 0px; background: #FFFFFF;)

Logo (float: left; letter-spacing: -1px; text-transform: capitalize; text-shadow: -1px 1px 2px #8C5414; font-family: Georgia, "Times New Roman", Times, serif; font-size:45px; color: #FFFFFF; )

Slogan (font-size:12px; else are inherited from logo)

Site navigation:

It is done by implementing a menu bar on top of the page which is visible all times and is universally accessible. Proper padding and margin are given with respect to the body of the page so as to make it more visible and easily accessible.

Sitemap of the whole site is as follows

Home

Welcome to See Chicheste

Photos

About

About See Chicheste

Contact

Frequently Asked Questions

CSS

Cascading Style Sheet is a language to describe layout of or semantics of website or document written in any markup language. It is one of the most common application style used in modern day web pages to script and change the formatting.

Importance of CSS

Easier to load and reduce bandwidth utilization.

Reduce clutter in html and other markup language for changing formatting.

Compatible with all the web browsers.

Creates consistent webpages to be shown same around different browsers and different platforms.

Implementation of the website (Screenshots)

Home

Photos

About

Contact

Code

Appendix 1.1

Evaluation based on other users

When opening the website for a test run for different users, we understood that the main appealing factor of the website was the contrasting color combination and easy navigation between various pages. The information on the website is easily accessible and the sitemap adds a bonus to it, users where pretty much happy to use the website and there was not so much problem of information unavailability. However, some of the users requested for a map in the website and a forum to discuss about the details of the See Chicheste and some important places to visit for the holidays.

Distinction Criteria

Learning experience: This project provided an insight of the development of a website from scratch. I understood the underlining concepts of cascading style sheet, html syntaxes, iframes, etc. which are essential for designing and developing user friendly websites. The learning experience also includes management of time, designing layout based on the proficiency of the website, prioritizing various domains when creating the website.

Problems faced: Some of the problems faced during the design of the website are explained below:

1.Â Â Â Â Â Â Managing the CSS and java scripts for appealing interface.

2.Â Â Â Â Â Â Creating a seamless transition between various pages.

3.Â Â Â Â Â Â Importance of various blocks and iframes and use in my website.

4.Â Â Â Â Â Â Searching inside my website.

Resolving the problems: Some of the steps I had taken to resolve the problems faced during the development of the website are:

1.Â Â Â Â Â Â Understanding the concepts via online tutorials and websites.

2.Â Â Â Â Â Â Using various books and materials available to grasp the depth of the website development.

3.Â Â Â Â Â Â Seamless transition between various pages was done by integrating all the CSS and JS altogether and using them as global throughout the website.

4.Â Â Â Â Â Â Since each block has different purpose, I subdivided the pages in various blocks aligning them left and right so as to reduce vertical space and make the website more appealing.

5.Â Â Â Â Â Â Search module was not implemented now, but can be integrated by using the advanced search feature of Google search using â€˜index:â€™ or â€˜site:â€™ attributes

6.Â Â Â Â Â Â Making all the images, css clubbed together, reduces the clutterness of the website and hence making the job of website developer much easier to understand and change it in future. (Schafer, 2008)

Test Website

Critical Review

The website provides an interactive way to connect to the customers of the organization and enhanced its capabilities by introducing many features like Googleâ„¢ Maps, short break calculator, etc. This is a few of many features which provide an easy accessibility to the user and improve the experience to a large extent. However, there are some places in which the layout is not mixing with the background and images. Also, the short break calculator is not providing an intuitive way to show the result. Apart from this the whole website is working fine and would continue to bring more revenue to the firm.

Some of the feedbacks which we got from the users in the test run are:

"Great website, an easy interface"

"It is too much colorful"

"Layout not properly aligned"

"Nice way to present the organization"

"No control over the photos"

Analysis of the test result

During the test phase we didnâ€™t implemented the Googleâ„¢ Maps API and a way to calculate show the result of short term calculator. After which we analyzed the result and came to a conclusion that these two are important feature for seamless working of the user and hence must be implemented in the website itself. There were some portions of the website in which the color layout was not in proper mix with each other, these were removed and a different layout was designed to integrate all the features in a go. Overall, the website has quite a bit improved after the test run and would continue to improve based on a constant feedback system implemented with the help of contact us module.

Evaluating Feedback

The constant feedback mechanism by which various functionalities are added is an essential part of any website, as a consumer or a user you should have all the required information available as soon as possible, we tried to make such website. But there are some flaws still left, only a user can tell those when he / she is working on something. The feedbacks from user like to implement Maps, Short break calculator, navigation to photos, etc. helps us to improve the functionalities of the website based on in depth analysis of each and every part.

Onscreen help to assist the website users

Users are provided with a sitemap to give a brief idea about the usage the website. However, to understand the working of the website let us consider each and every portion separately.

Index page: This gives us a brief idea about the organization See Chicheste and its working. With some of the features in side links to help users to connect fast and efficiently.

Photos page: This page provides an insight about the experience that a customer gets when connecting with the organization. Various high end services are provided and as always "photos tells us much more information than text".

About page: This page provides some details about the location of Chichester organization and its actual place in real time. Since, it has a direct API of Google Maps, it is updated regularly and any changes in the actual design are reflected right away so that user is not lost in between various same sounding places.

Contact page: This page gives us many blocks including the actual postal address of the organization. A block to provide feedback for the site or asking a query to the managers of the organization and another block for some frequently asked questions to help user connect to the website more effectively.

Other Links: This block is shown on all the webpages and improves the functionality of the website to a large extent by providing links to where to eat / stay, short break calculator, etc.

Documentation for support and maintenance of the website

For maintaining the website, the css and html codes are attached. Any update or changes to the website can be simulated with the use of very useful software named Adobeâ„¢ Dreamweaverâ„¢. It provides a graphical way to enhance the website and improve the functionalities without having to go into the actual coding of html. This software is very much useful if the designer is a newbie and doesnâ€™t have thorough knowledge of HTML and CSS. It can also be used to enhance a portion of website rather than updating to a whole new one.

Appendix

1.1 index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Welcome to See Chicheste </a></h2>

<p>Welcome to our website. Here at See Chichester we have worked hard to find you the best deals in

short-break accommodation in one of the most scenic and historic cities of the south. Choose from

our selection of deals from economy bed and breakfast to five star luxury for that special

celebration. Your weekend can include one of our recommended tours in the city, or our

recommended walks in the nature reserve of Kingley Vale. We can book boating trips from the

harbour or cycling trips along the Centurion Way. All in all the perfect way to relax. </p>

<p><a href="#" class="links">Full Details</a></p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Photos.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

var _countDowncontainer=0;

var _currentSeconds=1;

function ActivateCountDown(strContainerID, initialValue) {

_countDowncontainer = document.getElementById(strContainerID);

if (!_countDowncontainer) {

alert("count down error: container does not exist: "+strContainerID+

"\nmake sure html element with this ID exists");

return;

}

SetCountdownText(_currentSeconds);

window.setTimeout("CountDownTick()", initialValue);

}

function CountDownTick() {

if (_currentSeconds == 25) {

_currentSeconds = 1;

}

SetCountdownText(_currentSeconds+1);

window.setTimeout("CountDownTick()", 1500);

}

function SetCountdownText(seconds) {

//alert(seconds);

_currentSeconds = seconds;

_countDowncontainer.src = "images/" + seconds +".jpg";

}

</script>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li class="current_page_item"><a href="Photos.html">Photos</a></li>

<li><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

<!--

ActivateCountDown("Images", 1500);

-->

</script>

About.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li class="current_page_item"><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">About See Chicheste</a></h2>

<p>

Our company helps to get the best cruise easily through the internet

using Maps<br /><center>

name="I1" scrolling="no"

src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Chichester&sll=37.0625,-95.677068&sspn=33.626896,78.837891&ie=UTF8&hq=Chichester&hnear=&ll=43.099409,-78.941794&spn=26.543437,78.837891&z=4&iwloc=A&cid=12443100355021093217&output=embed"

width="425"></iframe></center>

<a href="http://goo.gl/maps/0CeR"

style="color:#0000FF;text-align:left">View Larger Map</a></p>

</p>

<p><a href="#" class="links">Full Details</a></p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Contact.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!--

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 2.5 License

Name : Arrangement

Description: A two-column, fixed-width design with nice and simple color scheme.

Version : 1.0

Released : 20110421

-->

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li><a href="About.html">About</a></li>

<li class="current_page_item"><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Contact Us</a></h2>

<p>See Chichester Ltd. <br />

112 The Hornet <br />

Chichester, West Sussex <br />

PO8 5RE <br />

<a href="mailto:[email protected]" target="_blank">[email protected]</a><br />

Tel: 01243 435678 </p>

</div>

<h2 class="title"><a href="#">Feedback / Query</a></h2>

<div>You can leave a message using the below contact form. You may apply for user account if you are not from IIITM Gwalior. Please fill contact form with full of your details. <div class="form-item" id="edit-name-wrapper">

</div>

<br />

</div>

<br />

<label for="edit-subject">Subject: <span class="form-required" title="This field is required.">*</span></label>      

</div>

<br />

<label for="edit-message">Message:<span class="form-required" title="This field is required."> *</span></label>   

</div>

<br />

</div></form>

</div>

<h2 class="title"><a href="#">Frequently Asked Questions</a></h2>

<p><strong>Where is the Minerva Theatre situated?</strong></p>

<p>The Minerva is situated on the same site as the Festival Theatre. All signposts through Chichester indicate the Chichester Festival Theatre, on a brown sign with a theatre mask.</p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

style.css

/*

Design by Free CSS Templates

http://www.freecsstemplates.org

Released for free under a Creative Commons Attribution 2.5 License

*/

body {

margin: 0;

padding: 0;

background: #F2F2F2 url(images/img01.jpg) repeat-x left top;

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #7F7F81;

}

h1, h2, h3 {

margin: 0;

padding: 0;

font-weight: normal;

color: #FFFFFF;

}

h1 {

font-size: 2em;

}

h2 {

font-size: 2.4em;

}

h3 {

font-size: 1.6em;

}

p, ul, ol {

margin-top: 0;

line-height: 180%;

}

ul, ol {

}

a {

text-decoration: none;

color: #5D9800;

}

a:hover {

text-decoration: underline;

}

img.border {

border: 6px solid #E1F1F6;

}

img.alignleft {

float: left;

margin-right: 25px;

}

img.alignright {

float: right;

}

img.aligncenter {

margin: 0px auto;

}

#wrapper {

background: url(images/img02.jpg) no-repeat center top;

}

/* Header */

#header {

width: 950px;

height: 125px;

margin: 0 auto;

}

#logo {

float: left;

width: 600px;

height: 63px;

}

#logo h1 {

margin: 0;

padding: 60px 0px 0px 20px;

}

#logo h1 {

float: left;

letter-spacing: -1px;

text-transform:capitalize;

text-shadow: -1px 1px 2px #8C5414;

font-family: Georgia, "Times New Roman", Times, serif;

font-size:45px;

color: #FFFFFF;

}

#logo a {

text-decoration: none;

color: #FFFFFF;

}

#search {

float: right;

width: 291px;

height: 63px;

}

#search form {

padding: 70px 0px 0px 0px;

background: url(images/img04.jpg) no-repeat left 70px;

}

#search fieldset {

margin: 0;

padding: 0;

border: none;

}

#search-text {

width: 200px;

padding: 8px 10px 8px 10px;

border: none;

background: none;

text-transform: lowercase;

font: normal 11px Arial, Helvetica, sans-serif;

color: #7F7F81;

}

#search-submit {

display: none;

}

/* Menu */

#menu {

width: 950px;

height: 63px;

margin: 0 auto;

padding: 0px 0px 0px 0px;

background: url(images/img03.jpg) repeat-x left top;

}

#menu ul {

margin: 0;

padding: 0px;

list-style: none;

line-height: normal;

}

#menu li {

float: left;

height: 63px;

background: url(images/img05.jpg) no-repeat right top;

}

#menu a {

display: block;

float: left;

height: 43px;

margin-right: 3px;

padding: 20px 30px 0px 30px;

text-decoration: none;

text-transform:capitalize;

text-shadow: 1px 1px 2px #4D5A1C;

font-family: Arial, Helvetica, sans-serif;

font-size: 16px;

font-weight: normal;

color: #FFFFFF;

border: none;

}

#menu li.current_page_item {

}

#menu .current_page_item a {

background: url(images/img06.jpg) repeat-x left top;

}

#menu a:hover {

text-decoration: none;

background: url(images/img06.jpg) repeat-x left top;

}

#splash {

width: 920px;

height: 472px;

margin: 0px auto 30px auto;

padding: 30px 0px 0px 30px;

background: #FFFFFF;

}

/* Page */

#page {

width: 950px;

margin: 0 auto;

padding: 0;

}

/* Content */

#content {

float: left;

width: 620px;

margin-bottom: 30px;

padding: 0px 0px 0px 0px;

}

.post {

margin-bottom: 30px;

padding: 40px;

background: #FFFFFF;

}

.post .title {

margin: 0px;

letter-spacing: -1px;

}

.post .title a {

color: #333333;

text-decoration: none;

border: none;

}

.post .meta {

padding: 5px 0px 15px 0px;

text-align: left;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

font-style: italic;

color: #888888;

}

.post .meta a {

}

.post .entry {

padding-bottom: 20px;

text-align: justify;

}

.links {

float: right;

font-weight: bold;

}

/* Sidebar */

#sidebar {

float: right;

width: 300px;

padding: 0px;

}

#sidebar ul {

margin: 0;

padding: 0;

list-style: none;

}

#sidebar li {

background: #FFFFFF;

margin-bottom: 30px;

padding: 30px 0px;

}

#sidebar li ul {

margin: 0px;

padding: 0px 30px;

}

#sidebar li li {

margin: 0px;

padding: 0px;

padding-left: 15px;

line-height: 35px;

border-bottom: 1px dashed #B9B9B9;

}

#sidebar li li span {

display: block;

margin-top: -20px;

padding: 0;

font-size: 11px;

font-style: italic;

}

#sidebar h2 {

height: 38px;

margin-bottom: 20px;

padding: 0px 0px 0px 30px;

letter-spacing: -1px;

font-size: 28px;

color: #333333;

}

#sidebar p {

margin: 0 0px;

padding: 0px 30px 20px 30px;

text-align: justify;

}

#sidebar a {

border: none;

color: #7F7F81;

}

#sidebar a:hover {

text-decoration: underline;

color: #5D9800;

}

/* Calendar */

#calendar {

}

#calendar_wrap {

padding: 20px;

}

#calendar table {

width: 100%;

}

#calendar tbody td {

text-align: center;

}

#calendar #next {

text-align: right;

}

/* Footer */

#footer-wrapper {

overflow: hidden;

padding: 30px 0px;

background: #E7E7E7;

}

#footer {

clear: both;

height: 100px;

background: #222222;

font-family: Arial, Helvetica, sans-serif;

}

#footer p {

margin: 0;

padding: 30px 0px 0px 0px;

line-height: normal;

font-size: 10px;

text-transform: uppercase;

text-align: center;

color: #FFFFFF;

}

#footer a {

color: #FFFFFF;

}

#three-columns {

overflow: hidden;

width: 950px;

margin: 0px auto 0px auto;

padding: 20px 0px 30px 0px;

}

#three-columns ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#three-columns li {

padding: 4px 20px 6px 20px;

border-bottom: 1px dashed #B9B9B9;

}

#three-columns h2 {

padding: 0px 0px 20px 20px;

font-size: 28px;

color: #000000;

}

#column1 {

float: left;

width: 280px;

margin-right: 55px;

}

#column2 {

float: left;

width: 280px;

}

#column3 {

float: right;

width: 280px;

}

#column1 a, #column2 a, #column3 a {

color: #141414;

}

Break of the week.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Break of the Week </a></h2>

<p>We are offering dinner free for this weekends along with DJ Nite and also tourist trips at 15%% discount.</p>

<p><a href="#" class="links">Full Details</a></p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Data.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<p align="center"><a href="Deals.xml">Short Break Deals Details</a></p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Short break calculator.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

function Discount() {

var dis;

dis=(20.0/100)*document.getElementById('Text2').value;

alert((document.getElementById('Text2').value - dis) * document.getElementById('Text1').value);

}

</script>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li class="current_page_item"><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Short Break Calculator</a></h2>

<p align="center">Number of Nights: <input id="Text1" type="text" /></p>

<p align="center">Per Night: <input id="Text2" type="text" /></p>

<p align="center"><span id="Button1" onclick="return Discount();" style="font-weight: bold; color: #FFFFFF; background-color:#F60; padding:5px;" align="center">Get 20% Discount</span></p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Virtual Tour.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li class="current_page_item"><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Virtual Tour</a></h2>

<p>Market View</p>

</div>

<p>Market View Near Clock House</p>

</div>

</div>

<p>Clock Tower</p>

</div>

<p>Colony</p>

</div>

<p>Road & Parking View</p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Where to Stay.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li class="current_page_item"><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Where to Eat</a></h2>

<p>In Chicheste we have Pizzahut and a lot more resturants so you will got the food of your choice...</p>

</div>

<p>IFront view of Pizzahut for getting the food of your choice...</p>

</div>

<p>Market of Chicheste here you will a lot more resturants...</p>

</div>

<p>Inside view one of the resturant in Chicheste...</p>

</div>

<ul>

<li>

<h2>Other Links</h2>

<ul>

<li><a href="Break of the Week.html">Break of the Week </a></li>

<li><a href="Virtual Tour.html">Virtual Tour</a></li>

<li><a href="Where to Stay.html">Where to Stay</a></li>

<li><a href="Where to Eat.html">Where to Eat</a></li>

<li><a href="Short Break Calculator.html">Short Break Calculator</a></li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

Whetre to Eat.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>See Chicheste</title>

</head>

<body>

<a href="index.html"><h1>See Chicheste <span style="font-size:12px;">experience the ancient city between the downs and the sea</span></h1></a>

</div>

</fieldset>

</form>

</div>

<ul>

<li><a href="Photos.html">Photos</a></li>

<li class="current_page_item"><a href="About.html">About</a></li>

<li><a href="Contact.html">Contact</a></li>

</ul>

</div>

<h2 class="title"><a href="#">Where to Eat</a></h2>

<p>In Chicheste we have Pizzahut and a lot more resturants so you will got the food of your choice...</p>

</div>

<p><img

Our Service Portfolio

Want To Place An Order Quickly?

Then shoot us a message on Whatsapp, WeChat or Gmail. We are available 24/7 to assist you.

Do not panic, you are at the right place

Visit Our essay writting help page to get all the details and guidence on availing our assiatance service.

Get 20% Discount, Now
£19 £14/ Per Page
14 days delivery time

Our writting assistance service is undoubtedly one of the most affordable writting assistance services and we have highly qualified professionls to help you with your work. So what are you waiting for, click below to order now.

Get An Instant Quote

ORDER TODAY!

Our experts are ready to assist you, call us to get a free quote or order now to get succeed in your academics writing.

Get a Free Quote Order Now