joomla! template development
DESCRIPTION
Presentation on topic "Joomla! Template Development" at Joomla!Day 2009 HCM Viet NamTRANSCRIPT
![Page 1: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/1.jpg)
Cơ chế template
trong
Joomla! 1.5
Bùi Huy ThắngBraveBits Co,. Ltd
![Page 2: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/2.jpg)
Trong 45 phút tới...
1. Khái niệm cơ bản về template2. Chức năng nâng cao của template3. Nguồn thông tin tham khảo
![Page 3: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/3.jpg)
3
Joomla! template cơ bản
Khái niệm cơ bản về template
![Page 4: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/4.jpg)
4
Joomla! template trông như thế nào?
Khái niệm cơ bản về template
Cơ chế template trong Joomla
![Page 5: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/5.jpg)
5
Thành phần trong Joomla! template
Nội dung của Module
Nội dung của Component
Khái niệm cơ bản về template
Cơ chế template trong Joomla
![Page 6: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/6.jpg)
6
Khái niệm cơ bản về template
Cấu trúc files của 1 template
/my_template
/images
/css
logo.png
template.css
component.php
index.php
templateDetails.xml
template_thumbnail.png
favicon.ico
Cơ chế template trong Joomla
![Page 7: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/7.jpg)
7
Khái niệm cơ bản về template
Hãy thử tạo một template
Cơ chế template trong Joomla
![Page 8: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/8.jpg)
8
Khái niệm cơ bản về template
Chuẩn bị các công cụ
Miễn phí
Có phí
Notepad++ Eclipse
Kiểm tra
Dreamweaver TopStyle
Firefox IE Chrome SafariOpera
Cơ chế template trong Joomla
![Page 9: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/9.jpg)
9
Những file cần chú ý
/my_template
/images
/css
logo.png
template.css
component.php
templateDetails.xml
template_thumbnail.png
favicon.ico
Khái niệm cơ bản về template
index.php
Cơ chế template trong Joomla
![Page 10: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/10.jpg)
10
Tạo file templateDetails.xml
Khái niệm cơ bản về template
1. Khai báo metadata về file XML2. Khai báo metadata về template3. Khai báo danh sách file và folder
trong template4. Khai báo các vị trí cho module
Cơ chế template trong Joomla
![Page 11: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/11.jpg)
11
Khai báo metadata về file XML
Khái niệm cơ bản về template
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template
1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
Cơ chế template trong Joomla
![Page 12: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/12.jpg)
12
Khai báo metadata về template
Khái niệm cơ bản về template
<name>JDay2009</name>
<creationDate>2009-10-31</creationDate>
<author>BraveBits Co,. Ltd</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.bravebits.vn</authorUrl>
<copyright>BraveBits Co,. Ltd</copyright><version>1.0</version><license>GNU/GPL</license><description>Demo template for Joomla! Day HCMC 2009</description>
Cơ chế template trong Joomla
![Page 13: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/13.jpg)
13
Khai báo danh sách file và folder
Khái niệm cơ bản về template
<files>
<folder>images/</folder>
<folder>css/</folder>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
</files>
Cơ chế template trong Joomla
![Page 14: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/14.jpg)
14
Khai báo các vị trí cho modules
Khái niệm cơ bản về template
<positions>
<position>top</position>
<position>bottom</position>
</positions>
Cơ chế template trong Joomla
![Page 15: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/15.jpg)
15
Khái niệm cơ bản về template
Tạo file index.php
1. Khai báo khởi đầu cho file index.php2. Khai báo nội dung trong thẻ
<head>3. Khai báo nội dung trong thẻ
<body>
Cơ chế template trong Joomla
![Page 16: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/16.jpg)
16
Khai báo khởi đầu cho file index.php
Khái niệm cơ bản về template
<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>“ dir="<?php echo $this->direction; ?>”>
Cơ chế template trong Joomla
![Page 17: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/17.jpg)
17
Khai báo nội dung trong thẻ <head>
Khái niệm cơ bản về template
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/css/template.css" type="text/css" />
</head>
Cơ chế template trong Joomla
![Page 18: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/18.jpg)
18
Khai báo nội dung trong thẻ <body>
Khái niệm cơ bản về template
<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type=“message" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />
</body>
Cơ chế template trong Joomla
![Page 19: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/19.jpg)
19
Thuộc tính cho template
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 20: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/20.jpg)
20
Thuộc tính cho template là gì?
Chức năng nâng cao
Cơ chế template trong Joomla
![Page 21: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/21.jpg)
21
Tại sao nên dùng thuộc tính?
Chức năng nâng cao
1. Cho phép người dùng tuy biến template mà không cần sửa code
2. Tạo thêm nhiều tính năng cho template mà không làm quá trình sử dụng phức tạp hơn
3. Tiết kiệm thời gian để tùy biến template
Cơ chế template trong Joomla
![Page 22: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/22.jpg)
22
Thêm một thuộc tính cho template
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 23: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/23.jpg)
23
Thêm thuộc tính cho template
Chức năng nâng cao
Cơ chế template trong Joomla
1. Khai báo về thuộc tính trong file templateDetails.xml
2. Lưu giá trị của thuộc tính trong file params.ini3. Tạo code PHP để xử lý giá trị của thuộc tính
![Page 24: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/24.jpg)
24
Khai báo trong file templateDetails.xml
Chức năng nâng cao
Cơ chế template trong Joomla
<params>
<param name="templateColor" type="list" default="blue" label="Template Color" description="Choose the template color.">
<option value="blue">Blue</option>
<option value="red">Red</option>
</param>
...
</params>
![Page 25: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/25.jpg)
25
Lưu giá trị trong file params.ini
Chức năng nâng cao
Cơ chế template trong Joomla
templateColor=blue
![Page 26: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/26.jpg)
26
Tạo code PHP để xử lý giá trị
Chức năng nâng cao
Cơ chế template trong Joomla
<?php
$tplColor = $this->params->get( 'templateColor' );
$this->addStyleSheet( $this->baseurl . '/templates/' . $this->template . '/css/' . $tplColor .'.css' );
?>
![Page 27: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/27.jpg)
27
Những định dạng thuộc tính có sẵn
Chức năng nâng cao
Cơ chế template trong Joomla
1. Joomla! có sẵn 21 định dạng cho mọi trường hợp2. Trên thực tế hay dùng nhất là
List
Radio
Text
![Page 28: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/28.jpg)
28
Template override
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 29: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/29.jpg)
29
Template override là gì?
Chức năng nâng cao
Cơ chế template trong Joomla
Trước khi override
Sau khi override
![Page 30: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/30.jpg)
30
Tại sao nên dùng override?
Chức năng nâng cao
1. Có code HTML đặc biệt mà không cần động đến code của extension
2. Có được code HTML tối ưu hóa cho công cụ tìm kiếm
3. Tiết kiệm thời gian để tùy biến template
Cơ chế template trong Joomla
![Page 31: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/31.jpg)
31
Mô hình MVC là gì?
Chức năng nâng cao
Cơ chế template trong Joomla
Hiển thịnội dung
Nội dung
Điều khiển
Nội dung
![Page 32: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/32.jpg)
32
Mô hình MVC trong Joomla!
Chức năng nâng cao
Cơ chế template trong Joomla
Xem nội dung trên trang web
Joomla!
Phân tích yêu cầu và đưa về component phù
hợp(com_content)
Nội dung cần thiết được lấy từ DB và đưa
về View
Nội dung được hiển thị căn cứ vào View va
Layout
![Page 33: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/33.jpg)
33
Views và Layout
Chức năng nâng cao
Cơ chế template trong Joomla
Views Layout
![Page 34: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/34.jpg)
34
Files của Views và Layout
Chức năng nâng cao
Cơ chế template trong Joomla
com_content/ <- folder chứa file chung thuộc component
views/ <- folder chứa file thuộc phần View
article/ <- folder chứa file thuộc View một bài viết
tmpl/ <- folder chứa file layout
default.php <- file layout
form.php <- file layout
category/
tmpl/
![Page 35: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/35.jpg)
35
Đối với Module
Chức năng nâng cao
Cơ chế template trong Joomla
mod_mainmenu/ <- folder chứa file chung thuộc module
tmpl/ <- folder chứa file layout
default.php <- file layout
helper.php <- helper file với logic xử lý của module
mod_mainmenu.php <- file chính của module
mod_mainmenu.xml <- file thông tin về module
![Page 36: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/36.jpg)
36
Tạo một override cho component
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 37: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/37.jpg)
37
Tạo một override cho component
Chức năng nâng cao
Cơ chế template trong Joomla
1. Tạo folder theo cấu trúc chuẩn trong template folder
2. Copy file View gốc của component vào folder mới được tạo
3. Thực hiện override trên file mới được copy4. Cập nhật thông tin trong file templateDetails.xml
![Page 38: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/38.jpg)
38
Tạo folder theo cấu trúc chuẩn
Chức năng nâng cao
Cơ chế template trong Joomla
YourTemplate/ <- folder template của bạn
html/ <- folder chứa các file overrides
com_content/ <- folder mang tên component sẽ bị override
article/ <- folder mang tên view sẽ bị override
com_user/
login/
![Page 39: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/39.jpg)
39
Copy file View gốc của component
Chức năng nâng cao
Cơ chế template trong Joomla
Copy/components/com_content/views/article/tmpl/default.php
vào/templates/your_template/html/com_content/article/default.php
![Page 40: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/40.jpg)
40
Thực hiện override trên file mới
Chức năng nâng cao
Cơ chế template trong Joomla
. . .<td class="contentheading<?php echo $this->escape($this-
>params->get('pageclass_sfx')); ?>" width="100%"><h2>
<?php echo $this->escape($this->article->title); ?> </h2>
</td>. . .
![Page 41: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/41.jpg)
41
Override module cũng tương tự
Chức năng nâng cao
Cơ chế template trong Joomla
Copy/components/mod_mainmenu/tmpl/default.php
vào/templates/your_template/html/mod_mainmenu/default.php
![Page 42: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/42.jpg)
42
Bạn cần lưu ý
Chức năng nâng cao
Cơ chế template trong Joomla
1. Bạn chỉ có thể override khi component hoặc module được thực hiện theo chuẩn MVC (có folder views/tmpl)
2. Bạn không thể override PDF và RSS feeds (phải chỉnh sửa file core)
3. Đường dẫn đến file override phải thật chính xác4. Override chỉ có giá trị cho template mà bạn đang
override 5. Lưu ý cập nhật file templateDetails.xml
![Page 43: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/43.jpg)
43
Module Chrome
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 44: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/44.jpg)
44
Module Chrome là gì?
Chức năng nâng cao
Cơ chế template trong Joomla
Modules Layouts Chrome Template Browser
modChrome_xhtmlmodChrome_myst
yle
jdoc:include type=“modules” name=“left” style=“xhtml mystyle”
HTMLCSSJSIMAGES
templates/system/html/modules.php
your_template/html/modules.php
![Page 45: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/45.jpg)
45
Tại sao nên dùng module chrome?
Chức năng nâng cao
1. Thể hiện module style cao cấp mà cơ chế có sẵn không đáp ứng được
2. Để có thể tối ưu hóa code HTML của module phù hợp cho nhu cầu nhất định
Cơ chế template trong Joomla
![Page 46: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/46.jpg)
46
Module chrome khác gì Module override?
Chức năng nâng cao
Cơ chế template trong Joomla
<div id="left"> <div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li id="current" class="active item1"> <li class="item2"> ...... Module HTML code khác ...... </div></div>
Module position container
Module chrome wrapper
Modulecontent / override
![Page 47: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/47.jpg)
47
Những module chrome có sẵn trong Joomla!
Chức năng nâng cao
Cơ chế template trong Joomla
<div class="moduletable"> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul></div>
<div class="module"> <div> <div> <div> <h3>Main Menu</h3> <ul class="menu"> <li>Menuitem 1</li> . . . </ul> </div> </div> </div></div>
<ul class="menu"> <li>Menuitem 1</li> . . .</ul>
xh
tml
non
ero
un
ded
![Page 48: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/48.jpg)
48
Tạo một module chrome
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 49: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/49.jpg)
49
Tạo một module chrome
Chức năng nâng cao
Cơ chế template trong Joomla
1. Tạo hoặc sửa file modules.php trong template folder html/
2. Tạo hàm với tên và tham số phù hợp3. Tạo code thực thi hàm để có module chrome
mong muốn
![Page 50: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/50.jpg)
50
Tạo hoặc sửa file modules.php
Chức năng nâng cao
Cơ chế template trong Joomla
YourTemplate/ <- folder template của bạn
html/ <- folder chứa các file overrides
modules.php <- file khai báo hàm cho module chrome
/templates/system/html/modules.php
![Page 51: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/51.jpg)
51
Tạo hàm với tên và tham số phù hợp
Chức năng nâng cao
Cơ chế template trong Joomla
<?php function modChrome_customh($module, &$params, &$attribs){ if (!empty ($module->content)) : ?> <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?
>"> <?php if ($module->showtitle != 0) : ?> <h3><?php echo $module->title; ?></h3> <?php endif; ?> <?php echo $module->content; ?> </div><?php endif; } ?>
![Page 52: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/52.jpg)
52
Tạo code thực thi hàm
Chức năng nâng cao
Cơ chế template trong Joomla
<?php function modChrome_customh($module, &$params, &$attribs){ if (!empty ($module->content)) : ?> <div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?
>"> <?php if ($module->showtitle != 0) : ?> <h2><?php echo $module->title; ?></h2> <?php endif; ?> <?php echo $module->content; ?> </div><?php endif; } ?>
![Page 53: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/53.jpg)
53
Nói thêm về jdoc:include
Chức năng nâng cao
Cơ chế template trong Joomla
<jdoc:include type="modules" name="left" style="rounded" />
<jdoc:include type="module" name=“breadcrumb" style=“none" />
<jdoc:include type="modules" name="left" style="rounded mystyle" />
Gọi module position
Gọi một module đơn lẻ
Gọi nhiều chrome cùng một lúc
![Page 54: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/54.jpg)
54
Những điều bạn cần biết
Cơ chế template trong Joomla
Chức năng nâng cao
![Page 55: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/55.jpg)
55
Những trang web dùng Joomla! ấn tượng
Chức năng nâng cao
Cơ chế template trong Joomla
http://www.palgor-publicidade.com/http://www.spacemakerwardrobes.com.au/http://www.lonestar.com.au/http://www.childrenoftherevolution.com.au/http://www.cultureelcafe.nl/http://btl.bialystok.pl/http://www.waterandstone.com/http://www.55thinking.com/
![Page 56: Joomla! Template Development](https://reader035.vdocuments.site/reader035/viewer/2022062513/556efc77d8b42adc368b46fe/html5/thumbnails/56.jpg)
56
Nguồn thông tin tham khảo
Chức năng nâng cao
Cơ chế template trong Joomla
http://docs.joomla.org/Joomla!_1.5_Template_Tutorialhttp://docs.joomla.org/Tutorial:Creating_a_basic_Joomla!_templatehttp://docs.joomla.org/Tutorial:Understanding_Joomla!_templates
http://www.compassdesigns.net/joomla-tutorials/joomla-template-tutorialhttp://www.joomlashack.com/tutorials