Home / Expert Answers / Computer Science / in-this-chapter-39-s-case-study-you-will-use-the-existing-pacific-trails-chapter-2-w-pa744

(Solved): In this chapter's case study, you will use the existing Pacific Trails (Chapter 2) w ...



In this chapters case study, you will use the existing Pacific Trails (Chapter 2) website as a starting point while you crea

You have five tasks in this case study:
1. Create a new folder for the Pacific Trails Resort website.
2. Create an external s

- Global styles for the document (use the body element selector) with background color white (\#FFFFFF) and text color dark g

Task 3: The Home Page. Launch a text editor and open the home page, index.html.
a. Associate the pacific.css external style s

FIGURE 4.27
First version of the new index.html page.
Pacific Trails Resort
Home Yurts Activities Reservations
Enjoy Nature i

Task 4: The Yurts Page. Launch a text editor and open the yurts.html file. An example of the new version of the web page is s

FIGURE 4.28
First version of the new yurts.html page.
Pacific Trails Resort
Home Yurts Activities Reservations
The Yurts at P

Task 5: Update the CSS. You may notice an empty space between the header area and the navigation area. The empty space is the

In this chapter's case study, you will use the existing Pacific Trails (Chapter 2) website as a starting point while you create a new version of the website that uses an external style sheet to configure color (see Figure 4.25). FIGURE 4.25 New Pacific Trails Resort Home page with color swatches. Pacific Trails Resort Home Yurts Activities Reservations Enjoy Nature in Luxury 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. - Relax in our lodge while enjoying complimentary appetizers and beverages - Savor nightly fine dining with an ocean view - Unwind in the heated outdoor pool and whirlpool - Explore the coast on your own or join our guided tours Pacific Trails Resort 12010 Pacific Trails Road Zephyr, CA 95555 Copyright Pacific Trails Resort youfirsthame avourlasthame.com You have five tasks in this case study: 1. Create a new folder for the Pacific Trails Resort website. 2. Create an external style sheet named pacific.css. 3. Update the Home page: index.html. 4. Update the Yurts page: yurts.html. 5. Update the pacific.css style sheet. Task 1: Create a folder called ch4pacific to contain your Pacific Trails Resort website files. Copy the index.html and yurts.html files from the Chapter 2 Case Study pacific folder. Task 2: The External Style Sheet. Launch a text editor. You will create an external style sheet named pacific.css. A sample wireframe is shown in Figure 4.26. - Global styles for the document (use the body element selector) with background color white (\#FFFFFF) and text color dark gray (\#555555). - Style rules for the header element selector that configure background color (\#002171) and text color (\#FFFFFF). - Styles for the nav element selector that configure sky blue background color (\#BBDEFB). - Styles for the h2 element selector that configure medium blue text color (\#1976D2). - Styles for the dt element selector that configure dark blue text color (\#002171). - Styles for a class named resort that configure medium blue text color (\#1976D2). Save the file as pacific.css in the ch4pacific folder. Check your syntax with the CSS validator at http: / /jigsaw.w3.org/css-validator. Correct and retest if necessary. Task 3: The Home Page. Launch a text editor and open the home page, index.html. a. Associate the pacific.css external style sheet. Add a link element in the head section to associate the web page with the pacific.css external style sheet file. b. Find the company name (Pacific Trails Resort) in the first paragraph below the h2. Configure a span that contains this text. Assign the span tag to the resort class. c. Look for the company name (Pacific Trails Resort) directly above the street address. Configure a span that contains this text. Assign the span tag to the resort class. d. Assign the div that contains the address and phone information to an id named contact. We'll configure CSS for this id in a future case study. Save and test your index.html page in a browser. It should be similar to the page shown in Figure 4.27, and you'll notice that the styles you configured in the external CSS file are applied! FIGURE 4.27 First version of the new index.html page. Pacific Trails Resort Home Yurts Activities Reservations Enjoy Nature in Luxury 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. - Relax in our lodge while enjoying complimentary appetizers and beverages - Savor nightly fine dining with an ocean view - Unwind in the heated outdoor pool and whirlpool - Explore the coast on your own or join our guided tours Pacific Trails Resort 12010 Pacific Trails Road Zephyr, CA 95555 Copyright (8) 2022 Pacific Trails Resort yourfirstname@yourlastname.com Task 4: The Yurts Page. Launch a text editor and open the yurts.html file. An example of the new version of the web page is shown in Figure 4.28. a. Add a link element in the head section to associate the web page with the pacific.css external style sheet file. Save and test your new yurts.html page. It should look similar to the one shown in Figure 4.28 . FIGURE 4.28 First version of the new yurts.html page. Pacific Trails Resort Home Yurts Activities Reservations The Yurts at Pacific Trails What is a yurt? Our luxury yurts are permanent structures four feet off the ground. Each yurt is fully enclosed with 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. Your luxury camping experience includes electricity and a sink with hot and cold running water. Shower and restroom facilities are located in the lodge. What should I bring? Most guests pack comfortable walking shoes and plan to dress for changing weather with light layers of clothing. It's also helpful to bring a flashlight and a sense of adventure! Copyright Pacific Trails Resort yourfirstname@vourlastname.com Task 5: Update the CSS. You may notice an empty space between the header area and the navigation area. The empty space is the default bottom margin of the h1 element. Refer back to Hands-On Practice 4.5 (Part 2) and recall that a technique to cause the browser to collapse this empty space is to configure the margin. To set the bottom margin of the h1 element to 0 , code the following style for an h1 element selector in the pacific.css file: margin-bottom: 0 ; Save the pacific.css file. Launch a browser and test your index.html and yurts.html pages. The gap between the element and the navigation area should be gone. Your home page should now display similar to Figure 4.25. Click the navigation link to display the yurts.html page; it should also render with the new styling from the pacific.css external style sheet. This case study demonstrated the power of CSS. Just a few lines of code have transformed the display of the web pages in the browser.


We have an Answer from Expert

View Expert Answer

Expert Answer


.Open a text editor (such as Notepad on Windows or TextEdit on Mac).Crea
We have an Answer from Expert

Buy This Answer $5

Place Order

We Provide Services Across The Globe