Creating a Pure CSS Template (for Joomla 1.5)

The Usual Bit Here I pretend to know what I am talking about…. www.joomlashack.com www.compassdesigns.net www.joomlabook.com

Here I pretend to know what I am talking about….

www.joomlashack.com

www.compassdesigns.net

www.joomlabook.com

What is a Template? The template is simply a set of rules about presentation. It contains no content.

The template is simply a set of rules about presentation. It contains no content.

What is a Template? No content you say?

No content you say?

Designing Differently WYSIWYG HTML editors make it easy to create web pages. But, Joomla generates pages dynamically. You have to have a host: Localhost, e.g. WAMP, XAMPP www.apachefriends.org/en/xampp.html Webserver Other free stuff, Nuvo www.nvu.com

WYSIWYG HTML editors make it easy to create web pages.

But, Joomla generates pages dynamically.

You have to have a host:

Localhost, e.g. WAMP, XAMPP www.apachefriends.org/en/xampp.html

Webserver

Other free stuff, Nuvo www.nvu.com

Design in a Circle Make edits with HTML editor, save changes Have localhost server running in background to "run" Joomla. View edits in a web browser Go to 1.

Make edits with HTML editor, save changes

Have localhost server running in background to "run" Joomla.

View edits in a web browser

Go to 1.

Easy CSS Styling One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor. For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then View_Source. You then copy and paste that into your editor. You can now easily style the page using CSS.

One useful technique to make the design process more efficient is to serve a web page that you are designing and then copy and paste the source into an editor.

For example, once your layout CSS is set up, you can use one of these localhost servers to serve a page, then View_Source.

You then copy and paste that into your editor. You can now easily style the page using CSS.

Elements of a Template www.yoursite.com/templates/mytemplate mytemplate/ templateDetails.xml index.php templateDetails.xml (note the uppercase "D") Got a bunch of important stuff in in index.php Got even more important stuff in it Lays out the site and tells Joomla where to put the different components and modules. It is a combination of PHP and (X)HTML.

www.yoursite.com/templates/mytemplate

mytemplate/ templateDetails.xml index.php

templateDetails.xml (note the uppercase "D") Got a bunch of important stuff in in

index.php Got even more important stuff in it Lays out the site and tells Joomla where to put the different components and modules. It is a combination of PHP and (X)HTML.

templateDetails.xml <?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <install version=&quot;1.5&quot; type=&quot;template&quot;> <name>TemplateTutorial15</name> <creationDate>August 2007</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail> [email_address] </authorEmail> <authorUrl>www.compassdesigns.net</authorUrl> <version>1.0</version> <description>First example template for Chapter 9 of the Joomla Book</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>top</position> <position>left</position> </positions> <params> <param name=&quot;colorVariation&quot; type=&quot;list&quot; default=&quot;white&quot; label=&quot;Color Variation&quot; description=&quot;Color variation to use&quot;> <option value=&quot;blue&quot;>Blue</option> <option value=&quot;red&quot;>Red</option> </param> </params> </install>

<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <install version=&quot;1.5&quot; type=&quot;template&quot;> <name>TemplateTutorial15</name> <creationDate>August 2007</creationDate> <author>Barrie North</author> <copyright>GPL</copyright> <authorEmail> [email_address] </authorEmail> <authorUrl>www.compassdesigns.net</authorUrl> <version>1.0</version> <description>First example template for Chapter 9 of the Joomla Book</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> </files> <positions> <position>top</position> <position>left</position> </positions> <params> <param name=&quot;colorVariation&quot; type=&quot;list&quot; default=&quot;white&quot; label=&quot;Color Variation&quot; description=&quot;Color variation to use&quot;> <option value=&quot;blue&quot;>Blue</option> <option value=&quot;red&quot;>Red</option> </param> </params> </install>

index.php <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;<?php echo $this->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; > <head> <jdoc:include type=&quot;head&quot; /> <link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/system.css&quot; type=&quot;text/css&quot; /> <link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/general.css&quot; type=&quot;text/css&quot; /> </head> <body> <jdoc:include type=&quot;module&quot; name=&quot;breadcrumbs&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;top&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;left&quot; /> <jdoc:include type=&quot;component&quot; /> <jdoc:include type=&quot;modules&quot; name=&quot;right&quot; /> </body> </html>

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

<html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;<?php echo $this->language; ?>&quot; lang=&quot;<?php echo $this->language; ?>&quot; >

<head>

<jdoc:include type=&quot;head&quot; />

<link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/system.css&quot; type=&quot;text/css&quot; />

<link rel=&quot;stylesheet&quot; href=&quot;templates/system/css/general.css&quot; type=&quot;text/css&quot; />

</head>

