TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT

NỘI DUNG

KHOA KỸ THUẬT - CÔNG NGHỆ

1. Giới thiệu
2. Khái niệm và thuật ngữ liên quan

THIẾT KẾ WEB

3. Phân loại trang web
4. Một số điều cần chú ý

Chương 1
GIỚI THIỆU TỔNG QUAN

Phone: 0274. 3834930

Website:

18/01/2019

Bài giảng Thiết kế Web

1. Giới thiệu

1. Giới thiệu

 Website:
 là một văn phịng ảo của một tổ chức, cơng ty, doanh

nghiệp… trên mạng Internet.
 bao gồm tồn bộ thơng tin, dữ liệu, hình ảnh về các sản
phẩm, dịch vụ và hoạt động sản xuất kinh doanh mà tổ
chức muốn truyền đạt tới người truy cập Internet.
 Website không chỉ đơn thuần là nơi cung cấp thông tin cho
người xem, cho các khách hàng và đối tác kinh doanh của
doanh nghiệp, nó cịn phải phản ánh được những nét đặc
trưng của doanh nghiệp, đảm bảo tính thẩm mỹ cao, tiện
lợi, dễ sử dụng và đặc biệt phải có sức lơi cuốn người sử
dụng để thuyết phục họ trở thành khách hàng của doanh
nghiệp.

 Đặc điểm tiện lợi của website:

18/01/2019

Bài giảng Thiết kế Web

3

1. Giới thiệu

Thông tin dễ dàng cập nhật, thay đổi, khách hàng có thể
xem thơng tin ngay tức khắc, ở bất kỳ nơi nào, tiết kiệm chi
phí in ấn, gửi bưu điện, fax, thông tin không giới hạn (đăng
tải thông tin không hạn chế, không giới hạn số trang, diện
tích bảng in...) và khơng giới hạn phạm vi địa lý.

18/01/2019


Bài giảng Thiết kế Web

4

1. Giới thiệu

 Những phần nội dung thiết yếu của một website:
 Trang chủ: Trang đầu tiên hiện lên khi người ta truy cập website đó.

Trang chủ là nơi liệt kê các liên kết. Trang chủ thường dùng để trưng
bày những thông tin mới nhất mà DN muốn giới thiệu đầu tiên đến
người xem.
 Trang liên hệ: trưng bày thông tin liên hệ với doanh nghiệp và thường

có một form liên hệ để người xem gõ câu hỏi ngay trên trang web này.
 Trang thông tin giới thiệu về doanh nghiệp (About us): người xem khi

đã xem website và muốn tìm hiểu về nhà cung cấp, do đó DN cần có
một trang giới thiệu về mình, nêu ra những thế mạnh của mình so với
các nhà cung cấp khác.
 Trang giới thiệu về sản phẩm hay dịch vụ: giới thiệu sản phẩm, dịch vụ

với các thông tin và hình ảnh minh họa.

18/01/2019

2

Bài giảng Thiết kế Web


5

 Các yếu tố mang lại hiệu quả của một Website:
 Chất lượng website: là yếu tố chính để giữ chân và tạo ấn tượng tốt

cho người xem một khi họ đã vào xem website của doanh nghiệp.
Chất lượng website được đánh giá thơng qua các yếu tố sau: trình
bày trang nhã, ấn tượng, bố cục rõ ràng, đơn giản, không bề bộn,
khơng có q nhiều thơng tin trên một trang...
 Thơng tin: thơng tin phải chính xác, đầy đủ, súc tích, được cập nhật
thường xun. Quan trọng hơn là thơng tin phải hữu dụng cho người
xem.
 Tốc độ hiển thị: tốc độ hiển thị trang web phải nhanh, nếu không
người xem sẽ chán và bỏ qua.
 Các chức năng tiện ích phục vụ người xem như: form liên hệ, chức
năng tìm kiếm, chức năng chọn hàng, đặt hàng v.v... để tránh làm
mất thời gian, gây phiền phức cho người xem.
18/01/2019

Bài giảng Thiết kế Web

6

1


1. Giới thiệu

2. Khái niệm và thuật ngữ liên quan


 Các yếu tố mang lại hiệu quả của một Website:

 Trang web: Web page:

 Marketing website: đây là khâu quan trọng nhất để thu hút người

vào xem website. Nếu không marketing, khơng ai biết đến địa chỉ
website này, từ đó, hàng năm chỉ có một số rất ít người vào xem,
làm cho website trở nên vô dụng.
 Hỗ trợ khách hàng: Chất lượng dịch vụ hỗ trợ người xem (khách

hàng), tức tốc độ phục vụ trả lời email, xử lý đơn hàng, cung cấp
thông tin theo yêu cầu của từng người... Nếu một người quan tâm
gửi câu hỏi từ trang liên hệ của website mà phải chờ vài ngày
không thấy câu trả lời, hoặc nhận được câu trả lời không rõ ràng,
khơng đầy đủ, với văn phong cẩu thả... thì chắc chắn doanh
nghiệp sẽ bị mất nhiều khách hàng tiềm năng.

18/01/2019

Bài giảng Thiết kế Web

