THỰC HÀNH THIẾT KẾ WEB

Lab 7 & 8 – Bootstrap Frame work

Chú ý chung với toàn bộ các bài Lab:

- Toàn bộ bài tập trong các bài Lab, sinh viên sử dụng một trong các chương
trình soạn thảo mã nguồn sau:

o Notepad ++

o EditPlus

o Visual studio code

Mục tiêu

Bài thực hành nhằm giúp sinh viên hiểu rõ và sử dụng thành thạo Bootstrap Frame

work trong việc thiết kế giao diện web, bao gồm:

- Bootstrap Grid System

- Bootstrap Text/Typography

- Bootstrap Images

- Bootstrap Navigation Bar

- Bootstrap Forms

- Bootstrap Carousel Plugin

GV: BÙI DUY TÂN 1

 THỰC HÀNH THIẾT KẾ WEB

Bài 1
1. Layout mẫu và các tư liệu thiết kế được cung cấp tại resource\Lesson07\
2. Root folder có tên là Bootstrap_Site bao gồm các trang web sẽ thiết kế và các
tài nguyên sử dụng (hình ảnh, thư viện css,…)
Sử dụng Bootstap Frame work để thiết kế giao diện trang simplyme.html theo mẫu:

Tham khảo hướng dẫn chi tiết tại:

https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp

Bài 2
Sử dụng Bootstap Frame work để thiết kế giao diện trang company.html theo mẫu:

Tham khảo hướng dẫn chi tiết tại:

https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

GV: BÙI DUY TÂN 2

 THỰC HÀNH THIẾT KẾ WEB

Bài 3
Sử dụng Bootstap Frame work để thiết kế giao diện trang theband.html theo mẫu:

Tham khảo hướng dẫn chi tiết tại:

https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp

Folder bài nộp là:

- Bootstap_Site_final

Yêu cầu nộp bài

Sinh viên tạo thư mục theo tên Malop_HovaTen_MSSV_Lab7-8, chứa tất cả
sản phẩm của những bài tập trong Lab trên, nén lại thành file zip và upload lên
mục nộp bài tương ứng trên hệ thống do GV quy định.
Đánh giá bài Lab

STT Bài số Điểm

1 Bài 1 2
2 Bài 2 4
3 Bài 3 4

GV: BÙI DUY TÂN 3