“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.

com/joomlashine | Facebook http://www.facebook.com/joomlashine

Những người thực hiện
Người viết

Đào Ngọc Ánh

Bùi Thị Mơ

Biên tập viên

Nguyễn Thị Thanh Huyền

Bùi Anh Tuấn

Bùi Huy Thắng

Thiết kế đồ họa

Hồ Huy Tùng

Lưu Minh Sơn

Dịch giả

Tô Nam Phong Ngày xuất bản: Tháng 7 năm 2013 Ấn bản thứ ba.

2

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

3

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Nội dung
Những người thực hiện ................................................................................................................................... 2 Nội dung ............................................................................................................................................................... 4 Tính năng của Joomla! 3.x .............................................................................................................................. 6 Bước 1: Làm quen với Joomla! CMS ........................................................................................................... 8
Vậy Joomla! CMS là gì? ............................................................................................................................................... 8 Những thành phần chính của Joomla? ................................................................................................................. 12

Bước 2: Cài đặt Joomla! 3.x trên localhost .............................................................................................. 30
Cài đặt XAMPP .............................................................................................................................................................. 31 Cài đặt Joomla! ............................................................................................................................................................. 35

Bước 3: Tạo nội dung cho website Joomla ............................................................................................. 37
Chuẩn bị cấu trúc nội dung ....................................................................................................................................... 37 Tạo nội dung .................................................................................................................................................................. 38 Quản lý nội dung của bạn với JSN PowerAdmin ................................................................................................ 54 Chỉnh sửa bài viết đẹp hơn ....................................................................................................................................... 55

Bước 4: Tùy chỉnh giao diện website của bạn với Joomla! template ............................................... 81
Joomla! template là gì?............................................................................................................................................... 81 Chọn Joomla! template ............................................................................................................................................... 83 Cài đặt Joomla! template ............................................................................................................................................ 85

Bước 5: Sắp xếp modules ở các vị trí ........................................................................................................ 90
Joomla! module và Joomla! position là gì? ......................................................................................................... 90 Thêm mới một module.................................................................................................................................................. 94

Bước 6: Mở rộng chức năng của website với Joomla! extensions ................................................ 100
Làm việc với thành phần mở rộng (Extensions) mặc định “Contacts” ...................................................... 101 Thêm mới Extension ................................................................................................................................................... 112

Bước 7: Quản lý website với JSN PowerAdmin .................................................................................... 117
Quản lý website Joomla! với Site Manager ......................................................................................................... 120 Truy cập nhanh các mục bất kỳ với Spotlight Search ..................................................................................... 133 Quản lý các kiểu template với Template Style Manager .................................................................................. 135 Những tính năng khác .............................................................................................................................................. 139 Cấu hình JSN Power Admin .................................................................................................................................... 143

Kết luận............................................................................................................................................................. 146 Tham khảo ....................................................................................................................................................... 147

4

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Dịch giả chú thích: Một số từ hay cụm từ được để nguyên không dịch, vì nếu dịch sang tiếng Việt có thể sẽ khiến bạn thấy khó hiểu hơn.

5

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tính năng của Joomla! 3.x
Joomla! 3.x là phiên bản mới nhất của Joomla! Phiên bản mới này bao gồm nhiều điều thú vị với rất nhiều cải tiến mới mẻ. Bạn có thể lướt qua 6 tính năng tuyệt vời của Joomla! 3.x mang lại trong “Infographic” bên dưới. Để tìm hiểu thêm thông tin về các tính năng của Joomla! 3.x, bạn có thể truy cập http://www.joomla.org/3/en.

6 tính năng tuyệt vời của Joomla! 3.x

6

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Dịch giả chú thích: Responsive Layout: Trong thiết kế Web (chính xác là front-end development) thì Responsive Layout chỉ là một phần của Responsive Web Design. Vậy Responsive Layout là gì? Về cơ bản thì Responsive Layout là một cấu trúc cơ bản của một website nhưng đảm bảo hiển thị được tốt trên tất cả các loại màn hình khác nhau (có thể là màn hình Desktop, màn hình Tablet (Ipad, Kindle) hay các thiết bị di động như iphone, android, etc) Twitter Bootstrap (Bootstrap Framework) được tạo và phát triển bởi Twitter gồm các mã CSS + HTML cơ bản cho typography, forms, buttons, tables, grids, navigation, và nhiều thành phần khác của website. Xem trang chủ: http://twitter.github.io/bootstrap/ hay trang Showcases: http://builtwithbootstrap.com

7

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 1: Làm quen với Joomla! CMS
Trước đây nếu bạn muốn xây dựng một website, chỉ có một sự lựa chọn là thuê một công ty thiết kế web chuyên nghiệp làm cho bạn và sau đó bạn hoàn toàn phụ thuộc vào họ để duy trì và cập nhật website này. Nhưng bây giờ, với sự phát triển mạnh mẽ của phần mềm mã nguồn mở, bạn có thể tự xây dựng một website dễ dàng bằng cách sử dụng một hệ quản trị nội dung CMS (Content Management System). Có nhiều hệ quản trị CMS để bạn lựa chọn, nhưng thích hợp nhất để xây dựng một website trung bình hoặc nhỏ là Joomla! Trong phần này bạn sẽ nắm được những thông tin sơ lược về Joomla! và các thành phần của nó.

Vậy Joomla! CMS là gì?

Joomla! logo Joomla! CMS là một hệ quản trị nội dung mã nguồn mở cho phép bạn tạo và quản lý các website. Trển các website này, bạn có thể chỉnh sửa: 1. Nội dụng website như chữ, hình ảnh, videos, v.v. 2. Giao diện website bằng cách dùng các template (Joomla Templates) 3. Chức năng website bằng cách dùng các extension (Joomla Extensions) Hệ thống website Joomla! gồm hai phần : Front-end (Phần Mặt trước - những gì người dùng chung thấy) và Back-end (Phần mặt sau - những gì mà người quản trị thấy).

8

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Phần front-end
Front-end là những gì mà mọi người xem được khi họ truy cập website của bạn. Thông thường một mẫu thiết kế bao gồm những mục cơ bản như logo, thanh danh mục (menu bar), cột bên trái, cột bên phải (side column) và khối văn bản.

Phần front-end của website

9

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Xem một bài viết tại front-end

Phần back-end
Phần back-end là vùng quản trị - Nơi mà bạn có thể điều chỉnh website của bạn. Những thành viên có quyền Administrator có thể truy cập vào đây thông qua một trang đăng nhập đặc biệt.

Phần back-end của Joomla!

10

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chỉnh sửa một bài viết trong back-end

11

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Những thành phần chính của Joomla?
Bây giờ, hãy khám phá những thành phần chính của Joomla!

Nội dung
Trong Joomla!, nội dung bao gồm những bài viết, chuyên mục hay media. Bài viết (Articles) Bài viết là khối nội dung chính của một website Joomla!. Trong phần front-end bạn có thể dễ dàng nhận ra một bài viết là một đoạn văn bản có hoặc không có hình ảnh, được trình trong vùng nội dung chính.

Bài viết “Getting started” Tại back-end, các bài viết được quản lý tromg danh mục con “Article Manager”. Bạn có thể truy cập vào đây thông qua danh mục “Content” => “Article Manager”.

12

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Phần “Article Manager” Tại đây bạn có thể tạo bài viết mới, chỉnh sửa chúng, chọn hiển thị hay ẩn bài viết, v.v. Chuyên mục (Categories) Chuyên mục giúp bạn tổ chức các bài viết tiện lợi và khoa học hơn. Bạn có thể hình dung các chuyên mục giống như là những thư mục (folders) trong máy tính bao gồm những tập tin (files). Ví dụ, một chuyên mục “Sản phẩm” có thể chứa tất cả các bài viết về sản phẩm của bạn. Hay, một chuyên mục “Về chúng tôi” có thể chứa tất cả các bài viết có nội dung như “Giới thiệu công ty”, “Tầm nhìn & Sứ Mệnh”, “Hội đồng quản trị”, v.v. Trong back-end, chuyên mục được quản lý trong danh mục con “Category Manager”. Bạn có thể truy cập vào đây thông qua danh mục “Content” => “Category Manager”.

Phần “Category Manager” 13

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Tại đây, bạn có thể tạo chuyên mục mới, chỉnh sửa chúng, chọn hiển thị hay ẩn chuyên mục, v.v. Thẻ bài viết (Tags) Các thẻ bài viết (Tags) là các từ hoặc cụm từ được gán vào một đoạn thông tin (bài viết, blog post...). Nó mô tả nội dung của mục đó. Ví dụ, bạn có thể thêm các thẻ như “Joomla! templates” và “Joomla! extensions” vào bài viết “Getting Started with Joomla!”. Các mục có những thẻ bài viết giống nhau sẽ được nhóm lại cùng nhau, vì vậy mọi người có thể tìm kiếm chúng dễ dàng hơn. Bạn có thể tạo một danh mục (hay một module) để hiển thị tất cả các thẻ bạn đã tạo. Trong phần quản trị back-end, các thẻ bài viết được đặt trong bảng chỉnh sửa bài viết (Article Manager). Bạn vào phần “Content” => “Article Manager”, sau đó đi tới các bài viết riêng biệt để gán thẻ bài viết.

Chức năng Thẻ bài viết (“Tag”) giúp bạn gán từ khóa vào các mục riêng biệt Để quản lý tất cả thẻ bài viết của bạn, bạn có thể truy cập vào “Component” => “Tags”

14

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Vào “Components” -> “Tags” để quản lý thẻ bài viết của bạn

15

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Media Hiểu theo cách đơn giản, media là những thứ không phải văn bản mà bạn có thể đưa vào trong phần nội dung. Nó không chỉ là hình ảnh, mà còn có thể là các videos hay những thành phần “đa phương tiện” khác. Media được quản lý bằng danh mục con “Media Manager”. Bạn có thể truy cập tới đây thông qua danh mục “Content” => “Media Manager”.

Phần quản lý “Media Manager” Tại đây, bạn có thể tạo các thư mục media mới, đưa các tập tin lên, v.v. Chúng ta sẽ thảo luận chi tiết cách sử dụng Media Manager nhiều hơn trong chương “Bước 3: Tạo nội dung cho website Joomla”.

16

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Danh mục (Menus)
Danh mục giúp khách truy cập website có thể di chuyển tới các trang khác nhau trong website của bạn. Bạn có thể tạo nhiểu danh mục và cấu hình chúng hiển thị ở các vị trí khác nhau trong website, ví dụ trên đầu trang hoặc bên phải, bên trái website.

Một danh mục trên webiste Trong ví dụ trên, người quản trị tạo một danh mục là “Home” với nhiều danh mục con bên trong nó như “Getting Started”, “Using Joomla!”, etc. Để quản lý danh mục, bạn truy cập vào phần quản trị danh mục qua “Menus” => “Menu Manager”.

