Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ   Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ
Trang Chủ Giới Thiệu Chương Trình Học Tài Liệu Tin Tức F.A.Q Lịch Khai Giảng Học Phí Việc Làm Liên Hệ

Go Back   Trung Tâm Đào Tạo Mạng Máy Tính Nhất Nghệ > WEB - ĐỒ HỌA - LẬP TRÌNH > Web Development > Joomla
Đăng Ký Thành Viên Thành Viên Lịch Ðánh Dấu Ðã Ðọc

Joomla Trao đổi, thảo luận tất cả vấn đề về Joomla.

Vui lòng gõ từ khóa liên quan đến vấn đề bạn quan tâm vào khung dưới , trước khi đặt câu hỏi mới.


Trả lời
 
Ðiều Chỉnh
  #1  
Old 19-07-2010, 01:41
o0o_khoaphp_o0o o0o_khoaphp_o0o vẫn chưa có mặt trong diễn đàn
Thành Viên Lâu Năm
 
Tham gia ngày: May 2008
Tuổi: 27
Bài gởi: 1,377
Thanks: 23
Thanked 1,813 Times in 388 Posts
Hướng dẫn thiết kế template Joomla

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.vn/forum/joomla...ate/source.zip
2- Cài Appserv 2.5.9 (Download phim hướng dẫn: http://khoa.nhatnghe.vn/forum/joomla...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.vn/forum/joomla.../CaiJoomla.zip)
4- Máy bạn phải có Dreamweaver, tạo site Joomla (Download phim hướng dẫn: http://khoa.nhatnghe.vn/forum/joomla...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)

thay đổi nội dung bởi: o0o_khoaphp_o0o, 12-01-2011 lúc 20:01
Trả Lời Với Trích Dẫn
Sponsored links
  #2  
Old 19-07-2010, 01:41
o0o_khoaphp_o0o o0o_khoaphp_o0o vẫn chưa có mặt trong diễn đàn
Thành Viên Lâu Năm
 
Tham gia ngày: May 2008
Tuổi: 27
Bài gởi: 1,377
Thanks: 23
Thanked 1,813 Times in 388 Posts
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:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE</name>
<creationDate>18/07/2010</creationDate>
<author>Khoa Pham</author>
<authorEmail>khoaphp@yahoo.com</authorEmail>
<authorUrl>http://nhatnghe.com</authorUrl>
<copyright>Khoa Pham</copyright>
<license></license>
<version></version>
<description>TRUNG TAM DAO TAO MANG MAY TINH NHAT NGHE</description>

<files>
<filename>images/banner1.PNG</filename>
<filename>images/banner2.PNG</filename>
<filename>images/banner3.PNG</filename>
<filename>index.php</filename>
<filename>mycss.css</filename>
<filename>template_thumbnail.png</filename>
<filename>templateDetails.xml</filename>
</files>

<positions>
<position>top</position>
<position>left</position>
<position>right</position>
<position>footer</position>
</positions>

<params>
<param name="banner_nhatnghe" type="list" default="banner1.PNG" label="Chon banner:" description="Chon banner cho template">
<option value="banner1.PNG">Nhat Nghe 1</option>
<option value="banner2.PNG">Nhat Nghe 2</option>
<option value="banner3.PNG">Nhat Nghe 3</option>
</param>

<param name="banquyen" type="text" default="Nhat Nghe" label="Ban Quyen Thuoc Ve" description="Nhap ten ban quyen" />

</params>

</install>
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


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


Code như sau:
Trích:
<div id="wrapper">
<div id="top"></div>
<div id="left"></div>
<div id="content"></div>
<div id="right"></div>
<div id="footer">
Bản quyền thuộc về
</div>
</div>
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:
<div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
<div id="content"><jdoc:include type="component" /></div>
<div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div>
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:

thay đổi nội dung bởi: o0o_khoaphp_o0o, 12-01-2011 lúc 20:02
Trả Lời Với Trích Dẫn
Đã có 8 người gửi lời cảm ơn o0o_khoaphp_o0o vì bài viết hữu ích này:
  #3  
Old 19-07-2010, 01:42
o0o_khoaphp_o0o o0o_khoaphp_o0o vẫn chưa có mặt trong diễn đàn
Thành Viên Lâu Năm
 
Tham gia ngày: May 2008
Tuổi: 27
Bài gởi: 1,377
Thanks: 23
Thanked 1,813 Times in 388 Posts
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:
<params>
<param name="banner_nhatnghe" type="list" default="banner1.PNG" label="Chon banner:" description="Chon banner cho template">
<option value="banner1.PNG">Nhat Nghe 1</option>
<option value="banner2.PNG">Nhat Nghe 2</option>
<option value="banner3.PNG">Nhat Nghe 3</option>
</param>

<param name="banquyen" type="text" default="Nhat Nghe" label="Ban Quyen Thuoc Ve" description="Nhap ten ban quyen" />

</params>
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

thay đổi nội dung bởi: o0o_khoaphp_o0o, 12-01-2011 lúc 20:03
Trả Lời Với Trích Dẫn
Đã có 16 người gửi lời cảm ơn o0o_khoaphp_o0o vì bài viết hữu ích này:
  #4  
Old 24-07-2010, 12:04
traitimthep1945 traitimthep1945 vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Jul 2010
Tuổi: 30
Bài gởi: 3
Thanks: 0
Thanked 1 Time in 1 Post
Nhờ tư vấn

Cho mình hỏi chút, mình dow nguyên cái soucode theo hướng dẫn, làm đúng như hướng dẫn nhưng dùng Wampserver. Không hiểu tại sao kết quả thì không thấy được site như thiết kế (không thấy màu sắc và các vùng top, left, right) mà chỉ được trang toàn chữ lộn xộn.
Mình nhờ các bạn chỉ dùm.
Trả Lời Với Trích Dẫn
  #5  
Old 24-07-2010, 12:31
o0o_khoaphp_o0o o0o_khoaphp_o0o vẫn chưa có mặt trong diễn đàn
Thành Viên Lâu Năm
 
Tham gia ngày: May 2008
Tuổi: 27
Bài gởi: 1,377
Thanks: 23
Thanked 1,813 Times in 388 Posts
Trích:
Nguyên văn bởi traitimthep1945 View Post
Cho mình hỏi chút, mình dow nguyên cái soucode theo hướng dẫn, làm đúng như hướng dẫn nhưng dùng Wampserver. Không hiểu tại sao kết quả thì không thấy được site như thiết kế (không thấy màu sắc và các vùng top, left, right) mà chỉ được trang toàn chữ lộn xộn.
Mình nhờ các bạn chỉ dùm.
1- Cấu hình sai file css.

2- nhatnghe/index.php bạn chưa link tới file css
Trả Lời Với Trích Dẫn
Những người sau đây đã gửi lời cảm ơn o0o_khoaphp_o0o vì bài viết hữu ích này:
  #6  
Old 25-07-2010, 00:00
traitimthep1945 traitimthep1945 vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Jul 2010
Tuổi: 30
Bài gởi: 3
Thanks: 0
Thanked 1 Time in 1 Post
Chào bạn Khoa, bạn nói rõ hơn giúp mình được không.

Mình coppy đoạn CSS mà bạn cung cấp, vậy không biết còn phải cấu hình như thế nào? và link với index.php bằng cách nào? Mong bạn chỉ rõ giúp mình. Mình mới tập tọe nên chưa rõ lắm
Cám ơn bạn.
Trả Lời Với Trích Dẫn
Những người sau đây đã gửi lời cảm ơn traitimthep1945 vì bài viết hữu ích này:
  #7  
Old 25-07-2010, 20:58
o0o_khoaphp_o0o o0o_khoaphp_o0o vẫn chưa có mặt trong diễn đàn
Thành Viên Lâu Năm
 
Tham gia ngày: May 2008
Tuổi: 27
Bài gởi: 1,377
Thanks: 23
Thanked 1,813 Times in 388 Posts
1- Bạn làm đủ các bước chưa?
2- code css phải để trong mycss.css
Trả Lời Với Trích Dẫn
  #8  
Old 25-07-2010, 23:34
traitimthep1945 traitimthep1945 vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Jul 2010
Tuổi: 30
Bài gởi: 3
Thanks: 0
Thanked 1 Time in 1 Post
Cảm ơn bạn Khoa, mình đã làm lại đc rồi

Cảm ơn bạn đã giúp đỡ nhé, mình thử lại thấy đc rồi,
Chúc bạn sức khỏe!
Trả Lời Với Trích Dẫn
  #9  
Old 27-08-2010, 16:44
levantu levantu vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Aug 2010
Tuổi: 24
Bài gởi: 3
Thanks: 0
Thanked 1 Time in 1 Post
Anh Khoa "oi" cho em hỏi đoạn code dưới chỗ style="xhtml"
nghĩa là sao ạ ??
<div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
<div id="content"><jdoc:include type="component" /></div>
<div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div>
Trả Lời Với Trích Dẫn
  #10  
Old 27-08-2010, 16:55
levantu levantu vẫn chưa có mặt trong diễn đàn
Mới Đăng Ký
 
Tham gia ngày: Aug 2010
Tuổi: 24
Bài gởi: 3
Thanks: 0
Thanked 1 Time in 1 Post
Anh Khoa "oi" cho em hỏi đoạn code dưới chỗ style="xhtml"
nghĩa là sao ạ ??
<div id="left"><jdoc:include type="modules" name="left" style="xhtml" /></div>
<div id="content"><jdoc:include type="component" /></div>
<div id="right"><jdoc:include type="modules" name="right" style="xhtml" /></div>
Trả Lời Với Trích Dẫn
Những người sau đây đã gửi lời cảm ơn levantu vì bài viết hữu ích này:
Sponsored links
Trả lời

Bookmarks

Ðiều Chỉnh

Quyền Sử Dụng Ở Diễn Ðàn
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Mở
Smilies đang Mở
[IMG] đang Mở
HTML đang Tắt

Chuyển đến

Similar Threads
Ðề tài Người Gởi Chuyên mục Trả lời Bài mới gởi
Cách chuyển 1 template đã thiết kế bằng photoshop qua temp joomla? dinhhieu67 Web Applications 3 14-01-2011 12:19
Xin tài liệu thiết kế template cho Joomla 1.5(Tiếng Anh thì tốt nhất) leeasako Web Applications 1 31-03-2010 12:15
Hướng Dẫn Lập Kế Hoạch Kinh Doanh Mr Zen Tài Liệu Học Tập 4 24-03-2010 12:52
Xin cho mình bài hướng dẫn thiết kế cái template giống website 5s hungleth Web Applications 4 16-03-2010 15:04



Múi giờ GMT +7. Hiện tại là 06:41
Powered by: vBulletin Version 3.8.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management by RedTyger