Joomla - Template: Creating Layout (part 5)


Joomla Template Tutorial - Part 5: Before put content, we must design the blocks where module or component placed. In this posting, we use 'classic' HTML (I mean, use <table> not <div>).

Our layout target like following picture:

Ok, open index.php within folder mytemplate. Enter following code:

; <?
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<html>
<head>
</head>

<body>

<table width="100%" border="1" bgcolor="#FFFF00">
    <tr>
      	<td colspan="3">Top</td>    
    </tr>
    <tr>
      	<td colspan="2">User 3</td>    
      	<td>User 4</td>        
    </tr>
    <tr>
      	<td rowspan="2">Left</td>
      	<td colspan="2">
        	<table width="100%" border="1">
            	<tr>
                	<td>User 1</td>
                	<td>User 2</td>                
                </tr>
            </table>
        </td> 
    </tr>
    <tr>  
      	<td height="200">Component</td>
      	<td>Right</td>    
    </tr>
    <tr>
      	<td colspan="3">Footer</td>    
    </tr>  
</table>

</body>
</html>
    
    

Series this article:
Joomla - Template: Understanding Basic Template (Part 1)
Joomla - Template: Understanding Module Position (Part 2)
Joomla - Template: My First Template (Part 3)
Joomla - Template: Activate Template (Part 4)
Joomla - Template: Creating Layout (part 5)
Joomla - Template: Using jdoc (part 6)
Joomla - Template: Using Parameters (Part 7)
Joomla - Template: Place Text (Part 8)
Joomla - Template: Creating Preview Thumbnail (Part 9)

Bookmark and Share Tag: joomla, template Category: Web Design, PHP Framework Post : December 13th 2007 Read: 52,529

advertisements


blog comments powered by Disqus