NỘI DUNG HỌC PHẦN THIẾT KẾ TRANG WEB

1

TRƯỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI
KHOA VĂN HÓA, THÔNG TIN VÀ XÃ HỘI








NỘI DUNG HỌC PHẦN
THIẾT KẾ TRANG WEB


Giảng viên: Phạm Quang Quyền





Hà Nội, 8-2014
2


BỘ NỘI VỤ
TRƢỜNG ĐẠI HỌC NỘI VỤ HÀ NỘI


CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập - Tự do - Hạnh phúc

CHƢƠNG TRÌNH GIÁO DỤC ĐẠI HỌC
NGÀNH ĐÀO TẠO: KHOA HỌC THƯ VIỆN
ĐỀ CƢƠNG CHI TIẾT HỌC PHẦN
1. Tên học phần: THIẾT KẾ TRANG WEB
2. Mã học phần:
3. Số đơn vị học trình: 3 (45 tiết)
4. Bộ môn phụ trách giảng dạy: Tổ bộ môn thư viện/Khoa Văn hóa, Thông tin &
Xã hội
5. Trình độ: Sinh viên năm thứ 2
6. Phân bổ thời gian:
- Lý thuyết : 20 tiết
- Thực hành, bài tập : 23 tiết
- Kiểm tra : 02 tiết
7. Điều kiện tiên quyết : Tin học cơ bản
8. Mô tả học phần:
Thiết kế web là học phần thuộc khối kiến thức giáo dục chuyên nghiệp trong
chương trình đào tạo trình độ đại học ngành khoa học thư viện, học phần trang bị
cho sinh viên những kiến thức cơ bản về công nghệ web, nguyên lý hoạt động của
ngôn ngữ web, thiết kế cấu trúc của 01 website trong hoạt động thông tin – thư
viện.
Phân bổ thời lượng như sau:
TT
Nội dung học phần
Phân bổ thời lƣợng (tiết)
Tổng
số
Lý
thuyết

Thực
hành,
Bài tập
1
Chương 1: Khái quát chung về
website và mạng máy tính
05
05
0
2
Chương 2: Công nghệ web và
ngôn ngữ html
10
05
05
3
Chương 3: Thực hành thiết kế web
30
10
20

Cộng
45
20
25
9. Mục tiêu của học phần:
- Kiến thức: Cung cấp cho sinh viên những kiến thức cơ bản về công nghệ
web : webserver, web browser, ngôn ngữ HTML,… Cung cấp kiến thức về mô
hình website trong thư viện và công cụ để thiết kế website.
- Kỹ năng:

3

Trang bị cho sinh viên những kỹ năng cơ bản sau:
+ Thiết lập webserver
+ Thiết kế outline web
+ Xây dựng web tĩnh
+ Xây dựng web động
+ Quản trị (tạo lập, bảo trì, backup, ) cơ sở dữ liệu MySQL
- Thái độ: Sinh viên có nhận thức về vị trí, vai trò của môn học trong hoạt
động chuyên môn, có hiểu biết về ngôn ngữ web, công nghệ web để vận dụng thiết
kế vào website trong hoạt động thông tin – thư viện.
10. Nhiệm vụ của sinh viên:
- Dự lớp;
- Làm bài tập ở nhà, trên lớp, thảo luận;
- Có tài liệu học tập;
- Dự kiểm tra;
- Dự thi kết thúc học phần.
11. Tài liệu học tập:
1. Slide Bài giảng Thiết kế web tại website:
2. Tài liệu tham khảo:
[1] Sử dụng DHTML và CSS cho thiết kế web động . - Nxb. Lao Động Xã
Hội
[2] Tự học HTML và XHTML . - Nxb Thống Kê
[3] Hướng dẫn sử dụng Dreamweaver cho thiết kế web . - Nxb Lao Động
Xã Hội
12. Phƣơng pháp và nội dung đánh giá học phần:
- - Chuyên cần và thái độ học tập: đủ 80% thời lượng học trên lớp trở lên và
mức độ thể hiện bài tập thực hành và thảo luận theo nhóm (trọng số 10%)
- - Kiểm tra giữa học phần: 01 bài, trọng số 30%
- - Thi hết học phần: trọng số 60%

- 13. Thang điểm đánh giá: 10.
- 14. Nội dung chi tiết học phần:
CHƢƠNG 1
KHÁI QUÁT CHUNG VỀ WEBSITE VÀ MẠNG MÁY TÍNH
(5 tiết lý thuyết)
1.1. Lịch sử phát triển công nghệ web
Ngày 6-8-1991, Tim Berners Lee công bố chương trình web. Dự án “World Wide
Web” được Tim giới thiệu tại newsgroup alt.hypertext.
Ông cho biết dự án nhắm tới việc tạo ra các liên kết giữa các tài liệu bằng cách sử
dụng “siêu văn bản” (hypertext) cùng với internet.
4

