Tự Thiết kế Template cho Web Joomla

Thiết kế Template Joomla (Phần 1)
Thứ ba, 18 Tháng 9 2012 14:20 | Viết bởi Thiet ke hay - Công ty thiết kế website chuyên nghiệp
Phần 1: Mở đầu
Trước khi bắt đầu cho một serial bài viết trao đổi về một vấn đề mà rất nhiều người chúng ta quan tâm
Thiết kế Template cho Joomla chúng ta hãy có một vài giới thiệu sơ qua lại về khái niệm này. Nó dành
cho những bạn chưa biết và có nhu cầu tìm hiểu, nó dành cho những người có tâm huyết và có mong
muốn, nó dành cho cộng đồng có cùng sở thích, để chúng ta bước vào hành trình dài Làm chủ Joomla với
rất nhiều những khó khăn sau này. Tuy nhiên không gì là không thể, chỉ cần chúng ta có đam mê!
1. Joomla là gì?
- Joomla là một hệ quản trị nội dung mã nguồn mở.
- Hệ quản trị nội dung (CMS - Content Management System) là hệ thống dùng để tổ chức và tạo môi
trường cộng tác thuận lợi nhằm mục đích xây dựng một hệ thống tài liệu và các loại nội dung khác một
cách thống nhất
- Mã nguồn mở là mã nguồn được công bố và sử dụng một giấy phép mở. Giấy phép này cho phép bất
cứ ai cũng có thể nghiên cứu, thay đổi và cải tiến phần mềm, và phân phối phần mềm, thậm trí thương mại
hoá sản phẩm của mình.
2. Template Joomla
- Joomla là hệ thống quản trị nội dung có thể dễ dàng thay đổi các chức năng cũng như giao diện người
dùng. Mỗi một người dùng có một sở thích và quan điểm khác nhau về không gian, cách bày bố nơi làm
việc, cách sử dụng màu sắc, các hiệu ứng, điều đó sinh ra việc giao diện cũng như các chức năng của
Joomla được thay đổi liên tục nhằm đáp ứng nhu cầu và sự đòi hỏi của con người. Mỗi một sự thay đổi đó
được gọi là một Template của Joomla. Và đương nhiên là Joomla có nhiều Template theo thị hiếu, nhu cầu
của người dùng.
- Một gói Template Joomla gồm các thành phần chính:
+ File TemplateDetails.xml
+ File Index.php
+ Các file /css/
+ Các file /images/
+ File index.html
3. Công cụ thiết kế

- Trình duyệt fire fox và cài đặt thêm các thành phần mở rộng sau, tìm kiếm và cài đặt thì nhờ anh
google nhé!
+ Firebug
+ Measurelt
+ Color Picker
+ Web Developer Toolbar
- Các phần mềm cần thiết
+ Photoshop CS4/5 hoặc dùng GIMP 2.6 nếu bạn không có chi phí mua phần mềm Photoshop
+ Textual Template design (Bạn có thể dùng phần mềm Crimsom Editor để thiết kế textual nếu kinh phí
cho dự án không cho phép mua các phần mềm nổi tiếng hơn)
+ Phần mềm FTP (Nếu không có kinh phí cho dự án để dùng các phần mềm nhưu cuteFTP thì bạn có
thể dùng Cyberduck - miễn phí)
+ Graphic Template design (Dreamweaver 5 đây là phần mềm mất phí, nếu không có kinh phí cho dự
án bạn có thể dùng phpDesigner7)
+ Coda (Một phần mềm quản lý và thiết kế khá hay nhưng trả phí, bạn có thể dùng các phần mềm miễn
phí khác như phpDesigner cũng được)
Thiết kế Template Joomla (Phần 2)
Phần 2: Các thành phần chính của template Joomla
Ở Phần 1: Mở đầu, chúng tôi đã giới thiệu về Template Joomla cũng như các bước chuyển bị để Thiết
kế Template Joomla. Phần tiếp theo chúng ta sẽ bắt đầu xây dựng bộ khung bao gồm các thành phần chính
cho Joomla. Ở phần trước chúng ta đã có nói qua, một Template Joomla bao gồm 5 thành phần sau:
File TemplateDetails.xml
File Index.php
Các file /css/
Các file /images/
File index.html
Chức năng và nhiệm vụ của các thành phần:
• templateDetails.xml: File này bao gồm các thẻ meta khai báo thông tin về template, được sử dụng
bởi giao diện quản trị của joomla nhằm mục đích khai báo thông tin cho việc cài đặt và bảo trì. Những
thiết lập được lưu trong file bao gồm một danh sách của mọi file tạo ra template, tác giả và thông tin công

