- Project Goals
- Preparation
- Laying the Groundwork
- Styling the Document
- Working with a More Detailed Calendar
- Branching Out
This chapter is from the book
This chapter is from the book
This chapter is from the book
Laying the Groundwork
If we load up the bare-bones calendar of days that the database output script is producing, the content is pretty much recognizable as a calendar already. We can also see right off the bat that the content is enclosed in a table (see Figure 3.1).
)
Figure 3.1 The unstyled calendar of days.
We can see that some days are hyperlinked to other pages and some aren't, but what's the table's overall structure? We could just turn on borders, but that might not tell us enough. Instead, let's temporarily insert some styles that will reveal the structure of the table to us (see Figure 3.2):
<title>Project 3 Chapter</title>
<style type="text/css">
table {border: 1px solid red;}
th {border: 1px dotted red;}
td {border: 1px dotted gray;}
</style>
</head>
)
Figure 3.2 Revealing the structure of the calendar.
So we have two rows of th elements, and the rest is made up of td elements. We can also quickly see that the calendar's "title" is in a th cell that spans all seven columns.
It's also the case that the script is filling in the days before the beginning of the month and after the end of the month. We could probably change the script to not fill in those days, but let's keep things the way they are. Our first order of business should be to class and identify various pieces of the calendar to reflect their nature. Let's start by identifying table rows. The second row is the traditional day-names row, and above that is what we might call a title. So let's identify those rows as well as the calendar itself:
<table id="calendar"> <tr id="title"> <th colspan="7">July 2002</th> </tr> <tr id="days"> <th>Sun</th>
For various reasons, it's probably a good idea to id the first and last weeks in the calendar. The reasons for this will become clear later in the project, but for now let's label them according to their nature:
</tr> <tr id="firstweek"> <td>30</td> </tr> <tr id="lastweek"> <td>28</td>
Now we need to consider how we should label the ordinary td cells—the ones that contain the actual days of the month. Every day in the month is also a day of the week; that is, the day will be a Monday, a Thursday, or one of the other days of the week. But if you recall, we have days from three different months. Finally, every day can be uniquely identified as a combination of month and date. So we could label the cell corresponding to Tuesday the 9th of July like this:
<td class="jul tue" id="jul09">9</td>
Thus, this particular table cell belongs to the classes jul and tue, and the day's id is jul09. Labeling all of the days on the calendar in a similar fashion will provide us with a great deal of flexibility later on, so let's do that now. Don't forget that the first day on the calendar is part of June, so its markup should look like this:
td class="jun sun" id="jun30">30</td>
Similarly, the last few days on the grid are part of August, so they should have their class and id values adjusted accordingly.
While we're at it, we should add day-of-the-week classes to the th elements in the day-names row, like this:
<tr id="days"> <th class="sun">Sun</th> <th class="mon">Mon</th> <th class="tue">Tue</th> <th class="wed">Wed</th> <th class="thu">Thu</th> <th class="fri">Fri</th> <th class="sat">Sat</th> </tr>
And last but not quite least, we're going to get rid of the separation between table cells so that the table is as compact as we can make it (see Figure 3.3):
<table cellspacing="0" id="calendar">
)
Figure 3.3 The slightly more compact calendar, all marked up.
With that, we're finally done with the markup grind and can get on to the fun part!