THIẾT KẾ TRANG WEB GIỚI THIỆU VỀ KHÁCH SẠN

Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
VIỆN ĐẠI HỌC MỞ HÀ NỘI
KHOA CÔNG NGHỆ TIN HỌC
*************0o0*************
BÁO CÁO BÀI TẬP LỚN
MÔN: THIẾT KẾ WEB
ĐỀ TÀI: TRANG WEB GIỚI THIỆU VỀ KHÁCH SẠN
Giáo viên giảng dạy: Sinh viên thực hiện:
Nguyễn Thu Hà
Ngô Hoàng Anh
Nguyễn Tuấn Anh
Trịnh Thị Xuân
Lớp: 10B4

Hà Nội, ngày 25 tháng 10 năm 2011
Page 1
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội

Page 2
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
Phần 1: ĐẶT VẤN ĐỀ
I.Lý do chọn đề tài:
o Thấy phù hợp với khả năng, năng lực của từng thành viên trong nhóm, việc tự thiết kế 1
trang web về khách sạn rất thú vị.
o Cuộc sống ngày càng hiện đại, mức sống của người dân ngày càng tăng thì ngành du lịch,
khách sạn ngày càng phát triển.Ngày càng có nhiều phương thức, công cụ để ta quảng bá
giới thiệu cho cá dịch vị khách sạn nhưng khoong phải phương tiện truyền thông nào cũng
có thế làm tốt được vai trò đó cho dù mỗi loại phưong tiện đều có những tác dụng tốt, và
riêng biệt.Chính vì vậy nên các sản phẩm dịch vụ khách sạn tốt, chất lượng muốn được
khách hàng biết tới và sử dụng cũng không phải là một điều dễ dàn.Và cả những người trong
ngành cũng không thể dễ để có thể tìm hiểu viêc kinh doanh của khách sạn,tìm kiếm thông

tin nhanh gọn đơn giản, phù hợp.Đó có lẽ là công đoạn marketing cho sản phẩm, dịch vị
chưa được tốt.
o Xã hội ngày càng phát triển kèm theo sự phát triển của internet.Và sự ra đời của một trang
web về khách sạn như là một sự đáp ứng nhu cầu của xã hội.
o Đề tài thiết kế website về khách sạn là 1 yêu cầu thiết thực trong việc vận hành quản lý
khách sạn hiện nay. Xu hướng, nhu cầu ngày càng tăng về số lượng khách du lịch. Dịch vụ
phục vụ, sự cạnh tranh thương mại, tiết kiệm chi phí hoạt động và quan trọng hơn là việc
làm cho các hoạt động diễn ra hiệu quả. Đó là đièu quan trọng để quyết định sự thành công
trong hoạt động kinh doanh khách sạn.
o Là 1 cách kiểm tra hiệu quả nhất những kiến thức đã học và là 1 cách tiếp cận với thực tế có
hiệu quả nhất.
o Việc tạo ra 1 trang web về khách sạn rất thực tiễn chính vì vậy nếu phát triển tốt sẽ rất nhiều
thuận lợi cho những đề tài lớn tiếp theo của nhóm.
Page 3
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
II.Phân tích yêu cầu của đề tài:
Với yêu cầu của đề tài là thiết kế website cho khách sạn, mục tiêu được đặt ra là thiết kế một
trang web giao diện nhẹ nhàng, sang trọng, đẹp mắt và thu hút người xem. Trình bày ngắn gọn
nhưng vẫn đầy đủ thông tin cần thiêt, rõ ràng đáp ứng tốt mục đích sử dụng.
Thực hiện và xây dựng mô phỏng đầy đủ cấu trúc và chức năng của 1 trang web khách sạn
như: quản lý , kinh doanh sản phẩm, các dịch vụ Đảm nhận chức năng quảng bá, phát triển mở
rộng thị trường, thị phần, nghiên cứu chiến lược thị trường, phát triển sản phẩm, dịch vụ mới
chăm sóc khách hàng, giữ gìn và tăng giá trị thương hiệu. Và một số chức năng cơ bản khác.
Thiết kế hoàn chỉnh từng trang với đầy đủ nội dung và cách trình bày các thành phần. Bố
cục, nội dung, liên kết các trang đảm bảo tính thống nhất, nhất quán và tập trung của thiết kế.
III.Phân chia công việc
-Kế hoạch làm việc:
Tuần 1:Họp nhóm, kháo sát, đánh giá công việc,dự kiến các công việc cần làm:
1.
Bầu nhóm trưởng