bố, và các thông số sẵn có cho người sử dụng sửa đổi thông qua admincp.
• index.php: File này để chứa các câu lệnh xử lý của template, bao gồm việc hiển thị các module và
component. Ngoài ra, mọi client-side JavaScript cũng được khai báo tại đây.
• css: Nơi lưu trữ các file CSS được sử dụng bởi template. Thông thường, file template.css đặt ở đây.
• images: Nơi lưu trữ hầu hết các file hình ảnh được sử dụng bởi template.
• index.html: Trong bất kỳ thư mục nào của website joomla đều có file này, nó có khi không chứa
nội dung nào cả! File này thường dùng để bảo vệ file index.php để người ngoài (nói người ngoài cho lịch
sự thực ra là hacker) không xem được code của file index.php và một số ý đồ đen tối khác của code có thể
triển khai trong file này (cái này không bàn nhìu nhá)
Ngoài ra còn một số các file phụ đi kèm có thể có hoặc thiếu cũng không ảnh hưởng gì tới quá trình
hoạt động của website như các file icon, file thumbnail, hình ảnh đại diện cho template
Thiết kế Template Joomla (Phần 3)
Các thành phần chính của template Joomla (tiếp theo)
1. Thiết kế file templateDetail.xml
Bước đầu tiên, các bạn hãy tạo một thư mục bất kỳ với tên tuỳ chọn vào thư mục nào đó trên máy tính.
Giả sử tôi đặt tên là /thietkehay/ sau đó tạo thêm file mới với tên là templateDetails.xml đây là vùng để
khai báo các nội dung (gồm các loại file và folder) có trong template của bạn. File này có tác dụng là khi
cài đặt thì nó sẽ tạo ra trong thư mục templates một folder mang tên template do bạn đặt và giải nén những
gì có trong template của bạn vào thư mục template mới. Chú ý là chỉ thành phần được khai báo trong file
này mới sẽ có mặt trong thư mục template mới!
Nội dung đầu tiên được đưa vào là những quy định của template như phiên bản, tên template, tác giả,
ngày thiết kế, mô tả, dòng bản quyền, và một vài thông tin liên hệ, giới thiệu khác Nó có dạng như sau:
Là quy định phiên bản template mà bạn phát hành, các nhà sản xuất khác đặt thế nào kệ họ, mình đặt
theo nguyên tắc cảu mình. Cái cảm giác đó giống như đặt tên cho một đứa con của mình vậy, nó thực sự
rất tự hào, hãnh diện và hạnh phúc (đoán thế thôi chứ đã vợ con gì đâu:))
Ở phiên bản joomla 1.5 thì vùng mô tả phiên bản cho template không phải được bao quanh bởi cặp thẻ
Extension mà là cặp Install
Sau khi hoàn thành bước này chúng ta nén folder này lại dưới dạng zip sau đó vào phần quản trị joomla
và install template này như mọi template khác, và ngay lập tức template mang tên chúng ta đặt đã được
cài đặt và xuất hiện cả trong administrator lẫn folder chứa template trên host. Từ nay chúng ta sẽ làm việc

trong thư mục này, hiện giờ trong nó chỉ có 1 file duy nhất .xml.
Tiếp đến chúng ta tạo một file với tên index.php trong thư mục này và cho một nội dung đơn giản cho
nó ví dụ như đoạn code dưới để xem nó có hoạt động tốt không!
PHP Code:
@author thietkehay
@copyright 2012
echo "Bạn đã cài đặt template thành công";
Chú ý: Các bạn tạo bất kỳ file php nào cũng phải để kiểu mã hoá của nó là utf-8 nếu không sẽ bị lỗi
font. Bạn tạo file php xong dùng trình soạn thảo notepad mở nó ra và save as lại, khi save ở bên dưới có
mục Encoding bạn chọn là utf-8 thì đó là cách chuyển kiểu mã hoá.
Như vậy trong administrator đã có template của chúng ta, chọn nó làm default và chạy thử web.
Thiết kế Template Joomla (Phần 4)
Các thành phần chính của template Joomla (tiếp theo)
2. Thiết kế file index.php
File index trong joomla thường rất nhẹ nhàng với các câu lệnh gọi ra thư viện sẵn có do joomla tự định
nghĩa, không bao gồm tất cả các code các mớ hỗn độn mà bạn có thể nghĩ ra và nhét hết vào đó như trong
ASP hoặc thậm trí là ASP.net
Trước hết là câu lệnh gọi ra nội dung các module, component. Hãy thêm nó vào file index.php, câu lệnh
này sẽ gọi ra phần nội dung được quy định là sẽ hiển thị ở front page (đó là các bài viết đặc biệt Featured
Articles)
PHP Code:
<jdoc:include type="component"/>
Bây giờ hãy ra F5 lại trang và xem thay đổi, như vậy website của chúng ta đã có nội dung được lấy từ
CSDL chỉ với một câu lệnh rất ngắn gọn và đơn giản.
Bây giờ hãy thêm câu lệnh gọi một module cụ thể lên trên câu lệnh vừa rồi và F5 lại:
PHP Code:
<jdoc:include type="modules" name="position-0" />
PHP Code:
<jdoc:include type="modules" name="position-1" />
Và sau đó F5 xem điều gì xảy ra, câu lệnh trên đã gọi đến nội dung module đứng ở vị trí có tên là

