Đồ án tốt nghiệp khoa đa phương tiện, học viện bưu chính viễn thông (2)

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.65 MB, 34 trang )

Phùng Thị Phương Thanh - B17DCPT190

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO
THỰC TẬP TỐT NGHIỆP
XÂY DỰNG WEBSITE GIỚI THIỆU CHƯƠNG TRÌNH
LIÊN KẾT ĐÀO TẠO CỬ NHÂN QUỐC TẾ
VỚI ĐẠI HỌC LA TROBE – AUSTRALIA

Nơi thực tập
Người hướng dẫn
Giáo viên hướng dẫn
Họ tên sinh viên

:
:
:
:

Trung tâm đào tạo Quốc tế
Ths. Phạm Vũ Minh Tú - Quản lý dự án
Ths. Nguyễn Thị Thanh Tâm
Phùng Thị Phương Thanh - B17DCPT190

Hà Nội, 2021

1

Phùng Thị Phương Thanh - B17DCPT190

TRUNG TÂM ĐÀO TẠO

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

QUỐC TẾ

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

PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP
Họ và tên sinh viên thực tập : Phùng Thị Phương Thanh
Đơn vị thực tập : Trung tâm đào tạo quốc tế
Thời gian thực tập : Từ ngày 19/07/2021 đến ngày 31/08/2021

NHẬN XÉT CỦA CƠ SỞ THỰC TẬP
1. Chấp hành nội quy và quy định của cơ quan:
………………………………………………………………………………………….…………………..
………………………………………………………………………………………….…………………..
………………………………………………………………………………………….…………………..

2. Ý thức học tập:
………………………………………………………………………………………….…………………..
………………………………………………………………………………………….…………………..
………………………………………………………………………………………….…………………..

3. Quan hệ, giao tiếp tại đơn vị:
………………………………………………………………………………………….…………………..
………………………………………………………………………………………….…………………..
………………………………………………………………………………………….…………………..

Hà Nội , ngày 31 tháng 08 năm 2021
Xác nhận của cơ quan thực tập

Người đánh giá

(Ký, ghi rõ họ tên và đóng dấu)

(Ký và ghi rõ họ tên)

2

Phùng Thị Phương Thanh - B17DCPT190

HỌC VIỆN CƠNG NGHỆ
BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

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

Độc lập - Tự do - Hanh phúc

ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP
(Thời gian thực tập: Từ ngày 19/07/2021 đến ngày 31/08/2021 )
Họ và tên sinh viên: Phùng Thị Phương Thanh
Lớp: D17PTDPT01
NỘI DUNG ĐÁNH GIÁ
1. Chấp hành kỷ luật: (Tốt, Trung bình, hoặc Yếu)
2. Ý thức học tập: (Tốt, Trung bình, hoặc Yếu)

