Tài liệu Thiết kế templatejoomla ppt

Các module này sẽ được hiển thị trong một cột đơn.. Các module này sẽ hiển thị trong một cột đơn.. Nếu không có module được định nghĩa cho vị trí “right” ở trang liên quan này, thì ô sẽ

Trang 1

Thiết kếtemplatejoomla

Trang 2

1.Căn bản làm Template và Thiết kế Site

Tổng quan về làm Template

File dàn trang

Style Sheets – trang đinh kiểu

Tổng quan về làm Template

The Joomla Template system is amongst the easiest to learn in the Content Management System family Templates are located in the /templates directory The following shows a typical directory structure for a template:

Hệ thống Joomla Template nằm trong những cái dễ học nhất của họ Content Management System

/templates

/basic_template

/css

template_css.css

/images

index.php

template_thumbnail.png

templateDetails.xml

Đó là tập hợp tối thiểu các file bạn cần để tạo một template Lệnh nhân đòi hỏi mỗi tên file phải được tôn trọng như thế Chú ý rằng trong khi không có ảnh nào hiển thị trong thư mục /images, nó là nơi đặc trưng bạn nên đặ bất cứ ảnh nào đang hỗ trợ cho template của bạn, như ảnh nền (backgrounds), banner, v.v Chúng ta hãy xem kĩ từng file trong đó

index.php

Đây là file giàn trang template

template_css.css

Css stylesheet cho template (trang định kiểu)

templateDetails.xml

File siêu dữ liệu (metadata) theo định dạng XML

template_thumbnail.png

Một mặt màn hình (screenshot) thu nhỏ của template, thường khoảng rộng 140 pixel và cao 90 pixel

File dàn trang

Mặc dù file dàn trang là một file PHP, nó được viết phần lớn trong HTML với chỉ vài tiểu trình (snippet) của PHP Bạn không cần phải là một chuyên gia về PHP để viết được một file template Tất cả bạn cần là học nơi nào đặt các khóa móc (key “hooks”) vào cỗ máy template Joomla Trong khung (framework) HTML bạn đặt các “cửa xổ” nhìn vào bên trong cơ sở dữ liệu đặng sau website của bạn có nhiều cửa sổ nhỏ điển hình được gọi là các Module và thông thường một cai mở rộng hơn (như một cửa chính) cho một Component

Bạn được khuyến khích viết các template trong XHTML Mặc dù có tranh luận liệu XHML có là lỗi đi của tương lai hay không, nó vẫn là một định dạng XML chuẩn rất tốt, trong khi HTML là một chuẩn rời rạc Các phiên bản tương lai của Joomla sẽ giừa ngày càng nhiều vào XML vì đó là lối đi kế tục kiểu mẫubây giờ

File index.php cho dàn trang 3 cột gần như giống dưới đây trong kiểu sương sống:

1: <?php

Trang 3

2: $iso = explode( '=', _ISO );

3: echo '<?xml version="1.0" encoding="' $iso[ ] "\">\n";

4: /** ensure this file is being included by a parent file */

5: defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not

allowed.' );

6: ?>

7: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

8: <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php echo _LANGUAGE; ?>">

9: <head>

10: <title><?php echo $mosConfig_sitename; ?></title>

11: <meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />

12: <?php

13: if ($my->id) {

14: initEditor();

15: }

16: ?>

17: <?php mosShowHead(); ?>

18: <link href="<?php echo

$mosConfig_live_site;?>/templates/basic_template/css/template_css

css" rel="stylesheet" type="text/css" />

19: </head>

20: <body>

21: <table cellspacing="0" cellpadding="5" border="0">

22: <tr>

23: <td colspan="3">

24: <?php echo $mosConfig_sitename; ?>

25: </td>

26: </tr>

27: <tr>

28: <td colspan="3">

29: <?php mosLoadModules ( 'top', 1 ); ?>

30: </td>

31: </tr>

32: <tr>

33: <td width="20%" valign="top">

34: <?php mosLoadModules ( 'left' ); ?>

35:</td>

37: <?php mosMainBody(); ?>

38:</td>

40: <?php mosLoadModules ( 'right' ); ?>

41: </td>

