Bài 6
Thiết kế các thành phần giao diện
NHẮC LẠI BÀI TRƯỚ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 6 - Thiết kế các thành phần giao diện
MỤC TIÊU BÀI HỌC
Làm quen với các thành phần trên trang web
Định nghĩa CSS cho những thành phần:
Table
Form
Lists & Menu
Làm việc với drop-down menu
Làm quen với các thành phần trên trang web
Định nghĩa CSS cho những thành phần:
Table
Form
Lists & Menu
Làm việc với drop-down menu
Bài 6 - Thiết kế các thành phần giao diện
CÁC THÀNH PHẦN TRÊN TRANG WEB
THÀNH PHẦN (COMPONENT)
Là thành phần mở rộng
Là một ứng dụng trên trang web
Được sử dụng trên trang web để thể hiện những

<td>Focus</td>
<td>Interface design</td>
<td>Back-end code</td>
</tr>
</table>
Bài 6 - Thiết kế các thành phần giao diện
<table border="1">
<tr>
<td>&nbsp;</td>
<td>Styling</td>
<td>Coding</td>
</tr>
<tr>
<td>Ngôn ngữ</td>
<td>XHTML &amp; CSS</td>
<td>PHP &amp; SQL</td>
</tr>
<tr>
<td>Focus</td>
<td>Interface design</td>
<td>Back-end code</td>
</tr>
</table>
CÁC THẺ THÀNH PHẦN CỦA BẢNG
tr
td
th
Bài 6 - Thiết kế các thành phần giao diện
table
tr th

Bài 6 - Thiết kế các thành phần giao diện
Dùng để lấy dữ liệu của người dùng để gửi tới máy
chủ
Sử dụng để nhập dữ liệu từ người dùng:
Form đăng ký
Form đăng nhập
Form xác thực
Sử dụng như dạng biểu mẫu
FORM
Trong form chứa những thành phần điều khiển
(control)
Thành phần điều khiển nhập
liệu
Bài 6 - Thiết kế các thành phần giao diện
Thành phần lựa chọn
Thành phần submit
ĐỊNH STYLE CHO THÀNH PHẦN FORM
CSS:
input {font-size:.8em;}
label {display:block; clear:both; font-size:85%;font-weight:bold; margin:.5em
0 0; padding-bottom:.5em;}
XHTML:
<label for="user_name">UserName</label>
<inputtype="text" id="user_name" name="user_name" size="18"
maxlength="36"tabindex="1" />
Bài 6 - Thiết kế các thành phần giao diện
Định dạng style cho nút submit:
ĐỊNH STYLE CHO THÀNH PHẦN FORM
CSS:
input[type="submit"] { float:right; margin:.5em 0; }

border:1px solid #AAA;
}
input { font-size:.8em;}
input:focus, textarea:focus, select:focus {border:2px solid #7AA;}
label {display:block; clear:both; font-size:85%;font-weight:bold; margin: .5em 0 0;
padding-bottom: .5em;}
input[type="submit"] { float:right; margin: .5em 0;}
DANH SÁCH (LIST) & MENU
DANH SÁCH (LIST) & MENU
List: là những nhóm mục văn bản liên quan tới đối
tượng. Cơ sở của việc điều hướng trên trang web
Menu: danh sách lựa chọn để chuyển hướng lựa
chọn
Bài 6 - Thiết kế các thành phần giao diện
LIST
3 loại list:
Không thứ tự: được gạch đầu dòng
Thứ tự: đánh số theo thứ tự
Định nghĩa: có chứa những mục con (subitem),
thường được sử dụng làm chú giải
Bài 6 - Thiết kế các thành phần giao diện
LIST
Bài 6 - Thiết kế các thành phần giao diện
LIST MẶC ĐỊNH
<ul>
<li>Gibson</li>
<li>Fender</li>
<li>Rickenbacker</li>
<li>Ibanez</li>
</ul>

Thay đổi được kiểu hiển thị (thả xuống, thả sang
ngang)
Thay đổi kiểu bullet
Bài 6 - Thiết kế các thành phần giao diện
CSS:
ul {border:0; margin:10px 30px 10px
1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0;
padding:.3em 0; text-indent:.5em}
MENU
Danh sách  tạo ra các link điều hướng
CSS:
a { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:none}
a:hover { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:underline}
XHTML:
<ul>
<li><a href="#">Gibson</a></li>
<li><a href="#">Fender</a></li>
<li><a href="#">Rickenbacker</a></li>
<li><a href="#">Ibanez</a></li>
</ul>
Danh sách  tạo ra các link điều hướng
Bài 6 - Thiết kế các thành phần giao diện
CSS:
a { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:none}
a:hover { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:underline}

margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;
border-top: 2px solid #069}
li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}