TRƯỜNG ĐẠI HỌC XÂY DỰNG KHOA CÔNG NGHỆ THÔNG TIN o0o BÁO CÁO BÀI TẬP LỚN MÔN LẬP TRÌNH WEB (NHÓM 12) ĐỀ TÀI XÂY DỰNG GIAO DIỆN WEBSITE DỰA TRÊN WEBSITE CÓ SẴN SỬ DỤNG NGÔN NGỮ HTML CSS THUẦN GVPT Nguy[.]
Trang 1TRƯỜNG ĐẠI HỌC XÂY DỰNG
KHOA CÔNG NGHỆ THÔNG TIN
-o0o -BÁO CÁO BÀI TẬP LỚN
MÔN LẬP TRÌNH WEB (NHÓM 12)
ĐỀ TÀI:
XÂY DỰNG GIAO DIỆN WEBSITE DỰA TRÊN WEBSITE CÓ SẴN SỬ DỤNG NGÔN NGỮ HTML CSS THUẦN
GVPT: Nguyễn Hải Dương.
Nhóm sinh viên thực hiện:
Trịnh Ngọc Dương 64CS3 MSSV 39864
Dương Minh Tú 64CS3 MSSV 1660864
Hà Nội, tháng 6 năm 2021.
Trang 3LỜI MỞ ĐẦU
HTML, CSS và JavaScript là những ngôn ngữ phổ biến nhất để phát triển Website trên mọi nền tảng hiện nay
Việc xây dựng một Website bằng các công nghệ mới như Bootstrap, JavaScript JQuery đang trở thành một xu hướng lớn trên thế giới Giúp giao diện web có thể
dễ dàng tương thích với nhiều loại máy khác nhau, và hỗ trợ tính năng Responsive Sau khi kết thúc học phần môn học Lập trình Web được bổ sung các kiến thức như các ngôn ngữ: HTML, CSS, JavaScript, JQuery Vấn đề được đặt ra là việc áp dụng các công nghệ mới đang dần thay thế ít nhiều ngôn ngữ HTML, CSS thuần nhằm tối ưu hơn và dễ sử dụng hơn thì Việc xây dựng Website bằng các ngôn ngữ HTML CSS thuần mà không áp dụng các thư viện có sẵn và các công nghệ mới sẽ như thế nào?
Với Bài Tập Lớn: Xây dựng giao diện Website bằng ngôn ngữ HTML, CSS thuần dựa trên Website có sẵn, thì nhóm chúng em đã lựa chọn Website:
https://www.nuce.edu.vn/ để thưc hiện cho đề tài này
Trang 4I BÁO CÁO KẾT QUẢ
Sử dụng ngôn ngữ HTML CSS để ứng dụng vào Xây dựng Website
https://www.nuce.edu.vn/ cơ bản đã được nhuần nhuyễn, nắm vững được cú pháp, cách sử dụng để áp dụng vào thiết kế layout, hoàn thiện các thành phần con, các hiệu ứng kèm theo ở mức cơ bản
Đã Xây dựng xong giao diện Website dựa theo Website mẫu:
- Mức độ giống nhau giữa 2 bên : Tương đối 89%
- Layout cơ bản gần giống với bản mẫu
- Các hiệu ứng hover di chuột, zoom ảnh… đã được thực hiện.
- Các thành phần con trong giao diện chính gần hoạn thiện hết
- Không sử dụng các thư viện hoặc ngôn ngữ khác
Ngoài việc hoàn thiện giống như Website, chúng em đã sử dụng công nghệ nhúng để thêm hai phần: Video và Maps với mục đích là thêm 1 chút nội dung để Website phong phú hơn
Đã thêm tính năng Responsive cho Website ở 3 mức độ Mobile, IPad và cho
PC
II NHỮNG TỒN TẠI VÀ VẤN ĐỀ CHƯA HOÀN THÀNH
Việc sử dụng HTML, CSS:
- Chưa tối ưu được lượng code còn dài dòng, lặp lại và dễ xung đột code
- Đặt tên các class, id chưa chuẩn có thể dẫn dến người đọc khó tiếp cận
Những vấn đề chưa hoàn thiện:
- Slide chuyển ảnh, phần Tạp trí chưa thể auto tự động chuyển đổi
- Font-chữ còn chưa chuẩn
- Đang xây dựng thêm Chatbox nhưng còn nhiều bất cập, Nhận xét:
có thể nhúng ChatBot Messenger vào Website chính thức với chủ đề tư vấn tuyển sinh
Trang 5- Chạy được trên tất cả các trình duyệt khác nhau.
Hướng phát triển tiếp theo của chúng em (Nếu…):
- Hoàn thiện hoàn toàn Website
- Tối ưu lượng code
- Thêm các animation mà không dùng đến JS mà lại xin xò như Website của Viện CNTT HUST
KẾT LUẬN
Thông qua việc tìm hiểu và thực hiện Bài Tập Lớn này đã giúp chúng em đã
có cái nhìn thực tế toàn diện hơn về Lập trình Website Đây là 1 trong số những bài tập giúp tiếp cận gần hơn với 2 ngôn ngữ chính để Xây dựng Website Do thời gian
có hạn nên đề tài không tránh khỏi những sai sót, mong thầy góp ý, đánh giá để có thể giúp chúng em hoàn thiện hơn trên phương diện học phần môn Lập trình Web
Lưu ý: - Khi chạy source code khuyến nghị nên chạy trên trình duyệt Chrome
có mạng Internet Vì là ảnh offine nên có một số PC khi giải nén có thể gặp lỗi đường dẫn src=“img/…” có thể xóa đầu mục: img/ để chạy bình thường.
Trang 6Dưới đây là 1 số hình ảnh về Demo Giao diện Website:
Header Website
Một số thành phần con
Trang 7Recommandé pour toi Suite du document ci-dessous
Kiến trúc máy tính - MARS
34
Kiến trúc máy tính - MARS Tutorial
21
TEST-2 - k có mô tả
4
Trang 8Nav Menu
Các thành phần được nhúng thêm
Footer Website
Trang 9Chức năng Responsive
Trang 11Nav Menu khi Responsive