�ݺ�ߣ

Bài 7
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 7 - 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

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
chức năng nhất định:
Hiển thị danh sách
Menu
…
Được trình bày trong những box trên trang web
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
chức năng nhất định:
Hiển thị danh sách
Menu
…
Được trình bày trong những box trên trang web

THÀNH PHẦN (COMPONENT)

LÀM VIỆC VỚI BẢNG (TABLE)

BẢNG MẶC ĐỊNH
<table border="1">
<tr>
<td> </td>
<td>Styling</td>
<td>Coding</td>
</tr>
<tr>
<td>Ngôn ngữ</td>
<td>XHTML & CSS</td>
<td>PHP & SQL</td>
</tr>
<tr>
<td>Focus</td>
<td>Interface design</td>
<td>Back-end code</td>
</tr>
</table>
<table border="1">
<tr>
<td> </td>
<td>Styling</td>
<td>Coding</td>
</tr>
<tr>
<td>Ngôn ngữ</td>
<td>XHTML & CSS</td>
<td>PHP & 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
table
tr th

THUỘC TÍNH CỦA BẢNG
Những thành phần định nghĩa trong CSS khi làm
việc với table:
Background
Border
Text
Kích thước
Những thành phần định nghĩa trong CSS khi làm
việc với table:
Background
Border
Text
Kích thước

ĐỊNH STYLE CHO BẢNG
table.basic_lines {width:300px; border-top:3px solid #069;}
table.basic_lines th { border-bottom:2px solid #069;} /* định nghĩa vùng header cho
bảng*/
table.basic_lines td {border-bottom:1px solid #069;}/*định nghĩa style cho các ô của
bảng*/

FORM
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
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
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" />

Định dạng style cho nút submit:
ĐỊNH STYLE CHO THÀNH PHẦN FORM
CSS:
input[type="submit"] { ﬂoat:right; margin:.5em 0; }
XHTML:
<div>
<input type="submit" value="Submit this Form" />
</div>
CSS:
input[type="submit"] { ﬂoat:right; margin:.5em 0; }
XHTML:
<div>
<input type="submit" value="Submit this Form" />
</div>

ĐỊNH STYLE CHO FORM
form {
float:left;
width:24em;
margin:20px 0 0 50px;
padding:1em .75em .5em;
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;}
form {
float:left;
width:24em;
margin:20px 0 0 50px;
padding:1em .75em .5em;
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
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

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

LIST

LIST MẶC ĐỊNH
<ul>
<li>Gibson</li>
<li>Fender</li>
<li>Rickenbacker</li>
<li>Ibanez</li>
</ul>
<ol>
<li>Gibson</li>
<li>Fender</li>
<li>Ibanez</li>
</ol>
<ul>
<li>Gibson</li>
<li>Fender</li>
<li>Ibanez</li>
</ul>
<ol>
<li>Gibson</li>
<li>Fender</li>
<li>Ibanez</li>
</ol>

ÁP STYLE CHO LIST
Áp dụng CSS để định dạng kiểu cho thẻ ul, li:
Thay đổi được kiểu hiển thị (thả xuống, thả sang
ngang)
Thay đổi kiểu bullet
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}
Áp dụng CSS để định dạng kiểu cho thẻ ul, li:
Thay đổi được kiểu hiển thị (thả xuống, thả sang
ngang)
Thay đổi kiểu bullet
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
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>

MENU
Định dạng style cho menu:
Cách căn chỉnh trên IE6 & 7
CSS:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size: .75em;
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding: .3em0; text-indent: .5em;}
li:ﬁrst-child {border-top:2px solid #069;}
Định dạng style cho menu:
CSS:
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding: .3em0; text-indent: .5em;}
li:ﬁrst-child {border-top:2px solid #069;}
CSS:
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}

MENU
CSS:
margin:20px;}
CSS:
margin:20px;}

MENU
Kết quả:Kết quả:

DROP-DOWN MENU
Ứng dụng rộng rãi trên nhiều website
Đáp ứng được việc hiển thị nhiều nội dung chuyển
hướng
Thiết kế phong phú
Ứng dụng rộng rãi trên nhiều website
Đáp ứng được việc hiển thị nhiều nội dung chuyển
hướng
Thiết kế phong phú

DROP-DOWN MENU

DROP-DOWN MENU
CSS:
#multi_drop_menus li { border:2px solid blue; list-style-
type:none;float:left;position:relative;}
#multi_drop_menus li ul { position:absolute; width:7em;}
#multi_drop_menus li ul li{width:100%;}
#multi_drop_menus { behavior:url(/slideshow/lib/js_tools/csshover.htc); font-family:lucida,
arial, sans-serif; border:1px solid #686;float:left;}
#multi_drop_menus li ul { position:absolute; width:7em;display:none;}
#multi_drop_menus li:hover ul {display:block;}
CSS:
#multi_drop_menus li { border:2px solid blue; list-style-
type:none;float:left;position:relative;}
#multi_drop_menus li ul { position:absolute; width:7em;}
#multi_drop_menus li ul li{width:100%;}
#multi_drop_menus { behavior:url(/slideshow/lib/js_tools/csshover.htc); font-family:lucida,
arial, sans-serif; border:1px solid #686;float:left;}
#multi_drop_menus li ul { position:absolute; width:7em;display:none;}

DROP-DOWN MENU
HTML:
<div id="multi_drop_menus">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
HTML:
<div id="multi_drop_menus">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>

TỔNG KẾT
Thành phần (component) là những đối tượng
thường xuyên được sử dụng trên trang web:
Menu & List
Bảng danh sách
Form
Các thành phần được định sẽ sẽ có dáng vẻ chuyên
nghiệp hơn, cũng như thu hút sự chú ý
Trong mỗi thành phần đều có những thuộc tính
riêng biệt
Sử dụng những giá trị block, none của thuộc tính
position để phân cấp menu dropdown
Thành phần (component) là những đối tượng
thường xuyên được sử dụng trên trang web:
Menu & List
Bảng danh sách
Form
Các thành phần được định sẽ sẽ có dáng vẻ chuyên
nghiệp hơn, cũng như thu hút sự chú ý
Trong mỗi thành phần đều có những thuộc tính
riêng biệt
Sử dụng những giá trị block, none của thuộc tính
position để phân cấp menu dropdown

�ݺ�ߣ

�ݺ�ߣ 7 - Thiết kế Web cơ bản

Convert to study materialsBETA

More Related Content

�ݺ�ߣ 7 - Thiết kế Web cơ bản