Vẽ sơ đồ thiết kế
Tìm các tài liệu liên quan
Lập đề cương
2.
lập chi tiết, chi tiết các việc cần làm, đặt ra cácyêu cầu cần đạt được qua các giai đoạn thực
hiện.
3.
Tạo trang chủ
Tuần 2:viết một số trang con liên kết, bao gồm:
Trang chủ: Hà
Trang tin tức:Tuấn Anh
Trang giới thiệu:Hoàng Anh
Trang: tuyển dụng:Hà
Trang ẩm thực: Tuấn Anh
Trang ảnh:Hà
Trang dancesport: Hoàng Anh
Trang đặt phòng:Tuấn Anh
Trang deluxe:Hà
Trang du lịch: Hoang Anh
Trang giới thiệu: Tuấn Anh
Trang khám phá:Hà
Trang khuyến mai:Hà
Page 4
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
Tuần 3:
Tiên hành hoàn thiện trang chủ và viết thêm các trang lien kết con như:
Trang lễ tân:Tuấn Anh
Trang liên hệ:Hoang Anh
Trang lien kết: Hà
Trang loại phòng: Tuấn Anh

Trang standard room: Hoang Anh
Trang suite room: Hà
Trang tin tức 1, 2, 3: Hoàng Anh
Trang tuyển dụng: Tuấn Anh
Trang du lich: Hà
Trang du lịch 1, 2, 3, 4: Hoàng Anh
Trang vị trí: Tuấn Anh
Trang superior room: Hà
Tuần 4:
Kiểm tra lại, sửa lại nếu cần.làm phần slide.
-Các phần mềm sử dụng:CSS,HTML,Javascipt,flash
-Ý tưởng thiết kế:
+Số lượng trang:1 trang chủ và ………. trang con.
+Độ sâu:3
+Gam màu chủ đạo:màu ghi và vàng nhạt kết hợp.
+Style chính: mang phong cách sang trọng,kết hợp hài hòa giữa cổ kính và hiện đại, ưa nhìn, trẻ
trung,sáng tạo,trang nhã
+Cách thức thiết kế:tạo giao diện thân thiện, dễ sử dụng,nội dung ngắn gọn nhưng xúc tích, dễ hiểu,
lôi cuốn.


Page 5
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
PHẦN 2: NỘI DUNG
I.Cơ sở lý thuyết:
a.HTML xây dựng trang web
b.CSS quy định kiểu trình bày cho các tài liệu viết bằng HTML
II.Cấu trúc thiết kế website:
- Số lượng trang: 1 trang chủ và 25 trang con.
- Độ sâu: 03

- Gam màu chủ đạo: Màu ghi,kem và vàng kết hợp.
- Style chính: Mang phong cách sang trọng, nhẹ nhàng kết hợp hài hòa giữa cổ điển và hiện
đại.
- Cách thức thiết kế: Tạo giao diện thân thiện, dễ sử dụng, nội dung ngắn gọn nhưng xúc tích,
dễ hiểu và chính xác.
- Đơn giản, không cầu kỳ, trực quan, tiện lợi, những mục quan trọng được đưa lên đầu giúp
người xem có thể truy cập dễ dàng.
- Hình ảnh đẹp, chân thực, bố cục trang cân đối.
Page 6
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
1.Sơ đồ thiết kế website:
BANNER VÀ MENU CHÍNH
Danh mục NỘI DUNG Hỗ trợ
Bản đồ Các thông tin và hình ảnh Tin tức nổi bật
Thông tin liên hệ và các dịch vụ khác
 Trang chủ
 Thông tin du lịch
 Tin tức
 Phòng và giá
o Phòng deluxe
o Phòng suite
o Phòng superior
o Phòng standard
 Tiện nghi và dịch vụ
o Bar va nhà hàng
o Hội thảo
o Tiệc
 Thư viện ảnh
 Liên hệ
Page 7

Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
2.Hình ảnh trang chủ :
Page 8
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
3.Hình ảnh trang con

Page 9
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
III.Giao diện chính và chi tiết nội dung các trang:
1.Trang chủ:
Cung cấp thông tin tổng quát về các đề mục con, rõ ràng và mang tính thẩm mỹ, bao gồm:
- Giao diện nhẹ nhàng, đẹp, bắt mắt gồm:
1 menu baner: tên logo của trang web,trang chủ, giới thiệu, tin tức, khuyến mại, dịch vụ, liên hệ.
2Menu phải: hỗ trợ trực tuyến, tuyển dụng, đặt phòng, dịch vụ khách sạn các thông tin du lịch
hữu ích
4Menu center: các thông tin về giới thiệu, loại phòng, hình ảnh.
Menu footer: trang chủ, giới thiêu, liên kết,
- Menu danh mục các trang con.
- Hình ảnh khách sạn, phòng ăn, phòng ngủ, khu vui chơi giải trí
- Các liên kết website và thông tin chung.
a.Giới thiệu:
- Giới thiệu về khách sạn, sự thành lập, thông tin cơ bản.
- Giới thiệu cơ cấu, ban lãnh đạo và đội ngũ nhân viên.
- Quy mô khách sạn, chức năng chính của từng bộ phận.
- Quảng bá giới thiệu thương hiệu
b.Tin tức:
- Tin tức, sự kiện.
- Các thông tin tuyển dụng.
- PR.
- Thông tin du lịch các tour.

- Thông tin thêm về Hà Nội.
c.Dịch vụ- Đặt phòng- Thực đơn:
- Các dịch vụ có trong khách sạn.
- Các loại phòng, giá cả từng loại, và dịch vụ riêng kèm theo.
- Dịch vụ ăn uống, giải trí.
- Các mặt hàng và phương tiện khác(nếu có).
d.Văn hoá:
- Giới thiệu về văn hoá ẩm thực, văn hoá của khách sạn.
- Phong cách và phương thức chính.
Page 10
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
2.Thư viện ảnh:




Page 11
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
Page 12
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
3.Liên hệ:
- Thông tin liên hệ, địa chỉ, số điện thoại, email
Page 13
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
IV.Code của một số trang chính :
a.CSS
<style>

.Menu_footer a:active
{

font-family: Arial;
font-size: 12px;
color: #FFFFFF;
font-weight:none;
}
.Menu_footer a:link
{
font-family: Arial;
Page 14
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
font-size: 12px;
color: #FFFFFF;
font-weight:none;
}
.Menu_footer a:visited
{
font-family: Arial;
font-size: 14px;
color: #FFFFFF;
font-weight:none;
}
.Menu_footer a:hover
Page 15
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
{
font-family: Arial;
font-size: 14px;
color: #ffd60a;
font-weight:none;
}

.Menu_footer_over a:link
{
font-family: Arial;
font-size: 14px;
color: #996600;
cursor:pointer;
Page 16
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
font-weight:none;
text-decoration:none;
}
.Menu_footer_over a:active
{
font-family: Arial;
font-size: 14px;
color: #3A3A90;
cursor:pointer;
font-weight:none;
text-decoration:none;
}
Page 17
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
.Menu_footer_over a:visited
{
font-family: Arial;
font-size: 14px;
color: #ffd60a;
cursor:pointer;
font-weight:none;
text-decoration:none;

}
.Menu_footer_over a:hover
{
font-family: Arial;
font-size: 14px;
Page 18
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
color: #ffd60a;
cursor:pointer;
font-weight:none;
text-decoration:none;
}
.menu_phai a:active
{

font-family: Arial;
font-size: 12px;
color: #333333;
font-weight:none;
}
.Menu_phai a:link
Page 19
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
{
font-family: Arial;
font-size: 12px;
color: #666666;
font-weight:none;
}

.Menu_phai a:visited
{
font-family: Arial;
font-size: 14px;
color: #000000;
font-weight:none;
Page 20
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
}
.Menu_phai a:hover
{
font-family: Arial;
font-size: 14px;
color: #990000;
font-weight:none;
}
.Tour_link {
font-family: Arial;
font-size: 12px;
color:#000000;
font-weight: none;
}
}
.Tour_link a:link {
font-family: Arial;
font-size: 12px;
color:#000000;
Page 21
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
font-weight: none;

}
.Tour_link a:visited {
font-family: Arial;
font-size: 12px;
color: #FF0000;
font-weight: none;
}
.Tour_link a:hover {
font-family: Arial;
font-size: 12px;
color: #990033;
font-weight: none;
cursor:pointer;
text-decoration:underline;
}
.Tour_link a:active {
font-family: Arial;
font-size: 12px;
color: #333333;
font-weight: none;
}
.menu_phai_tren a:active
{
Page 22
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội

font-family: Arial;
font-size: 14px;
color: #333333;
font-weight:none;

}
.Menu_phai_tren a:link
{
font-family: Arial;
font-size: 14px;
color: #666666;
font-weight:none;
}
Page 23
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
.Menu_phai_tren a:visited
{
font-family: Arial;
font-size: 16px;
color: #000000;
font-weight:none;
}
.Menu_phai_tren a:hover
{
font-family: Arial;
font-size: 16px;
color: #990000;
font-weight:none;
}
.style
{border-bottom-color:#333333
Page 24
Khoa Công Nghệ Thông Tin-Viện Đại Học Mở Hà Nội
</style>
Page 25