Unit 5. Review "B" The Chamberlain Civic Center
Tutorial 5 Review - B
The Chamberlain Civic Center
1.
Open the caltxt.css and febtxt.htm files from your student data file. Enter your name and the date in the
comment section of each file and save the files as calendar.css and feb.htm
respectively.
2.
Go to the feb.htm
file and 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. Start with Jan. 26th and
fill in the entire calendar through March 1st. 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. Here is the
first table row <tr> done for you:
<tbody>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td>1</dt>
</tr>
7.
Each table data
cell should have the following content:
*The
day of the month should be marked as an h3 heading 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 (<dl>) 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. Here is the first table row <tr>
done for you:
<tbody>
<tr>
<td><h3>26</h3></td>
<td><h3>27</h3></td>
<td><h3>28</h3></td>
<td><h3>29</h3></td>
<td><h3>30</h3></td>
<td><h3>31</h3></td>
<td><h3>1</h3>
<dl>
<dt>Taiwan
Acrobats</dt>
<dd>8pm</dd>
<dd>$16,
$24, $36</dd>
</dl></td>
</tr>
Continue
putting 7 dates per table row <tr>, using the above table row as an
example. The events are listed
below:
*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)
8.
Save your changes to the file and then go to the calendar.css file. 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 to
verify the layout and design.
Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work.
ReplyDeleteWebdesign
Thank you very much for writing such an interesting article on this topic. This has really made me think and I hope to read more. Online Quran Academy
ReplyDelete