Báo cáo môn học lập trình web Đê tai lam trang cá nhân

TRƯỜNG ĐẠI HỌC ĐIỆN LỰCKHOA CÔNG NGHỆ THÔNG TIN BÁO CÁO MÔN HỌC LẬP TRÌNH WEB ĐÊ TAI: LAM TRANG CÁ NHÂN Sinh viên thực hiện : HOANG MẠNH HÙNG Giảng viên hướng dẫn : HOANG THANH TÙNG Hà N

TRƯỜNG ĐẠI HỌC ĐIỆN LỰC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO MÔN HỌC

LẬP TRÌNH WEB

ĐÊ TAI:

LAM TRANG CÁ NHÂN

Sinh viên thực hiện : HOANG MẠNH HÙNG Giảng viên hướng dẫn : HOANG THANH TÙNG

Hà Nội, tháng 5 năm 2023

PHIẾU CHẤM ĐIỂM STT Họ và tên sinh

viên

ký

1 Hoàng Mạnh Hùng

Giảng viên chấm 1:

Giảng viên chấm 2:

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU VÊ TRANG WEB 1

1.1.Tổng quan 1

1.2.Trang web tương tự 1

Hình 1.2.1.Trang Witch cult translations 1

Hình 1.2.2 Phần header của epic 2

Hình 1.2.3.Phần footer của epic 2

CHƯƠNG 2 THIẾT KẾ BỐ CỤC 3

1 Bố cục phần home 3

Hình 2.1.Bố cục page home 3

2 Bố cục trang novel 3

Hình 2.2.Bố cục trang novel 4

3 Bố cục trang game 4

Hình 2.3.Bố cục trang game 4

CHƯƠNG 3 KẾT QUẢ THỰC HIỆN 5

1.1 Phần trang home 5

Hình 3.1.Kết quả trang home trênmáy tính 5

Hình 3.2.Kết quả trang home trên điện thoại 5

1.2 Phần trang novel 6

Hình 3.3.Kết quả trang novel trên máy tính 6

Hình 3.4.Kết quả trang novel trên điện thoại 6

1.3 Phần trang game 7

Hình 3.5.Kết quả trang home trên máy tính 7

Hình 3.6.Kết quả trang game trên máy tính 7

Hình 3.7.Kết quả trang game trên điện thoại 8

CHƯƠNG 1: GIỚI THIỆU VÊ TRANG WEB

1.1.Tổng quan

Hiện nay, lĩnh vực công nghệ đang đứng đầu xu thế và được phổ cập cực nhanh, không khó để bắt gặp những câu nói như là “IT là vua mọi nghề”, “1 mét vuông 10 thằng IT” hay “tôi có thằng anh sinh năm 96 ” Bởi vậy nên rất đáng tiếc, là tỉ lệ cạnh tranh khi phỏng vất xin việc

là vô cùng lớn do cung đã vượt quá cầu Vậy nên, để khiến nhà tuyển dụng lựa chọn mình thay vì những người khác, em sẽ phải thể hiện được giá trị của bản thân Đó là lý do vì sao em chọn thiết kế 1 trang cá nhân với phong cách của riêng em và chia sẻ lên đó những gì mình thích 1.2.Trang web tương tự

Trang web được lấy ý tưởng từ web-novel: Witch cult translations

và web-store: epic game

Sau đây là 1 số hình ảnh từ trang web:

Hình 1.2.1.Trang Witch cult translations

Hình 1.2.2 Phần header của epic

Hình 1.2.3.Phần footer của epic

CHƯƠNG 2 THIẾT KẾ BỐ CỤC

1 Bố cục phần home

Hình 2.1.Bố cục page home -Phần header gồm: ảnh bìa, chữ

-Phần main gồm 2 phần là content_left(30%) và content_right(70%): +content_left gồm: avatar, tên, giải thích,

+content_right gồm: phần menu, nút follow và ảnh( hiện đang trong mục home)

2 Bố cục trang novel

Hình 2.2.Bố cục trang novel -Phần header gồm ảnh bìa

-Phần center gồm menu, thanh tìm kiếm và hình ảnh cũng như link dẫn đến trang truyện thực

3 Bố cục trang game

Hình 2.3.Bố cục trang game -Phần menu gồm có menu và thanh tìm kiếm

-Phần header gồm có hình ảnh thông tin hot

-Phần cencer_left gồm: 1 background , ảnh logo game được chèn vào, phần giới thiệu và 2 bottom mua và thêm vào list

-Phần cencer_right gồm: 1 list game theo chiều dọc( theo store epic thì nó

sẽ sổ ra thông tim của phần game sang bên cencer_left)

-Phần bottom thì có những game được sale cực hot

-Phần fotter có những game thuộc top máy khỏe

CHƯƠNG 3 KẾT QUẢ THỰC HIỆN 1.1 Phần trang home

Hình 3.1.Kết quả trang home trênmáy tính

Hình 3.2.Kết quả trang home trên điện thoại

1.2 Phần trang novel

Hình 3.3.Kết quả trang novel trên máy tính

Hình 3.4.Kết quả trang novel trên điện thoại

1.3 Phần trang game

Hình 3.5.Kết quả trang game trên máy tính

Hình 3.6.Kết quả trang game trên máy tính

Hình 3.7.Kết quả trang game trên điện thoại