Thiết kế web và các công cụ đồ họa (tinv205dv02) - Chương 4: Làm việc với frame

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 FRAME Giảng viên điều phối: PHẠM THỊ THANH TÂM Email: ptttam@khcn.hoasen.edu.vn Chương 4: THIẾT KẾ WEB & CÁC CÔNG CỤ ĐỒ HỌA (TINV205DV02) NỘI DUNG I. GIỚI THIỆU II. CÁC THAO TÁC TRÊN FRAMES PAGES III. THAY ĐỔI CÁC THUỘC TÍNH CỦA FRAME Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 2 I. GIỚI THIỆU  Frames Page (trang khung) là trang chỉ có khung, không chứa nội dung bên trong.  Frames Page được chia ra thành nhiều vùng, mỗi vùng gọi là một Frame (khung) và mỗi Frame chứa 1 trang web riêng biệt.  MS Expression Web cung cấp 10 mẫu Frames Page để chọn lựa: Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 3 I. GIỚI THIỆU (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 4 I. GIỚI THIỆU (tt)  Ví dụ một số mẫu Frames Page Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 5 1 2 3 4 Banner and Contents Frames Page The frames page The banner frame The contents frame The main frame 1 2 3 4 II. CÁC THAO TÁC TRÊN FRAMES PAGE 1. Cách tạo 1 Frames Page Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 6 hoặc Chọn 1 mẫu Frames Page có sẵn II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) – Set Initial Page: chọn một trang web có sẵn để hiển thị trong frame – New Page: tạo một trang web mới và đặt vào trong frame Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 7 II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) 2. Chỉnh sửa nội dung trong Frame – Click phải lên frame muốn chỉnh sửa, chọn Open Page in New Window hoặc Format > Frames > Open Page in New Window Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 8 II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) 3. Lưu lại trang web được hiển thị trong Frame – Chọn Frame đang hiển thị trang web muốn lưu – Chọn menu Format > Frames > Save Page As Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 9 Tên trang web hiển thị trong trong Frame II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) 4. Lưu lại 1 Frames Page – Chọn menu File > Save As… Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 10 Tên của Frames Page II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) 5. Tách 1 Frame thành 2 hay nhiều Frame – Click chọn lên Frame muốn tách – Chọn menu Format > Frames > Split Frame 6. Xóa 1 Frame ra khỏi Frames Page – Click chọn lên Frame muốn xóa – Chọn menu Format > Frames > Delete Frame Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 11 Tách theo cột Tách theo dòng II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) 7. Tạo liên kết trong Frame Page: dùng để tạo liên kết từ trang trong frame này đến trang trong frame khác – B1: Chọn đối tượng cần tạo liên kết (dòng chữ, hình ảnh, nút nhấn,…) và mở hộp thoại Insert Hyperlink – B2: Chọn trang muốn liên kết đến – B3: Chọn nút Target Frame để mở hộp thoại Target Frames  Chọn Frame muốn thiết lập thành target (Slide 13) – B4: Click OK > OK Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 12 II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 13 II. CÁC THAO TÁC TRÊN FRAMES PAGE (tt)  Một số loại target thông dụng – Page Default (none): xác định mặc định của một liên kết trong một Frames Page – Same Frame (_self): hiển thị trang liên kết trong cùng frame với trang chứa liên kết – Whole Page (_top): hiển thị trang liên kết trong cùng cửa sổ trình duyệt hiện hành, thay thế cho Frames Page hiện tại – New Window (_blank): hiển thị trang liên kết trong cửa sổ trình duyệt mới – Parent Frame (_parent): hiển thị trang liên kết trong trang chứa Frames Page Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 14 III. THAY ĐỔI CÁC THUỘC TÍNH CỦA FRAME  Thay đổi các thuộc tính của Frame (Slide 16) – Chọn Frame muốn thay đổi các thuộc tính – Click phải > chọn Frame Properties hoặc chọn menu Format > Frames > Frame Properties  Thay đổi các thuộc tính khác của Frame (Slide 17) – Chọn Frame muốn thay đổi các thuộc tính – Click phải > chọn Frame Properties, hoặc chọn menu Format > Frames > Frame Properties > Frames Page… Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 15 III. THAY ĐỔI CÁC THUỘC TÍNH CỦA FRAME (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 16 Tên Frame Trang web được hiển thị trong Frame Che dấu/Hiển thị thanh cuộn trong Frame Tự động thay đổi kích thước của Frame trên trình duyệt Kích thước của Frame Canh lề trong Frame III. THAY ĐỔI CÁC THUỘC TÍNH CỦA FRAME (tt) Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 17 Che dấu/Hiển thị đường viền của Frame Khoảng cách giữa các Frame =0: Không có đường viền >0: độ dày của đường viền KẾT THÚC Môn học: Thiết kế web & Các công cụ đồ họa - Chương 4: Làm việc với Frame 18 HỎI – ĐÁP