Tài liệu thực hành môn Lập trình Web - Lab 04
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
Môn học: Lập trình Web
LAB 04
I.
Mục tiêu
•
•
•
Hiểu biết và sử dụng được các thuộc tính CSS3 thông dụng thường gặp để tạo hiệu ứng cho các
phần tử trong tài liệu HTML.
Hiểu biết về phương pháp thiết kế trang web hỗ trợ hiển thị tốt trên nhiều loại thiết bị
(Responsive Web Design).
Hiểu biết và sử dụng CSS Bootstrap Framework.
II. Các bước thực hiện
1. Tìm hiểu CSS3 và các thuộc tính CSS3 thông dụng
o CSS3 là phiên bản nâng cấp từ phiên bản CSS2.1, CSS3 hỗ trợ nhiều hiệu ứng
giao diện mới cho các phần tử của tài liệu HTML như shadows, gradients,
transitions or animations,…
2. Responsive Web Design
o Meta Viewport: thiết lập cho trình duyệt hiển thị tương tứng với kích thước
màn hình thiết bị. Đặt thẻ meta bên dưới trong phần head của tài liệu HTML.
<meta name="viewport" content="width=device-width, initial-scale=1">
o CSS Media Query: khai báo CSS3 cho từng mức chiều rộng của thiết bị
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
…
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
…
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
…
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
…
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
…
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
…
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
…
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
…
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
…
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
…
}
Trang 1/3
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
3. CSS Bootstrap Framework
o Bootstrap là một CSS Framework (thư viện bao gồm các mẫu HTML, các lớp
CSS, hàm javascript được khai báo sẵn) hỗ trợ thiết kế trang web hiển thị tốt
trên nhiều loại thiết bị khác nhau (responsive web design).
o Sinh viên tham khảo CSS Bootstrap Framework và cách sử dụng tại:
III. Bài tập
•
•
Tận dụng các thuộc tính CSS3 đã biết để tạo hiệu ứng cho các phần tử của trang web.
Cách chọn màu sắc có thể tham khảo tại:
o
o
Bài 1. Dùng ngôn ngữ HTML5 và CSS3 để tạo ra một trang web có bố cục như hình bên dưới.
Ø Yêu cầu:
o
o
Trang web phải hỗ trợ hiển thị giống nhau trên các trình duyệt phổ biến hiện nay (Firefox,
Chrome, IE, Safari,…).
o
Responsive Web Design: Trang web hỗ trợ hiển thị tốt trên nhiều loại thiết bị khác nhau
(máy tính, máy tính bảng, điện thoại,…).
o
o
Sinh viên có thể sử dụng CSS Bootstrap Framework.
Sinh viên hiện thực mã nguồn vào 2 files:
1. index.html: chứa mã HTML5
2. style.css: chứa mã CSS3 dùng để định dạng các phần tử trong tài liệu HTML5.
Trang 2/3
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
Bài 2. Dùng ngôn ngữ HTML5 và hiệu ứng và CSS3 để tạo ra một trang web có bố cục như hình
bên dưới.
Ø Yêu cầu:
o
o
Trang web phải hỗ trợ hiển thị giống nhau trên các trình duyệt phổ biến hiện nay (Firefox,
Chrome, IE, Safari,…).
o
Responsive Web Design: Trang web hỗ trợ hiển thị tốt trên nhiều loại thiết bị khác nhau
(máy tính, máy tính bảng, điện thoại,…).
o
o
Sinh viên có thể sử dụng CSS Bootstrap Framework.
Sinh viên hiện thực mã nguồn vào 2 files:
1. index.html: chứa mã HTML5
2. style.css: chứa mã CSS3 dùng để định dạng các phần tử trong tài liệu HTML5.
--HẾT--
Trang 3/3
3 trang
25460
Free
Bạn đang xem tài liệu "Tài liệu thực hành môn Lập trình Web - Lab 04", để tải tài liệu gốc về máy hãy click vào nút Download ở trên
File đính kèm:
- tai_lieu_thuc_hanh_mon_lap_trinh_web_lab_04.pdf
1513804.rar
