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

/in /by

 

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.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

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