4
Báo cáo đề tài thiết kế Web
Trường ĐH Kinh Tế - Kĩ Thuật- Công Nghiệp
Lớp: Tin 4A
Kính gửi: Th.S Mai Mạnh Trừng
Tên em là: Nguyễn Đức Thường
Sinh viên lớp: Tin4A
MSV: 1051050090
Loại hình : Đồ án môn học 1
Chuyên đề: “Nghiên cứu và phát triển ứng dụng dữ liệu web”
Đề tài: “Thiết kế và xây dựng website về Luân Đôn”
Yêu cầu:
1. Thiết kế giao diện của một Website giới thiệu về Luân Đôn theo yêu cầu của
tổ chức “ Showing London to the World”
2. Thể hiện rõ ràng mục tiêu Website – giới thiệu “ Cái đẹp của Luân Đôn”
3. Đối tượng sử dụng
4. Bảng màu sử dụng – giải thích bảng màu
5. Trong bài có sử dụng hiệu ứng animations
6. Bố cục rõ ràng
4
Báo cáo đề tài thiết kế Web
▼Mục tiêu:
- Làm cho giao diện trở nên bát mắt không quá nhiều
mục chọn,tạo cảm giác dễ dàng sử dụng
-Cung cấp được đầy đủ thông tin cho người ghé tham
trang web
▼Mục đích:
- Quảng bá,giới thiệu cho người ghé thăm trang web
có được những thông tin bổ ích về Luân Đôn, cung
cấp những tour du lịch để họ có những sự lựa chọn
hợp lý

- Đẩy mạnh hình ảnh Luân Đôn trong mắt mọi người
-Tạo ấn tượng từ trang web mang phong cách mới lạ.
-Giải trí sau những giờ làm việc học tập căng thẳng
▼Đối tượng sử dụng:
-Tất cả mọi người trên thế giới nói chung và Việt Nam
nói riêng
-Cho những người đang phân vân có nên đến Luân
Đôn hay không,cho những người đã đi để họ chia sẻ
cảm nhận kinh nghiêm khi đến đó
-Cho những người đang đi tới đó(biết về thời tiết,bản
đồ…)
I. Sơ Đồ Chức Năng:
4
Báo cáo đề tài thiết kế Web
II. Giải thích từng danh mục của Website :
1. Trang chủ: Thể hiện một cách đơn giản không quá màu mè nhiều thư
mục chọn sẽ khiến cho người xem cảm thấy dễ dàng sử dụng
- Chỉ với câu nói ngắn gọn với hình ảnh có thể cho người xem
hứng thú với những gì mình cần ở trang web.

2. Giới thiệu: bất cứ trang web nào khi nói đến một địa danh thì không thể
thiếu phần này. Dành cho những người đã biết hiểu sâu hơn,người chưa
biết mở mang kiến thức về vùng đất,
● Lịch sử Luân Đôn: Sẽ làm cho người xem hiểu hơn về Luân Đôn
qua từng mốc lịch sử,giải thích lý giải vì sao Luân Đôn có được như ngày
hôm nay và có những công trình đồ sộ như vậy,…
● Điểm nổi bật của Luân Đôn: Cho người xem hiểu được vì sao
Luân Đôn lại là một thành phố đẳng cấp thế giới thông qua những số liệu
cụ thể về các chuyến du lịch mỗi năm tới thành phố,kinh tế,xã hội văn
hóa,những tòa nhà, tượng đài,…qua những hình ảnh sinh động và video sắc

