Problem

Pacific Trails Resort Case StudyIn this chapter's case study you will use the existing...

Pacific Trails Resort Case Study

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 have five tasks in this case study:

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

2. Update the pacific.css external stylesheet file.

3. Update the Home page: index.html.

4. Update the Yurts page: yurts.html.

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

Task 1. Create a folder called ch5pacific to contain your Pacific Trails Resort website files. Copy the index.html, yurts.html, and pacific.css files from the Chapter 4 Case Study ch4pacific folder. Copy the following files from the chapter5/casestudystarters/pacific folder in the student files and place them in your ch5pacific folder: coast.jpg, favicon.ico, marker.gif, sunset.jpg, trail.jpg, and yurt.jpg.

Task 2. The External Stylesheet. Launch a text editor and open the pacific.css external style sheet file.

1. Add declarations for the header element selector to display the background image named sunset.jpg on the right without any repeats.

2. Add a style rule to configure an h3 element selector with #000033 text color.

3. Configure a ul element selector to display the marker.gif file as the list marker ("bullet").

Save your pacific.css file.

Test your index.html page in a browser and notice that the logo header area seems a bit crowded. To fix this, add some extra space with the CSS padding property (see Chapter 6), and add the declaration shown below to the hi element selector:

padding: 10px;

Save the file. Check your syntax with the CSS validator (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. Add an tag on a new line below the h2 element. Configure the tag to display the coast.jpg image. Configure the alt, height, and width attributes for the image. Save and test your page in a browser. It should look similar to Figure.

Task 4. The Yurts Page. Launch a text editor and open the yurts.html file. You will modify this file to display the yurt.jpg image below the h2 element and configure it 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.

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.

1. Modify the page title area as appropriate.

2. Change the h2 text to be Activities at Pacific Trails.

3. Modify the tag to display the trail.jpg image.