This document provides instructions for completing a draft web page layout for a Japanese puzzle website. It involves adding CSS styles and HTML markup to structure the content, including styling a Sudoku puzzle grid embedded in the page. Key tasks include linking style sheets, adding div wrappers with background images, and structuring the Sudoku grid using table elements with nested tables and box classes. Completing the tasks will produce a preview of the web page layout as shown in the provided design.

1. Complete course guide available here
https://bitly.com/12BqdKW
This pack of CMGT 410 Week 3 Final Draft comprises:
Kudler Fine Foods: Frequent Shopper Program
Deadline: ( ), Computer Science - General Computer Science
I can provide the .jpg, .htm, and .css files for of these
tutorials... I just don't have time to finish them while taking
both Java and SQL at the same time!
Data Files needed for this Case Problem: gold.jpg, green.jpg,
jpf.jpg, jpftxt.css, left.jpg, stabletxt.css, sudokutxt.htm,
topleft.jpg, and topright.jpg
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 Japa- nese 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 layout of the
pages. You’ve been asked to help by creating a draft version
of the Web page describing the Sudoku puzzle. Figure 5-76
shows a preview of the design and layout you’ll create for
Rebecca.
HTML and XHTML
Tutorial 5 Working with Web Tables
Rebecca has created some of the content and designs for this

2. page. Your task is to complete 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 jpftxt.css, stabletxt.css,
and sudokutxt.htm from the tutorial.05case1 folder included
with your Data Files. Enter your name and the date in the
comment section of each file. Save the files as jpf.css,
stable.css, and sudoku.htm, respectively, in the same folder.
2. Return to the sudoku.htm file in your text editor. Add a link
to the jpf.css and stable.css style sheets.
3. Scroll down to the links div element. Rebecca wants the list
of links to have rounded top corners and a shaded left
corner. Mark the corner and sides by nesting the ul element
within three div elements with class names of left, topLeft,
and topRight.
4. Save your changes to the file, and then go to the jpf.css
style sheet in your text editor. At the bottom of the style
sheet, add the following styles:
• For the div element belonging to the topLeft class, display
the background image file topleft.jpg in the top-left corner of
the element. Do not tile the image.
• For the div element from the topRight class, display the
background image file topright.jpg in the top-right corner
without tiling.
• For the div element from the left class, display the left.jpg
background image file placed on the left border of the
element and tiled in the vertical direction only.
5. Save your changes to the file, and then display the
sudoku.htm file in your Web browser. Verify that the list of
Japanese puzzles on the left margin of the page is dis- played

3. with rounded top corners and a shaded left border.
6. Return to the sudoku.htm file in your text editor. Scroll
down to the rightColumn div element. Directly below the
opening <div> tag, insert a table element that will be
used to display the Sudoku puzzle. Give the table element the
class name spuzzle.
7. Add a caption to the spuzzle table containing the text
Sudoku. 8. 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.
9. Create the table body row group. The tbody should contain
the following structure:
• There are nine rows in the tbody.
• The first cell in each row should contain a table heading
cell displaying the letters
A through I.
• Starting with the first row, every third row should contain
three table data cells with each cell spanning three rows and
three columns. All together, these table cells will store the
nine 3x3 boxes that are part of the Sudoku puzzle.
• In the first row, 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.
10. Go to each of the nine table data cells you created in the
last step. 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

4. digits from Figure 5-76 in the appropriate table cells. Where
there is no digit, leave the table cell empty.
11. Save your changes to the file, and then go to the
stable.css file in your text editor.
12. Collapse the borders of the spuzzle and subTable tables.
13. Add a 5-pixel outset gray border to the data cells within
the spuzzle table. Set the font size of header cells within the
spuzzle table to 8 pixels and the font color to gray. Set the
height of header cells within the body row group of the
spuzzle table to 40 pixels.
14. For data cells within the subTable table, add the following
styles:
• Set the font size to 20 pixels and the font color to blue.
• Set the width and height to 40 pixels and center the cell
text both horizontally and vertically.
• Add a 1-pixel solid black border around the cell.
15. For table cells nested within the goldBox class of table
cells, apply 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.)
For cells nested within the greenBox class of table cells, set
the background image to the green.jpg file, once again
centered within the cell without tiling.
When scheduling your classes, make sure that you give
yourself breaks. Try not to take any more than three hours of
classes without a break of at least one hour. This gives you a
chance to eat, study, make a phone call, or take care of other
business. It also improves your alertness....
https://bitly.com/12BqdKW