Ngày 12-12-991: Máy chủ đầu tiên ngoài châu Âu online
Paul Kunz, một nhà khoa học thuộc trung tâm Stanford Linear Accelerator Center
(SLAC), sau chuyến thăm phòng thí nghiệm Cern (nơi Berners Lee làm việc) quyết
định lập một máy chủ cho Bắc Mỹ. Đây là việc làm cần thiết để đưa web ra khắp thế
giới. Máy chủ của SLAC dùng các phần mềm do chính Berners Lee phát triển.
Tháng 11-1992: Đã có 26 máy chủ web online
Ngày 22-4-1993: Trình duyệt Mosaic cho Windows ra đời
Mosaic là trình duyệt web đầu tiên chạy trên hệ điều hành Windows,
được phát triển tại Trung tâm quốc gia về ứng dụng siêu máy tính
(National Center for Supercomputing Applications) Hoa Kỳ. Với trình
duyệt này, công chúng có thể tiếp cận web dễ dàng và thân thiện hơn.
Ngày 30-4-1993: Cern công bố World Wide Web miễn phí cho tất cả mọi người
Tim Berners Lee đã thuyết phục được Cern “cho không” công nghệ web và các mã
chương trình để mọi người đều có thể sử dụng và cùng tham gia phát triển. Đây là
một trong những nguyên nhân chủ yếu giúp cho web phát triển nhanh chóng và mạnh
mẽ.
Tháng 5-1993: Viện công nghệ Massachusetts tung ra công nghệ mới, lần đầu tiên
đưa một tờ báo lên web.

Tháng 6-1993: Ngôn ngữ HTML (Hypertext Mark Language) dùng trong lập trình
web được công bố.
Tháng 11-1993: Webcam đầu tiên được kết nối, truyền hình ảnh một bình cà phê.
Tháng 2-1994: Tiền thân của Yahoo được đưa lên internet.
Hai sinh viên đại học Stanford là David Filo và Jerry Yang là tác giả của “Hướng dẫn
về World Wide Web của Jerry”, sau này được đổi tên thành Yahoo.
Tháng 4-1994: BBC mở website đầu tiên cho chương trình TV: The Net
Ngày 13-10-1994: Bill Clinton đưa Nhà Trắng lên web: whitehouse.gov
Ngày 25-10-1994: Quảng cáo trên banner lần đầu xuất hiện tại website của
ATT.
Tháng 2-1995: Radio HK chính thức trở thành một đài phát thanh trực
tuyến “fulltime”.
Ngày 1-7-1995: Hiệu sách trực tuyến Amazon khai trương.
Được Jeff Bezos thành lập từ năm 1994 với tên ban đầu là Cadabra.com,
Amazon.com giờ đây là một trong những công ty bán hàng trực tuyến lớn nhất trên
mạng. Ít người biết rằng siêu thị khổng lồ trực tuyến này ban đầu chỉ là một hiệu
sách.
Tháng 8-1995: Đã có 18.957 website
Ngày 9-8-1995: “Bùng nổ tên miền .com”. Hàng loạt công ty trực tuyến chính thức
mở cửa website của mình.


5

Ngày 24-8-1995: Microsoft Internet Explorer (IE) được phát hành và là
một phần trong Windows 95.
Ngày 4-9-1995: eBay, website đấu giá trực tuyến đầu tiên được
thành lập. Chủ nhân của sàn đấu giá trực tuyến này là Pierre
Omidyar. Món hàng đầu tiên được bán là một chiếc đèn chiếu
laser hỏng.

Ngày 15-12-1995: Alta Vista, công cụ tìm kiếm đa ngôn ngữ đầu tiên ra
mắt người sử dụng Internet.
Ngày 4-7-1996: Hotmail khai trương đúng ngày quốc khánh Hoa Kỳ.
Tháng 8-1996: Số website đạt 342.081
Tháng 5-1997: BBC News mở một website về cuộc bầu cử trong năm.
Tháng 6-1997: Tên miền business.com được bán với giá 150.000USD (80.000 bảng)
Ngày 17-12-1997: Jorn Barger đưa ra khái niệm weblog, sau này rút gọn thành blog.
Ngày 1-3-1998: Kozmo.com khai trương
Được thành lập bởi Joseph Park và Yong Kang, Kozmo.com quyên góp được 280
triệu USD, trong đó 60 triệu từ Amazon.com và tuyên bố sẽ chuyển phát miễn phí bất
kì thứ gì trong vòng 1g, từ DVD đến… cà phê. Website này sập tiệm vào tháng 4-
2001 khi “bong bóng .com” … xì hơi.
Tháng 9-1998: Gã khổng lồ Google mở cửa văn phòng đầu tiên của
mình tại một gara ở California.
Ngày 19-10-1998: Open Diary, blog community đầu tiên ra đời.
Tháng 5-1999: Shawn Fanning, một sinh viên ở Boston thành lập
Napster.
Đây là chương trình P2P (peer to peer) đầu tiên được sử dụng rộng rãi, bắt đầu từ
chương trình Fanning viết từ khi còn học trung học để chia sẻ file mp3 với bạn bè.
Napster ngay lập tức thu hút được đông đảo người dùng Internet và cả… các công ty
kinh doanh âm nhạc, những người coi P2P là phạm pháp.
Ngày 16-8-1999: Everquest trở thành game nhập vai trực tuyến nhiều người chơi
(MMORPG) đầu tiên.
Ngày 19-8-1999: MySpace khai trương. Đây là một trong những website đầu tiên về
lưu trữ trực tuyến. Website này được thành lập bởi Tom Anderson, Chis DeWolfe và
một nhóm lập trình viên. Hiện nay MySpace có gần 100 triệu người sử dụng và có cả
hệ thống tin nhắn, blog âm nhạc, ảnh,…
Tháng 11-1999: Boo.com trở thành site đầu tiên kinh doanh thời trang.
Ngày 10 -1-2000: AOL mua lại Time Warner, một trong những vụ sát nhập lớn nhất
trong lịch sử.

