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

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

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: ptttam@khcn.hoasen.edu.vn 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 Hình ảnh trang web 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 giữa hàng và cột gọi là (cell)  Ơ là đơn vị nhỏ nhất 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 Hình ảnh trang web 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 Hình ảnh trang web CÁC THAO TÁC TRÊN BẢNG 2.1 Tạo một bảng Cách Cách 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 Hình ảnh trang web CÁC THAO TÁC TRÊN BẢNG (tt) 2.2 Thêm hàng/cột Cách Cách 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 Hình ảnh trang web CÁC THAO TÁC TRÊN BẢNG (tt) 2.3 Xóa hàng/cợt Cách Cách 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 Hình ảnh trang web CÁC THAO TÁC TRÊN BẢNG (tt) 2.4 Trộn nhiều ô thành một ô – Chọn hay nhiều ô muốn trộn Cách Cách 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 Hình ảnh trang web 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 hay nhiều ô 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 Hình ảnh trang web CÁC THAO TÁC TRÊN BẢNG (tt) 2.6 Tách một bảng thành bảng Cách Cách 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 Hình ảnh trang web 10 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 Hình ảnh trang web 17 SỬ DỤNG LAYOUT TABLES (tt) 3.4 Thay đổi kích thước 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 Hình ảnh trang web 18 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 Hình ảnh trang web 19 ĐỊNH DẠNG BẢNG 4.1 Thiết lập thuộc tính bảng (Table Properties) – Click phải lên vị trí bất kỳ bảng > Table Properties, – Chọn menu Table > Table Properties > Tables… (slide 21) 4.2 Thiết lập thuộc tính ô (Cell Properties) – Click phải lên vị trí bất kỳ ô > Cell Properties, – 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 Hình ảnh trang web 20 ĐỊNH DẠNG BẢNG (tt) Canh lề bảng trang web Khoảng cách giữa đường viền ô và chữ ô Khoảng cách giữa các ô bảng Đường viền bảng (0 >=1) Số hàng và số cột bảng Chiều rộng và chiều cao bảng Màu viền bảng Màu bảng Hình bảng Định dạng mặc định cho 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 Hình ảnh trang web 21 ĐỊNH DẠNG BẢNG (tt) Canh lề ô trang web theo chiều ngang/dọc Chiều rộng và chiều dài ô Trộn theo dòng Trộn theo cột Đường viền ô (0 >=1) Màu viền ô Màu ô Hì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 Hình ảnh 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 Hình ảnh trang web 23 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 trang web  Lưu ý: – Tất cả các tập tin hình phải được lưu thư mục 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 Hình ảnh trang web 24 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 Hình ảnh trang web 25 CHỈNH SỬA HÌNH ẢNH – Chọn ảnh muốn chỉnh sửa – Chọn 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 Hình ảnh trang web 26 CHỈNH SỬA HÌNH ẢNH (tt) Đường dẫn hình ảnh Dòng ghi chú cho ảnh Tạo liên kết cho ả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 Hình ảnh trang web 27 CHỈNH SỬA HÌNH ẢNH (tt) Chọn kiểu văn bản bao quanh hình ảnh Khoảng cách từ viền chiều ngang ảnh tới văn bản Canh lề vị trí ảnh so với dòng văn bản chứa ảnh Khoảng cách từ viền chiều dọc ảnh tới văn bản Độ dày đường viền khung ảnh Xác định chính xác kích thước ảnh theo chiều rộng và chiều cao Thay đổi kích thước ảnh theo điểm ảnh Giữ kích thước ảnh theo đúng tỉ lệ gốc Thay đổi kích thước ảnh theo tỉ lệ phần trăm 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 Hình ảnh trang web 28 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ỳ trang web > Page Properties > chọn tab Formatting – C2: Vào meu Format > Background… Click chọn để xác định chế độ hình Chọn đường dẫn chứa file ả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 Hình ảnh trang web 29 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 Hình ảnh trang web 30 KẾT THÚC HỎI – ĐÁP 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 Hình ảnh trang web 31 ... kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng Hình ảnh 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 Hình ảnh trang web. .. kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng Hình ảnh trang web 12 CÁC THAO TÁC TRÊN BẢNG (tt) Tiêu đề 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. .. Thiết kế web & Các công cụ đồ họa - Chương 2: Làm việc với Bảng Hình ảnh trang web 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 Hình ảnh