3. Quan hệ, giao tiếp: (Tốt, Trung bình, hoặc Yếu)
4. Điểm (Thang điểm 10)
Các ý kiến khác (nếu có:

Ngày …….tháng ……..năm 2021
Giáo viên hướng dẫn thực tập
(Ký và ghi rõ họ tên)

LỜI CẢM ƠN
Để hoàn thành báo cáo thực tập tốt nghiệp này, em xin chân thành cảm ơn
các thầy cô trong Học viện Công nghệ Bưu chính Viễn thơng - đặc biệt các thầy
cơ trong khoa Đa phương tiện trong suốt thời gian qua đã trang bị kiến thức cho
em thực hiện đề tài này.

3

Phùng Thị Phương Thanh - B17DCPT190

Em xin chân thành thầy Ths. Phạm Vũ Minh Tú đã hướng dẫn và tận tình
giúp đỡ, chỉ bảo em trong suốt thời gian thực hiện đề tài, giúp em học hỏi thêm
nhiều kinh nghiệm để từ mình hồn thành tốt đề tài này.
Ngồi ra em xin cảm ơn cô Ths. Nguyễn Thị Thanh Tâm đã giúp em rất
nhiều ngay từ lúc còn bỡ ngỡ thực tập. Cơ đã hướng dẫn, góp ý và giúp em hoàn
thiện thực tập tốt nghiệp trong thời gian qua.
Em cũng xin gửi lời cảm ơn các anh hướng dẫn, hỗ trợ kiến thức cũng
như kĩ thuật và các bạn cùng nhóm thực tập trong suốt thời gian nghiên cứu,
giúp em nhận được nhiều kinh nghiệm quý báu trong thời gian thực hiện đề tài
này.
Em xin chân thành cảm ơn!

4

Phùng Thị Phương Thanh - B17DCPT190

DANH SÁCH CÁC TỪ VIẾT TẮT
Tên viết tắt

Từ đầy đủ

WWW

World Wide Web

HTML

Hyper Text Markup Language

XHTML

Extensible HyperText Markup Language

FTP

File Transfer Protocol

JSP

Java Server Pages

PHP

Hype Text Preprocessor

Perl

Practical Extraction and Report Language

PC

Personal Computer

URL

Universal Resource Locator

SQL

Structured Query Language

ASP

Active Server Page

CGI

Computer Generated Imagery

ĐTQT

Đào tạo Quốc tế

QTKD

Quản trị kinh doanh

CNTT

Công nghệ thông tin

5

Phùng Thị Phương Thanh - B17DCPT190

MỤC LỤC
Phần A : GIỚI THIỆU ĐƠN VỊ THỰC TẬP

6

I. Chức năng

6

II. Tổ chức

8

III. Các lĩnh vực hoạt động.

9

Phần B : NỘI DUNG THỰC TẬP

11

I. Giới thiệu chung

11

II. Nội dung thực tập

12

A.

Cơ sở lý luận của việc thiết kế website

12

B.

Tổng quan về sản phẩm

19

C.

Xây dựng sản phẩm

29

Phần C. KẾT LUẬN, ĐÁNH GIÁ QUÁ TRÌNH THỰC TẬP

32

Phần A : GIỚI THIỆU ĐƠN VỊ THỰC TẬP

I. Chức năng
Trung tâm đào tạo Quốc tế là đơn vị trực thuộc Học viện Cơng nghệ Bưu
chính Viễn thơng (PTIT) - trường đại học công lập đứng đầu trong lĩnh vực
CNTT&TT tại Việt Nam. Trung tâm đào tạo Quốc tế ra đời nhằm mang đến
những cơ hội tuyệt vời cho tất cả sinh viên có cơ hội tham gia chương trình đào
tạo quốc tế và gia tăng cơ hội làm việc tại nước ngoài đồng thời mang đến cho
các sinh viên trong nước và quốc tế các chương trình trao đổi và dịch chuyển
sinh viên. Trung tâm mang lại sự tiếp cận tốt nhất tới các chương trình đào tạo
quốc tế cho sinh viên trong nước và nước ngoài tại PTIT cũng như CIE cung cấp
các chương trình ưu việt với sự kết nối chặt chẽ với các đối tác quốc tế.

6

Phùng Thị Phương Thanh - B17DCPT190

Trung tâm đào tạo quốc tế (CIE) cung cấp các Chương trình mang tính định
hướng nghề nghiệp từ cơ bản đến nâng cao phù hợp với các bạn mong muốn có
việc làm ngay sau khi tốt nghiệp cũng như muốn nâng cao trình độ của bản thân
bao gồm các chương trình:
✔ Chương trình liên kết đào tạo quốc tế bậc đại học và thạc sĩ ( 2+2, 3+1, 1+1)

và tiến sĩ
✔ Chương trình trao đổi và dịch chuyển sinh viên cho sinh viên trong nước và
quốc tế
✔ Chương trình du học kết nối cho sinh viên tốt nghiệp làm việc tại thị trường
lao động toàn cầu
✔ Các khóa học định hướng nghề nghiệp từ cơ bản đến nâng cao giúp sinh viên
có khả năng làm việc ngay sau khi tốt nghiệp. Bên cạnh đó, học viện cũng
xây dựng các khóa học ngắn hạn giúp các học viên có mong muốn cũng như
hứng thú làm việc tại Nhật Bản. Khóa học ngắn hạn đem lại cho các sinh
viên PTIT thành thạo ngôn ngữ Tiếng Nhật nhanh nhất (1 năm 3 tháng) vừa
đáp ứng được chuẩn đầu ra cho các doanh nghiệp CNTT tại Nhật Bản cũng
như các doanh nghiệp CNTT có vốn đầu tư Nhật Bản tại Việt Nam.
Ngoài việc cung cấp kiến thức chuyên ngành cho các sinh viên lãnh đạo
Học viện và Trung tâm ĐTQT – đơn vị quản lý tổ chức các lớp CLC luôn luôn
quan tâm tới việc xây dựng kế hoạch, triển khai tổ chức các hoạt động ngoại
khóa bổ trợ học tập dành cho sinh viên Hệ CLC. Đáp ứng nhu cầu và mong
muốn của sinh viên CLC được tham gia các khóa đào tạo kỹ năng mềm nhằm
tiếp thu, cập nhật những kiến thức nền tảng thiết thực, lĩnh hội và trau dồi các kỹ
năng mềm để phát triển tồn diện năng lực bản thân nhằm mục đích khởi nghiệp
thành công. Vận dụng hiệu quả kiến thức chuyên ngành được đào tạo vào trong
công việc sau khi tốt nghiệp đại học. Trung tâm ĐTQT đã xây dựng kế hoạch,
phối hợp với Khoa QTKD của Học viện chủ trì triển khai khóa đào tạo kỹ năng
mềm “Startup trong lĩnh vực CNTT và truyền thông” dành cho sinh viên Hệ đào
tạo CLC.
7

Phùng Thị Phương Thanh - B17DCPT190

Khơng chỉ có vậy, Trung tâm đào tạo Quốc tế cịn có những học bổng dành

cho các đối tượng là sinh viên quốc tế tài năng, những người được kỳ vọng sẽ
đóng vai trị tiên phong trong sự nghiệp ngành ICT của đất nước.
Ngay từ những ngày đầu thành lập, trung tâm đào tạo quốc tế CIE đã đề ra
những nguyên tắc trong hoạt động giáo dục và luôn cam kết thực hiện theo
những nguyên tắc này.
* Tính thực tế
Giáo trình được cập nhật những kiến thức, tạo ra nhiều chương trình học
thuật chất lượng hướng đến hội nhập quốc tế, cung cấp các chương trình giáo
dục, trao đổi, chuyển dịch, cơng nhận học thuật đa dạng đến người học. Bên
cạnh hệ thống lý thuyết bài bản, học viên luôn được song song đạo tạo các kỹ
năng mềm. Các bài tập chính là yêu cầu công việc thực tế của các công ty trên
thị trường, các công ty đối tác của Trung tâm đào tạo quốc tế CIE.
* Chất lượng giảng dạy
Trung tâm Đào tạo Quốc tế của Học viện Cơng nghệ Bưu chính Viễn
thơng mang trong mình Sứ mạng cung cấp các chương trình đào tạo quốc tế chất
lượng tốt, các chương trình đào tạo định hướng nghề nghiệp và nâng cao kỹ
năng theo các tiêu chuẩn quốc tế; và các dịch vụ về quốc tế hố giáo dục và đạo
tạo có chất lượng cho sinh viên và xã hội để đáp ứng xu hướng phát triển và yêu
cầu thực tiễn của các tổ chức, doanh nghiệp và xã hội trong sự phát triển nhanh
chóng của thế giới hiện đại ngày nay.
* Lợi ích của học viên
Học viên được cập nhật những kiến thức mới, tiếp xúc với nhiều công nghệ
mới, giải đáp những thắc mắc ngoài giờ học, giao lưu, chia sẻ giữa các học
viên. Học viên tham gia các dự án cũng như được học bổng từ trung tâm.
II. Tổ chức
Để đảm bảo tính linh hoạt cao yêu cầu các hoạt động có hiệu quả thì phải tổ
chức bộ máy hoạt động với quy mô hợp lý nhất, tối ưu nhất, mọi khó khăn sai
lầm phải được khắc phục kịp thời. Các bộ phận chức năng phải có sự liên kết hỗ
trợ lẫn nhau để thực hiện các mục tiêu đặt ra. Giám đốc quản lý toàn bộ hoạt
8

Phùng Thị Phương Thanh - B17DCPT190

động có kế hoạch điều chỉnh kịp thời và các bộ phận chức năng chịu sự chỉ đạo
từ giám đốc. Nhiệm vụ được quy định theo nguyên tắc tập trung dân chủ trong
quản lý. Cơ cấu này đảm bảo nguồn lực để giải quyết các vấn đề trọng tâm. Bộ
máy tổ chức được thể hiện qua sơ đồ sau .
Cơ cấu nhân sự của công ty bao gồm:
Giám đốc: 1 người
Phó giám đốc : 1 người
Tổ đào tạo: 5 giảng viên
Tổ dự án : 1 giảng viên
Giám đốc

Phó giám đốc

Tổ đào tạo

Tổ dự án

Giám đốc: Giám đốc hiện là PGS.TS Hoàng Hữu Hạnh, là người trực tiếp quản
lý và lãnh đạo Trung tâm đào tạo quốc tế CIE.
Phó giám đốc: cơ Nguyễn Minh Phượng chức năng quản lý hồ sơ của nhân viên
đảm nhiệm các công việc liên quan đến học viên và đối tác.
Tổ đào tạo: bao gồm các thầy cô
✔ Cô Phạm Trần Cẩm Vân
✔ Cô Lê Thuý Hà
✔ Cô Trần Thị Lan Phương
✔ Cô Nguyễn Thị Lụa

Bộ phận đào tạo đảm nhiệm các công việc liên quan đến đào tạo học viên
và tổ chức các chương trình đào tạo từ kỹ năng chuyên môn đến kỹ năng mềm
cho học viện cũng như truyền đạt lại những kinh nghiệm tích lũy trong nhiều
năm làm việc.
Tổ dự án: Ths. Phạm Vũ Minh Tú.
III. Các lĩnh vực hoạt động.
9

Phùng Thị Phương Thanh - B17DCPT190

Trung tâm đào tạo quốc tế CIE hoạt động chủ yếu ở lĩnh vực đào tạo và
phát triển sinh viên với những khóa học ngắn hạn và dài hạn về công nghệ thông
tin. Bên cạnh đó, trung tâm đào tạo Quốc tế CIE cịn đóng vai trò kết nối giữa
doanh nghiệp và các bạn học viên đã từng học tập tại trung tâm, mở ra con
đường phát triển toàn diện, giao lưu quốc tế.
1. Các hoạt động trong lĩnh vực giáo dục:
● Các chương trình đào tạo:
⮚ 2+2 Bachelor Degree trong công nghệ thông tin với đại học La Trobe
(LTU).
⮚ Học bổng Chương trình đại học Cơng nghệ thơng tin Avis.
⮚ Chương trình Liên kết Quốc tế dành cho các cấp độ khác nhau của Cử
nhân, Kỹ sư, Thạc sĩ (2 + 2, 3 + 1, 1 + 1) và Tiến sĩ.
⮚ Các chương trình trao đổi / di chuyển trong và ngoài nước dành cho sinh
viên trong nước và quốc tế.
⮚ Chương trình đại học chất lượng cao.
⮚ Các chương trình CNTT quốc tế.
⮚ Các chương trình liên kết quốc tế.
⮚ Các khóa đào tạo chuyên nghiệp.
● Các workshop

⮚ Hội thảo bằng tiếng Anh với chủ đề “Du hành thời gian”.
⮚ Hội thảo từ một sinh viên PTIT trở thành giảng viên CSI / CUNY.
⮚ Sự kiện ngày Châu Âu 2021 tại PTIT.
● Các dự án
⮚ Khuyến mại EU thông qua các giao thông đa phương tiện.
⮚ Dự án Proeuhe.
⮚ Dự án Eramus + Jean Monnet.
⮚ Dự án Voyage- Cơ hội lao động trẻ và lớp học tại Việt Nam.
⮚ Trường Đại học Xây dựng- ngành công nghệ học tập và phát triển qua đổi
mới và công nghệ ( xây dựng - CNTT).
10

Phùng Thị Phương Thanh - B17DCPT190

2. Các chương trình học bổng
● Học bổng toàn bộ “The Belt and Road”

● Học bổng AVIS +

Phần B : NỘI DUNG THỰC TẬP
I. Giới thiệu chung
ĐỀ TÀI: Xây dựng Website Giới thiệu chương trình liên kết đào tạo cử nhân
quốc tế với đại học La Trobe - Australia
Nội dung công việc:
Công việc 1: Khảo sát sơ bộ về môi trường làm việc nơi thực tập
Cơng việc 2: Tìm hiểu các kiến thức cơ bản về phát triển giao diện web hiện nay
Công việc 3: Tham gia dự án và tìm hiểu yêu cầu dự án..
Cơng việc 4: Phát triển và hồn thiện dự án được giao.
Công việc 5: Báo cáo thực tập.

TT

Nội dung thực tập

Thời gian
11

Mục tiêu

Phùng Thị Phương Thanh - B17DCPT190

1

Khảo sát sơ bộ về mơi Từ ngày 19/7 Tìm hiểu về mơi trường làm
trường làm việc nơi đến ngày 24/7 việc, cơ cấu tổ chức của cơng
thực tập

2

ty, chức năng, nhiệm vụ các

phịng ban,…
Tìm hiểu các kiến thức Từ ngày 24/7 Tìm hiểu về các phong cách
cơ bản về phát triển đến ngày 10/8 thiết kế đồ web, các nội dung
giao diện web hiện nay

chủ đề phù hợp với web.
Tìm hiểu về các kiến thức cơ
bản về lập trình web: ngơn

ngữ,cơng cụ,Tool hỗ trợ, và kỹ

3

năng khác.
Tham gia dự án và tìm Từ ngày 11/8 Lên ý tưởng, phác thảo, tương
hiểu yêu cầu dự án.

4

đến ngày 13/8 tác cho công việc được giao.

Phát triển và hoàn thiện Từ ngày 13/8 Thực hiện và hoàn thiện các
dự án được giao.

đến ngày 17/8 công việc được phân công, trao
đổi công việc liên tục với người
hướng dẫn và nhóm làm việc.

5

Hồn thiện báo cáo Từ ngày 18/8

thực tập
Kết quả cần đạt:

đến ngày 31/8

● Hiểu và tham gia vào quy trình xây dựng website.
● Hồn thành tốt các trách nhiệm được giao.

● Có sự trao đổi về các nội dung cơng việc với nhóm thực hiện.
● Thích nghi với môi trường làm việc chuyên nghiệp.
● Rút ra những bài học kinh nghiệp sau thời gian thực tập tại đơn vị.
II. Nội dung thực tập
A. Cơ sở lý luận của việc thiết kế website
1.

Khái niệm website

Website là tập hợp của rất nhiều trang web một loại siêu văn bản (tập tin
dạng HTML hoặc XHTML) trình bày thơng tin trên mạng Internet tại một địa
12

Phùng Thị Phương Thanh - B17DCPT190

chỉ nhất định để người xem có thể truy cập vào xem. Trang web đầu tiên người
xem truy cập từ tên miền thường được gọi là trang chủ (homepage), người xem
có thể xem các trang khác thông qua các siêu liên kết (Hyperlinks). Đặc điểm
tiện lợi của website: thông tin dễ dàng cập nhật, thay đổi, người sử dụ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 (muốn đăng bao nhiêu thông tin cũng được,
không giới hạn số lượng thơng tin, hình ảnh...) và khơng giới hạn phạm vi khu
vực sử dụng (tồn thế giới có thể truy cập). Website là một tập hợp một hay
nhiều trang web.
2. Lịch sử ra đời
Ngày 6/8/1991 đã trở thành một mốc quan trọng khi những đường liên kết
tới những dạng mã lệnh về www được đưa lên nhóm thảo luận alt.hypertext để
những người khác có thể tải về và thử nghiệm nó. Và đó chính là ngày mà web
phổ biến ra toàn thế giới

Dự án WWW đã bùng nổ vào tháng 4/1993 khi trình duyệt web dành cho
máy tính cá nhân đầu tiên ra đời. Đây là sản phẩm của ông Marc Andreessen tại
Trung tâm Ứng dụng Siêu máy tính thuộc trường Đại Học Illinois. Nhóm nghiên
cứu dự án web của viện Cern đã khơng có đủ nhân lực để viết các trình duyệt
cho các hệ thống PC, Mac hay Unix. Trình duyệt có tên là Mosaic này đã đạt
được thành cơng to lớn khi nó tạo được nhiều thói quen sử dụng web vẫn được
áp dụng cho đến tận hơm nay. Thí dụ như khái niệm ban đầu về web khơng hề
có chỗ cho bookmark hay favourites. Cũng trong năm 1993, trường Đại Học
Minnesota bắt đầu thu phí Gopher, do đó rất nhiều người đã xem xét chuyển
sang sử dụng một công nghệ khác.
Ed Vielmetti, một trong những người dùng web đầu tiên và hiện là một trợ
lý nghiên cứu tại trường Đại Học Thơng tin Michigan, nói rằng trong suốt những
năm đầu tiên, công nghệ web đã thực sự chứng tỏ sự hữu ích của nó đối với
những người dùng internet trung bình. Các hệ thống Gopher và FTP thông
thường vẫn do các công ty hay tổ chức lớn thiết lập. Cịn Usenet thì lại khơng
tồn tại lâu bởi vậy nó buộc những người đưa ra một quan điểm phải thường
13

Phùng Thị Phương Thanh - B17DCPT190

xuyên đăng lại ý kiến của mình. Ban đầu, người ta đã sử dụng các trang web như
để tự bày tỏ mình theo một cách thức mà các cơng nghệ khác khơng cho phép.
Ơng Vielmetti cho rằng các mã lệnh web rất ít lỗi và thu hút người ta sử dụng
nó.
Nhưng ơng Groff cho rằng phải đến tận hơm nay thì web mới được như sự
hình dung của những người tạo ra nó. Theo ý đồ ban đầu thì web là một phương
tiện mà.
3. Web tĩnh
- Trang web tĩnh thường được xây dựng bằng các ngôn ngữ HTML,

DHTML…
Trang web tĩnh thường được dùng để thiết kế các trang web có nội dung ít
cần thay đổi và cập nhật.
Website tĩnh là website chỉ bao gồm các trang web tĩnh và khơng có cơ sở
dữ đi kèm.
- Website tĩnh thích hợp với cá nhân, tổ chức, doanh nghiệp vừa và nhỏ mới
làm quen với môi trường Internet.
* Ưu điểm cơ bản:
Thiết kế đồ hoạ đẹp: Trang Web tĩnh thường được trình bày ấn tượng và
cuốn hút hơn trang web động về phần mỹ thuật đồ hoạ vì chúng ta có thể hồn
tồn tự do trình bày các ý tưởng về đồ hoạ và mỹ thuật trên toàn diện tích từng
trang web tĩnh.
Tốc độ truy cập nhanh: Tốc độ truy cập của người dùng vào các trang web
tĩnh nhanh hơn các trang web động vì khơng mất thời gian trong việc truy vấn
cơ sở dữ liệu như các trang web động.
Thân thiện hơn với các máy tìm kiếm (search engine): Bởi vì địa chỉ URL
của các .html, .htm,… trong trang web tĩnh không chứa dấu chấm hỏi như trong
web động.
Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp hơn nhiều so với
website động vì khơng phải xây dựng các cơ sở dữ liệu, lập trình phần mềm cho
14

Phùng Thị Phương Thanh - B17DCPT190

website và chi phí cho việc thuê chỗ cho cơ sở dữ liệu, chi phí u cầu hệ điều
hành tương thích (nếu có).
* Nhược điểm cơ bản
Khó khăn trong việc thay đổi và cập nhật thông tin: Muốn thay đổi và cập
nhật nội dung thông tin của trang website tĩnh. Bạn cần phải biết về ngơn ngữ

html, sử dụng được các chương trình thiết kế đồ hoạ và thiết kế web cũng như
các chương trình cập nhật file trên server.
Thơng tin khơng có tính linh hoạt, không thân thiện với người dùng: Do
nội dung trên trang web tĩnh được thiết kế cố định nên khi nhu cầu về truy cập
tăng cao thì thơng tin trên website tĩnh sẽ không đáp ứng được.
: Khi muốn mở rộng, nâng cấp một website hầu như là phải làm mới lại
website.
4. Web động
Website động (Dynamic website) là website có cơ sở dữ liệu, được cung
cấp công cụ quản lý website (Admin Tool).
Web động là thuật ngữ được dùng để chỉ những website có cơ sở dữ liệu
và được hỗ trợ bởi các phần mềm phát triển web.
Với web động, thông tin hiển thị được gọi ra từ một cơ sở dữ liệu khi
người dùng truy vấn tới một trang web. Trang web được gửi tới trình duyệt gồm
những câu chữ, hình ảnh, âm thanh hay những dữ liệu số hoặc ở dạng bảng hoặc
ở nhiều hình thức khác nữa.
Chẳng hạn, có một ứng dụng cơ sở có chức năng như một công cụ thương
mại điện tử (một cửa hàng trực tuyến) trưng bày catalogue sản phẩm trên
website hay theo dõi kho hàng, khi một mặt hàng được giao, ngay lập tức những
trang có liên quan đến sản phẩm đó phản ánh sự thay đổi này. Những website cơ
sở dữ liệu cịn có thể thực hiện những chức năng truyền và xử lý thông tin giữa
doanh nghiệp doanh nghiệp.
Web động thường được phát triển bằng các ngơn ngữ lập trình tiên tiến
như PHP, ASP, ASP.NET, Java, CGI, Perl, và sử dụng các cơ sở dữ liệu quan hệ
mạnh như Access, Mysql, MS SQL, Oracle, DB2.
15

Phùng Thị Phương Thanh - B17DCPT190

Thông tin trên web động ln ln mới vì nó dễ dàng được thường xun
cập nhật thông qua việc sử dụng các công cụ cập nhật của các phần mềm quản
trị web . Thông tin luôn được cập nhật trong một cơ sở dữ liệu và người dùng
Internet có thể xem những chỉnh sửa đó ngay lập tức. Vì vậy website được hỗ
trợ bởi cơ sở dữ liệu là phương tiện trao đổi thông tin nhanh nhất với người
dùng Internet. Điều dễ nhận thấy là những website thường xuyên được cập nhật
sẽ thu hút nhiều khách hàng tới thăm hơn những website ít có sự thay đổi về
thơng tin.
Web động có tính tương tác với người sử dụng cao. Với web động, ta hồn
tồn có thể dễ dàng quản trị nội dung và điều hành website của mình thơng qua
các phần mềm hỗ trợ mà khơng nhất thiết cần phải có kiến thức nhất định về
ngơn ngữ lập trình HTML, lập trình web.
Tất cả các website Thương mại điện tử, các mạng thương mại, các mạng
thông tin lớn, các website của các tổ chức, doanh nghiệp hoạt động chuyên
nghiệp trên Net đều sử dụng công nghệ web động. Có thể nói web động là
website của giới chuyên nghiệp hoạt động trên môi trường Internet.
5. Sự khác nhau giữa web tĩnh và web động
Website động có thêm các phần xử lý thông tin và truy xuất dữ liệu cịn
website tĩnh thì khơng.
Web Động: có đặc điểm là có tính linh hoạt và có thể cập nhật thông tin
thường xuyên, quản lý các thành phần trên website dễ dàng. Loại website này
thường được viết bằng các ngôn ngữ lập trình như PHP, ASP.NET, JSP, Perl,...,
quản trị Cơ sở dữ liệu bằng SQL hoặc MySQL,...
- Web Tĩnh: Website tĩnh do được viết bằng ngôn ngữ HTML theo từng
trang như một cuốn sách mỏng, khơng có cơ sở dữ liệu và khơng có cơng cụ
quản lý thơng tin trên website. Thông thường website tĩnh được thiết kế bằng
các phần mềm như Microsoft Frontpage, Dreamweaver,... Đặc điểm của website
tĩnh là ít thay đổi nội dung, sự thay đổi nội dung này thường liên quan đến sự
thay đổi các văn bản đi kèm thể hiện nội dung trên đó.
6. Các bước để thiết kế một trang Web

16

Phùng Thị Phương Thanh - B17DCPT190

Bước 1: Phân tích người dùng và tự đánh giá chính mình
Nếu khơng biết người dùng dự định là ai thì tất cả việc thiết kế, cho dù
được thực hiện kĩ lưỡng đến đâu cũng chỉ dẫn đến thất bại. Cần phải biết các
thông tin về người dùng như: trình độ, sở thích, các lĩnh vực quan tâm, cấu hình
trang thiết bị, phần mềm… để tránh đưa ra một trang web khơng có tác dụng.
Mơ tả mục tiêu.
Xác định chính xác mục tiêu của trang sẽ thiết kế một cách ngắn gọn.
Mô tả mục tiêu một cách súc tích, rõ ràng. Việc xác định mục tiêu để thiết
kế website là vơ cùng quan trọng, nó ảnh hưởng đến chất lượng của website sau
này, vì vậy cơng việc này địi hỏi phải được làm cẩn thận, chính xác.
Xác định vấn đề giải quyết.
Từ mơ tả mục tiêu ở bước trên, nêu ra các vấn đề cần giải quyết để đạt
được mục tiêu tóm tắt phương pháp giải quyết và các vấn đề liên quan.
Xác định người dùng.
Bước tiếp theo trong công việc thiết kế là xác định người dùng chính của
website để có thể thiết kế cấu trúc phù hợp với nhu cầu, mong muốn cũng như
trình độ hiểu biết, sở thích và u cầu của người truy cập website. Một hệ thống
được thiết kế tốt sẽ thích hợp cho một dải rộng trình độ, nhu cầu người sử dụng.
Các trang web chủ (Homepage) cho các chương trình duyệt web cũng nên
tương tự như các bìa tạp chí. Mục tiêu là tính tồn thể với hình ảnh và chủ để nội
dung bắt mắt. Tất cả các liên kết trên trang chủ này chỉ tiếp đến các trang bên
trong website. Phải tạo được thông báo ngắn gọn, súc tích có thể được người
truy cập website quan tâm.
Liệt kê các nguồn tài ngun.
Có sẵn những gì để hồn thành công việc về cả mặt trang thiết bị, công cụ

phần mềm, … và cả về trình độ chun mơn ? Có thể làm được những gì, và sẽ
nhờ giúp đỡ những gì ?
Bước 2: Thiết kế các chức năng và cấu trúc trang
Đây là một bước quan trọng trong q trình thiết kế. Vì vậy, nó địi hỏi
dành nhiều thời gian, cơng sức, và địi hỏi tính thẩm mỹ cũng như khả năng sáng
17

Phùng Thị Phương Thanh - B17DCPT190

tạo của người thiết kế. Sau đây là công việc để thiết kế các chức năng và cấu
trúc trang có hiệu quả.
Phác thảo ý tưởng thiết kế, Ý tưởng thiết kế là một yếu tố vơ cùng quan
trọng trong việc thiết kế website.
Bước 3: Tìm cách trình bày ấn tượng và hiệu quả
Ngay cả một cấu trúc tốt nhất cũng sẽ thất bại nếu việc trình bày thơng tin
khơng trực quan và ấn tượng.
Đưa ra càng nhiều cách trình bày từ khả năng của chính bản thân mình.
Ln cập nhật các thay đổi về cơng nghệ web. Nên ln có các tài liệu mới
nhất về HTML, cũng như các thông tin về các dạng tập tin và các thiết bị mới
được hỗ trợ bởi các nhà sản xuất.
Luôn ghi nhớ: Đối tượng đánh giá là người truy cập website chứ không
phải là người thiết kế website đó.
Thử nhiều giải pháp và ghi nhận các nhận xét, phản hồi của những người
cộng tác để hoàn chỉnh thiết kế.
Bước 4: Xây dựng nội dung
Là một người thiết kế website, bản thân nhà thiết kế có thể có hoặc không
chịu trách nhiệm tạo nội dung (như văn bản, hình ảnh, âm thanh, video, …). Vì
việc tạo nội dung thường khơng thể đợi đến lúc thiết kế hình thành.
Thiết lập liên lạc mật thiết với người tạo nội dung website. Đưa ra các quy

ước, đặc tả cho nội dung như: môi trường hỗ trợ, định dạng tập tin, cách nén,
quy ước đặt tên tệp tin, …
Đảm bảo càng nhiều thơng tin càng tốt. Cần phải có sự kết hợp chặt chẽ
giữa văn bản và đồ họa, hình ảnh, âm thanh trong nội dung.
Tạo một cấu trúc cây hợp lý cho nội dung và thường xuyên sao lưu để đảm
bảo an toàn.
Bước 5: Thiết kế và kiểm tra khung trang web
Trong khi đang tiến hành xây dựng nội dung, đây là lúc kiểm tra các chức
năng và cấu trúc được xây dựng trong bước 2 xem nó hoạt động như thế nào.
18

Phùng Thị Phương Thanh - B17DCPT190

Đây là bước chuyển các mô tả về chức năng, về thiết kế ban đầu sang một thể
hiện là các trang web cụ thể.
Bước 6: Đưa nội dung vào
Trong trường hợp tốt nhất, các khung dành cho văn bản và đồ họa sẽ được
điền vào bằng nội dung thực sự của nó một cách dễ dàng và ăn khớp. Tuy nhiên
điều này hiếm khi xảy ra vì một lẽ, hình ảnh và văn bản đưa vào có thể khơng
vừa với khung thiết kế dành cho nó như dự định ban đầu. Cần phải thêm một số
thao tác nữa mới có thể thực hiện xong chuyện này.
Trước tiên hãy cho các trang hoạt động cục bộ, riêng lẻ để dễ kiểm tra,
hiệu chỉnh, đánh giá, …
Làm việc theo module, nghĩa là cho nhóm các trang liên quan nhau hoạt
động trôi chảy trước khi mở rộng ra.
- Thay đổi một quyết định thiết kế trước đó nếu cần thiết. Có thể bản thân
người thiết kế đã giả định sai, hoặc là công nghệ đã thay đổi lúc đưa nội dung
vào, …
Bước 7: Kiểm tra và đánh giá

Các trang web hiệu quả nhất là kết quả của việc thiết kế và đánh giá cẩn
thận.
Kiểm tra hoạt động của các liên kết nội bộ và các nguồn tài nguyên.
Kiểm tra độ chính xác của các liên kết ngoại
Thử các trang với nhiều trình duyệt khác nhau. Thực hiện điều này để
kiểm tra tính tương thích của trang với các trình duyệt, xem thử thiết kế trang đã
tận dụng hết các hỗ trợ của trình duyệt chưa, …
Thử các trang bằng nhiều cách kết nối khác nhau. Thử xem việc hiển thị
các trang có ảnh hưởng như thế nào nếu kết nối bằng mạng cục bộ, đường kết
nối tốc độ cao, đường điện thoại, …
B. Tổng quan về sản phẩm
1.

Xác định bài tốn

- Xây dựng Website Giới thiệu chương trình liên kết đào tạo cử nhân quốc
tế với đại học La Trobe - Australia.
19

Phùng Thị Phương Thanh - B17DCPT190

2.

Thiết kế chức năng và cấu trúc trang
Đây là trang web giới thiếu chương trình liên kết đào tạo cử nhân quốc tế

được hợp tác giữa trường đại học La Trobe - Australia và trung tâm đào tạo quốc
tế CIE trực thuộc Học viện Công nghệ Bưu chính Viễn thơng. Vậy nên chúng
em đã lựa chọn 3 màu chủ yếu cho website: Đỏ, xanh lam và trắng

- Lựa chọn thiết kế website theo kỹ thuật Lading page.
- Lý do lựa chọn thiết kế website theo kỹ thuật Lading page.
Thiết kế Landing Page là khái niệm quen thuộc bạn sẽ hay nghe nói đến
trong lĩnh vực thiết kế web hoặc trong các Dịch vụ thiết kế website chuyên
nghiệp. Và ngay cả trong hoạt động trải nghiệm Internet thường ngày bạn cũng
bắt gặp rất nhiều thiết kế Landing Page cực kì đẹp và thu hút từ các doanh
nghiệp.
Nói theo cách hiểu thơng thường, Landing Page là một trang có giao diện,
nội dung và tên miền gần giống như một trang web bình thường. Tuy nhiên nó
đơn giản hơn và chỉ tập trung vào một nội dung nhất định (VD: Chương trình
khai trương cửa hàng của nhãn hàng X, giới thiệu sản phẩm mới của nhãn hàng
Y, Sự kiện Z danh cho các doanh nhân trẻ…) và thậm chí cũng có một số giao
diện Landing Page chỉ gói gọn nội dung trong 1 trang duy nhất.
Thông qua thiết kế Landing Page, người dùng sẽ tiếp nhận được khá
nhiều thông tin (đa phần là các thông tin mới cập nhật) và đây cũng là một con
đường để kéo người dùng vào xem website chính của bạn. Lấy ví dụ, trang
thương mại điện tử Tiki hay làm các trang Landing Page sự kiện mua sách “Giờ
vàng” với những đầu sách hot, sau khi “dạo chơi” trong Landing Page một vòng
khách hàng sẽ dần có ấn tượng và lần sau khi có nhu cầu mua hàng, họ sẽ truy
cập vào trang web chính thức của doanh nghiệp đó.
3.

Lựa chọn mơi trường thiết kế website: Figma

a.

Tính tương thích

Figma hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt
web, từ Macs, Windows, Linux đến Chromebooks đều có thể dùng Figma. Đây

20

Phùng Thị Phương Thanh - B17DCPT190

là công cụ design duy nhất có thể làm được điều này. Tất cả mọi người đều có
thể chia sẻ, mở và chỉnh sửa một file Figma dễ dàng dù đang dùng hệ máy nào.
Trong nhiều cơng ty, designer thường dùng Macs trong khi đó developer lại
dùng Windows. Figma giúp hai bên có thể hợp tác được dễ dàng hơn. Figma
cũng giảm thiểu việc chuyển qua lại các file hình ảnh hay pdf giữa team design,
account và khách hàng. Bây giờ tất cả mọi thứ đều trở nên dễ dàng hơn chỉ với
một đường link.
Riêng với bản thân mình, trước đây mình đã phải mua thêm máy Mac chỉ
để sử dụng Sketch. Và mỗi khi chuyển file thiết kế, mình phải cân nhắc xem
người nhận đang dùng hệ điều hành nào để gửi loại file thích hợp. Giờ khi dùng
Figma, mình đã khơng cần phải lo đến điều ấy.
b.

Hỗ trợ làm việc nhóm hiệu quả

Figma là một cơng cụ browser-based, do đó mọi người trong team có thể
làm việc với nhau tương tự như làm việc trong Google Docs. Với mỗi thành
viên đang xem hoặc chỉnh sửa file, Figma đại diện bằng một avatar tròn trên
thanh công cụ với tên riêng. Click vào avatar này bạn sẽ được thấy thành viên đó
đang nhìn phần nào trên design. Chức năng này rất tiện khi bạn muốn biết ai
đang làm việc trên file.

Làm việc nhóm kiểu thời gian thực như thế giúp design leader nhanh chóng
nắm bắt được tình hình dự án và đưa ra những quyết định sửa đổi nếu có sai sót.
Một số designer nhiều khi sẽ không quen với kiểu làm việc lúc nào cũng

bị người khác “nhịm ngó” như thế.. Tuy nhiên hầu hết sẽ quên sau một thời gian
dùng thử và được giải thích các lợi ích từ. Một số khác lại khơng thích thấy trỏ
chuột của designer khác trên màn hình làm việc của mình, Figma cũng có một
giải pháp cho chuyện này. Bạn có thể vào View -> Show Multiplayer Cursors,
con trỏ chuột của người khác sẽ ẩn đi khi có nhiều hơn 1 người đang xem file.
21

Phùng Thị Phương Thanh - B17DCPT190

c.

Chia sẻ file đơn giản

Một khi bạn chia sẻ file Figma qua việc gửi link cho người khác, người
nhận link sẽ có khả năng truy cập vào file đó. Nếu bạn lựa chọn Link to selected
frame người nhận sẽ nhìn thấy chính xác frame bạn đang chọn lúc chia sẻ file.
Mình rất hay dùng tính năng tiện dụng này khi chia sẻ một file phức tạp, có q
nhiều frame nằm trong một page.

d.

Cơng cụ mà các developer yêu thích

Figma hiển thị code snippets cho từng đối tượng được chọn. Code có thể
hiển thị dưới dạng CSS, dành cho iOS hay Android. Thay vì sử dụng các cơng
cụ của bên thứ ba, developer có thể inspect đối tượng ngay trên file trong lúc
xem thiết kế. Mặc dù thế, nếu bạn muốn các thông số phức tạp hơn, bạn vẫn có
thể sử dụng Zeplin. Figma đã hỗ trợ Zeplin rất tốt cho tới thời điểm hiện tại.

22

Phùng Thị Phương Thanh - B17DCPT190

e.

Tất cả mọi thứ đều được lưu trữ online

Tất cả mọi thứ của bạn đề đã được lưu trữ trên cloud. Bạn sẽ không sợ mất
file, hỏng máy hay hàng tá các vấn đề trời ơi đất hỡi khác. Bạn có thể sắp xếp
file theo project, mỗi file lại được chia ra làm nhiều page tùy theo nhu cầu của
bạn.

4.

Tiến hành xây dựng website
- Công cụ sử dụng
STT
1
2
3

Phần mềm
Notepad++
Sublime Text
Google Chrome

Chức năng
Viết và chỉnh sửa HTML

Viết code HTML, CSS
Test giao diện Website trên trình duyệt Web
23

Phùng Thị Phương Thanh - B17DCPT190

Tìm kiếm tài liệu
Ngơn ngữ lập trình: HTML, CSS.
4.1

Tổng quan về HTML và CSS.

a. Định nghĩa về HTML.
HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các trang
web.
❖ Hypertext Markup language chính là HTML.
❖ Nhiều người nhầm tưởng HTML là ngơn ngữ lập trình nhưng sự thực
khơng phải như vậy, nó là một ngơn ngữ đánh dấu.
❖ Một ngơn ngữ đánh dấu là một bộ các thẻ đánh dấu.
❖ Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML.
b. Thành phần của HTML.
i. Các dạng thẻ HTML.
- Thẻ HTML dùng để viết lên những thành tố HTML.
- Thẻ HTML được bao quanh bởi hai dấu lớn hơn <và> nhỏ hơn.
- Những thẻ HTML thường có một cặp giống như <b> và <a>.
- Thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc.
- Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung.
- Những thẻ HTML không phân biệt in hoa và viết thường, ví dụ dạng <b>
và <B> đều như nhau.

ii. Thành phần HTML
Thành phần của HTML bắt đầu với thẻ<b>:
Nội dung của nó là: web design resources
Thành phần của HTML kết thúc với thẻ: </b>
Mục đích của thẻ <b> là để xác định một thành phần của HTML phải được
thể hiện dưới dạng in đậm.
Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết thúc
</body> . Mục đích của thẻ <body> là xác định thành phần của HTML bao gồm
nội dung của tài liệu.
iii. Các thuộc tính của thẻ HTML
24

Phùng Thị Phương Thanh - B17DCPT190

Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này
cung cấp thơng tin về thành phần HTML của trang web. Tag này xác định thành
phần thân của trang HTML <body>: Với một thuộc tính thêm vào là bgcolor, có
thể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như
sau: <body bgcolor=”red”> hoặc <body bgcolor=”#E6E6E6”> (#E6E6E6 là giá
trị hex của màu) Thẻ này sẽ xác định dạng bảng HTML <table> với một thuộc
tính đường viền (border), có thể báo cho trình duyệt biết rằng bảng sẽ khơng có
đường viền: <table border=”0”>.
Thuộc tính ln ln đi kèm một cặp như name/value: name= “value”
( tên=”giá trị”) thuộc tính ln luôn được thêm vào thẻ mở đầu của thành phần
HTML. Dấu ngoặc kép, "red" hoặc 'red'.
Giá trị thuộc tính nên được đặt trong dấu trích dẫn " và ". Kiểu ngoặc kép
như vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng.
Ví dụ:
Name=’phung”thi phuong”thanh’

iiii. Các thẻ cơ bản HTML:
Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading,
đoạn văn và xuống dòng.
Headings
Headings được định dạng với hai thẻ