Ngày 2-7-2000: Hacker đánh sập 8 website lớn trong đó có Yahoo, CNN và Amazon.
Tháng 8-2000: Đã có gần 20 triệu Website



6

Ngày 15-1-2001: Jimmy Wales sáng lập Bách khoa toàn thư trực tuyến
Wikipedia.
Ngày 22-11-2001: Giáo hoàng John Paul II gửi bức thư điện tử đầu tiên
từ chiếc laptop trong phòng làm việc của ông.
Ngày 11-12-2002: FBI bắt đầu đăng tin truy nã tội phạm trực tuyến.
Ngày 28-4-2003: Apples đưa dịch vụ tải nhạc iTunes vào hoạt động.
Tháng 5-2003: Lần đầu tiên “flash mob” (một nhóm người tụ tập để làm một điều gì
đó không bình thường) được tổ chức tại Manhattan.
Ngày 27-1-2004: Amazon.com lần đầu tiên thu được lợi nhuận của năm.
Ngày 5-2-2004: Bộ ngực Janet Jacksons trở thành hình ảnh được tìm kiếm nhiều nhất
trong lịch sử web.
Trong giờ nghỉ giải lao giữa buổi diễn cùng Justin Timberlake tại Superbowl, ngôi
sao nhạc pop này gặp một rắc rối với trang phục. Các engine tìm kiếm sau đó cho biết
đã có một làn sóng tìm kiếm hình ảnh về sự kiện trên với các từ khóa như Janet
Jackson hay Super Bowl
Tháng 7-2004: Tim Berners Lee được phong tước hiệp
sĩ.
Ngày 9-11-2004: Mozilla Firefox ra mắt công chúng
Tháng 2-2005: Website chia sẻ video youtube.com ra
đời
Tháng 10-2005: Thống kê cho thấy lượng website mới
trong năm 2005 nhiều hơn trong thời kì bùng nổ
dotcom. 17 triệu site mới được thành lập.

Ngày 12-4-2006: Google khai trương một dịch vụ thu hẹp ở Trung Quốc mang tên
Gu Ge
Năm 2006: Đã có…92.615.362 website.

1.2. Cơ sở hạ tầng mạng máy tính
1.2.1. Phần cứng
- Máy chủ
- Máy trạm
- Các thiết bị mạng
1.2.2. Phần mềm
- Web server
- Quản trị webserver
- WebBrowser
1.3. Mô hình mạng máy tính
1.3.1. Một số mô hình vật lý của mạng
- Mạng hình sao


Tim Berners Lee được
phong tước hiệp sĩ
7

- Mạng tuyến tính
- Mạng dạng vòng
1.3.2. Một số mô hình logic của mạng
- Mạng client/server
- Mạng ngang hàng (peer to peer)
1.3.3. Địa chỉ trong môi trường mạng
- Địa chỉ IP (LAN/WAN/loopback)
- Địa chỉ tên miền

1.4. Giới thiệu các dịch vụ cơ bản của mạng máy tính
1.4.1. Dịch vụ www
Là dịch vụ cơ bản, quan trọng nhất của mạng máy tính cho phép
làm việc theo mô hình mạng để duyệt các dữ liệu kịch bản web.
1.4.2. Dịch vụ FTP
Là dịch vụ sử dụng giao thức truyền tệp tin cho phép làm việc với
dữ liệu dung lượng lớn thông qua cổng 21.
1.4.3. Dịch vụ Email
Dịch vụ cho phép thực hiện việc nhận và chuyển E-mail, sử dụng
kết hợp 02 giao thức: SMTP (sử dụng cổng 25) và POP3(sử dụng
cổng 110).
1.5. Những lưu ý khi thiết kế web
Tính cân bằng:
Đó là sự cân bằng về thị giác, về hình khối và về màu sắc. Tính cân bằng đem lại
cảm giác về sự an toàn, tin tưởng. Một website có được sự cân bằng tốt phải có
những hình khối vững chắc, các mảng sáng tối rõ ràng, là những khối thành phần với
các hiệu ứng thị giác.

