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

Bài 4Hướng dẫn chỉnh sửa và thiết kế

giao diện web Joomla

Bài 4Hướ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 websiteJoomla thông qua phần Template Manager;

• Chỉnh sửa một template có sẵn để tạo giao diện webnhư ý muốn;

• Hiểu rõ cấu trúc của một Template, những kiến thức cănbả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 websiteJoomla thông qua phần Template Manager;

• Chỉnh sửa một template có sẵn để tạo giao diện webnhư ý muốn;

• Hiểu rõ cấu trúc của một Template, những kiến thức cănbản để xây dựng 1 Template cho website Joomla.


Template Manager

Quản lý giao diện website Joomla bằng TemplateManager

-Giao diện website Joomla bao gồm 2 loại: giao diện cho trang frontend và giaodiện cho trang backend;-Tất cả các giao diện của web Joomla được quản lý tại Extension - TemplateManager;-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à giaodiện cho trang backend;-Tất cả các giao diện của web Joomla được quản lý tại Extension - TemplateManager;-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 ManagerCác thông số cấu hình Template


Chỉnh sửa Template BeezTạ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ửaTemplate 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:


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


Chỉnh sửa Template BeezĐặt tên cho Template mới là mynewtemplate trong file templateDetails.xml


Chỉnh sửa Template BeezSửa dòng <name>beez</name> thành <name>mynewtemplate</name>


Chỉnh sửa Template BeezLựa chọn Template mynewtemplate làm template

mặc định


Chỉnh sửa Template Beez

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



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


Chỉnh sửa Template BeezThay đổ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ọntenplate 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ỉnhsửa các thành phần khác như như font chữ, cỡ chữ, kíchthướ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 modulethông qua việc chỉnh sửa file templateDetails.xml và filethiết lập cấu trúc phân vùng của Template (thường là fileindex.php trong thư mục template).


-Bằng cách can thiệp vào các file CSS còn có thể chỉnhsửa các thành phần khác như như font chữ, cỡ chữ, kíchthướ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 modulethông qua việc chỉnh sửa file templateDetails.xml và filethiết lập cấu trúc phân vùng của Template (thường là fileindex.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 template1.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>[email protected]</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 template1.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>[email protected]</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>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>


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 banquyen" /></params></install>


<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 banquyen" /></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" /><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>


<!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" /><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>


<body><div id="wrapper">

<div id="top"><imgsrc="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>


<body><div id="wrapper">

<div id="top"><imgsrc="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>


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 chotemplate"><option value="banner1.PNG">Banner1</option><option value="banner2.PNG">Banner2</option><option value="banner3.PNG">Banner3</option></param><param name="banquyen" type="text" default="Ban Quyen"label="Ban Quyen Thuoc Ve" description="Nhap ten banquyen" /></params>

Phân tích file params.ini<params><param name="banner" type="list" default="banner1.PNG"label="Chon banner:" description="Chon banner chotemplate"><option value="banner1.PNG">Banner1</option><option value="banner2.PNG">Banner2</option><option value="banner3.PNG">Banner3</option></param><param name="banquyen" type="text" default="Ban Quyen"label="Ban Quyen Thuoc Ve" description="Nhap ten banquyen" /></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 đặtSau 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àncó thể chỉnh sửa bất cứ thành phần nào để giao diệncủ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 saocho template để tránh tình trạng không thể khôi phục lạinhư ban đầu

• Bất kỳ Template nào cũng đều có cùng 1 cấu trúc cácfile và thư mục. Tùy thuộc vào chức năng hay nhữngtiện ích kèm theo mà các template có thể có thêm mộtsố 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ộ filevà thư mục đã được xây dựng.

• Với 1 template có sẵn, người sử dụng Joomla hoàn toàncó thể chỉnh sửa bất cứ thành phần nào để giao diệncủ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 saocho template để tránh tình trạng không thể khôi phục lạinhư ban đầu

• Bất kỳ Template nào cũng đều có cùng 1 cấu trúc cácfile và thư mục. Tùy thuộc vào chức năng hay nhữngtiện ích kèm theo mà các template có thể có thêm mộtsố 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ộ filevà thư mục đã được xây dựng.


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

Documents