www.hoasen.edu.

vn

CHƯƠNG 4

THIẾT KẾ BỐ CỤC TRANG

WEB BẰNG DIV + CSS
GV điều phối: ThS. PHẠM THỊ THANH TÂM
Email: tam.phamthithanh@hoasen.edu.vn

uu
 www.hoasen.edu.vn

NỘI DUNG
• GIỚI THIỆU DIV
1
• MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS DÙNG
2 ĐỂ THIẾT KẾ BỐ CỤC CỦA TRANG WEB
• VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ THIẾT KẾ BỐ
3 CỤC CỦA TRANG WEB
• VÍ DỤ SỬ DỤNG CSS LOẠI 3 ĐỂ THIẾT KẾ BỐ
4 CỤC CỦA TRANG WEB
• VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB CHO
5 WEBSITE SHOP HOA TƯƠI

uu 2
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

1.GIỚI THIỆU DIV

 <DIV>…</DIV>: viết tắt của từ division (sự phân
chia): là phần từ HTML dùng để chứa các phần từ
khác (p, img, table, div,…)
 DIV thường được dùng để làm layout cho website
(thay cho cách dùng table truyền thống)
 Ưu điểm:
 Tốc độ load trang web trên trình duyệt nhanh hơn
 Dễ dàng thay đổi giao diện của website (chỉ cần
thay đổi định dạng CSS mà không cần phải viết lại
mã HTML)
uu 3
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

1.GIỚI THIỆU DIV (tt)

 Ví dụ:

uu 4
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB
Top
Border Margin
Padding

Left Nội dung chính Right

Bottom
uu 5
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB (tt)
 marign: dùng để canh lề cho cả trang web hay tạo
khoảng cách giữa thành phần này với thành phần
khác trong trang web.

uu 6
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

2. MỘT SỐ THUỘC TÍNH QUAN TRONG

CỦA CSS DÙNG ĐỂ THIẾT KẾ BỐ CỤC
TRANG WEB (tt)
 marign: dùng để canh lề cho cả trang web hay tạo
khoảng cách giữa thành phần này với thành phần khác
trong trang web.
 padding: dùng để xác định khoảng cách từ đường viền
của một thành phần đến nội dung bên trong
 float: chế độ nổi của DIV này so với DIV khác (dùng để
canh lề của DIV hiện tại so với DIV chứa nó)
 clear: dùng để xóa bỏ ảnh hưởng của các float của các
DIV phía trước (áp dụng khi DIV này nằm dưới DIV
khác có thuộc tính float)
uu 7
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

3. VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB

uu 8
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

3. VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB (tt)

uu 9
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

3. VÍ DỤ SỬ DỤNG CSS LOẠI 1 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB (tt)

uu 10
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

4. VÍ DỤ SỬ DỤNG CSS LOẠI 3 ĐỂ

THIẾT KẾ BỐ CỤC TRANG WEB

uu 11
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

File style.css CHO WEBSITE SHOP HOA TƯƠI

uu 12
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI

File style.css

uu 13
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI (tt)
File template.html

uu 14
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI (tt)

uu 15
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

5. VÍ DỤ THIẾT KẾ BỐ CỤC TRANG WEB

CHO WEBSITE SHOP HOA TƯƠI (tt)

Kết quả hiển thị

trên trình duyệt

uu 16
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS
 www.hoasen.edu.vn

HỎI - ĐÁP

Chúc các bạn snh viên đạt kết quả tốt

uu 17
Chương 4: Thiết kế bố cục trang web bằng DIV + CSS