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

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

Lớp

: 1910A04

Hà Nội -2020


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à


Đị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ấp
tin 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


- Đă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ương
hiệu, liên hệ


* Sơ đồ trang chủ:
1020px

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

Logo

Tìm kiếm
45px

Trang chủ

Thể loại

Tin nóng trong tuần

Review phim

Top phim hay

Tin mới / Tin cũ
Tin tức

Tin nổi bật

Tin tức

Tin tức

Tin tức
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
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 top: chứa logo, đăng kí, đăng nhập, thanh tìm kiếm
- 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
- 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ệ


1020px

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

Logo

Tìm kiếm
45px

Trang chủ

Thể loại

Review phim

Top phim hay

Phim tâm lý
Tin nóng trong tuần

Phim hài
Phim hành động

Phim kinh dị

Tin mới / Tin cũ
Tin tức

Tin nổi bật
Phim viễn tưởng

Tin tức

Tin tức

Tin tức
Tin tức

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

* Sơ đồ trang con review phim
- 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 phim được review 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ương
hiệu, liên hệ

1020px

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

Logo

Tìm kiếm
45px

Trang chủ

Thể loại

Review phim

Top phim hay

Phim nước ngoài
Tin tức

Tin tức

Tin tức

Tin tức

Tin tức

Tin tức

Tin tức

Tin tức

Tin nổi bật

Phim nước ngồi

Tin nổi bật

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

* Sơ đồ trang con top phim hay
- 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 giới thiệu top phim hay 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ương
hiệu, liên hệ

1020px

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

Logo

Tìm kiếm
45px

Trang chủ

Thể loại

Review phim

Top phim hay

Top phim hay
Tin tức
Tin nổi bật

Tin tức

Tin tức

Tin tức
Tin tức

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

* Sơ đồ trang con đăng nhập
- 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: đă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
- 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ệ

1020px

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

Logo

Tìm kiếm
45px

Trang chủ

Thể loại

Review phim

Top phim hay

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

Mật khẩu
Ghi nhớ mật khẩu

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

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

* Sơ đồ trang con đăng kí
- 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: đă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
- 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ệ

1020px

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

Logo

Tìm kiếm
45px

Trang chủ

Thể loại

Review phim

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

Mật khẩu

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

ĐĂNG KÍ

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

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

Top phim hay


Trang chủ

Review phim

Thể loại

Top phim hay

Chi tiết

Tâm lý

Chi tiết

Hài
Hành
động
Viễn
tưởng
Kinh dị

Chi tiết

*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, 5
trang 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ủ


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


3. Giao diện trang thể loại


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





5. Giao diện trang review phim


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


7. Giao diện trang top phim hay

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


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