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 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 Bài 6 - 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 THÀNH PHẦN (COMPONENT) Bài 6 - Thiết kế các thành phần giao diện LÀM VIỆC VỚI BẢNG (TABLE) 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 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 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 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àm việc với table: Background Border Text Kích thước [...]... 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 Bài 6 - Thiết kế các thành phần giao diện 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 Bài 6 - Thiết kế các thành phần giao diện ĐỊNH STYLE CHO THÀNH PHẦN FORM CSS: input {font-size:.8em;} label {display:block; clear:both; font-size:85%;font-weight:bold;... 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 Gibson Fender Rickenbacker Ibanez Gibson Fender Rickenbacker Ibanez Bài 6 - Thiết kế các thành phần giao diện ÁP STYLE CHO LIST Áp dụng CSS để định dạng kiểu... 6 - Thiết kế các thành phần giao diện MENU Kết quả: Bài 6 - Thiết kế các thành phần giao diện DROP-DOWN MENU 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ú Bài 6 - Thiết kế các thành phần giao diện DROP-DOWN MENU Bài 6 - Thiết kế các thành phần giao diện DROP-DOWN MENU CSS: #multi_drop_menus li { border:2px solid blue; list-styletype:none;float:left;position:relative;}... Bài 6 - Thiết kế các thành phần giao diện ĐỊNH STYLE CHO THÀNH PHẦN FORM Định dạng style cho nút submit: CSS: input[type="submit"] { float:right; margin:.5em 0; } XHTML: Bài 6 - Thiết kế các thành phần giao diện ĐỊNH STYLE CHO FORM form { float:left; width:24em; margin:20px... Bài 6 - Thiết kế các thành phần giao diện 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 6. .. 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 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ự:... 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} Bài 6 - Thiết kế các thành phần giao diện MENU Kết quả: Bài 6 - Thiết kế các. .. # 069 ;} 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} Bài 6 - Thiết kế các thành phần giao diện MENU Cách...ĐỊ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 6 - Thiết kế các thành phần giao diện LÀM VIỆC VỚI FORM FORM Dùng để lấy dữ liệu của người dùng để gửi tới máy chủ Sử dụng... behavior:url( / /lib/js_tools/csshover.htc); font-family:lucida, arial, sans-serif; border:1px solid #68 6;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;} Bài 6 - Thiết kế các thành phần giao diện DROP-DOWN MENU HTML: Item 1 . 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. 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. 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 &