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.

Top Decoration Header

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.

Reference

Description

Value

Sheet1!D439 =

Ad Size (1 = Fixed Size, 2 = Resizable):

1

Reference

Description

 Value

Sheet1!D460 =

Ad Table Width Fixed Size (pixels):

281

Defined Names

Name

Reference

TD1

="<td width=1></td>"

TD2

="<td></td>"

TD3

=Sheet1!$E$444

TD4

=Sheet1!$E$445

Reference

Description

Formula

Sheet1!E444 =

Border Table Cell:

="<td BGCOLOR="""&Sheet1!E441&"""></td>"

Sheet1!E445 =

Shaded Fill Table Cell:

="<td BGCOLOR="""&Sheet1!E443&"""></td>"

Reference

Description

Formula

Result

Sheet1!E441 =

Border Color:

=OFFSET(Colors!L2,Sheet1!D441,0)

#999999

Sheet1!E443 =

Fill Color:

=OFFSET(Colors!L2,Sheet1!D443,0)

#D3D3D3

Reference

Value

Result

Sheet1!D441 =

163

Gray (Light 4)

Sheet1!D443 =

161

Gray (Light 2)

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:

HTML Color Lookup Table (scroll box)

Color Codes
(Cell Colors!L1)

HTML Color
(Cell Colors!L2)

1.     (No Color)

 

2.     Almond

#FFEBCD

3.     Aqua

#00FFFE

4.     Aquamarine

#7FFFD4

5.     Aquamarine (Medium 1)

#348781

6.     Aquamarine (Medium 2)

#66CDAA

7.     Azure

#F0FFFF

8.     Beige

#F5F5DC

 - - - - - - - - - - - - - - - -

- - - - - -

161. Gray (Light 2)

#D3D3D3

162. Gray (Light 3)

#A9A9A9

163. Gray (Light 4)

#999999

 - - - - - - - - - - - - - - - -

- - - - - -

Sam Raheb
XLEcom Program Developer