Pacific Trails Resort Case Study student files and place them in your ch$5$pacific folder: coast.jpg$,$ marker.gif,

sunset.jpg$,$ trail.jpg$,$ and yurt.jpg$.$

Task $2$: The External Style Sheet. Launch a text editor and open the pacific.css

external style sheet file.

The body element selector. Add a declaration that configures Arial,

Helvetica, or sans$-$serif font typeface.

The header element selector. Add declarations to display the background

image named sunset.jpg on the right without any repeats. Also configure

declarations to set $400\%$ line$-$height and $1em$ text$-$indent.

The nav element selector. Add a declaration to configure bold text.

The nav a element selector. Code styles to eliminate the display of the

underline for hyperlinks $($hint: use the nav a descendant selector with text$-$

decoration: none;$)$

The hl element selector. Add a declaration to display text in Georgia,

Times New Roman, or serif font typeface.

The $h2$ element selector. Add a declaration to display text in Georgia,

Times New Roman, or serif font typeface.

The h$3$ element selector. Code styles

Task $3$: The Home Page. Launch a text editor and open the home page,

index html$.$ Remove the b$,$ small, and i tags from the page. Code a div $-$

element with an tag between the nav element and the main element.

Configure the tag to display the coast.jpg image. Configure the alt,

height, and width attribute for the image. Note: In order for your page to

look similar to Figure $5\mathrm{.}31,$ use $100\%$ for the value of the width attribute. A

percentage width causes the image to fill a percentage of the width of the

parent element. The W$3$C HTML validator may indicate that the percentage

value is invalid. We will overlook the error for this case study. In Chapter $6,$

you'$1$l learn to use CSS to configure width and height. Save and test your

page in a browser. It should look similar to Figure $5\mathrm{.}31.$

Task $4$: The Yurts Page. Launch a text editor and open the yurts.html file.

Remove the $b,$ small, and i tags from the page. Next, you will modify this

file to display the yurt.jpg image in a similar manner as you configured the

coast.jpg image on the home page. Save and test your new yurts.html page.

It should look similar to the one shown in Figure $5\mathrm{.}32.$

Task $5$: The Activities Page. Launch a text editor, open the yurts.html document,

and save the file as activities.html$-$this is the start of your new activities page. Modify the page title area as appropriate.

Modify the tag to display the trail.jpg image.

Change the $h2$ text to the following: Activities at Pacific Trails.

Delete the description list.

Configure the following text using $h3$ tags for the headings and paragraph

tags for the sentences.

"Hiking

Pacific Trails Resort has $5$ miles of hiking trails and is adjacent to a state

park. Go it alone or join one of our guided hikes.

Kayaking

Ocean kayaks are available for guest use.

Bird Watching

While anytime is a good time for bird watching at Pacific Trails, we offer

guided birdwatching trips at sunrise several times a week."

Save your activities.html file. Launch a browser and test your new

activities.html page. It should look similar to Figure $5\mathrm{.}33.$

As you view your web pages in a browser, notice how the use of graphics and

typography creates a more appealing web presence for Pacific Trails Resort.

In this chapter's case study, you will use the existing Pacific Trails $($Chapter $4)$

website as a starting point to create a new version of the website that

incorporates images. You will modify the design of the pages to display a large

image on each page, as indicated in the wireframe in Figure $5\mathrm{.}30.$ You will also

create a new page, the Activities page.

FIGURE $5\mathrm{.}30$

New Pacific Trails wireframe.

wrapper

header

nav

div with large image

main

div with contact info

footer

You have five tasks in this case study:

Create a new folder for the Pacific Trails Resort website.

Update the pacific.css external style sheet file.

Update the Home page: index.html$.$

Update the Yurts page: yurts.html$.$

Create a new Activities page: activities.html$.$

Task $1$: Create a folder called ch$5$pacific to contain your Pacific Trails Resort

website files. Copy the files from the Chapter $4$ Case Study ch$4$pacific folder.

Copy the following files from the chapter$5/$casestudystarters$/$pacific folder in the