Description
New Perspectives on HTML and CSS Edition 6 Tutorial 5 Case Problem 2
Data Files needed for this Case Problem: bottom.jpg, bottomleft.jpg, bottomright.jpg, caltxt.css, css.css, ccc.jpg, febtxt.htm, left.jpg, modernizr-1.5.js, right.jpg, tab.jpg, tabred.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 Website, 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 pm ($8)
– February 1, 8:00 pm: Taiwan Acrobats ($16/$24/$$36)
– February 5, 8:00 pm: Joey Gallway ($16/$24/$36)
– February 7-8, 7:00 pm: West Side Story ($24/$36/$64)
– February 10, 8:00 pm: Jazz Masters ($18/$24/$32)
– February 13, 8:00 pm: Harlem Choir ($18/$24/$32)
– February 14, 8:00 pm: Chamberlain Symphony ($18/$24/$32)
– February 15, 8:00 pm: Edwin Drood ($24/$36/$44)
– February 19, 7:00 pm: The Yearling ($8/$14/$18)
– February 21, 8:00 pm: An Ellington Tribute ($24/$32/$48)
– February 22, 8:00 pm: Othello ($18/$28/$42)
– February 25, 8:00 pm: Madtown Jugglers ($12/$16/$20)
– February 28, 8:00 pm: Ralph Williams ($32/$48/$64)
– March 1, 8:00 pm: Othello ($18/$28/$42)
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 at the end of this write-up.
Complete the following:
1. In your text editor, open the caltxt.css and febtxt.htm files from the tutoril.05\case2 folder. Enter your name and the date in the comment section of each file. Save the files as calendar.css and feb.htm, respectively.
2. Go to the feb.htm file in your text editor. Create links to the calendar.css and ccc.css style sheets.
3. Scroll down to the events section element. Within the element, insert a table with the class name calendar. Add the table 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 for 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 the 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 should be marked as an h3 heading (refer to Figure 5-55 for the starting and ending days in the calendar).
– On the days when 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 a dd element.
8. Save your changes to the file and then go to the calendar.css file in your text editor. Create a style rule for the calendar table to: a) create separate borders for the different parts of the table with a 5 pixel space between the borders; b) set the font size to 8 pixels; c) set the top margin to 20 pixels, the bottom margin to 5 pixels, and the left and right margins to auto; d) set the padding space to 40 pixels; and e) set the width to 650 pixels.
9. In the style rule you created in the previous step, add a style rule that specifies multiple background images for the calendar table in the following order:
– the topleft.jpg image in the top-left corner of the table with no tiling
– the topright.jpg image in the top-right corner with no tiling
– the bottomleft.jpg image in the bottom-left corner with no tiling
– the bottomright.jpg image in the bottom-right corner with no tiling
– the top.jpg image in the top-left corner, tiled only in the horizontal direction
– the left.jpg image in the top-left corner, tiled only in the vertical direction
– the right.jpg image in the top-right corner, tiled only in the vertical direction
– the bottom.jpg image in the bottom-left corner, tiled only in the horizontal direction.
10. Create a style rule to center the table caption along the top of the calendar table and do the following: a) set the bottom padding to 10 pixels; b) set the font size to 16 pixels; c) set the kerning to 3 pixels; and d) set the width to 650 pixels.
11. Set the width of the table columns to 14% of the width of the table. For columns belonging to the weekends class, change the background color to the value (255, 232, 232).
12. For table heading cells in the table header row group, set the background color to red, the font color to white, and the letter spacing to 5 pixels.
13. 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.
14. 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.
15. Set the font size of h3 headings within the data table cells of the calendar table to 8 pixels.
16. The paragraphs in the summary section are enclosed within a div element. Create a style rule for this div element to: a) display the contents in a columnar layout with the column width set to 300 pixels; b) set the column gap to 20 pixels and; c) add a 1-pixel solid black divider rule between columns.
17. Save your changes to the file and then open feb.htm in your Web browser. Verify that the layout and design of page resemble that shown in Figure 5-55. (Note: If you are running Internet Explorer or Opera, you might not see multiple columns in the description of the upcomming Feburary events.)
18. Submit your completed files to your instructor, in either printed or electronic form, as requested.
Reviews
There are no reviews yet.