Giáo trình nghề Thiết kế trang Web - Môđun: Xây dựng Website với hệ quản trị nội dung CMS
BỘ NÔNG NGHIỆP VÀ PHÁT TRIỂN NÔNG THÔN
TRƯỜNG CAO ĐẲNG CƠ ĐIỆN HÀ NỘI
GIÁO TRÌNH
MÔN HỌC/MÔ ĐUN: Xây dựng Website với hệ quản trị nội dung CMS
NGÀNH/NGHỀ: THIẾT KẾ TRANG WEB
TRÌNH ĐỘ: CAO ĐẲNG
(Ban hành kèm theo Quyết định số:
/QĐ-CĐCĐ-ĐT ngày…….tháng….năm
................... của Trường Cao đẳng Cơ điện Hà Nội)
(Fonst chữ Times New Roman cỡ chữ 14 chữ thường in nghiêng)
Hà Nội, năm…
1
CHƯƠNG 1: GIỚI THIỆU VÀ CÀI ĐẶT WORDPRESS
1. Giới thiệu về wordpress
WordPress là một hệ thống quản trị nội dung (CMS – Content Management System)
giúp ta thực hiện các website động một cách nhanh chóng và dễ dàng. Là hệ thống quản trị
nội dung mã nguồn mở số 1 thế giới hiện nay. Linh hoạt, đơn giản, thanh nhã, tính tuỳ biến
rất cao và cực kỳ mạnh mẽ, đó là những gì có thể nói về WordPress Được sử dụng ở trên
toàn thế giới từ những trang web đơn giản cho đến những ứng dụng phức tạp. Việc cài đặt
WordPress rất dễ dàng, đơn giản trong việc quản lý và đáng tin cậy.
Ngoài các vấn đề là mã nguồn mở miễn phí, khả năng bảo mật cao, dễ dàng sử dụng, còn
điều gì tuyệt vời hơn đằng sau khiến cho WordPress phát triển mạnh và được nhiều người
yêu thích như vậy ? với WordPress việc xây dựng (lập trình) thêm các thành phần, module,
các chức năng cho nó là một việc rất dễ dàng đối với các lập trình viên, do đó WordPress có
rất rất nhiều các chức năng mở rộng được viết bởi các nhà lập trình trên khắp thế giới, và hầu
hết tất cả các ứng dụng, thành phần này đều được chia sẻ miễn phí, đó chính là điều tuyệt vời
nhất.
. Cài đặt server
❖ Cài Đặt Xampp
❖ Bước 1: Tải Xampp về máy và cài đặt.
2
Bước 2: Kích đúp chuột vào file để mở trình cài đặt.
Bước 3: Click chọn OK trên cửa sổ cảnh báo để tiếp tục.
Bước 4: Click chọn Next.
Bước 5: Xampp cung cấp một loạt các thành phần mà người dùng có thể cài đặt như MySQL,
phpMyAdmin, PHP, Apache, ... . Vì vậy tốt nhất trên cửa sổ Setup, giữ nguyên các cài đặt
mặc định rồi click chọn Next.
3
Bước 6: Bỏ tích hộp nằm kế bên Learn more about Bitnami for XAMPP rồi click
chọn Next.
Bước 7: Tiếp theo có thể lựa chọn thư mục để cài đặt phần mềm hoặc giữ nguyên vị trí cài
đặt mặc định rồi click chọn Next để bắt đầu quá trình cài đặt.
Bước 8: Trong quá trình cài đặt Windows sẽ yêu cầu người dùng cho phép một số dịch vụ
cụ thể giao tiếp thông qua tường lửa (firewall). Click chọn Allow access để tiếp tục.
4
Bước 9: Click chọn Finish để hoàn tất quá trình cài đặt và có thể bắt đầu sử dụng Xampp
Control Panel.
Bước 10: Chọn ngôn ngữ sử dụng (tiếng Anh hoặc tiếng Pháp) rồi click chọn Save để hoàn
tất quá trình và mở Xampp Control Panel.
5
2. Cài đặt WordPress
Sau khi công tác chuẩn bị hoàn tất bây giờ là lúc chúng ta đi đến công đoạn cài đặt WordPress,
thật ra công đoạn cài đặt wordpress diễn ra khá nhanh và dễ dàng, tuy nhiên để hiểu rõ hơn
quá trình cài đặt và cách vận hành của WordPress chúng ta sẽ tìm hiểu kỹ thêm cách cài đặt
diễn ra như thế nào. Thể hiện các Bước như sau:
Bước 1. Tải WordPress
•
•
6
Bước 2. Giải nén Tệp WordPress vừa tải về
Bạn sẽ được một thư mục có tên WordPress:
Bước 3. Sao chép dữ liệu vào Xampp
Bạn cần tiến hành hai thao tác sau:
- Tạo một thư mục trong htdocs: Đặt tên là: honggiang
- Sao chép dữ liệu bên trong thư mục wordpress (Bước 2 phía trên), rồi dán vào
trong thư mục vừa tạo trên đây
7
Bước 4. Tạo Database
Nếu các bạn chưa bật XAMPP như Bước 5 – Phần 1, thì hãy bật Xampp lên và chọn Start
tại Apache và MySQL nhé
Mở trình duyệt như Chrome, Firefox, Safari, Opera, Internet Explorer,… và gõ vào thanh
địa chỉ chữ:localhost/phpmyadmin Tiếp theo bấm New Database
Tại ô Database Name, bạn gõ vào chữ gì đấy, viết liền nhau, không dấu, ví dụ: hongiang1
Tại ô bên cạnh, tìm và chọn utf8_unicode_ci rồi bấm Create
8
Bước 5. Tiến hành cài đặt WordPress
Gõ vào thanh địa chỉ trình duyệt: Localhost/honggiang
với: hongiang là tên của thư mục đã tạo trong htdocs ở Bước 3.1 – Phần 2.
Bạn sẽ được dẫn đến bảng hướng dẫn cài đặt WordPress như nhau. Phần đầu tiên là lựa
chọn ngôn ngữ (Do mình sử dụng bảng cài đặt WordPress Tiếng Anh nên mới có bước này.
Nếu bạn sử dụng Tiếng Việt thì không có.)
Sau khi chọn Ngôn Ngữ, bạn sẽ được dẫn tới bảng sau. Bấm vào Thực hiện ngay
9
Điền vào các thông số cần thiết rồi bấm GỬI, trong đó:
• Tên Database: Chính là tên bạn đã gõ vào Database Name ở Bước 4 – Phần 2.
Chính là cụm conmeo hoặc themevi đó
• Tên người dùng: Điền vào root, đây là tên người dùng mặc định
•
Mật khẩu: Để trống, đây cũng là mặc định
• Database Host: Để mặc định là localhost
•
Tiền tố bảng dữ liệu: Nên để mặc định
10
Bấm tiếp vào Bắt đầu cài đặt
Tiếp tục điền vào thông tin của website WordPress rồi bấm Cài đặt WordPress, với:
• Tên Website: Chính là tên của website của bạn đó, viết kiểu gì cũng được
• Tên người dùng: Tên tài khoản để đăng nhập vào website
•
Mật khẩu: Mật khẩu của tài khoản đấy, bạn đặt gì cũng được
• Email của bạn
•
Tương tác với công cụ tìm kiếm: Vì cài ở Localhost, nên đánh dấu hay không chả
khác gì nhau hết. Mục này nhằm ngăn chặn Google Bot đọc website, và Google sẽ
không thể index website.
11
Cài đặt thành công, bấm Đăng nhập để truy cập vào website
Điền tên tài khoản (tên người dùng) và Mật khẩu đã tạo ở bước trên
12
Và đây là giao diện trang quản lý website WordPress của bạn. Bấm vào chữ Website của
tôi ở góc trái bên trên để mở giao diện trang web bên ngoài nhé.
Và bây giờ, bạn chỉ cần gõ:
3. Cấu trúc và chức năng của hệ thống WordPress
❖ Giới thiệu các chức năng chính của WordPress gồm: Trang chủ (front-end),
Admin (back-end)
Front-end và back-end là các thuật ngữ chỉ các giai đoạn bắt đầu và kết thúc của một
quá trình xử lí. Khái niệm này thường sử dụng trong lĩnh vực phát triển phần mềm.
•
•
•
Trong thiết kế phần mềm, front-end là một phần của hệ thống phần mềm, tương tác trực
tiếp với người sử dụng. Cụ thể, đó là hệ thống các giao diện người dùng (GUI).
Back-end gồm có các thành phần để xử lí các thông tin từ Front-end. Thông thường ám
chỉ tới việc tương tác với DBMS (hệ quản trị dữ liệu).
13
3.1. Giao diện tổng quan
❖ Trang chủ (Front-end)
Giao diện tổng quan Trang chủ (Front-end) WordPress
Chú thích:
❖
Site Name & Description : Site Name nghĩa là tên website của bạn mà bạn đã khai báo ở
bước cài đặt và Description là mô tả cho website của bạn như là một phần giới thiệu ngắn về
nội dung bài viết.
•
•
Sidebar : Nghĩa là một thanh nội dung nằm bên cạnh nội dung chính, nó có thể là bên trái ,
bên phải hoặc có cả hai bên tùy theo theme. Trong một sidebar, bạn có thể thấy các thành
phần như Recent Posts, Recent Comments,.. các thành phần này được gọi là Widget. Cái
này chúng ta sẽ tìm hiểu sâu hơn trong bài tiếp theo.
14
Post: là tính năng viết bài, khi đăng chúng lên website thì sẽ có một bài viết xuất hiện trên
trang chủ hoặc trang chuyên mục.
•
•
Footer : Nghĩa là phần cuối cùng của một website, ở đó sẽ hiển thị các thông tin như
copyright, Lưu ý: Tùy vào themes (giao diện khác nhau) mà phần footer sẽ khác nhau.
Admin (Back-end)
❖
Với ngôn ngữ này có các chức năng chính bạn cần quan tâm gồm:
Dashboard: Có một số mục chính gồm Screen Options, Wellcom, At a Glance, Quick Draft
đây là những tính năng cơ bản, cho trang Admin. Bạn sử dụng nó để viết bài hoặc thay đổi
tùy chỉnh… nói chung chức năng này bạn sẽ ít dùng tới nó
a.
Themes: Là tính năng tùy chỉnh giao diện website
b.
c.
Customize: Là tính năng tùy chỉnh website gồm: Site Title & Tagline, Colors, Header Image,
Background Image, Widgets, Static Font Page.
Widgets: Là tính năng tùy chỉnh bố cục Webiste dựa vào các Tính năng có sẵn để đưa vào
giao diện trang chủ và các trang con:
d.
e.
Menus: Là tính năng quản lý các menu Top, Header, Footer, Main Menu… tùy theo mỗi
giao diện mà có ít hay nhiều vị trí menu khác nhau.
Background: Là tính năng chọn hình nền cho Website
f.
Header: Là tính năng tùy chỉnh Header mặc định là Add new image (Thêm ảnh mới)
g.
15
CHƯƠNG 2: THIẾT KẾ VÀ BỐ CỤC TRONG WORDPRESS
1.Thiết kế và bố cục trang web sử dụng page builder trong wordpress
➢ Sử dụng Elementor page builder
- Elementor là một công cụ đang rất “hot” hiện này khi nói về thiết kế website mà
không động tay vào code. Nó là một trình tạo trang sử dụng khi dàn trang, tạo
trang bằng cách kéo thả các thành phần hay tùy biến website WordPress của
bạn, giúp bạn có thể dễ dàng chia nội dung của mình ra nhiều cột khác nhau, ở
mỗi cột bạn có thể thêm bất cứ tiện ích “widget” nào để nó hiển thị nội dung mà
bạn muốn.
- Elementor có một tính năng rất hữu ích đó là ở phần Thư viện mẫu (template library)
- cho phép bạn thiết kế Mẫu (template) cho riêng mình, lưu lại và sử dụng cho những
lần sau ở các trang web khác.
✓ Pre-Made Templates Sử dụng template đã được thiết kế sẵn của elementor hoặc là có
thể custome lại hoặc tạo mới template theo nhu cầu sử dụng của bạn.
✓ Save Your Design Sau khi đã thiết kế xong bạn có thể save lại và để sử dụng cho lần
sau cho những trang khác.
✓ Export & Import Bạn có thể export bất kì template nào và import chúng ở website
khác. Điều này giúp bạn có thể chia sẻ template với những người khác.
❖ Sử dụng Elementor
Ở giao diện soạn thảo trang mới, đầu tiên bạn cần chọn template.
16
✓ Có 3 lựa chọn để bạn bắt đầu:
- Elementor Full Width: bạn sẽ xây dựng trang full-width, nhưng vẫn giữ lại phần
header và footer của website
- Elementor canvas: bạn xây dựng trang web từ ban đầu ,tạo từ một trang trắng đúng
nghĩa.
- Giao diện mặc định.
• Sau khi lựa chọn được kiểu giao diện bạn nhấn “Lưu nháp”, tiếp đến nhấn “Sửa với
Elementor” để mở giao diện thiết kế của Elementor.
✓ Giao diện gồm 2 phần:
- Sidebar: bên trái là nơi bạn bổ sung các thành phần element vào phần bên phải. Nó
cũng là nơi bạn chỉnh sửa phần tử bạn đang chọn bên phải.
17
- Xem trước thay đổi: là nơi chứa bản thiết kế của bạn. Giao diện của nó chính xác như
người dùng cuối sẽ nhìn thấy.
Nhấn vào nút Thư mục (folder) ở phía bên phải trang và chọn Thư viện Mẫu (Template
Library).
- Việc sử dụng Elementor để dàn trang cho website bằng cách kéo thả các thành phần
(element) từ phần Sidebar bên trái.
- Bạn thêm phần (section) bằng cách nhấn Thêm Mục Mới bên phải giao diện, sau đó
lựu chọn số cột trong một hàng.
- Tiếp theo, bạn lựu chọn thành phần bên trái để kéo sang phần (section) vừa tạo xong.
18
- Lúc này, bạn có thể tùy chỉnh lại thành phần, phía bên trái Sidebar hiển thị 3 tab cho
bạn tùy chỉnh.
- Nội dung (content): ở đây bạn sẽ thay đổi nội dung của thành phần
- Kiểu (style): nơi bạn thay đổi màu sắc và kiểu chữ
- Nâng cao (advanced): nơi bạn thực thiện thay đổi nâng cao như khoảng cách giữa các
thành phần, màu sắc hiển thị của nền, viển, chỉnh sửa giao diện ở các thiết bị khác
nhau...
- Còn rất nhiều các thành phần khác, mỗi thành phần hỗ trợ một kiểu định dạng khác
nhau như: hình ảnh (image), video, văn bản (text), nút (button), biểu tượng (icon),
google map.. Cách sử dụng đều giống nhau, bạn chỉ việc kéo và thả vào nơi mình
muốn phía bên phải và tùy chỉnh.
19
- Ngoài ta còn rất nhiều điều thú vị của Elementor giúp chúng ta trong việc tạo
2. Sử dụng được các theme trên WordPress
Bước 1: Cài đặt theme trong WordPress
Trong thư viện wordpress.org ( thư viện này có khoảng hơn 2000 theme khác nhau). Chúng
ta có thể chọn cho mình theme phù hợp với sở thích. Sau khi Add New hoặc Thêm mới thì
nó sẽ hiện ra giao diện như sau:
20
Tải về để xem bản đầy đủ
32 trang
05/05/2022
5220
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình nghề Thiết kế trang Web - Môđun: Xây dựng Website với hệ quản trị nội dung CMS", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- giao_trinh_nghe_thiet_ke_trang_web_modun_xay_dung_website_vo.docx