<body>

<jdoc:include type=&quot;module&quot; name=&quot;breadcrumbs&quot; />

<jdoc:include type=&quot;modules&quot; name=&quot;top&quot; />

<jdoc:include type=&quot;modules&quot; name=&quot;left&quot; />

<jdoc:include type=&quot;component&quot; />

<jdoc:include type=&quot;modules&quot; name=&quot;right&quot; />

</body>

</html>

Doctype DOCTYPE At the top of the index.php file <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;> A web page DOCTYPE is part of the fundamental components of who a web page is shown by a browser, specifically, how that browser interprets CSS. To give you a sense, an observation from alistapart.com says: [information on W3C's site about doctypes is] &quot;written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™&quot;

DOCTYPE

At the top of the index.php file

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

A web page DOCTYPE is part of the fundamental components of who a web page is shown by a browser, specifically, how that browser interprets CSS. To give you a sense, an observation from alistapart.com says:

[information on W3C's site about doctypes is] &quot;written by geeks for geeks. And when I say geeks, I don’t mean ordinary web professionals like you and me. I mean geeks who make the rest of us look like Grandma on the first day She’s Got Mail.™&quot;

No Style Yet

The Layout Or “Why tables for layout is stupid” http://www.hotdesign.com/seybold/everything.html make your pages load faster lower your hosting costs make your redesigns more efficient and less expensive help you maintain visual consistency throughout your sites get you better search engine results make your sites more accessible to all viewers and user agents

Or “Why tables for layout is stupid”

http://www.hotdesign.com/seybold/everything.html

make your pages load faster

lower your hosting costs

make your redesigns more efficient and less expensive

help you maintain visual consistency throughout your sites

get you better search engine results

make your sites more accessible to all viewers and user agents

I like tables!

What’s Under the Hood?

Code Bloat…. <table summary=&quot;a unholy mess&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;9&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;20&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;20&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>At vero eros et accumsan et iusto odio dignissim qui blandit</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Epsum factorial non deposit quid pro quo hic escorol.</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> </table>

<table summary=&quot;a unholy mess&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;9&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;20&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;20&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>At vero eros et accumsan et iusto odio dignissim qui blandit</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Epsum factorial non deposit quid pro quo hic escorol.</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Olypian quantels et gomilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> <td width=&quot;11&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td rowspan=&quot;3&quot; width=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot;>Eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim.</td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot;>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed. <table summary=&quot;list&quot; width=&quot;338&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</td> </tr> <tr> <td width=&quot;10&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;10&quot; /></td> <td width=&quot;328&quot; height=&quot;10&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;328&quot; /></td> </tr> <tr valign=&quot;top&quot;> <td width=&quot;10&quot;>&#x2022;</td> <td width=&quot;328&quot;>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore.</td> </tr> </table> </td> <td width=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;150&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;150&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;11&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> <td width=&quot;338&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;338&quot; /></td> <td width=&quot;20&quot; height=&quot;20&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;10&quot; width=&quot;11&quot; /></td> </tr> <tr> <td colspan=&quot;9&quot; width=&quot;553&quot; height=&quot;1&quot; background=&quot;images/1dot.gif&quot;><img src=&quot;images/spacer.gif&quot; alt=&quot;&quot; height=&quot;1&quot; width=&quot;1&quot; /></td> </tr> </table>

Still not Convinced? Three words…. Google is Blind

Three words….

CSS Layouts

Random Fact Fluid Pages: Although the percentage is dropping, about 20% of surfers are using an 800x600 resolution. The majority, 76%, are using 1024x768 and higher (source: www.upsdell.com ). Making a fluid layout means that your valuable web page won't be a narrow column in the 1024 resolution, and will all be visible on smaller monitors. Min/Max Width

Fluid Pages: Although the percentage is dropping, about 20% of surfers are using an 800x600 resolution. The majority, 76%, are using 1024x768 and higher (source: www.upsdell.com ). Making a fluid layout means that your valuable web page won't be a narrow column in the 1024 resolution, and will all be visible on smaller monitors.

Min/Max Width

Other CSS Layouts http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php http://www.csscreator.com/

http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

http://www.csscreator.com/

Downsides with CSS Complex Can break with extensions

Complex

Can break with extensions

Collapsible Columns <?php if($this->countModules('left and right') == 0) $contentwidth = &quot;100&quot;; if($this->countModules('left or right') == 1) $contentwidth = &quot;80&quot;; if($this->countModules('left and right') == 1) $contentwidth = &quot;60&quot;; ?> <div id=&quot;content<?php echo $contentwidth; ?>&quot;> Stuff </div> #content60 {float:left;width:60:} #content80 {float:left;width:80%; } #content100 {float:left;width:100%;}

<?php if($this->countModules('left and right') == 0) $contentwidth = &quot;100&quot;; if($this->countModules('left or right') == 1) $contentwidth = &quot;80&quot;; if($this->countModules('left and right') == 1) $contentwidth = &quot;60&quot;; ?>

<div id=&quot;content<?php echo $contentwidth; ?>&quot;>

Stuff

</div>

#content60 {float:left;width:60:} #content80 {float:left;width:80%; } #content100 {float:left;width:100%;}

Modules <jdoc:include type=&quot;modules&quot; name=&quot;LOCATION&quot; style=&quot;OPTION&quot; /> Example: <jdoc:include type=&quot;modules&quot; name=“left&quot; style=“xhtml&quot; /> The $style is optional and can be CUSTOM!

<jdoc:include type=&quot;modules&quot; name=&quot;LOCATION&quot; style=&quot;OPTION&quot; />

Example: <jdoc:include type=&quot;modules&quot; name=“left&quot; style=“xhtml&quot; />

The $style is optional and can be CUSTOM!

Module Suffixes table Modules are displayed in a table. xhtml Modules are displayed in a div. raw Modules are displayed as raw output and without titles. rounded Modules are displayed in CSS format enclosed by a 3 div’s YOUR_OWN Modules are displayed in a format defined in your template overrides!!

table Modules are displayed in a table.

xhtml Modules are displayed in a div.

raw Modules are displayed as raw output and without titles.

rounded Modules are displayed in CSS format enclosed by a 3 div’s

YOUR_OWN Modules are displayed in a format defined in your template overrides!!

Menus Use flat/bulleted Lists (CSS) Submenus natively Template overrides strike again! DON’T use Javascript

Use flat/bulleted Lists (CSS)

Submenus natively

Template overrides strike again!

DON’T use Javascript

Sneaky Menu Trick Output the menu from Joomla and style that small snippet <ul class=&quot;menu&quot;> <li id=&quot;current&quot; class=&quot;active item109&quot;><a href=&quot;http://www.compassdesigns.net/&quot;><span>Home</span></a> </li> <li class=&quot;item104&quot;><a href=&quot;/templates.html&quot;><span>Templates</span></a> </li> <li class=&quot;item103&quot;><a href=&quot;/tutorials.html&quot;><span>Tutorials</span></a> </li> <li class=&quot;item105&quot;><a href=&quot;/services.html&quot;><span>Services</span></a> </li> <li class=&quot;item95&quot;><a href=&quot;/downloads.html&quot;><span>Downloads</span></a> </li> <li class=&quot;item131&quot;><a href=&quot;/training.html&quot;><span>Training</span></a> </li> </ul>

Output the menu from Joomla and style that small snippet

<ul class=&quot;menu&quot;>

<li id=&quot;current&quot; class=&quot;active item109&quot;><a href=&quot;http://www.compassdesigns.net/&quot;><span>Home</span></a> </li>

<li class=&quot;item104&quot;><a href=&quot;/templates.html&quot;><span>Templates</span></a> </li>

<li class=&quot;item103&quot;><a href=&quot;/tutorials.html&quot;><span>Tutorials</span></a> </li>

<li class=&quot;item105&quot;><a href=&quot;/services.html&quot;><span>Services</span></a> </li>

<li class=&quot;item95&quot;><a href=&quot;/downloads.html&quot;><span>Downloads</span></a> </li>

<li class=&quot;item131&quot;><a href=&quot;/training.html&quot;><span>Training</span></a> </li>

</ul>

Menu Ideas Use Listamatic: css.maxdesign.com.au/listamatic/index.htm Wrap in a div… <navcontainer>

Use Listamatic: css.maxdesign.com.au/listamatic/index.htm

Wrap in a div… <navcontainer>

What’s New in 1.5? Template parameters Work much in the same way as module parameters. Template Overrides Templates can override the default output of the core.

Template parameters Work much in the same way as module parameters.

Template Overrides Templates can override the default output of the core.

Tableless Joomla in 1.0 Can use some module settings You had to hack the core Hacking get you into difficulty

Can use some module settings

You had to hack the core

Hacking get you into difficulty

So how does 1.5 do it? All components and modules now have individual template files view -> layout -> templates

All components and modules now have individual template files

view -> layout -> templates

Where are the template files?

Multiple Layouts

Naming Convention

Start your stop watch! Lets see how long it takes to create a tableless Joomla 1.5 template

Lets see how long it takes to create a tableless Joomla 1.5 template

Tick…Tick…Tick

Template Evolution www.joomlatemplatebuilder.com/

www.joomlatemplatebuilder.com/

Questions? Stump the Chump

Stump the Chump