Creating a CSS Card

Eric Meyer on CSS is an excellent book on styling web pages with CSS and I recommend that you read it or More Eric Meyer on CSS if you are looking to learn more about styling your web pages. It is available in class or at your favorite bookstore.

One of the projects included in the book is to create a card (this sample card was created for Thanksgiving). I thought you might enjoy creating a card for the upcoming holidays. I have created an updated card for this holiday season.

Needed Materials

The source code (CSS and HTML) that you need for this exercise is here. You can use the two images that I used to practice, leaves480.jpg and halfscreen-black.gif (right click these files and select Save Target As, save the files to your user directory) or use your own.

The image that I have provided is a fall image and it is 480w x 320h pixels. The halfscreen-black.gif image is a halfscreen (checkerboard) image that is 10 x 10 pixels. We will place this mesh image behind our text so that the text is easier to read and more attractive.

You can utilize TextPad or Dreamweaver MX to input the source code for this project.

You can upload your greeting card code and images to your f2o.org account. If you do not have an f2o.org account your instructor will upload your card to the class server and provide you with a web address to send to your family and friends.

Creating Your Own Card

After we create the sample card, you can use your own image to create your own card. You will have to adjust the css code if your image is not the same size as the image that I am using. Once you have the page created feel free to experiment with the style of the card.

Additional Images

Here are some additional halfscreen images that you can use for your cards:

halfscreen-gray.gif

halfscreen-black.gif

halfscreen-white.gif

I have downloaded some winter images for use on your own cards. They are saved in J:\webclass\card images.

FreeFoto has a variety of Christmas, seasonal, and weather related images that you may want to use.

Sending your card

This particular card code was not written to be embedded in e-mail and it will not display properly as an embedded message. There is too much CSS used in the code.

Instead, you will need to send your card out as a link in your e-mail message. Upload your card code and image to f2o.org then preview the card in Internet Explorer.

Select the address and press CTRL + C to copy the web address. Open your web based e-mail (Yahoo, Hotmail, etc.) and compose a new message. Click in the message area and press CTRL + V to paste the link. Add any additional notes/greetings in the message area and send the message.

If you really want to try to send it as an embedded e-mail message you will need to remove/delete the first line of code <?xml version="1.0" encoding="iso-8859-1"?>. It won't embed at all if this code is not removed.

In order to send the message you will need to open the card in Internet Explorer and click File > Send > Page by E-mail. This should open your default e-mail program (Outlook or Outlook Express) you can then send the e-mail. If your recipients are using Outlook or Outlook Express the card will look good when they receive it. If they are using web based e-mail (Yahoo, hotmail, etc.) the images will be attached instead of embedded and the card won't look so good.

If you live in the San Francisco Bay Area and you're interested in learning more about web design and development, graphics, or computers in general, consider taking classes at the Contra Costa ROP Technology Center. We offer affordable computer training in a variety of subjects. Visit our web site for more information.

Stop by my Amazon Store for gifts for the web developer.