Creating Your Own Layout Styles

One easy way to create a new layout is with the Layout Designer.

One powerful feature of dbQwikSite, is that you can create layout templates with the built in HTML editor. You can use the power and creativity of the HTML editor to create custom layouts, which you can then save as dbQwikSite layouts.

When you create a template, it should be for the layout of a single record in your dataset.  When this is used in a project, it will be repeated automatically for each record on your page.

Design your HTML as you want it to appear in the final page.  Then instruct dbQwikSite to insert the data into the relevant area of your template.

The place holders are "special" HTML tags.  The special tags are very simple and easy to remember. However, you need to set the ini file to match with your HTML pages.

There are 2 types that you must take into consideration.

#ITEMNAME(Number) tag - for field Titles

#ITEMVALUE(Number) tag - for field Values

          So...

<#ITEMNAME1> will display the title (name) of the first field in tags position in the template.

<#ITEMVALUE1> will display the value of the first field in the tags position in the template.

To Create Your Own Layouts Styles:

1. Create HTML Template

Here is a sample Layout Style:

<table width="450" border="0" cellpadding="1" cellspacing="0" bgcolor="#CC6600">

<tr>

<td><div align="center">

<table width="100%" height="100%" border="0" cellpadding="3" cellspacing="0" bgcolor="#FFFFFF"> <tr>

<td width="37%" rowspan="2" bgcolor="#FFFFFF"> <div align="center"><#ITEMVALUE1> </div></td>

<td width="63%" height="27"> <div align="left"><strong>

<#ITEMNAME2> : <#ITEMVALUE2></strong></div></td>

</tr>

<tr>

<td height="72"> <p><#ITEMVALUE3></p>

<p align="right"><#ITEMVALUE4></p></td>

</tr>

<tr>

<td><p align="center"><strong>

<#ITEMNAME5> : <#ITEMVALUE5></strong></p></td>

<td><div align="center"><#ITEMVALUE6></div></td>

</tr>

</table>

</div></td>

</tr>

</table>

Click to see the result of this template: Sample Layout Style

Note: You create in any HTML editor and save it as Filename.QSS

2. Create Style Details:

Sample Style Details:

[StyleDetails]

Description=DBQwikSite Catalog Style3

[Item1]

ItemName=ProductImage

ItemType=Image

DefaultValue=product.gif

[Item2]

ItemName=ProductName

ItemType=Text

DefaultValue=%ProductName%

[Item3]

ItemName=ProductDescription

ItemType=Text

DefaultValue=%ProductDescription%

[Item4]

ItemName=MoreInformation

ItemType=Text

DefaultValue=%More...%

[Item5]

ItemName=Price

ItemType=Text

DefaultValue=%Price%

[Item6]

ItemName=BuyNow

ItemType=Image

DefaultValue=buynow.gif

Note: Save the file as Style.ini

3. Save the file into the correct place

When you have finished creating the layout style, you have to save your layout style in the Catalogs folder of your dbQwikSite program folder. (dbQwikSite > LayoutStyles > Catalogs ).  Create a folder with the same name that you want your style to be listed as in the styles list.  Save your layout style file in that folder with STYLE.QSS and STYLE.INI

4. Save any images that are part of your template in the same folder.

The Layout Style depends on your design. dbQwikSite also provides layout for you to use which you can modify/adjust to suit your needs.

See Also:

Layout Designer