17

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Mục “Menu Manager” trong phần quản trị Joomla! Trong “Menu Manager” bạn có thể tạo danh mục và các danh mục con để liên kết các thành phần trên website. Khi đã tạo xong một danh mục, bạn tạo một module danh mục để hiển thị nó trên front-end.

18

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thành viên (Users)
Joomla! cho phép nhiều thành viên đăng ký trong website của bạn. Tất cả những thành viên này được sắp xếp vào từng nhóm với các quyền truy cập khác nhau. Mặc định có những nhóm thành viên như “Author”, “Editor”, “Publisher”, etc. Ví dụ:   Thành viên trong nhóm“Administrator” có thể truy cập cả back-end và front-end. Thành viên trong nhóm “Registered” chỉ có thể truy cập vào phần front-end. Họcó thể quản lý các thành viên, các nhóm thành viên và các quyền truy cập tương ứng trong danh mục “Users” => “User Manager”.

Danh mục “Users” trong back-end

19

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Các thành phần mở rộng (Extensions)
Các thành phần mở rộng của Joomla! (extentions) là những phần mềm đặc biệt được viết để để tích hợp vào Joomla! nhằm tăng cường cũng như mở rộng chức năng cho website. Ví dụ, bạn cần cài đặt extension.nếu bạn muốn có một slideshow hình ảnh, bộ sưu tập video, hay một biểu mẫu liên hệ với các chức năng nâng phong phú hơn. Mặc định gói cài Joomla! đã cung cấp cho bạn khá nhiều loại Extensions cho những nhu cầu cơ bản. Nếu bạn muốn sử dụng nhiều extension hơn, bạn có thể truy cập vào trang Joomla! Extension Directory. Đây là trang chính thức của Joomla! Extention được quản lý bởi một đội ngũ nòng côt của Joomla!.

Joomla! Extensions Directory Có 5 loại extensions cơ bản, đó là: components, modules, plug-ins, templates và languages. Mỗi một loại extensions này đều xử lý một chức năng cụ thể.

20

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Components Component là loại extension phức tạp nhất. Đây được xem như một ứng dụng thực hiện một số nhiệm vụ nhất định và hiển thị những nội dung đặc biệt trên website của bạn . Như đã đề cập ở trên, một bộ sưu tập video là một ví dụ của một component. Nó cũng có thể là một hệ thống mua bán trực tuyến , hệ thống đặt phòng trực tuyến, diễn đàn, v.v.

Component “Newsfeeds” tại front-end Nội dung được tạo ra bởi một component và được hiển thị trong vùng nội dung chính. Trong ví dụ ở trên, bạn có thể nhìn thấy một danh sách nguồn cấp dữ liệu (feed) được tạo ra bởi component “Newsfeeds”. Tất cả các components nằm trong phần “Components” của Joomla!

21

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Danh mục “Components” trong phần back-end Mặc định, gói Joomla! cung cấp các components: “Banners”, “Contacts”, “Messaging”, “News Feeds”, “Redirect”, “Search”, “Smart Search”, “Tags” và “Web links”.

22

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Modules Modules cũng đóng vai trò như những components nhưng ở quy mô nhỏ hơn. Modules thực hiện những chức năng đơn giản và hiển thị nội dụng như một khổi thông tin (block) nhỏ ở trên website.

Những modules hiển thị trong front-end Một số modules thường thấy là module tìm kiếm (search box), module đăng nhập (login form), module danh mục (menu module), module hiển thị thông tin cuối website (footer copyright), v.v. Trong nhiều trường hợp, các modules làm việc nhằm liên kết với các components để hiển thị nội dung. Ví dụ, ta sử dụng môt component mua bán trực tuyến để quản lý sản phẩm và một module để hiển thị những sản phẩm mới trên 23

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine website. Tất cả các modules được quản lý thông qua “Extensions” => “Module Manager”.

Danh mục con quản lý “Module Manager” trong phần back-end

24

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Templates Template điểu khiển việc thiết kế đồ họa trên website của bạn. Nó quyết định bố cục website, màu sắc, kiểu chữ cùng nhiều thành phần khác nhằm tạo nên nét riêng cho website của bạn. Thông thường, một template bao gồm 3 thành phần sau:  Các yếu tố đồ họa tĩnh như ảnh nền, các chi tiết trang trí , logo, v.v.  Vùng nội dung chính trình bày dữ liệu được tạo ra bởi các components.  Nhiều vị trí module để hiển thị nội dung được trình bày bởi các modules, trong những vị trí nhất định.

Ví dụ ảnh nền (background), vị trí của module (module positions) và phần nội dung chính (body)

25

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Trong back-end, bạn có thể quản lý templates thông qua “Extensions” => “Template Manager”.

“Template Manager” Mặc định, Joomla! 3.x có sẵn hai front-end template là: “Protostar” và “Beez3”. Ngoài ra có hàng ngàn templates miễn phí cũng như phải trả phí cho bạn lựa chọn. Đây là một danh sách các template: top 10 Joomla! 3.0 templates for users.

26

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Dưới đây là một vài ví dụ về Joomla template:

JSN Pixel

JSN Boot 27

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Plug-ins Plug-ins được thiết kế để hiển thị nội dung bên trong các component và module. Plugin cũng có thể thực hiện một số công việc “ngầm” (một hành động hay một thao tác) trong những thời điểm nhất định khi tải website. Bạn có thể hiểu rằng plug-ins giúp tương tác với hệ thống Joomla! linh hoạt hơn.

Hai plugins“Voting” và “Read more” trong front-end Ví dụ, ở hình trên bạn có thể nhìn thấy plug-in Đánh giá (“Voting”) và plug-in Đọc thêm (“Read more…”) trong những bài viết. Các plug-ins được quản lý qua “Extensions” => “Plug-in Manager”.

“Plug-in Manager” Trong gói cài đặt Joomla! 3.x, plug-ins được chia vào trong 11 chuyên mục là: “authentication”, “captcha”, “content”, “editor”, “editors-xtd”, “extension”, “finder”, quickicon”, “search”, “system” và “user”.

28

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Languages Gói ngôn ngữ (Languages) cho phép bạn chạy website với nhiều ngôn ngữ khác nhau. Ví dụ, nếu bạn muốn sử dụng tiếng Pháp cho website Joomla! của bạn trong cả hai phần front-end / back-end, bạn chỉ cẩn truy cập vào “Extension Manager” => “Language Manager”. Sau đó nhấn vào nút “Install languages”, chọn French rồi ấn nút “Install”.

“Language Manager” Tất cả các gói ngôn ngữ được cài đặt sẽ hiển thị trong phần “Extensions” => “Language Manager” tại backend.

>>> Bước kế tiếp
Bây giờ bạn đã có được một số kiến thức về Joomla là gì rồi phải không, hãy thực hành luôn nhé. Cài đặt Joomla! 3.x trên localhost và chạy thử nào.

29

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 2: Cài đặt Joomla! 3.x trên localhost
Việc cài đặt Joomla! 3.x trên localhost khá đơn giản; tuy nhiên, nếu đây là lần đầu làm, bạn cần chú ý làm theo các hướng dẫn để cài đặt cho đúng. Đầu tiên, ta cần làm rõ khái niệm “Localhost”. Bạn biết đấy, bất kỳ một website nào cũng cần phải được lưu trữ, sắp xếp trên một web server để hiển thị nội dung đến các users. Thông thường, bạn cần mua một gói hosting từ nhà cung cấp hosting nào đó như Rackspace hay GoDadd y (Ở VN chúng ta có PaVietnam, Hostvn, v.v.). Phụ thuộc vào gói hosting mà bạn chọn, nhà cung cấp hosting sẽ cài đặt một web server cho bạn trên server của họ và cho phép người dùng truy cập đến nó. Một localhost về cơ bản giống với một web server; cái khác ở đây là nó được cài đặt trên máy tính của các bạn. Tuy nhiên, để chạy Joomla!, ngoài web server, bạn còn cần hai thứ quan trong nữa là: Ngôn ngữ thông dịch PHP và Cơ sở dữ liệu MySQL. Nghe thì có vẻ phức tạp nhưng may mắn thay chúng ta có một gói phần mềm là XAMPP đã tích hợp sẵn tất cả những thành phần ở trên. Nào bây giờ hãy cài XAMPP trên máy tính của bạn.

30

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Cài đặt XAMPP
1. Tải gói cài đặt XAMPP tại địa chỉ http://www.apachefriends.org/en/xampp.html 2. Chạy file cài đặt và làm theo từng bước hướng dẫn, tương tự như các phần mềm thông thường khác. 3. Mở “XAMPP Control Panel Application”, chạy “Apache” và “MySQL”.

Bảng điều khiển chính của XAMPP Như vậy, localhost đã được cài đặt trên máy tính của các bạn. Bạn hãy kiểm tra bằng cách gõ địa chỉ: “http://localhost” vào trình duyệt. Giao diện của bạn sẽ xuất hiện như hình bên dưới.

31

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Giao diện của XAMPP cho Windows

32

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 4. Tạo một cơ sở dữ liệu mới trong phpMyAdmin. Từ giao diện của XAMPP, chọn phpMyAdmin để tạo một cơ sở dữ liệu mới.

Chọn “phpMyAdmin”

33

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 5. Tiếp theo, chọn “Database” trong thanh công cụ hiển thị như hình bên dưới

Chọn “Database” 6. Tiếp theo, điền tên cơ sở dữ liệu và nhấn “Create”

Tạo database Bây giờ bạn đã sẵn sang để cài đặt Joomla!. 34

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Cài đặt Joomla!
1. Tải gói cài đặt Joomla! 3.x tại http://www.joomla.org/download.html 2. Tạo một thư mục mới có tên là “Joomla3x” trong thư mục “htdocs” của XAMPP. Thông thường nó sẽ được đặt trong “C:\xampp\htdocs” 3. Giải nén gói cài đặt đã tải về vào trong thư mục “Joomla3x” 4. Gõ vào thanh trình duyệt địa chỉ “http://localhost/Joomla3x” 5. Làm theo các bước cài đặt trong Joomla: a. Bước 1. Cấu hình chung          Select Language: Chọn gói ngôn ngữ cho riêng bạn từ menu sổ xuống (drop-down menu), ví dụ, “English (United States)” Site Name: Điền tên website của bạn Description: Điền thông tin mô tả cho website Site Offline: Chọn trạng thái cho website của bạn khi bạn truy cập site: Chọn “Yes” nếu muốn website “offline” và “No” cho website “online” Admin Email: Điền thông tin địa chỉ email bạn muốn sử dụng cho website Admin Username: Điền mặc định là “admin” Admin Password: Nhập mật khẩu của bạn Confirm Admin Password: Nhập lại mật khẩu của bạn Nhấn “Next” để sang bước 2

