Thiết kế trang web đọc báo buoibi

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 NHÓM 8 Đề tài: Thiết kế trang web đọc báo BUOIBI Giảng viên: Nguyễn Thị Tuyết Mai Nguyễn Thị Thanh Tâm Hà 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

NHÓM 8

Đề tài: Thiết kế trang web đọc báo BUOIBI

Giảng viên: Nguyễn Thị Tuyết Mai

Nguyễn Thị Thanh Tâm

Hà Nội – 2021

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 của website: truyền tải các tin tức, thông tin từ khắp nơi đến các bạn đọc; nhiều thông tin khác nhau (thời sự, xã hội, thể thao, giải trí, …)

- Lợi ích của website tin tức:

o Thông tin luôn được cập nhật nhanh chóng

o Thông tin luôn được kiểm duyệt

o Dễ dàng truy cập thông qua internet

o Phù hợp với mọi đối tượng, lứa tuổi

o Là cầu nối mang thông tin giữa nhà nước và người dân

o …

-

II QUY TRÌNH LÀM VIỆC CỦA NHÓM

1 PHÂN TÍCH WEBSITE

- Ý tưởng: do công nghệ càng ngày càng phát triển, các trang báo điện tử dần thay thế cho các trang báo giấy truyền thống Do đó chúng em làm một website đọc báo phục vụ nhu cầu cập nhật thông

tin một cách nhanh chóng và 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 thanh ngang

- Có 5 loại trang chính của 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 trên ba nền tảng: Desktop, Smartphone,

Tablet

2 THIẾT KẾ GIAO DIỆN

- Mỗi thành viên trong nhóm sẽ đả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 con

v Trang thoát

- Sau khi phân chia công việc thì từng thành viên sẽ đảm nhận việc

làm giao diện của từng người:

i Nguyễn Quang Toàn: Làm trang chủ

ii Đoàn Quốc Đại: Làm trang con iii Phạm Hoàng Giang: Làm trang thoát

iv Nguyễn Tuấn Anh: Làm trang đăng nhập và đăng ký

- Mỗi thành viên sẽ làm các trang qua ba nền tảng: Desktop,

Smartphone và Tablet

- Phần wireframe của từng nền tảng:

i Desktop:

Trang đăng nhập

Trang đăng ký

Trang chủ

Trang con tin tức

Trang thoát 1

Trang thoát 2

ii Smartphone:

Trang đăng nhập

Trang đăng ký

Trang chính

Trang con tin tức

Trang thoát 1

Trang thoát 2

iii Tablet:

Trang đăng nhập

Trang đăng ký

Trang chủ

Trang con tin tức

Trang thoát 1

Trang thoát 2

- Prototype của từng nền 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

3 LÀM CODE WEB:

- Nhóm sử dụng code html và css để code giao diện cho trang web

- HTML:

i Sử dụng các kiến thức đã được học để làm giao diện:

1 H1, h2, h3,…, h6: dung để ghi tiêu đề

2 Img: dung để gắn ảnh vào trong website

3 UL, li: phân chia các đề mục ở trên thanh điều hướng

4 Input: tạo ô đăng nhập, nhập dữ liệu, bình luận

Phần code HTML

- CSS: Sử dụng Css để sắp xếp, điều chỉnh giao diện, bố cục của trang web

- Một số thuộc tính CSS được sử dụng trong bài:

i Position sticky: dung cho phần điều hướng của trang web

ii Margin: dung để sắp xếp bố cục, dàn trang

iii Điều chỉnh các chữ thông qua: font-style, font-size, color, text-align

iv Dùng width, height để điều chỉnh độ dài, rộng của các đề mục

v Sử dụng border để tạo đường viền cho các mục tin, phân cách rõ ràng

Phần code CSS của nhóm Kết quả quá trình code giao diện trang web:

Giao diện đăng nhập

Giao diện trang chủ

Giao diện trang con III.Tổng kết:

Qua quá trình học thì bọn em đã có thể tạo nên giao diện một trang web tin tức đơn giản Tuy nhiên vẫn còn rất 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 cách để thiết kế ra một website đơn giản

Cảm ơn cô đã xem phần báo cáo của nhóm chúng em