position-0
Chú ý: Trong joomla 2.5 thì tên các vị trí không còn là top, left, right, footer, như trong joomla 1.5
nữa mà là các tên position + một số từ 1-15 (không nhớ rõ lắm) và một vị trí debug
Và để cho các module hiển thị gọn gàng và đẹp hơn thì ta phải cần kết hợp các mã html để đưa các câu
lệnh php vào cấu trúc của nó. Dưới đây là nội dung của file index và một vài thẻ html đơn giản! Mới chỉ
cho nó vào một cái khung thôi chứ chưa phân chia rõ ràng gì nhé!
File index.php
PHP Code:
<body>
<jdoc:include type="modules" name="position-1" />
<jdoc:include type="modules" name="position-0" />
<jdoc:include type="component" />
Kết quả
Thiết kế Template Joomla (Phần 5)
Các thành phần chính của template Joomla (tiếp theo)
3. Thiết kế các file /css/
CSS là viết tắt của cụm từ Cascading Style Sheets CSS là một ngôn ngữ giúp người thiết kế web có thể
thêm các kiểu giao diện vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv ). Bạn có thể tạo ra
một style một lần nhưng có thể dùng lại nhiều lần trong các tài liệu website tiếp theo.
Có 3 cách để sử dụng CSS.
1. Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style Đoạn text cần in đậm, gạch
chân, màu đỏ
2. Đặt CSS ở đầu trang web để áp dụng kiểu dáng cho một mình trang ấy
PHP Code:
Và bây giờ tạo vào thư mục template vietcanh một folder tên là /css/ sau đó tạo một file mới tên là
index.html và một file là template.css
Với file template.css ta sẽ bắt đầu định nghĩa các style cho giao diện template trong file này. Chúng ta
đang vừa làm vừa đọc tài liệu, chả biết gì cả nên làm thật đơn giản thôi nhé. Ví dụ một đoạn code quy
định thân trang, thẻ a, thẻ img đơn giản cho website như sau!
Nội dung file template.css

vì thế giao diện trang bây giờ sẽ có màu mà ta quy định. Ở file css trên tôi dùng màu trắng cho nền,
xanh cho chữ và màu đỏ cho liên kết, liên kết có gạch chân!
Các chữ đã được thay đổi màu sắc và style! Như thế là đã biết tạo file css, gọi các lớp từ trong nó vào
các thành phần trên trang rồi nhé!
Thiết kế Template Joomla (Phần 6)
Các thành phần chính của template Joomla (tiếp theo)
4. Thiết kế thư mục /images/
Bạn tạo một thư mục mới với tên /images/ trong thư mục thietkehay và copy bức ảnh nào đó làm ảnh
nền hoặc lấy bức ảnh có tên là bg.jpg đi kèm trong gói mình share để làm hình nền! Tạo thêm trong folder
images 1 file index.html
Bây giờ quay lại file template.css và chỉnh sửa nội dung của nó:
Ở đây nếu ảnh nền của bạn là một bức ảnh có chiều cao thấp thì bạn chọn repeat-y, chiều rộng ngắn thì
chọn repeat-x, nếu ảnh nhỏ thì chọn repeat hoặc no-repeat khi ảnh đã có kích thước lớn rồi!
Website đã có hình nền!
Các hình ảnh sau của bạn cũng sẽ được lưu trữ trong thư mục images và gọi ra như thế này, chúng ta
dang đi tạo dần các thành phần chính cho template.
Thiết kế Template Joomla (Phần 7)
Các thành phần chính của template Joomla (tiếp theo)
5. Các file index.html
Như đã nói:Trong bất kỳ thư mục nào của website joomla đều có file index.html, nó có khi không chứa
nội dung nào cả! File này thường dùng để bảo vệ file index.php để người ngoài (nói người ngoài cho lịch
sự thực ra là hacker mũ đen hoặc hacker có mặt nhưng bịt mặt lại hay còn gọi là các hacker bịt mặt) không
xem được code của file index.php và một số ý đồ đen tối khác của code có thể triển khai trong file này
(cái này không bàn nhìu nhá).
Một số file index.html có thể có chút nội dung nhỏ nhưng hy hữu lắm mới dùng đến nó và khi nào dùng
thì hẵng hay!
Việc tạo hình ảnh đại diện cho template và hình ảnh preview template đó trong phần quản lý của
administrator.
Cái này bạn copy 2 file ảnh template_preview.png và template_thumbnail.png vào thư mục gốc
template /thietkehay

