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

Bài 7BỐ CỤC TRANG WEB

NHẮC LẠI BÀI TRƯỚ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

Bài 7 - Bố cục trang web

MỤC TIÊU BÀI HỌC

Web layout:Khái niệmMột số layout thông dụng

HTML layout

Web layout:Khái niệmMột số layout thông dụng

HTML layout


WEB LAYOUT

WEB LAYOUT

Bố cục web là cách trình bày các thành phần contrên trang webNội dung của web được trình bày thông qua các cộttrên trangVấn đề khi thiết kế web: Sử dụng kích thước đolường về chiều rộng và chiều cao của web

Bố cục web là cách trình bày các thành phần contrên trang webNội dung của web được trình bày thông qua các cộttrên trangVấn đề khi thiết kế web: Sử dụng kích thước đolường về chiều rộng và chiều cao của web


WEB LAYOUT

10 kiểu bố cục web:


WEB LAYOUT

Absolute Layouts (bố cục tuyệt đối):Được sử dụng ít nhấtSử dụng các đơn vị đo tuyệt đối: i.e. inches, cm, mmvà picas, ptĐịnh vị chính xác được các box con trên webBố cục này hạn chế trong việc thiết kế web

Absolute Layouts (bố cục tuyệt đối):Được sử dụng ít nhấtSử dụng các đơn vị đo tuyệt đối: i.e. inches, cm, mmvà picas, ptĐịnh vị chính xác được các box con trên webBố cục này hạn chế trong việc thiết kế web


WEB LAYOUT

Relative Layout (bố cục tương đối):Vị trí và kích thước của các box con trên trang tuỳthuộc vào khung hình trình duyệt của người dùngThông thường đặt chiều rộng (width): 100%Sử dụng đơn vị đo lường tương đối: %

Relative Layout (bố cục tương đối):Vị trí và kích thước của các box con trên trang tuỳthuộc vào khung hình trình duyệt của người dùngThông thường đặt chiều rộng (width): 100%Sử dụng đơn vị đo lường tương đối: %


WEB LAYOUT

Fixed Layout (bố cục cố định):Là phương pháp linh hoạt nhất để thiết kế bố cụcwebXây dựng dựa trên đơn vị đo lường điểm ảnh (pixel –px)

Fixed Layout (bố cục cố định):Là phương pháp linh hoạt nhất để thiết kế bố cụcwebXây dựng dựa trên đơn vị đo lường điểm ảnh (pixel –px)


WEB LAYOUT

Elastic Layout (bố cục đàn hồi):Bố cục được đánh giá cao trong thiết kế web do khảnăng mở rộng nội dung, kích thước chữSử dụng đơn vị đo lường em

Elastic Layout (bố cục đàn hồi):Bố cục được đánh giá cao trong thiết kế web do khảnăng mở rộng nội dung, kích thước chữSử dụng đơn vị đo lường em


WEB LAYOUT

Scaled Layout (bố cục đàn hồi):Là phương pháp mới nhất trong CSS3 cho phép cácthao tác của các khung nhìn có sẵn xung quanh địnhhướng thiết bị nào đóThường được sử dụng trên các thiết bị di động thôngminh

Scaled Layout (bố cục đàn hồi):Là phương pháp mới nhất trong CSS3 cho phép cácthao tác của các khung nhìn có sẵn xung quanh địnhhướng thiết bị nào đóThường được sử dụng trên các thiết bị di động thôngminh


WEB LAYOUT

Liquid (Fluid) Layout:Đây là kiểu bố cục phổ biếnSử dụng tỷ lệ phần trăm để thiết kếĐộ rộng (width) sẽ tự động điều chỉnh tuỳ thuộc vàokích thước khung hình trình duyệt của người dùng

Liquid (Fluid) Layout:Đây là kiểu bố cục phổ biếnSử dụng tỷ lệ phần trăm để thiết kếĐộ rộng (width) sẽ tự động điều chỉnh tuỳ thuộc vàokích thước khung hình trình duyệt của người dùng


WEB LAYOUT

Fluid-Min/Max Layout:Sử dụng phương thức giới hạn min-width, max-width

Fluid-Min/Max Layout:Sử dụng phương thức giới hạn min-width, max-width


WEB LAYOUT

Conditional Layout:Bố cục này linh hoạt hơn và thân thiện để đại diệncho nội dung trang web

Conditional Layout:Bố cục này linh hoạt hơn và thân thiện để đại diệncho nội dung trang web


HTML LAYOUT

HTML LAYOUT

Bố cục trang web là yếu tố quan trọng để thiết kếwebsite đẹp:

Bố cục web được chia thành nhiều cộtNội dung của web sẽ được đặt trong các cột nàyThành phần cột trong bố cục web được tạo thành từcác thành phần:

