chương 2: làm việc với bảng và hình ảnh-tk web & đồ họa

TRƯỜNG ĐẠI HỌC HOA SEN
KHOA KHOA HỌC & CÔNG NGHỆ
BỘ MÔN HỆ THỐNG THÔNG TIN

THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỜ HỌA
(TINV205DV02)

Chương 2:

LÀM VIỆC VỚI BẢNG &
HÌNH ẢNH TRONG TRANG WEB
Giảng viên điều phối: PHẠM THỊ THANH TÂM
Email:


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

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

2


1. GIỚI THIỆU
 Bảng (Table) được dùng để định vị các đối tượng,
chia cột, bố cục trang.
 Bảng được sử dụng một cách cách hiệu quả để trình
bày các thông tin có tính liệt kê, phân loại từng
dòng…
 Một bảng bao gồm nhiều hàng (row) và nhiều cột
(column). Phần giao nhau giữa hàng và cợt gọi là ơ
(cell)

 Ơ là đơn vị nhỏ nhất trong bảng và là nơi chứa nội
dung (dòng văn bản hay hình ảnh…)
Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

3


1. GIỚI THIỆU (tt)
Ví dụ Bảng

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

4


2. CÁC THAO TÁC TRÊN BẢNG
2.1. Tạo một bảng mới
Cách 1

Cách 2

hoặc

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

5


2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.2. Thêm hàng/cột

Cách 2

Cách 1

hoặc

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

6


2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.3. Xóa hàng/cợt
Cách 2
Cách 1
hoặc

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

7


2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.4. Trộn nhiều ô thành một ô
– Chọn 2 hay nhiều ô muốn trộn
Cách 2
Cách 1
hoặc

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

8


2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.5. Tách một ô thành nhiều ô
– Chọn ô muốn tách thành 2 hay nhiều ơ
hoặc

Tách theo cợt

Tách theo dịng

Mơn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

9


2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.6. Tách một bảng thành 2 bảng
Cách 2
Cách 1
hoặc

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

10


2. CÁC THAO TÁC TRÊN BẢNG (tt)

2.7. Xóa bảng
Cách 1

Cách 2

hoặc

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

11


2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.8. Tiêu đề của bảng
– Là một chú thích của bảng xuất hiện phía trên
bảng.
– Cách chèn tiêu đề của bảng:
 Đặt con trỏ chuột tại vị trí bất kỳ bên trong
bảng
 Chọn menu Table > Insert > Caption…

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

12


2. CÁC THAO TÁC TRÊN BẢNG (tt)
Tiêu đề của bảng

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

13


2. CÁC THAO TÁC TRÊN BẢNG (tt)
 Thay đổi vị trí của tiêu đề bảng
– Click phải lên tiêu đề bảng > Caption Properties

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

14


3. SỬ DỤNG LAYOUT TABLES

Task Panes

3.1. Tạo một bảng với layout có sẵn

(View > Toolbars > Tables)

Mơn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

15


3. SỬ DỤNG LAYOUT TABLES (tt)
3.2. Thay đổi kích thước của ô trong bảng

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

16


3. SỬ DỤNG LAYOUT TABLES (tt)
3.3. Vẽ một bảng với layout tùy ý

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

17


3. SỬ DỤNG LAYOUT TABLES (tt)
3.4. Thay đổi kích thước của bảng

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

18


3. SỬ DỤNG LAYOUT TABLES (tt)
3.5. Vẽ một ô với layout tùy ý

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

19


4. ĐỊNH DẠNG BẢNG
4.1. Thiết lập thuộc tính của bảng (Table Properties).

– Click phải lên vị trí bất kỳ trong bảng > Table
Properties, hoặc
– Chọn menu Table > Table Properties > Tables…
(slide 21)
4.2. Thiết lập thuộc tính của ô (Cell Properties).
– Click phải lên vị trí bất kỳ trong ô > Cell
Properties, hoặc
– Chọn menu Table > Table Properties > Cell…
(slide 22)
Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

20


3. ĐỊNH DẠNG BẢNG (tt)
Canh lề bảng
trong trang web
Khoảng cách giữa
đường viền ô và
chữ trong ô

Khoảng cách giữa
các ô trong bảng
Đường viền của
bảng (0 hoặc >=1)

Số hàng và số cột
của bảng

Chiều rộng và

chiều cao bảng
Màu viền của bảng

Màu nền của bảng
Hình nền của bảng

Định dạng mặc
định cho bảng mới
Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

21


3. ĐỊNH DẠNG BẢNG (tt)
Canh lề của ô trong
trang web theo
chiều ngang/dọc

Chiều rộng và
chiều dài của ô

Trộn theo dòng
Trộn theo cột

Đường viền của ô
(0 hoặc >=1)
Màu viền của ô

Màu nền của ô
Hình nền của ô

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

22


LÀM VIỆC VỚI HÌNH ẢNH

Mơn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

23


1. GIỚI THIỆU
 Hình ảnh:
– Là thành phần làm đẹp thêm cho trang web
– Có thể cung cấp thông tin và tăng tính dễ đọc của
trang web
 Lưu ý:
– Tất cả các tập tin hình phải được lưu trong thư
mục con của thư mục chứa website.

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

24


2. CHÈN HÌNH ẢNH TỪ FILE
– Chọn vị trí nơi chèn ảnh
– Vào menu Insert > Picture > From File…

– Chọn file ảnh và click nút Insert

Môn học: Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng và Hình ảnh trong trang web

25