Use your HTML editor to open the tb_visual3_txt.css, tb_visual4_txt.css, tb_ferris_txt.html and tb_kathleen_txt.html files from the html04 review...

1. Use your HTML editor to open the tb_visual3_txt.css, tb_visual4_txt.css, tb_ferris_txt.html and tb_kathleen_txt.html files from the html04 review folder.

Enter your name and the date in the comment section of each file, and save them as tb_visual3.css, tb_visual4.css, tb_ferris.html, and tb_kathleen.html respectively.

2. Go to the tb_ferris.html file in your editor. Add links to the tb_base.css, tb_styles3.css, and tb_visual3.css style sheets in the order listed.

3. Scroll down and, within the main element header and after the h1 heading, insert a figure box containing: a) the tb_ferris.png inline image with the alternate text Ferris Family using the image map named portrait_map and

b) a figure caption with the text Kathleen Ferris and daughter Linda (1957).

4. Directly below the figure box, create the portrait_map image map containing the following hotspots:

a) a rectangular hotspot pointing to the tb_kathleen.html file with the left-top coordinate (10, 50) and the right-bottom coordinate (192, 223) and alternate text, "Kathleen Ferris" and

b) a circular hotspot pointing to the tb_linda.html file with a center point at (264, 108) and a radius of 80 pixels and the alternate text, Linda Ferris-White.

5. Take some time to study the rest of the page content and structure and then save your changes to the file.

6. Go to the tb_visual3.css file in your editor. In this file, you'll create the graphic design styles for the page.

7. Go to the HTML Styles section and create a style rule for the html element to use the image file tb_back5.png as the background.

8. Go to the Page Body Styles section and create a style rule for the body element that: a) adds a left and right 3-pixel solid border with color value rgb(169, 130, 88),

b) adds a box shadow to the right border with a horizontal offset of 25 pixels, a vertical offset of 0 pixels and a 35-pixel blur and a color value of rgb(53, 21, 0), and then adds the mirror images of this shadow to the left border.

9. Go to the Main Styles section. Create a style rule for the main element that: a) applies the tb_back7.png file as a background image with a size of 100% covering the entire background with no tiling and positioned with respect to the padding box and

b) adds two inset box shadows, each with a 25-pixel blur and a color value of rgb(71, 71, 71), and then one with offsets of -10 pixels in the horizontal and vertical direction and the other with horizontal and vertical offsets of 10 pixels.

10. Create a style rule for the h1 heading within the main header that adds the following two text shadows: a) a shadow with the color value rgb(221, 221, 221) and offsets of 1 pixels and no blurring and

b) a shadow with the color value rgba(41, 41, 41, 0.9) and offsets of 5 pixels and a 20-pixel blur.

11. Go to the Figure Box Styles section. Create a style rule for the figure element that sets the top/bottom margin to 10 pixels and the left/right margin to auto. Set the width of the element to 70%.

12. Next, you'll modify the appearance of the figure box image. Create a style rule for the image within the figure box that: a) sets the border width to 25 pixels,

b) sets the border style to solid,

c) applies the tb_frame.png file as a border image with a slice size of 60 pixels stretched across the sides,

d) displays the image as a block with a width of 100%, and e) applies a sepia tone to the image with a value of 80% (include the WebKit browser extension in your style sheet).

13. Create a style rule for the figure caption that: a) displays the text using the font stack 'Palatino Linotype', Palatino, 'Times New Roman', serif,

b) sets the style to italic,

c) sets the top/bottom padding to 10 pixels and the left/right padding to 0 pixels, and d) centers the text.

14. Go to the Article Styles section. Here you'll create borders and backgrounds for the article that Linda Ferris-White wrote about her mother. Create a style rule for the article element that:

a) displays the background image file tb_back6.png placed at the bottom-right corner of the element with a size of 15% andno tiling,

b) adds an 8-pixel double border with color value rgb(147, 116, 68) to the right and bottom sides of the article element,

c) creates a curved bottom-right corner with a radius of 80 pixels, and

d) adds an interior shadow with horizontal and vertical offsets of -10 pixels, a 25-pixel blur, and a color value of rgba(184, 154, 112, 0.7). 15.

15. Kevin wants a gradient background for the page footer. Go to the Footer Styles section and create a style rule for the footer that adds a linear gradient background with an angle of 325°, going from the color value rgb(180, 148, 104) with a color stop at 20% of the gradient length to the value rgb(40, 33, 23) with a color stop at 60%.

16. Save your changes to the style sheet and then open tb_ferris.html in your browser. Verify that the colors and designs resemble that shown in Figure 4-64. Next, you will create the design styles for individual pages about Kathleen Ferris and Linda Ferris-White. A preview of the content of the Kathleen Ferris page is shown in Figure 4-65.

17. Go to the tb_kathleen.html file in your editor and create links to the tb_base.css, tb_styles4.css, and tb_visual4.css files. Study the contents of the file and then close it, saving your changes.

18. Go to the tb_visual4.css file in your editor. Scroll down to the Transformation Styles section and add a style rule for the article element to set the size of the perspective space to 800 pixels.

19. Create a style rule for the figure1 figure box to translate it -120 pixels along the z-axis.

20. Create a style rule for the figure2 figure box to translate it -20 pixels along the y-axis and rotate it 50° around the y-axis.

21. Create a style rule for the figure3 figure box to translate it -30 pixels along the y-axis and rotate it-50° around the y-axis.

22. Go to the Filter Styles section to apply CSS filters to the page elements. Make sure that you include the WebKit browser extension in your style. Create a style rule for the figure1 figure box that applies a saturation filter with a value of 1.3.

23. Create a style rule for the figure2 figure box that sets the brightness to 0.8 and the contrast to 1.5.

24. Create a style rule for the figure3 figure box that sets the hue rotation to 170°, the saturation to 3, and the brightness to 1.5.

25. Save your changes to the file and then return to the tb_ferris.html file in your browser. Verify that you can display the individual pages for Kathleen Ferris and Linda Ferris-White by clicking on their faces in the family portrait. Further verify that the appearance of the Kathleen Ferris page resembles that shown in Figure 4-65. (Note: Use the link under the pictures to return to the home page.)

Here are the required files: https://ufile.io/ozpnb

Thank you!