Create Dynamic Banners Using ASP.NET
by Hamid Shojaee10/08/2001
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:
|
|
|
|
|
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>
<tr>
<td>
<table border=0 bgcolor=<%=sBackgroundColor%>
width=<%=iWidth-(2*iBorderSize)%>
height=<%=iHeight-(2*iBorderSize)%>
cellspacing=0 cellpadding="0">
<tr>
<td width="100%" align=center>
<%=sTextString%>
</td>
</tr>
</table>
</td>
</tr>
</table>
<%
end sub
%>|
|
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.
