Pacific trails resort chapter 11

Chapter 11

Pacific Trails Resort Case Study

In this chapter’s case study you will use the existing Pacific Trails website ( Chapter 10 ) as a starting point to create a new version of the website that incorporates multimedia and interactivity. You have four tasks in this case study:

1. Create a new folder for this Pacific Trails case study.

2. Modify the style sheet (pacific.css) to configure a transition for the navigation hyperlink color.

3. Add a video to the home page (index.html) and update the external CSS file.

4. Configure an image gallery on the Activities page (activities.html) and update the external CSS file.

Task 1: Create a folder called ch11pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 10 Case Study ch10pacific folder. Copy the following files from the chapter11/casestudystarters folder in the student files and save them in your ch11pacific folder: pacifictrailsresort.mp4, pacifictrailsresort.ogv, pacifictrailsresort.png, and pacifictrailsresort.swf. Copy the following files from the chapter11/starters/gallery folder in the student files and save them in your ch11pacific folder: photo2.png, photo3.png, photo4.png, photo6.png, photo2thumb.png, photo3thumb.png, photo4thumb.png, and photo6thumb.png.

Task 2: Configure a Navigation Transition with CSS. Open pacific.css in a text editor. Locate the nav a selector. Code additional style declarations to configure a three-second ease-out transition in the color property. Save the file. Display any of the web pages in a browser that supports transitions and place your mouse over a navigation link. You should see a gradual change in the color of the text in the navigation link.

Task 3: Configure the Video. Launch a text editor and open the home page (index.html). Code an HTML5 video control below the h2 element. Configure the video, source, and embed elements to work with the following files: pacifictrailsresort.mp4, pacifictrailsresort.ogv, pacifictrailsresort.swf, and pacifictrailsresort.png. The dimensions of the video are 320 pixels wide by 240 pixels high. Save the file. Check your HTML syntax using the W3C validator ( http://validator.w3.org ). Correct and retest if necessary.

Next, configure the CSS. Launch a text editor and open pacific.css.

Code CSS above the media queries to configure the style rule for the video element selector and embed element selector as follows:

Figure 11.21 Pacific Trails Resort home page.

Task 4: Configure the Image Gallery. Launch a text editor and open activities.html. Modify the page by adding an image gallery within the main element above the footer area. You’ll need to modify both the activities.html file and the pacific.css file. Use Hands-On Practice 11.8 as a guide and configure a div assigned to the gallery id within the main element. This gallery will initially display a placeholder image within a figure element and four thumbnail images. Code an img element that displays photo2.png within a figure element. Code an unordered list within the gallery div that has four li elements, one for each thumbnail image. The thumbnail images will function as image links with a:hover pseudo-class that causes the larger image to display on the page. Within each li element, configure an anchor element to contain both the thumbnail image and a span element that contains the larger image along with descriptive text. Configure the dimensions of the larger images to be 200 pixels wide by 150 pixels high. Save the activities.html file.

Open pacific.css in a text editor. Code CSS above the media queries for the gallery as shown in Hands-On Practice 11.8. Configure a height of 200px for the gallery id. Configure the text to be left-aligned and with a color that it is readable on a white background. Also add a style declaration to the footer element selector to clear all floats. Finally, add style declarations to the media queries to prevent mobile devices from displaying the gallery on devices with browser viewport width less than 37.5em. Save the pacific.css file.

Launch a browser and test your new Activities page (activities.html). It should look similar to Figure 11.22 .

Chapter 12

Pacific Trails Resort Case Study

In this chapter’s case study you will use the existing Pacific Trails website ( Chapter 11 ) as a starting point to create a new version of the website that implements the description meta tag on each page. You have three tasks in this case study:

1. Create a new folder for this Pacific Trails case study.

2. Write a description of the Pacific Trails Resort business.

3. Code a description meta tag on each page in the website.

Task 1: Create a folder called ch12pacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 11 Case Study ch11pacific folder.

Task 2: Write a Description. Review the Pacific Trails Resort pages that you created in earlier chapters. Write a brief paragraph that describes the Pacific Trails Resort site. Edit the paragraph down to a description that is only a few sentences and less than 25 words in length.

Task 3: Update Each Page. Open each page in a text editor and add a description meta tag to the head section. Save the files and test them in a browser. They will not look different, but they are much friendlier to search engines!