Sau đó thêm vào file templateDetails.xml thẻ và thêm 2 ảnh này vào.
Và đây là kết quả, trông nó chuyên nghiệp hẳn, không kém các tem khác là mấy, mỗi tội chưa có gì
bên trong :)
- Chú ý một điều là bạn cần đặt tên 2 hình ảnh này theo đúng như tên bên trên vì nó quy định là tên
theo hệ thống! Chỗ này chỉ cần chèn 2 hình ảnh với tên như thế là ok và không cần thay đổi gì nhiều, hệ
thống mặc định sẽ tự gọi những bức ảnh có tên như thế ra cho template tương ứng!
Ngoài ra còn một chú ý nữa mà các bạn thường xuyên phải làm việc này đó là khai báo các folder cũng
như file ở thư mục template của bạn vào file templateDetails.xml, với các folder thì bạn đặt tên folder vào
trong cặp thẻ , với các file thì các bạn đặt vào trong cặp thẻ
Vừa rồi ta tạo thêm file index.php, folder /images/ và folder /css/ thì file templateDetails.xml của chúng
ta sẽ như sau:
Mục đích của việc này là gì vậy? Đó là để khi hoàn thiện template, chúng ta zip template lại và lúc
chúng ta cài đặt template này vào một website joomla nào đó thì nó sẽ đưa tất cả các file cùng với folder
trong template đó lên thư mục template của web, nếu không thì nó sẽ không đưa các file đó lên dù ta đã
zip tất cả trong một gói!
Thiết kế Template Joomla (Phần 8)
Thiết kế Css, Layout cho website Joomla
Ở phần trước chúng ta đã làm quen một chút tới việc hiển thị và thiết kế giao diện cho joomla, ở phần
này chúng ta sẽ đi sâu hơn vào thiết kế layout cho joomla!
Như các bạn đã biết, phiên bản joomla 2.5 khác biệt khá nhiều so với phiên bản 1.5 ở bố cục giao diện,
nó không còn đặt tên theo tên vị trí mà ta nhìn thấy trên website như trái, phải, trên, dưới Có 16 vị trí và
đặt tên theo thứ tự từ position-0 đến position 15 và một vị trí debug! Để làm việc nhanh chóng với nó thì
cái này bạn phải tự nhớ thôi! Dưới đây là hình ảnh những vị trí chính của joomla 2.5
Chú ý một điều là tên vị trí là position-1 và không khoảng trắng ở giữa phải có dấu - và sau nó là một
con số!
1. Thiết kế file Css cho website Joomla
Bạn có thể định nghĩa style một lần nhưng có thể dùng lại nhiều lần trong các tài liệu khác. Ví dụ như
nếu bạn muốn hiển thị một bức ảnh trong website với màu khung màu xanh, đường viền bức ảnh là đường
kẻ liền thì bạn có thể định nghĩa khung đó thành một style. Và sau đó khi bạn muốn các khung ảnh khác
cũng có kiểu dáng như vậy thì bạn chỉ việc gọi style mà bạn đã định nghĩa để sử dụng lại lần nữa. CSS

giúp cho ta tiết kiệm được rất nhiều thời gian để lập trình code, không phải gõ lại những đoạn code trùng
lặp và quan trọng hơn cả nó giúp cho website của chúng ta nhẹ nhàng, gọn gàng và việc kiểm soát cũng
như quản lý trở nên dễ dàng hơn! Ngoài ra CSS còn làm cho ta có thể tạo ra một website chuyên nghiệp
và bắt mắt.
Trong thư mục /css/ các bạn tạo một file với tên là layout.css và điền nội dung cho file này như sau:
PHP Code:
#container /*Định nhĩa các thuộc tính cho toàn trang*/
{
width: 85%;/*Chiều rộng toàn trang là 85%*/
margin: 10px auto;/*Toàn site sẽ căn với mép trên cùng 10px, còn lại tự động*/
background-color:
#fff; /*Màu nền cho toàn trang, bạn có thể dùng 3 ký tự đầu cho loại màu full đen, hoặc full trắng, */
color: #333;
border: 1px solid gray;
line-height: 150%;/*Chiều cao của một dòng sẽ cao thêm 50%*/
}
#top /*Định nhĩa các thuộc tính cho các thành phần khi đưa vào top*/
{
padding: .5em; /*Căn lề trái*/
background-color: #ddd; /*Màu nền của top*/
border-bottom: 1px solid gray;/*Viền dưới của top, độ dày 1px, kiểu viền là đường thẳng có màu gray*/
}
#top h1 /*Cái này có nghĩa là trong top sẽ có thuộc tính chữ to nhất và thêm các thuộc tính ben dưới*/
{
padding: 0; /*Căn lề trái*/
margin: 0;
/*Căn mép trái - mép khác lề chỗ nào vậy? Mép trái là cái ngoài cùng của toàn trang, lề trái là căn với cái
đứng phía bên trái của đối tượng*/
}
#leftnav /*Định nghĩa thuộc tính cho các thành phần trong menu trái*/

