Tài liệu thực hành môn Lập trình Web - Lab 03
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 03
I.
Mục tiêu
•
•
•
•
Hiểu biết về CSS và cách thức sử dụng CSS (Cascading Style Sheets) trong một tài liệu HTML.
Hiểu biết một số thuộc tính CSS thông dụng thường gặp.
Hiểu biết về các phương pháp thiết kế layout đơn giản cho trang web.
Hiểu biết về các phương pháp thiết kế layout cho trang web, thiết kế được trang web đơn giản
có sử dụng hiệu ứng, màu sắc cho các phần tử.
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,…
o Sinh viên tham khảo các thuộc tính CSS3 trong file CSS3_Snippets.pdf, tự xây
dựng demo và xem kết quả hiển thị của phần tử sử dụng các thuộc tính CSS3
2. Thiết kế Layout đơn giản
o Sinh viên xem tất cả các ví dụ mẫu trong thư mục layout_examples kèm theo
bài Lab (dùng chương trình Firebug).
o Tham khảo các cách viết Layout cho trang web:
o Tìm hiểu thuộc tính CSS3 cơ bản dưới đây để xây dựng trang web hoàn chỉnh:
§ float
§ clear
§ display
§ background
§ background-color
§ background-image
§ background-position
§ margin
§ padding
§ line-height
§ color
§ font-weight
o Định vị một khung chứa nằm ở giữa ô chứa nó, chúng ta có thể sử dụng thuộc
tính CSS: margin
• margin: 0 auto;
hoặc
• margin-left: auto;
• margin-right:auto;
Trang 1/4
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
III. Bài tập
Bài 1. Dùng ngôn ngữ HTML và CSS để tạo ra một trang web có layout như hình bên dưới.
Trang 2/4
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ữ HTML và CSS để tạo ra một trang web có layout như hình bên dưới
Trang 3/4
Khoa Khoa học và Kỹ thuật Máy tính- Đại học Bách Khoa Tp.HCM
Bài 3. Dùng ngôn ngữ HTML5 và CSS3 để tạo ra một trang web có giao diện như hình bên dưới
(tất cả các hình ảnh cần thiết được cho trong thư mục images).
Ø 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
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 4/4
4 trang
31080
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 03", để 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_03.pdf
bg-ad-top.png- bg-body.png
bg-feed.gif
bg-footer.jpg- bg-header.jpg
- bg-menu.png
- bg-menu-hover.png
- bg-sidebar-bottom.gif
- button-feed.png
- icon-comment.png
1513804.rar- layout_examples.rar
