Site Design Setup

XLEcom's Site Setup

The information presented on this page is also available via the Help buttons as shown in the Dialog Box images below.

The following are instructions on how to use XLEcom's Site Setup features and options.

Table of Contents

Web Site Layout Formats

  • Description of Framed Pages
  • Web Site Layout Options
  • Important Program References
  • A Note about Font usage - Preserving Your Design Intentions

Setting Up Your Site

  • Ad Layout Options
  • Site Properties
  • Left Frame / Area Region
  • Right Side Area
  • Top Frame / Area Region
  • Bottom Frame / Area Region


Web Site Layout Formats

Description of Framed Pages
The following describes how a Framed web site is constructed.

For a Framed web site, each page displayed within your web browser is composed of four (4) individual frame web pages as named below. A fifth page called index.html, usually located within the root directory of your web site, is a mapping page which calls all four of these individual frame pages together to make up the final web page you view within your browser. These four framed pages include the information shown below.

The index.html file is your Home Page link and is the file you open in your web browser to view the web site. It should be placed in the root directory of your web server.

Top frame: top.html  [Navigation Menus for support pages, Company Name, and Business Slogan]
Left frame: left.html  [Navigation menus for the Product Ad pages, View Cart, and Copyright]
Body frame:  [Area the Product Ad pages (page_xxx.html) and support pages are displayed]
Bottom frame: bottom.html  [Message, i.e. Company Message or Copyright]


Web Site Layout Options
Choose either to create a Framed or Non Framed web site. For a Framed site, each page displayed within the web browser window is actually composed of four (4) individual framed web pages, the top.html, left.html, bottom.html, and body frame page. The index.html page is a mapping page that calls all 4 pages together to create the final page you view in your web browser. The body frame page is the page that changes when a user clicks on any of the page navigation links. The top, left, and bottom frames stay static and do not move as the user scrolls up and down within the web page. A Non Framed web site uses individual pages, in other words, all the content for each page is displayed on a single page.


Important Program References
All the functions and dialog boxes within the program are referenced to a Framed site regardless if you choose to publish either a Framed or Non Framed web site. If you want to create a Non Framed a web site, then use the following related cross references for setting up your site.

For a Non Framed web site, use the following related cross references:
The Top frame, top.html in a Framed site is equal to the top area section of a Non Framed page.
The Left frame, left.html in a Framed site is equal to the left side area section of a Non Framed page.
The Body frame in a Framed site is equal to the center area section of a Non Framed page.
The Bottom frame, bottom.html in a Framed site is equal to the bottom area section of a Non Framed page.

Even though all the functions and dialog boxes within the program are referenced to a Framed site, they function the same for a Non Framed site.


A Note about Font usage - Preserving Your Design Intentions
When you select a font such as "Arial" for a text element, then the corresponding "Font Family" for that particular font will be utilized in the Published HTML code. For example, if you select the "Arial" font, then the "Arial,Helvetica,Geneva,Sans-serif,sans-serif" Font Family will be used. If you select the "Verdana" font, then the "Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif" Font Family will be used.

A "Font Family" is a group of fonts that exhibit similar characteristics. It is a prioritized list of font names used for text elements. The browser will try to use the first font value within the family it recognizes. If the original specified font does not exist on the user's computer, the next font within the family is tried. This process continues through the prioritized list until no more are available. If no match is made, the browser default font family will be used. This Font Family approach is utilized to help preserve your web site design intentions.

Below are the Font Families utilized within this program:

Font

Font Family

Arial:

Arial,Helvetica,Geneva,Sans-serif,sans-serif

Arial Black:

Arial Black,Helvetica Bold,Charcoal,Sans-serif,sans-serif

Comic Sans MS:

Comic Sans MS,Chicago,Sans-serif,cursive

Courier New:

Courier New,Lucida Console,Courier,Monaco,Monospace,monospace

Georgia:

Georgia,Palatino,Times New Roman,Times,Serif,serif

Impact:

Impact,Arial Black,Helvetica Bold,Charcoal,Sans-serif,sans-serif

Tahoma:

Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif

Times New Roman:

Times New Roman

Trebuchet MS:

Trebuchet MS,Tahoma,Verdana,Arial,Helvetica,Sans-serif,sans-serif

Verdana:

Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif


Setting Up Your Site

Ad Layout Options

The Product Ad pages can be published either in "Single Column" or "Two Column" format. If you choose the use the "Two Column" format, then make sure the "Ad fixed width size" within the "Ad Design" settings is set to a maximum of 300 pixels to accommodate room for two ads to be viewed side by side within the web browser window. This will ensure that both Ads will fit within web browser window thus preventing visitors from having to scroll left and right to view the products. If you choose the use the "Single Column" format, you have the option to separate each Ad with a Horizontal Line.