42: </tr>

43: <tr>

44: <td colspan="3" valign="top">

45: <?php mosLoadModules ( 'bottom' ); ?>

46: </td>

47: </tr>

Trang 4

48: </table>

49: </body>

50: </html>

Cùng tìm hiểu những chức năng chính Chúng tôi giả dụ rằng bạn dã biết chút ít về các trang HTML ở mức như là các thẻ tag head, body, table, v.v sẽ bỏ qua

Dòng 1-3: định nghĩa file là chuẩn file XML _ISO là một hằng số đặc biệt định nghĩa bảng mã kĩ tự được dùng Nó được định nghĩa trong file ngông ngữ của bạn (language file)

Dòng 5: Ngăn chặn việc truy cập trực tiếp vào file này Là điều cần thiết khi bạn thêm dòng này vào template của bạn

Dòng 7-8: Thiết lập chuẩn XHTML cho trang

Dòng 10: In ra tên biến cấu hình Tên Site trong cặp thẻ tag title đóng và mở

Dòng 11: _ISO được dùng lại để định nghĩa tập hợp kí tự dùng

Dòng 12-16: $may->id là một biến lệnh (script) mà sẽ mang giá trị non-zero nếu một người dùng đăng nhập vào site của bạn Nếu một người dùng đăng nhập thì một trình soạn thảo trực quan chỉ định trước được nạp Bạn có thể, nếu bạn muốn, luân luân nập trước trình soạn thảo, nhưng nói chung một khách nặc danh sẽ không cần viết bài Nó lứu giữ một tập lệnh tiêu đề bên trên việc duyệt site bình thường

Dòng 17: Chèn nhiều khối siêu dữ liệu (metadata block)

Dòng 18: Tải CSS stylesheet (trang định kiểu) $mosConfig_live_site là một biến cấu hình nắm giữ địa chỉ URL tuyệt đối của site bạn

Dòng 24: Nó in Tên Site trong một ô bảng (mở rộng ra 3 cột)

Dòng 29: Tải các module bất kỳ được xuất bản trong vị trí “top” Đối sỗ thứ hai, “1”, chỉ rằng các module được căn dóng theo chiều ngang

Dòng 34: Tải các module bất kì được xuất bản tại vị trí “left” Các module này sẽ được hiển thị trong một cột đơn

Dòng 37: Tải component vào template của bạn Component được thiết lập bởi địa chỉ URL, ví dụ,

index.php?option=com_content sẽ hiển thị nội dung (Content) Component trong vùng này

Dòng 40: Tải bất kì module nào được xuất bản trong vị trí “right” Các module này sẽ hiển thị trong một cột đơn

Dòng 45: Tải module bất kì được xuất bản trong vị trí “bottom”

Style Sheets

CSS Stylesheets

PHẢI LÀM

The XML Setup File

PHẢI LÀM

The Thumbnail

Khi bạn đã hoàn thành template của mình, xuất bản nó với Template Manager trong Administrator Xem

Trang 5

trươc site và lấy một mặt màn hình (screenshot) Nhập mặt màn hình đó vào gói soạn thảo đồ họa yêu thích

và cắt toàn nội dung của cổng xem trình duyệt Giảm kích thước ảnh xuống khoảng 140 pixel chiều rộng và

90 pixel chiều cao rồi lưu nó theo định dnạg PNG trong thư mục template (nó là /templates/basic_template)

Trang 6

2 Advanced Templating ( 4 items )

Tổng quan

Administrator Templates (các template cho Administrator)

Tham khảo chức năng

Các chuẩn template

Tổng quan

Chương này bao gồm một số chức năng cao cấp hơn như ẩn các cột template và thiết kế template cho Administrator

Ẩn các module

Đôi khi muốn ẩn các module nào đó nếu không có module được gán cho vùng đó Bạn có thể ẩn các vùng này bằng cách dùng hàm mosCountModules

<?php if (mosCountModules( 'right' )) { ?>

<td>

<?php mosLoadModules( 'right' ); ?>

</td>

<?php } ?>

