bài 6 thiết kế các thành phần giao diện

Bài 6 Thiết kế các thành phần giao diện... NHẮC LẠI BÀI TRƯỚCTì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

Trang 1

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

Trang 2

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

Trang 3

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

Trang 4

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

Trang 5

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

Là một ứng dụng trên trang web

Được sử dụng trên trang web để thể hiện những

Trang 6

THÀNH PHẦN (COMPONENT)

Trang 7

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

Trang 10

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

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

Trang 11

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

Trang 12

LÀM VIỆC VỚI FORM

Trang 13

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áy chủ

Trang 15

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

Trang 16

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

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

Trang 17

ĐỊNH STYLE CHO FORM

form {

ﬂoat: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"] { ﬂoat:right; margin: 5em 0;}

form {

ﬂoat: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"] { ﬂoat:right; margin: 5em 0;}

Trang 18

DANH SÁCH (LIST) & MENU

Trang 19

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

Trang 20

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

Trang 21

LIST

Trang 23

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

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

Trang 24

Danh sách  tạo ra các link điều hướng

Trang 25

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

Định dạng style cho menu:

CSS:

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

CSS:

Trang 26

CSS:

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}

CSS:

Trang 27

Kết quả:

Trang 28

DROP-DOWN MENU

Trang 29

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ú

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

Trang 30

DROP-DOWN MENU

Trang 31

#multi_drop_menus li ul { position:absolute; width:7em;display:none;}

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

#multi_drop_menus li ul { position:absolute; width:7em;display:none;}

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

Trang 32

Trang 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

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

Tiêu đề	Bài 6 Thiết kế các thành phần giao diện
Trường học	Đại Học Quốc Gia Hà Nội
Chuyên ngành	Thiết kế các thành phần giao diện
Thể loại	Bài giảng
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	33
Dung lượng	4,44 MB