Hướng dẫn thiết kế template Joomla 1.5

1- Giới thiệu:

Trước khi bắt đầu thiết kế template, tôi sẽ giới thiệu cho bạn khái niệm về template Joomla.

- 1 trang web Joomla có thể có nhiều template Joomla khác nhau, mỗi template là 1 folder trong www/Joomla/templates/

- Template trong Joomla có thể chia sẽ giữa các trang web khác nhau, ví dụ sau khi bạn thiết kế xong template cho trang web của bạn, những trang web khác có thể sử dụng template bạn vừa làm và ngược lại.

- 1 template Joomla có thể có nhiều file, tùy tính năng, nhưng tối thiểu phải có các file sau:
index.php: đây là file quan trọng nhất, có nhiệm vụ định dạng cho trang web của bạn.
templateDetails.xml: file này cấu hình thông tin về template của bạn như: thông tin về tác giả template, các vị trí (position), các tham số (params).
template_thumbnail.png: file hình mô tả template của ban (Hình này sẽ hiện ra khi bạn vào Template Manager)
params.ini: Chứa các tham số được người dùng nhập trong template.
(Tí nữa bạn sẽ hiểu những file này sử dụng như thế nào)

- Trước khi bắt đầu, bạn nên phác thảo trước giao diện template, ví dụ template bạn sẽ làm như sau:

2- Chuẩn bị:
Để làm bài lab này, bạn cần chuẩn bị như sau:

Trích:

1- Download Source cho bài lab này: http://khoa.nhatnghe.org/forum/jooml...ate/source.zip 2- Cài Appserv 2.5.9 (Download phim hướng dẫn: http://khoa.nhatnghe.org/forum/jooml...te/Appserv.zip) 3- Cài Joomla 1.5, ở đây tôi dùng version mới nhất tại thời điểm này là 1.5.19 (Download phim hướng dẫn:http://khoa.nhatnghe.org/forum/jooml.../CaiJoomla.zip) 4- Máy bạn phải có Dreamweaver, tạo site Joomla (Download phim hướng dẫn:http://khoa.nhatnghe.org/forum/jooml...te/TaoSite.zip)

(Nếu bạn đã từng học qua webdoanhnghiep hoặc Joomla thì không cần phải xem bước 2,3 và 4)

3- Thiết kế:
Bước 1: Copy folder nhatnghe từ source bạn download về

Bước 2: Paste vào C:/Appserv/www/joomla/templates/

Bước 3: Xem sự thay đổi nhé: Từ trang quản trị Joomla, chọn Extension/Template Manager 

Bạn sẽ thấy có 1 dòng trắng dư ra như sau:

Đây chính là template bạn đang làm, do mình chưa cấu hình thông tin nên chỉ hiện ra 1 dòng trắng

Bước 4: Vào DreamWeaver, mở file templateDetails.xml để cấu hình thông tin cho template bạn đang làm.


Bước 5:Cấu hình như sau:
Dòng 4->12: Thông tin về template.
Dòng 15->21: Cấu hình các file có trong template.
Dòng 25->28: Cấu hình các position trong template.

Bạn có thể copy đoạn code sau:

Trích:

TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE 18/07/2010 Khoa Pham khoaphp@yahoo.com http://nhatnghe.com Khoa Pham TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE images/banner1.PNG images/banner2.PNG images/banner3.PNG index.php mycss.css template_thumbnail.png templateDetails.xml top left right footer Nhat Nghe 1 Nhat Nghe 2 Nhat Nghe 3

Bước 6: Từ trang administrator, bạn vào lại Extension/TemplateManager để xem kết quả
Chọn hình tròn trước template "TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE" và click nút Default để chuyển template joomla thành template bạn đang thiết kế.


Bước 7: Vào DreamWeaver, mở file templates/nhatnghe/index.php

Click this bar to view the small image.

Bước 8: Cấu hình như sau:

Click this bar to view the full image.

Code như sau:

Trích:

Bản quyền thuộc về

Lưu ý: Khi save trang này lại, nếu máy bạn báo lỗi font thì bạn làm như sau:
Trong Dream Weaver, nhấn tổ hợp phím Ctrl+J, vào mục Title/Encoding, mục encoding: chọn Unicode utf-8 như hình sau:

Bước 9: Mở file templates/nhatnghe/mycss.css


Bước 10: Cấu hình mycss.css như sau:

Code:

Trích:

@charset "utf-8"; #wrapper {width:950px; height:110px; background-color:#FFFF00; margin-left:auto; margin-right:auto} #top{width:950px; height:110px; background-color:#FFFF00; float:left} #left{width:200px; height:600px; background-color:#66FFCC; float:left} #content{width:550px; height:600px; background-color:#FFCCCC; float:left} #right{width:200px; height:600px; background-color:#66FFCC; float:left} #footer{width:950px; height:110px; background-color:#CCFF00; float:left}

Bước 11: Vào trang http://localhost/joomla để xem kết quả, bạn sẽ thấy như sau:

Bước 12: Vào lại DreamWeaver, mở trang templates/nhatnghe/index.php và cập nhật lại như sau:

Code:

Trích:

Bước 13: Kiểm tra trang http://localhost/joomla bạn sẽ thấy kết quả như sau:

Bước 14: Do css bạn quy định chiều cao giới hạn cho các div, nên bây giờ bạn có thể bỏ height: Mở trang templates/nhatnghe/mycss.css và delete các height như sau:

Sau khi delete height, mycss.css của bạn sẽ như sau:

Trích:

@charset "utf-8"; #wrapper {width:950px; height:110px; background-color:#FFFF00; margin-left:auto; margin-right:auto} #top{width:950px; height:110px; background-color:#FFFF00; float:left} #left{width:200px; height:600px; background-color:#66FFCC; float:left} #content{width:550px; height:600px; background-color:#FFCCCC; float:left} #right{width:200px; height:600px; background-color:#66FFCC; float:left} #footer{width:950px; height:110px; background-color:#CCFF00; float:left}

Bước 15: Và đây là kết quả của bạn:

4- Thêm tùy chọn cho khách hàng:
Bước 1: Copy file params.ini như sau:

Bước 2: Paste vào joomla/templates/nhatnghe/

Bước 3: Quay lại trang templateDetails.xml và cập nhật đoạn code sau:

Code:

Trích:

Nhat Nghe 1 Nhat Nghe 2 Nhat Nghe 3

Bước 4: Từ trang Administrator, vào Extension/Template manager, chọn template đang làm, bạn sẽ thấy nhơ sau:

Thử nhập dữ liệu và Save lại nhé:
- Chon banner: 3 banner sẽ có 3 màu khác nhau tùy thuộc khách hàng chọn banner nào.
- Ban Quyen: Footer trang web sẽ hiện ra "Bản quyền thuộc về ...": ... là tên bạn nhập ở đây

Bước 5: Mở lại trang templates/nhatnghe/index.php và update thêm 2 đoạn code nh sau:

Bước 6: Thử chọn 1 banner khách và kết quả cuối cùng như sau:

Đến đây bạn đã hoàn tất làm quen với các bước cơ bản của template Joomla, Chúc các bạn học tốt