Tự Thiết kế Template cho Web Joomla

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.

Thiế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: + File TemplateDetails.xml + File Index.php + Các file /css/ + Các file /images/ + File index.html 3. Công cụ thiết kế - Trình duyệt fire fox và cài đặt thêm các thành phần mở rộng sau, tìm kiếm và cài đặt thì nhờ anh google nhé! + Firebug + Measurelt + Color Picker + Web Developer Toolbar - Các phần mềm cần thiết + 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 Ở 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: File TemplateDetails.xml File Index.php Các file /css/ Các file /images/ File index.html 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: Là 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"/> Bâ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. Có 3 cách để sử dụng CSS. 1. Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style Đoạn text cần in đậm, gạch chân, màu đỏ 2. Đặt CSS ở đầu trang web để áp dụng kiểu dáng cho một mình trang ấy PHP Code: Và 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! Cá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! Website đã 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) 5. Các file index.html Như đã nói:Trong bất kỳ thư mục nào của website joomla đều có file index.html, 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 mũ đen hoặc hacker có mặt nhưng bịt mặt lại hay còn gọi là các hacker bịt mặt) 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á). 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. Và đâ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: Mụ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 [...]... mở Joomla 1 Đưa từ khoá vào Your Site Name Các bạn hay dễ bị cám dỗ và nhồi nhét hàng loạt các từ khoá bạn mong muốn đạt thứ hạng cao trong các công cụ tìm kiếm, điều này không tốt cho website của bạn khi bạn dùng mô tả rằng ” website, thiết kế web, thiết kế website, thiết kế web net, Công ty thiết kế web, Công ty làm web, Công ty thiết kế website 2 Đừng cài đặt dữ liệu mẫu khi bạn thiết lập một website... thiets kế một website như thế nào và cũng có khá nhiều người đã biết về lập trình nhưng chưa hề biết đến việc lập trình một website Bạn cũng là một người trong số đó và đang mù mờ về các kiến thức website? Sau khi đọc bài viết về quá trình tự học thiết kế website này, hi vọng sẽ giúp ích được cho các bạn đang muốn tìm hiểu về thiết kế website Quá trình tự học thiết kế website Nếu bạn tìm được một website... 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: Cá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... của bạn và sẽ bắt đầu index tiếp website bạn 10 Hãy tự tin Joomla là một phần mềm mã nguồn mở CMS cho phép bạn dễ dàng tạo ra nhiều website có chất lược cao và là công cụ đắc lực cho kế hoạch seo của bạn Nếu hiểu rõ hơn về joomla và có thời gian nghiên cứu bạn sẽ thấy joomla là công cụ SEO tuyệt vời 10 thủ thuật bổ trợ việc thiết kế website Hiện nay, việc thiết kế Web ngày càng trở nên thuận tiện và... position tương ứng và ở position đó có menu nào đứng ở đó thì nó sẽ hiện ra Kết quả cho phần tutorial này như hình dưới! Thiết kế Template Joomla (Phần 10) Thiết kế Css, Layout cho website Joomla (tt) 4 Một số hàm thường gặp trong joomla, thêm vị trí quảng cáo cho template Ở bài trước chúng ta đã tạo xong một giao diện trang web đơn giản gồm top, bottom, left, right, và content dựa trên việc định nghĩa... và tại thẻ div khai báo cho banner top ta thêm đoạn code sau vào bên dưới: Điều này có nghĩa là ta gọi module nào ở vị trí ads và vị trí này có style id là ads trong file css! Thiết kế Template Joomla (Phần 11) Thiết kế Css, Layout cho website Joomla (tt) 5 Hoàn thiện file templateDetails.ml và thêm icon cho template Để template của bạn có những... 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 đó... cách để SEO website Joomla hiệu quả Tối ưu website được xem là khâu quan trọng và phức tạp nhất trong quá trình làm SEO cho một website Tuy nhiên đó là bước không thể bỏ qua nếu như website của bạn muốn có nhiều từ khóa quan trọng nằm trên top trong danh sách kết quả tìm kiếm của Google Ở đây chúng tôi sẽ cung cấp cho các bạn 10 cách để SEO website Joomla hiệu quả, và để cải thiện thứ hang website của... liên kết text link, các công cụ tìm kiếm sẽ đánh giá cao sự chăm chỉ của bạn 4 Tắt liên kết PDF Các liên kết chứa file PDF có kết quả xếp hạng cao hơn các trang chính, nhưng có bất lợi là các liên kết PDF này lại không có liên kết đơn, người dùng không thể xem tiếp vì không có liên kết để di chuyển đến các phần còn lại của website, Vì vậy hãy tắt hiển thị PDF đi 5 Bật bộ nhớ cache joomla Để làm cho website... hóc búa mà mình chưa từng gặp để giải quyết Dần dần bạn sẽ có nhiều kinh nghiệm cho chính mình Các yếu tố cần thiết để tự học thiết kế website Tóm lại, để tự học thiết kế website thì yếu tố cần là bạn biết được được các thuật toán được dùng trong lập trình, đã có tư duy lập trình, cơ bản về cơ sở dữ liệu và đã biết sử dụng website Bạn có thể tìm hiểu về html trước, sau đó là PHP (nếu bạn đã biết về C) . được) Thiết kế Template Joomla (Phần 2) Phần 2: Các thành phần chính của template Joomla Ở Phần 1: Mở đầu, chúng tôi đã giới thiệu về Template Joomla cũng. 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