Pacific Trails Resort Case Study

Melanie Bowie is the owner of Pacific Trails Resort, located right on the California North Coast. The resort offers a quiet getaway with luxury camping in yurts along with an upscale lodge for dining and visiting with fellow guests. The target audience for Pacific Trails Resort is couples who enjoy nature and hiking. Melanie would like a website that emphasizes the uniqueness of the location and accommodations. She would like the website to include a home page, a page about the special yurt accommodations, a reservations page with a contact form, and a page to describe the activities available at the resort.

A site map for the Pacific Trails Resort website is shown in Figure 2.28. The site map describes the architecture of the websitea Home page with three main content pages: Yurts, Activities, and Reservations.

Figure 2.28 Pacific Trails Resort site map.

Figure 2.29 displays a wireframe sketch of the page layout for the Pacific Trails Resort website. The wireframe contains a header area, a navigation area, a main content area, and a footer area for copyright information.

Figure 2.29 Pacific Trails Resort wireframe page layout.

You have three tasks in this case study:

1. Create a folder for the Pacific Trails Resort website.

2. Create the Home page: index.html.

3. Create the Yurts page: yurts.html.

Task 1: Create a folder on your hard drive or portable storage device (a thumb drive or an SD card) called pacific to contain your Pacific Trails Resort website files.

Task 2: The Home Page. You will use a text editor to create the Home page for the Pacific Trails Resort website. The Home page is shown in Figure 2.30.

Figure 2.30 Pacific Trails Resort index.html.

Launch a text editor and create a web page document with the following specifications:

1. Web Page Title: Use a descriptive page titlethe company name is a good choice for a business website.

2. Wireframe Header Area: Code the header element with the text, Pacific Trails Resort within an h1 heading element.

3. Wireframe Navigation Area: Place the following text within a nav element with bold text (use the element):

   • Home Yurts Activities Reservations

   Code anchor tags so that Home links to index.html, Yurts links to yurts.html, Activities links to activities.html, and Reservations links to reservations.html. Add extra blank spaces between the hyperlinks with the special character as needed.

4. Wireframe Main Content Area: Code the page content within a main element. Use Hands-On Practices 2.11 and 2.12 as a guide.

   1. Place the following within an h2 element: Enjoy Nature in Luxury

   2. Place the following content in a paragraph:

      • Pacific Trails Resort offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order breakfast each morning.

   3. Place the following content in an unordered list:

      • Unwind in the heated outdoor pool and whirlpool

      • Explore the coast on your own or join our guided tours

      • Relax in our lodge while enjoying complimentary appetizers and beverages

      • Savor nightly fine dining with an ocean view

   4. Contact information:

      • Place the address and phone number information within a div below the unordered list. Use line break tags to help you configure this area and add extra space between the phone number and the footer area.

      • Pacific Trails Resort

      • 12010 Pacific Trails Road

      • Zephyr, CA 95555

      • 888-555-5555

5. Wireframe Footer Area: Configure the copyright and e-mail address information within a footer element. Also configure small text size (use the element) and italics font style (use the phrase element). The copyright information is

   • Copyright 2020 Pacific Trails Resort

   • Place your name in an e-mail link on the line under the copyright.

   The web page in Figure 2.30 may seem a little sparse, but dont worry. As you gain experience and learn to use more advanced techniques, your pages will look more professional. White space (blank space) on the page can be added with tags where needed. Your page does not need to look exactly the same as the sample. Your goal at this point should be to practice and get comfortable using HTML. Save your file in the pacific folder and name it index.html.