Thursday, June 26, 2014

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.                                            



Unit 8. Tutorial 8- Tree and Book

Unit 8. Tutorial 8- Tree and Book
Tutorial 8
Tree and Book

1.    In your text editor, open treebooktxt.htm from your student data files.  Enter your name and the date  in the comment section of the file.  Save the file as treebook.htm.
2.    Open treebook.htm in your Web browser and view its appearance.  The owner of the Web page wants to update this page by using some advanced CSS styles that can be used to add interesting visual effects to the page. 
3.    The first change will be to add drop shadows around each of the letters for the h1 heading Stanislaw Dubcek (1903-1981).  Drop shadows can be added using the text-shadow style as follows:
text-shadow: color offsetX offsetY blur;
where color is the color of the shadow, and offsetX and offsetY are the distance of the shadow from the text in the horizontal and vertical directions.  Positive values for the offsetX and offsetY move the shadow to the right and down from the text, while negative values move the shadow to the left and up.  The blur parameter defines the amount of space the shadow text is stretched, creating a blurred effect.  The larger the blur value, the less distinct are the borders of the shadow image.  The default blur value is 0 pixels for a text shadow that has very hard and distinct edges.  You can create multiple shadows to the same text by specifying different shadow styles separated by commas.

We are going to apply a text-shadow which will give an embossed effect to the h1 heading in the document- making it appears as if the letters in the heading are raised out from the page.  In your text editor, open the effectstxt.css file from your student data file.  Enter your name and the date in the comment section of the file.  Save the file as effects.css.
4.    Below the comment section, enter the following style rule:

/* Heading text style */

section#main h1{
color: rgb(90, 127, 0);
text-shadow: black 1px 1px 0px,
                  rgba(90, 127, 0, 0.7) 5px 5px 10px;
}
         Save your changes to the file.

5.    Return to the treebook.htm file in your text editor.  Directly below the link element for the layout.css  style sheet, insert another link element that links the document to the effects.css style sheet file.
6.    Save your changes and then reopen the treebook.htm file in your Web browser to see the appearance of the page heading.
7.    The next style that we will learn to apply is called a Box Shadow.  The CSS style to add a box shadow to any page object is:
box-shadow: [inset] color offsetX offsetY blur [spread];
where color, offsetX, offsetY and blur have the same meanings as they do for text shadows. 

The inset keyword is an optional keyword to display shadows within the object.  When the inset keyword is used, the meanings of the offsetX and offsetY values are switched.  Positive offsetX and offsetY values move the inset shadow to the left and up, while negative values move the shadow to the right and down.

The default size of the box shadow is equal to the size of the object, however, the optional spread value allows you to increase or decrease the size of the shadow relative to the size of the element.

As with the text-shadow style, you can apply multiple box shadows by creating a comma separated list of shadow values.

When applying the box shadow, you must always use browser extensions to provide the greatest browser support.

We will now add several box shadows to the Web page.  We will add rounded corners and box shadows in the lower right corner to the four photos.  We will also add a shadow to the table of biographical data about Stanislaw Dubcek.  Finally, we will add an inset shadow to the entire main section of the page, to give it a beveled appearance.  Return to the effects.css file in your text editor.  At the bottom of the file, insert the following style to create rounded corners and drop shadows for every inline image within a figure box:





                  /* Box shadow styles */

                  figure img{
        
                  -moz-border-radius: 25px;
                  -webkit-border-radius: 25px;
                  border-radius: 25px;


                  -moz-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
                  -webkit-box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
                  box-shadow: rgba(0, 0, 0, 0.6) 10px 10px 15px;
}

8.    Add the following style rule to create an interior beveled border for the entire main section:
section#main{
moz-box-shadow: inset rgba(0, 0, 0, 0.3) -5px -5px 10px;
}

9.    Finally add the following style rule to apply a box shadow to the Web table nested within the main section:
section#main table{
-moz-box-shadow: black 5px 5px 5px;
-webkit-box-shadow: black 5px 5px 5px;
box-shadow: black 5px 5px 5px;
}

10.Save your changes to the file and then reload the treebook.htm  file in your Web browser to see the current appearance of the main section of the page.
11. Another style that enriches the appearance of a Web page is to rotate an object using the transform style
transform: effect(params); 
where effect is the transformation function that will be applied to the object and params are any parameters required by the transformation.  The following are 2D transformation functions:
translate(offX, offY) – moves the object offX pixels to the right and     
                                 offsetY pixels down
translate(offX) – moves the object pixels to the right
translate(offY) – moves the object pixels down
scale(x, y) – resizes the object by a factor of x horizontally and a
                  factor of y vertically
scaleX(x) – resizes the object by a factor of x horizontally
scaleY(y) – resizes the object by a factor of y vertically
skew(angleX, angleY) – skews the object by the specified angle,
                                      angleX horizontally and angleY vertically
skewX(angleX) – skews the object by the specified angle, angleX
                           horizontally