Nếu hàm mosCountModules trả về giá trị lớn hơn 1, ô bảng sẽ được hiển thị Nếu không có module được định nghĩa cho vị trí “right” ở trang liên quan này, thì ô sẽ không được hiển thị Đây là một kỹ thuật tốt để tăng chiều ngang màn hình trên các trang nào đó

Dùng các hậu tố lớp (Class Suffixes)

PHẢI LÀM

Lúc này kiểu mẫu cho các Administrator Template vẫn đang hình thành Mong rằng cả hai hệ thống template Site và Administrator sẽ hợp nhất vào một API chung trong tương lai Dù vậy, một số ghi chú được tạo ra ở đây để tham khảo

Hỗ trợ Module

Bạn có thể thêm các module vào các Administrator template trực tiếp với mosLoadAdminModule hoặc trong các nhóm, giống như các site template, với mosLoadAdminiModules Ví dụ:

<tr>

<?php mosLoadAdminModules( 'header', 2 );?>

</div>

</td>

<a hreef="index2.php?option=logout”

style="color: #333333; font-weight: bold">Logout</a>

<strong><?php echo $my->username;?>&nbsp;

</td>

</tr>

</table>

Trang 7

Hàm mosLoadAdmiModule lấy một đối số, tên của module bỏ đi tiền tố “mod_” Ô đầu tiên của bảng ví dụ tải Full Menu module (đó là mod_fullmenu)

Trong ô thứ hai, tất cả các module được gán vào vị trí “header” được tải thông số thứ hai là một thiết lập kiểu (style):

• 0 = Đầu ra liên tục mà các module xuất ra

• 1 = hiển thị mỗi module trong một “Tab”

• 2 = hiển thị mỗi module được bao bọc trong một thẻ tag <div>

Định dạng cho các module “header” được thực hiện hoàn toàn thông qua CSS Ví dụ, kiểu “wrapper1” được định nghĩa như sau:

#wrapper1 div {

border: 0px;

margin: 0px;

margin-left: auto;

margin-right: auto;

padding: 0px 5px 0px 5px;

display: inline;

}

Các module được bao trong các thẻ tag thuần <div> Để hiển thị các module trong một cột bạn có thể thêm một thuộc tính chiều rộng và thay đổi thuộc tính hiển thị thích hợp Các module sau đây sẵn dùng với bản phân phối Joomla

mod_fullmenu

Full Menu module hiển thị menu Administrator DHTML truyền thống Các Content Section và Component được thêm động vào phần thừa của menu được định nghĩa tĩnh

mod_components

Components module hiển thị một danh sách đầy đủ các Component và các mục con Nó hữu dụng nơi nhiều component được cài đặt và sức chứa của các menu DHTML được mở rộng

mod_latest

Lastest Items module hiển thị các mục nội dung mới nhất

mod_mosmsg

Message module hiển thị thông điệp đã gửi trong URL

mod_online

Users Online module hiển thị số lượng thành viên đã log in

mod_pathway

Pathway module hiển thị một đường dẫn Administrator

mod_popular

Most Popular module hiển thị một danh sách các mục bài nhiều “hit” nhất

mod_stats

Menu Stats module trình bày một số thông tin thống kê về các menu

mod_toolbar

Toolbar module hiển thị biểu tượng toolbar

mod_unread

Unread Messages module hiển thị số lượng các thông điệp cá nhân chưa đọc

mod_logged

Logged module hiển thị một danh sách các user đã login hiện thời

Trang 8

mod_quickicon

Quick Icon module hiển thị một mảng các biểu thượng shortcut

The Control Panel

Control Panel cho Administrator là một file riêng biệt, cpanel.php, nó được bao gồm trong template Nó là một file riêng biệt để cho phép tùy biến vùng này theo các site khác nhau và các user thích có nhu cầu khác biệt cho những phần giá trị của màn hình cố định File Control Panel không cần được bao gồm nhưng nếu nó được bao gồm thì nó sẽ hiển thị một số Administrator Module được publish trong vị trí “cpanel” File

cpanel.php có thể chỉ đơn giản như ví dụ dưới đây:

<?php

