Web203 slide 4

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.

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

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:

-Copy toàn bộ các thư mục và file trong thư mục Beez vào trong thư mục
mynewtemplate

Đặt tên cho Template mới là mynewtemplate trong file templateDetails.xml

Sửa dòng <name>beez</name> thành <name>mynewtemplate</name>

Lựa chọn Template mynewtemplate làm template
mặc định

Thay đổi màu sắc giao diện bằng cách thay mã màu trong
CSS của Template

Các file CSS trong template - Thay đổi mã màu trong các
file này

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

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

Danh sách các file CSS của Template:

Lựa chọn file template.css và sửa:

Kết quả như sau:

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ằ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

Xây dựng 1 Template mới
Cấu trúc file và thư mục trong Template:

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" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>Day Thiet Ke Web Joomla</name>
<creationDate>31/08/2012</creationDate>
<author>Dao Trung Hieu</author>
<authorEmail>daotrunghieu143@gmail.com</authorEmail>
<authorUrl>http://dayhocthietkeweb.net</authorUrl>
<copyright>Dao Trung Hieu</copyright>
<license></license>
<version></version>
<description>Day Thiet Ke Web Joomla Tai POLY</description>
<?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>Day Thiet Ke Web Joomla</name>
<creationDate>31/08/2012</creationDate>
<author>Dao Trung Hieu</author>
<authorEmail>daotrunghieu143@gmail.com</authorEmail>
<authorUrl>http://dayhocthietkeweb.net</authorUrl>
<copyright>Dao Trung Hieu</copyright>
<license></license>
<version></version>
<description>Day Thiet Ke Web Joomla Tai POLY</description>

<files>
<filename>images/banner1.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>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>

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>
</param>
<param name="banquyen" type="text" default="Nhat Nghe"
label="Ban Quyen Thuoc Ve" description="Nhap ten ban
quyen" />
</params>
</install>
<params>
<param name="banner_daohieu" type="list"
default="banner1.PNG" label="Chon banner:"
description="Chon banner cho template">
</param>
<param name="banquyen" type="text" default="Nhat Nghe"
quyen" />
</params>
</install>

Phân tích file index.php
<!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">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl
?>/templates/system/css/system.css" type="text/css" />
?>/templates/system/css/general.css" type="text/css" />
<link href="templates/daohieu/template_css.css" rel="stylesheet"
type="text/css" >
</head>
<!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">
<head>
<jdoc:include type="head" />
?>/templates/system/css/system.css" type="text/css" />
?>/templates/system/css/general.css" type="text/css" />
<link href="templates/daohieu/template_css.css" rel="stylesheet"
type="text/css" >
</head>

Phân tích file template_css.css
@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}
@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}

<params>
<param name="banner" type="list" default="banner1.PNG"
label="Chon banner:" description="Chon banner cho
template">
<option value="banner1.PNG">Banner1</option>
</param>
<param name="banquyen" type="text" default="Ban Quyen"
quyen" />
</params>
Phân tích file params.ini
<params>
<param name="banner" type="list" default="banner1.PNG"
label="Chon banner:" description="Chon banner cho
template">
</param>
<param name="banquyen" type="text" default="Ban Quyen"
quyen" />
</params>

Sau khi xây dựng xong tất cả các file và thư mục,
các file và thư mục này ở bên trong một thư mục có
tên trùng với tên của Template. Nén thư mục này
định dạng .zip - File zip này là file được sử dụng để
cài vào Joomla CMS
Đóng gói file cài đặt
Sau khi xây dựng xong tất cả các file và thư mục,
các file và thư mục này ở bên trong một thư mục có
tên trùng với tên của Template. Nén thư mục này
định dạng .zip - File zip này là file được sử dụng để
cài vào Joomla CMS

Tổng kết bài học
• Với 1 template có sẵn, người sử dụng Joomla hoàn toàn
có thể chỉnh sửa bất cứ thành phần nào để giao diện
của web hiển thị theo ý muốn.
• Trước khi chỉnh sửa Template cần tạo ra một bản sao
cho template để tránh tình trạng không thể khôi phục lại
như ban đầu
• Bất kỳ Template nào cũng đều có cùng 1 cấu trúc các
file và thư mục. Tùy thuộc vào chức năng hay những
tiện ích kèm theo mà các template có thể có thêm một
số file hay thư mục bổ sung.
• Gói cài đặt Template là một file nén .zip nén toàn bộ file
và thư mục đã được xây dựng.
• Với 1 template có sẵn, người sử dụng Joomla hoàn toàn
có thể chỉnh sửa bất cứ thành phần nào để giao diện
của web hiển thị theo ý muốn.
• Trước khi chỉnh sửa Template cần tạo ra một bản sao
cho template để tránh tình trạng không thể khôi phục lại
như ban đầu
• Bất kỳ Template nào cũng đều có cùng 1 cấu trúc các
file và thư mục. Tùy thuộc vào chức năng hay những
tiện ích kèm theo mà các template có thể có thêm một
số file hay thư mục bổ sung.
• Gói cài đặt Template là một file nén .zip nén toàn bộ file
và thư mục đã được xây dựng.

Web203 slide 4

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Web203 slide 4

Similar to Web203 slide 4 (20)

More from tuanduongcntt

More from tuanduongcntt (14)

Web203 slide 4