Giáo trình HTML5 - Bài thực hành số 5: Làm việc với CSS3
Chú ý chung với toàn bộ các buổi lab:
- Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng
một trong các chương trình soạn thảo mã sau:
o Notepad ++
o E- Text Editor
Mục tiêu
Buổi thực hành số 6 giúp sinh viên làm việc được với những thành phần mới trong CSS3:
- Border, gradient, transform, animation,
- Truy vấn CSS3
- Layout với CSS3
1 Bài thực hành số 5 – Làm việc với CSS3 Chú ý chung với toàn bộ các buổi lab: - Toàn bộ bài tập trong các buổi lab, bắt buộc sinh viên phải viết mã bằng tay, sử dụng một trong các chương trình soạn thảo mã sau: o Notepad ++ o E- Text Editor Mục tiêu Buổi thực hành số 6 giúp sinh viên làm việc được với những thành phần mới trong CSS3: - Border, gradient, transform, animation, … - Truy vấn CSS3 - Layout với CSS3 WEB302_ HTML5 & CSS3 Lab5 2 Bài 1 Sinh viên tự thực hành trước các bước trong SGK với thư mục: - HTML5_11lessons - HTML5_12lessons Nộp thư mục hoàn thiện theo tên: - HTML5_11lessons_done - HTML5_12lessons Bắt buộc sinh viên phải làm và phải có kết quả nộp cho giảng viên theo dõi. Nếu sinh viên nào không thực hiện, giảng viên có quyền trừ điểm vào các bài tập sau WEB302_ HTML5 & CSS3 Lab5 3 Bài 2 Sử dụng layout có trong thư mục TaiNguyen\Lesson02 Thực hiện yêu cầu sau: - Dàn layout theo chuẩn HTML5 - Sử dụng kiến thức về border, shadow đã được học ở CSS3 để áp dụng cho border album ảnh - Chèn thêm fonts Futura có trong thư mục fonts để áp dụng cho text WEB302_ HTML5 & CSS3 Lab5 4 Bài 3 Sử dụng layout dành cho mobile trong thư mục TaiNguyen\Lesson03\ index_mobile.psd: Sử dụng chuẩn HTML5 dàn layout đó cho thiết bị di động WEB302_ HTML5 & CSS3 Lab5 5 Sinh viên lưu file kết quả theo tên: index_mobile.html Yêu cầu nộp bài Cuối giờ thực hành, sinh viên tạo thư mục theo tên _Lab6, chứa tất cả sản phẩm của những bài 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 LMS. WEB302_ HTML5 & CSS3 Lab5
File đính kèm:
- Bài thực hành số 5_Làm việc với CSS3.pdf