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.27 . The site map describes the architecture of the website—a Home page with three main content pages: Yurts, Activities, and Reservations.
Figure 2.27 Pacific Trails Resort site map.
Figure 2.28 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.28 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 (thumb drive or 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.29 .
Figure 2.29 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 title—the company name is a good choice for a business website.
2. Wireframe Header Area: Code the header element with the text, “Pacific Trails Resort” contained within an h1 heading element.
3. Wireframe Navigation Area: Place the following text within a nav element with bold text (use the <b> 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.
d. Place the following within an h2 element: Enjoy Nature in Luxury
d. Place the following content in a paragraph:
2. Pacific Trails Resort offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
d. Place the following content in an unordered list:
3. Private yurts with decks overlooking the ocean
3. Activities lodge with fireplace and gift shop
3. Nightly fine dining at the Overlook Cafe
3. Heated outdoor pool and whirlpool
3. Guided hiking tours of the redwoods
d. Contact information:
4. 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.
4. Pacific Trails Resort
4. 12010 Pacific Trails Road
4. Zephyr, CA 95555
1. Wireframe Footer Area: Configure the copyright and e-mail address information within a footer element. Also configure small text size (use the <small> element) and italics font style (use the <i> phrase element). The copyright information is
Copyright © 2016 Pacific Trails Resort
Place your name in an e-mail link on the line under the copyright.
The web page in Figure 2.29 may seem a little sparse, but don’t 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 <br> 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.
Task 3: The Yurts Page. Create the Yurts page shown in Figure 2.30 . A productivity technique is to create new pages based on existing pages so you can benefit from your previous work. Your new Yurts page will use the index.html page as a starting point. Open the index.html page for the Pacific Trails Resort website in a text editor. Select File > Save As and save the file with the new name of yurts.html in the pacific folder.
Figure 2.30 The new Yurts page.
Now you are ready to edit the page.
1. Web Page Title: Modify the page title. Change the text contained between the <title> and </title> tags to Pacific Trails
Resort :: Yurts.
2. Wireframe Main Content Area:
a. Replace the text contained within the <h2> tags with The Yurts at Pacific Trails.
b. Delete the Home page paragraph, unordered list, and the contact information.
c. The Yurts page contains a list with questions and answers. Add this content to the page using a description list. Use the <dt> element to contain each question. Configure the question to display in bold text (use the <strong> element). Use the <dd> element to contain the answer to the question. The questions and answers are as follows:
· What is a yurt?
Our luxury yurts are permanent structures four feet off the ground. Each yurt has canvas walls, a wooden floor, and a roof dome that can be opened.
· How are the yurts furnished?
Each yurt is furnished with a queen-size bed with down quilt and gas-fired stove. The luxury camping experience also includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge.
· What should I bring?
Bring a sense of adventure and some time to relax! Most guests also pack comfortable walking shoes and plan to dress for changing weather with layers of clothing.
Save your page and test it in a browser. Test the hyperlink from the yurts.html page to index.html. Test the hyperlink from the index.html page to yurts.html. If your links do not work, review your work with close attention to these details:
· Verify that you have saved the pages with the correct names in the correct folder.
· Verify your spelling of the page names in the anchor tags.
· After you make changes, test again.