• <div>• <table> (hiện tại thành phần này thường được sử dụng

để trình bày dữ liệu dạng bảng)

Bố cục trang web là yếu tố quan trọng để thiết kếwebsite đẹp:

Bố cục web được chia thành nhiều cộtNội dung của web sẽ được đặt trong các cột nàyThành phần cột trong bố cục web được tạo thành từcác thành phần:

• <div>• <table> (hiện tại thành phần này thường được sử dụng

để trình bày dữ liệu dạng bảng)


HTML LAYOUT

Ví dụ về tạo bố cục web với HTML, sử dụng <div>:<!DOCTYPE html><html><body><div id="container" style="width:500px”>

<div id="header" style="background-color:#FFA500;”><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;”><b>Menu</b><br>HTML<br>CSS<br>JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;”>Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;”>Copyright © W3Schools.com</div></div></body></html>


<!DOCTYPE html><html><body><div id="container" style="width:500px”>

<div id="header" style="background-color:#FFA500;”><h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;”><b>Menu</b><br>HTML<br>CSS<br>JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;”>Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;”>Copyright © W3Schools.com</div></div></body></html>

HTML LAYOUT

Kết quả:


HTML LAYOUT

Ví dụ về tạo bố cục web với HTML, sử dụng <table>:

<!DOCTYPE html><html><body><table width="500" border="0"><tr><td colspan="2" style="background-color:#FFA500;”><h1>Main Title of WebPage</h1></td></tr><tr><td style="background-color:#FFD700;width:100px;”><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td><td style="background-color:#EEEEEE;height:200px;width:400px;”>Content goeshere</td></tr><tr><td colspan="2" style="background-color:#FFA500;text-align:center;”>Copyright© W3Schools.com</td></tr></table></body></html>


<!DOCTYPE html><html><body><table width="500" border="0"><tr><td colspan="2" style="background-color:#FFA500;”><h1>Main Title of WebPage</h1></td></tr><tr><td style="background-color:#FFD700;width:100px;”><b>Menu</b><br>HTML<br>CSS<br>JavaScript</td><td style="background-color:#EEEEEE;height:200px;width:400px;”>Content goeshere</td></tr><tr><td colspan="2" style="background-color:#FFA500;text-align:center;”>Copyright© W3Schools.com</td></tr></table></body></html>

HTML LAYOUT

Kết quả:


HTML LAYOUT

Chú ý khi thực hiện thiết kế bố cục web:Sử dụng CSS để thực hiện định dạng các thành phầncột (box) trên trangNên sử dụng cách thức thiết kế trang template đểgiảm thời gian thiết kế bố cục web

Thẻ sử dụng trong việc thiết kế bố cục web

Chú ý khi thực hiện thiết kế bố cục web:Sử dụng CSS để thực hiện định dạng các thành phầncột (box) trên trangNên sử dụng cách thức thiết kế trang template đểgiảm thời gian thiết kế bố cục web

Thẻ sử dụng trong việc thiết kế bố cục web


<div> Sử dụng để định nghĩa một khối trong tài liệu

<span> Sử dụng để định nghĩa một phần trong tài liệu (viết dướidạng inline)

HTML LAYOUT

Bố cục với <div>:

<!DOCTYPE html><html><body><div id="container”>

<div id="header”>…</div><div id="menu”>…</div><div id="content”>…</div><div id="footer”>…</div>

</div></body></html>

Bố cục với <div>:


<!DOCTYPE html><html><body><div id="container”>

<div id="header”>…</div><div id="menu”>…</div><div id="content”>…</div><div id="footer”>…</div>

</div></body></html>

HTML LAYOUT

Sử dụng với <span>:

Được sử dụng để đặt style cho các yếu tố nội tuyếntrong tài liệu (văn bản)Trình duyệt hỗ trợ:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Sử dụng với <span>:

Được sử dụng để đặt style cho các yếu tố nội tuyếntrong tài liệu (văn bản)Trình duyệt hỗ trợ:


TỔNG KẾT

Một số bố cục thường sử dụng khi thiết kế web:Absolute Layouts (bố cục tuyệt đối)Relative Layout (bố cục tương đối)Fixed Layout (bố cục cố định)Liquid (Fluid) Layout

Nên sử dụng <div> để thực hiện thiết kế bố cục choweb. Thực hiện thiết kế bố cục theo từng bước từ bốcục tổng thể tới bố cục các box con trên trang

Một số bố cục thường sử dụng khi thiết kế web:Absolute Layouts (bố cục tuyệt đối)Relative Layout (bố cục tương đối)Fixed Layout (bố cục cố định)Liquid (Fluid) Layout

Nên sử dụng <div> để thực hiện thiết kế bố cục choweb. Thực hiện thiết kế bố cục theo từng bước từ bốcục tổng thể tới bố cục các box con trên trang


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

Education

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