skewY(angleY) – skews the object by the specified angle, angleY
                           vertically
rotate(angle) – rotates the object by the specified angle clockwise
                  ( a negative value rotates the object counter-clockwise)
matrix(n, n, n, n, n, n) – applies 2D transformation based on a matrix
                                    of six values

We are going to rotate the bottom two figures on the Web page. Return to the effects.css file in your text editor.  At the bottom of the file, insert the following style rule to rotate the figure box for the lower-left photo 30 degrees counter-clockwise:  ( When applying the browser extensions, the ms-transform browser extension for Internet Explorer must also be used.)
        
         /* Rotate styles */

         figure#photo4{
         -moz-transform: rotate(-30deg);
         -webkit-transform: rotate(-30deg);
         ms-transform: rotate(-30deg);
         transform: rotate(-30deg);
         }

Add the following style rule to rotate the figure box for the lower-right photo 30 degrees clockwise:

         figure#photo5{
         -moz-transform: rotate(30deg);
         -webkit-transform: rotate(30deg);
         ms-transform: rotate(30deg);
         transform: rotate(30deg);
}

12.Save your changes to the file and then reload treebook.htm in your Web browser.  The two figure boxes should be rotated on the page.
13. Now we will learn about color gradients.  We have worked with backgrounds of a single color and now will learn how to use this color gradient where one color gradually blends into another or fades away.  One type of gradient is a linear gradient where the color blending proceeds horizontally or vertically across an object’s background. Again, you must use browser extensions to support the different Web browsers.

Return to the effects.css file in your text editor.  At the bottom of the file, insert the following style rule:
        
/* Style rule to add a dark green vertical gradient t the background of the article element */

         article{
background: -moz-linear-gradient(black, rgb(51, 101, 51) 20%,        
                                                  white 80%);
background: -webkit-linear-gradient(black, rgb(51, 101, 51) 20%,
                                                  white 80%);
background: -ms-linear-gradient(black, rgb(51, 101, 51) 20%,
                                                   white 80%);
background: linear-gradient(black, rgb(51, 101, 51) 20%, white 80%);
}

14.Save your changes to the file and then reopen the treebook.htm  file in your Web browser to see the vertical gradient.
15. Next we will learn how to apply a Border Image.  We will change the appearance of the main photo by adding a graphic border that will make the photo look like it came from a torn piece of paper.  We will use the following style to create our border.
border-image: url(url) slice repeat;
where url  is the source of the border image file, slice is the size of the border image cut off to create the borders, and repeat indicates whether the side borders should be stretched to cover the objects four sides or tiled.  Again, we will need to apply browser extensions.



/* Border image style */

article img{
border-width: 10px;

-moz-border-image: url(“borderimg.png”) 50 repeat;
-webkit-border-image: url(“borderimg.png”) 50 repeat;
border-image: url(“borderimg.png”) 50 repeat;
}

16.Save your changes to the file.  Reload treebook.htm in your Web browser and view the torn paper border image around the main photo in the page.
17. The last visual effect that we will learn is how to create Semi-Transparent Objects.  We will make the two photos at the bottom of the page appear semi-transparent so that part of the background gradient appears through the photos using this style:
opacity: value;
where the value ranges from 0(completely transparent) up to 1(completely opaque).

Return to the effects.css file in your text editor.  At the bottom of the file, insert the following style rule:

/* Styles for semi-transparent images */

figure#photo4, figure#photo5{
opacity: 0.7;
}

18.Save your changes to the file and then reload the treebook.htm in your Web browser to see the final appearance of the Web page.
19. Many visitors to the Tree and Book Web site might like to print out portraits from the pictures on the page.  We are going to learn how to create a CSS style sheet for print media. 

In your text editor, open the printtxt.css style sheet from your student data files.  Enter your name and the date in the comment section of the file.  Save the file as print.css in the same folder.  This style sheet will only be used for print devices.  The other style sheets will be for viewing the page on a computer screen.
20.Return to the treebook.htm file in your text editor.  First, we will add the attribute media= “screen” to the link elements for the layout.css and effects.css style sheets as follows:
<link href= “layout.css” rel= “stylesheet” media= “screen” />
<link href= “effects.css” rel= “stylesheet” media= “screen” />

21.Directly below the link element for the effects.css style sheet, add the following link element:
<link href= “effects.css” rel= “stylesheet” media= “screen” />
<link href= “print.css” rel= “stylesheet” media= “print” />
22.Save your changes to the file and then reload the treebook.htm file in your Web browser.  Confirm that the appearance of the page has not changed.
23. We will now create the print styles.  The first style rule will be to hide the page header, navigation lists and page footer by setting their display properties to none. 

Return to the print.css file in your text editor and add the following style rule:

/* Hide page elements that will not be printed */

header, nav, footer{
display: none;
}

