bài 4 hướng dẫn chỉnh sửa và thiết kế giao diện web 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õ

Trang 1

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

Trang 2

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

Trang 3

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

Trang 4

-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

Trang 5

Template Manager

Các thông số cấu hình Template

Trang 6

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:

Trang 7

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

Trang 8

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

Trang 9

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

Trang 10

Lựa chọn Template mynewtemplate làm template

mặc định

Trang 11

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

Trang 12

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

Trang 13

Thay đổi Logo:

-Thiết kế 1 file ảnh định dạng gif có tên là logo.gif có

Trang 14

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

Trang 15

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

Trang 16

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

Trang 17

Kết quả như sau:

Trang 18

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

Trang 19

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

Trang 20

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

Trang 21

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" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">

<name>Day Thiet Ke Web Joomla</name>

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

<name>Day Thiet Ke Web Joomla</name>

Trang 22

Trang 23

Xây dưng 1 Template mới

<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

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

label="Ban Quyen Thuoc Ve" description="Nhap ten ban

quyen" />

</params>

</install>

Trang 24

Phân tích file index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Trang 25

<div id="right"><jdoc:include type="modules" name="right"

<div id="right"><jdoc:include type="modules" name="right"

Trang 26

Phân tích file template_css.css

@charset "utf-8";

#wrapper {width:950px; height:110px; background-color:#FFFF00; left:auto; margin-right:auto}

margin-#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; left:auto; margin-right:auto}

margin-#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}

Trang 27

<param name="banner" type="list" default="banner1.PNG"

label="Chon banner:" description="Chon banner cho

<param name="banner" type="list" default="banner1.PNG"

label="Chon banner:" description="Chon banner cho

Trang 28

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

Trang 29

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.