oreilly.comSafari Books Online.Conferences.


AddThis Social Bookmark Button

Create Dynamic Banners Using ASP.NET

by Hamid Shojaee

If your artistic skills are as bad as mine and have ever had the need to create a simple banner you know how frustrating and time consuming it can be to design a banner that gets your ideas across. Sometimes, however, the most effective banners tend to be the simplest looking banners. Fortunately, it's easy to make simple banners in HTML. In this article, we'll write a method that can create a simple banner on the fly.

Designing the Banner Creation Method

Before we start coding our CreateHTMLBanner Method, lets take a look at some sample HTML banners that our method should be able to produce:

Win Free Stuff! - Over $$$ in developer software and books!

Win Free Stuff! - Over $$$ in developer software and books!
The One-Stop Resource for Microsoft Professionals

The One-Stop Resource for Microsoft Professionals

As you can see from the variety in our sample banners, our banner creation method has to be fairly flexible. In particular, it has to take following options as parameters:

  • Banner's Size (both height and width)
  • Border Size (in Pixels)
  • Border Color
  • Background Color
  • Text that appears inside the box

With those options sent in as parameters, our banner creation function becomes extremely flexible. Now lets take a look at the code that will generate the HTML banner:

Code Sample 1: The code for the CreateHTMLBanner Method

sub CreateHTMLBanner(sBorderColor, sBackgroundColor, _
            sTextString, iWidth, iHeight, iBorderSize)
 <table border=0 bgcolor=<%=sBorderColor%> 
     width=<%=iWidth%> height=<%=iHeight%>
     cellspacing=<%=iBorderSize%> cellpadding=0>
    <table border=0 bgcolor=<%=sBackgroundColor%>
              cellspacing=0 cellpadding="0">
      <td width="100%" align=center>
end sub

.NET Framework Essentials.NET Framework Essentials
By Thuan Thai & Hoang Lam
June 2001
0-596-00165-7, Order Number: 1657
320 pages, $29.95

Note that in the code above, we use a large number of <%=[code]%>. This is purposely done to make the code easier to read and for the resulting HTML to be easy to understand. If performance is a high priority for you, consider changing this code to use the Response.Write method.

To get the border effect that we need in a banner, we create 2 tables. One exterior table that is the size of our banner and another interior table that is the size of our usable space (or banner size - borders). The border's size is determined by the cellspacing attribute of the exterior table. The border's color is determined by the background color of the exterior table.

Using our CreatHTMLBanner function, the two "Win Free Stuff" banners from above can be generated dynamically using the following code:

Code Sample 2: Generating our Sample Banners

dim sBannerText
  sBannerText = "<center><b><a href=GiveAways.asp>Win Free Stuff!</a></b>" _
    & " - Over <font color=red><b>$15,000</b></font>" _
    & " in developer software and books!</font></center>"

CreateHTMLBanner "black", "yellow", sBannerText, 468, 60, 5
CreateHTMLBanner "Red", "White", sBannerText, 468, 60, 2

The best part about HTML banners is that they load FAST! No matter how much text you put into an HTML banner, it will always be smaller than the equivalent banner in GIF or JPG formats. As an example, the five banners shown above are collectively less than 3K! That translates into much lower bandwidth consumption. If you must create a banner in GIF or JPG formats, you can simply use your CreateHTMLBanner function and take a snapshot of the resulting banner.

Hamid Shojaee is a Senior Consultant with Microsoft Consulting Services and co-founder of Vitrix Corporation -- a time and attendance software company specializing in web-based time tracking solutions.

Return to the .NET DevCenter.