tài liệu tự thiết kế website thật dễ dàng

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
2










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.

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
3







“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
4
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

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook

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

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
6
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

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

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
7
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ủ: hay trang Showcases:

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
8
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).
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
9
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
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
10

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!
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
11

Chỉnh sửa một bài viết trong back-end
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
12
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”.


“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
13

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”
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
14
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”
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
15

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

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
16
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”.
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
17
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”.
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
18

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.

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
19
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
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
20
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ể.
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
21
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!
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
22

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

“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
23
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
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
24
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
“Thiết kế website thật dễ dàng với Joomla! 3.x” © JoomlaShine.com
Twitter | Facebook
25
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)