Đang tải... (xem toàn văn)
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG BÁO CÁO MÔN THIẾT KẾ WEB CƠ BẢN Đề tài Thiết kế trang web đọc báo BUOIBI I GIỚI THIỆU VỀ DỰ ÁN WEB Tên website Web đọc báo tin tức “BUOIBI” Phân loại website We[.]
HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÁO CÁO MÔN THIẾT KẾ WEB CƠ BẢN Đề tài: Thiết kế trang web đọc báo BUOIBI I GIỚI THIỆU VỀ DỰ ÁN WEB: - Tên website: Web đọc báo tin tức “BUOIBI” - Phân loại website: Website thông tin, website tĩnh - Nội dung website: truyền tải tin tức, thông tin từ khắp nơi đến bạn đọc; nhiều thông tin khác (thời sự, xã hội, thể thao, giải trí, …) - Lợi ích website tin tức: o Thơng tin ln cập nhật nhanh chóng o Thông tin kiểm duyệt o Dễ dàng truy cập thông qua internet o Phù hợp với đối tượng, lứa tuổi o Là cầu nối mang thông tin nhà nước người dân o … - II QUY TRÌNH LÀM VIỆC CỦA NHĨM PHÂN TÍCH WEBSITE - Ý tưởng: công nghệ ngày phát triển, trang báo điện tử dần thay cho trang báo giấy truyền thống Do chúng em làm website đọc báo phục vụ nhu cầu cập nhật thơng tin cách nhanh chóng tiện lợi - Thể loại website: website thông tin, website tĩnh - Màu chủ đạo: trắng, bạc, đen: tạo cảm giác đơn giản, tập trung; không bị xao lãng cho người đọc - Điều hướng: Điều hướng ngang - Có loại trang website: i Trang đăng nhập ii Trang đăng ký iii Trang chủ (trang chính) iv Trang nội dung tin (trang con) v Trang đăng xuất (trang thoát) - Thiết kế cho website chạy ba tảng: Desktop, Smartphone, Tablet THIẾT KẾ GIAO DIỆN - Mỗi thành viên nhóm đảm nhận làm giao diện cho năm trang khác nhau: i Đăng nhập ii Đăng ký iii Trang chủ iv Trang v Trang - Sau phân chia cơng việc thành viên đảm nhận việc làm giao diện người: i Nguyễn Quang Toàn: Làm trang chủ ii Đoàn Quốc Đại: Làm trang iii Phạm Hoàng Giang: Làm trang thoát iv Nguyễn Tuấn Anh: Làm trang đăng nhập đăng ký - Mỗi thành viên làm trang qua ba tảng: Desktop, Smartphone Tablet - Phần wireframe tảng: i Desktop: Trang đăng nhập Trang đăng ký Trang chủ Trang tin tức Trang thoát Trang thoát ii Smartphone: Trang đăng nhập Trang đăng ký Trang Trang tin tức Trang thoát Trang thoát iii Tablet: Trang đăng nhập Trang đăng ký Trang chủ Trang tin tức Trang thoát Trang thoát - Prototype tảng: i Desktop: https://www.figma.com/file/LYbn7wiS9qEa16rfYRxNld/De sktop?node-id=31%3A2 ii Smartphone: https://www.figma.com/file/3UHRcoK1NH9nkhNFSNHVss/ SmartPhone?node-id=0%3A1 iii Tablet: https://www.figma.com/file/rMTkdKGe3ASKHWuZZBHo Wa/Tablet LÀM CODE WEB: - Nhóm sử dụng code html css để code giao diện cho trang web - HTML: i Sử dụng kiến thức học để làm giao diện: H1, h2, h3,…, h6: dung để ghi tiêu đề Img: dung để gắn ảnh vào website UL, li: phân chia đề mục điều hướng Input: tạo ô đăng nhập, nhập liệu, bình luận Phần code HTML - CSS: Sử dụng Css để xếp, điều chỉnh giao diện, bố cục trang web - Một số thuộc tính CSS sử dụng bài: i Position sticky: dung cho phần điều hướng trang web ii Margin: dung để xếp bố cục, dàn trang iii Điều chỉnh chữ thông qua: font-style, font-size, color, text-align iv Dùng width, height để điều chỉnh độ dài, rộng đề mục v Sử dụng border để tạo đường viền cho mục tin, phân cách rõ ràng Phần code CSS nhóm Kết trình code giao diện trang web: Giao diện đăng nhập Giao diện trang chủ Giao diện trang III.Tổng kết: Qua trình học bọn em tạo nên giao diện trang web tin tức đơn giản Tuy nhiên nhiều thiếu sót mà chúng em cần phải trau dồi thêm Môn học giúp chúng em biết cách để thiết kế website đơn giản Cảm ơn cô xem phần báo cáo nhóm chúng em