Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Bài 5 Bố cục trang cơ bản - Giáo trình FPT

2,208 views

Published on

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
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

  • Be the first to comment

Bài 5 Bố cục trang cơ bản - Giáo trình FPT

  1. 1. Bài 5 Bố cục trang cơ bản
  2. 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ị 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. 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 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. 4. MỘT SỐ BỐ CỤC
  5. 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 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 5
  6. 6. 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 layout 3 cột 4 cột … 6
  7. 7. BỐ CỤC 2 CỘT http://blog.jingproject.com/ Bài 5 - Bố cục trang cơ bản 7
  8. 8. BỐ CỤC 3 CỘT http://www.amazon.com Bài 5 - Bố cục trang cơ bản 8
  9. 9. BỐ CỤC 4 CỘT http://www.alistapart.com/ Bài 5 - Bố cục trang cơ bản 9
  10. 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 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. 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:…; min-width:…; <body> <div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>--> <div id="header"><!--<địnhnghĩa phần header của trang web>--> <div id="header_inner">…</div> </div> <div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>-- > <div id="nav_inner">…</div> </div> <div id="content"> <div id=“content_inner“>…</div> </div> <div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>--> <div id="footer_inner“>…</div> </div> </div> </body> Bài 5 - Bố cục trang cơ bản Không khai báo giá trị width Sử dụng ràng buộc: max-width:…; min-width:…; 11 <body> <div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>--> <div id="header"><!--<địnhnghĩa phần header của trang web>--> <div id="header_inner">…</div> </div> <div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>-- > <div id="nav_inner">…</div> </div> <div id="content"> <div id=“content_inner“>…</div> </div> <div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>--> <div id="footer_inner“>…</div> </div> </div> </body>
  12. 12. TỔ CHỨC BOX main_wrapper nav header Bài 5 - Bố cục trang cơ bản 12 nav footer content
  13. 13. 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 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; }
  14. 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 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 14
  15. 15. 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
  16. 16. 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 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; }
  17. 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. 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:…; <body> <div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>--> <div id="header"><!--<địnhnghĩa phần header của trang web>--> <div id="header_inner">…</div> </div> <div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>--> <div id="nav_inner">…</div> </div> <div id="content"> <div id=“content_inner“>…</div> </div> <div id=“promo"> <!--<địnhnghĩa vùng quảng cáo của trang web>--> <div id=“promo_inner“>…</div> </div> <div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>--> <div id="footer_inner“>…</div> </div> </div> </body> Bài 5 - Bố cục trang cơ bản Không khai báo giá trị width Sử dụng ràng buộc: max-width:…; min-width:…; 18 <body> <div id="main_wrapper"><!--<địnhnghĩa div chứa toàn bộ nội dung web>--> <div id="header"><!--<địnhnghĩa phần header của trang web>--> <div id="header_inner">…</div> </div> <div id="nav"><!--<địnhnghĩa vùng chứa navigator (điều hướng) của trang web>--> <div id="nav_inner">…</div> </div> <div id="content"> <div id=“content_inner“>…</div> </div> <div id=“promo"> <!--<địnhnghĩa vùng quảng cáo của trang web>--> <div id=“promo_inner“>…</div> </div> <div id="footer"><!--<địnhnghĩa vùng chân (footer) của trang web>--> <div id="footer_inner“>…</div> </div> </div> </body>
  19. 19. BỐ CỤC 3 CỘT THƯỜNG promo Bài 5 - Bố cục trang cơ bản 19
  20. 20. 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 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; }
  21. 21. 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 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.
  22. 22. BỐ CỤC 3 CỘT LINH HOẠT Bài 5 - Bố cục trang cơ bản 22
  23. 23. 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 Đ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
  24. 24. BỐ CỤC NỔI & BỐ CỤC TUYỆT ĐỐI
  25. 25. 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 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
  26. 26. BỐ CỤC NỔI (FLOAT LAYOUT) overflow auto hidden inherit Bài 5 - Bố cục trang cơ bản overflow inherit scroll visible 26
  27. 27. 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
  28. 28. 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
  29. 29. 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. 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
  30. 30. CĂN CHỈNH LAYOUT
  31. 31. 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 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
  32. 32. 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
  33. 33. 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;} #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
  34. 34. 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 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
  35. 35. LẬP TRÌNH MỞ RỘNG DIV <script type="text/javascript"> 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"); } </script> <script type="text/javascript"> 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"); } </script> Bài 5 - Bố cục trang cơ bản 35
  36. 36. 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 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

×