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

TRƯỜNG ĐẠI HỌC HOA SEN
KHOA KHOA HỌC & CÔNG NGHỆ
BỘ MÔN HỆ THỐNG THÔNG TIN
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:
Chương 2:
THIT K WEB & CÁC CÔNG CỤ Đ HA
(TINV205DV02)
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)
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
V d Bng
2. CÁC THAO TÁC TRÊN 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
5
2.1. To mt bng mới
hoặc
Cách 1
Cách 2
2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.2. Thêm hng/ct
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
hoặc
Cách 1
Cách 2
2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.3. Xóa hng/ct
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
hoặc
Cách 1
Cách 2
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
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
Cách 1
Cách 2
hoặc
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 ô
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
hoặc
Tch theo ct
Tách theo dòng
2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.6. Tách mt bng thành 2 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
10
hoặc
Cách 2
Cách 1
2. CÁC THAO TÁC TRÊN BẢNG (tt)
2.7. Xó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
11
Cách 1
Cách 2
hoặc
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)
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
Tiêu đề của bng
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
3.1. To mt bng với layout có sẵn
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
(View > Toolbars > Tables)
Task Panes
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)
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
Canh lề bng
trong trang web
Khong cch gia
cc ô trong bng
Khong cch gia
đường viền ô v
ch trong ô
Chiều rng v
chiều cao bng
Đường viền của
bng (0 hoặc >=1)
Mu nền của bng
Hnh nền của bng

Số hng v số ct
của bng
Đnh dng mặc
đnh cho bng mới
Mu viền của bng
3. ĐNH DẠNG BẢNG (tt)
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
Canh lề của ô trong
trang web theo
chiều ngang/dc
Trn theo dng
Trn theo ct
Chiều rng v
chiều di của ô
Mu nền của ô
Hnh nền của ô
Mu viền của ô
Đường viền của ô
(0 hoặc >=1)
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