On many web sites you will see small calendars as a feature
of the site design. Blogs use them as a way to jump to the entry for a given
day, on a site for an organization you might find a calendar allowing the
user to see at a glance on which days events are taking place, they can be
useful on a Intranet site allowing important events in the company calendar
to be flagged up in a small calendar displayed on each page. In this article
we will learn how to style an events calendar using CSS.
We will walk through the steps of creating a calendar using
an HTML table, complete with all tags and attributes to ensure that this table
is accessible to users of alternate devices. Having created the calendar in
the mark-up we will then move on to styling it in an attractive way using
the CSS tools within Dreamweaver, in such a way that we do not add unnecessary
mark-up to the page.
Our first step is to create our calendar. If you are working
on a dynamic site, or using blog software you may already have a calendar
ready to style, however in this first step we will be creating a calendar
that is accessible and also that contains the correct mark-up to make it easier
to style with CSS later. You should be able to edit the calendar that your
script produces fairly easily in order to get it ready for styling with CSS.
In a new document in Dreamweaver, insert a table that has
7 columns and 6 rows.
In the Header section select 'Top'.
Under Accessibility give the table a caption of 'March 2004',
and a Summary of 'Events Calendar for March 2004'.
Insert Table Dialog
Click OK to insert the table into your document. The text
entered under caption (March 2004) will display above the table cells, the
summary will not appear in Design View or in the browser as it is information
for people using text only devices such as screen readers so that they understand
the context of this table.
The table in Design View
We now need to populate our calendar with the dates. In
the top row of the calendar write out the days of the week (in single letter
format) S M T W T F S. The days are going into the table heading row as when
we created the table we specified that the first row should be headings. Dreamweaver
(and most web browsers) style the table heading (<th>) tag by centering
it in the cell and displaying it in bold type. This will help to make it obvious
to users of text only devices that these are the headings for the column below.
Now add the days, the first day of March 2004 is a Monday
so start with '1' in the first row under 'M' and work along until you get
The Calendar Table with dates entered
If you entered a width for the table as I did, to prevent
it collapsing while it had no data in it, remove it now so that the table
collapses to the width of the data.
The Unstyled Calendar
Switch into Code View to see the mark-up that has created
border="0" summary="Events calendar for March 2004">