BÁO CÁO BÀI TẬP LỚN MÔN: THIẾT KẾ WEB Đề tài: Xây dựng website tin tức phim

- Mục đích của đề tài: Mang lại những giây phút thư giãn giải trí khi đọc tin tức sau giờ làm việc căng thẳng - Kết quả mong muốn đạt được: + Thiết kế giao diện thân thiện + Dễ tìm kiếm

Trang 1

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI

KHOA CÔNG NGHỆ THÔNG TIN

-BÁO CÁO BÀI TẬP LỚN

MÔN: THIẾT KẾ WEB

Đề tài: Xây dựng website tin tức về phim

Giáo viên hướng dẫn : Nguyễn Thị Quỳnh Như Sinh viên thực hiện : Lê Mai Linh

Hà Nội -2020

Trang 2

Phần I: Giới thiệu

- Tên đề tài: Thiết kế website tin tức về phim

- Lý do chọn đề tài: Thế giới ngày càng phát triển, đời sống con người

ngày càng hiện đại hóa Hiện nay nhu cầu giải trí online ngày càng phát triển, nhu cầu xem phim trực tuyến rất lớn nên cần một website tin tức phim nhằm phục vụ nhu cầu của mọi người Tạo cho người xem tin cảm giác thoải mái, giảm việc đi lại mua sách báo, tiết kiệm thời gian, tiền bạc

- Mục đích của đề tài: Mang lại những giây phút thư giãn giải trí khi đọc

tin tức sau giờ làm việc căng thẳng

- Kết quả mong muốn đạt được: + Thiết kế giao diện thân thiện

+ Dễ tìm kiếm thông tin

+ Tin tức website được cập nhật thường xuyên

+ Cung cấp các chức năng có thể cập nhật được thông tin dễ dàng

- Kế hoạch làm việc:

+ Tuần 1: Định hướng, tham khảo tài liệu, website khác

+ Tuần 2: Xác định và phân tích các yêu cầu , phác thảo ý tưởng thiết kế (logo, layout, menu , các thành phần giao diện …) Hoàn thiện ý tưởng+ Tuần 3 đến tuần 4: Thiết kế theo ý tưởng đã đề ra, thiết kế sơ bộ, phối màu, chọn font, cỡ font

+ Tuần 5: Hoàn thiện sản phẩm

- Các phần mềm và ngôn ngữ sử dụng:

+ Visual Studio Code

+ Photoshop CS6

+ HTML, CSS

Phần II: Ý tưởng thiết kế

I Xác định và phân tích yêu cầu

1 Chủ sở hữu website

Tên: Viên Thị Ngọc Hà

Trang 3

Địa chỉ: TP Thanh Hóa

2 Đối tượng độc giả của website

Về độ tuổi: Website phù hợp với lứa tuổi từ 12-60 tuổi Website cung cấptin tức về nhiều loại phim phù hợp với nhiều lứa tuổi Từ 12 đến 15 tuổi website cung cấp những bài tin màu sắc tươi tắn bắt mắt về hoạt hình và những bộ phim dành cho lứa tuổi thiếu niên Từ 16 – 60 tuổi website cung cấp những bài tin về phim tình cảm lãng mạn, hành động, tài liệu vàgiật gân

Về giới tính: Website đáp ứng cho tất cả các đối tượng nam và nữ với những tin tức đa dạng

Về văn hóa: Website sẽ tránh những thông tin không rõ ràng và chưa được xác nhận, những tin tức có ảnh hưởng xấu đến phong tục tập quán của mỗi nơi

3 Các chủ đề chính của website:

Các chủ đề chính của website là: trang chủ, thể loại, review phim, top phim hay

4 Các khối thông tin chủ yếu của website

Về trang chủ: trang web sẽ cung cấp những sự lựa chọn trên giao diện trang chủ

Về thể loại: giúp cho người xem tìm được tin tức về loại phim mà mình thích

Về review phim: sẽ có những bài đánh giá về những bộ phim khác nhau

Về top phim hay: gồm những bộ phim đáng xem nhất

5 Các chức năng cần có của website

- Tin tức

+ Các mục tin

+ Xem chi tiết

+ Tin cũ hơn, tin mới hơn

+ Xem tin theo ngày tháng

Trang 4

- Đăng nhập

- Đăng kí

- Lấy lại mật khẩu

- Bình luận tin tức

II Phác thảo ý kiến thiết kế

1 Ý tưởng thiết kế hệ điều hướng:

- Hệ thống điều hướng chính: thanh menu

- Menu thiết kế rõ ràng: Khi đang ở trang nào trong website có trên thanh menu, thì nền sẫm màu hơn sẽ ở vị trí của tên trang đó trên thanh menu

Từ đó người dùng có thể biết mình đang ở đâu trong trang web

- Từ trang chủ có thể di chuyển tới tất cả các trang con trong website