24.Save your changes to the file and then reload treebook.htm in your Web browser to verify that the appearance of the page has not changed.
25. Either print the Web page from within your browser or use your browser’s Print Preview command to preview the printed version of the page.
26. We are now going to make the main photo appear on the first page along with the table of biological information, as well as, the four figure boxes to be resized and placed on their own pages alongside their captions.   To do this, you’ll have to place a page break in the middle of the document directly after the article element containing the main photo and the Web table.

CSS defines printed page by incorporating the entire page in a page box, which is composed of two areas: the page area, which contains the content of the document, and the margin area, which contains the space between the printed content and the edges of the page.  You can specify the size of a page box, the page margins, the internal padding and other features.  The style rules for a page box are contained within the @page{ styles } where styles are the styles applied to the page. 

We will use the @page rule to define the print layout of the Tree and Book page. We will set the page size to 8.5 x 11 inches, in portrait orientation, with 0.5 inch margins. 

Return to the print.css file in your text editor.  Add the following rule at the top of the style sheet, directly after the initial comments:

                  @page{
                             size: 8.5in 11in portrait;
                             margin: 0.5in;
                  }
                 
                  /* Hide page elements that will not be printed */

         Save your changes to the file.

27.When a document is sent to a printer, the browser determines the location of the page breaks unless that information is included as part of the print style.  To specify a page break that occurs either before or after a page element, you apply the style properties:
                    page-break-before: type;
                              page-break-after: type;
where type has the following possible values:
         always: - to always place a page break before or after the element
         avoid: - to never place a page break
         left: - to place a page break where the next page will be a left page
         right: - to place a page break where the next page will be a right page
         auto: - to allow the printer to determine whether or not to insert a page break
         inherit: - to insert the page break style from the parent element

We are going to insert page breaks into the page to control the printed outcome.  We will make the contents of the article element to appear on the first page so we want the page break added directly after the article.  We will also prohibit browsers from inserting page breaks within the article element by using the page-break-inside: avoid; style property.  To control the placement of page breaks in this document, add the following style rule at the bottom of the print.css style sheet:


/* Setting the page breaks in the document */

article{
display: block;
page-break-after: always;
page-break-inside: avoid;
}

Save your changes to the style sheet.
28.To complete the style sheet for printed output, you’ll add style rules for the heading and figure boxes.  We will increase the font size of the h1 heading to 28 points and set the width of the photo to 4 inches, centering both on the page.

At the bottom of the style sheet, insert the following style rule for the h1 heading:

/* Styles for the h1 heading */

h1{
font-size: 28pt;
text-align: center;
width: 100%;
}

29.Next, insert the following style rule for the main photo:

/* Styles for the main photo */

#photo1{
display: block;
margin: 0in auto;
width: 4in;
}

Save your changes to the file.


30.Finally we will make each figure box appear on its own page.  As with the article element, you will add a page break after each figure element and instruct browsers to avoid placing page breaks within each figure box.  You’ll also create style rules to set the width of each figure box image and the font size of each caption.

At the bottom of the style sheet, add the following style rule to place each figure box on its own page:

/* Styles for the figure boxes */

figure{
display: block;
text-align: center;
page-break-after: always;
page-break-inside: avoid;
}

Add the following style rules to set the width of figure box images to 5 inches and the font size of captions to 20 points:

figure img{
width: 5in;
}

figure figcaption{
font-size: 20pt;
}

Finally, add the following style rule to avoid adding a page break after the last figure box:

figure:last-of-type{
page-break-after: avoid;
}

31. Save your changes to the style sheet file.  Reload the treebook.htm file in your Web browser and then either print the file or view the file in a Print Preview window.  Each photo should be on its own page to print.
















        


Unit 7. Review "A" A Fractals Web Page

Unit 7. Review "A" A Fractals Web Page
Tutorial 7 / Review - A
Fractals Web Page

1.    Use your text editor to open the fractaltxt.htm  file from your student data files.  Enter your name and the date in the comment section of the file.  Save the file as fractal.htm in the same folder.
2.    Scroll down to the figure element.  Directly above the figure caption, insert a video element.  Set the width and height of the video to 320 pixels by 260 pixels.  Add attributes to display the zoom.png file as a poster image for the video and have the video automatically loop back to the beginning when played. Display the mandel.mp4 and mandel.webm video files in the player.  Display the video controls in the player.
3.    Within the video element, nest an object element displain the mandel.swf Flash player. Add an attribute and a parameter to loop the player back to the beginning when played.
4.    If the browser does not support the Flash player, display a message telling the user that he or she must have the Shockwave player.  Include a link to the Web site where the user can download the player.
5.    Scroll down to the article element.  Within the paragraph in this element, insert an object element containing the Java applet for the Mandel.class file.  Set the width of the Java window to 280 pixels and the height to 240 pixels.
6.    If the browser does not support Java, have it display the text Your browser does not support Java applets in place of the Mandel.class applet.
7.    Save your changes to the file.
8.    Open the Web page in your browser and verify that the video plays correctly.

9.    Test the fractal applet to verify that you can use it to zoom into the Mandelbrot Set at different levels of magnification.