Design of the Top Decoration Header
Design of the Top Decoration Header
The following information is provided for Excel users who may be curious on how the color shaded area across the top of the Product Ads was created without the use of images. The design method utilizes both Formulas and Defined Names to create an adjustable width, non-symmetrical HTML Table called the Product Ad Top Decoration Header.
Dynamic Flexibility of the Top Decoration Header
Below is an illustration of a typical Product Ad minus the long Item Description. The color shaded area across the top of the Product Ad is called the Top Decoration Header.
The XLEcom Web Designer has the option to either display a Top Decoration Header on all Product Ads or to turn it off. This is an optional visual enhancement feature for adding a little flair to the look of your site.
A Dynamic Top Decoration Header, is used exclusively for Product Ads and is different from the all other similar looking Top Decoration Headers used within the Site Themes. The Product Ad Top Decoration Header is completely constructed of HTML code and is not an image or object. All the other Top Decoration Headers used within the Site Themes are actually images.
The Product Ads are unique. They must have the ability to stretch horizontally and still maintain the correct size proportions depending on both the environment and contents contain within the Product Ads themselves.
An image could not be used because it could not resize proportionally based on values designated by the Web Designer. If an image was utilized, then the slanted 45º angle portion of the top left corner could not resize in a correct proportions to retain the 45º angle and outline border characteristics. An image would therefore stretch into an odd-shaped looking form.
The solution for producing a Dynamic Top Decoration Header for the Product Ads was to created a Top Decoration Header completely out of HTML code using a single Table with a grid of many small cells. The image below illustrates the results of the HTML Table code for the Top Decoration Header. A 10x magnification is also provided to show the rows and cells utilized in the table.
Since the Web Designer is allowed to define the variables used to create the Top Decoration Header such as the Ad Table Width, Border Color, and Shaded Fill Color, a series of formulas had to be used to generate the final published HTML Table code for the Product Ad Top Decoration Header.
The following is the final published HTML Table code for the Top Decoration Header:
<table border=0 cellspacing=0 cellpadding=0 width=281><tr><td width=1 height=1></td><td width=1></td><td width=1></td><td width=1></td><td width=1></td><td width=1></td><td width=1></td><td width=1 BGCOLOR="#999999"></td><td width=281 BGCOLOR="#999999"></td><td rowspan=8 width=1 BGCOLOR="#999999"></td></tr><tr><td height=1></td><td></td><td></td><td></td><td></td><td></td><td BGCOLOR="#999999"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr><tr><td height=1></td><td></td><td></td><td></td><td></td><td BGCOLOR="#999999"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr><tr><td height=1></td><td></td><td></td><td></td><td BGCOLOR="#999999"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr><tr><td height=1></td><td></td><td></td><td BGCOLOR="#999999"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr><tr><td height=1></td><td></td><td BGCOLOR="#999999"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr><tr><td height=1></td><td BGCOLOR="#999999"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr><tr><td BGCOLOR="#999999" height=8></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td><td BGCOLOR="#D3D3D3"></td></tr></table>
The HTML Table Formula Code
The following is the Excel formula used to generate the HTML Table code:
="<table border=0 cellspacing=0 cellpadding=0 "&IF(Sheet1!D439=1,"width="&Sheet1!D460,"")&"><tr><td width=1 height=1></td>"&TD1&TD1&TD1&TD1&TD1&TD1&"<td width=1 "&"BGCOLOR="""&Sheet1!E441&""""&"></td><td "&IF(Sheet1!D439=1,"width="&Sheet1!D460,"")&" "&"BGCOLOR="""&Sheet1!E441&""""&"></td><td rowspan=8 width=1 "&"BGCOLOR="""&Sheet1!E441&""""&"></td></tr><tr><td height=1></td>"&TD2&TD2&TD2&TD2&TD2&TD3&TD4&TD4&"</tr><tr><td height=1></td>"&TD2&TD2&TD2&TD2&TD3&TD4&TD4&TD4&"</tr><tr><td height=1></td>"&TD2&TD2&TD2&TD3&TD4&TD4&TD4&TD4&"</tr><tr><td height=1></td>"&TD2&TD2&TD3&TD4&TD4&TD4&TD4&TD4&"</tr><tr><td height=1></td>"&TD2&TD3&TD4&TD4&TD4&TD4&TD4&TD4&"</tr><tr><td height=1></td>"&TD3&TD4&TD4&TD4&TD4&TD4&TD4&TD4&"</tr><tr><td "&"BGCOLOR="""&Sheet1!E441&""""&" height=8></td>"&TD4&TD4&TD4&TD4&TD4&TD4&TD4&TD4&"</tr></table>"
Since Excel has a limit of 1,024 characters that can be used within a formula and that the HTML Table code must contain variables for the Web Designer to assign, the HTML Table code formula shown above had to be composed of smaller referenced formulas in order to generate the complete HTML Table code for the Top Decoration Header.
The smaller referenced formulas shown below are used in the HTML Table code formula shown above. The table cells, TD1 thru TD4, in the above HTML code are Defined Names which contain reference formulas themselves.
|
|
|
|
|
|
The table below is a partial view of the HTML Color Lookup table used in the selection of colors via the drop down scroll boxes presented to the Web Designer within the program:
|
Sam Raheb
XLEcom Program Developer
- Login to post comments
Recent comments