intTypePromotion=1

Bài giảng Thiết kế web bài 5: Bố cục trang cơ bản

Chia sẻ: Trần Viên | Ngày: | Loại File: PDF | Số trang:36

0
176
lượt xem
46
download

Bài giảng Thiết kế web bài 5: Bố cục trang cơ bản

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bộ bài giảng thiết kế web gồm 7 bài nhỏ, với chủ đề là bố cục trang cơ bản nội dung bài này tập trung khai thác, phân tích những vấn đề liên quan đến bố cục và thao tác trên Layout. Bài giảng sẽ giúp người đọc tìm hiểu về một số Layout phổ biến, Layout nổi & Layout tuyệt đối. Bên cạnh đó bài 5 còn cung cấp những giải pháp giúp ngăn tràn bố cục và trình bày một số vấn đề cần lưu ý khi căn chỉnh cột Layout

Chủ đề:
Lưu

Nội dung Text: Bài giảng Thiết kế web bài 5: Bố cục trang cơ bản

  1. Bài 5 Bố cục trang cơ bản
  2. NHẮC LẠI BÀI TRƯỚC Tìm hiểu về box (hộp), cấu trúc box trên một trang của trang website: Tầm quan trọng Kích thước Vị trí Thuộc tính của box: Thuộc tính về nội dung Thuộc tính về vị trí Thuộc tính về hiển thị Bài 5 - Bố cục trang cơ bản 2
  3. MỤC TIÊU BÀI HỌC Tìm hiểu về một số Layout phổ biến Layout nổi (float) & Layout tuyệt đối (absolute) Ngăn tràn bố cục Một số vấn đề khi căn chỉnh cột Layout Bài 5 - Bố cục trang cơ bản 3
  4. MỘT SỐ BỐ CỤC
  5. BỐ CỤC TRANG (LAYOUT) Layout thường được chia thành nhiều cột Rõ ràng trong việc thiết kế CSS Áp dụng được tính kế thừa Đảm bảo nội dung được lấp đầy Không bị xô lệch giữa các box trong layout Bài 5 - Bố cục trang cơ bản 5
  6. MỘT SỐ DẠNG BỐ CỤC 2 cột … layout 3 cột 4 cột Bài 5 - Bố cục trang cơ bản 6
  7. BỐ CỤC 2 CỘT http://blog.jingproject.com/ Bài 5 - Bố cục trang cơ bản 7
  8. BỐ CỤC 3 CỘT http://www.amazon.com Bài 5 - Bố cục trang cơ bản 8
  9. BỐ CỤC 4 CỘT http://www.alistapart.com/ Bài 5 - Bố cục trang cơ bản 9
  10. BỐ CỤC 2 CỘT CHIỀU RỘNG CỐ ĐỊNH Demo ví dụ trong các file: 2_col.html -> cấu trúc và nội dung trang 2_col.css -> đặt css để tạo layout text_n_colors.css -> định style và màu cho text Bài 5 - Bố cục trang cơ bản 10
  11. BỐ CỤC 3 CỘT THƯỜNG Không khai báo giá trị width Sử dụng ràng buộc: … max-width:…;
  12. TỔ CHỨC BOX main_wrapper header nav content footer Bài 5 - Bố cục trang cơ bản 12
  13. CSS THIẾT LẬP BỐ CỤC 2 CỘT body { #nav { text-align:center; width:22%; } float:left; #main_wrapper { } width:840px; #content { margin-left:auto; width:78%; margin-right:auto; float:left; text-align:left; top:0px; } } #header { #footer { } clear:both; } Bài 5 - Bố cục trang cơ bản 13
  14. BỐ CỤC 2 CỘT LINH HOẠT Không khai báo giá trị width Sử dụng ràng buộc thiết lập giới hạn kích thước thay đổi của thẻ: max-width: thiết lập kích thước lớn nhất min-width: thiết lập kích thước nhỏ nhất Bài 5 - Bố cục trang cơ bản 14
  15. BỐ CỤC LINH HOẠT 2 CỘT Nội dung co giãn Bài 5 - Bố cục trang cơ bản theo chiều rộng 15
  16. THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT body { #nav { text-align:center; width:22%; } width:140px; #main_wrapper { float:left; width:840px; } max-width:960px; #content { min-width:720px; width:78%; margin-left:auto; float:left; margin-right:auto; margin-left:140px; text-align:left; top:0px; } } #header { #footer { } clear:both; } Bài 5 - Bố cục trang cơ bản 16
  17. BỐ CỤC 3 CỘT THƯỜNG Bố cục ba cột có chiều rộng cố định làm việc giống như phiên bản có hai cột. Chia 100% chiều rộng cho ba cột theo tỷ lệ mong muốn. Bài 5 - Bố cục trang cơ bản 17
  18. BỐ CỤC 3 CỘT THƯỜNG Không khai báo giá trị width Sử dụng ràng buộc: … max-width:…; min-width:…; … …
  19. BỐ CỤC 3 CỘT THƯỜNG promo Bài 5 - Bố cục trang cơ bản 19
  20. CSS THIẾT LẬP BỐ CỤC 3 CỘT body { #nav { text-align:center; width:18%; } float:left; #main_wrapper { } width:840px; #content { margin-left:auto; width:60%; margin-right:auto; float:left; text-align:left; } } #promo { #header { width:22%; } float:left; } #footer { clear:both; } Bài 5 - Bố cục trang cơ bản 20
ADSENSE
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2