b. Bước 2. Cấu hình dữ liệu         Database Type: Chọn MySQLi Host Name: Điền “localhost” Username: Điền “root” Password: Để trống Database Name: Nhập vào tên của cơ sở dữ liệu mà bạn đã tạo trước đó là “Joomla30” Table Prefix: Để mặc định Old Database Process: Nhấn “Backup” để sao lưu các bảng từ việc cài đặt hoặc “Remove” để xóa các bảng Nhấn “Next” để sang bước 3

c. Step 3. Các cấu hình cuối cùng

35

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Finalization: Bạn có thể chọn việc cài đặt dữ liệu mẫu cho website hoặc không bằng cách nhấn vào những lựa chọn tương ứng.   Overview: Trong bước này, bạn sẽ đánh giá lại tổng quan toàn bộ thông tin bạn đã cấu hình trong bước 1. Sau khi kiểm tra, nhấn “Install.” Khi việc cài đặt hoàn tất, bạn chỉ cần nhấn vào nút “Remove installation folder” để hoàn tất quá trình cài đặt. Sau cùng, bạn có thể nhấn vào “Site” để xem trang vừa tạo hoặc nhấn vào “Administrator” để truy cập vùng quản trị dành cho Administrator.

Bây giờ bạn đã cài đặt xong cho mình website Joomla! đầu tiên rồi đó. Không quá khó khăn phải không? Nếu có bất cứ vấn đề gì trong quá trình cài đặt, bạn có thể thử tìm cho mình câu trả lời từ những nguồn sau:  Diễn đàn chính thức của Joomla! Diễn đàn Joomla! là một trong những diễn đàn hỗ trợ sôi động nhất (và thân thiện nhất) trên thế giới, đây cũng là một nơi tuyệt vời để nhận được sự giúp đỡ cũng như gặp gỡ các thành viên Joomla! khác. Có nhiều câu hỏi và câu trả lời được thảo luận tại đây. Bởi vì chủ đề của chúng ta là Cài đặt Joomla! 3.x, vậy bạn có thể tìm kiếm sự giúp đỡ và câu trả lời trong chuyên mục “Installation Joomla! 3.x”.  Dịch vụ hỗ trợ Joomla! (http://joomla.cmshelplive.com/) Đây là website cung cấp cho bạn dạng dịch vụ “Joomla! theo yêu cầu”. Tất nhiên là bạn phải trả tiền cho những dịch vụ rồi, nhưng các vấn đề của bạn sẽ được giải quyết . bởi những chuyên gia Joomla!.  Những nguồn website học Joomla! khác Có nhiều website hữu ích mà bạn có thể sử dụng để tự học về Joomla!, dưới đây là một vài ví dụ: o http://docs.joomla.org/Beginners o http://www.joomlatutorials.com/ o http://www.joomlablogger.net/ o http://www.ostraining.com/

>>> Bước tiếp theo
Cài đặt Joomla! 3.x thành công trên localhost là việc đầu tiên bạn cần làm trước khi bắt đầu với website Joomla! Website của bạn sẵn sang rồi, bây giờ chúng ta tiến hành tạo nội dung cho nó .

36

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 3: Tạo nội dung cho website Joomla
Thành phần quan trọng nhất của mỗi website đó là nội dung. Trong bước này, bạn sẽ: 1. Chuẩn bị cấu trúc nội dung 2. Tạo các chuyên mục và bài viết 3. Tạo một danh mục 4. Quản lý nội dung của bạn với JSN PowerAdmin

Chuẩn bị cấu trúc nội dung
Tạo một nội dung tương tự việc sắp xếp các sản phẩm vào trong một cửa hang tạp hóa vậy. Với Joomla!, các bài viết giống như những sản phẩm, các chuyên mục thì giống như những kệ đựng sản phẩm và danh mục thì giống như lối đi để tìm đến những cái kệ đó . Giả dụ bây giờ bạn có một website bán hàng; cấu trúc của nội dung website có thể hình dung như thế này: 1. About (Giới thiệu) a. About my site (Giới thiệu website) b. How to purchase/order products (Mua hàng thế nào) c. How to make payment (Thanh toán) 2. News (Tin tức) a. Latest news (Tin tức mới nhất) b. Arrivals (Hàng mới về) c. Sale (Hàng giảm giá) d. Coupons (Phiếu giảm giá) e. Promotion (Khuyến mãi) 3. Support (Hỗ trợ) a. Hotline information (Hỗ trợ khách hàng qua điện thoại) b. Online customer services (Hỗ trợ khách hàng trực tuyến) c. Contact us (Liên lạc)

37

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tạo nội dung
Sau khi chuẩn bị cấu trúc nội dung của website trên giấy, bạn có thể tiến hành tạo nội dung đó trong Joomla!. Hãy bắt đầu với việc tạo các chuyên mục .

Các chuyên mục
1. Vào “Content” => “Category Manager” và nhấn “Add New Category”

Thêm một chuyên mục mới 2. Tiếp theo, điền tên chuyên mục là “About” và nhấn “Save & Close” trên thanh công cụ.

Nhập thông tin cho chuyên mục 38

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Sau đó, ban có thể nhìn thấy chuyên mục “About” bạn mới tạo nằm bên trong phần “Category Manager”.

Chuyên mục “About” Bạn có thể tạo tất cả các chuyên mục còn lại theo cách này.

39

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

6 chuyên mục mới đã được tạo Sau khi hoàn tất việc tạo các chuyên mục, hãy tạo các bài viết .

40

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bài viết
Hãy thêm mới một bài viết vào trong chuyên mục “About”. 1. Vào “Content” => “Article Manager” và nhấn “Add New Article”

Thêm mới bài viết 2. Tiếp theo, bạn điền thông tin vào các trường sau:    Title: Nhập vào tiêu đề “About my site”. Category: Chọn chuyên mục “About” trong danh sách. Article text: Nhập nội dung của bài viết. Bây giờ, chúng ta chỉ nhập một bài viết đơn giản với chữ. Tiếp đến trong phần “Chỉnh sửa bài viết đẹp hơn” chúng ta sẽ biết cách tạo các bài viết phức tạp hơn (Với hình ảnh, liên kết, v.v.)

41

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Nếu bạn muốn một bài viết hiển thị ở ngoài trang đầu, bạn đặt thiết lập giá trị tham số “Featured” là “Yes”. Việc này sẽ làm bài viết hiện lên trên trang chủ của website.

Chọn “Yes”để hiển thị bài viết hiện lên trên trang chủ Nếu bạn muốn thêm thẻ bài viết, hãy điền các thẻ đó vào tham số “Tags”.

Thêm thẻ bài viết

42

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 4. Sau đó, nhấn nút “Save & Close” trên thanh công cụ để lưu lại bài viết mới tạo.

Nhấn nút “Save & Close” để lưu bài viết Bây giờ bạn đã có một bài viết mới trong phần “Article Manager”.

Bài viết mới tạo “About my site” Làm tương tự với hai bài viết “How to purchase/order products” và “How to make payment” trong chuyên mục “About my site”. 43

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Ba bài viết mới tạo Bây giờ bạn đã hoàn tất quy trình tạo bài viết, chỉ còn bước cuối cùng là tạo các danh mục với các liên kết đến các bài viết này.

44

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Menus
Trong Joomla!, một danh mục(Menu) là một bộ các liên kết tới các thành phần đã có, như các bài viết bạn vừa tạo chẳng hạn. Tất cả các danh mục trong back-end được đặt trong phần “Menus”. Theo mặc định, một danh mục“Main Menu” được cài đặt sẵn trong Joomla!.

“Main Menu” được trình bày tại front-end Hãy tạo mới một danh mục con trong danh mục “Main Menu”. 1. Nhấn vào “Main Menu” trong phần “Menus” sổ xuống như hình dưới.

45

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Nhấn “Main Menu” 2. Tiếp theo, nhấn vào “New” để tạo mới một danh mục con mới.

Nhấn vào “New” để tạo một danh mục con mới 3. Sau đó, nhấn “Select” để chọn loại danh mục con.

Chọn loại danh mục

46

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 4. Kết quả là môt màn hình pop-up được hiển thị. Bạn có thể tạo liên kết đến nhiều thành phần như “Contacts”, “Articles”, “Smart Search”, “Newfeeds”, v.v. Trong trường hợp này bạn cần tạo một liên kết tới một bài viết, vì vậy hãy nhấn “Single Article”.

Chọn loại danh mục là “Single Article”

47

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 5. Tiếp theo, bạn cần điền thông tin vào trường “Menu Title”, ví dụ“About my site”.

Nhập tiêu đề danh mục con 6. Sau đó, bạn chọn một bài viết mà bạn muốn hiển thị với danh mục đó. Trong phần bên phải ở hình dưới, bạn chọn “Select” để chọn một bài viết.

Chọn nút “Select”

48

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 7. Một màn hình pop-up sẽ hiển thị. Chọn bài viết “About my site”.

Nhấn vào bài viết mà bạn muốn lựa chọn 8. Nhấn “Save & New” để tạo tiếp hai danh mục nữa cho hai bài viết là “How to purchase/order products” và “How to make a payment”.

Nhấn “Save & New”

49

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Sau khi tạo xong những menus này, bạn đã có 3 danh mục con mới.

Có 3 danh mục con mới đã được tạo

50

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thẻ bài viết
Bạn có thể tạo một danh mục hay Module mới để hiển thị thẻ bài viết của bạn.  Tạo một Danh mục thẻ bài viết (Tag Menu): Vào “Menus” => “Menu Manager” => “Add New Menu” sau đó chọn loại “Tags”.

Tạo một menu mới để hiển thị các thẻ bài viết của bạn  Tạo một Module thẻ bài viết (Module Tag): Vào“Module Manager” => “New” => chọn loại “Popular Tags”.

Tạo một module mới để hiển thị các thẻ bài viết

51

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Bây giờ bạn có thể ra ngoài front-end để xem kết quả.

Các danh mục con mới trong Main Menu

52

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Khi bạn nhấn vào mỗi một liên kết thì bạn sẽ thấy một bài viết tương ứng mà bạn đã gán trước đó.

Bài viết“About my site” Bây giờ bạn có thể lặp lại các bước làm như trên để tạo liên kết đển tất cả các bài viết cần thiết.

53

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Quản lý nội dung của bạn với JSN PowerAdmin
Khi làm việc với Joomla!, nếu bạn có quá nhiều danh mục, bài viết hay modules, bạn có thể thấy khó khăn khi tìm kiếm những thứ này. Có một extension miễn phí giúp bạn giải quyết vấn đề này một cách nhanh chóng và tiện lợi - JSN PowerAdmin. JSN PowerAdmin sẽ giúp bạn: 1. Tìm kiếm một cách nhanh chóng các mục trong back -end với Spotlight Search. Bạn có thể tiết kiệm thời gian trong khi tìm kiếm các mục cần chỉnh sửa. 2. Điều khiển nội dung website chỉ trên một trang với Site Manager. Ở đây, người quản trị (Administrators) có thể chỉnh sửa một bài viết hoặc quản lý các modules và các danh mục với tính năng kéo thả rất tiện lợi.

Quản lý website với JSN PowerAdmin Extension này được người dùng Joomla! trên JED đánh giá cao với hơn 30+ bình chọn và hơn 30+ đánh giá. Tải JSN PowerAdmin miễn phí - Xem video giới thiệu JSN PowerAdmin.

54

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chỉnh sửa bài viết đẹp hơn
Vậy là bạn đã biết cách tạo các bài viết. Giờ thì chúng ta học nâng cao hơn và tạo các bài viết đẹp, hữu ích hơn. Có nhiều cách để bạn làm điều này, chẳng hạn như: định dạng văn bản, thêm hình ảnh, liên kết, v.v.

Định dạng văn bản
Nếu bạn đã từng làm việc với Microsoft Word hoặc bất cứ trình soạn thảo nào khác thì kiểu định dạng văn bản trong Joomla! sẽ không còn xa lạ với bạn nữa. Tuy nhiên, nó đơn giản hơn so với Microsoft Word vì nó chỉ cung cấp một vài tùy chỉnh định dạng văn bản đơn giản mà thôi. Bạn truy cập tới Article Manager và mở bài viết“About my site”. Bây giờ hãy chú ý đến vùng soạn thảo. Đây là nơi mà bạn chỉnh sửa bài viết của chính mình :

Chỉnh sửa bài viết Hãy nhìn kỹ các định dạng bên dưới – hầu hết các biểu tượng đều rất quen thuộc, với những biểu tượng để tạo dòng chữ của bạn đậm hơn, nghiêng hay gạch dưới và các biểu tượng để chỉnh sửa văn bản của bạn. Hãy chọn đoạn văn bản mà bạn muốn định dạng sau đó nhấn vào biểu tượng thích hợp.

Các nút định dạng văn bản Joomla! 55

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Bạn có thể tạo những tựa đề (headings) ở các định dạng khác nhau bằng cách nhấn vào mũi tên chỉ xuống trong ô “paragraph”, rồi nhấn vào tựa đề tương ứng sổ xuống, từ “Heading 1” tới “Heading 6”.

Chọn định dạng tiêu đề cho đoạn văn Bạn có thể thấy dòng chữ này lớn hơn:

Đoạn văn với định dạng Heading 1

56

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thêm hình ảnh
Trước khi thêm các hình ảnh vào các bài viết, bạn nên tổ chức và sắp xếp chúng vào trong một thư mục đặc biệt. Việc này giúp cho việc tìm kiếm và quản lý chúng dễ dàng hơn nhiều. Tạo các thư mục hình ảnh 1. Vào “Content” => “Media Manager”, sau đó nhấn “Create Folder” trên thanh công cụ. 2. Nhập tên thư mục và nhấn “Create Folder”.

Tạo thư mục mới để lưu trữ hình ảnh Bây giờ bạn đã có một thư mục mới trong Media Manager.

Thư mục“aboutmysite” trong Media Manager 57

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Tải lên hình ảnh Bây giờ bạn hãy tải những hình ảnh vào trong thư mục “aboutmysite” mà bạn vừa tạo. 1. Nhấn vào thư mục “aboutmysite”, sau đó nhấn vào nút “Upload” màu xanh.

Nhấn “Upload” 2. Tiếp theo, nhấn “Choose files” để duyệt các tập tin hình ảnh.

Chọn các tập tin 3. Chọn tập tin hình ảnh bạn muốn tải lên. Bây giờ bạn chỉ có thể chọn một tập tin cho mỗi lần tải lên. Chúng tôi sẽ cho bạn thấy cách để chọn nhiều tập tin để tải lên cùng một lúc sau .

58

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chọn hình ảnh 4. Nhấn nút “Start Upload” để upload hình ảnh.

Bắt đầu tải hình ảnh lên Bây giờ, hình ảnh mới của bạn đã được tải lên trong thư mục “aboutmysite”.

59

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Hình ảnh hiển thị trong thư mục “aboutmysite” Với cách này, mỗi lần làm bạn chỉ có thể tải lên một ảnh. Cách này rất tốn thời gian và công sức nếu bạn cần tải nhiều ảnh lên. Rất may, có một cách khác cho phép tải lên nhiều tập tin một lúc - chức năng flash uploader. Bạn chú ý rằng cách này yêu cầu bạn cài đặt Flash Player trên máy tính của bạn trước. Hãy thử với cách này nhé. 1. Trong Media Manager, nhấn “Options” trên thanh công cụ.

Nhấn nút “Options”

60

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 2. Trong trang “Media Manager Options”, thiết lập tham số “Enable flash uploader” là “Yes” và nhấn “Save & Close”.

Bật tính năng flash uploader

61

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Trở lại màn hình chính như hình bên dưới. Bây giờ bạn hãy nhấn “Browse files” để tìm đến nơi chứa tập tin bạn muốn tải lên.

Duyệt tới tập tin 4. Để chọn nhiều tập tin, dùng chuột kéo chọn tất cả hoặc giữ phím “CTRL” và nhấn lần lượt lên các tập tin bạn muốn chọn, sau đó nhấn “Open”.

Chọn ảnh

62

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 5. Nhấn chọn nút “Start Upload” và chờ cho tới khi quá trình tải lên hoàn tất.

Tải các ảnh lên Bây giờ bạn đã có các hình ảnh trong thư mục.

Các ảnh mới được tải lên

63

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Thêm ảnh vào bài viết Sau khi tải các hình ảnh được tải lên server, bạn có thể thêm chúng vào trong bài viết của bạn . Hãy thử với bài viết“About my site”. 1. Sau khi mở bài viết, bạn trỏ chuột tới một điểm của đoạn văn mà bạn muốn chèn hình ảnh vào và nhấn nút “Image” bên dưới khung soạn thảo.

Thêm ảnh vào trong văn bản

64

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 2. Chọn ảnh để thêm vào văn bản.

Mở thư mục hình ảnh

65

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Nhập phần miêu tả ảnh (Image Description) và tiêu đề ảnh (Image Title) và nhấn nút “Insert” phía trên của hình để hoàn tất việc chèn ảnh.

Chọn hình ảnh bằng cách nhấn vào nó sau đó điền các thông tin cần thiết

66

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 4. Kiểm tra lại xem ảnh đã được chèn vào bài viết chưa.

Một hình ảnh được chèn vào bài viết Bây giờ, nếu bạn thấy ảnh to quá, nhỏ quá hoặc chưa được đặt đúng ý bạn, bạn có thể thay đổi kích thước ảnh hoặc căn lề. Nhấn vào hình ảnh sau đó nhấn vào nút “Insert/edit image” trong phần tùy chỉnh định dạng phía trên khung soạn thảo bài viết để chỉnh sửa nó .

Nút chỉnh sửa/chèn hình ảnh Một màn hình pop-up sẽ hiển thị. Tại đây bạn có thể chỉnh sửa hình ảnh như bạn muốn. Ví dụ, thử thay đổi kích thước và canh lên sang phải (“Right”), sau đó nhấn nút “Update” bên dưới.

67

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chỉnh sửa ảnh Nhấn nút “Save & Close” trên thanh công cụ trong “Article Manager” và ra ngoài front-end để xem bài viết sau khi được chèn mới hình ảnh.

68

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bài viết với hình ảnh trong website

69

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thêm các liên kết
Thêm liên kết nội bộ Trong nhiều bài viết, bạn cần các liên kết nội bộ (Kết nối với các bài viết khác trên website của bạn). Những liên kết này không chỉ giúp ích cho những người đọc bài viết mà còn tốt cho cả việc tối ưu hóa công cụ tìm kiếm (Search Engine Optimization hay SEO). Hãy xem cách tạo các liên kết nội bộ trong một bài viết dưới đây . 1. Mở bài viết bạn muốn thêm liên kết nội bộ. 2. Chọn đoạn văn bản bạn muốn liên kết. 3. Nhấn vào nút “Article” bên dưới trình soạn thảo bài viết

Chèn một liên kết vào trong bài viết 4. Bây giờ bạn sẽ nhìn thấy một cửa sổ pop-up chứa danh sách tất cả các bài viết của bạn. Tìm bài viết bạn muốn liên kết tới và sau đó nhấn chọn lên tiêu đề của bài viết đó.

Chọn bài viết tương ứng 70

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Kết quả là, tiêu đề của bài viết đã chọn được sử dụng như một đoạn liên kết.

Liên kết mới trong đoạn văn bản Bạn có thể thay đổi liên kết đoạn văn bản trên giống như đoạn văn bản cũ.

Đoạn liên kết sau khi được chỉnh sửa

71

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 5. Nhấn “Save” và truy cập đến phần front-end để xem bài viết với liên kết mới tạo.

Bài viết với liên kết trong front-end Nếu bạn muốn chỉnh sửa một liên kết, bạn chỉ cần chọn nó và nhấn vào biểu tượng “Insert/edit link” giống như hình bên dưới.

72

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chỉnh sửa liên kết Hoặc bạn có thể bỏ liên kết từ đoạn văn bản bằng cách nhấn vào biều tượng “Unlink”.

Bỏ liên kết trong bài viết

73

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Thêm các liên kết bên ngoài Trong phần trước bạn đã học cách tạo các liên kết nội bộ, những liên kết này sẽ kết nối tới các bài viết khác trên website của bạn. Trong phần này, bạn sẽ biết cách làm thể nào để tạo các liên kết bên ngoài đến bất kỳ website nào bạn muốn trên Internet. 1. Chọn đoạn văn mà bạn muốn gán liên kết đến, sau đó nhấn vào biểu tượng “Insert/edit link”.

Thêm liên kết bên ngoài Một cửa sổ pop-up sẽ hiển thị bên dưới:

Thêm một liên kết bên ngoài

74

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 2. Nhập vào giá trị cho 4 tham số trong hình bao gồm:   Link URL Địa chỉ liên kết bạn muốn gán. Target Có hai tùy chọn cho bạn ở đây: Mở liên kết ngay trong cùng một cửa sổ (“Open link in the same window”) và Mở liên kết trong một cửa sổ mới ( “Open link in a new window”). Nếu bạn chọn “Not set”, liên kết sẽ được mở trong cùng một cửa sổ) Title Nhập một mô tả ngắn cho liên kết. Class Là người mới làm quen với Joomla!, bạn cứ đặt giá trị “Not set” (Ngoài ra có hai tùy chọn khác là “Caption” và “System Page break”)

 

