bài 6 thiết kế các thành phần giao diện - giáo trình fpt
DESCRIPTION
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 menuTRANSCRIPT
![Page 1: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/1.jpg)
Bài 6Thiết kế các thành phần giao diện
![Page 2: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/2.jpg)
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 6 - Thiết kế các thành phần giao diện
![Page 3: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/3.jpg)
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:
TableFormLists & 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:
TableFormLists & 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
![Page 4: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/4.jpg)
CÁC THÀNH PHẦN TRÊN TRANG WEB
![Page 5: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/5.jpg)
THÀNH PHẦN (COMPONENT)
Là thành phần mở rộngLà một ứng dụng trên trang webĐược sử dụng trên trang web để thể hiện nhữngchức năng nhất định:
Hiển thị danh sáchMenu…
Được trình bày trong những box trên trang web
Bài 6 - Thiết kế các thành phần giao diện
Là thành phần mở rộngLà một ứng dụng trên trang webĐược sử dụng trên trang web để thể hiện nhữngchức năng nhất định:
Hiển thị danh sáchMenu…
Được trình bày trong những box trên trang web
![Page 6: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/6.jpg)
THÀNH PHẦN (COMPONENT)
Bài 6 - Thiết kế các thành phần giao diện
![Page 7: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/7.jpg)
LÀM VIỆC VỚI BẢNG (TABLE)
![Page 8: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/8.jpg)
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>
Bài 6 - Thiết kế các thành phần giao diện
<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>
![Page 9: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/9.jpg)
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
![Page 10: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/10.jpg)
THUỘC TÍNH CỦA BẢNG
Những thành phần định nghĩa trong CSS khi làmviệc với table:
BackgroundBorderTextKích thước
Bài 6 - Thiết kế các thành phần giao diện
Những thành phần định nghĩa trong CSS khi làmviệc với table:
BackgroundBorderTextKích thước
![Page 11: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/11.jpg)
ĐỊ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 chobảng*/table.basic_lines td {border-bottom:1px solid #069;}/*định nghĩa style cho các ô củabảng*/
Bài 6 - Thiết kế các thành phần giao diện
![Page 12: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/12.jpg)
LÀM VIỆC VỚI FORM
![Page 13: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/13.jpg)
FORM
Dùng để lấy dữ liệu của người dùng để gửi tới máychủSử dụng để nhập dữ liệu từ người dùng:
Form đăng kýForm đăng nhậpForm xác thực
Sử dụng như dạng biểu mẫu
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áychủSử dụng để nhập dữ liệu từ người dùng:
Form đăng kýForm đăng nhậpForm xác thực
Sử dụng như dạng biểu mẫu
![Page 14: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/14.jpg)
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ậpliệ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
![Page 15: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/15.jpg)
ĐỊ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:.5em0 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
![Page 16: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/16.jpg)
Đị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; }XHTML:<div>
<input type="submit" value="Submit this Form" /></div>
Bài 6 - Thiết kế các thành phần giao diện
CSS:input[type="submit"] { float:right; margin:.5em 0; }XHTML:<div>
<input type="submit" value="Submit this Form" /></div>
![Page 17: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/17.jpg)
ĐỊ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;}
Bài 6 - 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;}
![Page 18: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/18.jpg)
DANH SÁCH (LIST) & MENU
![Page 19: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/19.jpg)
DANH SÁCH (LIST) & MENU
List: là những nhóm mục văn bản liên quan tới đốitượng. Cơ sở của việc điều hướng trên trang webMenu: danh sách lựa chọn để chuyển hướng lựachọn
Bài 6 - Thiết kế các thành phần giao diện
![Page 20: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/20.jpg)
LIST
3 loại list:Không thứ tự: được gạch đầu dòngThứ 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
![Page 21: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/21.jpg)
LIST
Bài 6 - Thiết kế các thành phần giao diện
![Page 22: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/22.jpg)
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>Rickenbacker</li><li>Ibanez</li>
</ol>
Bài 6 - 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>
![Page 23: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/23.jpg)
Á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ả sangngang)Thay đổi kiểu bullet
CSS:ul {border:0; margin:10px 30px 10px1.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ả sangngang)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 10px1.25em; padding:0; list-style-type:none;}li {border-bottom:2px solid #069; margin:0;padding:.3em 0; text-indent:.5em}
![Page 24: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/24.jpg)
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}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>
![Page 25: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/25.jpg)
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:first-child {border-top:2px solid #069;}
Định dạng style cho menu:
Cách căn chỉnh trên IE6 & 7
Bài 6 - Thiết kế các thành phần giao diện
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: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}
![Page 26: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/26.jpg)
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;border-top: 2px solid #069}li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}
Cách căn chỉnh trên IE6 & 7
Bài 6 - Thiết kế các thành phần giao diện
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}
![Page 27: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/27.jpg)
MENU
Kết quả:Kết quả:
Bài 6 - Thiết kế các thành phần giao diện
![Page 28: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/28.jpg)
DROP-DOWN MENU
![Page 29: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/29.jpg)
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ểnhướngThiế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ểnhướngThiết kế phong phú
Bài 6 - Thiết kế các thành phần giao diện
![Page 30: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/30.jpg)
DROP-DOWN MENU
Bài 6 - Thiết kế các thành phần giao diện
![Page 31: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/31.jpg)
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(../../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;}
CSS:
Bài 6 - Thiết kế các thành phần giao diện
#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;}
![Page 32: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/32.jpg)
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:
Bài 6 - Thiết kế các thành phần giao diện
<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>
![Page 33: Bài 6 Thiết kế các thành phần giao diện - Giáo trình FPT](https://reader033.vdocuments.mx/reader033/viewer/2022052316/5585fd2cd8b42a5d068b4e57/html5/thumbnails/33.jpg)
TỔNG KẾT
Thành phần (component) là những đối tượngthường xuyên được sử dụng trên trang web:
Menu & ListBảng danh sáchForm
Các thành phần được định sẽ sẽ có dáng vẻ chuyênnghiệ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ínhriêng biệtSử dụng những giá trị block, none của thuộc tínhposition để phân cấp menu dropdown
Thành phần (component) là những đối tượngthường xuyên được sử dụng trên trang web:
Menu & ListBảng danh sáchForm
Các thành phần được định sẽ sẽ có dáng vẻ chuyênnghiệ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ínhriêng biệtSử dụng những giá trị block, none của thuộc tínhposition để phân cấp menu dropdown
Bài 6 - Thiết kế các thành phần giao diện