Question is located in the help me dox
To create a figure box: 1.Use your editor to open the tb_komatsu_txt.html file from the html04 ► tutorial folder. Enter your name and the date in the comment section of the file and save it as tb_komatsu.html. For this web page, you'll work with a new style sheet named tb_visual1.css. Kevin has already created a reset style sheet and a typographical style sheet in the tb_reset.css and tb_styles1.css files respectively. 2.Within the document head, insert the following link elements to link the page to the tb_reset.css, tb_styles1.css, and tb_visual1.css style sheet files. 3.Scroll down to the article element and, directly after the h1 element, insert the following code for the figure box displaying the Komatsu family portrait. Figure 4-1 highlights the code for the family portrait figure box. Figure 4-1 Inserting a figure box 4.Take some time to review the content and structure of the rest of the document and then save your changes to the file. To format and view the figure box: 1.Use your editor to open the tb_visual1_txt.css files from the html04 ► tutorial folder. Enter your name and the date in the comment section of the file and save it as tb_visual1.css 2.Scroll down to the Figure Box Styles section at the bottom the document and insert the following style rule for the figure element: 3.Add the following style to format the appearance of the image within the figure box: 4.Finally, insert the following rule for the figure caption: Figure 4-2 highlights the style rules for the figure box, image, and caption. Figure 4-2 Formattine the figure box and caption 5.Save your changes to the file and then open the tb_komatsu.html file in your browser. Figure 4-3 shows the initial appearance of the page. Figure 4-3 Initial design of the Komatsu family page To add a background image to the browser window: 1.Return to the tb_visual1.css file in your editor. 2.Go to the HTML Styles section and add the following style rule to change the background of the browser window: Note that because you are using the default setting for tiling the background image, you do not need to include the background-repeat style rule. Figure 4-5 highlights the new style rule. Figure 4-5 Defining a background image 3.Save your changes to the file and then reload tb_komatsu.html in your browser. Figure 4-6 shows the tiled background in the browser window. Figure 4-6 Tiled background image in the browser window To add a background image to the page article: 1.Return to the tb_visual1.css file in your editor and scroll down to the Article Styles section. 2.Add the following style rule: Figure 4-8 highlights the style rule applied to the page article. Figure 4-8 Adding a background to the page article 3.Save your changes and then reload tb_komatsu.html in your browser. Figure 4-9 shows the placement of the background image. Figure 4-9 Placement of the background image To add a background image to the page article: 1.Return to the tb_visual1.css file in your editor and return to the Article Styles section. 2.Type a comma after the first background listed for the article element and before the semicolon (;), then press Enter. 3.Be sure the insertion point is before the semicolon (;), then add the following code to display two more background images followed by a background color: The background color acts as a fallback design element and will not be displayed except for browsers that are incapable of displaying background images. Figure 4-10 displays the code for the multiple backgrounds applied to the page article. Figure 4-10 Adding multiple background images Trouble? Be sure your code matches the code in Figure 4-10, including the commas used to separate the components in the list and the ending semicolon. 4.Save your changes and then reload tb_komatsu.html in your browser. Figure 4-11 shows the three background images displayed with the article. Figure 4-11 Revised background for the page article To add borders to the page elements: 1.Return to the tb_visual1.css file in your editor and go to the Page Body Styles section. 2.Add the following style rule for the page body: 3.Go to the Aside Styles section and add the following style rule for the aside element: Figure 4-13 highlights the style rules that create borders for the page body and aside element. Figure 4-13 Adding borders to the page body and aside element 4.Save your changes to the file and then reload tb_komatsu.html in your browser. Figure 4-14 shows the appearance of the page with the newly added borders. Note that the background color and other styles associated with the aside element are in the tb_styles1.css file. Figure 4-14 Page design with borders To add rounded corners to an element: 1.Return to the tb_visual1.css file in your editor and go to the Aside Styles section. 2.Add the following style to the style rule for the aside element: [image] Figure 4-17 highlights the style to create the rounded corners for the aside border. Figure 4-17 Adding rounded corners to the aside element border 3.Save your changes to the file and reload tb_komatsu.html in your browser. Figure 4-18 shows the rounded corners for the aside element border. Figure 4-18 Aside element border with rounded corners To create a graphic border: 1.Return to the tb_visual1.css file in your editor and scroll to the Figure Box Styles at the top of the file. 2.Add the following style to the style rule for the figure box: Figure 4-20 displays the styles used to create the graphic border. Figure 4-20 Adding a border image 3.Save your changes and reload tb_komatsu.html in your browser. Figure 4-21 shows the appearance of the border image. Figure 4-21 Figure box with border image To add a box shadow: 1.Return to the tb_visual1.css file in your editor and go to the Page Body Styles section. 2.Within the style rule for the body element, insert the following styles: Figure 4-25 highlights the style to add box shadows to the page body. Figure 4-25 Adding box shadows 3.Save your changes and reload tb_komatsu.html in your browser. Figure 4-26 shows the drop shadows added to the page body. Figure 4-26 Page body with drop shadows To add inset shadows: 1.Return to the tb_visual1.css file in your editor and go to the Article Styles section. 2.Within the style rule for the article element, insert the following box-shadow style: Figure 4-28 highlights the newly added code for the inset box shadow. Figure 4-28 Adding an inset shadow 3.Save your changes and reload tb_komatsu.html in your browser. The inset shadow for the page body element is shown in Figure 4-29. Figure 4-29 Page article with interior shadowing To increase the shadow size: 1.Return to the tb_visual1.css file in your editor and go to the Asides Styles section. 2.Within the style rule for the aside element, insert the following style: Figure 4-30 highlights the style to add a halo to the aside element. Figure 4-30 Creating a spreading shadow 3.Save your changes and reload tb_komatsu.html in your browser. Figure 4-31 shows the revised appearance of the aside element with the glowing green shadow. Figure 4-31 Aside element with glowing effect To apply a linear gradient: 1.Return to the tb_visual1.css file in your editor and go to the Footer Styles section. 2.Insert the following style rule for the footer element: Figure 4-36 highlights the style to create the linear gradient. Figure 4-36 Applying a linear gradient 3.Save your changes and reload tb_komatsu.html in your browser. Figure 4-37 shows the revised appearance of the page footer with a linear gradient. Figure 4-37 Page footer with linear gradient background To apply a radial gradient: 1.Return to the tb_visual1.css file in your editor and go to the Aside Styles section. 2.Add the following style to the style rule for the aside element: Note that this style supersedes the previous background style created in the tb_styles1.css style sheet. Figure 4-40 highlights the code to create the radial gradient. Figure 4-40 Applying a radial gradient 3.Save your changes and reload tb_komatsu.html in your browser. Figure 4-41 shows the radial gradient within the aside element. Figure 4-41 Aside element with radial gradient background To create a semi-transparent object: 1.Return to the tb_visual1.css file in your editor and scroll up to the Figure Box Styles section. 2.Within the style rule for the figure element, insert the following style: Figure 4-43 highlights the code to make the figure box semi-transparent. Figure 4-43 Creating a semi-transparent object 3.Save your changes and reload tb_komatsu.html in your browser. Figure 4-44 displays the semi-transparent figure box with part of the background paper texture showing through. Figure 4-44 Changing the opacity of the figure box To open the Genta Komatsu page: 1.Use your editor to open the tb_genta_txt.html and tb_visual2_txt.css files from the html04 ▸ tutorial folder. Enter your name and the date in the comment section of both files and save them as tb_genta.html and tb_visual2.css respectively. 2.Return to the tb_genta.html file in your editor. Within the document head, insert the following link elements to link the page to the tb_reset.css, tb_styles2.css, and tb_visual2.css style sheet files. 3.Take some time to scroll through the contents of the file. Note that the document content consists mainly of three figure boxes each containing a different photo of Genta Komatsu. 4.Close the file, saving your changes. 5.Open the tb_genta.html file in your browser. Figure 4-47 shows the initial layout and design of the page content. Figure 4-47 Initial design of the Genta Komatsu page To apply the transform style: 1.Go to the tb_visual2.css file in your editor and scroll as needed to the Transformation Styles section. 2.Insert the following style rule to rotate the figure2 figure box 40° counter-clockwise, reduce it to 80% of its former size, and shift it 20 pixels to the right and 100 pixels up. Also, add a style to create a drop shadow using the code that follows: 3.Add the following style rule to rotate the figure3 figure box 10° clockwise, resize it to 90% of its current size, and shift it 120 pixels upward. Also add a drop shadow to the figure box using the following style rule: Figure 4-48 describes the newly added style rules. Figure 4-48 Transforming the figure boxes 4.Save your changes to the file and then reload tb_genta.html in your browser. Figure 4-49 shows the revised design of the page's content. Figure 4-49 Viewing the transformed figure boxes To apply the 3D transformations: 1.Return to the tb_visual2.css file in your editor. 2.Directly after the Transformation Styles comment, insert the following style rule to set the perspective of the 3D space of the article element.