Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

help, please to answer the css the book is new perspectives HTML And CSS 6th Edition . APPLY Case Problem 1 Data Files needed for

help, please to answer the css

the book is new perspectives HTML And CSS 6th Edition.

image text in transcribedimage text in transcribed

APPLY Case Problem 1 Data Files needed for this Case Problem: gold.jpg, green.jpg, jpf.css, jpf.jpg modernizr-1.5.js, stabletxt.css, sudokutxt.htm The Japanese Puzzle Factory Rebecca Peretz has a passion for riddles and puzzles. Her favorites are the Japanese logic puzzles that have become very popular in recent years. Rebecca and a few of her friends have begun work on a new Web site called The lapanese Puzzle Factory (JPF), where they plan to create and distribute Japanese-style puzzles. Eventually, the JPF Web site will include interactive programs to enable users to solve the puzzles online, but for now Rebecca is interested only in the design and lay- out of the pages. You've been asked to help by creating a draft version of the Web page describing the Sudoku puzzle. Figure 5-54 shows a preview of the design and layout you'll create for Rebecca. The Japanese Puzzle Factory Sudoku page The Japanese puzzle factory Online Pales Bere Toe and its Forum Competition Sudoku 4 5 3 31 35 2 Akar Divide by Bax Flomino Hashiwekakero Heyawake Hitom Kuro Katagalu Masugo Masu Nonogram Oak Logic 937 6 9 41 8 472 2 2 Sudoku 1 45 68 To Play Super Sudoku Terkatsu Tental Show Wordoku nyewe Good Rebecca has created some of the content and designs for this page. Your task is to com- plete the page by entering the code and styles for the Sudoku table, as well as adding some background images to other sections of the page layout. Complete the following: 1. Use your text editor to open the files stabletxt.css and sudokutxt.htm from the tutorial.05\casel folder. Enter your name and the date in the comment section of each file. Save the files as stable.css and sudoku.htm, respectively, in the same folder. 2. Return to the sudoku.htm file in your text editor. Add links to the jpf.css and stable. css style sheets. 3. Scroll down to the section element. Directly below the opening
tag insert a table element that will be used to display the Sudoku puzzle. Give the table element the class name spuzzle. 4. Add a caption to the spuzzle table containing the text Sudoku. 5. Create a table head row group containing a single row. The row should display 10 heading cells. The first heading cell should be blank and the remaining nine cells should display the digits from 1 to 9. 6. Create the table body row group containing nine table rows with the first cell in each row containing a table heading cell displaying the letters A through I. 7. After the initial table heading cell in the first, fourth, and seventh rows, insert three table data cells spanning three rows and three columns each. Altogether, these nine data cells will store the nine 3x3 boxes that are part of the Sudoku puzzle. 8. In the first row of the table body, put the three table data cells in the greenBox, goldBox, and greenBox classes, respectively. In the fourth row, the three data cells belong to the goldBox, greenBox, and goldBox classes. In the seventh row, the three data cells belong to the greenBox, goldBox, and greenBox classes. 9. Go to each of the nine table data cells you created in the last two steps. Within each data cell, insert a nested table belonging to the subTable class. Within each nested table, insert three rows and three columns of data cells. Enter the digits from Figure 5-54 in the appropriate table cells. Where there is no digit, leave the table cell empty 10. Save your changes to the file, and then go to the stable.css style sheet in your text editor. 11. Create a style rule to collapse the borders of the spuzzle and subTable tables. 12. Add a 5-pixel outset gray border to the table data cells within the spuzzle table. 13. Set the font size of table header cells within the spuzzle table to 8 pixels and the font color to gray. 14. Set the height of table header cells within the table body row group of the spuzzle table to 40 pixels. 15. For table data cells within the subTable table, add the following styles: a) set the font size to 20 pixels and the font color to blue; b) set the width and height to 40 pixels and center the cell text both horizontally and vertically, and c) add a 1-pixel solid black border around the cell. 16. for table data cells nested within the goldBox class of table data cells, display the background image file gold.jpg centered within the cell and not tiled. (Hint: Use background position values of 50% for both the horizontal and vertical directions.) 17. For table data cells nested within the greenBox class of data cells, set the back- ground image to the green.jpg file, once again centered within the cell without tiling. 18. Add descriptive comments throughout your style sheet to document your work. 19. Save your changes to the file and then reload sudoku.htm in your web browser. Verify that the layout and design of the Sudoku table resemble that shown in Figure 5-54 20. Submit your completed files to your instructor, in either printed or electronic form, as requested. APPLY Case Problem 1 Data Files needed for this Case Problem: gold.jpg, green.jpg, jpf.css, jpf.jpg modernizr-1.5.js, stabletxt.css, sudokutxt.htm The Japanese Puzzle Factory Rebecca Peretz has a passion for riddles and puzzles. Her favorites are the Japanese logic puzzles that have become very popular in recent years. Rebecca and a few of her friends have begun work on a new Web site called The lapanese Puzzle Factory (JPF), where they plan to create and distribute Japanese-style puzzles. Eventually, the JPF Web site will include interactive programs to enable users to solve the puzzles online, but for now Rebecca is interested only in the design and lay- out of the pages. You've been asked to help by creating a draft version of the Web page describing the Sudoku puzzle. Figure 5-54 shows a preview of the design and layout you'll create for Rebecca. The Japanese Puzzle Factory Sudoku page The Japanese puzzle factory Online Pales Bere Toe and its Forum Competition Sudoku 4 5 3 31 35 2 Akar Divide by Bax Flomino Hashiwekakero Heyawake Hitom Kuro Katagalu Masugo Masu Nonogram Oak Logic 937 6 9 41 8 472 2 2 Sudoku 1 45 68 To Play Super Sudoku Terkatsu Tental Show Wordoku nyewe Good Rebecca has created some of the content and designs for this page. Your task is to com- plete the page by entering the code and styles for the Sudoku table, as well as adding some background images to other sections of the page layout. Complete the following: 1. Use your text editor to open the files stabletxt.css and sudokutxt.htm from the tutorial.05\casel folder. Enter your name and the date in the comment section of each file. Save the files as stable.css and sudoku.htm, respectively, in the same folder. 2. Return to the sudoku.htm file in your text editor. Add links to the jpf.css and stable. css style sheets. 3. Scroll down to the section element. Directly below the opening
tag insert a table element that will be used to display the Sudoku puzzle. Give the table element the class name spuzzle. 4. Add a caption to the spuzzle table containing the text Sudoku. 5. Create a table head row group containing a single row. The row should display 10 heading cells. The first heading cell should be blank and the remaining nine cells should display the digits from 1 to 9. 6. Create the table body row group containing nine table rows with the first cell in each row containing a table heading cell displaying the letters A through I. 7. After the initial table heading cell in the first, fourth, and seventh rows, insert three table data cells spanning three rows and three columns each. Altogether, these nine data cells will store the nine 3x3 boxes that are part of the Sudoku puzzle. 8. In the first row of the table body, put the three table data cells in the greenBox, goldBox, and greenBox classes, respectively. In the fourth row, the three data cells belong to the goldBox, greenBox, and goldBox classes. In the seventh row, the three data cells belong to the greenBox, goldBox, and greenBox classes. 9. Go to each of the nine table data cells you created in the last two steps. Within each data cell, insert a nested table belonging to the subTable class. Within each nested table, insert three rows and three columns of data cells. Enter the digits from Figure 5-54 in the appropriate table cells. Where there is no digit, leave the table cell empty 10. Save your changes to the file, and then go to the stable.css style sheet in your text editor. 11. Create a style rule to collapse the borders of the spuzzle and subTable tables. 12. Add a 5-pixel outset gray border to the table data cells within the spuzzle table. 13. Set the font size of table header cells within the spuzzle table to 8 pixels and the font color to gray. 14. Set the height of table header cells within the table body row group of the spuzzle table to 40 pixels. 15. For table data cells within the subTable table, add the following styles: a) set the font size to 20 pixels and the font color to blue; b) set the width and height to 40 pixels and center the cell text both horizontally and vertically, and c) add a 1-pixel solid black border around the cell. 16. for table data cells nested within the goldBox class of table data cells, display the background image file gold.jpg centered within the cell and not tiled. (Hint: Use background position values of 50% for both the horizontal and vertical directions.) 17. For table data cells nested within the greenBox class of data cells, set the back- ground image to the green.jpg file, once again centered within the cell without tiling. 18. Add descriptive comments throughout your style sheet to document your work. 19. Save your changes to the file and then reload sudoku.htm in your web browser. Verify that the layout and design of the Sudoku table resemble that shown in Figure 5-54 20. Submit your completed files to your instructor, in either printed or electronic form, as requested

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

Logics For Databases And Information Systems

Authors: Jan Chomicki ,Gunter Saake

1st Edition

1461375827, 978-1461375821

More Books

Students also viewed these Databases questions