{
float: left; /*Float là thuộc tính trôi nổi, đối tượng sẽ tự trôi về phía trái*/
width: 175px;
height: 350px;
margin: 0;
padding: 1em; /*Menu trái sẽ căn với lề trái là 1em*/
background-color: #ccc;
}
#rightnav /*Định nghĩa thuộc tính cho các thành phần trong menu phải*/
{
float: right;
width: 175px;
height: 350px;
margin: 0;
padding: 1em;
background-color: #ccc;
}
#content /*Định nghĩa cho phần nội dung ở giữa trang*/
{
margin-left: 205px; /*Nội dung sẽ căn với mép trái 205px do chiều rộng của menu left là 175 rồi*/
margin-right: 205px;
padding: 1em; /*Nội dung sẽ căn với lề trái 1em; em, ex là một đơi vị trong PHP: 1em = 16px; 1ex =
0.5em= 8px*/
}
#footer /*Định nghĩa thuộc tính cho các thành phần trong footer*/
{
clear: both;
margin: 0;
padding: .5em;
color: #333;

background-color: #ddd;
border-top: 1px solid gray;
}
Ngoài ra các bạn cũng cần tự tìm hiểu thêm chút về cấu trúc của css!
2. Thiết kế layout cho website joomla
Các bạn sửa nội dung file index theo như sau:
Các giải thích về nội dung và chức năng của các câu lệnh mình có ghi luôn hướng dẫn bên cạnh, các
bạn có thể đọc code và đọc luôn hướng dẫn.
Ngoài ra các bạn cũng cần tự tìm hiểu thêm chút về cấu trúc của html!
Thiết kế Template Joomla (Phần 9)
Thiết kế Css, Layout cho website Joomla (tt)
3. Thiết kế giao diện đơn giản cho template
Ở phần trước chúng ta đã học qua cách tạo css, và layout cho template, hôm nay chúng ta sẽ nâng cao
hơn một chút về css và thiết kế một giao diện cho joomla bao gồm 4 thành phần: Banner, menu left, menu
right, content và footer, trong footer chúng ta sẽ thiết kế 3 làm 3 phần để gọi được 3 module vào đó.
Trước hết các bạn sẽ tạo một file position.css nhằm định nghĩa một vài lớp cho việc hiển thị các module
vào các position, file layout.css chỉ để định nghĩa style cho toàn trang thôi nên không viết thêm nội dung
vào file đó nữa, các bạn copy file image fruits.jpg vào thư mục /images/ để làm logo cho template!
Các bạn tạo file position.css với nội dung như sau:
PHP Code:
Như vậy chúng ta vừa tạo được một file index.php có banner, menu trái, phải, nội dung chính và một
footer được chia làm 3 ô!
Ở các vị trí này ta gọi tên position tương ứng và ở position đó có menu nào đứng ở đó thì nó sẽ hiện ra.
Kết quả cho phần tutorial này như hình dưới!
Thiết kế Template Joomla (Phần 10)
Thiết kế Css, Layout cho website Joomla (tt)
4. Một số hàm thường gặp trong joomla, thêm vị trí quảng cáo cho template
Ở bài trước chúng ta đã tạo xong một giao diện trang web đơn giản gồm top, bottom, left, right, và
content dựa trên việc định nghĩa qua file css và nhúng chúng vào file index.php. Nhưng nếu file index như
thế thì nó đơn giản quá và cần tuỳ chỉnh thêm một chút nội dung của nó để đảm bảo khi hoạt động nó điều

khiển website hoạt động một cách ổn định và an toàn!
Trước hết là thêm câu lệnh bảo mật cho joomla:
Câu lệnh defined( '_JEXEC' ) or die; là dùng để kiểm tra sự bảo mật Joomla. Vì Joomla chỉ cho phép
truy cập các file thông qua file index.php nên cần kiểm tra xem hằng _JEXEC đã được khai báo chưa để
tránh trường hợp người dùng cố tình truy cập các file không được phép.
Câu lệnh kiểm tra vị trí có tồn tại module hay không? Nếu không thì ẩn cái vị trí đó đi để tránh nặng vì
thêm dữ liệu khi load trang! Nếu không có câu lệnh này thì dù vịt rí đó không có module nào đứng nó vẫn
hiển thị một cái khung lên do được định nghĩa nhờ thẻ div ở trong file css!
Bao quanh mỗi thẻ div để gọi các module bên trong các bạn cho thêm câu lệnh trên vào!
DOCTYPE là dòng code đầu tiên trên cùng của trang và nằm trên thẻ html mở, nó có nhiệm vụ nói cho
trình duyệt biết đây là website chứa HTML, XHTML hay là cả hai loại, như vậy trình duyệt có thể đọc
website đúng hơn. Cái này báo rằng code trong trang có sự kết hợp của XHTML và HTML. Rất nhiều
trang vẫn đang sử dụng lệnh này, do vậy code HTML cũ của họ vẫn có thể hoạt động như là XHTML.
Bạn chèn code sau bên trên thẻ
Bây giờ chúng ta sẽ mở rộng thêm một chút. Chúng ta sẽ tạo thêm một vị trí quảng cáo trên banner và
cho module banner hoặc tạo một module custom_html rồi cho nó hiển thị ở đó.
Đầu tiên cho hình ảnh trên banner của chúng ta nhỏ lại chút. Chúng ta vào file layout.css và ở lớp #logo
ta sửa thành:
PHP Code:
#logo
{
float: left;
height: 150px;
width: 650px;
background: url( /images/fruits.jpg) no-repeat;
}
1. Bạn vào file layout.css thêm một lớp có tên #ads với nội dung!
PHP Code:
#ads
{

height: 150px;
width: 227px;
margin: 0 660px auto;
}
Như vậy chúng ta đã có một định nghĩa cho một vị trí mới có chiều cao là 150, chiều rộng là 227 và
cách lề trái là 660px (tức là nó đứng sau logo)
Tiếp đến ta vào administrator->Module Manager->New
Tại hộp thoại tạo mới module ta chọn kiểu module là custom_html và đặt tên cho nó là ads, position
bạn điền vào chữ ads, trong phần nội dung bạn chèn một bức ảnh bất kỳ với kích thước 150 x 227 vào!
Bây giờ ta vào file index.php và tại thẻ div khai báo cho banner top ta thêm đoạn code sau vào bên
dưới:
<div id="ads">
<jdoc:include type="modules" name="ads" />
Điều này có nghĩa là ta gọi module nào ở vị trí ads và vị trí này có style id là ads trong file css!
Thiết kế Template Joomla (Phần 11)
Thiết kế Css, Layout cho website Joomla (tt)
5. Hoàn thiện file templateDetails.ml và thêm icon cho template
Để template của bạn có những vị trí được khai báo trong administrator và nó sẽ hiện ra mỗi khi bạn cài
một module nào đó thì bạn phải khai báo những vị trí này vào file templateDetails.xml Bạn thêm những
position vào file templateDetails.xml css
images
template_preview.png
template_thumbnail.png
index.php
index.html
debug
ads
position-0
position-1
position-2

