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

Thêm vào BST

Báo xấu

220
lượt xem 52
download

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ủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

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

Bài 5 Bố cục trang cơ bản
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
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
MỘT SỐ BỐ CỤC
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
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
BỐ CỤC 2 CỘT http://blog.jingproject.com/ Bài 5 - Bố cục trang cơ bản 7
BỐ CỤC 3 CỘT http://www.amazon.com Bài 5 - Bố cục trang cơ bản 8
BỐ CỤC 4 CỘT http://www.alistapart.com/ Bài 5 - Bố cục trang cơ bản 9
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
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:…;
TỔ CHỨC BOX main_wrapper header nav content footer Bài 5 - Bố cục trang cơ bản 12
CSS THIẾT LẬP BỐ CỤC 2 CỘT body { #nav { text-align:center; width:22%; } ﬂoat:left; #main_wrapper { } width:840px; #content { margin-left:auto; width:78%; margin-right:auto; ﬂoat:left; text-align:left; top:0px; } } #header { #footer { } clear:both; } Bài 5 - Bố cục trang cơ bản 13
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
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
THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT body { #nav { text-align:center; width:22%; } width:140px; #main_wrapper { ﬂoat:left; width:840px; } max-width:960px; #content { min-width:720px; width:78%; margin-left:auto; ﬂoat: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
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
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:…; … …
BỐ CỤC 3 CỘT THƯỜNG promo Bài 5 - Bố cục trang cơ bản 19
CSS THIẾT LẬP BỐ CỤC 3 CỘT body { #nav { text-align:center; width:18%; } ﬂoat:left; #main_wrapper { } width:840px; #content { margin-left:auto; width:60%; margin-right:auto; ﬂoat:left; text-align:left; } } #promo { #header { width:22%; } ﬂoat:left; } #footer { clear:both; } Bài 5 - Bố cục trang cơ bản 20