Slide 7 - Thiết kế Web cơ bản

Bài 7Thiế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ế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 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:

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


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

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


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

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àmviệc với table:

BackgroundBorderTextKích thước


Những thành phần định nghĩa trong CSS khi làmviệc với table:

BackgroundBorderTextKí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 chobảng*/table.basic_lines td {border-bottom:1px solid #069;}/*định nghĩa style cho các ô củabảng*/


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


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

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


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:.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" />


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


CSS:input[type="submit"] { float: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

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


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


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>Rickenbacker</li><li>Ibanez</li>

</ol>


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

Á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


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}

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

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

MENU






MENU

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


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


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(../../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:


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

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


Slide 7 - Thiết kế Web cơ bản

Education

Transcript of Slide 7 - Thiết kế Web cơ bản