position-3
position-4
position-5
position-6
position-7
position-8
position-9
position-10
position-11
position-12
position-13
position-14
position-15
Như vậy bây giờ khi vào cấu hình một module thì khi ta chọn position cho nó, postition nào mà
template của ta cung cấp sẽ được list ra cùng với những template khác.
- Vấn đề tiếp theo là thêm icon cho template của bạn. Dù icon là một hình ảnh rất nhỏ bé nhưng nó lại
làm nên thương hiệu và hình ảnh của bạn khi nó luôn là đối tượng xuất hiện trong mọi lúc và trên mọi
trang.
Trước tiên bạn copy file favicon.ico vào thư mục gốc. Sau đó thêm đoạn code sau vào trang index.php,
đặt nó bên trong thẻ
Và favicon.ico trong thẻ filename vào file templateDetails.xml
Và như vậy template của chúng ta đã có icon đại diện.
Về cơ bàn thì đó là tất cả những việc để tạo nên một template, còn lại do mỗi chúng ta có thể tự định
nghĩa và tạo nên những style riêng cho giao diện. Chuyên mục này sẽ có những bài viết nâng cao được bổ
xung về sau này!
Hướng dẫn cách thiết kế template joomla 2.5 - HTML header
Công việc đưa từ file photoshop sang html cho phần Header gồm:
1. Định khung và khuân dạng html
2. Xác định phần header, gồm chiều rộng và chiều cao.
3. Xác định Logo.

4. Xác định phần menu bên phải của header.
Thực hiện:
Xem lại hình ảnh của phần Header:
1. Xác định một khung html:
?
1
2
3
4
5
6
7
8
9
1
0
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta charset="utf-8" />
<title>PSD2HTML</title>
</head>
<body>
</body>
</html>
2. Xác định header:
?
1
2

3
4
5
6
7
<div id="art-main"><! Xac dinh mot board duy nhat >
<div class="art-sheet"><! Xac dinh khuan dang web >
<div class="art-sheet-body"><! Xac dinh khuan dang web lop 2 >
<div class="header"><! begin header >


</div><! end header >

3. Xác định logo:
?
1
2
3
4
5
<div class="header_1" >

<a href="#"><img src="/logo.jpg" /></a>
<h1>PSD TO HTML</h>
</div>
4. Xác định menu phải:
?
1
2
3

4
5
6
7
8
9
10
<div class="header_2">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Hỏi Đáp</li>
<li>Học SEO</li>
<li>Liên Hệ</li>
<li>Hotline: 0988888888</li>
</ul>
</div>
Vậy toàn bộ phần Header của template joomla 2.5 là:
?
1
2
3
4
5
6
7
8
9
1
0

11
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />

<meta charset="utf-8" />
<title>PSD2HTML</title>
</head>
<body>
<div id="art-main"><! Xac dinh mot board duy nhat >
<div class="art-sheet"><! Xac dinh khuan dang web >
<div class="art-sheet-body"><! Xac dinh khuan dang web lop 2 >
<div class="header"><! begin header >

<div class="header_1">

<a href="#"><img src="/logo.jpg" /></a>
<h1>PSD TO HTML</h>
</div>
<div class="header_2">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Hỏi Đáp</li>
<li>Học SEO</li>
<li>Liên Hệ</li>
<li>Hotline: 0988888888</li>
</ul>
</div>
</div><! end header >
</body>
</html>
4
2
5

2
6
2
7
2
8
2
9
3
0
3
1
10 cách để SEO website Joomla hiệu quả
Tối ưu website được xem là khâu quan trọng và phức tạp nhất trong quá trình làm SEO cho một
website. Tuy nhiên đó là bước không thể bỏ qua nếu như website của bạn muốn có nhiều từ khóa quan
trọng nằm trên top trong danh sách kết quả tìm kiếm của Google. Ở đây chúng tôi sẽ cung cấp cho các bạn
10 cách để SEO website Joomla hiệu quả, và để cải thiện thứ hang website của bạn trên google khi sử
dụng mã nguồn mở Joomla.
1. Đưa từ khoá vào Your Site Name.
Các bạn hay dễ bị cám dỗ và nhồi nhét hàng loạt các từ khoá bạn mong muốn đạt thứ hạng cao trong
các công cụ tìm kiếm, điều này không tốt cho website của bạn khi bạn dùng mô tả rằng ” website, thiết kế
web, thiết kế website, thiết kế web .net, Công ty thiết kế web, Công ty làm web, Công ty thiết kế website
2. Đừng cài đặt dữ liệu mẫu khi bạn thiết lập một website Joomla.
Khi khởi tạo website Joomla, bạn dễ quên xoá tất cả các bài demo đi kèm với nó. Điều đó sẽ cung cấp
cho các công cụ tìm kiếm thấy, liên kết và các bài viết của bạn không liên quan đến chủ đề của bạn. Hãy
xóa dữ liệu mẫu của bạn đi và đừng quên dọn dẹp thùng rác trong Joomla để giảm tải cho dữ liệu của bạn.
3. Thay thế các button liên kết về mạng xã hội.
Có rất ít người dùng Submit website bạn lên mạng xã hội, tuy nhiên khi bạn submit thì lại có thể, ngoài
ra để giao diện trình bày đẹp nên gỡ các button mạng xã hội và thế bằng các liên kết text link, các công cụ
tìm kiếm sẽ đánh giá cao sự chăm chỉ của bạn.