3. Nhấn “Insert” để chèn liên kết này. Sau đó bạn có thể xem đoạn văn bản đã được liên kết tới website bên ngoài.

Văn bản được liên kết

75

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thêm “Page Break” và “Read More”
Trong trường hợp những bài viết có nội dung dài, có thể bạn sẽ muốn chia bài viết thành những những phần nhỏ riêng biệt. Với Joomla! Bạn có hai tùy chọn để làm việc này. 1. Page Break Page Break (hay “Phân Trang”) giúp chia bài viết thành các phần riêng biệt như Trang 1, Trang 2, Trang 3, v.v. Page breaks rất có ý cho những bài viết có nội dung dài. 2. Read More Read More (hay “Đọc Thêm”) giúp chia một bài viết đầy đủ thành hai đoạn: Một đoạn giới thiệu và phần còn lại của bài viết. Nếu bạn muốn đọc nốt phần còn lại của bài viết, bạn phải nhấn vào liên kết “Read More”. Bây giờ chúng ta sẽ học cách thêm Page Break và Read More. Thêm một “Page Break” 1. Đặt con trỏ vào nơi mà bạn muốn chia bài viết. 2. Nhấn nút “Page Break” bên dưới trình soạn thảo bài viết.

Thêm một page break

76

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Thêm tiêu đề bạn muốn đưa vào trang mới trong trường “Page Title” và nhấn “Insert Page Break”.

