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 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 là ô (cell).Ô là đơn vị nhỏ nhất trong bảng là nơi chứa nội dung (dòng văn bảng hay hình ảnh)...
Trang 1TRƯỜ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: ptttam@khcn.hoasen.edu.vn
Chương 2:
THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỒ HỌA
(TINV205DV02)
Trang 2LÀ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
Trang 31 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…)
Trang 41 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
Trang 82 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
Trang 102 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
Trang 122 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
Trang 132 CÁC THAO TÁC TRÊN BẢNG (tt)
Tiêu đề của bảng
Trang 142 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
Trang 153 SỬ DỤNG LAYOUT TABLES 3.1 Tạo một bảng với layout có sẵn
(View > Toolbars > Tables)
Trang 163 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
Trang 173 SỬ DỤNG LAYOUT TABLES (tt)
3.3 Vẽ một bảng với layout tùy ý
Trang 183 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
Trang 193 SỬ DỤNG LAYOUT TABLES (tt)
3.5 Vẽ một ô với layout tùy ý
Trang 204 ĐỊ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
Trang 213 ĐỊNH DẠNG BẢNG (tt)
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
định cho bảng mới
Màu viền của bảng
Trang 223 ĐỊ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)
Trang 23LÀM VIỆC VỚI HÌNH ẢNH
Trang 24– 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
Trang 252 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
Trang 263 CHỈNH SỬA HÌNH ẢNH
– Chọn ảnh muốn chỉnh sửa – Chọn 1 trong 3 cách sau để hiển thị hộp thoại
Picture Properties:
Double click lên ảnh
Click phải > Picture Properties
Vào menu Format > Properties (Alt + Enter)
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 26
Trang 273 CHỈNH SỬA HÌNH ẢNH (tt)
Đường dẫn
của hình ảnh
Dòng ghi chú cho ảnh Tạo liên kết
cho ảnh
Trang 283 CHỈNH SỬA HÌNH ẢNH (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 28
Chọn kiểu văn
bản bao quanh
hình ảnh
Canh lề vị trí ảnh
so với dòng văn
bản chứa ảnh
Độ dày đường
viền khung ảnh
Xác định chính
xác kích thước
của ảnh theo chiều
rộng và chiều cao Giữ kích thước của ảnh
theo đúng tỉ lệ gốc
Thay đổi kích thước ảnh theo tỉ lệ phần trăm
Thay đổi kích thước ảnh theo điểm ảnh
Khoảng cách từ viền chiều dọc của ảnh tới văn bản
Khoảng cách từ viền chiều ngang của ảnh tới văn bản
Trang 294 TẠO HÌNH NỀN CHO TRANG WEB
– C1: Trong chế độ Design View, click phải vào
một vùng trống bất kỳ trên trang web > Page
Properties > chọn tab Formatting
– C2: Vào meu Format > Background…
Chọn đường dẫn chứa file ảnh
Click chọn để
xác định chế
độ hình nền
Trang 305 CHÈN ẢNH LÀM ĐÁNH DẤU
ĐẦU DÒNG
– Chọn danh sách cần chèn ảnh làm đánh dấu đầu
dòng
– Vao menu Format > Bullets and Numbering…
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 30
Trang 31KẾT THÚC
HỎI – ĐÁP