4. Tắt liên kết PDF.
Các liên kết chứa file PDF có kết quả xếp hạng cao hơn các trang chính, nhưng có bất lợi là các liên kết
PDF này lại không có liên kết đơn, người dùng không thể xem tiếp vì không có liên kết để di chuyển đến
các phần còn lại của website, Vì vậy hãy tắt hiển thị PDF đi.
5. Bật bộ nhớ cache joomla.
Để làm cho website bạn nhanh hơn và kích thước nhỏ hơn cũng như có tốc độ loading và dữ liệu nhỏ
hơn, bạn hãy mở bộ nhớ cache cho website joomla, với các này bạn có thể chỉnh sửa ở Global
Configuration.
6. Chuyển các phiên bản website www và không www đến cùng một nơi.
Tất cả bạn cần làm là chỉnh sửa vài thứ trong file Htaccess của bạn Lưu ý: Thay thế tên miền
thietkehay.com thành tên miền của bạn.
Options FollowSymLinks
# Mod_rewrite
RewriteEngine On
RewriteCond% (HTTP_HOST) ^ thietkehay.com $ [NC]
RewriteRule ^(.*)$ $ 1 [R = 301, L]
RewriteCond% (HTTP_HOST) ^ .*! thietkehay.com [NC]
RewriteRule (.*) $ 1 [R = 301, L]
7. Nhập mô tả các chuyên mục của bạn và bài viết.
Để cải thiện page rank và ranking index, bạn cần phải chăm chỉ nhập các thẻ meta mô tả cho các bài
viết và chuyên mục website, nếu bạn tổ chức chuyên mục một cách cẩn thận, website của bạn trở nên rất
dễ dàng cho người tìm kiếm và công cụ tìm kiếm điều hướng website cũng như giúp cho website index
thứ hạng tốt hơn.
8. Dọn dẹp trong thành phần global configuration metadata.
Điều chắc chắn và bạn phải nhớ là gỡ bỏ các thẻ meta trong cấu hình global configuration metadata,
bạn rất dễ quên điều này, vì nó làm site bạn hiển thị 2 thẻ mô tả một lúc !!! hãy gỡ bỏ nó ra. vì không cần
thiết sử dụng.
9. Kiểm tra lỗi.
Hãy kiểm tra lỗi index các bài viết website bạn được index bằng cách gõ vào công cụ tìm kiếm từ khoá
yourdomain.com để tìm kiếm các bài viết được index sai, và sử dụng công cụ google webmaster tools dể

remove các cache được index sai và vô giá trị đó, hãy cố gắng kiểm tra để mang về lợi ích tốt nhất cho
website của bạn, Google đánh giá cao hành động này của bạn và sẽ bắt đầu index tiếp website bạn.
10. Hãy tự tin.
Joomla là một phần mềm mã nguồn mở CMS cho phép bạn dễ dàng tạo ra nhiều website có chất lược
cao và là công cụ đắc lực cho kế hoạch seo của bạn. Nếu hiểu rõ hơn về joomla và có thời gian nghiên cứu
bạn sẽ thấy joomla là công cụ SEO tuyệt vời.
10 thủ thuật bổ trợ việc thiết kế website
Hiện nay, việc thiết kế Web ngày càng trở nên thuận tiện và dễ dàng. Bài viết này sẽ giới thiệu tới
bạn đọc 10 thủ thuật bổ trợ trong thiết kế website nhằm làm tăng sự hữu ích và chất lượng của các
trang web.
1. Đặt Tên và Logo của bạn trên mỗi trang và tạo cho Logo một link tới trang chủ.
2. Tích hợp tính năng Search nếu website có nhiều hơn 100 trang.
3. Viết các tiêu đề trang và tiêu đề bài đơn giản và dễ hiểu, giải thích rõ ràng trang đó nói về cái gì.
4. Xây dựng cấu trúc website để tạo điều kiện thuận lợi cho việc đọc và giúp người truy cập và dễ nắm
bắt thông tin một cách nhanh chóng.
5. Sử dụng các hình ảnh về sản phẩm, dịch vụ. Bạn chỉ nên có một bức ảnh nhỏ trên mỗi một trang sản
phẩm riêng và link bức ảnh tới một hoặc nhiều bức ảnh lớn hơn mà chúng biểu diễn chi tiết như mong
muốn của người truy cập.
6. Sử dụng hypertext. Thay vì nhồi nhét mọi thứ về một sản phẩm hay một chủ đề vào một trang đơn,
dài vô tận, bạn hãy sử dụng hypertext để xây dựng hệ thống không gian nội dung thành một trang ban đầu
cung cấp một cái nhìn bao quát và nhiều trang cấp hai mà mỗi trang đó chỉ tập trung vào một chủ đề cụ
thể.
7. Sử dụng các tiêu đề links để giúp cho người đọc xem trước được nơi mà mỗi cái link sẽ đưa họ đến
trước khi họ click vào.
8. Sử dụng việc thu nhỏ hình ảnh làm nổi bật tính liên quan khi chuẩn bị các bức ảnh và hình ảnh nhỏ.
9. Đảm bảo rằng tất cả những trang quan trọng đều có thể dễ dàng truy cập đối với người sử dụng bị
mất khả năng.
10. Hãy làm giống như bất kỳ người nào khác: nếu hầu hết các trang web lớn đều làm một cái gì đó
theo một cách cố định, hãy làm theo họ bởi vì người truy cập cũng sẽ mong muốn làm như vậy trên trang
web của bạn. Người đọc sử dụng hầu hết thời gian của họ vào các websie khác, vì vậy đó là nơi họ định