Độ tƣơng phản:
Đây là tiêu chí tiếp theo để đánh giá mức độ truyền cảm của một website tới người
xem. Vì bản thân website cũng là một dạng tài liệu nhằm cung cấp thông tin cho
người xem qua hệ thống thị giác.

Và với hệ thống thị giác của con người vốn đã nhạy cảm thì với một website thiết kế
tốtphải tạo cho người xem cảm giác tốt về độ tương phản. Đó là sự tương phản giữa
chữ với nền, giữa các khối với nền, và giữa các hình ảnh với nền background. Độ
tương phản giữa chữ và nền phải rõ ràng, vừa phải, các khối màu chắc khỏe.

Dưới đây là 2 điều ta nên tránh khi thiết kế website:
* Quá tương phản: 2 mảng màu trắng - đỏ đặt cạnh nhau sẽ gây ức chế và nhức mắt

khi nhìn lâu.
* Kém tương phản: Đó là những gam màu có độ tương đồng như chữ màu vàng đặt
trên nền trắng, chữ đỏ thẫm đặt trên nền đen.

Điểm nhấn:
8

Điều này rất quan trọng, với một website được thiết kế đẹp thì điểm nhấn
của websiteluôn là nơi được ngƣời thiết kế tính toán kỹ lưỡng. Không thể đánh giá
một website đẹpnếu nó cứ trơn tuồn tuột từ trên xuống dưới như một lá đơn được. Vì
vậy trong hội họa thường dùng từ "truồi truội" để chỉ một tác phẩm không có điểm
nhấn, không có sự thu hút, không có "eyes catching"

Không gian:
Một website đẹp mang đến cho người xem một cảm giác mới mẻ về không gian mà
người xem có thể cảm nhận thấy rõ ràng nhất. Đó có thể là một không gian nhiều ánh
sáng, nhiều màu xanh của lá cỏ. Hay một không gian trang trọng trong một nhà hát.

Tất cả điều này có thể đã bị bỏ quên trong phần lớn các sản phẩm thiết kế web ở Việt
Nam. Đó là hệ quả của việc sử dụng màu sắc tùy tiện, gam màu tùy tiện và các mảng
màu không có được giai điệu nhịp nhàng.

Ai đó có thể vẽ được một hình mẫu đẹp, một chi tiết tinh xảo, nhưng nếu đặt vào
trong một không gian không hợp lý thì tự nó sẽ chuốc lấy thất bại. Giống như nền văn
hóa Cồng chiêng của người dân tộc vùng Tây Nguyên vậy, chúng ta không thể thấy
những cái cồng hay cái chiêng đẹp khi nó đặt trong một không gian bảo tàng hay một
căn phòng sang trọng.

Mà cái đẹp của nó chỉ có thể thấy và cảm nhận trong cái không gian mà nó vốn được
sinh ra, là buôn làng, là trong nhà rông với không gian văn hóa Tây Nguyên.

Tính thống nhất:
Đây là điều không thể bỏ qua khi đánh giá một website, sự thống nhất được đánh giá
ở các thành phẩn của website như font chữ, góc bo tròn, độ chuyển màu hay độ trong
suốt của một hình khối.

Nếu để ý bạn có thể dễ dàng bắt gặp những lỗi tưởng như rất nhỏ này ở
các website được thiết kế cẩu thả, qua quýt hoặc người thiết kế không có được đủ
kinh nghiệm cần thiết để hiểu và kiểm soát tính thống nhất.

Câu hỏi chƣơng 1
1. Trình bày lịch sử phát triển của công nghệ web.
2. Trình bày cơ sở hạ tầng mạng máy tính.
3. Trình bày và phân tích mô hình vật lý của mạng máy tính.
4. Trình bày và phân tích mô hình logic của mạng máy tính.
5. Phân tích cấu trúc IP, IP – LAN, IP – WAN.
6. Phân tích các dịch vụ mạng : www, ftp, email.
7. Phân tích những chú ý khi thiết kế web.

9

CHƢƠNG 2
CÔNG NGHỆ WEB VÀ NGÔN NGỮ HTML
(10 tiết, 05 tiết lý thuyết+05 tiết thực hành)
2.1. Giới thiệu hệ điều hành mạng Microsoft Windows
- Windows Server 2008
- Windows NT
2.2. Một số trình duyệt web cơ bản
2.2.1. Internet Explorer
2.2.2. Mozillar Firefox

2.2.3. Google Chrome
2.3. Giới thiệu webserver
2.3.1. Apache
Đây là chương trình webserver được sử dụng phổ biến nhất. Cách sử dụng đơn
giản nhất là dùng gói cài đặt XAMPP
XAMPP la mot ung dung de chay Webserver tren may tinh cua ban ma khong can
phai mua hosting va domain.
Co the coi day la mot chuong trinh giup ban thuc hanh ve phat trien Web phuc vu
hoc tap va giai tri.
XAMPP là viết tắt của X + Apache + Mysql + PHP + Perl
Chữ X là cross (platform ) ám chỉ dùng được cho cả 4 hệ điều hành khác nhau:
Windows, Linux, Solaris và MAC .
2.3.2. Nginx
Nginx (phát âm "engine x") là một chương trình server HTTP, một reverse
proxy cũng như IMAP/POP3 proxy server miễn phí, mã nguồn mở, có hiệu năng cao.
Nginx được tác giả Igor Sysoev viết cho rambler.ru , trang web được truy cập nhiều thứ 2
trên nước Nga, đã chạy ổn định trong vòng hơn hai năm rưỡi. Igor cung cấp mã nguồn
dưới giấy phép kiểu BSD. Hiện Nginx được sử dụng từ 1% đến 4% số lượng tên miền
toàn thế giới (Nguồn 1, 2). Mặc dù còn ở giai đoạn Beta, Nginx được biết đến bởi sự ổn
định cao, nhiều tính năng, cấu hình đơn giản và tiết kiệm tài nguyên.
2.3.3. Wamp
WAMP là một từ viết tắt của "Windows, Apache, MySQL và PHP". Khi bạn tải
về WAMP cũng có nghĩa là bạn chỉ cần tải về một chương trình để cài đặt ba điều khác
nhau. WAMPs thuận tiện vì nó cho phép bạn tải về và cài đặt tất cả các gói bạn cần để
lưu trữ nội dung web động. Nếu không, bạn sẽ phải tải về ba gói riêng biệt.
Nguồn bài viết: />rieng-cua-ban-tren-windows-wamp.html#ixzz35qyQlZiw
Link gốc:
2.4. Phân loại website
Việc phân loại website không có mục đích quan trọng nào, chỉ đơn giản phân
loại website để một mặt nào đó biết website này đang làm gì, đang cung cấp giá trị gì cho

người dùng, bởi lẽ nếu không cung cấp được gì cho người dùng thì sớm muộn gì website
cũng không thể tồn tại được.
2.4.1. Theo mục đích sử dụng
Website cá nhân
10

- Thuơng mại điện tử (web bán hàng)
- Báo điện tử (báo online)
- Cổng thông tin (trường đại học)
- Mạng xã hội
- Trang tìm kiếm (Google)
- Blog
- Danh bạ
- Sàn giao dịch
- Dịch vụ trực tuyến (nhạc, phim, ảnh)
- Trang việc làm
- Diễn đàn
- Web đấu giá

2.4.2. Theo nội dung quản trị
Loại thứ nhất là “Phần mềm website” dành cho các hệ thống website sử dụng code
để thể hiện các chức năng mang tính “xử lý, tính toán…” ví dụ website chứng khoán,
ngân hàng để xử lý dữ liệu hay các website TMĐT để ứng dụng tương tác dịch vụ, sản
phẩm…
Đặc điểm của loại website này là thiên hướng về công nghệ bên trong nhân nhằm
đem lại mức độ xử lý tốt nhất, nhanh nhất và chính xác nhất các yêu cầu tương tác của
bên cung cấp dịch vụ và người dùng. Loại này chiếm khoảng 10% nhu cầu website hiện
nay và chi phí dành cho loại này thường cao nhất

Loại thứ hai là “Trang web trình diễn hoặc là trang web marketing – Kể cả

Landing page hay Microsite” dành cho các chiến dịch tiếp thị, trình diễn sản phẩm hay
các website chính thức của doanh nghiệp nhằm mục đích coi website là phương tiện
online marketing để quảng bá hình ảnh thương hiệu công ty hay sản phẩm đối với người
dùng internet.

Đặc điểm của loại này là cần phải có thiết kế độc quyền, đẹp, nặng về trình diễn,
có thể thêm hiệu ứng đa phương tiện để đem lại hiệu quả hình ảnh ấn tượng nhất. Những
website này cần phải được thiết kế bởi những công ty thiết kế web uy tín vì website đó
chính là bộ mặt doanh nghiệp hay hình ảnh thương hiệu. Website loại này chiếm 80%
nhu cầu thiết kế web hiện nay và chi phí cũng khá bình dân và chấp nhận được với hầu
hết các doanh nghiệp

Loại thứ ba là “Web vệ tinh” dành cho doanh nghiệp đã có nhiều website chính và
muốn phát triển các website vệ tinh khác nhằm phân khúc thị trường cho sản phẩm hay
làm SEO cho các dịch vụ riêng biệt.
Đặc điểm website này là đơn giản, tập trung vào các nội dung chính và cung cấp
thông tin rõ ràng, code được tối ưu hóa tốt để dễ dàng làm SEO. Website loại này có thể
sử dụng mã nguồn mở hay web mẫu có sẵn để giảm chi phí triển khai, tuy nhiên cũng cần
phải được các chuyên gia về Seo tư vấn để chọn chiến lược tốt nhất. Loại website này
chiếm 10% nhu cầu hiện nay và chi phí cũng ở mức thấp nhất và thường gọi là web giá
rẻ.
11

2.5. Bố cục cơ bản của trang web
2.5.1. Outline
Cấu trúc chung của trang, thường gồm các thành phần:
- Banner
- Button
- Navigation
- Location Bar

- Menu left
- Menu right
- Header
- Footer
- Content
Các thành phần trên được bố trí như hình.
2.5.2. Banner, navigation, button
Độ phân giải hình ảnh là gì?
Khái niệm “resolution” - “độ phân giải” chỉ lượng thông tin được chứa đựng trong
một tập tin ảnh kỹ thuật số được hiển thị trên các thiết bị hoặc được in ra, thông thường
được đo bằng pixel. Nói một cách tổng quát, độ phân giải của bức ảnh càng cao, thì việc
hiển thị nó trên website hoặc trang in càng chi tiết và mượt mà - do đó một vài bức ảnh
có độ phân giải rất cao có thể chứa nhiều pixels hơn mức mà mà mắt người có thể nhìn
thấy.
Pixels và Megapixels là gì?
Một pixel là một khối màu rất nhỏ và là đơn vị cơ bản nhất để tạo nên một bức ảnh kỹ
thuật số. Một bức ảnh kỹ thuật số - có thể được tạo ra bằng cách chụp hoặc bằng một
phương pháp đồ họa nào khác - được tạo nên từ hàng ngàn hoặc hàng triệu pixel riêng lẻ.
Bức ảnh càng chứa nhiều pixel thì càng chi tiết. Một triệu pixel thì tương đương với 1
megapixel; do đó, một máy ảnh kỹ thuật số 3.1 megapixel có thể chụp được những bức
ảnh chứa hơn 3 triệu pixel.
Hầu hết các chương trình ứng dụng đồ họa đều diễn tả độ phân giải của hình ảnh bằng
pixel dimensions - kích thước pixel, với số đo chiều ngang đi trước. Ví dụ, một hình ảnh
có kích thước được nêu ra là “2592x1944” sẽ chứa 2,592 pixel trên mỗi hàng ngang và
1,944 pixel trên mỗi hàng dọc. Nhân 2 con số này với nhau sẽ cho ta 5,038,848 pixel hay
độ phân giải xấp xỉ 5 megapixel.
Mối liên hệ giữa độ phân giải và kích cỡ file
Nói chung, hình ảnh càng nhiều megapixel thì càng cần sử dụng nhiều bộ nhớ trên ổ
cứng hoặc website để lưu trữ. Tuy nhiên, định dạng ảnh bạn chọn để lưu ảnh cũng ảnh
hưởng đến kích cỡ của nó.

Ví dụ, một tấm ảnh kỹ thuật số 3.1 megapixel được lưu theo định dạng JPEG với mức
nén ảnh thấp sẽ chiếm khoảng 600KB không gian ổ cứng. Ngược lại, cũng chính bức ảnh
đó nếu được lưu dưới định dạng không nén TIFF sẽ chiếm khoảng 9MB không gian lưu
trữ.

Mối liên hệ giữa độ phân giải với kích thước của ảnh
Ảnh càng lớn thì không chỉ càng chiếm dụng nhiều không gian lưu trữ mà còn hiển thị
càng lớn trên màn hình của bạn hoặc khi in nó ra. Ví dụ, một bức ảnh 5 megapixel sẽ
12