7

 Là một trang nội dung
 Có thể được viết bằng nhiều ngơn ngữ khác nhau nhưng kết

quả trả về client là HTML

 Web site:

 Tập hợp các trang web có nội dung thống nhất phục vụ cho

một mục đích nào đó

 World Wide Web (WWW):
 Tập hợp các web site trên mạng internet.

18/01/2019

Bài giảng Thiết kế Web

2. Khái niệm và …

2. Khái niệm và …

 HTML là gì?

 Web browser (Trình duyệt web):

HTML (Hypertext Markup Language-Ngôn ngữ đánh dấu siêu văn
bản) là ngôn ngữ đánh dấu chuẩn dùng soạn thảo các tài liệu World
Wide Web, chỉ rõ một trang Web được hiển thị như thế nào trong trình
duyệt.
Ngơn ngữ HTML dùng các tag hoặc các đoạn mã lệnh để chỉ cho các
trình duyệt (Web browsers) cách hiển thị các thành phần của trang như
text và graphics

 Dynamic HTML (DHTML-HTML động)

8


Phần mền phiên dịch đánh dấu của các file bằng HTML,
định dạng chúng sang các trang Web, và thể hiện chúng cho
người dùng. Vài browser có thể cho phép người dùng gởi
nhận e-mail, đọc newsgroups, và thực hiện các file sound
hoặc video đã được nhúng vào trong tài liệu Web.
Các trình duyệt web phổ biến hiện nay: Microsoft Internet
Explorer, Mozilla Firefox và Google Chrome

Là ngôn ngữ HTML mở rộng làm tăng hiệu ứng trình bày văn bản và
đối tượng khác.

18/01/2019

Bài giảng Thiết kế Web

9

18/01/2019

Bài giảng Thiết kế Web

2. Khái niệm và …

2. Khái niệm và …

 Hosting (hay lưu trữ web) là gì?

 Dung lượng của Web Hosting?


 Web Hosting là nơi lưu trữ tất cả các trang Web, các thơng tin, tư

liệu, hình ảnh của Website trên một máy chủ Internet, Web
Hosting đồng thời cũng là nơi diễn ra tất cả các hoạt động giao
dịch, trao đổi thông tin giữa Website với người sử dụng Internet
và hỗ trợ các phần mềm Internet hoạt động.
 Nói một cách đơn giản, Web Hosting tương đương với trụ sở làm
việc hay phòng giao dịch của một doanh nghiệp trong đời
thường. Khi bạn thuê một Web Hosting, điều đó cũng giống như
bạn thuê một phòng trong một cao ốc để làm văn phòng hay trụ
sở làm việc.
 Giá hosting hiện nay cũng rất thấp, chỉ từ vài chục nghìn đến một
hai trăm nghìn đồng mỗi tháng, tùy theo cấu hình host, ngơn ngữ
lập trình và cơ sở dữ liệu mà host hỗ trợ.

18/01/2019

Bài giảng Thiết kế Web

11

10

 Dung lượng của web hosting là khoảng không gian bạn được phép lưu

trữ dữ liệu của mình trên ổ cứng của máy chủ. Như đã nói ở trên, bạn
thuê một web hosting cũng giống như bạn thuê văn phòng trong một
nhà cao ốc. Vậy ở đây, dung lượng của web hosting cũng giống như
diện tích văn phịng của bạn.


 Băng thơng của Web Hosting?
 Băng thông của web hosting là lượng dữ liệu (tính bằng MBytes) trao

đổi giữa website của bạn với người sử dụng trong một tháng. Ví dụ nếu
bạn tải lên website của mình một tệp tài liệu có kích thước là 1MB và
có 100 khách hàng tải tệp tài liệu đó về thì bạn đã tiêu tốn tổng cộng
100MB băng thông.

18/01/2019

Bài giảng Thiết kế Web

12

2


2. Khái niệm và …

2. Khái niệm và …

 Domain (Tên miền):

 URL (Uniform Resource Locator)

Tên miền chính là địa chỉ website. Website bắt buộc phải có
tên miền. Tên miền có nhiều dạng như www.abc.com,
www.abc.net hay www.abc.com.vn... Có những website
khơng mua tên miền riêng mà dùng tên miền con (subdomain) dạng www.abc.com/xyz hay www.xzy.abc.com
(xzy là tên miền con của tên miền abc.com). Dạng tên miền

con như vậy không phải tốn tiền mua mà trên nguyên tắc là
website “mẹ” (tức www.abc.com) có thể “mở” hàng trăm,
hàng nghìn tên miền con như thế. Chi phí trả cho một tên
miền dạng www.abc.com khi mua trên mạng là khoảng 10
USD/năm.

18/01/2019

Bài giảng Thiết kế Web

13

2. Khái niệm và …

18/01/2019

Bài giảng Thiết kế Web

14

2. Khái niệm và …
 Internet

 Bookmark:
