1 of 33

Bài 7 Thiết kế các thành phần giao diện

2 of 33

NHẮC LẠI BÀI TRƯỚC

Bài 7 - Thiết kế các thành phần giao diện

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

3 of 33

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

Bài 7 - Thiết kế các thành phần giao diện

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

4 of 33

CÁC THÀNH PHẦN TRÊN TRANG WEB

5 of 33

THÀNH PHẦN (COMPONENT)

Bài 7 - Thiết kế các thành phần giao diện

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

6 of 33

THÀNH PHẦN (COMPONENT)

Bài 7 - Thiết kế các thành phần giao diện

7 of 33

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

8 of 33

BẢNG MẶC ĐỊNH

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

Bài 7 - Thiết kế các thành phần giao diện

9 of 33

td

CÁC THẺ THÀNH PHẦN CỦA BẢNG

tr

th

table

Bài 7 - Thiết kế các thành phần giao diện

10 of 33

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

Bài 7 - Thiết kế các thành phần giao diện

11 of 33

ĐỊ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*/

Bài 7 - Thiết kế các thành phần giao diện

12 of 33

LÀM VIỆC VỚI FORM

13 of 33

FORM

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

14 of 33

FORM

Bài 7 - Thiết kế các thành phần giao diện

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

15 of 33

ĐỊNH STYLE CHO THÀNH PHẦN FORM

Bài 7 - Thiết kế các thành phần giao diện

CSS:

input {font-size:.8em;}

label {display:block; clear:both; font-size:85%;font-weight:bold; margin:.5em 0 0; padding-bottom:.5em;}

HTML:

<label for="user_name">UserName</label>

<input type="text" id="user_name" name="user_name" size="18" maxlength="36"tabindex="1" />

16 of 33

ĐỊNH STYLE CHO THÀNH PHẦN FORM

Bài 7 - Thiết kế các thành phần giao diện

Định dạng style cho nút submit:

CSS:

input[type="submit"] { float:right; margin:.5em 0; } XHTML:

<div>

<input type="submit" value="Submit this Form" />

</div>

17 of 33

ĐỊNH STYLE CHO FORM

Bài 7 - Thiết kế các thành phần giao diện

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

18 of 33

DANH SÁCH (LIST) & MENU

19 of 33

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 7 - Thiết kế các thành phần giao diện

20 of 33

LIST

Bài 7 - Thiết kế các thành phần giao diện

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

21 of 33

LIST

Bài 7 - Thiết kế các thành phần giao diện

22 of 33

LIST MẶC ĐỊNH

Bài 7 - Thiết kế các thành phần giao diện

<ul>

<li>Gibson</li>

<li>Fender</li>

<li>Rickenbacker</li>

<li>Ibanez</li>

</ul>

<ol>

<li>Gibson</li>

<li>Fender</li>

<li>Rickenbacker</li>

<li>Ibanez</li>

</ol>

23 of 33

ÁP STYLE CHO LIST

Bài 7 - Thiết kế các thành phần giao diện

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

24 of 33

MENU

Bài 7 - Thiết kế các thành phần giao diện

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>

25 of 33

MENU

Bài 7 - Thiết kế các thành phần giao diện

Định dạng style cho menu:

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

Cách căn chỉnh trên IE6 & 7

li:first-child {border-top:2px solid #069;}

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; border-top: 2px solid #069}

li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}

26 of 33

MENU

Bài 7 - Thiết kế các thành phần giao diện

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;

border-top: 2px solid #069}

li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}

27 of 33

MENU

Bài 7 - Thiết kế các thành phần giao diện

Kết quả:

28 of 33

DROP-DOWN MENU

29 of 33

DROP-DOWN MENU

Bài 7 - Thiết kế các thành phần giao diện

Ứ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ú

30 of 33

DROP-DOWN MENU

Bài 7 - Thiết kế các thành phần giao diện

31 of 33

DROP-DOWN MENU

Bài 7 - Thiết kế các thành phần giao diện

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(../../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;}

#multi_drop_menus li:hover ul {display:block;}

32 of 33

DROP-DOWN MENU

Bài 7 - Thiết kế các thành phần giao diện

HTML:

<div id="multi_drop_menus">

<ul>

<li><a href="#">Item 1</a></li>

<li><a href="#">Item 2</a></li>

<li>

<a href="#">Item 3</a>

<ul class="subnav">

<li><a href="#">Item 3a</a></li>

<li><a href="#">Item 3b</a></li>

</ul>

</li>

​

</ul>

</div>

33 of 33

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

Bài 7 - Thiết kế các thành phần giao diện