chứa nhiều pixel hơn theo chiều ngang cũng như theo chiều dọc so với một bức ảnh chỉ
có 3 megapixel, do đó nó sẽ chiếm nhiều chỗ hơn trên màn hình khi xem với kích thước
đầy đủ (full size) của nó. Tuy nhiên, một bức ảnh được lấy trực tiếp từ máy ảnh kỹ thuật
số với kích thước như vậy sẽ là quá rộng đối với hầu hết máy in và quá lớn với các
website. Điều đó có nghĩa là bạn cần thu nhỏ bức ảnh lại (downsample) trên máy tính.
Khi bạn thu nhỏ bức ảnh bằng một ứng dụng biên tập ảnh, thực ra nó sẽ loại bỏ bớt các
pixel khỏi bức ảnh để làm nó nhỏ lại. Quá trình này sẽ làm giảm chất lượng bức ảnh đến
một mức nào đó. Thực ra, quá trình loại bỏ bớt dữ liệu (remove data hay downsample)
luôn tốt hơn quá trình thêm dữ liệu (add data hay resample) để làm tấm ảnh lớn hơn.
Phân biệt giữa Pixels Per Inch và Dots Per Inch
Mặc dù thường được dùng thay thế cho nhau, tuy nhiên, về mặt kỹ thuật, pixels per inch
(PPI) và dots per inch (DPI) không phải là một.
PPI chỉ số lượng pixel có trên 1 inch của một bức ảnh số hoặc màn hình máy tính. PPI
tuy không ảnh hưởng đến chất lượng thực sự của bản thân bức ảnh nhưng nó có thể ảnh
hưởng đến việc hiển thị bức ảnh đó trên trang web hoặc bản in.
DPI, ở một khía cạnh khác, lại chỉ độ phân giải của các bản in mà máy in có thể tạo ra.
Đây là một đặc tính vật lý của máy in. Mỗi dot của máy in đều có kích thước vật lý xác
định. Máy in sử dụng các dot mực để hiển thị hình ảnh; máy in tạo ra càng nhiều dot trên
một inch vuông thì chất lượng bản in càng cao. Các dòng máy in cấp thấp có DPI thấp
trong khi các dòng máy in cấp cap sẽ có DPI cao. Ví dụ, một máy in hỗ trợ 1200DPI có

nghĩa là máy thể in 1200 điểm trên 1 inch (theo cả chiều ngang lẫn chiều dọc).

Khi in ấn, một điểm quan trọng cần chú ý, đó là phải đảm bảo rằng DPI phải lớn hơn
hoặc bằng PPI. Nếu DPI nhỏ hơn PPI, máy in sẽ không thể thể hiện được đầy đủ được độ
phân giải cao của tấm ảnh. Nếu DPI lớn hơn PPI, máy in sẽ sử dụng nhiều dot mực để
biểu diễn một pixel. Trái ngược với PPI, DPI không phụ thuộc vào kích cỡ trang in. DPI
là một chỉ số cố định với một máy in cho trước.

2.6. Ngôn ngữ HTML
2.6.1. Khái niệm
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế
ra để tạo nên các trang web. Tập tin HTML là một văn bản có chứa các thẻ đánh dấu
(markup tags), các thẻ đánh dấu này giúp các trình duyệt Web hiểu được cách trình bày
và hiển thị trang Web. Tập tin HTML có phần mở rộng (Extension) là htm hay html và
có thể được tạo ra bằng bất cứ chương trình xử lý văn bản đơn giản nào.
Trong tập HTML các phần tử (Element) được đánh dấu bằng các thẻ HTML. Các thẻ này
được bao bởi dấu < và dấu > Thông thường các thẻ HTML được dùng theo một cặp <tên
thẻ> (thẻ bắt đầu, thẻ mở) và </tên thẻ> (thẻ kết thúc, thẻ đóng), văn bản nằm giữa cặp
thẻ này là nội dung của phần tử, một số thẻ không cần thẻ kết thúc (thẻ đóng). Các thẻ
HTML không phân biệt chữ hoa và chữ thường, có nghĩa là các kiểu chữ đều được xem
như nhau.

2.6.2. Chức năng

2.6.3. Cấu trúc cơ bản
13

Cấu trúc cơ bản của một tập tin văn bản HTML
view source
print?

<html>
<head>
</head>
<body>
</body>
</html>

2.7. Định dạng dữ liệu thiết kế web
2.7.1. Định dạng ảnh thiết kế giao diện web
- PNG : (Portable Net Graphics) là định dạng ảnh có nhiều đặc điểm giống GIF ngoại trừ
phần động (Có thể nén để đưa lên net, hỗ trợ lưu ảnh transparancy) nhưng do có dải tần
màu rộng hơn, có thể đến 16 triệu màu, nên ngày càng được sử dụng rộng rãi trên WWW
với các ảnh có chất lượng như ảnh chụp.
- JPG : là định dạng ảnh nén hiệu quả (Joint Photographic Experts Group), có thể nén ảnh
đến vài chục lần, tuy nhiên chất lượng lượng ảnh sẽ suy giảm tỉ lệ thuận với hệ số nén
(Compression) dựa trên nguyên tắc loại bỏ những thông số màu để giảm thông tin cho
file dựa trên xu hướng nhận thức về màu sắc của mắt người. Do vậy, JPG còn được gọi là
định dạng ảnh nén chịu thiệt. Thường được dùng để lưu ảnh chụp, tất nhiên tuỳ theo nhu
cầu mà chọn độ nén thích hợp để bảo toàn chất lượng. Các Lab đều dùng định dạng này
với hệ màu RGB để xuất ảnh.
- TIFF : (Tagged Image File Format) là định dạng chủ yếu để lưu trữ ảnh, bao gồm cả đồ
thị lẫn hình ảnh. Đầu tiên được xấy dựng bởi hãng Aldus kết hợp với Microsoft để dùng
cho kỹ thuật in PostScript. TIFF là định dạng thông dụng cho các ảnh có dãi tần màu
rộng và sâu, phát triển song song với các máy quét ảnh do đó ngày càng trở thành 1 định
dạng hữu dụng được dùng trong in ấn nhờ vừa bảo toàn được thông tin, vừa có thể chấp
nhận các kỹ thuật nén LZW, ZIP có thể làm giảm đáng kể dung lượng.
- GIF : (Graphis Interchange Format : Định dạng trao đổi hình ảnh) là 1 định dạng ảnh
quản lý không quá 256 màu cho 1 ảnh tĩnh cũng như từng khuôn hình cho các ảnh động,
được dùng rộng rãi trên WWW do dùng kỹ thuật nén bảo toàn LZW làm giảm kích thước
file mà không làm thất thoát dữ liệu. Do giới hạn về màu sắc nên thường được dùng cho

