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

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

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

<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

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

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

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>

CSS:input[type="submit"] { float:right; margin:.5em 0; }XHTML:<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;}

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

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

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

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

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>

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>

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

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ểnhướngThiết kế phong phú

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

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

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

</ul></div>

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

Thực hành thiết kế ngược Rapidform cơ bản

Thiết kế khuôn Cơ bản Siemens NX

[Thiết kế slides] Những nguyên liệu cơ bản

Nguyên tắc cơ bản để thiết kế.

thiết kế thủy phi cơ- tổng hợp-Trung3

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

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

THIẾT KẾ CƠ SỞ DỮ LIỆU

Sổ tay thiết kế cơ khí - Tập 1

đồ Án Thiết Kế Mạch Điều Khiển Động Cơ

Thiết kế cơ sở dữ liệu phân tán

MÔN HỌC: CƠ SỞ THIẾT KẾ TRANG PHỤC

Sổ tay thiết kế cơ khí - Tập 3.pdf

Thiết kế cơ sở dữ liệu vật lý & Tuning

nguyên tắc cơ bản thiết kế EMC

Chương 3: Cơ bản về thiết kế cơ sở dữ liệu...Chương 3: Cơ bản về thiết kế cơ sở dữ liệu Phạm Nguyên Thảo pnthao@fit.hcmuns.edu.vn 2 Nội dung

Sổ tay thiết kế cơ khí tập 2

Nghi dinh so 12/2009/ND-CP - Business Facilitation · Web viewb) Thiết kế kỹ thuật là thiết kế được thực hiện trên cơ sở thiết kế cơ sở trong dự

Thiết kế khoang động cơ Ford Transit 2014

Vài nguyên tắc cơ bản khi thiết kế Slide