hình mong muốn được biết một website hoạt động như thế nào.
Kinh nghiệm tự học thiết kế web
Trong quá trình học để trở thành một lập trình viên hiện nay ở các trường đại học thì có một giai
đoạn khá quan trọng là lập trình thiết kế website.
Tuy nhiên, cũng có khá nhiều người sau khi tốt nghiệp vẫn hầu như chưa hề biết quá trình thiets
kế một website như thế nào và cũng có khá nhiều người đã biết về lập trình nhưng chưa hề biết đến
việc lập trình một website.
Bạn cũng là một người trong số đó và đang mù mờ về các kiến thức website? Sau khi đọc bài viết về
quá trình tự học thiết kế website này, hi vọng sẽ giúp ích được cho các bạn đang muốn tìm hiểu về thiết
kế website
Quá trình tự học thiết kế website
Nếu bạn tìm được một website cho down mã nguồn diễn đàn bằng PHP với MySQL và có hướng dẫn
cài đặt, hướng dẫn thay đổi các chức năng bạn hãy down về và làm theo hướng dẫn. Chỉ cần để ý, dần
dần quen với cấu trúc và cách viết code và hiểu được một website hoạt động như thế nào.
Nếu bạn không phải là một người có thói quen cầm một cuốn sách dày hay đọc một đống tài liệu học
từng bước. Bạn cũng không phải một người hay thích lên lớp nghe thầy cô giảng nhiều về lý thuyết mà
chỉ thích tự tìm hiểu. Đối với PHP bạn chỉ cần đọc đúng bài hướng dẫn tự học đầu tiên về cách khai báo
các biến (variables), khai báo các hàm (functions) và các đặc điểm chính của nó rồi tự đọc mã nguồn có
sẵn để biết cách viết.
Về sau bạn bắt đầu tự viết được các thay đổi cho mã nguồn diễn đàn đó, từ đó bạn có thể viết được hẳn
một chức năng lớn cho forum và còn có thể thay đổi hầu hết cấu trúc của nó. Đây chính là con đường tự
học thiết kế website.
Cùng với việc tự mày mò những source code có sẵn bạn hãy tham gia các diễn đàn xem người ta thảo
luận và cũng thường hay hướng dẫn người khác. Bạn hay tìm tòi để có thêm kiến thức hướng dẫn người
khác cũng là một cách rất dễ để tiến bộ. Nhiều khi có những vấn đề người khác hỏi tôi không biết, thế là
tôi lại lên mạng tìm hiểu rồi hướng dẫn lại. Hoặc lắm khi trên các diễn đàn thảo luận trực tuyến cũng có
nhiều người đưa các vấn đề hóc búa mà mình chưa từng gặp để giải quyết. Dần dần bạn sẽ có nhiều kinh
nghiệm cho chính mình.
Các yếu tố cần thiết để tự học thiết kế website
Tóm lại, để tự học thiết kế website thì yếu tố cần là bạn biết được được các thuật toán được dùng

trong lập trình, đã có tư duy lập trình, cơ bản về cơ sở dữ liệu và đã biết sử dụng website.
Bạn có thể tìm hiểu về html trước, sau đó là PHP (nếu bạn đã biết về C) hoặc JSP (nếu bạn đã biết về
lập trình Java) hay ASP.NET (nếu bạn đã biết về VB.NET hoặc C#). Có thời gian rỗi rãi thì bạn tìm hiểu
thêm về css để có thể làm cho website của bạn thêm bắt mắt và javascript để có các hiệu ứng phụ dễ sử
dụng cho người dùng.
Nếu bạn có vốn tiếng Anh (không cần phải quá giỏi) cũng là một lợi thế cho bạn. Bạn cũng nên tìm và
đọc các tài liệu nước ngoài bằng tiếng Anh. Bởi vì các tài liệu về kỹ thuật viết bằng tiếng Anh sẽ chuẩn
hơn viết bằng tiếng Việt hoặc được dịch sang tiếng Việt.