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 layout 2 cột 3 cột… Bài 5 - Bố cục trang cơ bản 4 cột 6 BỐ CỤC 2 CỘT Bài 5 - Bố cục trang cơ bản 7 BỐ CỤC 3 CỘT Bài 5 - Bố cục trang cơ bản 8 BỐ CỤC 4 CỘT 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:…; min-width:…; --> --> … -- > … … --> … Bài 5 - Bố cục trang cơ bản 11 TỔ CHỨC BOX main_wrapper nav header Bài 5 - Bố cục trang cơ bản 12 footer content CSS THIẾT LẬP BỐ CỤC 2 CỘT body { text-align:center; } #main_wrapper { width:840px; margin-left:auto; margin-right:auto; text-align:left; } #header { } #nav { width:22%; float:left; } #content { width:78%; float:left; top:0px; } #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 Bài 5 - Bố cục trang cơ bản 15 Nội dung co giãn theo chiều rộng THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT body { text-align:center; } #main_wrapper { width:840px; max-width:960px; min-width:720px; margin-left:auto; margin-right:auto; text-align:left; } #header { } #nav { width:22%; width:140px; float:left; } #content { width:78%; float:left; margin-left:140px; top:0px; } #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ài 5 - Bố cục trang cơ bản 18 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 { text-align:center; } #main_wrapper { width:840px; margin-left:auto; margin-right:auto; text-align:left; } #header { } #nav { width:18%; float:left; } #content { width:60%; float:left; } #promo { width:22%; float:left; } #footer { clear:both; } Bài 5 - Bố cục trang cơ bản 20 BỐ CỤC 3 CỘT LINH HOẠT Mọi thứ trở nên phức tạp hơn nếu ta muốn thêm tính linh hoạt và căn giữa cho bố cục ba cột, trong đó vùng nội dung thay đổi chiều rộng khi cửa sổ trình duyệt thay đổi kích thước, nhưng các cột hai bên vẫn giữ nguyên kích thước cũ Chuyên gia CSS Ryan Brill nhanh chóng tìm ra câu trả lời - sử dụng lề âm - và giải pháp của ông trở thành giải pháp CSS cổ điển, hiện được dùng trong vô số trang web có bố cục linh hoạt. Bài 5 - Bố cục trang cơ bản 21 BỐ CỤC 3 CỘT LINH HOẠT Bài 5 - Bố cục trang cơ bản 22 CHIỀU NGANG CỦA TRANG Điều khiển được chiều ngang của những bố cục này là chìa khóa xử lý cách chúng hoạt động. Người dùng rất ghét phải cuộn trang sang ngang Bạn muốn tạo bố cục mở rộng theo chiều dọc để có đủ không gian chứa nội dung mà không cần thay đổi chiều ngang Tổng kích thước chiều ngang của tất cả các box trong trang web không nên vượt quá kích thước chiều ngang của toàn trang Bài 5 - Bố cục trang cơ bản 23 BỐ CỤC NỔI & BỐ CỤC TUYỆT ĐỐI BỐ CỤC NỔI (FLOAT LAYOUT) Dễ dàng trong việc căn chỉnh Tránh được hiện tượng xô lệch cột Sử dụng thẻ overflow để tránh hiện tượng xô lệch các cột Overflow: điều khiển cách tác động của thẻ lên nội dung bên trong Sử dụng kèm clear Bài 5 - Bố cục trang cơ bản 25 BỐ CỤC NỔI (FLOAT LAYOUT) overflow auto hidden inherit Bài 5 - Bố cục trang cơ bản scroll visible 26 BỐ CỤC NỔI (FLOAT LAYOUT) #nav { width:22%; float:left; } #content { width:78%; float:left; top:0px; } #footer { clear:both; } Bài 5 - Bố cục trang cơ bản 27 BỐ CỤC TUYỆT ĐỐI (ABSOLUTE LAYOUT) Các cột được quy định vị trí chính xác trong mọi trường hợp (web browser, độ phân giải …) Các cột hoàn toàn độc lập, không tương tác với nhau  các cột phía dưới không được đẩy xuống Khắc phục vấn đề này bằng Javascript Bài 5 - Bố cục trang cơ bản 28 NGĂN TRÀN BỐ CỤC Thuộc tính overflow của CSS điều khiển cách các thẻ làm việc với nội dung bên trong chúng. Giá trị: visible: làm cho thẻ mở rộng để bao bọc nội dung bên trong hidden: cột sẽ giữ nguyên chiều rộng của nó và hiển thị phần ảnh vừa trong nó - không thay đổi kích thước. Bài 5 - Bố cục trang cơ bản 29 CĂN CHỈNH LAYOUT CĂN CHỈNH LAYOUT Không giống như layout xây dựng trên nền bảng (table), layout xây dựng trên nền tảng div không làm cho các cột có cùng độ dài. Có thể sửa chiều cao của div, nhưng không nên Chiều cao của div (cả trang web) phụ thuộc vào nội dung được đưa ra Chúng ta cần chỉnh để có ảo giác rằng tất cả các cột có cùng chiều cao, bằng cách Đặt kiểu cột Faux Lập trình mở rộng div Bài 5 - Bố cục trang cơ bản 31 CỘT FAUX Phương thức này liên quan tới việc thêm hình nền cho thẻ div wrapper của trang Lặp lại hình nền để lấp đầy không gian trống Bài 5 - Bố cục trang cơ bản 32 CỘT FAUX #main_wrapper { max-width:960px; min-width:720px; margin- left:auto; margin-right:auto; text-align:left; background:url(../../../chapter_5/code/images/2_col_faux_art.gif) repeat-y;} Bài 5 - Bố cục trang cơ bản 33 LẬP TRÌNH MỞ RỘNG DIV Sử dụng Javascript để xác định cột dài nhất và điều chỉnh cho phù hợp với những cột khác CSS sử dụng DOM để thiết lập thuộc tính thẻ. JavaScript là một ngôn ngữ kịch bản mạnh mẽ cũng có thể lấy (và thiết lập) tất cả thuộc tính của mọi thẻ trong DOM (ví dụ như chiều cao của div) và thực hiện mọi loại xử lý trên chúng Bài 5 - Bố cục trang cơ bản 34 LẬP TRÌNH MỞ RỘNG DIV window.onload=function(){ Nifty("div#nav,div#content,div#promo","medium same-height"); Nifty("div#header,div#footer","medium"); AddCss ("../../lib/nifty_corners/css/niftyCorners.css"); } Bài 5 - Bố cục trang cơ bản 35 TỔNG KẾT Sử dụng loại bố cục layout tùy thuộc vào từng dự án, khối lượng nội dung đưa ra của dự án Sử dụng bố cục nổi có ưu điểm: Dễ căn chỉnh Hạn chế được hiện tượng xô lệch layout Ngăn tràn bố cục bằng cách sử dụng thuộc tính overflow Không nên đặt chiều cao cho div trong CSS Căn chỉnh chiều cao cột: thường sử dụng phương pháp cột Faux Bài 5 - Bố cục trang cơ bản 36