1 vị trí trên 1 trang web có thể là đích của 1 hyperlink. 1
bookmark có thể áp dụng cho 1 chuỗi ký tự tồn tại trên
trang. Bookmarks cho phép tác giả link đến 1 phần đã chỉ
định trên trang. Trong 1 URL, 1 bookmark được đánh dấu
phía trước bằng dấu thăng(#). Cũng được gọi là neo
(anchor).


18/01/2019

Địa chỉ tới một trạm Internet hay mạng nội bộ, là 1 chuỗi
cung cấp địa chỉ Internet của 1 Web site tài nguyên trên
World Wide Web, đi theo sau 1 nghi thức. URL thường
dùng là http://, để chỉ định địa chỉ Web site trên Internet.
Những URL khác là gopher://, ftp://, mailto://...

Bài giảng Thiết kế Web

15

Một hệ thống gồm các mạng máy tính được liên kết với
nhau trên phạm vi tồn thế giới, tạo điều kiện thuận lợi cho
các dịch vụ truyền thông dữ liệu, như đăng nhập từ xa,
truyền các tệp tin, thư tín điện tử, và các nhóm thơng tin.
Mỗi máy tính của hệ thống đều có khả năng "nói chuyện"
với bất kỳ máy tính thành viên nào khác.

18/01/2019

Bài giảng Thiết kế Web

3. Phân loại trang web

4. Một số điều cần chú ý

 Dựa vào cơng nghệ phát triển, có 2 loại:


 Đặc tả:

16

 Web để làm gì?

 Web tĩnh:

 Ai dùng?

 Dễ phát triển

 Trình độ người dùng?

 Tương tác yếu

 Nội dung, hình ảnh?

 Sử dụng HTML
 Người làm web tĩnh thường dùng các công cụ trực quan để tạo ra
trang web

 Web động:

 Phân tích
 Mối liên quan giữa các nội dung?
 Thứ tự các nội dung?

 Khó phát triển hơn
 Tương tác mạnh

 Sử dụng nhiều ngôn ngữ khác nhau
 Thường phải viết nhiều mã lệnh
18/01/2019

Bài giảng Thiết kế Web

17

18/01/2019

Bài giảng Thiết kế Web

18

3


4. Một số điều cần chú ý …

4. Một số điều cần chú ý …

 Thiết kế

 Kiểm thử

 Sơ đồ cấu trúc website

 Kiểm tra trên nhiều trình

 Giao diện


duyệt

 Tĩnh hay động

 Kiểm tra trên nhiều loại

 CSDL

mạng

 Nội dung từng trang

 Kiểm tra tốc độ

 Liên kết giữa các trang

 Kiểm tra các liên kết

 Xây dựng
 Cấu trúc thư mục

 Thử các lỗi bảo mật

 Các modul dùng chung

…

 …


18/01/2019

Bài giảng Thiết kế Web

19

5. Tổ chức lưu trữ Website

 1 Website bao gồm rất nhiều trang. Khi lưu trữ phải tổ chức

có cấu trúc để thuận tiện trong quản lý, điều chỉnh về sau.
 Khi đưa Website lên WebServer được cấp 1 địa chỉ
(Domain Name) và 1 thư mục.

 Trang chủ của 1 Website
 Trang chủ (Home page) là được nạp khi truy cập mà không

rõ tập tin nào (Chỉ nhập URL của
1 Website).
Thường qui
định là:
index.htm,
default.htm,
home.htm
 VD: Truy cập:
 Nghĩa là: />Bài giảng Thiết kế Web

Bài giảng Thiết kế Web

20


5. Tổ chức lưu trữ Website

 Các tập tin HTML của 1 Website

18/01/2019

18/01/2019

21

 Tổ chức Site 1 thư mục: Tất cả các tập tin HTML và các tập tin

khác đều đặt trong cùng 1 thư mục.
 Tổ chức Site thư mục theo chức năng: Bên trong thư mục chính,

tổ chức các thư mục con chứa các tập tin có nội dung liên
quan với nhau.
 Tổ chức Site thư mục theo kiểu tập tin: Bên trong thư mục chính,
tổ chức các thư mục con chứa các tập tin cùng kiểu.
 Thư mục chính chứa trang chủ và các thư mục con
 1 thư mục con chứa các trang HTML,
 1 thư mục con chứa các tập tin hình ảnh. . . . .

 Thuận lợi sử dụng chung tập tin, dễ thay thế bổ sung.
 Tổ chức Site hỗn hợp: Kết hợp cách tổ chức theo chức năng và theo

kiểu tập tin

18/01/2019


Bài giảng Thiết kế Web

22

5. Tổ chức lưu trữ Website
 Địa chỉ tuyệt đối
 Khi tham chiếu đến 1 tập tin phải ghi đầy đủ địa chỉ URL.
 http://ServerName/Đường dẫn/ Tên tập tin
 VD:
/> Địa chỉ tương đối.
 Khi tham chiếu đến 1 tập tin cùng thư mục tập tin chính:
Tên tập tin
 Khi tham chiếu đến 1 tập tin khác thư mục tập tin chính:
Đường dẫn/Tên tập tin
 Ghi chú: Sử dụng ../ để chỉ thư mục cấp trên thư mục chứa tập tin
chính.

18/01/2019

Bài giảng Thiết kế Web

23

Phone: 0274. 3834930

Website:

4