thiet kế web

1. Thực hành Thiết kế giao diện người dùng
Thực hành 1 1
THỰC HÀNH 3
Mục tiêu:
- Sử dụng CSS bố trí các thành phần trong một giao diện người dùng. Tạo trang
web đơn giản:
o Sử dụng CSS (SV xem trong file lý thuyết trong thư mục)
o Sử dụng bootstrap (xem file lý thuyết trong thư mục và trên website:
https://getbootstrap.com/)
- Công cụ sử dụng: visual studio code, sublime text, ….
- Yêu cầu: Tạo thư mục styles. Các file css sẽ để trong thư mục này
Bài thực hành
Bài 1: Sử dụng html, css để hoàn thành giao diện sau:
Mô tả: Ban đầu giao diện chỉ có menu phía trên. Khi đưa chuột vào từng mục menu
nhỏ (trừ mục Home) thì menu con sẽ xuất hiện như hình
Hướng dẫn: Tạo file bai1.html. Sử dụng thẻ ul, li để tạo menu. Sử dụng css (tạo các
class trên file riêng hoặc trên cùng 1 file html)
Bài 2:
Tạo file bai2.html. Sử dụng css và html để tạo menu như sau
Khi rê chuột vào 1 menu con thì đổi màu giống hình.
Hướng dẫn: cách làm tương tự bài 1
Bài 3:
Tạo file bai3.html. Sử dụng css và html để tạo giao diện như sau:

2. Thực hành Thiết kế giao diện người dùng
Thực hành 1 2
Hướng dẫn:
- Dùng thẻ div để chia giao diện thành 2 khung (2 dòng)
- Dùng thẻ ul, li để tạo menu
Bài 4:
Tạo file bai4.html. Sử dụng css và html để tạo giao diện như sau:
Hướng dẫn:
- Dùng thẻ div để chia giao diện thành 3 khung (header, body và footer)
Trong thẻ head, dùng 2 thẻ div để phân thành 2 dòng: 1 dòng cho logo,
slogan và 1 dong dành cho menu

3. Thực hành Thiết kế giao diện người dùng
Thực hành 1 3
Bài 5: Sử dụng html và các thuộc tính/css để thực hiện giao diện sau: (SV tự chọn
hình ảnh).
- Khi click vào “Thắng cảnh” ➔ mở tra trang web bất kỳ trên tab mới
- Khi click vào “văn hóa” ➔ mở ra trang web bất kỳ (trên cùng tab)
- Khi click vào “Di tích lịch sử” ➔ không mở trang web nào
- Khi click vào hình ➔ mở ra trang web bất kỳ
Bài 6: Sử dụng html và css và bootstrap để thực hiện giao diện sau: Trong đó dòng
chữ “Khoa công nghệ thông tin sẽ di chuyển từ theo chiều dọc)
Bài 7:
Sử dụng html và css và bootstrap để thực hiện tiếp giao diện như sau:

4. Thực hành Thiết kế giao diện người dùng
Thực hành 1 4