Thêm một Page Break 4. Đã xong, bây giờ bạn sẽ thấy một dòng các dấi chấm hiển thị trong bài viết của bạn như trong hình bên dưới.

Dòng chấm hiển thị một page break 5. Nhấn “Save”.

77

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 6. Xem kết quả trên front-end của bạn. Bạn sẽ thấy một danh sách bên cạnh bài viết – bạn chỉ cần nhấn lên tiêu đề hoặc “Next” để xem trang chứa các phần văn bản khác.

Thêm mới page break trong website Chú thích:   Bạn có thể thêm nhiều page breaks vào bài viết. Bạn có thể xóa môt page break bằng cách mở bài viết (trong phần back-end), đặt trỏ chuột vào phần cuối đường chấm của page break và nhấn phím “Backspace”.

78

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Thêm một liên kết “Read More” Thêm một liên kết “Read More” khá giống với thêm một page break (phân trang). 1. Đưa con trỏ văn bản tới vị trí bên trong bài viết nơi mà bạn muốn chia phần mở đầu và phần nội dung chính. 2. Nhấn nút “Read More” bên dưới trình soạn thảo bài viết.

Chèn một liên kết Read more Bạn sẽ thấy một dòng chấm đỏ như bên dưới.

Đường chấm đỏ “Read more” 3. Nhấn “Save” để hoàn tất. Bây giờ bài viết của bạn đã có một liên kết “Read more” ở front-end. Bạn chỉ cần nhấn vào nút “Read more…” để đọc đầy đủ bài viết. 79

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bài viết với liên kết “Read more”

80

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 4: Tùy chỉnh giao diện website của bạn với Joomla! template
Chúng ta đã hoàn tất việc chuẩn bị nội dung. Bây giờ là lúc quan tâm đến giao diện của một website.

Joomla! template là gì?
Như đã đề cập trước đó, một template quản lý việc hiển thị đồ họa website của bạn. Nó quyết định bố cục, màu sắc, kiểu chữ, đồ họa cùng nhiều thành phần khác để tạo nên sự khác biệt cho mỗi website. Có hai loại templates: “Site template” cho phần hiển thị tại front-end của website và “Administrator template” cho phần hiển thị tại back-end (Phần quản trị) của website.

Site template
Site template quyết định giao diện ở front-end của một website – phần mà khách viếng thăm nhìn thấy được.

Một Site template Thông thường, bạn sẽ làm việc với các Site templates nhiều hơn các Administrator template, để tạo nên giao diện hợp lý cho website của bạn.

81

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Administrator template
Administrator template quyết định giao diện back-end (Phần Quản trị) của một website.

Một Administrator template Nếu bạn đang xây dựng một website cho một mình bạn bạn thì việc thay đổi giao diện ở phần quản trị không quan trọng lắm. Nhưng khi bạn xây dựng website cho khách hàng, bạn có thể cần tùy chỉnh phần giao diện này cho phù hợp với khách hàng.

82

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chọn Joomla! template
Nguồn Template
Cách nhanh và dễ nhất để thiết kế giao diện cho website của bạn là sử dụng các Joomla! template có sẵn. Có rất nhiều templates cho bạn trên Internet. Nguồn templates miễn phí Cộng đồng Joomla! cung cấp hàng ngàn templates miễn phí cho bạn lựa chọn. Các bạn có thể lựa chọn từ những nguồn sau:    http://www.joomla24.com/ http://www.joomlaos.de/ http://www.bestofjoomla.com

Nguồn templates có trả phí Nếu ngân sách của bạn cho phép, bạn có thể mua cho mình một template, chúng tôi khuyên bạn nên mua những templates này tại các nhà cung cấp Joomla! templates như:      http://www.joomlart.com http://www.rockettheme.com http://www.joomlashine.com/ http://www.yootheme.com http://www.gavick.com

Các nguồn template khác trên Internet Bạn có thể tìm kiếm trên Google với các từ khóa: “Joomla Templates” hoặc “template for Joomla” và bạn sẽ thấy có đến 60 triệu kết quả được trả về!

83

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Các tiêu chuẩn để chọn lựa Template
Có rất nhiều Joomla! template để bạn lựa chọn. Đây là một vài tiêu chuẩn có thể giúp cho bạn tìm cho mình một template vừa ý.  Tính tương thích Template hỗ trợ phiển bản Joomla! nào? Bạn cần chọn cho mình một template hỗ trợ Joomla! 3.x  Phải trả phí hay miễn phí Bạn muốn một template chất lượng tốt và được hỗ trợ hay bạn eo hẹp về tài chính và chỉ cần một template miễn phí? Thông thường, các templates trả phí linh hoạt hơn, chất lượng cao hơn, có nhiều tài liệu hướng dẫn hơn và được hỗ trợ tốt hơn là template miễn phí.  Tài liệu hướng dẫn sử dụng Tài liệu hướng dẫn sử dụng có tốt không? Tài liệu này có giúp bạn hiểu rõ hơn về các tính năng của template không? Nó có giúp bạn tùy chỉnh template không?  Hỗ trợ Template có được hỗ trợ không? Bạn có thể được hỗ trợ như thế nào? – Qua diễn đàn, hệ thống hỗ trợ qua ticke, v.v.? Thời gian bạn nhận được câu trả lời là bao lâu? 12 giờ, 24 giờ hay phải nhiều ngày sau?  Thiết kế Khi nhìn và cảm nhận website, bạn có thấy nó đúng như mình mong muốn không? Nếu nó giống là thiết kế đó, bạn sẽ không mất nhiều thời gian để tùy chỉnh. Nếu không, bạn cần kiểm tra xem nó có dễ tùy chỉnh theo ý bạn không?  Các tính năng Các templates chuyên nghiệp cung cấp khá nhiều tính năng trong khi trong phần lớn các template miễn phí, các tính năng bị hạn chế khá nhiều. Nếu bạn là cá nhân hay người sử dụng thông thường thì một template miễn phí sự lựa chọn phù hợp. Tuy nhiên nếu bạn đang tạo website cho công việc hay kinh doanh thì bạn nên mua một template trả phí phí từ những nhà cung cấp chuyên nghiệp. Đừng nghĩ rằng cách này lãng phí tiền, vì ngoài “code” và phần thiết kế chất lượng cao hơn ra, bạn có còn được nhiều tài liệu hướng dẫn và sự hỗ trợ hữu ích khác nữa. Thời gian mà bạn tiết kiệm được sẽ xứng đáng với số tiền bạn bỏ ra.

84

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Cài đặt Joomla! template
Sau khi chọn cho mình được một mẫu Joomla! template thích hợp rồi, bây giờ chúng ta sẽ cài đặt nó. 1. Vào “Extensions” => “Extension Manager”

Extensions => Extension Manager 2. Nhấn “Browse…”, tìm tập tin template mà bạn đã tải về, sau đó nhấn “Upload & Install”. Tiếp theo bạn sẽ nhận được thông báo rằng template đã được cài đặt thành công.

Duyệt tới tập tin template từ máy tính của bạn 3. Bây giờ bạn đã có một template mới được cài đặt, hãy dùng nó cho website của bạn. Bạn vào “Extensions” => “Template Manager”

85

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Chọn “Template Manager” 4. Chọn template mà bạn muốn dùng, sau đó từ top menu bên trái chọn biểu tượng “Make Default” để nó được chọn mặc định cho website Joomla! của bạn.

Chọn “Make Default”

86

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 5. Bây giờ bạn có thể xem lại tổng quan thiết kế ở phần front-end bằng cách nhấn vào tên website ở phía trên bên trái trong phần Quản trị.

Nhấn vào tên website để xem phần thiết kế front-end

87

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tạo giao diện đa phong cách để gán tới các danh mục
Bạn có thể dùng các template khác nhau trên các trang khác nhau trong website của bạn.

Trong website này, hầu hết các trang dùng Beez2, ngoại trừ một trang sử dụng Beez3 Ví dụ, bạn có một website đang dùng template Protostar, bạn muốn một trang trong website này dùng template Beez3. Bạn có thể thực hiện điều này dễ dàng bằng cách làm theo các bước bên dưới:

88

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Tạo mới một danh mục ở Top menu có tên là Beez3: Vào Menus -> Main Menu -> Add New Menu. Bạn có thể chọn bất kỳ mục menu nào bạn muốn, ví dụ chúng ta chọn danh mục loại “ Single article”, đặt tiêu đề danh mục là “Beez3”, Chọn bài viết “Getting Started” sau đó lưu menu này lại.

Tạo danh mục “Beez3” Sau đó bạn vào Extensions -> Template Manager -> Beez3. Tại đây, trong phần “Menus assignment”, bạn chọn danh mục Beez3.

Chọn danh mục “Beez3” Bây giờ bạn lưu lại menu và tới phần front-end để xem kết quả. Chú ý: Bạn chỉ có thể gán một template vào một danh mục. Nếu bạn gán từ hai template trờ lên thì chỉ có template mới nhất được áp dụng.

89

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 5: Sắp xếp modules ở các vị trí
Chú ý: Bạn có thể thực hiện việc này dễ dàng với JSN PowerAdmin và tính năng quản lý các modules trực quan của nó.

Joomla! module và Joomla! position là gì?
Như đã đề cập trước đó, một module thực hiện một nhiệm vụ đơn giản nào đó và hiển thị nội dung trong một khối thông tin nhỏ trên trang. Mỗi một module nằm trong một vị trí đặc biệt, ví dụ module “Latest Article” và “Login Form” nằm ở bên trái. Mỗi một vị trí được thiết kế để sử dụng trong một phần bố cục của trang, như vị trí “left” được đặt ở phía bên trái của trang chính. Các template có thể có nhiều vị trí khác nhau được bố trí ở những nơi khác nhau trên một trang. Đây là một cách khác để bạn hình dung vể khái niệm này. Cứ xem website của bạn như một bức tường, trên bức tường đó, có những tấm bảng (module positions) được treo ở những vị trí khác nhau. Trên mỗi tấm bảng, có những tờ giấy nhớ (modules) được ghim lại. Bạn thấy đấy, vậy là bạn có một bức tường dán đầy giấy nhớ (modules) được sắp xếp trên một cái bảng (positions) treo trên tường. Có hai loại modules là: “Site module” dùng cho phần front-end và “Administrator module” dùng cho phần quản trị back-end.