Recommended Ad widths: Single Column format = 568 pixels, Two Column format = 281 pixels

Product Ad Height Override Adjustment
Use these settings to adjust the Item Name and Item Description table cell heights to make all your Published Product Ads the same vertical size within your web site. See the sample diagram below.

Note: These settings only affect the Products Ads that are in the Two Ad Column Layout. Products Ads in the Single Ad Column Layout do not utilize these settings. You can also apply the Item Name cell height to the Product Ads that appear on the Home Page with Ads.

What does the Adjustment Do?
This is an optional feature for "tweaking" the look of your Product Ads in the Two Ad Column Layout format. In most situations, not all of your Product Ads will contain the same amount of text in either the Item Name or Item Description. Therefore when published, each individual Product Ad may appear to have different vertical heights due to text wrapping within the table cells. Use these adjustment settings to add extra space below the text within these designated table cell areas so that all of your published ads will have the same vertical height.

How to Achieve the Best Results
For best results, implement these settings after you have finished creating all of your Product Ads and are ready to Publish your final web site.

To determine the ideal pixel values to enter into the edit boxes, first Publish your web site without utilizing these settings (unchecked boxes). Next, by viewing the published web site in your web browser, find the Product Ad that yielded the largest vertical height and leave this Product Ad viewable on your monitor. Next, switch back to this program, check the Cell Height box(es) and enter some initial pixel values into the edit boxes and press the Preview Ad button to display the current Product Ad in a new browser window. Now place both the Preview Ad and previously Published Product Ad browser windows side by side to determine the new height adjustment pixel values you need to enter in order to make the vertical height of the Preview Ad match the height of the Published Product Ad that yielded the largest vertical height. You may have to repeat this Preview step a few times to determine the ideal values. Note: If you chose to suppress publishing of the longer Item Descriptions (Product Ad Display Override Options), then the Item Description Cell Height will have no affect. This is also true for the Product Ads that appear on the Home Page with Ads because the longer Item Descriptions are not present.

Note: These settings only affect the Products Ads if you selected the Two Ad Column Layout as shown in the examples below.

Example 1 - Before Adjusting the Item Name Cell Height
Product Ad web page with the long Item descriptions turned off. This page was published as is, without using any cell height Adjustment. Notice how each of the four product ads have different vertical heights.

Example 1 - After Adjusting the Item Name Cell Height
This same page was published again using the cell height Adjustment. Notice how each of the four product ads now have the same vertical heights.

Example 2 - Before Adjusting the Item Description Cell Height
Product Ad web page with the long Item descriptions turned on. This page was published as is, without using any cell height Adjustment. Notice how each of the four product ads have different vertical heights.

Example 2 - After Adjusting the Item Description Cell Height
This same page was published again using the cell height Adjustment. Notice how each of the four product ads now have the same vertical heights.

Additional Options
Include a "View Cart" and / or "Check Out" button on each Published Product Page
These optional buttons can be added to all your product pages if your situation may require them. They are optional, but are not necessarily required. By default, a "View Cart" button is already located within the left side navigation bar and a "Check Out" button is included within the Shopping Cart itself. If you want include additional "View Cart" and / or "Check Out" buttons published along the top of each product page, then check the corresponding boxes.

Include the following Message
If you want to publish a short message along the top of each product page, then check this box and enter a short message into the provided edit box.

Include a Category Page Identifier on the Product Ad Pages when Publishing
Note: This feature is only applied to Framed sites. Checking this box will place a Category Page Identifier which is a line of text composed of the main and sub category names for the products that appears on the page. An example category title is: Televisions - CRT and LCD TVs, where the main category is Televisions and the sub category is CRT and LCD TVs. It can be useful for identifying which product page the visitor is currently navigating.

You have two options: (1) Display it along the top of the page, or (2) have it dynamically float in the bottom right corner. For option (2), the Category Page Identifier will stay (float) in bottom right corner as the visitor scrolls up and down the page. The dynamically floating Category Page Identifier is a JavaScript routine that functions in Microsoft Internet Explorer web browsers.

Have the Shopping Cart open in a Popup window
When a shopper clicks on either the Add to Cart, View Cart, or Check Out button, the Shopping Cart is displayed. Check this box to have the Shopping Cart open in a new browser Popup window, otherwise if unchecked, it will open in the same browser window. You can set the properties of the Shopping Cart Popup window within the Ad Design settings.

You can change the dimensions of the Shopping Cart Popup window by entering the width and height pixel dimensions in the edit boxes under the Setup function on the Product Design sheet.

