Thứ Sáu, 20 tháng 12, 2013
HTML Layout
Bố trí trang web là rất quan trọng để làm cho trang web của bạn trông tốt.
Thiết kế bố trí trang web của bạn rất cẩn thận.
Layouts trang web
Hầu hết các trang web đã đưa nội dung của họ trong nhiều cột (định dạng giống như một cuốn tạp chí hay tờ báo).
Nhiều cột được tạo ra bằng cách sử dụng <div> hoặc các yếu tố <table>. CSS được sử dụng để xác định vị trí các yếu tố, hoặc để tạo ra nguồn gốc, hoặc cái nhìn đầy màu sắc cho các trang.
 | Mặc dù nó có thể tạo ra bố cục tốt đẹp với các bảng HTML, bảng được thiết kế để trình bày dữ liệu dạng bảng - không như một công cụ bố trí! |
|---|
HTML Layouts - Sử dụng yếu tố <div>
Div là một yếu tố cấp khối được sử dụng để nhóm các phần tử HTML.
Ví dụ sau đây sử dụng năm yếu tố div để tạo ra một cột bố trí nhiều, tạo ra kết quả tương tự như trong ví dụ trước:
Ví dụ
<!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 � lutip.com</div>
</div>
</body>
</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 � lutip.com</div>
</div>
</body>
</html>
Thử nó cho mình »
Mã HTML trên sẽ tạo ra kết quả sau đây:
Tiêu đề chính của trang web
Đơn
HTML
CSS
JavaScript
HTML
CSS
JavaScript
Nội dung tại đây
Bản quyền lutip.com
HTML Layouts - Sử dụng Bàn
Một cách đơn giản để tạo ra bố cục là sử dụng các thẻ HTML <table>.
Nhiều cột được tạo ra bằng cách sử dụng <div> hoặc các yếu tố <table>. CSS được sử dụng để xác định vị trí các yếu tố, hoặc để tạo ra nguồn gốc, hoặc cái nhìn đầy màu sắc cho các trang.
| Sử dụng <table> để tạo ra một bố cục tốt đẹp là không sử dụng đúng các phần tử. Mục đích của các yếu tố <table> là để hiển thị dữ liệu dạng bảng! |
|---|
Ví dụ sau đây sử dụng một bảng với 3 dòng và 2 cột - hàng đầu tiên và cuối cùng kéo dài cả hai cột bằng cách sử dụng thuộc tính colspan:
Ví dụ
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</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 goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright � lutip.com</td>
</tr>
</table>
</body>
</html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</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 goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright � lutip.com</td>
</tr>
</table>
</body>
</html>
Thử nó cho mình »
Mã HTML trên sẽ tạo ra kết quả sau đây:
Tiêu đề chính của trang web | |
| Đơn HTML CSS JavaScript | Nội dung tại đây |
| Bản quyền lutip.com | |
Giao diện HTML - Lời khuyên hữu ích
Mẹo: Ưu điểm lớn nhất của việc sử dụng CSS là, nếu bạn đặt mã CSS trong một phong cách trang bên ngoài, trang web của bạn trở nên dễ dàng hơn nhiều để duy trì. Bạn có thể thay đổi cách bố trí của tất cả các trang của bạn bằng cách chỉnh sửa một tập tin.
Mẹo: Do bố trí tiên tiến dành thời gian để tạo ra, một lựa chọn nhanh hơn là sử dụng một bản mẫu. Tìm kiếm Google miễn phí các mẫu trang web (đây là những bố cục trang web được xây dựng trước, bạn có thể sử dụng và tùy chỉnh).
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét