You have been hired by a local bed and breakfast to create a website for their business. You recently sat down with the owners, Bridget and Eric Johnson, to get some ideas. They know very little about web design so they have given you free reign to design anything you want. Below are some of the notes you took from your meeting:

• History of the Bed and Breakfast
• Contact Page/Info (address, phone, email, fax, etc.)
• Local Attractions – What’s around here for visitors to do?
• Pictures of the bed and breakfast as well as pictures of the rooms
• Prices
• Who are the Inn Keepers? Do I want a “Meet the Innkeepers Page?”
• Check in/Check out times
• Are there any distinctive features about this Inn?
• Payment Information?
• Children? Pets? Smoking?
• FAQ’s?
• Food Menu?
• Map/Driving Directions?

Design Guidelines:

• You can use a Dreamweaver template or start from scratch.
• Be sure to have a consistent theme and style throughout.
• You should create an original name and logo for “Your Inn.”
• Consider using a “mask” effect for your images.
• The theme/template you choose should fit the bed and breakfast theme. In other words, would a bed and breakfast have a lime green background with purple text and red buttons?
• You should have a minimum of six pages, one of which being the homepage.

History of Your Inn

The Inn's history is a long and colorful one. In 1792, 19-year-old Ezekiel Sargent built a farmhouse on property bought by his father in 1781 when the family moved to YOUR CITY. Ezekiel also built "the red house" next door and a store where First Federal Bank now stands.

In 1853 George W. Everett, who grew up in the building where Tracey Memorial Library is now located, bought the Inn property. In the Civil War he was a major in the 9th NH Volunteers. En route home in 1863, he was poisoned by his body servant. The Inn's story has been lost between 1863-70. In 1870, the farmhouse was bought by Herman J. Currier who turned the property into a hotel called “The Elms.” He added the 3rd story and hipped-roof.

The Inn returned to the Sargent family in 1895 when Walter P. Sargent, grandson of Ezekiel's brother John, bought the Inn and named it the Hotel Sargent. You can find a display on the ground floor of the Inn with Guest registers and pictures. From 1903 to 1904, Harry Nichols became a partner and more additions were made to the Inn. Several managers were in charge, including Charles E. Shepard who ran the stagecoach route in the area. Another manager, D.L. La Pierre, advertised steam-heated rooms. Next came Hugh McKinnon who, in 1916 advertised 50 rooms, dining for 90, an open-air cafe and "chauffeur quarters." He installed electric lights to the Inn.

From the period between 1918 and 1939 the Inn was owned by Colby Academy (now Colby-Sawyer Academy). Frank Gay managed the Inn for 10 years. In 1929 Colby leased the Inn to Wendell and Clara Hobbs who also ran The Soonipi Lodge on Lake Sunapee. The Hobbs eventually purchased the Inn from Colby in 1939.

The Sargent family once again became part of the Inn's history when in 1941 Calvin Sargent, great-grandson of Ezekiel Sargent, entered into a contract with Wendall Hobbs for room, heat, bath, meals and hotel service for the rest of his life, or as long as Hobbses owned the Inn, for $5000.00. He was 73 at the time. The contract came to an end in 1967 when the Inn was sold to Frank and Lois Conklin. Calvin Sargent eventually outlived both the Hobbs and passed away just after his 100th birthday. The Conklins did major renovations to the Inn, which included a sprinkler system, hot -water heating system and bathrooms.

The history after 1967 may not be as colorful as the past with the Inn having several different owners, but each of these owners have put their own stamp on the fine old building. John and Maureen Follansbee, owners from 1986 - 1996, added more rooms on the second and third floor and renovated the Inn's dining room to its present day elegance.

The most recent owners, Donna and Keith Pomkoski, sold the inn to Bridget and Eric Johnson in November of 2004. Bridget and Eric are continuing with the renovations to bring this venerable old lady, this focal point of the community for the past two centuries, back to her grand, and well-earned, former glory.

Ellen and Terry are both originally from Columbus. Ellen graduated from Bexley High School, played lots of tennis and received her B.S. in Health Education from Kent State University. Ellen started her career at Children’s Hospital. Then, Ellen worked at the Franklinton Health Center in their clinic teaching classes to the local community. She changed career directions and followed into her father’s footsteps in the women’s apparel industry. Ellen worked as a sales representative for several years and became the manager of a local women’s clothing chain. From there, the rest is history. Ellen moved to the Hocking Hills six months before her mother opened the Inn.

Terry grew up and went to school in Whitehall. He worked his way though school working at Temple Israel. He spent lots of time learning the trade of construction and woodworking. His mother was born and raised in the Hocking Hills. When Terry finished high school, the family moved to the Hocking Hills. Terry farmed for many years raising cows, chickens, and his favorite, pigs. While farming, Terry also worked maintenance jobs in Columbus. Terry’s mother was very creative and artistic. She taught Terry how to quilt, garden, can fresh food and paint.

Terry met Ellen when Ellen’s mother hired him as her contractor to build the Inn. They married and had their daughter Sarah and lived in the original summer kitchen. Three years later they had Benjamin. Sarah is now a junior at the University of Dayton majoring in Business Entrepreneurship and Marketing. Benjamin will be attending North Carolina University in August. He will major in Civil Engineering. Both of them have been active working at the Inn.

So, Terry and Ellen will be “empty-nesters” this fall. They hope to continue their passion of traveling. In addition, Ellen will remain active as a Hospice volunteer and Terry will continue his volunteering with the Stuart’s Opera House. They hope to take a class in ballroom dancing. Ellen wants to learn to knit again. Terry will have the chance to fish more often.

@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
}

#wrapper {
    width:980px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
}

#header {
    width:980px;
    height:auto;
    text-align:center;
    padding-top:33px;

}

#navigation {
    width:980px;
    height:auto;
    text-align:center;
    padding-top:28px;
}

#slideshow {
    width:800px;
    height:auto;
    text-align:center;
    padding-top:4px;
}

#content-parent {
    width:980px;
    height:auto;
    background-image:url(images/main_bg.jpg);
    display:inline-block;
    padding-bottom:20px;
    margin-top:-20px;
}

#content-left {
    width:675px;
    height:100%;
    float:left;
    padding-left:20px;
    margin-right:15px;
   
}

#content-right {
    width:250px;
    height:inherit;
    float:left;
    padding-top:20px;
    padding-left:10px;
    padding-right:10px;
}

#footer {
    clear:both;
    width:980px;
    height:170px;
    background-image:url(images/footer_bg.jpg);
    background-repeat:no-repeat;
    background-color:#F8E6C0;
    padding-top:10px;
    text-align:center;
}

#footer a{
    color:#574621;
    text-decoration:none;
    padding-right:20px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}

body {
    background-image:url(images/bg.jpg);
    background-repeat:repeat-x;
}

#navigation a {
    color:#FCEACE;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
    padding-right:20px;
}

h1 {
    color:#916422;
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    line-height:48px;
}

p {
    color:#676767;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    line-height:20px;
}

.padding {
    padding:15px;
}

ul {
    padding-left:20px;
}

a {
    color:#4A1106;
}

h2 {
    color:#4A1106;
    font-size:16px;
    font-family:Arial, Helvetica, sans-serif;
    line-height:48px;
}

.border {
    border-color:#4A1106;
    border-style:solid;
    border-width:5px;
}

.center {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.right {
    color:#4A1106;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
}


#content-right .border {
    border-color:#4A1106;
    border-style:solid;
    border-width:3px;
    padding:5px;
    background-color:#F8E6C0;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mont Blanc Estate</title>
<link href="stylesheet.css" rel="stylesheet" />

<link href="slider/css/screen.css" rel="stylesheet" media="screen" />

<script src="slider/js/jquery.js"></script>
<script src="slider/js/easySlider1.7.js"></script>
<script >
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true,
                continuous: true
            });
        });    
    </script>
</head>
<body>
<div id="wrapper">
  <div id="header"><img src="images/logo.jpg" width="507" height="88" alt="Montblanc Resort Logo" /></div>
  <div id="navigation"><a href="index.html">Home</a><a href="history.html">Our History</a><a href="rooms.html">Our Rooms</a> <a href="attractions.html">Local Attractions</a> <a href="about.html">Your Innkeepers</a><a href="contact.html">Contact Us</a></div>

<div id="slideshow"><div id="container">
<div id="content">
<div id="slider">
            <ul>                
                <li><img src="slider/images/01.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/02.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/03.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/04.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/05.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/06.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/07.jpg" alt="Mont Blanc Estate" /></li>            
            </ul>
        </div>
  </div>
  </div></div>