Product Ad Display Override Options for Publishing
If for some reason you want to either create small condensed sized product Ads or just change the look of the final published web site, you can override some of the settings / values within the Product's Database during Publishing of the web site. These overrides only affect the published web site. They do not change any of the settings / values within the Product's Database. Uncheck boxes to override settings.


Site Properties

Company Name / Page Title
This text will appear within the page tile of each Published page. It is placed between the <title></title> HTML tags. This text can be viewed along the top title bar of your web browser when viewing a Published page. It is also displayed within search engines listing results.

Frame Dimensions for Framed sites and Area Dimensions for Non Framed sites
The dimension values define the Top, Left, Bottom, and Width dimensions of the web pages. If using a framed site, these values define the dimensional parameters of the 3 outer individual framed pages stored within the index.html file. Note: The Right side area can only be utilized if you choose to publish a non-framed site.

The "Page width" defines the width of the page for Non Framed sites. It also affects the area widths of the Company Name and Navigation menus along the top of the page for both Framed and Non framed sites. The "Company Name width" is the area width allocated for the Company Name. The width area allocated to the Top Navigation menus is calculated based on the "Page width" and "Company Name width". The formula is "Page width" - "Company Name width" - 6 = Top Navigation menus width area (ie. using the default values, this would be: 757 - 260 - 6 = 491 pixels).

If you change the above dimensions, you may need to modify the supplied frame images to accommodate the new dimensions. Keep in mind that you may also need to change the background color of your Product Ad images to match the page background color you selected.

Below is a screen shot image of a Preview page showing both the Page and Top Frame / Area width dimensions. If you utilize the Right side area, then the site dimensions will automatically adjust (wrap) to the width of the web browser.

Mouse Over Hyperlink Styles
You can change the appearance of all the mouseover hyperlinks within your web site by selecting both the color and underline style properties. These style property values are stored between the <style></style> HTML tags located within the <head></head> section of each published HTML page.

Note: For the mouseover hyperlinks colors to appear correctly on the Left and Top navigation menu links, you must set the color properties of these navigation items to (no color). You can access these settings within the "Left Frame" and "Top Frame" dialog box set ups.

To properly see how the hyperlinks would appear on a new visit to your web site, you should clear your Browser's Temporary Internet Files (cache) between page previews.


Left Frame / Area Region

Left Frame / Area Region Navigation Menus
Includes the Main and Sub Category Navigation menus for the Product Ad pages, the View Cart button, and the Credit Card and Copyright statement notes.

Product Navigation Menu Options
Here you can change both the Main Category and Sub Category font properties. If needed, you can also add both a Sub Category bullet prefix (•) and a Sub Category products / page count suffix to the  product menu's navigation links.

View Cart button and Credit Card / Statement Location and Information
You have the option to display the "View Cart" button and the Credit Card Image / Statement above  or below the left side Navigation Menus. If you have many product categories, you may want to display these items above the of Navigation Menus so visitors will not have to scroll down the page to click on the "View Cart" button. To change either the "View Cart" the Credit Card logo image, click on the folder icons.

Credit Card Note
Enter a note such as: "We accept these credit cards". This note will appear above the Credit Card logo image.

Copyright Note
&#169; is the HTML character code for the Copyright © symbol. Therefore Copyright &#169;2005 = Copyright ©2005. This note will appear at the bottom of the left frame / area page.

Advertisement Block and Additional User Code (underneath the Copyright Note)
If you want to add an Advertisement Block, then check the "Display Advertisement Block" check box and press the corresponding button to design your ad. If you want to add Additional User Code, then check the "Display Additional User Code" check box and press the corresponding button. In either case, enter in plain text or HTML code. The edit boxes are limited to 256 characters.

Left Side Advertisement Block Design - Featured Product and Text based Advertisements

Dialog Box screen shot showing the Advertisement Block Design Utility:

The information for the Advertisement Block will be written out in a separate JavaScript ASCII text file located in the html directory. This file will have the file extension .js as in ad1.js for example. When a web page from your site is viewed, the contents of the Advertisement file is dynamically extracted and displayed on the web page within the Left Frame / Area. The code in the HTML page that calls the JavaScript ASCII text file is similar to the following:

<script language="JavaScript" src="ad1.js"></script>

The benefit of having the contents of the Advertisement located in a separate file, is that you only need to replace this single file when you want to change the Advertisement. The rest of the site remains untouched.

You can choose either a (1) Featured Product Ad that can include an Add-to-Cart button or a (2) Text Advertisement Block. For the Text Advertisement Block, if any of the three text elements contain an open or close angle bracket (<>), then it will automatically be assumed to be code instead of text, and therefore the font formatting will not be applied to the code. Each of the three text elements are separated by a line break (<br>).