2.Website sử dụng màu sắc

- Gam màu chủ đạo: gam màu lạnh

- Gam màu sử dụng chủ yếu: màu xanh dương, màu trắng,…

3 Lý do chọn màu

Tạo cảm giác trang nhã êm dịu cho người đọc Màu xanh dương biểu hiện về trí óc, sự đảm bảo và tín nhiệm Màu trắng thể hiện sự tối giản và tinh khiết

4 Bố cục layout của trang web

- Header top: chứa logo, đăng kí, đăng nhập, thanh tìm kiếm

- Header menu: chứa trang chủ, thể loại, review phim, top phim hay

- Content: danh sách tin tức và khi trỏ chuột vào sẽ xuất hiện bài viết

- Footer: chứa các thông tin về website, chủ sở hữu, quảng cáo thươnghiệu, liên hệ

* Sơ đồ trang chủ:

Trang 5

45px Trang chủ Thể loại Review phim Top phim hay

Tin tứcTin nổi bật

Tin tức

Thông tin bản quyền trang tin tức

* Bố cục layout trang con, style và cách thức thiết kế:

1 Header top: chứa logo, đăng kí, đăng nhập, thanh tìm kiếm

2 Header menu: trang chủ, thể loại, review phim, top phim hay

Đăng nhập/ Đăng kíLogo

Tìm kiếm

Trang 6

3 Content: tin tức chi tiết của các bộ phim

4 Footer: chứa các thông tin về website, chủ sở hữu, quảng cáo thương hiệu, liên hệ

* Sơ đồ trang con thể loại

- Header menu: chứa trang chủ, các loại thể loại kinh dị, tâm lý, hài, hànhđộng, viễn tưởng, review phim, top phim hay

- Content: danh sách tin tức và khi trỏ chuột vào sẽ xuất hiện bài viết

1020px

Tìm kiếm

Trang 7

Tin tức

* Sơ đồ trang con review phim

- Content: danh sách phim được review và khi trỏ chuột vào sẽ xuất hiệnbài viết

Phim tâm lýPhim hàiPhim hành độngPhim kinh dịPhim viễn tưởng

Trang 8

Phim nước ngoài

Tin tức Tin tứcTin nổi bật

Tin tức Tin tức

Phim nước ngoài

Tin tức Tin tứcTin nổi bật

Tin tức Tin tức

* Sơ đồ trang con top phim hay

- Content: danh sách giới thiệu top phim hay và khi trỏ chuột vào sẽ xuấthiện bài viết

1020px

Tìm kiếm

Trang 9

Top phim hay

Tin tức

* Sơ đồ trang con đăng nhập

- Content: đăng nhập tài khoản cho người đọc tin tức gồm nhập địa chỉemail / số điện thoại, mật khẩu, ghi lại tài khoản và phần lấy lại mật khẩu

1020px

Tìm kiếm

Trang 10

Đăng nhập Địa chỉ email / Số điện thoại

Mật khẩu

Ghi nhớ mật khẩu

* Sơ đồ trang con đăng kí

- Content: đăng kí tài khoản cho người đọc tin tức gồm nhập địa chỉ email/ số điện thoại, mật khẩu, nhập lại mật khẩu

1020px

ĐĂNG NHẬPLấy lại mật khẩu

Tìm kiếm

Trang 11

Đăng kí Địa chỉ email / Số điện thoại

Mật khẩu

Nhập lại mật khẩu

5 Các thành phần dự kiến trên giao diện

Chi tiết

Hài

Hànhđộng

c

Trang 12

*Website có: - 1 trang chủ

- 3 trang con chính: review phim, thể loại, top phim hay

- 1 trang con chi tiết review phim, 1 trang con chi tiết top phim hay, 5trang con chi tiết thể loại phim, 2 trang tài khoản

Phần III: Giao diện website

1 Giao diện trang chủ

ViễntưởngKinh dị

Chi tiết

Trang 13

2 Giao diện chi tiết trang chủ

Trang 14

3 Giao diện trang thể loại

Trang 15

4 Giao diện trang chi tiết thể loại

Trang 20

5 Giao diện trang review phim

Trang 21

6 Giao diện trang chi tiết review phim

Trang 22

7 Giao diện trang top phim hay

Trang 23

8 Giao diện trang chi tiết top phim hay

Trang 24

9 Giao diện chi tiết trang đăng nhập, đăng kí, lấy lại mật khẩu

Trang 26

Phần IV : Tài liệu tham khảo và các phần mềm sử dụng:

[1] Ths Nguyễn Thị Quỳnh Như – Giáo trình thiết kế web - 2019 [2] https://news.zing.vn/ - Hội xuất bản Việt Nam

[3] https://vnexpress.net/giai-tri/phim/diem-phim

Định dạng
Số trang	26
Dung lượng	7,78 MB