các hình vẽ nét, sơ đồ vốn không cần dùng đến dải 16 triệu màu và không phù hợp để lưu
các ảnh chụp.
- SWF: Flash là đối tượng được sử dụng phổ biến trong việc thiết kế giao diện web nói
chung và giao diện thư viện điện tử nói riêng, vì hầu hết thiết kế các flash có qui trình
đơn giản và với khả năng giảm tối đa về dung lượng nhưng vẫn đảm bảo được hình ảnh
động ấn tượng trên các thiết bị hiện thị. Định dạng SWF dùng để lưu trữ các flash cho
việc thiết kế banner hoặc các button ấn tượng với khả năng tùy biến cao như : độ sâu ảnh
trong khung hình ảnh tĩnh (frame) thường tối đa là 8 bit, tương đương 256 màu (256
colors) và số khung hình chuyển động trong 1 giây (thường dao động từ 10, 15, 20, 25,
30 fps(frames per second)).
2.7.2. Định dạng dữ liệu văn bản
14

Định dạng xử lý văn bản nhằm để lưu trữ các đối tượng thông tin dạng văn bản
(text) và hình ảnh tĩnh (graphic).
Hiện nay, với xu hướng phát triển mạnh mẽ của công nghệ thông tin và viễn
thông, thế giới có sự thay đổi lớn vừa tạo ra nhiều thời cơ đồng thời không ít thách thức
trong vấn đề quản trị và sử dụng thông tin, vì thế các chuẩn định dạng để xử lý đối tượng
thông tin dạng văn bản cũng ngày càng xuất hiện nhiều nhằm đảm bảo yếu tố kỹ thuật
phát huy những ưu điểm của công nghệ thông tin và hạn chế những nhược điểm. Sau đây
là một số định dạng xử lý văn bản được sử dụng phổ biến:
- docx và docm: định dạng được tạo ra bởi Microsoft Word 2007.
- sxw: định dạng file được tạo bởi OpenOffice và StartOffice Text.
- dotx, dotm: file mẫu của Word 2007.
- rtf và txt: 2 định dạng thuần văn bản.
- doc: định dạng của Word 97-2007.
- dot: định dạng mẫu của Word 97-2007
- psw: định dạng văn bản Pocket Word (Pocket PC)
- pwd: định dạng của Handheld PC
- odt: định dạng văn bản của OpenDocument

Câu hỏi chƣơng 2
1. Trình bày sơ lƣợc về hệ điều hành mạng. Phân tích ƣu và nhƣợc của một
số trình duyệt cơ bản.
2. So sánh các webserver: Apache, nginx, wamp.
3. So sánh website tĩnh và động.
4. Thiết kế bố cục của website thƣ viện.
5. Trình bày và lấy ví dụ cụ thể cấu trúc của ngôn ngữ HTML cơ bản.
6. Phân tích định dạng dữ liệu thiết kế web.
CHƢƠNG 3
THỰC HÀNH THIẾT KẾ WEB
3.1. Thiết kế cấu trúc website
3.1.1. Thiết kế banner
3.1.2. Thiết kế icon
3.2. Thiết kế web tĩnh bằng Microsoft front page
3.2.1. Khái niệm, chức năng của Front Page
3.2.2. Các bước thiết kế web tĩnh trên Front Page
3.3. Cài đặt các thành phần để thiết kế website động
3.3.1. Cài đặt server
3.3.2. Cài đặt joomla
3.3.3. Xuất bản website joomla
Câu hỏi chƣơng 3
15

1. Phân tích cấu trúc website thƣ viện.
2. Phân tích cấu trúc của front page.
3. Trình bày các thành phần để thiết kế web động.
4. Thiết kế web tĩnh trên phần mềm Front Page với các thành phần sau:
- Banner động định dạng gif.
- Button 3D định dạng gif.

(Chú ý: Các Button có liên kết ngoài (out link))
5. Cài đặt và xuất bản web joomla cơ bản.

KHOA, TRUNG TÂM
TỔ BỘ MÔN
NHÓM/NGƢỜI
BIÊN SOẠN



Phạm Quang Quyền