New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 8 Case 2 Willet Creek Golf Course
Willet Creek Golf Course Willet Creek is a popular golf course resort in central Idaho. You’ve been asked to work on the design of the resort’s Web site by Michael Carpenter, the head of promotion for the resort. He would like you to add some CSS3 visual effects for drop shadows and gradients. Figure 8-66 shows a preview of the screen version of the Web page.
Complete the following:
1. In your text editor, open the willettxt.htm and wceffectstxt.css files from the tutorial.08\case2 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as willet.htm and wceffects. css, respectively.
2. Go to the wceffects.css file and create a shadow effect for the body element. The effect should contain two box shadows, both with a color value of (31, 61, 31) and an opacity of 0.9. Place the first shadow with a horizontal offset of 20 pixels, a vertical offset of 0 pixels, and a blur of 25 pixels. Do the same for the second shadow, except place the shadow with a horizontal offset of 220 pixels.
3. Set the opacity of the div elements nested within the aside elements to 75%. Use both the CSS3 opacity style and the IE Alpha filter. Add a box shadow that has a color value of (101, 101, 101) with an opacity of 0.7. Set the horizontal and vertical offsets to 5 pixels and the blur to 10 pixels. You do not have to add an IE filter for the box shadow.
4. Save your changes to the file, and then return to the willet.htm file in your text editor. Add a link to the wceffects.css style sheet file, using the style sheet for screen devices that have a minimum width of 501 pixels. Add the same media query for the wclayout.css style sheet file.
5. Use an Internet Explorer conditional comment for versions of IE before version 9 to link to the wclayout.css and wceffects.css style sheet files for screen devices.
6. Save your changes to the document, and then open the willet.htm file in your Web browser. Verify that the appearance and layout of your page resemble those shown in Figure 8-66.
7. Many golfers playing the courses at Willet Creek like to receive information and advice about each hole. Michael would like you to create a mobile version of the Web page so that golfers with mobile devices can view information about the course during their rounds. Figure 8-67 shows a preview of the Web app you’ll create.
8. Open the wcmobiletxt.css file from the tutorial.08/case2 folder in your text editor. Enter your name and the date in the comment section of the file, and then save it as wcmobile.css.
9. Within the style sheet file, add a style rule to hide the navigation list in the header, the inline image in the header, the main section, the aside
element, and the page footer.
10. Set the background color to the value (107, 140, 80).
11. For the header element, create a style rule to: a) change the background color to the value (151, 201, 151) with the image file willet.jpg placed in the left-center of the background with no tiling; b) set the size of the background image to contain; c) set the width to 100%; and d) set the height to 50 pixels.
12. The navigation list containing links to each of the 18 holes in the Grand Course has the id holes. Create a style rule to set the width of this navigation list to 100%.
13. For h1 elements within the holes navigation list, create a style rule to: a) set the font size to 25 pixels; b) set the font color to white; c) set the margin to 15 pixels; and d) center the text of the heading.
14. For list items in the holes navigation list, create a style rule to: a) display the items as blocks; b) add the background image file arrow.png to the right-center of the background with no tiling; c) set the width to 60% and the height to 50 pixels; d) add top and bottom margins of 5 pixels, and add left and right margins of auto; e) add a 1-pixel-wide solid white border to each list item and create rounded borders with a radius of 10 pixels; and f) add inset box shadows to the list items with a color value of (51, 51, 51) and an opacity of 50% (the inset shadows should appear in the lowerleft corner of each list item with a horizontal offset of 10 pixels, a vertical offset of 5 pixels, and a blur of 20 pixels).
15. For hypertext links within each list item, add a style rule to: a) display the link as blocks; b) set the width to 100% and the line height to 50 pixels; c) set the font color to white; and d) horizontally center the text of the link.
16. For odd-numbered list items, set the background color to the value (187, 105, 123). (Hint: Use the pseudo-class nth-of-type(odd).) For even-numbered list items, set the background color to the value (150, 80, 100).
17. The preceding styles will be applied by default to the page in portrait orientation. Create an @media rule for the page in landscape orientation.
18. Add the following style rule for list items displayed in landscape orientation: a) set the width to 30%; b) float the list items on the left; and c) set the margins to 5 pixels.
19. Save your changes to the style sheet, and then return to the willet.htm file in your text editor.
20. Within the willet.htm file, insert a viewport meta element.
21. Create a link to the wcmobile.css file to be accessed by only screen devices with maximum widths of 500 pixels.
22. Save your changes to the file, and then open the willet.htm file in your mobile device or with your browser window resized to a width of less than 500 pixels. Verify that for smaller screen widths, the mobile version of the page is displayed. Further verify that the layout of the links to individual holes changes depending on whether the page is in portrait or landscape orientation.
23. Submit your completed files to your instructor.
There are no reviews yet.