Create HTML Files needed for this Problem: bottom.jpg, bottomleft.jpg, bottomright.jpg, caltxt.css, ccc.jpg, ccctxt.css, febtxt.htm, left.jpg,...

Create HTML

Files needed for this Problem: bottom.jpg, bottomleft.jpg, bottomright.jpg, caltxt.css, ccc.jpg, ccctxt.css, febtxt.htm, left.jpg, right.jpg, tab.jpg, top.jpg, topleft.jpg, and topright.jpg

The Chamberlain Civic Center Lewis Kern is an events manager at the Chamberlain Civic Center in Chamberlain, South Dakota. The center is in the process of updating its Web site and Lewis has asked you to work on the pages detailing events in the upcoming year. He’s asked you to create a calendar page for the month of February. Lewis wants the page design to catch the reader’s eye and so he suggests that you create a Web table with a background showing a spiral binding. The spiral binding graphic must be flexible to accommodate calendars of different sizes, so you’ll build the borders for this image by nesting the February calendar table within eight div elements.

The February calendar must list the following events:

•Every Sunday, the Carson Quartet plays at 1:00 p.m. ($8)

•February 1, 8:00 p.m.: Taiwan Acrobats ($16/$24/$36)

•February 5, 8:00 p.m.: Joey Gallway ($16/$24/$36)

•February 7-8, 7:00 p.m.: West Side Story ($24/$36/$64)

•February 10, 8:00 p.m.: Jazz Masters ($18/$24/$32)

•February 13, 8:00 p.m.: Harlem Choir ($18/$24/$32)

•February 14, 8:00 p.m.: Chamberlain Symphony ($18/$24/$32)

•February 15, 8:00 p.m.: Edwin Drood ($24/$36/$44)

•February 19, 8:00 p.m.: The Yearling ($8/$14/$18)

•February 21, 8:00 p.m.: An Ellington Tribute ($24/$32/$48)

•February 22, 8:00 p.m.: Othello ($18/$28/$42)

•February 25, 8:00 p.m.: Madtown Jugglers ($12/$16/$20)

•February 28, 8:00 p.m.: Ralph Williams ($32/$48/$64)

Lewis wants the weekend events (Friday and Saturday night) to be displayed with a light red background. A preview of the page you’ll create is shown in Figure 5-77.

Complete the following:

1.Use your text editor to open the caltxt.css, ccctxt.css, and febtxt.htmfrom the tutorial.05case2 folder included with your Data Files. Enter your name and the date in the comment section of each file. Save the files as calendar.css, ccc.css, and feb.htm, respectively, in the same folder.

2.Go to the feb.htm file in your text editor. Create links to the calendar.cssand ccc.css style sheets.

3.Scroll down to the rightColumn div element. Within the div element, insert a table with the class name calendar. Add the caption “Events in February at the CCC” to the calendar.

4.Create a column group for the calendar consisting of two col elements. The first col element should belong to the weekdays class and span five columns. The second col element should belong to the weekends class and span two columns.

5.Create a table header row group consisting of one row of table headings displaying the three-letter abbreviations of the days of the week, starting with Sun and ending with Sat.

6.Create a table body row group containing the days in the month of February. The row group should contain five rows and seven columns of table data cells. There are no spanning cells in any of the rows or columns.

7.Each table data cell should have the following content:

•The day of the month marked as an h3 heading (refer to Figure 5-77 for the starting and ending days in the calendar).

•On the days in which there is a CCC event, enter the event information as a definition list with the name of the event marked as a dt element, and the time and price of the event each marked with dd elements.

8.Enclose the entire table within a set of nine nested div elements. The four outermost elements should have the ids tBorder, lBorder, rBorder, and bBorder. The next four innermost elements should have the ids tlCorner, trCorner, blCorner, and brCorner. The innermost div element should have the id boxContent.

9.Save your changes to the file, and then go to the ccc.css file in your text editor.

10.Apply the following background image styles to the eight div container elements:

•For the tlCorner element, display the topleft.jpg image in the top-left corner of the element without tiling.

•For the trCorner element, display the topright.jpg image in the top-right corner without tiling.

•For the blCorner element, display the bottomleft.jpg image in the bottom-left corner without tiling.

•For the brCorner element, display the bottomright.jpg image in the bottom-right corner without tiling.

•For the tBorder element, display the top.jpg image 39 pixels from the left edge aligned at the top border, tiling the image horizontally.

•For the lBorder element, display the left.jpg image on the left border and tiled vertically.

•For the rBorder element, display the right.jpg image on the right border and tiled vertically.

•For the bBorder element, display the bottom.jpg image on the bottom border and tiled horizontally.

11.Set the padding space of the boxContent div element to 50 pixels.

12.Save your changes to the file, and then go to the calendar.css file in your text editor. Add the table styles described in the next steps to the style sheet.

13.Display the borders of the table as separate borders with the space between the borders set to 5 pixels. Set the font size of the table text to 8 pixels.

14.Align the table caption with the top left of the calendar table. Set the font size of the caption to 16 pixels and the letter spacing to 3 pixels.

15.Set the width of the table columns to 14% of the width of the table. For columns belonging to the weekend class, change the background color to the value (255, 232, 232).

16.For table headings in the table header row group of the calendar table, set the background color to red, the font color to white, and the letter spacing to 5 pixels.

17.Set the height of the table row within the table header row group of the calendar table to 5%. Set the height of the table rows within the table body row group to 19% each.

18.Add a 1-pixel solid gray border to every table data cell within the calendar table. Set the vertical alignment of the cell content to the top of the cell.

19.Set the font size of h3 headings with the data table cells of the calendar table to 8 pixels and set the margin and padding spaces of the h3 headings to 0 pixels.

20. Set the margin and padding spaces of the definition list, definition descriptions, and definition terms within the tables to 0 pixels.

21.Save your changes to the file, and then open feb.htm in your Web browser. Verify that the layout and design of the page resemble that shown in Figure 5-77.

22.Submit completed files

• Attachment 1
• Attachment 2
• Attachment 3
• Attachment 4
• Attachment 5
• Attachment 6
• Attachment 7
• Attachment 8
• Attachment 9
• Attachment 10
• Attachment 11
• Attachment 12
• Attachment 13
• Attachment 14