Unit 8. Review "A" Dessert Web

Unit 8. Review "A" Dessert Web

Tutorial 8 Review A

dessertWeb

1.    In your text editor, open the recipetxt.htm and dweffectstxt.css files from your student data files.  Enter your name and the date in the comment section of each file.  Save the files as recipe.htm and dweffects.css, respectively.

2.    Go to the dweffects.css file in your text editor.  Create a style rule for the body element to add two box shadows.  One shadow should be placed on the right edge of the body page with the color value (211, 211, 211) and an opacity of 0.5.  Set the horizontal offset to 10 pixels, the vertical offset to 0 pixels and the blur to 15 pixels.  Create the same drop shadow on the left edge of the page body as well.  Make sure you use the browser extensions!

3.    Apply the following style rules to each list item in the horizontal navigation list of the page header:

a.    set the background color to the value (224, 238, 238);

b.    add rounded corners 10 pixels in radius;

c.    create two inset box shadows: one white shadow located in the upper left corner offset 3 pixels in the horizontal and vertical direction with a blur of 2 pixels and the other, a shadow in the lower right corner with a color value of (147, 207, 207) offset 5 pixels in the horizontal and vertical direction with a blur of 5 pixels.

4.    Add box shadows to the article element with the following properties:

a.    create an inset box shadow in the lower right corner with a color value of (171, 171, 171), offset 15 pixels in the horizontal and vertical direction and with a blur of 75 pixels;

b.    create an external shadow located in the lower right corner with a color value of (101, 101, 101), offset 5 pixels in the vertical and horizontal direction with a blur of 5 pixels.

5.    Add a horizontal background gradient to the blockquote element with the following properties:

a.    set the gradient to go from the left to the right starting with the color value (166, 230, 230), having a color stop at the 5% point with a value (231, 231, 231) and ending with the color value (255, 255, 255) 15% of the way across the blockquote; Again, don’t forget to use the browser extensions!   Note: You can control the direction of the gradient by adding a position parameter to the linear gradient.  By default, the colors are evenly distributed across the gradient but you can specify the location of each color by adding color stops to the linear gradient as follows:  

linear-gradient(left, rgb(166, 230, 230), (231, 231, 231) 5%, rgb(255, 255, 255) 15%);

b.    create the same color gradient using the Webkit gradient function with a color stop for the middle color occurring at the 33% point;   Note: The -webkit- browser did not support this gradient style before 2010, so this Webkit browser extension must be added for those users:

-webkit-gradient(linear, left center, 15% center, from rgb(166, 230, 230)), color-stop(33%, rgb(231, 231, 231)), to (rgb(255, 255, 255)));

               

 c. using the Internet Explorer Gradient filter, create a horizontal gradient      that   starts with the hexadecimal color value DEF4F4 and ends with the value FFFFFF.  Note: Earlier versions of Internet Explorer 10, do not   support gradients either so you must add the following for those users:

Gradient(gradientType=1, startColorStr=#DEF4F4, endColorStr=#FFFFFF);        

6.    Save your changes to the file and then return to the recipe.htm file in your text editor.  Add a link to the dweffects.css style sheet file.  Specify that the dwlayout.css and dweffects.css style sheets should be used with screen devices.

7.    Save your changes to the file and then view the recipe.htm in your Web browser to view its appearance.   

8.    When the Web page is printed, the first page should display the recipe description and ingredients and the directions on the second page.  In your text editor, open the dwprint.css  file from your student data file.  Enter your name and the date in the comment section of the file and then save it as dwprint.css.

9.    Set the page size of the printout to 8.5 x 11 inches in portrait orientation with a margin of 0.5 inch.

10. Hide the following page elements on the printout: page header, left section, right section, all navigation lists, the aside element, the page footer, the center hgroup h2 and the last paragraph in the article element.  Hint: Use last-child to distinguish the last paragraph in the article element.

11. Set the font size of all h1 headings to 200% with a bottom margin of 0.2 inches.  Set the font size of all h2 elements to 150% with a top margin of 0.5 inches.

12.Set the line height of all list items to 1.5 em.

13. Set the left margin of all ordered lists to 0.5 inches, displaying a decimal value.  Note: Use the list-style-type: decimal style.

14. Set a page break to always occur before the last h2 element in the center section of the page.  Note: Use the last-of-type style.

15.Save your changes to the file and then return to the recipe.htm file in your text editor.  Add a link to the dwprint.css style sheet file, setting the style sheet to be used with a print device.

16.Save your changes to the file and then view the printed version of the file or preview the printed version in your Web browser.  Verify that the 2 page layout has the first page displaying the recipe description and ingredients and the directions on the second page.