nét.
4
Báo cáo đề tài thiết kế Web
3. Tin tức: Sẽ được cập nhật hàng ngày để phản ánh về Luân Đôn hôm
nay,qua đó người xem có thể biết thêm thông tin về thế giới nói chung
và Luân Đôn xinh đẹp nói riêng một cách nhanh chóng tiện lợi.
● Kinh tế
● Văn hóa
● Xã hội
● Thời tiết: là yếu tố rất cần thiết để những kế hoạch của chúng ta
thành công tốt đẹp, mục này cũng sẽ được cập nhật từng giờ,nó sẽ rất hữu ích cho
những ai trên đường đi tham quan Luân Đôn có thể biết Luân Đôn hôm nay ra sao.
4. Khám phá: Đây cũng là một mục rất quan trọng,chứa đựng những gì
mà người xem muốn tìm hiểu, giới thiệu cụ thể rõ rang chi tiết hơn về :
● Đất nước: Một vùng đất với những trang sử vẻ vang, là nơi sinh
những câu chuyện huyền bí,nổi tiếng…
● Con người: người dân hòa thuận hiếu khách,phục vụ chu đáo ở các
của hàng to lẫn nhỏ, cần cù chịu khó,…
●Văn hóa: Với những truyền thống hết sức nổi tiếng,phong tục ăn
uống,cưới xin, tôn giáo…sẽ được cập nhật đầy đủ tại đây.
● Ẩm thực: những món ăn ngon,nổi tiếng sẽ được giới thiệu đồng thời
cho người xem địa chỉ các cửa hàng nổi tiếng,cửa hàng thu hút khách,giảm giá…
5. Tour du lịch: gồm những thông tin cụ thể về các chuyến du lich tới
Luân Đôn,giá cả chuyến bay,giờ bay…
● Hot nhất: những tour mới nhất được nhiều người đặt nhất,…
● Khuyến mại: thông tin chi tiết vế các tour giảm giá,nơi mua hoặc có
thể đặt trực tiếp qua mạng…
● Đặc biệt: các tour giành riêng cho những ngày đặc biệt như Quốc
Khánh, lễ tết với số lượng có hạn,giảm giá mạnh…
6. Giải trí : ngoài việc tìm hiểu làm cho người đọc cảm thấy căng thẳng,ta

có thể vảo đây nghe những bản nhạc vui nhộn, nổi tiếng của nước
Anh,truyền thống và hiện đại,những trò chơi mang tính thư giãn trí tuệ
và không thể thiếu là có liên quan đến Luân Đôn
● Âm nhạc: nhạc truyền thống và hiện đại(gắn liền với Luân Đôn)
● Thư viện ảnh: với những bức ảnh được chụp bởi các nhiếp ảnh tài
ba,với nhiều nơi trong thành phố luân Đôn,món ăn,văn hóa, đặc biệt có thể
download về máy tính để làm hình nền,…
● Game:Đơn giản nhưng cũng đấy kiến thức và sự khéo léo….
4
Báo cáo đề tài thiết kế Web

7. Diễn đàn: là nơi rất tuyệt vời cho những ai đã di tới Luân Đôn và chưa
đến,nơi họ chia sẽ hình ảnh chụp với người thân,những kinh nghiệm
cảm nhận khi đã đi tới đó đồng thời cũng là nơi những người chưa đi có
thể đưa câu hỏi lên để các thành viên khác trả lời
8. Bản đồ: Chúng ta đến bất cứ đâu cũng cần phải biết địa chỉ cụ thể của
địa điểm đó,mục này chính là nơi giúp ích cho bạn,đồng thời còn có
chức năng tìm đường ngắn nhất từ chỗ bạn tới địa diểm đó,,khi bạn đã
sang bên đó…
●Luân Đôn: chỉ riêng thành phố Luân Đôn
● Nước Anh: bản đồ rộng cho cả nước Anh đồng thời xác định Luân
Đôn ở vị trí nào trên bản đồ Anh
9. Liên hệ: những thắc mắc liên quan đến trang web,du lịch,… người xem
có thể gửi email hoặc gọi điện tới Hotline
III. Bố cục WebSite:
Mô phỏng layout website
Header
Search/LanguageLogo
Banner Small Banner
(fast menu)

