Slide 5 - Thiết kế Web cơ bản

Bài 5Bố 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 trangcủa trang website:

Tầm quan trọngKích thướcVị trí

Thuộc tính của box:Thuộc tính về nội dungThuộ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 trangcủa trang website:

Tầm quan trọngKích thướcVị trí

Thuộc tính của box:Thuộc tính về nội dungThuộ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ếnLayout nổi (float) & Layout tuyệt đối (absolute)Ngăn tràn bố cụcMột số vấn đề khi căn chỉnh cột Layout

Tìm hiểu về một số Layout phổ biếnLayout nổi (float) & Layout tuyệt đối (absolute)Ngăn tràn bố cụcMột số vấn đề khi căn chỉnh cột Layout


MỘT SỐ BỐ CỤC

BỐ CỤC TRANG (LAYOUT)

Layout thường được chia thành nhiều cộtRõ 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 đầyKhô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ộtRõ 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 đầyKhông bị xô lệch giữa các box trong layout

5

MỘT SỐ DẠNG BỐ CỤC

layout

2 cột

3 cột…


layout 3 cột

4 cột

…

6

BỐ CỤC 2 CỘT

http://blog.jingproject.com/


http://blog.jingproject.com/

BỐ CỤC 3 CỘT

http://www.amazon.com


http://www.amazon.com

BỐ CỤC 4 CỘT

http://www.alistapart.com/


http://www.alistapart.com/

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 trang2_col.css -> đặt css để tạo layouttext_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 trang2_col.css -> đặt css để tạo layouttext_n_colors.css -> định style và màu cho text


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

Không khai báo giá trị widthSử dụng ràng buộc:

max-width:…;min-width:…;

<body><div id="main_wrapper">

<div id="header"><div id="header_inner">…</div>

</div><div id="nav">

<div id="nav_inner">…</div></div><div id="content">

<div id=“content_inner“>…</div></div><div id="footer">

<div id="footer_inner“>…</div></div>

</div></body>




11





<div id=“content_inner“>…</div></div><div id="footer">


</div></body>

TỔ CHỨC BOX

main_wrapper

nav

header


nav

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




}#header {}


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


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

Không khai báo giá trị widthSử 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ấtmin-width: thiết lập kích thước nhỏ nhất


Không khai báo giá trị widthSử 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ấtmin-width: thiết lập kích thước nhỏ nhất

14

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


Nội dung co giãntheo chiều rộng

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


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




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



Bố cục ba cột có chiều rộng cố định làm việc giốngnhư phiên bản có hai cột.Chia 100% chiều rộng cho ba cột theo tỷ lệ mongmuốn.



promo


CSS THIẾT LẬP BỐ CỤC 3 CỘT



}#header {}


#content {width:60%;float:left;}

#promo {width:22%;float:left;}





}#header {}


#content {width:60%;float:left;}

#promo {width:22%;float:left;}



Mọi thứ trở nên phức tạp hơn nếu ta muốn thêmtí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 haibên vẫn giữ nguyên kích thước cũChuyên gia CSS Ryan Brill nhanh chóng tìm ra câutrả 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 trongvô 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êmtí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 haibên vẫn giữ nguyên kích thước cũChuyên gia CSS Ryan Brill nhanh chóng tìm ra câutrả 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 trongvô số trang web có bố cục linh hoạt.

CHIỀU NGANG CỦA TRANG

Điều khiển được chiều ngang của những bố cục nàylà 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 ngangBạ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 ngangTổng kích thước chiều ngang của tất cả các boxtrong trang web không nên vượt quá kích thướcchiều ngang của toàn trang

Điều khiển được chiều ngang của những bố cục nàylà 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 ngangBạ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 ngangTổng kích thước chiều ngang của tất cả các boxtrong trang web không nên vượt quá kích thướcchiều ngang của toàn trang


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ỉnhTránh được hiện tượng xô lệch cộtSử dụng thẻ overflow để tránh hiện tượng xô lệchcác cộtOverflow: điều khiển cách tác động của thẻ lên nộidung bên trongSử dụng kèm clear

Dễ dàng trong việc căn chỉnhTránh được hiện tượng xô lệch cộtSử dụng thẻ overflow để tránh hiện tượng xô lệchcác cộtOverflow: điều khiển cách tác động của thẻ lên nộidung bên trongSử dụng kèm clear



overflow

auto

hidden

inherit


overflow inherit

scroll

visible

26


#nav { width:22%; float:left; }#content { width:78%; float:left; top:0px; }#footer { clear:both; }


BỐ CỤC TUYỆT ĐỐI (ABSOLUTE LAYOUT)

Các cột được quy định vị trí chính xác trong mọitrườ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ớinhau các cột phía dưới không được đẩy xuốngKhắc phục vấn đề này bằng Javascript


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 dungbên tronghidden: cột sẽ giữ nguyên chiều rộng của nó và hiểnthị phần ảnh vừa trong nó - không thay đổi kíchthướ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 dungbên tronghidden: cột sẽ giữ nguyên chiều rộng của nó và hiểnthị phần ảnh vừa trong nó - không thay đổi kíchthước.


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ônglà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ênChiều cao của div (cả trang web) phụ thuộc vào nộidung được đưa raChúng ta cần chỉnh để có ảo giác rằng tất cả các cộtcó cùng chiều cao, bằng cách

Đặt kiểu cột FauxLậ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ônglà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ênChiều cao của div (cả trang web) phụ thuộc vào nộidung được đưa raChúng ta cần chỉnh để có ảo giác rằng tất cả các cộtcó cùng chiều cao, bằng cách

Đặt kiểu cột FauxLập trình mở rộng div


CỘT FAUX

Phương thức này liên quan tới việc thêm hình nềncho thẻ div wrapper của trangLặp lại hình nền để lấp đầy không gian trống


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


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

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ácCSS 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ũngcó thể lấy (và thiết lập) tất cả thuộc tính của mọithẻ 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ácCSS 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ũngcó thể lấy (và thiết lập) tất cả thuộc tính của mọithẻ 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


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>


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ự ánSử dụng bố cục nổi có ưu điểm:

Dễ căn chỉnhHạ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ínhoverflowKhông nên đặt chiều cao cho div trong CSSCăn chỉnh chiều cao cột: thường sử dụng phươngphá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ự ánSử dụng bố cục nổi có ưu điểm:

Dễ căn chỉnhHạ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ínhoverflowKhông nên đặt chiều cao cho div trong CSSCăn chỉnh chiều cao cột: thường sử dụng phươngpháp cột Faux


Slide 5 - Thiết kế Web cơ bản

Education

Transcript of Slide 5 - Thiết kế Web cơ bản