If you're always forgetting the birthdays of distant family members, get your act together and create a simple but effective calendar with images. The beauty of this calendar is that you can put it up on the internet for everyone to see, or you can even email it to relatives. Also, so you don't forget a single birthday, once you've created the internet calendar, you can save it on your hard drive and make the calendar your default browser page. So when you boot up your browser, you're greeted with the calendar. For this tutorial we are using Paint Shop Pro and Macromedia Dreamweaver 3. Although it is possible to use just about any package you like.

part one: preparation
The first part of the tutorial is the preparation, the graphics creating bit. For this you will need to load up Paint Shop Pro (or another graphics package) and create a calendar using the line tools and text. We created an 800x500 sized blank canvas to create the calendar.

• To make drawing lines easier, use the 'view grid' function on the view menu
• Use the text tool to create the days of the week for a month in each box
• Create an individual template for each month and save them accordingly
• Copy them from a proper diary to make sure you have the dates in the right day
  
  Also, you will need some images of family members or friends. Create two copies of each image and shrink one of them down to thumbnail size. We will use the thumbnail images as links on our calendar.
  
  That's the easy bit over with. What you need to do now is load up your web design package (Dreamweaver 3 is one we recommend).
  
  Before you start creating pages, its best to grab a pencil and some paper and draw a layout of how your web calendar is going to look. Create a box for each page and write inside what the content is going to be. Then draw lines from box to box where you want to place a link. This will make things a lot easier when you actually come to create the calendar in Dreamweaver.
  
  Our calendar is going to go three deep. This means we will have an index page (1) with each month listed. Each month will then go through to the calendar for that month (2), and if there are any birthdays, they will be linked to an individual page with an image of that person (3). You can also link to other people from within an image page.
  
  Now, you can start creating the calendar.
  
  
• First of all, create a blank index.html page in Dreamweaver
• On a separate line type in the months of the year
• Select all the text and center it
• Choose a large font size to make the text stand-out
• Save the file
• Close down the file
  
  Now, after you've created the first page, you can then create the second part which will be one of the months. To do this:
  
  Right mouse click in the local folder window and select new file Call the file january.htm (or whatever month you're creating) *remember to use lowercase
  
  Now you've created the page, you can start to create a grid for your calendar.
  
  
• Double-click on the January file to open it
  
  You will of course notice that the page is blank. This is because you haven't actually put anything on it. Now, Dreamweaver has a very good function called layers. These allow you greater control over the layout of your pages and they are very easy to use.
  
  
• From the insert menu, select 'layer'
• Click inside the layer
• From the insert menu, select 'image'
• Locate the calendar graphic for January on your hard drive and click OK
• Click yes when Dreamweaver asks you if you want to copy the file into your local folder
  
  Your grid will now appear on the page.
  
  Topper's tip: create a calendar as a graphic first
  
  Part 2: Hyperlinking
  Now that your calendar is on the page, you can start to add the links to the other pages. For our example we're using made up dates, but you can create links on actual dates.
  
  Before we start adding links to other pages, we want make sure that our layer is in the correct position on the page.
  
  
• Carefully move the mouse pointer to the edge of the layer until a crosshair is present
• When the layer appears in the properties box, you know you've got it.
• In the L (left position) text box, type 0
• In the T (top position) text box, type 0
  
  This will put our layer in the top left hand corner of the screen. We could of course start creating the birthday links, but instead we're going to create a link from the index.html page to the january.htm page.
  
  
• Open up the index.html page and highlight the January text
• In the properties box, click on the small target folder
• Select the january.htm file and click OK
  
  This will now create a hyperlink from the index page to the January page.
  
  If you go back to the January.htm page, all you'll see is a blank calendar. To make it look somewhat more attractive, we're going to add an image of someone to a day in that month. To do this we are going to use layers in a different way. We're going to use 'nested layers'. A nested layer is a layer that is linked to a layer underneath. This means that they won't move around when they are viewed in different browsers.
  
  When creating nested layers, you need to make sure that the current layer is active. To see this, press F11 to view the layers window and make sure the layer name is in bold. Then create a new layer from the insert menu. When you do this the layer will appear in the layer menu as a sub-layer of your original.
  
  
• Drag the new layer over the day of the month where you want to put the image
• Click inside the layer and select image from the insert menu
• Find a thumbnail image of the person you want on the calendar
• Copy it into your local folder
  
  Always use thumbnails instead of large images that are shrunk down to size in Dreamweaver. This will create smaller file sizes.
  
  If the image is larger than the slot in the calendar, highlight it and resize it to fit. Also, resize the layer window so that it fits the image perfectly.
  
  Topper's tip: prepare your graphics first
  
  Part 3: going interactive
  Now that the image is in place, we can start creating another link which this time will go through to a final page with a bigger image and some nice text about the person whose birthday it is. Also, remember to save your work as you go along. It'll save heartache at a later date.
  Once you've saved your work, minimise the page and return to your site map page.
  
  
• Right-mouse click in the local folder window and select new file
• Give the page a file name (the person whose birthday is good)
• Load the page
• Insert a new layer
• Insert the larger image into the layer and resize the layer to fit
• Create a new nested layer that links to this one
• Click inside the new layer and type in some text to go with the image
• Change the font size and colour of the text if necessary
• Save the file
  
  Now, once you've created the page, go back to the page that contains the calendar layout. Now all that's really left to do is the linking.
  
  
• Highlight the image thumbnail that is on the calendar
• Click on the link folder in the properties window
• Select the page you want to link to and click OK
  
  Now, all you have to do is save your work again. And finish the calendar with the remaining months. Also, you may want to create a back button that links back to the previous page.
  
  To test your work press F12 in Dreamweaver.
  
  Now, what you have is an interactive calendar.
  
  Topper's tip: add links to new pages with large images