Site modules tại front-end

90

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Làm thế nào bạn có thể nhìn thấy được vị trí của các module trong một template?
Sẽ rất khó để xem được tất cả những vị trí module trong một template khi chỉ nhìn vào một website. Rất may, Joomla! cung cấp cho bạn một công cụ để có thể thấy được tất cả các vị trí đó. Hướng dẫn sau giúp bạn sử dụng nó: 1. Vào “Extensions” => “Template Manager”. 2. Trong phần Template Manager, nhấn biểu tượng “Options” trên thanh công cụ. 3. Tiếp theo, thiết lập tham số của “Preview Module Positions” thành “Enabled” và nhấn “Save & Close”.

Bật tính năng xem trước vị trí của module 4. Bây giờ, nhấn vào thẻ “Template”.

Nhấn vào thẻ Template 5. Những template đã cài đặt dược hiển thị trên màn hình. Bạn kéo chuột xuống template Beez3 và nhấn Preview để xem các vị trí module của template này.

91

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Nhấn Preview 6. Tất cả các vị trí module của template sẽ được hiển thị giống như hình bên dưới.

92

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Các vị trí Module của trang Bây giờ bạn có thể thấy được tất cả các vị trí module của template. Việc này sẽ giúp bạn chọn đúng vị trí bạn cần khi thêm mới một module. 93

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thêm mới một module
Bây giờ bạn đã khá quen thuộc với khái niệm về Joomla! Module và Joomla! Position rồi, hãy tiếp tục với phần tạo mới một module cho website của bạn.

Làm quen với những modules mặc định
Mặc định Joomla! cung cấp cho chúng ta khá nhiều modules để dùng, hãy xem qua nhé : Module người dùng (User modules) Các module được thiết kế cho việc trình bày và dịch vụ người dùng.  Who’s online Module này hiển thị số khách và thành viên đang truy cập website của bạn.  Latest Users Module này hiển thị những thành viên đã đăng ký mới nhất.  Login Module này hiển thị một form đăng nhập với tên, mật khẩu và một vài liên kết khác như đăng ký hay lấy lại mật khẩu. Module nội dung (Content modules) Các module được thiết kế để trình bày bài viết.  Latest News Module này hiển thị một danh sách các bài viết đã được đăng.  Most Read Content Module này hiển thị danh sách các bài viết được đăng và có số lượt xem cao.  Article - News flash Module tin nhanh sẽ hiển thị một số lượng bài viết nhất định trong một chuyên mục cụ thể nào đó.  Article - Related Articles Module này hiển thị các bài viết khác liên quan đến nội dung bài viết đang được xem.  Archive Articles Module này hiển thị một danh sách các bài viết được lưu trữ trong tháng.  Article categories Module này sẽ hiển thị các chuyên mục con của một chuyên mục cha.  Articles category Module này cho phép bạn hiển thị các bài viết trong một chuyên mục. 94

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Module hiển thị (Display modules) Các module được thiết kế cho việc hiển thị nội dung phong phú hơn.  Custom HTML Cho phép bạn tạo những đoạn HTML có thể tùy chỉnh theo ý của bạn. Module này dùng với trình soạn thảo WYSIWYG.  Feed display Module này cho phép hiển thị một nguồn cấp dữ liệu web. Xem thêm tại đây.  Footer Module này hiển thị thông tin bản quyền Joomla!.  Random image Module này hiển thị một hình ảnh ngẫu nhiên nào đó từ thư mục ảnh mà bạn đã chọn.  Weblinks Module này hiển thị danh sách các liên kết trong một chuyên mục.  Banner Module banner cho phép bạn sử dụng để hiển thị các biển ngữ trong phần “Banners Component”. Module tiện ích (Utility modules) Các modules được thiết kế để thực hiện một nhiệm vụ nhỏ nào đó.  Smart Search Module Module này dùng cho việc tìm kiếm bằng cách dùng Smart Search component.  Wrapper Module này hiển thị một cửa sổ iFrame đến vị trí đặc biệt nào đó.  Language switcher Module này hiển thị một danh sách các ngôn ngữ có sẵn cho việc chuyển đổi nội dung sang ngôn ngữ khác.  Search Module này sẽ hiển thị một hộp thoại tìm kiếm.  Thống kê Module thông kê, module này thống kê thông tin về server của bạn, thành viên website, bài viết, các liên kết, etc.  Syndicate Feeds Module Syndicate sẽ hiển thị liên kết cho phép thành viên nhận thông tin từ website của bạn. 95

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Module tiện ích (Utility modules) Các module này được thiết kế nhằm hiển thị điều hướng webite.  Menu Module này hiển thị một danh mục trên website.  Breadcrumbs Breadcrumb là tập hợp các đường link phân cấp giúp người dùng có thể biết được mình đang ở trang nào và từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website.

Thêm mới một module
Bây giờ, hãy xem cách thêm mới một module. 1. Vào “Extensions” => “Module Manager”, sau đó chọn “New” trên thanh công cụ.

Nhấn “New” để thêm mới một module

96

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 2. Trong cửa sổ pop-up, chọn module bạn muốn thêm. Ví dụ bạn muốn thêm một module đăng nhập (“Login”) để cho phép thành viên đăng nhập vào website.

Chọn module “Login”

97

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Bây giờ bạn chỉ cần nhập thông tin cho module mới của mình. Đừng quên chọn vị trí mà bạn muốn module này hiển thị trên web site.

Nhập thông tin cho module 4. Cuối cùng, nhấn vào “Save & Close” để hoàn tất quá trình. Bây giờ các bạn truy cập front-end của website và xem kết quả!

Module đăng nhập trên website Bạn có thể thêm nhiều module với cách làm tương tự.

98

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Cấu hình cài đặt các modules
Sắp xếp thứ tự các modules Bây giờ bạn đã biết rằng tất cả các modules được đặt trong một vị trí như thế nào rồi, vậy giờ chúng ta sẽ sắp xếp các module này bằng chức năng kéo thả (drag and drop). Cách làm như sau: 1. Vào “Module Manager”. 2. Nhấn vào biểu tượng để kéo và thả module vào vị trí mới.

Nhấn

để kéo thả module vào vị trí mới.

99

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 6: Mở rộng chức năng của website với Joomla! extensions
Như đã đề cập trước đó, Các thành phần mở rộng của Joomla!(extentions) là những phần mềm đặc biệt được viết để để tích hợp vào Joomla! nhằm tăng cường cũng như mở rộng chức năng cho website. Ví dụ nếu bạn muốn có một slideshow hình ảnh, bộ sưu tập Videos hay Form liên hệ với nhiều chức năng nâng cao hơn, thì bạn cần phải cài đặt các extensions cho những mục đích tương ứng. Để thêm thông tin về Joomla! Extensions, bạn vui lòng coi lại phần Các thành phần mở rộng (Extensions) đã được đề cập trước đó. Mặc định thì Joomla! đã được đóng gói kèm khá nhiều extensions đủ đế thực hiện những chức năng cơ bản.  Banners Extension này giúp cho việc quản lý và hiển thị các biểu ngữ.  Contacts Extension này giúp bạn quản lý liên lạc và hiển thị thông tin liên hệ.  Newsfeeds Extension này giúp cho việc quản lý và hiển thị RSS.  Redirect Extension này giúp quản lý chuyển hướng các URL.  Weblinks Extension này giúp quản lý và trình bày các liên kết. Hãy xem kỹ hơn một chút về một trong các extensions mở rộng của Joomla! để hiểu hơn về cách thức làm việc của nó với Joomla!.

100

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Làm việc với thành phần mở rộng (Extensions) mặc định “Contacts”
Trong phần này, chúng ta sẽ học làm thể nào để sử dụng extension “Contacts” của Joomla! Extension này cho phép bạn tạo các biểu mẫu (form) liên hệ để mọi người (khách, thành viên) có thể gửi email tới bạn.

Tạo chuyên mục liên hệ
Chúng ta cần tạo các danh sách liên hệ trước khi thành viên có thể gửi tới cho chúng ta email thông qua biểu mẫu liên hệ nào đó. Nhưng để tổ chức phần liên hệ tốt hơn, chúng ta cần tạo các chuyên mục liên hệ trước . 1. Vào “Components” => “Contacts” => “Categories”

Chọn các chuyên mục liên hệ 2. Tiếp theo, chọn “New” trên thanh công cụ để tạo mới một mục liên hệ.

Chọn “New” để tạo một mục liên hệ mới 3. Sau đó, điền tiêu đề cho mục liên hệ của bạn, ví dụ “Website Administrators”, và lưu lại bằng cách nhấn vào “Save & Close”.

101

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Mục liên hệ mới

102

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tạo mới một liên hệ
Khi mục liên hệ đã được tạo xong, bạn có thể tạo các liên hệ riêng lẻ mà bạn muốn . 1. Các bạn vào “Components” => “Contacts” => “Contacts”

Nhấn vào danh mục con "Contacts" 2. Tiếp theo, nhấn vào “New” trên thanh công cụ để tạo mới liên hệ.

Nhấn “New” để tạo một liên hệ mới 3. Sau đó, điền thông tin vào các trường trong phần “Edit Contact”:  Name Điền tên liên hệ - Có thể là tên của bạn.  Category Chọn chuyên mục liên hệ mà bạn đã tạo trước đó.

103

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Nhập thông tin liên hệ 4. Tiếp theo, trong thẻ “Contact Details”, điền địa chỉ email liên hệ trong phần “Email”. Đây là tham số rất quan trong vì sau đó tất cả các thông tin liên hệ để được gửi đến địa chỉ email này.

Nhập email liên hệ 5. Cuối cùng, nhấn “Save & Close” để lưu lại liên hệ này. 104

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tạo một danh mục con để hiển thị biểu mẫu liên hệ
Bây giờ bạn đã tạo một biểu mẫu liên hệ để gửi liên hệ tới nó, lúc này hãy tạo một form cho thành viên để họ có thể gửi liên hệ được cho bạn. 1. Vào “Menus” => “Main Menu” => “Add new menu items”

Thêm mới một danh mục con 2. Tiếp đó, nhấn “Select” để chọn loại danh mục con.

Nhấn chọn loại danh mục con

105

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 3. Tiếp, chọn “Single Contact”.

Chọn “Single Contact”

106

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 4. Tiếp theo, bạn cần chọn mẫu liên hệ mà bạn muốn bằng cách nhấn vào “Select”.

Nhấn “Select” 5. Sau đó nhấn vào liên hệ bạn đã tạo trước đó.

Nhấn để chọn liên hệ đã tạo trước đó

107

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine 6. Điền tiêu đề cho “Menu Title” như bạn muốn, ví dụ “Contact”.

