Mục đích cụ thể của website là giớithiệu về các địa điểm du lịch như Thành phố Đà Lạt, Thành phố Phan Thiết và Thành phố VũngTàu và cũng cung cấp thêm các thông tin để hỗ trợ các khách h
Trang 1TRƯỜNG ĐẠI HỌC SƯ PHẠM TP HỒ CHÍ MINH
KHOA CÔNG NGHỆ THÔNG TIN
-□□ -BÁO CÁO TRANG WEB DU LỊCH
MÔN HỌC: THIẾT KẾ WEB
50.01.103.019_Nguyễn Ngọc Thiên Giang
50.01.103.033_Nguyễn Trần Đăng Khoa
50.01.103.048_Lê Thị Kim Ngọc
Ngày bắt đầu:15/11/2024Ngày kết thúc:03/12/2024
Trang 2LỜI MỞ ĐẦU
Thiết kế web là một quá trình sáng tạo, kết hợp giữa nghệ thuật và kỹ thuật, nhằm tạo racác sản phẩm trực tuyến hấp dẫn và hữu ích Từ việc lựa chọn màu sắc, bố cục cho đến việclập trình các chức năng, thiết kế web đóng vai trò quan trọng trong việc xây dựng hình ảnhthương hiệu và thu hút khách hàng Với sự phát triển của công nghệ, thiết kế web ngày càngtrở nên đa dạng và phức tạp, đòi hỏi người thiết kế phải không ngừng học hỏi và cập nhậtkiến thức
Sau đây là bài báo cáo của nhóm chúng em về thiết kế trang web du lịch Trang web nàytạo ra những không gian trực tuyến sinh động, nơi du khách có thể khám phá những điểmđến hấp dẫn Với sự kết hợp hài hòa giữa hình ảnh, màu sắc và nội dung, thiết kế web du lịchkhông chỉ mang đến những trải nghiệm thị giác tuyệt vời mà còn cung cấp đầy đủ thông tincần thiết cho khách hàng Đồng thời, việc ứng dụng các công nghệ hiện đại như thực tế ảo,trí tuệ nhân tạo giúp tạo ra những tương tác độc đáo, thu hút khách hàng và nâng cao hiệuquả kinh doanh
Một trang web hiện đại với giao diện thân thiện, nội dung hấp dẫn, tốc độ tải trangnhanh, khả năng tương tác cao và tối ưu hóa cho công cụ tìm kiếm, trang web sẽ mang đếncho khách hàng những trải nghiệm tuyệt vời Khi khách hàng có những trải nghiệm tích cựctrên trang web, họ sẽ có xu hướng quay lại và giới thiệu cho người khác, từ đó góp phầnnâng cao trải nghiệm người dùng và thúc đẩy sự phát triển của doanh nghiệp du lịch
Trang 3LỜI CẢM ƠN
Trước tiên, chúng em xin gửi lời cảm ơn chân thành đến Thầy Lương Trần Hy Hiến,giảng viên đã tận tình hướng dẫn, hỗ trợ và truyền đạt kiến thức quý báu trong quá trìnhthực hiện bài báo cáo này Những góp ý và định hướng của thầy không chỉ giúp chúng emhoàn thiện bài báo cáo mà còn mở rộng hiểu biết, nâng cao khả năng tư duy và ứng dụngthực tế của chúng em
Đồng thời, nhóm chúng em xin bày tỏ lòng biết ơn sâu sắc đến những người đã đónggóp vào quá trình thu thập thông tin và thực hiện bài báo cáo này Sự hỗ trợ và đóng góp củacác thành viên trong nhóm là điều không thể thiếu để hoàn thành công việc này
Bài báo cáo này đã cung cấp cho chúng em một cơ hội để tổng kết và phân tích kết quảthu hoạch, từ đó đánh giá hiệu quả và rút ra những học bài quý giá Qua quá trình này, chúng
em đã nhận thức được giá trị và ý nghĩa của công việc mà chúng em đã làm và những cảitiến cần thiết để tăng cường hiệu quả trong tương lai
Thông qua bài báo cáo này, chúng em muốn bày tỏ lòng biết ơn chân thành đến thầy đãđóng góp, hỗ trợ và đồng hành cùng chúng em trong quá trình này Sự ủng hộ và đóng gópcủa thầy đã góp phần quan trọng vào thành công của bài báo cáo này
Xin chân thành cảm ơn và mong nhận được sự tiếp tục quan tâm và hỗ trợ từ thầy.Trân trọng
Trang 4MỤC LỤC
CHƯƠNG I: GIỚI THIỆU 6
1.1 GIỚI THIỆU ĐỀ TÀI 6
1.2 QUY TRÌNH THỰC HIỆN 6
CHƯƠNG II: NỘI DUNG 11
2.1 TRANG CHỦ 11
2.2 TRANG ĐĂNG KÍ, ĐĂNG NHẬP 13
2.3 TRANG VÒNG QUAY MAY MẮN 14
2.4 TRANG GIỚI THIỆU 15
2.5 TRANG LIÊN HỆ 16
2.6 TRANG TỔNG QUAN VỀ THÀNH PHỐ ĐÀ LẠT 17
2.7 TRANG TỔNG QUAN VỀ THÀNH PHỐ VŨNG TÀU 21
2.8 TRANG TỔNG QUAN VỀ THÀNH PHỐ PHAN THIẾT 24
2.9 TRANG BOOKING 28
CHƯƠNG III: KẾT QUẢ VÀ ĐÁNH GIÁ 30
3.1 ƯU ĐIỂM 30
3.2 NHƯỢC ĐIỂM 30
3.3 ĐỀ XUẤT CẢI TIẾN VÀ PHÁT TRIỂN TRONG TƯƠNG LAI 30
CHƯƠNG IV: KẾT LUẬN 31
Trang 5DANH MỤC TÀI LIỆU THAM KHẢO 34
Trang 6DANH MỤC HÌNH ẢNH
Hình 1.1: Trang Chủ ………12
Hình 1.2: Trang Chủ……… 12
Hình 1.3: Trang Chủ ………12
Hình 2.1: Trang Đăng Nhập……… 14
Hình 2.2: Trang Đăng Nhập (Tích Hợp Trang Đăng Kí) ……… 14
Hình 3.1: Trang Vòng Quay……… 15
Hình 4.1: Trang Thành Viên……… 15
Hình 5.1: Trang Liên Hệ……… 17
Hình 5.2: Trang Liên Hệ……… 17
Hình 6.1: Trang Tổng Quan Thành Phố Đà Lạt……… 18
Hình 6.2: Trang Tổng Quan Thành Phố Đà Lạt (Khí Hậu)………… 18
Hình 6.3: Trang Tổng Quan Thành Phố Đà Lạt (Ẩm Thực)………… 19
Hình 6.4: Trang Tổng Quan Thành Phố Đà Lạt (Khu Du Lịch)…… 20
Hình 6.5: Trang Tổng Quan Thành Phố Đà Lạt (Văn Hoá)………… 20
Hình 6.6: Trang Tổng Quan Thành Phố Đà Lạt (Con Người)……… 20
Hình 6.7: Trang Tổng Quan Thành Phố Đà Lạt (Phần Cuối Trang) 21
Hình 7.1: Trang Tổng Quan Thành Phố Vũng Tàu……… 21
Trang 7Hình 7.4: Trang Tổng Quan Thành Phố Vũng Tàu (Văn Hoá)……… 23 Hình 7.5: Trang Tổng Quan Thành Phố Vũng Tàu (Khu Du Lịch)… 23 Hình 7.6: Trang Tổng Quan Thành Phố Vũng Tàu (Con Người)…… 24 Hình 8.1: Trang Tổng Quan Về Thành Phố Phan Thiết………24 Hình 8.2: Trang Tổng Quan Về Thành Phố Phan Thiết (Khí Hậu)… 25 Hình 8.3: Trang Tổng Quan Về Thành Phố Phan Thiết (Ẩm Thực)… 25 Hình 8.4: Trang Tổng Quan Về Thành Phố Phan Thiết (Văn Hoá)… 26 Hình 8.5: Trang Tổng Quan Về Thành Phố Phan Thiết (Khu Du Lịch)
………27
Hình 8.6: Trang Tổng Quan Về Thành Phố Phan Thiết (Con Người) 27 Hình 9: Trang Đặt Phòng……… 28 Sitemap website du lịch……… 33
Trang 8CHƯƠNG I: GIỚI THIỆU
1 GIỚI THIỆU ĐỀ TÀI
Website của chúng em có tên là ANONYMOUZ Mục đích cụ thể của website là giớithiệu về các địa điểm du lịch như Thành phố Đà Lạt, Thành phố Phan Thiết và Thành phố VũngTàu và cũng cung cấp thêm các thông tin để hỗ trợ các khách hàng có thể dễ dàng lựa chọn cácdịch vụ, lên kế hoạch phù hợp để có một chuyến du lịch hoàn hảo Ngoài ra, mục đích của trangweb là bắt mắt, nhiều màu sắc, dễ nhận biết và đơn giản, đồng thời hiển thị các chất lượng cao.Bản thân khách hàng hoạt động hoàn toàn trực tuyến Bằng cách truy cập trực tuyến vào trangweb để có thể dễ dàng lên kế hoạch cho một chuyến du lịch, tham quan
Trang web du lịch hướng tới rất nhiều đối tượng khác nhau, mỗi đối tượng sẽ có nhữngnhu cầu và kỳ vọng riêng Đối tượng mục tiêu của trang web sẽ chủ yếu nhắm đến người trẻtuổi thích khám phá, các cặp đôi muốn tận hưởng kỳ nghỉ lãng mạn, gia đình muốn tìm kiếmnhững điểm đến phù hợp cho cả trẻ em, người cao tuổi muốn nghỉ dưỡng
Trang 9Hiển thị danh sách khách sạn và resort (kèm thông tin giá cả, tiện nghi, và đánh giá).Form đặt phòng.
6 Trang tổng quan về Vũng Tàu
Thông tin về các bãi biển, địa điểm du lịch nổi tiếng (Ngọn Hải Đăng, Tượng ChúaKitô)
Liên kết đến trang đặt phòng Vũng Tàu
7 Trang đặt phòng Vũng Tàu
Hiển thị danh sách khách sạn và resort (có thông tin chi tiết về tiện nghi và mức giá).Form đặt phòng
8 Trang giới thiệu nhóm
Thông tin về các thành viên (tên, vai trò, và ảnh đại diện)
9 Trang vòng quay may mắn
Vòng quay trúng thưởng với các phần quà (giảm giá, gói dịch vụ)
Hiển thị thông báo kết quả trúng thưởng
10 Trang đăng nhập (tích hợp đăng ký)
Form đăng nhập, đăng kí (email/số điện thoại và mật khẩu)
11 Trang liên hệ
Form gửi thông tin liên hệ (họ tên, email, nội dung)
Hiển thị thông tin liên lạc (email, số điện thoại, địa chỉ)
Tích hợp bản đồ (Google Maps) để chỉ vị trí công ty hoặc văn phòng hỗ trợ
Giao diện người dùng (UI) và trải nghiệm người dùng (UX)
1.Đánh giá giao diện người dùng (UI)
Thiết kế giao diện được chú trọng đến tính tối giản và hiện đại thông qua việc sử dụngfont chữ Roboto thanh lịch Điều này không chỉ đảm bảo khả năng đọc tối ưu mà còn tạo nênmột trải nghiệm thẩm mỹ tinh tế cho người dùng Palette màu sắc được xây dựng trên nền tảngtrắng - đen cổ điển, tạo nên một phong cách basic nhưng không kém phần sang trọng Sự tươngphản này giúp người đọc dễ dàng tập trung vào thông điệp chính của nội dung Điểm nhấn đặcbiệt đến từ việc sử dụng màu xanh đậm một cách chiến lược cho các tiêu đề và nội dung trọngtâm Sự kết hợp này tạo ra các điểm dừng thị giác ấn tượng, dẫn dắt người dùng qua từng phần
Trang 10của giao diện một cách tự nhiên Đặc biệt, việc tích hợp nền video động không chỉ mang đến sựsinh động mà còn giúp tái hiện chân thực không khí của các điểm đến Kết quả là một giao diệntrực quan, cuốn hút và truyền cảm hứng, thúc đẩy mạnh mẽ khát khao khám phá của ngườidùng.
2 Đánh giá trải nghiệm người dùng (UX)
Khi trải nghiệm trang web, người dùng được chào đón bởi một giao diện thân thiện và dễtiếp cận Việc điều hướng trên trang web diễn ra một cách tự nhiên và thuận tiện, với menuchính được bố trí hợp lý và dễ nhận biết trên cùng phía phải của trang chủ Thông tin được tổchức theo từng mục rõ ràng, giúp người dùng nhanh chóng tìm thấy nội dung cần thiết màkhông gặp khó khăn
Tốc độ tải trang nhanh và mượt mà, tạo cảm giác thoải mái khi duyệt web Nội dung đượctrình bày rõ ràng với cỡ chữ vừa phải, dễ đọc, không gây mỏi mắt khi sử dụng trong thời giandài
Công cụ và công nghệ sử dụng
Đầu tiên, HTML được sử dụng để tạo cấu trúc chính cho trang, phân chia các phần tử nộidung và sắp xếp chúng một cách có tổ chức Điều này giúp thông tin được trình bày rõ ràng, dễtiếp cận và dễ dàng cho người dùng.CSS được sử dụng để tạo phong cách cho trang web, từviệc điều chỉnh màu sắc, kích thước, đến việc bố trí các phần tử Đặc biệt, áp dụng các kỹ thuậtCSS như Flexbox và Grid để đảm bảo rằng các phần tử trên trang web được căn chỉnh linh hoạt
và tự động thích ứng với mọi kích thước màn hình Việc sử dụng backdrop-filter và shadow giúp tạo ra hiệu ứng nền mờ, làm nổi bật các phần tử mà không làm mất đi sự dễ nhìn
box-và thẩm mỹ Cuối cùng, JavaScript đóng vai trò quan trọng trong việc tạo ra các hiệu ứng box-vàtương tác động cho trang web Từ việc chuyển đổi giữa các form đăng nhập và đăng ký, kiểmtra thông tin người dùng nhập vào, cho đến các thao tác cuộn trang mượt mà Các đoạn mãJavaScript được tối ưu hóa để đảm bảo hiệu suất cao, giúp trang web hoạt động nhanh chóng vàmượt mà trên mọi thiết bị
Trang 11CHƯƠNG II: NỘI DUNG
1 Trang Chủ
Trang web này được thiết kế với mục đích giới thiệu ba địa điểm du lịch nổi bật của ViệtNam: Đà Lạt, Phan Thiết và Vũng Tàu Mỗi địa điểm được giới thiệu thông qua một đoạnvideo nền động và một phần mô tả ngắn gọn, bao gồm thông tin về đặc điểm địa lý, khí hậu, vànhững điểm đặc trưng nổi bật như phong cảnh, ẩm thực, hay các hoạt động du lịch Đặc biệt,phần nội dung của từng địa phương được chia thành các khối riêng biệt, với các tiêu đề nổi bậtnhư "Thành phố ngàn hoa" cho Đà Lạt, "Thủ phủ resort" cho Phan Thiết và "Thiên đường dulịch biển" cho Vũng Tàu
Trang web có thanh điều hướng (navigation bar) giúp người dùng dễ dàng chuyển hướngtới các trang con như “Anonymouz”, “Vòng quay”, “Liên hệ”, và “Đăng nhập” Điều này tạo
sự thuận tiện trong việc điều hướng nội dung và các dịch vụ khác
Ngoài ra, trang còn có phần tương tác với các biểu tượng mạng xã hội (Facebook,Instagram, Twitter), giúp người dùng có thể chia sẻ thông tin về các địa điểm du lịch một cách
dễ dàng Chức năng chuyển đổi giữa các video và nội dung được thiết kế với hiệu ứng chuyểncảnh mượt mà, giúp tạo ra trải nghiệm người dùng sinh động và dễ tiếp cận Cuối cùng, trangweb sử dụng các tính năng động như menu ẩn/mở và điều hướng video dễ dàng bằng các nútđiều khiển (navigation buttons), phù hợp với nhu cầu của người sử dụng trong việc duyệt cácthông tin du lịch một cách nhanh chóng và trực quan
Trang web này còn được tối ưu hóa cho cả giao diện di động và máy tính để bàn, nhờ vàothiết kế responsive Điều này có nghĩa là giao diện trang web tự động điều chỉnh sao cho phùhợp với kích thước màn hình của thiết bị người dùng, giúp đảm bảo trải nghiệm người dùngmượt mà và dễ dàng sử dụng dù trên điện thoại hay máy tính
Trang 12Mỗi phần của trang web được chia thành các phần rõ ràng, ví dụ, khu vực giới thiệu ĐàLạt, Phan Thiết và Vũng Tàu được hiển thị dưới dạng các video nền với hình ảnh động, tạo cảmgiác sống động và thu hút Phía dưới mỗi video là mô tả ngắn về đặc điểm của địa phương đó,chẳng hạn như khí hậu, cảnh quan, và những điều đặc sắc, đồng thời cung cấp liên kết đến trangchi tiết hơn về mỗi điểm đến ("Tìm hiểu") Điều này không chỉ cung cấp thông tin cơ bản màcòn dẫn dắt người dùng đến những trang khác để tìm hiểu sâu hơn về các địa phương này.Thanh menu phía trên có các liên kết điều hướng cơ bản tới các trang khác trong websitenhư “Anonymouz” (giới thiệu về nhóm hoặc dự án), “Vòng quay” (có thể là một chức năngquay thưởng hoặc trò chơi), “Liên hệ” (thông tin để người dùng có thể liên lạc), và “Đăngnhập” (cho phép người dùng truy cập các tính năng cá nhân hóa hoặc quản lý tài khoản) Thanhđiều hướng này cũng được thiết kế để dễ dàng truy cập và sử dụng trên tất cả các loại thiết bị.Cuối cùng, trang web sử dụng các biểu tượng xã hội (mạng xã hội) như Facebook,Instagram và Twitter, giúp người dùng chia sẻ thông tin về các địa điểm du lịch được giới thiệutrên trang Điều này không chỉ giúp tăng khả năng tiếp cận và quảng bá các địa phương mà còntạo cơ hội cho người dùng kết nối và trao đổi kinh nghiệm du lịch.
Nhìn chung, trang web được thiết kế với giao diện thân thiện, dễ sử dụng, cung cấp thôngtin hấp dẫn và hữu ích về ba địa điểm du lịch nổi bật, đồng thời hỗ trợ người dùng tương tác vàchia sẻ thông tin một cách thuận tiện
Trang 13Hình 1.1: Trang Chủ
Hình 1.2: Trang Chủ
Hình 1.3: Trang Chủ
Trang 142 Trang Đăng Kí, Đăng Nhập
Việc nhóm sử dụng hình nền kết hợp với hiệu ứng làm mờ (backdrop-filter) mang lại cảmgiác chuyên nghiệp và thu hút sự chú ý của người dùng lên trang Đăng Nhập Các yếu tố giaodiện như nút bấm, ô nhập liệu và tiêu đề được tôi sắp xếp một cách cân đối và rõ ràng, tạo điềukiện thuận lợi cho người dùng trong quá trình tương tác Một trong những tính năng nổi bật củatrang này là khả năng chuyển đổi liền mạch giữa form đăng nhập và đăng ký
Nhóm đã ứng dụng JavaScript để thực hiện việc thêm hoặc loại bỏ lớp CSS active, chophép người dùng dễ dàng chuyển đổi giữa hai chế độ mà không gây ra sự gián đoạn trong trảinghiệm sử dụng Đồng thời chú trọng đến việc đảm bảo tính tương thích của trang web trên cáckích thước màn hình điện tử khác nhau Bằng cách sử dụng Flexbox trong việc căn chỉnh cácphần tử, đã tạo ra một giao diện đáp ứng và trông đẹp mắt trên mọi thiết bị, từ máy tính cho đếnđiện thoại di động Ngoài ra, việc tích hợp các hiệu ứng tương tác người dùng tinh tế nhằmnâng cao trải nghiệm sử dụng Ví dụ, khi người dùng nhập liệu vào ô input, label sẽ tự động dichuyển lên phía trên, tạo không gian rộng rãi hơn và trực quan hơn Điều này được thực hiệnthông qua việc sử dụng CSS selector :focus và :valid Cuối cùng, trong phần đăng ký, có thêmmột checkbox "Tôi đồng ý các điều khoản" nhằm nhấn mạnh tầm quan trọng của việc ngườidùng đọc và chấp nhận các điều kiện sử dụng trước khi tạo tài khoản Điều này góp phần tăngtính minh bạch và đảm bảo sự tuân thủ của người dùng đối với các quy định của trang web
Trang 16gia quay số, đồng thời hạn chế việc sử dụng sai mã hoặc quay không mong muốn Nhóm đã xử
lý sự kiện ngẫu nhiên phần thưởng một cách hợp lý, sử dụng logic tính toán xác suất để đảmbảo tính công bằng và hấp dẫn cho người chơi đồng thời việc sử dụng kết hợp CSS keyframes
và JavaScript giúp cho trang web có hiệu ứng động mượt mà khi quay và dừng vòng quay
4 Trang Giới Thiệu
Hình 3.1: Trang Vòng Quay
Hình 4.1: Trang Thành Viên
Trang 17viên cũng có các liên kết đến mạng xã hội cá nhân (Facebook, Instagram, LinkedIn,WhatsApp) để người xem có thể liên hệ hoặc tìm hiểu thêm.
Phần chân trang của trang web (footer) được chia thành ba cột chính:
- Nhóm tôi: Liên kết đến các phần như giới thiệu thành viên, nhật ký phát triển website,sách và liên hệ
- Hợp pháp: Bao gồm các liên kết đến các trang như câu hỏi thường gặp, điều khoản vàđiều kiện, chính sách bảo mật
- Tài nguyên: Cung cấp liên kết đến các trang phương tiện truyền thông, trung tâm hỗ trợ
Trang 186 Trang Tổng Quan Về Thành Phố Đà Lạt
Trang web tổng quan về Đà Lạt được thiết kế với sự chú trọng đến từng chi tiết, đảm bảomang đến trải nghiệm tốt nhất cho người dùng Nhìn chung trang web sử dụng HTMLSemantic có chủ đích, với các thẻ như <header>, <nav>, <section> và <footer> được áp dụnghợp lý Điều này giúp cấu trúc trang web dễ đọc, đơn giản và thân thiện với SEO. Giao diệnđược thiết kế với nội dung được chia thành các phần cụ thể, mỗi phần có id riêng biệt giúpngười thiết kế dễ dàng thao tác và sử dụng Việc tách biệt cả về nội dung và giao diện, nhóm đã
sử dụng một file CSS riêng là tongquandl.css giúp việc bảo trì code sẽ dễ dàng hơn đối với saunày khi cần thiết Phần đầu trang (header) thu hút sự chú ý với thông điệp “Khám phá Đà Lạt”cùng đoạn mô tả ngắn gọn giúp người xem nhanh chóng nắm bắt nội dung chính Khi truy cậpvào nút “Khám phá ngay” đưa người dùng đến phần nội dung chính mà không cần cuộn trang,đặc biệt việc kết hợp nền là ảnh thành phố Đà Lạt trên cao càng đem lại sự đẹp đẽ và thơ mộngkhi bước tiếp vào nội dung chính
Hình 5.1: Trang Liên Hệ
Hình 5.2: Trang Liên Hệ