Topmenu
Body
Image
Login/Register
Advertise
fast menu
footer
4
Báo cáo đề tài thiết kế Web
IV.Xác định các màu trong trang Web
4
Báo cáo đề tài thiết kế Web
4
Báo cáo đề tài thiết kế Web
♦ Màu chủ đạo của trang web la màu xanh dương:tạo cảm giác dễ chịu
không quá tối hay quá sáng, màu nền là sự kết hợp giữa mã màu
#15e1ed
và #a4f2f7 với hiệu ứng Gradient Overlay :sự kết hợp lý tưởng để làm
các mục tiếp theo
Điểm thêm vào đó là mã màu #20e2ee tạo ra các tia sáng:tạo cảm giác
cho người xem như bị hút vào trang web vậy,thêm vào đó là các điểm
trắng làm tăng thêm vẻ đẹp của nền web.
♦ Logo được thiết kế với các màu luôn được chọn để đi kèm với nhau là
màu đen- trắng,đen- đỏ tạo được sự nổi bật cho logo,Chữ London cách
điệu sẽ gây ấn tượng mạnh tới người xem, đồng thời mang đậm bản sắc
của tổ chức “Showing London to the World”,tất cả được đặt trên nền lá
cờ quốc kì của nước Anh-tạo điểm nhấn không chỉ cái tên mà còn cả đất
nước của họ nữa.
♦ Với thanh header với mã màu #d6cda5 kết hợp với hiệu ứng tạo nên sự
bát mắt và nhẹ nhàng,không quá đậm hay quá nhạt

-Điểm thêm đó là thanh tìm kiếm và đổi ngôn ngữ: Thanh tìm kiếm với
màu #a7eafb rất phù hợp với màu của header, không quá tối khó nhìn
khi ta đánh từ cần tìm hay quá sáng và mờ(màu trong tìm kiếm sẽ là màu
đen),ngôn ngữ được chuyển đổi chỉ với hai ngôn ngữ chính,quan trọng
nhất là tiếng Anh.
♦ Với menu nhanh Đất nước, Con người, Ẩm thực,Văn hóa được cho
vào các khung màu nâu và trắng(#ca8d3b và #ffffff ) cùng với các hiệu
ứng, màu so le nhau tạo cảm giác không trùng lặp và gây chán cho
người xem. Chữ trắng viền đỏ cũng góp phần tăng thêm vẻ đẹp.
♦ Với banner chính là khung trong suốt như gương,khung quá cứng nhắc
bởi khung Rounded
4
Báo cáo đề tài thiết kế Web
♦Topmenu: #d38e3e kết hợp với hiệu ứng wood và các hiệu ứng khác
tạo cảm giác như 1 thanh gỗ vậy-gây ấn tượng mạnh,điểm thêm vào đó
là cây dây leo đầy sức sống vươn ra bám vào-tượng trưng cho sự lớn
mạnh thịnh vượng.
♦Body: được thiết kế theo dạng cuốn sổ,tạo cảm giác cho người đọc như
đang đọc tin trên sách chứ không phải trên web nữa.điểm thêm vào đó là
máu hồng nhạt #fed9d9 của bản đồ Anh tạo ấn tượng mạnh
♦Ngoài ra việc chọn kích thước font cũng quan trọng không kém,ở đây
các font chữ được lựa chon hợp lý cân bằng không quá to cũng không
quá nhỏ tạo cảm giác khó chịu.
V.Lời Kết.
-Sau quá trình hoàn thành website em đã hiểu thêm được rất nhiều về web.
Những bước cơ bản nhất để có thể tạo ra một website cho mình.
- Hiểu được bố cục của 1 trang web thông dụng,
-Có được sự thành công này là nhờ vào rất nhiều công sức và tâm huyết của
thầy.
- Vì đây là lần làm đầu tiên của em nếu có thiếu xót gì em mong thầy hướng

dẫn em thêm.
Em xin chân thành cám ơn sự hướng dẫn
tận tình của thầy!!!
4
Báo cáo đề tài thiết kế Web