Điền tiêu đề trong “Menu Title” 7. Cuối cùng, nhấn “Save & Close” để lưu lại menu item này.

108

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Bây giờ, hãy truy cập front-end của website để xem kết quả. Phần “Main Menu” đã có thêm một mục mới là “Contact”. Nhấn vào và bạn sẽ thấy biểu mẫu liên hệ xuất hiện.

Biểu mẫu liên hệ trên website Chúng ta đã thêm mới một form liên hệ cơ bản cho website. Để tùy chỉnh thêm, bạn có thể sử dụng một số lựa chọn có sẵn.

109

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tùy chình thêm
Vào “Contacts” hay “Categories” và nhấn vào biểu tượng “Options” trên thanh công cụ.

Nhấn vào "Options"

110

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Ở đây bạn có thể cấu hình tất cả các tham số bạn cần.

Các tham số của biểu mẫu liên hệ

111

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Thêm mới Extension
Các Joomla! extensions mặc định phù hợp cho những người mới bắt đầu, nhưng sau một thời gian làm quen với Joomla!, bạn có thể cảm thấy chúng chưa đủ. Trong quá trình phát triển web site, bạn sẽ muốn thêm nhiều chức năng nữa mà những thành phần mở rộng mặc định đã có sẵn không thể mang lại. Trong phần này, chúng ta sẽ xem xem những Extensions gì bạn có thể thêm vào website và làm thế nào để thực hiện điều đó.

Xác định Extension sẽ được cài đặt
Thông thường mỗi một website đều có mục đích riêng của nó và đương nhiên cũng không có sẵn danh sách những Extensions mà nó cần phải cài đặt. Tuy nhiên, có những loại Extensions mà các website nên có, ví dụ, bộ sưu tập ảnh (image gallery), bộ sưu tập videos (video gallery), xây dựng biểu mẫu (form building), tích hợp với mạng xã hội, hiển thị trên các thiết bị di động, v.v. Có rất nhiều bài viết nhằm giải quyết vấn đề này và dưới đây là một số trong những bài viết hữu ích:Joomlashine extensions – JSN PowerAdmin, JSN Uniform và JSN ImageShow: Chúng được phát triển để đáp ứng những yêu cầu thông dụng cho các website. Những Extensions này nhận được khá nhiều lời khen ngợi từ những người sử dụng Joomla vì chúng dễ dùng và hiệu quả.     Top 10 Joomla! extensions - Brian Teeman: Danh sách các tiêu chí chọn Joomla! extensions của Brian. Featured extensions on JED My top ten Joomla! extensions - Kristoffer Sandven: Những extensions ưa thích của một Joomla! blogger nổi tiếng – Kristoffer Sandven cho cả phần front-end và back-end. My Must have Joomla! Extensions - Anthony Olsen: Một danh sách Extensions giúp xây dựng phần lõi Joomla! mạnh hơn. Bạn nên kiểm tra danh sách để đảm bảo rằng những Extensions này hỗ trợ cho Joomla! 3.x. Joomla! 3.x extensions on JED: Toàn bộ extension ở đây đều được kiểm tra kĩ càng bởi đội ngũ JED trước khi giới thiệu cho người dùng. Bạn cũng nên kiểm tra qua số lượt đánh giá và bình luận của người dùng để chọn ra extensions tốt nhất mà bạn mong muốn.

112

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

JSN PowerAdmin – Một extension giúp đơn giản hóa giao diện quản trị back-end

JSN Uniform – Một extension giúp tạo và quản lý nhiều loại biểu mẫu. 113

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tìm kiếm những Extension hữu ích
Nơi mà bạn có thể tìm cho mình những extensions hữu ích là Joomla! Extensions Directory (JED). Nó là một nguồn tài nguyên lớn với hàng ngàn Joomla! extensions được chia sẵn vào các chuyên mục chức năng của nó.

Joomla! Extensions Directory Tất cả các extensions có phần đánh giá và bình luận riêng, bạn cũng có thể xem và đưa ra ý kiến của bạn về extensions này. Mục này được điều hành bởi một đội ngũ chuyên nghiệp và bạn có thể tin tưởng những thông tin được đăng tại đây.

114

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Cài extensions mới
Sau khi chọn và tải extensions cần thiết cho website của bạn, bạn cần biết làm thế nào để cài đặt chúng và làm cho chúng làm việc trên website của bạn. 1. Vào “Extensions”=>“ExtensionManager” 2. Tiếp theo, nhấn “Browse” để chọn gói Joomla! extension bạn đã tải về.

NhấnBrowse 3. Sau đó, nhấn “Upload&Install” để tải lên và cài đặt tập tin này vào website của bạn.

Nhấn“Upload &Install” 115

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Joomla! sẽ tự động đưa extension này vào đúng chỗ của nó.Ví dụ, nếu extensions là một component, bạn sẽ thấy nó trong danh mục“Components”; nếu extension này là một module, bạn sẽ tìm thấy nó trong “Module Manager”.

JSN UniForm trong Components

Gỡ bỏ extensions
Nếu bạn thấy một extension không giúp gì cho bạn, bạn nên gỡ bỏ nó: 1. Vào “Extensions”=>“ExtensionManager” và nhấn vào mục “Manage”. 2. Nhập tên đầy đủ hoặc một phần tên của extension vào trường “Filter” và nhấn “Search” icon. 3. Chọn extension mà bạn muốn gỡ bỏ và nhấn “Uninstall” trên thanh công cụ.

Gỡ bỏ extension 116

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Bước 7: Quản lý website với JSN PowerAdmin
Bạn đã có được một website Joomla! sau khi thực hiện 6 bước ở trên. Bây giờ, có thể bạn cần cập nhật nội dung hàng ngày hoặc hàng tháng: chỉnh sửa nội dung đã đăng, tạo mới một danh mục hay module… Những việc này, bạn không cần phải thực hiện toàn bộ các bước và thao tác như chúng tôi đã trình bày trước đó. Đây là lúc để tiết lộ một bí mật: JSN PowerAdmin. JSN PowerAdmin là một extension Quản trị back-end được tạo ra để giúp quản lý website Joomla! của bạn dễ dàng hơn bao giờ hết - với các chức năng Tìm kiếm Spotlight (Spotlight Search), Quản lý Site (Site Manager), Quản lý mẫu Template (Template styles Manager) và nhiều hơn nữa.

Những tính năng nổi bật của JSN PowerAdmin

117

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Quản lý site (Site Manager): Quản lý ba phần chính trong website của bạn bao gồm: Danh mục (Menu), Component và Modules trong một vùng.

Site Manager  Tìm kiếm Spotlight (Spotlight Search): Điểm nhấn tìm kiếm (hình dưới bạn có thể thấy từ “joomla” được bôi vàng toàn bộ, đó gọi là Spotlight).

Spotlight Search với danh sách kết quả có được

118

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Quản lý mẫu template (Template Style Manager): Bạn có thể sửa, đặt làm mặc định, sao chép, xóa hay gỡ bỏ template dễ dàng.

Quản lý các mẫu template JSN PowerAdmin hoàn toàn MIỄN PHÍ Bạn chỉ cần tải về và cài đặt ở back-end của website theo hướng dẫn trong phần “Cài extensions mới”

Tải JSN PowerAdmin miễn phí

119

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Quản lý website Joomla! với Site Manager
Sẽ mất khá nhiều thời gian khi bạn phải vào từng menu, module hay bài viết để chỉnh sửa chúng. Bây giờ, bạn có thể quản lý nội dung website của bạn dễ dàng hơn, nhanh hơn với công cụ Quản lý Site: Bao gồm Menu, Component và Modules trong một khu vực. To access Site Manager, click “Components” -> “JSN PowerAdmin” -> “Site Manager”.

Quản lý site bao gồm Menu, Component và Modules panel Tiện lợi hơn, bạn có thể điều chỉnh kích thước của 3 phần này nếu bạn muốn. Bạn chỉ cần kéo thanh ngăn cách giữa 2 phần sang trái hoặc sang phải để phóng to hay thu gọn lại phần đó. Ở đây, toàn bộ những thay đổi này sẽ được tự động lưu lại.

Quản lý Danh Mục

120

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Các danh mục con ở phần front-end Bạn có thể quản lý danh mục và danh mục con dễ dáng với thẻ MENU trong Site Manager.

Quản lý tất cả các danh mục và danh mục con

121

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Xem các danh mục ẩn/hiện: Bạn có thể nhìn thấy tất cả danh mục được hiển thị.Những mục không được hiển thị sẽ bị ẩn đi. Để hiển thị hay ẩn các mục này, bạn nhấn vào biểu tượng ô vuông ở phía trên bên phải.

Nhấn vào biểu tượng ô vuông để hiển thị những danh mục ẩn

Nhấn vào biểu tượng ô vuông để không hiển thị những danh mục ẩn

122

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Tạo mới một danh mục / danh mục con:

Thêm một danh mục và một danh mục con mới  Sửa danh mục hiện tại / các danh mục con:

Sửa danh mục hiện tại hoặc danh mục con

123

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Kéo và thả để di chuyển các mục con trong một danh mục:

Kéo mục danh mục con và thả nó đến một vị trí khác  Tùy chỉnh các danh mục con:

Bạn cũng có thể Ẩn (Unpublish), Cài đặt trên trang chủ (Set as home), Chiếm quyền sử dụng (Check in) danh mục con, v.v.

Quản lý tất cả các danh mục hay danh mục con

124

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Quản lý nội dung
Phần COMPONENT hiển thị tất cả nội dung của danh mục bạn đã chọn. Nó cho phép bạn sửa các thành phần, hiển thị hay ẩn các mục mà bạn muốn.

Nhấn“Select”để sửa một bài viết  Xem các mục nội dung: Nhấn vào biểu tượng bên dưới để hiển thị/không hiển thị các thành phần ẩn trên trang.

Nhấn hiển thị hay không hiển thị các mục ẩn

125

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Sửa các bài viết / chuyên mục: Giờ đây, bạn có thể sửa một bài viết nhanh hơn sau khi bạn chọn nó. Nhấn vào tiêu đề nội dung để hiển thị các tùy chọn bên dưới:    Edit article: Thay đổi nội dung bài viết. Hide element/ Show element: Nhấn để hiện hay không hiện các thành phần ẩn với hai tùy chọn “For all pages globally” hoặc “For this page only”. Enable link/ Disable link: Nhấn để hiển thị các liên kết được kích hoạt hay không kích hoạt với hai tùy chọn “For all pages globally” hay “For this page only”. o For all pages globally: Thay đổi được áp dụng cho tất cả các thành phần trên tất cả các trang của website. o For this page only: Thay đổi được áp dụng cho riêng trang này.

Sửa bài viết, hiển thị hay ẩn các chi tiết và liên kết trong một bài viết

126

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Cách sửa một chuyên mục tương tự như cách sửa một bài viết ở trên.

