In this chapter’s case study you will use the existing Pacific Trails website (Chapter) as...

In this chapter’s case study you will use the existing Pacific Trails website (Chapter) 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 chllpacific to contain your Pacific Trails Resort website files. Copy the files from the Chapter 10 Case Study chlOpacific folder. Copy the following files from the chapterll/casestudystarters folder in the student files and save them in your chllpacific folder: pacifictrailsresort.mp4, pacifictrailsresort.ogv, pacifictrailsresort.jpg, and pacifictrailsresort.swf. Copy the following files from the chapterll/starters/gallery folder in the student files and save them in your chllpacific folder: photo2.jpg, photo3.jpg, photo4.jpg, photo6.jpg, photo2thumb.jpg, photo3thumb.jpg, photo4thumb.jpg, and photo6thumb.jpg.

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 colorproperty. 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). Replace the image with an HTML5 video control. Configure the video, source, and embed elements to work with the following files: pacifictrailsresort.mp4, pacifictrailsresort.ogv, pacifictrailsresort.swf, and pacifictrailsresort.jpg. 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. Locate the #content imgselector which is configured with style rules to float to the left and have padding on the right.

Add the #content video and #content embed selectors to the style rule as follows:

#content img, #content video, #content embed { float: left; padding-right : 20px; }

Save the pacific.css file. Launch a browser and test your new index.html page. It should look similar to Figure.

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 contentdiv 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 content div. This gallery will initially display a placeholder image within a figure element and four thumbnail images. Code an img element that displays photo2.jpg 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. By default, the left float configured for the #content img selector is applied to the images in the gallery. To change this, code a float : none; style rule on the #gallery img selector. 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 480px. Save the pacific.css file.

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

New Pacific Trails Resort activities page.

In this Hands-On Practice you will use CSS positioning, opacity, and transition properties to configure an interactive image gallery with CSS and HTML. This is a slightly different version of the image gallery than the web page you created in Hands-on Practice.

Figure shows the initial display of the gallery (see the student files chapterll/gallery/gallery.html) with a semi-opaque placeholder image. When you place the mouse over a thumbnail image, the larger version ofthat image is gradually displayed along with a caption (see Figure). If you click the thumbnail, the image will display in its own browser window.

Initial display of the gallery.

The new photo gradually displays.

Create a new folder called gll. Copy all the images from the chapterll/starters/gallery folder in the student files to the new gll folder.

Launch a text editor and modify the chapterl/template.html file to configure a web page as indicated:

1. Configure the text, “Image Gallery”, within an hi element and within the title element.

---

2. Code a div element assigned to the id named gallery.This div will contain a placeholder figure element and an unordered list that contains the thumbnail images.

---

3. Configure a figure element within the div. The figure element will contain a placeholder img element that displays photol.jpg.

---

4. Configure an unordered list within the div. Code six li elements, one for each thumbnail image. The thumbnail images will function as image links with a : hoverpseudo-class that causes the larger image to display on the page. We’ll make this all happen by configuring an anchor element containing both the thumbnail image and a span element that comprises the larger image along with descriptive text. An example of the first li element is

Golden Gate Bridge

---

5. Configure all six li elements in a similar manner. Substitute the actual name of each image file for the href and src values in the code. Write your own descriptive text for each image. Use photo2.jpg and photo2thumb.jpg in the second li element. Use photo3.jpg and photo3thumb.jpg in the third li element, and so on for all six images. Save the file as index.html in the gll folder. Display your page in a browser. You’ll see the placeholder image followed by an unordered list with the thumbnail images, the larger images, and the descriptive text.

---

6. Now, let’s add CSS. Open your file in a text editor and code a style element in the head section. Configure embedded CSS as follows:

a. Configure the body element selector with a dark background color (#333333) and a light gray text color (#eaeaea).

---

b. Configure the gallery id selector. Set position to relative. This does not change the location of the gallery but sets the stage to use absolute positioning on the span element relative to its container (#gallery) instead of relative to the entire web page document.

---

c. Configure the figure element selector. Set position to absolute, left to 280px, text-align to center and opacity to .25. This will cause the figure to initially be semi-opaque.

---

d. Configure the unordered list within the #gallery with a width of 300 pixels and no list marker.

---

e. Configure the list item elements within the #gallery with inline display, left float, and 10 pixels of padding.

---

f. Configure the img elements within the #gallery to not display a border.

---

g. Configure anchor elements within the #gallery with no underline, #eaeaea text color, and italic text.

---

h. Configure span elements within the #gallery. Set position to absolute, left to -îooopx (which causes them not to display initially in the browser viewport), and opacity to 0. Also configure a three second ease-in-out transition.

#gallery span { position: absolute; left: -1000px; opacity: 0;-webkit-transition: opacity 3s ease-in-out;-moz-transition: opacity 3s ease-in-out;-o-transition: opacity 3s ease-in-out; transition: opacity 3s ease-in-out; }

---

i. Configure the span elements within the #gallery to display when the web visitor hovers the mouse over the thumbnail image link. Set position to absolute, top to 15px, left to 320px, centered text, and opacity to 1.

#gallery a:hover span { position: absolute; top: 16px; left: 320px;text-align: center; opacity: 1; }

Save your file in the gll folder and display it in a browser. Compare your work to Figure.

Figure, and the student files (chapterll/gallery/gallery.html).