/**

* @version $ Id: cpanel.php,v 1.3 2004/08/12 08:29:21 rcastley Exp $

* @package Joomla

* @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see LICENSE.php

* Joomla! is free software and parts of it may contain or be derived from the

* GNU General Public License or other free or open source software licenses

* See COPYRIGHT.php for copyright notices and details

*/

/** ensure this file is being included by a parent file */

defined( '_VALID_MOS' ) or die( 'Direct Access to this location is not allowed.'

);

?>

<tableclass="adminform">

<tr>

<?php mosLoadAdminModules( 'cpanel', 1 ); ?>

</td>

</tr>

</table>

File tham chiếu hàm và Tham chiếu hàm

Các hàm sau đây đang sẵn dùng cho các nhà phát triển template

mosLoadComponents

Cú pháp:

Tải một component Ví dụ “banners” Không bao gồm tiền tố “com_”

mosCountModules

Cú pháp:

Đếm sô lượng module có thể hiển thị trên trang hiện tại trong vị trí “position_name”

mosLoadModules

Cú pháp:

mosLoadModules( $position_name [, $style] )

Hiển thị tất cả các module được gán vào vị trí “pssition_name” cho trong hiện tại Đối số “style” là tùy chọn nhưng có thể là:

Trang 9

● 0 = (hiển thị mặc định) Các Module được hiển thị mặc định trong một cột Sau đây hiển thị một ví dụ đầu ra:

<! Individual module >

<tr>

<th valign="top">Module Title</th>

</tr>

<tr>

<td>

</td>

</tr>

</table>

<! Individual module end >

● 1 = Các module được hiển thị theo hàng ngang Mỗi module được xuất ra trong một ô của bảng bao bọc sau đây hiển thị một ví dụ xuất ra:

<! Module wrapper >

<tr>

<th valign="top">Module Title</th>

</tr>

<tr>

<td> Module output </td>

</tr>

</table>

</td>

<! the next module >

</td>

</tr>

</table>

● -1 = Các module được hiển thị như một hàng xuất ra và khong có các tiêu đề Sau dây hiển thị một ví dụ xuất ra:

Module 1 OutputModule 2 OutputModule 3 Output

● -2 =Các mudule được hiển thị trong định dạng X-Joomla Sau đây hiển thị một ví dụ của đầu ra:

<h3>Module Title</h3>

Module output

</div>

● -3 = Các mudule được hiển thị trong một định dạng cho phép, ví dụ, các góc tròn co dãn được Tùy chọn này được giới thiệu trong Mambo 4.5.2.1

Trang 10

<div>

<h3>Module Title</h3>

Module output

</div>

Chú ý trong tất cả cá trường hợp một lớp tùy chọn “suffix” có thể được áp dụng thông qua các thông số module

mosShowHead

Cú pháp:

<?php mosShowHead(); ?>

Tập hợp nhiều thẻ tag head bao gồm thẻ tag title và nhiều thẻ tag meta

mosMainBody

Cú pháp:

<?php mosMainBody(); ?>

Bao gồm đầu ra của component được quyết định bằng giá trị tùy chọn trong URL

Template Standards

Các tiêu chuẩn (NHÁP)

Nhận dạng ngôn ngữ trong thẻ tag Head

Yếu tố HTML phải bao gồm thuộc tính lang (ngôn ngữ)

<head>

Ghi chú: từ Joomla 1.1 trở đi nó sẽ có hiệu lựu để dùng $_LANG->isoCode() thể hiện của tham chiếu _LANGUAGE.:

Cung cấp một tóm tắt các bảng

Yếu tố TABLE nên bao gồm thuộc tính tóm tắt để diễn tả cấu trúc và mục đích của nó

<table summary="Hits on news compared to help">

<caption>Hits on news compared to help</caption>

<! table cells here >

</table>

Dùng thuộc tính tóm tắt cho các bảng dàn trang là tùy nhà thiết kế nhưng nói cung không được khuyến khích, tham khảo thêm:

Văn bản liên kết

Tạo đoạn văn bản liên kết khi chúng la số liệu trong ngữ cảnh và cũng phải chắc chắn rằng các địa chỉ liên

Tiêu đề	Document On Template Joomla Design Ppt
Thể loại	Tutorial

Định dạng
Số trang	11
Dung lượng	187,06 KB