Sửa chuyên mục hoặc ẩn các chi tiết trong một chuyên mục

127

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Quản lý các Modules
Trong phần MODULES, bạn có thể quản lý toàn bộ modules của template mặc định hiện tại.

Modules trong phần front-end

128

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Xem các modules: Bạn có thể nhìn thấy các các modules được hiển thị ở đây. Nhưng bạn có thể hoặc không thể nhìn thấy các module không được hiển thị và các vị trí có các module (hoặc không có module). Bạn có thể quản lý những mục này bằng cách nhấn vào biểu tượng ô vuông ở góc trên bên phải và đánh dấu vào ô “Modules”, “Positions” hay cả hai.

Nhấn để hiển thị hoặc ẩn các modules và vị trí

129

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Tạo một module mới:

Nhấn vào bất kỳ vị trí nào và thêm một modulemới  Xem vị trí của các modules

Bạn có thể nhấn vào một vị trí module và chọn “View position” để xem tất cả các vị trí của template.

Nhấn vào vị trí bất kỳ để xem vị trí của template mặc định

130

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Sửa các modules hiện tại: Với một module bất kỳ, bạn có thể Sửa (Edit), Thay đổi vị trí (Change position), Ẩn (Unpublish) ... Với các module đã bị chiếm quyền sử dụng (Checked in), bạn cần chiếm quyền sử dụng lại trước khi chỉnh sửa chúng.

Sửa các modules

Thay đổi vị trí module với toàn bộ vị trí được hiển thị của template

131

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Kéo và thả để di chuyển các vị trí module.

Kéo và thả một module tới vị trí mới

132

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Truy cập nhanh các mục bất kỳ với Spotlight Search
Bạn cần phải nhấn khá nhiều lần để tìm kiếm cho phần front-end trong back-end của Joomla!. Spotlight Search giúp bạn tìm kiếm các mục trong website của bạn và truy cập chúng nhanh hơn:    Trong phần front-end, sao chép tiêu đề của nội dung mà bạn muốn chỉnh sửa. Tới phần back-end, dán tiêu đề vào ô Spotlight Search ở góc trên bên phải của bảng quản trị admin. Bạn sẽ nhận được tất cả các kết quả từ các chuyên mục khác nhau ngay lập tức. Bạn chỉ cần chọn đúng mục mong muốn để chỉnh sửa.

Kết quả sẽ được hiển thị ngay lập tức

133

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Nhấn vào mục bạn muốn để có thể truy cập ngay lập tức tới trang đó. Tại đây, bạn có thể thay đổi nội dung giống như cách thông thường bạn vẫn làm.

Truy cập tức thì tới trang tùy chỉnh

134

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Quản lý các kiểu template với Template Style Manager
JSN PowerAdmin cung cấp cho bạn một cách truy cập nhanh chóng tới tất cả các mẫu templates đã được cài đặt. Và bạn có thể thực hiển một số thao tác cơ bản trên một template như sửa (Edit), chọn làm mặc định (Make Default), sao chép làm hai (Duplicate), xóa (Delete) và gỡ bỏ (Uninstall) nhanh chóng với một vài cú nhấp chuột. Hãy xem làm thế nào để thay đổi template mặc định.

Hiện tại, Template ở front-end mặc định là Beez3  Vào “Extensions” => “Template manager” và nhấn “Template Styles”.

Chọn “Template Styles” 135

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Tiếp theo, trong cửa sổ này, bạn sẽ thấy tất cả các template đã được cài, bao gồm cả site templates và admin templates. Template mặc định được đánh dấu nổi bật với màu vàng.

Quản lý các mẫu Template

136

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Nhấn trên template bạn muốn thiết lập là mặc định và chọn “Make Default”. Ví dụ, ở đây chúng ta chọn Protostar.

Nhấn chọn "Make Default"  Cuối cùng, nhấn“Close” để thoát khỏi cửa sổ.

137

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine Bây giờ, ra ngoài phần front-end của website và xem kết quả.Template bây giờ là Protostar.

Protostar đã được chọn là template mặc định

138

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Những tính năng khác
Truy cập nhanh tới các mục đã chỉnh sửa trước đó
Tất cả các mục bạn đã cấu hình trước đó sẽ được lưu trữ trong History. Bạn có thể truy cập chúng chỉ với vài cú nhấp chuột.  Nhấn vào biểu tượng Đồng hồ phía bên phải bênh cạnh ô Spotlight search.

Nhấn vào biểu tượng Đồng hồ  Nhấn vào mục bạn muốn truy cập tới.

Nhấn vào mục bạn đã chỉnh sửa trước đó  Bạn sẽ được chuyển tới mục đó.

139

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Truy cập nhanh vào Profile của thành viên
Thông thường, là một người quản trị, bạn muốn kiểm tra tin nhắn, profile của bạn hay đơn giản là thời gian còn lại trong phiên làm việc của bạn. Để vào user profile, bạn:  Tìm biểu tượng hình người trên đầu thanh công cụ gần biểu tượng đồng hồ. Phần màu xanh đại diện cho tỷ lệ phần trăm của thời gian còn lại trong phiên của bạn.

Biểu tượng hình người  Di chuột vào biểu tượng và nhấn vào Profile trong phần danh mục con. Một cửa sổ mới sẽ hiển thị ra cho phép bạn chỉnh sửa hồ sơ của bạn.

Nhấn “Profile” để đi tới trang cho thành viên

140

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Trang thiết lập hồ sơ (Profile)

Quản trị Danh mục nâng cao
Một lúc nào đó bạn có thể muốn gỡ bỏ một vài extension. Không cần phải vào “Extension Manager” theo cách thông thường, bạn có thể gỡ bỏ chúng với chức năng Gỡ bỏ nhanh (Quick Uninstall). Nó làm việc với một vài exentions mặc định của Joomla! (Banners, Contacts...) và tất cả các extension của bên thứ ba trên website Joomla! của bạn.

141

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Gỡ bỏ nhanh một extension

142

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Cấu hình JSN Power Admin
Bạn có thể quản lý phần back-end Joomla! theo cách mà bạn thích với trang “Configuration” của JSN Power Admin. Tại đây, bạn có thể cấu hình logo và liên kết menu, vùng tìm kiếm hay số lượng chỉnh sửa được hiển thị; tắt tính năng gỡ bỏ nhanh hoặc hỗ trợ quản lý các thành phần mở rộng, v.v.  Vào “Component” => “JSN PowerAdmin” và nhấn “Configuration”

Vào trang Configuration của JSN PowerAdmin

143

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine  Bạn có thể cấu hình theo ý mình trong trang “Configuration”.

Trang "Configuration"

144

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

“Joomla! 2.5 Made Easy” – Phiên bản trước của Joomla! 3.x Made Easy (Thiết kế website thật dễ dàng với Joomla! 3.x)
Cuốn e-book này (“Joomla! 3.x Made Easy” – “Thiết kế website thật dễ dàng với Joomla! 3.x”) là bản cập nhật từ phiên bản trước - Joomla! 2.5 Made Easy, đã có hơn 50.000+ lượt tải về. Nếu bạn muốn xây dựng một website trên một phiên bản Joomla! ổn định, bạn nên chọn Joomla! 2.5 (nó được hỗ trợ cho tới mùa xuân năm 2014) và cuốn cẩm nang bỏ túi Joomla! 2.5 Made Easyđược khuyên dùng vì nó sẽ giúp bạn từng bước làm chủ Joomla! .

Joomla! 2.5 Made Easy,viết bởiJoomlaShine Team 93 trang Ngôn ngữ: tiếng Anh, tiếng Đức, tiếng Đan Mạch Cuốn sách có sẵn các ngôn ngữ tiếng Anh, tiếng Đức và tiếng Đan Mạch. Bạn có thể tải nó miễn phí.

145

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Kết luận
Một cuốn sách tốt rất có giá trị và chúng tôi hi vọng bạn cũng nghĩ thế khi đọc cuốn sách này. Toàn bộ kiến thức về Joomla! 3.x của chúng tôi đã được biên tập cẩn thận để mạng lại cho bạn 7 chương với những thông tin hữu ích nhằm giúp bạn từng bước tạo cho mình một website với Joomla! 3.x. Sau khi đọc xong cuốn sách này, bạn sẽ biết được hết những khía cạnh cơ bản của Joomla! để có thể xây dựng hoàn tất một website: Từ làm thế nào để cài đặt nó cho đến việc làm thế nào để làm việc với nó . Tâm nguyện của đội ngũ JoomlaShine là mong muốn chia sẽ những điều tốt nhất đến với độc giả thông qua cuốn sách này. Đừng quên chia sẽ những gì mà bạn đã học được từ cuốn sách cho người khác.Việc mang lại cho bạn đọc những kiến thức có giá trị không chỉ là mục đích mà còn là phần thưởng cho chúng tôi. Mặc dù đã cố gắng hết sức nhưng những sai sót là điều không thể tránh khỏi. Chúng tôi xin ghi nhận những ý kiến và đóng góp từ phía độc giả để làm cho cuốn sách trở lên hoàn thiện hơn!

146

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com Twitter http://www.twitter.com/joomlashine | Facebook http://www.facebook.com/joomlashine

Tham khảo
Ra mắt cuối tháng10/2012, Joomla! 3 - In 10 Easy Steps được viết bởi Hagen Graff là một cuốn sách tốt cho những người mới bắt đầu. Vói những thông tin chi tiết về Joomla! 3.x, tôi bảo đảm bạn sẽ có được nhiều kiến thức để giúp bạn xây dựng một website như ý mình. Cuốn sách này được xuất bản với nhiều ngôn ngữ khác nhau như tiếng Anh, tiếng Đức và tiếng Pháp, vậy bạn có thể chọn một phiên bản tương ứng cho mình. Cuốn sách này được tải và chia sẻ miễn phí. Bạn có thể vào trang Blog chính thức của JoomlaShine ( Joomlashineblog) hoặc xem qua kênh Youtube để học thêm về Joomla! cũng như cập nhật những thông tin mới nhất về Joomla! Không chỉ lý thú mà còn hữu ích, những chủ đề về Joomla! mà có lẽ bạn sẽ không muốn bỏ lõ. Bạn có thể để lại lời bình luận bên dưới mỗi bài viết – chúng tôi đánh giá cao điều này  Cuối cùng, lời khuyên chúng tôi đưa ra về một vài website học tập tốt mà chúng tôi nghĩ có thể bạn nên tham khảo như:            http://joomlaviet.info/ http://docs.joomla.org/ http://www.joomlatutorials.com/ http://www.joomlablogger.net/ http://www.ostraining.com/blog/joomla/ http://www.theartofjoomla.com/ http://www.youtube.com/user/Joomla http://www.joomla-wiki.de/dokumentation/Joomla!_Wiki http://www.joomlaportal.de/forum.php http://www.joomlaspanish.org/foros/ http://www.joomla.it/mediawiki/index.php/Pagina_principale

147