bài 4 hướng dẫn chỉnh sửa và thiết kế giao diện web joomla

Bài 4
Hướng dẫn chỉnh sửa và thiết kế
giao diện web Joomla
Bài 4
Hướng dẫn chỉnh sửa và thiết kế
giao diện web Joomla
Nhắc lại bài cũ
• Joomla có những loại thành phần mở rộng nào?
• Việt hóa Joomla CMS như thế nào?
• Thay đổi giao diện website như thế nào?
• Quản lý đa phương tiện tại Media Manager;
• Có mấy nhóm thành viên trong website Joomla;
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Mục tiêu bài học
• Tìm hiểu chi tiết cách thức quản lý giao diện website
Joomla thông qua phần Template Manager;
• Chỉnh sửa một template có sẵn để tạo giao diện web
như ý muốn;
• Hiểu rõ cấu trúc của một Template, những kiến thức căn
bản để xây dựng 1 Template cho website Joomla.
• Tìm hiểu chi tiết cách thức quản lý giao diện website
Joomla thông qua phần Template Manager;
• Chỉnh sửa một template có sẵn để tạo giao diện web
như ý muốn;
• Hiểu rõ cấu trúc của một Template, những kiến thức căn
bản để xây dựng 1 Template cho website Joomla.
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Template Manager
Quản lý giao diện website Joomla bằng Template
Manager
-Giao diện website Joomla bao gồm 2 loại: giao diện cho trang frontend và giao

diện cho trang backend;
-Tất cả các giao diện của web Joomla được quản lý tại Extension - Template
Manager;
-Sau khi cài đặt Joomla, hệ thống có sẵn 3 template tạo giao diện trang frontend:
Milkyway, JA Purity, Beez
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
-Giao diện website Joomla bao gồm 2 loại: giao diện cho trang frontend và giao
diện cho trang backend;
-Tất cả các giao diện của web Joomla được quản lý tại Extension - Template
Manager;
-Sau khi cài đặt Joomla, hệ thống có sẵn 3 template tạo giao diện trang frontend:
Milkyway, JA Purity, Beez
Template Manager
Các thông số cấu hình Template
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Tạo 1 bản sao của Template Beez:
-Tạo bản sao Template để tránh trường hợp Template bị hỏng nếu quá trình chỉnh sửa
Template có sai sót.
-Tạo một thư mục mới có tên mynewtemplate. Nếu website được đặt trên hosting, thì
việc này sẽ được xử lý trong File Manager:
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
-Copy toàn bộ các thư mục và file trong thư mục Beez vào trong thư mục
mynewtemplate
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Đặt tên cho Template mới là mynewtemplate trong file templateDetails.xml
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez

Sửa dòng <name>beez</name> thành <name>mynewtemplate</name>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Lựa chọn Template mynewtemplate làm template
mặc định
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Thay đổi màu sắc giao diện bằng cách thay mã màu trong
CSS của Template
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Các file CSS trong template - Thay đổi mã màu trong các
file này
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Thay đổi Logo:
-Thiết kế 1 file ảnh định dạng .gif có tên là logo.gif có
kích thước 300x97px
-Copy file ảnh trên và dán vào thư mục
/template/mynewtemplate/images
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Thay đổi màu sắc trên giao diện web bằng cách sửa CSS:
Để sửa CSS của Template, vào Template Manager, lựa chọn
tenplate cần sửa rồi chọn Edit CSS
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Danh sách các file CSS của Template:
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez

Lựa chọn file template.css và sửa:
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Kết quả như sau:
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Chỉnh sửa Template Beez
Một số chỉnh sửa khác:
-Bằng cách can thiệp vào các file CSS còn có thể chỉnh
sửa các thành phần khác như như font chữ, cỡ chữ, kích
thước các vùng trên website
-Sử dụng FireBug của fiefox để hỗ trợ sửa CSS
-Ngoài ra còn có thể thêm hoặc bớt các vị trí đặt module
thông qua việc chỉnh sửa file templateDetails.xml và file
thiết lập cấu trúc phân vùng của Template (thường là file
index.php trong thư mục template).
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
-Bằng cách can thiệp vào các file CSS còn có thể chỉnh
sửa các thành phần khác như như font chữ, cỡ chữ, kích
thước các vùng trên website
-Sử dụng FireBug của fiefox để hỗ trợ sửa CSS
-Ngoài ra còn có thể thêm hoặc bớt các vị trí đặt module
thông qua việc chỉnh sửa file templateDetails.xml và file
thiết lập cấu trúc phân vùng của Template (thường là file
index.php trong thư mục template).
Thiết lập website đa giao diện
Sử dụng chức năng Menu Assignment để thiết lập website
đa giao diện cho Joomla
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Xây dựng 1 Template mới
Cấu trúc file và thư mục trong Template:

Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
Xây dựng 1 Template mới
Phân tích file Templatedetails.xml:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template
1.0//EN" " /><install version="1.5" type="template">
<name>Day Thiet Ke Web Joomla</name>
<creationDate>31/08/2012</creationDate>
<author>Dao Trung Hieu</author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<copyright>Dao Trung Hieu</copyright>
<license></license>
<version></version>
<description>Day Thiet Ke Web Joomla Tai POLY</description>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template
1.0//EN" " /><install version="1.5" type="template">
<name>Day Thiet Ke Web Joomla</name>
<creationDate>31/08/2012</creationDate>
<author>Dao Trung Hieu</author>
<authorEmail></authorEmail>
<authorUrl></authorUrl>
<copyright>Dao Trung Hieu</copyright>
<license></license>
<version></version>
<description>Day Thiet Ke Web Joomla Tai POLY</description>
Xây dựng 1 Template mới
<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>
<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>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla

Xây dưng 1 Template mới
<params>
<param name="banner_daohieu" type="list"
default="banner1.PNG" label="Chon banner:"
description="Chon banner cho template">
<option value="banner1.PNG">daohieu 1</option>
<option value="banner2.PNG">daohieu 2</option>
<option value="banner3.PNG">daohieu 3</option>
</param>
<param name="banquyen" type="text" default="Nhat Nghe"
label="Ban Quyen Thuoc Ve" description="Nhap ten ban
quyen" />
</params>
</install>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<params>
<param name="banner_daohieu" type="list"
default="banner1.PNG" label="Chon banner:"
description="Chon banner cho template">
<option value="banner1.PNG">daohieu 1</option>
<option value="banner2.PNG">daohieu 2</option>
<option value="banner3.PNG">daohieu 3</option>
</param>
<param name="banquyen" type="text" default="Nhat Nghe"
label="Ban Quyen Thuoc Ve" description="Nhap ten ban
quyen" />
</params>
</install>
Xây dựng 1 Template mới
Phân tích file index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" /><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 href="templates/daohieu/template_css.css" rel="stylesheet"
type="text/css" >
</head>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" /><html xmlns=" /><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 href="templates/daohieu/template_css.css" rel="stylesheet"
type="text/css" >
</head>
Xây dựng 1 Template mới
<body>
<div id="wrapper">
<div id="top"><img
src="templates/daohieu/images/banner.jpg"></div>
<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>
<div id="footer">
</div>
</div>
</body>
</html>
Bài 4 - Hướng dẫn chỉnh sửa và thiết kế giao diện Joomla
<body>
<div id="wrapper">
<div id="top"><img
src="templates/daohieu/images/banner.jpg"></div>
<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>
<div id="footer">
</div>
</div>
</body>
</html>