bài 5 bố cục trang cơ bản

BỐ CỤC TRANG LAYOUTLayout 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 lay

Trang 1

Bài 5

Bố cục trang cơ bản

Trang 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 trangcủ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 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ị

Trang 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

Trang 4

MỘT SỐ BỐ CỤC

Trang 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

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

Trang 7

BỐ CỤC 2 CỘT

http://blog.jingproject.com/

Trang 8

http://www.amazon.com

Trang 9

http://www.alistapart.com/

Trang 10

BỐ CỤC 2 CỘT CHIỀU RỘNG CỐ ĐỊNH

Demo ví dụ trong các file:

Trang 11

Trang 13

}

#content { width:78%;

ﬂoat:left;

top:0px;

}

#footer { clear:both;

ﬂoat:left;

}

#content { width:78%;

ﬂoat:left;

top:0px;

}

#footer { clear:both;

}

Trang 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

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

Trang 15

BỐ CỤC LINH HOẠT 2 CỘT

Trang 16

THIẾT LẬP BỐ CỤC 2 CỘT LINH HOẠT

width:140px;

ﬂoat:left;

}

#content { width:78%;

width:140px;

ﬂoat:left;

}

#content { width:78%;

Trang 18

Trang 19

BỐ CỤC 3 CỘT THƯỜNG

promo

Trang 20

}

#footer { clear:both;

ﬂoat:left;

}

#footer { clear:both;

Trang 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

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

Trang 22

Trang 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

Trang 24

BỐ CỤC NỔI & BỐ CỤC TUYỆT ĐỐI

Trang 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

các cột

dung bên trong

Dễ dàng trong việc căn chỉnh

Tránh được hiện tượng xô lệch cột

các cột

dung bên trong

Trang 26

overflow

auto

hidden

inherit overflow inherit

scroll visible

Trang 27

#nav { width:22%; ﬂoat:left; }

#content { width:78%; ﬂoat:left; top:0px; }

#footer { clear:both; }

Trang 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

Trang 29

NGĂN TRÀN BỐ CỤC

làm việc với nội dung bên trong chúng

Trang 30

CĂN CHỈNH LAYOUT

Trang 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ộidung đượ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ộidung đượ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

Trang 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

Trang 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;}

Trang 34

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ềuchỉ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

Trang 35

LẬP TRÌNH MỞ RỘNG DIV

Nifty("div#nav,div#content,div#promo","medium same-height"); Nifty("div#header,div#footer","medium");

AddCss (" / /lib/nifty_corners/css/niftyCorners.css");

} </script>

Nifty("div#nav,div#content,div#promo","medium same-height"); Nifty("div#header,div#footer","medium");

AddCss (" / /lib/nifty_corners/css/niftyCorners.css");

} </script>

Trang 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

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

Tiêu đề	Bài 5 Bố cục trang cơ bản
Thể loại	Bài giảng

Định dạng
Số trang	36
Dung lượng	8,04 MB