Note: The Preview and Publish .js files are not interchangeable. The Preview .js file contains full file image paths to your local Assets folder on your computer.

The Featured Product is keyed off the following Database fields
Both the Featured Product and the Home Page Ad Specials features are keyed off either the "Item Number" or "Item Name" field column within the Database. In other words, the Macro routine behind this feature uses the selected field column to determine the locations of the selected Product Ads within the Database.

For this feature to function properly, it is crucial that all values within either one of these Database fields (all values within the column) contain all unique values (all different from each other). If for example all your item numbers within the "Item Number" field are unique, then select the "Item Number" option. If you are not using the item numbers within your product Ad and you select the "Item Name" option, then all your item names within the "Item Name" field must be unique in order for this feature to function properly.

For more information on how this process is implemented, see the following topic:
How to Create an Advertisement Block

Left Side Additional User Code
Use this section to add your own user code to the left side area of the site.


Right Side Area Region

Right Side / Area (Non-Framed Site Only)
The right side area can only be utilized if you choose to publish a non-framed site.

If you choose to utilize the right side area, then your website will automatically resize (wrap) to the dimensions of the web browser. You can turn-on the right side area via the Site Setup - Properties section or via the Publish routine.

Custom Code Block 1 and Custom Code Block 2
To activate the Custom Code Blocks, check the check boxes and enter in your data. You can add any type of text or code into these block. For example, it can be standard text, HTML code, or JavaScript. The code you enter into these blocks must be one contiguous line of code, meaning that there cannot be any line breaks or character returns in the code. There is also a 256 character limit for each block.

Note: If needed, you can use these Block areas for revenue advertising such a Google AdSense.

Right side area Product navigation menus
You have the option to split the Product navigation menus between both the left and right side areas. However, you can only make the split at a Main category level and not at a Sub category level.

To split the Product navigation menus, select a Main category from the list within the scroll box. You must select the first occurrence of the Main category. All menus including and below the selected item will appear on the right side of the site.

If you want all the Product navigation menus to appear on the right side, then choose the very first item in the scroll box.

If you need to update the Main Category >> Sub Category list box, press the Update Listing button.

Right Side Advertisement Block Design - Featured Product and Text based Advertisements

The right side advertisement block works the same way as the left side advertisement block.


Top Frame / Area Region

Top Frame / Area Region Options
The Company Name will appear in the top left corner of the web browser. The Business Slogan will appear in the top-center location of the web browser.

Generate the Top Navigation Menus
Check this box to generate Top Navigation Menus for up to eight (8) support pages. The first navigation menu item is a link to the home page, index.html for non framed sites and body.html for framed sites. You can change the name of the link, but the link will always refer to either of these two pages. If you choose to generate Top Navigation Menus, then this home page link will always be generated.

You can add up to seven (7) additional top navigation menu items. The page links generated for these menu items are the names entered in the edit boxes. For example, if the name "About Us" is entered, then the page link will be to the file about_us.html. All page link names generated will be lower case text with the spaces between the words replaced with underscores. The check boxes next to the menu item edit boxes indicate either to generate or not to generate the menu item. If you choose not to generate the menu item, uncheck the box.

Generate Support Pages for each menu item
If you choose to generate the Top Navigation Menus, you also have the option to have this program automatically generate additional support pages for each of the menu items you entered in edit boxes 2 through 8. If you want the program to generate the Top Navigation Menus but not to generate the support pages, then include you own custom pages for each menu item in the HTML assets folder. This way the program will copy your custom HTML files over to the Publish folder during the publishing routine.

Top Header Vertical and Horizontal Alignment

Vertical and Horizontal Alignment
Use this Alignment Utility to position the top header items on your web pages.

Incremental Movement
The incremental alignment is accomplished by adding padding to the table cells (<td>) which enclose the top header items. Adding padding will allow you to fine tune the position of these items in all directions. Both the Top and Left padding values will make the most noticeable changes. The padding values are in pixels (px).

Preview
Press the Preview button to view the actual results within an HTML page.

Default Values
Press the Default Values button to revert back to the program's original default settings.


Bottom Frame / Area Region

If you would like to add a message to the footer of your the web site, the bottom of the page, then check the Message box and enter a message such as a Company business slogan or copyright notice. If you want this Message to be a hyperlink, then check the Message URL check box and enter the web page URL.

Positioning:
  Horizontal options: left, center, right      Vertical options: top, middle, bottom

Padding:
  You can add padding to fine tune the position of the footer message.
  The padding values are in pixels (px).

Note:
  If this message is to be a copyright, for example, Copyright © 2008, you can enter it in either of the following two formats:

  Copyright © 2008 or Copyright &#169; 2008 where &#169; is the HTML character code for the copyright © symbol.