Summary

Kevin wants you to work on another family page for the Tree and Book website. The page was created for the Ferris family with content provided by Linda Ferris$-$White. Kevin is examining a new color scheme and design style for the page. A preview of the design you$$ll create is shown in Figure $468.$

A home page preview of Tree and Book website. In the page content, the title $$The Ferris Family$$ is centered with a photo below. Three paragraphs of content about the Ferris family are described below the photo. Figure $4-68$

All of the HTML content and the typographical and layout styles have already been created for you. Your task will be to complete the work by writing the visual style sheet to incorporate Kevin$$s suggestions.

Document Setup

Open the tb$\_$visual$3.$css$,$ tb$\_$visual$4.$css$,$ tb$\_$ferris.html and tb$\_$kathleen.html files and enter your name and the date in the comment section of each file. Next, go to the tb$\_$ferris.html file and add links to the tb$\_$base.css$,$ tb$\_$styles$3.$css$,$ and tb$\_$visual$3.$css style sheets in the order listed.

Scroll down and, within the main element header and after the h$1$ heading, insert a figure box containing:

The tb$\_$ferris.png inline image with the alternate text Ferris Family using the image map named portrait$\_$map.

A figure caption with the text Kathleen Ferris and daughter Linda $(1961).$

Directly below the figure box, create the portrait$\_$map image map containing the following hotspots:

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

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.

HTML Styles

Open the tb$\_$visual$3.$css file in order to create the graphic design styles for the page. Go to the $"$HTML Styles" section and create a style rule for the html element to use the image file tb$\_$back$5.$png as the background.

Page Body Styles

Go to the "Page Body Styles" section and create a style rule for the body element that:

Adds a left and right $3$ pixel solid border with color value rgb$(169,130,88)$

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.

Main Styles

Go to the "Main Styles" section. Create a style rule for the main element that:

Applies the tb$\_$back$7.$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

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.

Create a style rule for the h$1$ heading within the main header that adds the following two text shadows:

A shadow with the color value rgb$(221,221,221)$ and offsets of $1$ pixels and no blurring

A shadow with the color value rgba$(41,41,41,0\mathrm{.}9)$ and offsets of $5$ pixels and a $20$ pixel blur.

Figure Box Styles

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\%.$

Next, you$$ll modify the appearance of the figure box image. Create a style rule for the image within the figure box that:

Sets the border width to $25$ pixels.

Sets the border style to solid.

Applies the tb$\_$frame.png file as a border image with a slice size of $60$ pixels stretched across the sides.

Displays the image as a block with a width of $100\%.$

Applies a sepia tone to the image with a value of $80\%($include the WebKit browser extension in your style sheet$).$

Create a style rule for the figure caption that:

Displays the text using the font stack Palatino Linotype, Palatino, Times New Roman, serif.

Sets the style to italic.

Sets the top$/$bottom padding to $10$ pixels and the left$/$right padding to $0$ pixels.

Centers the text.

Article Styles

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:

Displays the background image file tb$\_$back$6.$png placed at the bottom$-$right corner of the element with a size of $15\%$ and no tiling.

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

Creates a curved bottom$-$right corner with a radius of $80$ pixels.

Add 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\mathrm{.}7).$

Footer Styles

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 gradie