|
Building Dynamic
Templates
In building template basics we
showed how to insert the main content replacement string in your
design. But our system is much more powerful than that. There are
bunch of replacement strings that can be used to allow website
owners contol over backgrounds, colors and other elements of the
design.
Below we look at a basic
layout, with a menu area on the left of 130 pixels and a 650
pixel content area on the right side of the page.
To give the website owner
contol of the text, colors and title area we replace the color
hex codes with our own dynamic replacement strings. See The Full
List of Replacement Strings for all
the replacements codes available.
<html>
<head>
!!TITLE!!
</head>
<body background="!!BGIMAGE!!" text="!!TEXTCOLOR!!" link="!!LINKCOLOR!!" vlink="!!VLINKCOLOR!!" alink="!!ALINKCOLOR!!" >
<table border="0" cellpadding="0"
cellspacing="0">
<tr>
<td valign="top" width="130">
!!MAINMENU3!!
</td>
<td valign="top" width="650"><center>
!!MAINCONTENT!!
</center></td>
</tr>
</table>
</body>
</html>
By replacing elements such as
the title tags <title>Page Title</title>
with our code !!TITLE!! each page can have its
own title and meta tags controlled by the website owner through
the online site builder. Rather than building meta tags on
hundreds of static pages or using the same tags throughout the
site, this simple replacement system gives the site owner full
control of each page.
Of course there are elements
you wont want to allow the owner to change. For example if you
have images integrated into the design such as the background,
you wont want to allow that to be changed. So you don't replace
the image source with our dynamic replacement string. You can use
as many of as few of the varriables as you like. However, the
site owner is going to want as much control of the website as
possible.
If you decide not to allow the
template to have a dynamic menu, then the site owner will not be
able to add pages or rename pages on the main menu. They will
likely blame you for either not doing it right or not knowing
what you are doing.
The idea of dynamic templates
is to allow the site owner flexibility in their website. If you
don't buld in as much flexibility as they require, the website
may not do what they need it to do.
Of course we have shown a very
simple design. As a developer, the sky is the limit when it comes
to html code. In the sample above we show a basic layout with no
graphics. Most custom designs will have some images and those
images will be uploaded to /images/custom/custom-000.
The custom-000 is the default
directory for user built templates. All image files will reside
in that directory and should be coded into the HTML with the full
path or the exact url.
<img src="/images/custom/custom-000/sample.jpg">
<img src="https://yourdomain.com/images/custom/custom-000/sample.jpg">
In a slightly more advanced
set up we can include a table of sliced images making up the top
segment of the page.
<table border=0 cellpadding=0
cellspacing=0>
<tr>
<td>
<img src="/images/custom/custom-000/top_01.jpg"
width=42 height=100></td>
<td>
<img src="/images/custom/custom-000/top_02.jpg"
width=65 height=100></td>
<td>
<img src="/images/custom/custom-000/top_03.jpg"
width=64 height=100></td>
<td>
<img src="/images/custom/custom-000/top_04.jpg"
width=68 height=100></td>
<td>
<img src="/images/custom/custom-000/top_05.jpg"
width=462 height=100></td>
<td>
<img src="/images/custom/custom-000/top_06.jpg"
width=74 height=100></td>
</tr>
</table>
You will notice top_05.jpg is
considerably larger than the other images. That is a blank area
that we will include as a varriable area refered to as the "Title
Space". By renaming top_05.jpg to titlespace.jpg and
replacing the top_05.jpg in the HTML code with !!BUSINESSLOGO!!
you can make that image dynamic.
<table border=0 cellpadding=0
cellspacing=0>
<tr>
<td>
<img src="/images/custom/custom-000/top_01.jpg"
width=42 height=100></td>
<td>
<img src="/images/custom/custom-000/top_02.jpg"
width=65 height=100></td>
<td>
<img src="/images/custom/custom-000/top_03.jpg"
width=64 height=100></td>
<td>
<img src="/images/custom/custom-000/top_04.jpg"
width=68 height=100></td>
<td>
<img src="!!BUSINESSLOGO!!" width=462 height=100></td>
<td>
<img src="/images/custom/custom-000/top_06.jpg"
width=74 height=100></td>
</tr>
</table>
This sample will use the
titlespace.jpg as the default image but will replace it with any
customer modified or uploaded image.
As a designer you can build a
template but allow the website owner the ability to modify a
single graphic in their template. This allows for changes of
business names, phone numbers or e-mail addresses or other
details that may be part of the graphics on the page.
|