<div id="content-parent">
    <div id="content-left">
      <h1>Heading</h1>
      <p>Morbi sodales ultrices dignissim. Quisque ac magna mi, ultrices   facilisis turpis. Pellentesque tempus gravida posuere. Donec mattis,   metus vitae fringilla fringilla, sapien orci scelerisque turpis, at   volutpat neque mi at justo. In urna purus, malesuada vitae vestibulum   quis, suscipit et nisl. Suspendisse scelerisque semper magna, ut laoreet   tortor gravida in. Nullam id leo lectus. Sed id elementum purus.   Suspendisse vel nisi quis sapien aliquam auctor a nec purus. Sed a   lectus ut eros lacinia consectetur non ut felis. Donec urna mauris,   elementum sit amet cursus ut, facilisis non tortor. Curabitur facilisis   tellus a est convallis condimentum. Duis scelerisque eros nec tortor   feugiat sed tristique felis adipiscing. Cum sociis natoque penatibus et   magnis dis parturient montes, nascetur ridiculus mus. Suspendisse mauris   elit, accumsan non iaculis quis, volutpat sed felis. Nulla a nisl eu   nisi suscipit dignissim.</p>
      <p>&nbsp;</p>
      <p>Morbi sodales ultrices dignissim. Quisque ac magna mi, ultrices   facilisis turpis. Pellentesque tempus gravida posuere. Donec mattis,   metus vitae fringilla fringilla, sapien orci scelerisque turpis, at   volutpat neque mi at justo. In urna purus, malesuada vitae vestibulum   quis, suscipit et nisl. Suspendisse scelerisque semper magna, ut laoreet   tortor gravida in. Nullam id leo lectus. Sed id elementum purus.   Suspendisse vel nisi quis sapien aliquam auctor a nec purus. Sed a   lectus ut eros lacinia consectetur non ut felis. Donec urna mauris,   elementum sit amet cursus ut, facilisis non tortor. Curabitur facilisis   tellus a est convallis condimentum. Duis scelerisque eros nec tortor   feugiat sed tristique felis adipiscing. Cum sociis natoque penatibus et   magnis dis parturient montes, nascetur ridiculus mus. Suspendisse mauris   elit, accumsan non iaculis quis, volutpat sed felis. Nulla a nisl eu   nisi suscipit dignissim.</p>
    </div>
    <div id="content-right"><div ><input id="respage" name="respage" value="http://v2.reservationkey.com/489/reserve" > </p>
<script src="http://v2.reservationkey.com/inc/dpicker.js"></script>
<table width="100%" border="0">
  <tr>
    <td width="99"><p >Arrival Date:&nbsp;</p></td>
    <td colspan="2"><input id="checkin" maxlength="20" name="checkin" onclick="displayDatePicker('checkin');" size="7" value="" />
      <a href="javascript:void(0)" onclick="displayDatePicker('checkin');"><img src="http://v2.reservationkey.com/i/cal.gif" border="0" /></a></td>
  </tr>
  <tr>
    <td><p>&nbsp;</p></td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td><p >Departure Date:&nbsp;</p></td>
    <td colspan="2"><input id="checkout" maxlength="20" name="checkout" onclick="displayDatePicker('checkout');" size="7" value="" />
      <a href="javascript:void(0)" onclick="displayDatePicker('checkout');"><img src="http://v2.reservationkey.com/i/cal.gif" border="0" /></a></td>
  </tr>
  <tr>
    <td><p>&nbsp;</p></td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td><p >Guests:</p></td>
    <td width="49"><select id="numguests" name="numguests">
      <option value="1">1</option>
      <option selected="selected" value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
    </select></td>
    <td width="78" align="left"><input onclick="window.location=document.getElementById('respage').value +'/s|'+ document.getElementById('checkin').value.replace(/\//g,'.')+'|'+ document.getElementById('checkout').value.replace(/\//g,'.')+'|'+ document.getElementById('numguests').value" value="Search" /></td>
  </tr>
</table>
<script src="http://v2.reservationkey.com/inc/jsdate.js"></script>
<link href="http://v2.reservationkey.com/inc/dpicker.css" rel="stylesheet" >
</div>
<br />
</p>
<div >
<div >
<div ><a href="http://www.bedandbreakfast.com/oh-strasburg-the-garver-house-reviews.html" >Mont Blanc Estate Reviews</a></div>
</div>
<script language="javascript" >document.write('<script src="http://www.bedandbreakfast.com/inns/Reviews.axd?PID=SyPDW41CaIU%3d&&R1=2&R2=5&revBorderColor=&revHyperlinkColor=FFCC33&revRatingScore_F=000000&revTitleBar_B=&revTitleBar_F=000000&revWidgetFrame_B=&revWidgetFrame_F=000000&CT=3&RND=' +Math.random() + '" language="javascript" >&lt;\/script>');</script></script></div>
</div>
<div id="footer"><a href="index.html">Home</a><a href="history.html">Our History</a><a href="rooms.html">Our Rooms</a> <a href="attractions.html">Local Attractions</a> <a href="about.html">Your Innkeepers</a><a href="contact.html">Contact Us</a></div>
</div>
</body>
</html>

<link href="slider/css/screen.css" rel="stylesheet" media="screen" />

<script src="slider/js/jquery.js"></script>
<script src="slider/js/easySlider1.7.js"></script>
<script >
        $(document).ready(function(){    
            $("#slider").easySlider({
                auto: true,
                continuous: true
            });
        });    
    </script>

<div id="container">
<div id="content">
<div id="slider">
            <ul>                
                <li><img src="slider/images/01.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/02.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/03.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/04.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/05.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/06.jpg" alt="Mont Blanc Estate" /></li>
                <li><img src="slider/images/07.jpg" alt="Mont Blanc Estate" /></li>            
            </ul>
        </div>
  </div>
  </div>