Pacific Trails Resort Case Study
In this chapter’s case study you will use the existing Pacific Trails website ( Chapter 9 ) as a starting point. You will add a new page to the Pacific Trails website—the Reservations page. Refer back to the site map for the Pacific Trails website in Chapter 2 , Figure 2.27 . The Reservations page will use the same two-column layout as the other Pacific Trails web pages. You’ll apply your new skills from this chapter and code a form in the content area of the Reservations page.
You have four tasks in this case study:
1. Create a folder for the Pacific Trails website.
2. Modify the CSS to configure style rules needed for the Reservations page.
3. Create the Reservations page: reservations.html. Your new page will be similar to Figure 10.33 when you have completed this step.
4. Configure HTML5 form control features on the Reservations page.
Task 1: Create a folder called ch10pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 9 Case Study ch9pacific folder to your new ch10pacific folder.
Task 2: Configure the CSS. Review Figure 10.33 and the wireframe in Figure 10.34 . Notice how the text labels for the form controls are on the left side of the content area but contain right-aligned text. Notice the empty vertical space between each form control. Open pacific.css in a text editor. You will code the following styles above the media queries.
Figure 10.33 The new Pacific Trails Reservations page.
a. Configure a label element selector. Set left float, block display, right alignment for text, a width of 120 pixels, and an appropriate amount of right padding.
b. Configure the input element and textarea element selectors. Set block display and 20 pixels of bottom margin.
c. Configure the submit button with a 130px left margin.
d. Configure style rules to optimize the display on smartphone-sized mobile devices by rendering the label text above each form control and eliminating the submit button’s left margin. Add the following style rules to the media query that targets a maximum width 37.5em:
e. label { float: none;
f. text-align: left; }
input[type="submit"] { margin-left: 0; }
Save the pacific.css file.
Figure 10.34 The sketch of the form.
Task 3: Create the Reservations Page. A productivity technique is to create new pages based on existing pages so you can benefit from your previous work. Your new Reservations 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 reservations.html in the ch10pacific folder.
Now you are ready to edit the reservations.html file.
1. Modify the page title. Change the text contained between the
and tags to: Pacific Trails Resort :: Reservations.
2. The reservations page will not feature a large image. Remove the div element assigned to the homehero id.
3. Replace the text contained within the
tags with: Reservations at Pacific Trails.
4. Delete the paragraph and the unordered list. Do not delete the logo, navigation, contact information, or footer areas of the page.
5. Position your cursor on a blank line below the h2 element. Configure an h3 element with the following text: Contact Us Today!
6. Position your cursor on a blank line under the h3 element. You are ready to configure the form. Begin with a
tag on a blank line after the submit button.
Save your reservations.html page and test it in a browser. It should look similar to the page shown in Figure 10.33 . If you are connected to the Internet, submit the form. This will send your form information to the server-side script configured in the