Với những bạn mới chập chững tự thiết kế Web cho riêng mình bằng Joomla việc tạo cho mình một mẫu trang Web riêng mang màu sắc cá nhân để có thể sử dụng nhiều lần mà không phụ thuộc vào các mẫu trang web của nhà cung cấp là việc cần thiết. Tài liệu sẽ cung cấp cho các bạn từng bước chi tiết, dễ hiểu và dễ thực hành để bạn có thể tự tay mình tạo ra các template joomla ưng ý theo ý mình.
Trang 2Thiết kế Template Joomla (Phần 1)
Thứ ba, 18 Tháng 9 2012 14:20 | Viết bởi Thiet ke hay - Công ty thiết kế website chuyên nghiệp
Phần 1: Mở đầu
Trước khi bắt đầu cho một serial bài viết trao đổi về một vấn đề mà rất nhiều người chúng ta quan tâm Thiết kế Template cho Joomla chúng ta hãy có một vài giới thiệu sơ qua lại về khái niệm này Nó dành cho những bạn chưa biết và có nhu cầu tìm hiểu, nó dành cho những người có tâm huyết và có mong
muốn, nó dành cho cộng đồng có cùng sở thích, để chúng ta bước vào hành trình dài Làm chủ Joomla với
rất nhiều những khó khăn sau này Tuy nhiên không gì là không thể, chỉ cần chúng ta có đam mê!
1 Joomla là gì?
- Joomla là một hệ quản trị nội dung mã nguồn mở
- Hệ quản trị nội dung (CMS - Content Management System) là hệ thống dùng để tổ chức và tạo môi trường cộng tác thuận lợi nhằm mục đích xây dựng một hệ thống tài liệu và các loại nội dung khác một cách thống nhất
- Mã nguồn mở là mã nguồn được công bố và sử dụng một giấy phép mở Giấy phép này cho phép bất
cứ ai cũng có thể nghiên cứu, thay đổi và cải tiến phần mềm, và phân phối phần mềm, thậm trí thương mại hoá sản phẩm của mình
2 Template Joomla
- Joomla là hệ thống quản trị nội dung có thể dễ dàng thay đổi các chức năng cũng như giao diện người dùng Mỗi một người dùng có một sở thích và quan điểm khác nhau về không gian, cách bày bố nơi làm việc, cách sử dụng màu sắc, các hiệu ứng, điều đó sinh ra việc giao diện cũng như các chức năng của Joomla được thay đổi liên tục nhằm đáp ứng nhu cầu và sự đòi hỏi của con người Mỗi một sự thay đổi đó được gọi là một Template của Joomla Và đương nhiên là Joomla có nhiều Template theo thị hiếu, nhu cầu của người dùng
- Một gói Template Joomla gồm các thành phần chính:
+ Photoshop CS4/5 hoặc dùng GIMP 2.6 nếu bạn không có chi phí mua phần mềm Photoshop
+ Textual Template design (Bạn có thể dùng phần mềm Crimsom Editor để thiết kế textual nếu kinh phí cho dự án không cho phép mua các phần mềm nổi tiếng hơn)
+ Phần mềm FTP (Nếu không có kinh phí cho dự án để dùng các phần mềm nhưu cuteFTP thì bạn có thể dùng Cyberduck - miễn phí)
+ Graphic Template design (Dreamweaver 5 đây là phần mềm mất phí, nếu không có kinh phí cho dự
án bạn có thể dùng phpDesigner7)
+ Coda (Một phần mềm quản lý và thiết kế khá hay nhưng trả phí, bạn có thể dùng các phần mềm miễn phí khác như phpDesigner cũng được)
Thiết kế Template Joomla (Phần 2)
Phần 2: Các thành phần chính của template Joomla
Trang 3Ở Phần 1: Mở đầu, chúng tôi đã giới thiệu về Template Joomla cũng như các bước chuyển bị để Thiết
kế Template Joomla Phần tiếp theo chúng ta sẽ bắt đầu xây dựng bộ khung bao gồm các thành phần chính cho Joomla Ở phần trước chúng ta đã có nói qua, một Template Joomla bao gồm 5 thành phần sau:
Chức năng và nhiệm vụ của các thành phần:
• templateDetails.xml: File này bao gồm các thẻ meta khai báo thông tin về template, được sử dụng
bởi giao diện quản trị của joomla nhằm mục đích khai báo thông tin cho việc cài đặt và bảo trì Những thiết lập được lưu trong file bao gồm một danh sách của mọi file tạo ra template, tác giả và thông tin công
bố, và các thông số sẵn có cho người sử dụng sửa đổi thông qua admincp
• index.php: File này để chứa các câu lệnh xử lý của template, bao gồm việc hiển thị các module và
component Ngoài ra, mọi client-side JavaScript cũng được khai báo tại đây
• css: Nơi lưu trữ các file CSS được sử dụng bởi template Thông thường, file template.css đặt ở đây.
• images: Nơi lưu trữ hầu hết các file hình ảnh được sử dụng bởi template.
• index.html: Trong bất kỳ thư mục nào của website joomla đều có file này, nó có khi không chứa
nội dung nào cả! File này thường dùng để bảo vệ file index.php để người ngoài (nói người ngoài cho lịch
sự thực ra là hacker) không xem được code của file index.php và một số ý đồ đen tối khác của code có thể triển khai trong file này (cái này không bàn nhìu nhá)
Ngoài ra còn một số các file phụ đi kèm có thể có hoặc thiếu cũng không ảnh hưởng gì tới quá trình hoạt động của website như các file icon, file thumbnail, hình ảnh đại diện cho template
Thiết kế Template Joomla (Phần 3)
Các thành phần chính của template Joomla (tiếp theo)
1 Thiết kế file templateDetail.xml
Bước đầu tiên, các bạn hãy tạo một thư mục bất kỳ với tên tuỳ chọn vào thư mục nào đó trên máy tính Giả sử tôi đặt tên là /thietkehay/ sau đó tạo thêm file mới với tên là templateDetails.xml đây là vùng để khai báo các nội dung (gồm các loại file và folder) có trong template của bạn File này có tác dụng là khi cài đặt thì nó sẽ tạo ra trong thư mục templates một folder mang tên template do bạn đặt và giải nén những
gì có trong template của bạn vào thư mục template mới Chú ý là chỉ thành phần được khai báo trong file này mới sẽ có mặt trong thư mục template mới!
Nội dung đầu tiên được đưa vào là những quy định của template như phiên bản, tên template, tác giả, ngày thiết kế, mô tả, dòng bản quyền, và một vài thông tin liên hệ, giới thiệu khác Nó có dạng như sau:
Trang 4Là quy định phiên bản template mà bạn phát hành, các nhà sản xuất khác đặt thế nào kệ họ, mình đặt theo nguyên tắc cảu mình Cái cảm giác đó giống như đặt tên cho một đứa con của mình vậy, nó thực sự rất tự hào, hãnh diện và hạnh phúc (đoán thế thôi chứ đã vợ con gì đâu:))
Ở phiên bản joomla 1.5 thì vùng mô tả phiên bản cho template không phải được bao quanh bởi cặp thẻ Extension mà là cặp Install
Sau khi hoàn thành bước này chúng ta nén folder này lại dưới dạng zip sau đó vào phần quản trị joomla
và install template này như mọi template khác, và ngay lập tức template mang tên chúng ta đặt đã được cài đặt và xuất hiện cả trong administrator lẫn folder chứa template trên host Từ nay chúng ta sẽ làm việc trong thư mục này, hiện giờ trong nó chỉ có 1 file duy nhất xml
Tiếp đến chúng ta tạo một file với tên index.php trong thư mục này và cho một nội dung đơn giản cho
nó ví dụ như đoạn code dưới để xem nó có hoạt động tốt không!
PHP Code:
@author thietkehay
@copyright 2012
echo "Bạn đã cài đặt template thành công";
Chú ý: Các bạn tạo bất kỳ file php nào cũng phải để kiểu mã hoá của nó là utf-8 nếu không sẽ bị lỗi
font Bạn tạo file php xong dùng trình soạn thảo notepad mở nó ra và save as lại, khi save ở bên dưới có mục Encoding bạn chọn là utf-8 thì đó là cách chuyển kiểu mã hoá
Như vậy trong administrator đã có template của chúng ta, chọn nó làm default và chạy thử web
Thiết kế Template Joomla (Phần 4)
Các thành phần chính của template Joomla (tiếp theo)
2 Thiết kế file index.php
File index trong joomla thường rất nhẹ nhàng với các câu lệnh gọi ra thư viện sẵn có do joomla tự định nghĩa, không bao gồm tất cả các code các mớ hỗn độn mà bạn có thể nghĩ ra và nhét hết vào đó như trong ASP hoặc thậm trí là ASP.net
Trước hết là câu lệnh gọi ra nội dung các module, component Hãy thêm nó vào file index.php, câu lệnh này sẽ gọi ra phần nội dung được quy định là sẽ hiển thị ở front page (đó là các bài viết đặc biệt Featured Articles)
PHP Code:
<jdoc:include type="component"/>
Trang 5Bây giờ hãy ra F5 lại trang và xem thay đổi, như vậy website của chúng ta đã có nội dung được lấy từ CSDL chỉ với một câu lệnh rất ngắn gọn và đơn giản.
Bây giờ hãy thêm câu lệnh gọi một module cụ thể lên trên câu lệnh vừa rồi và F5 lại:
PHP Code:
<jdoc:include type="modules" name="position-0" />
PHP Code:
<jdoc:include type="modules" name="position-1" />
Và sau đó F5 xem điều gì xảy ra, câu lệnh trên đã gọi đến nội dung module đứng ở vị trí có tên là position-0
Chú ý: Trong joomla 2.5 thì tên các vị trí không còn là top, left, right, footer, như trong joomla 1.5 nữa mà là các tên position + một số từ 1-15 (không nhớ rõ lắm) và một vị trí debug
Và để cho các module hiển thị gọn gàng và đẹp hơn thì ta phải cần kết hợp các mã html để đưa các câu lệnh php vào cấu trúc của nó Dưới đây là nội dung của file index và một vài thẻ html đơn giản! Mới chỉ cho nó vào một cái khung thôi chứ chưa phân chia rõ ràng gì nhé!
File index.php
PHP Code:
<body>
<jdoc:include type="modules" name="position-1" />
<jdoc:include type="modules" name="position-0" />
<jdoc:include type="component" />
Kết quả
Thiết kế Template Joomla (Phần 5)
Các thành phần chính của template Joomla (tiếp theo)
3 Thiết kế các file /css/
CSS là viết tắt của cụm từ Cascading Style Sheets CSS là một ngôn ngữ giúp người thiết kế web có thể thêm các kiểu giao diện vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách vv ) Bạn có thể tạo ra một style một lần nhưng có thể dùng lại nhiều lần trong các tài liệu website tiếp theo
Trang 6Và bây giờ tạo vào thư mục template vietcanh một folder tên là /css/ sau đó tạo một file mới tên là index.html và một file là template.css
Với file template.css ta sẽ bắt đầu định nghĩa các style cho giao diện template trong file này Chúng ta đang vừa làm vừa đọc tài liệu, chả biết gì cả nên làm thật đơn giản thôi nhé Ví dụ một đoạn code quy định thân trang, thẻ a, thẻ img đơn giản cho website như sau!
Nội dung file template.css
vì thế giao diện trang bây giờ sẽ có màu mà ta quy định Ở file css trên tôi dùng màu trắng cho nền, xanh cho chữ và màu đỏ cho liên kết, liên kết có gạch chân!
Trang 7Các chữ đã được thay đổi màu sắc và style! Như thế là đã biết tạo file css, gọi các lớp từ trong nó vào các thành phần trên trang rồi nhé!
Thiết kế Template Joomla (Phần 6)
Các thành phần chính của template Joomla (tiếp theo)
4 Thiết kế thư mục /images/
Bạn tạo một thư mục mới với tên /images/ trong thư mục thietkehay và copy bức ảnh nào đó làm ảnh nền hoặc lấy bức ảnh có tên là bg.jpg đi kèm trong gói mình share để làm hình nền! Tạo thêm trong folder images 1 file index.html
Bây giờ quay lại file template.css và chỉnh sửa nội dung của nó:
Ở đây nếu ảnh nền của bạn là một bức ảnh có chiều cao thấp thì bạn chọn repeat-y, chiều rộng ngắn thì chọn repeat-x, nếu ảnh nhỏ thì chọn repeat hoặc no-repeat khi ảnh đã có kích thước lớn rồi!
Trang 8Website đã có hình nền!
Các hình ảnh sau của bạn cũng sẽ được lưu trữ trong thư mục images và gọi ra như thế này, chúng ta dang đi tạo dần các thành phần chính cho template
Thiết kế Template Joomla (Phần 7)
Các thành phần chính của template Joomla (tiếp theo)
Một số file index.html có thể có chút nội dung nhỏ nhưng hy hữu lắm mới dùng đến nó và khi nào dùng thì hẵng hay!
Việc tạo hình ảnh đại diện cho template và hình ảnh preview template đó trong phần quản lý của administrator
Cái này bạn copy 2 file ảnh template_preview.png và template_thumbnail.png vào thư mục gốc template /thietkehay
Sau đó thêm vào file templateDetails.xml thẻ và thêm 2 ảnh này vào
Trang 9Và đây là kết quả, trông nó chuyên nghiệp hẳn, không kém các tem khác là mấy, mỗi tội chưa có gì bên trong :)
- Chú ý một điều là bạn cần đặt tên 2 hình ảnh này theo đúng như tên bên trên vì nó quy định là tên theo hệ thống! Chỗ này chỉ cần chèn 2 hình ảnh với tên như thế là ok và không cần thay đổi gì nhiều, hệ thống mặc định sẽ tự gọi những bức ảnh có tên như thế ra cho template tương ứng!
Ngoài ra còn một chú ý nữa mà các bạn thường xuyên phải làm việc này đó là khai báo các folder cũng như file ở thư mục template của bạn vào file templateDetails.xml, với các folder thì bạn đặt tên folder vào trong cặp thẻ , với các file thì các bạn đặt vào trong cặp thẻ
Vừa rồi ta tạo thêm file index.php, folder /images/ và folder /css/ thì file templateDetails.xml của chúng
ta sẽ như sau:
Trang 10Mục đích của việc này là gì vậy? Đó là để khi hoàn thiện template, chúng ta zip template lại và lúc chúng ta cài đặt template này vào một website joomla nào đó thì nó sẽ đưa tất cả các file cùng với folder trong template đó lên thư mục template của web, nếu không thì nó sẽ không đưa các file đó lên dù ta đã zip tất cả trong một gói!
Thiết kế Template Joomla (Phần 8)
Thiết kế Css, Layout cho website Joomla
Ở phần trước chúng ta đã làm quen một chút tới việc hiển thị và thiết kế giao diện cho joomla, ở phần này chúng ta sẽ đi sâu hơn vào thiết kế layout cho joomla!
Như các bạn đã biết, phiên bản joomla 2.5 khác biệt khá nhiều so với phiên bản 1.5 ở bố cục giao diện,
nó không còn đặt tên theo tên vị trí mà ta nhìn thấy trên website như trái, phải, trên, dưới Có 16 vị trí và đặt tên theo thứ tự từ position-0 đến position 15 và một vị trí debug! Để làm việc nhanh chóng với nó thì cái này bạn phải tự nhớ thôi! Dưới đây là hình ảnh những vị trí chính của joomla 2.5
Chú ý một điều là tên vị trí là position-1 và không khoảng trắng ở giữa phải có dấu - và sau nó là một con số!
1 Thiết kế file Css cho website Joomla
Trang 11Bạn có thể định nghĩa style một lần nhưng có thể dùng lại nhiều lần trong các tài liệu khác Ví dụ như nếu bạn muốn hiển thị một bức ảnh trong website với màu khung màu xanh, đường viền bức ảnh là đường
kẻ liền thì bạn có thể định nghĩa khung đó thành một style Và sau đó khi bạn muốn các khung ảnh khác cũng có kiểu dáng như vậy thì bạn chỉ việc gọi style mà bạn đã định nghĩa để sử dụng lại lần nữa CSS giúp cho ta tiết kiệm được rất nhiều thời gian để lập trình code, không phải gõ lại những đoạn code trùng lặp và quan trọng hơn cả nó giúp cho website của chúng ta nhẹ nhàng, gọn gàng và việc kiểm soát cũng như quản lý trở nên dễ dàng hơn! Ngoài ra CSS còn làm cho ta có thể tạo ra một website chuyên nghiệp
width: 85%;/*Chiều rộng toàn trang là 85%*/
margin: 10px auto;/*Toàn site sẽ căn với mép trên cùng 10px, còn lại tự động*/
background-color:
#fff; /*Màu nền cho toàn trang, bạn có thể dùng 3 ký tự đầu cho loại màu full đen, hoặc full trắng, */color: #333;
border: 1px solid gray;
line-height: 150%;/*Chiều cao của một dòng sẽ cao thêm 50%*/
}
#top /*Định nhĩa các thuộc tính cho các thành phần khi đưa vào top*/
{
padding: 5em; /*Căn lề trái*/
background-color: #ddd; /*Màu nền của top*/
border-bottom: 1px solid gray;/*Viền dưới của top, độ dày 1px, kiểu viền là đường thẳng có màu gray*/}
#top h1 /*Cái này có nghĩa là trong top sẽ có thuộc tính chữ to nhất và thêm các thuộc tính ben dưới*/{
padding: 0; /*Căn lề trái*/
Trang 12Ngoài ra các bạn cũng cần tự tìm hiểu thêm chút về cấu trúc của css!
2 Thiết kế layout cho website joomla
Các bạn sửa nội dung file index theo như sau:
Trang 13Các giải thích về nội dung và chức năng của các câu lệnh mình có ghi luôn hướng dẫn bên cạnh, các bạn có thể đọc code và đọc luôn hướng dẫn.
Ngoài ra các bạn cũng cần tự tìm hiểu thêm chút về cấu trúc của html!
Thiết kế Template Joomla (Phần 9)
Thiết kế Css, Layout cho website Joomla (tt)
3 Thiết kế giao diện đơn giản cho template
Ở phần trước chúng ta đã học qua cách tạo css, và layout cho template, hôm nay chúng ta sẽ nâng cao hơn một chút về css và thiết kế một giao diện cho joomla bao gồm 4 thành phần: Banner, menu left, menu right, content và footer, trong footer chúng ta sẽ thiết kế 3 làm 3 phần để gọi được 3 module vào đó
Trước hết các bạn sẽ tạo một file position.css nhằm định nghĩa một vài lớp cho việc hiển thị các module vào các position, file layout.css chỉ để định nghĩa style cho toàn trang thôi nên không viết thêm nội dung vào file đó nữa, các bạn copy file image fruits.jpg vào thư mục /images/ để làm logo cho template!
Các bạn tạo file position.css với nội dung như sau:
PHP Code: