________________________________________Trường ĐH Kinh Tế Kĩ Thuật Công NghiệpLớp: Tin 4AKính gửi: Th.S Mai Mạnh Trừng Tên em là: Nguyễn Đức ThườngSinh viên lớp: Tin4AMSV: 1051050090Loại hình : Đồ án môn học 1Chuyê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ụng4.Bảng màu sử dụng – giải thích bảng màu5.Trong bài có sử dụng hiệu ứng animations6.Bố cục rõ ràng▼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ụngCung 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ườiTạ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êngCho 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: 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ụngChỉ 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.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…. 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 đồ Anh9.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 HotlineIII.Bố cục WebSite:Mô phỏng layout websiteIV.Xác định các màu trong trang 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 15e1edvà 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 Anhtạ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♦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ậygâ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àotượ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 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