THIẾT KẾ BÀI GIẢNG ĐIỆN TỬ BẰNG MICROSOFT FRONTPAGE ThS.Nguyễn Đại Hùng Bộ mơn Hóa Lời mở đầu Bài giảng điện tử hình thức tổ chức lên lớp mà tồn kế hoạch hoạt động dạy học thực thông qua môi trường multimedia máy tính tạo Bài giảng điện tử viết ngơn ngữ lập trình tuỳ theo khả người viết dựa vào phần mềm trình diễn sẵn có Frontpage, Publisher, PowerPoint Trong thiết kế giảng điện tử Microsoft PowerPoint đơn giản thường phần lớn giáo viên soạn thảo giảng phần mềm Tuy nhiên để tạo giảng mang tính chất chun nghiệp Microsoft PowerPoint khơng đáp ứng Vì thay vài phần mềm khác có tính vượt trội Một phần mềm Microsoft Frontpage Phần mềm kèm với Microsoft Office XP Với Frontpage, dễ dàng tạo giảng dạng trang web đơn, website Bài giảng cho phép dạy trực tiếp lớp, đưa lên mạng Internet đóng gói CD_ROM để học sinh tự học Việc thiết kế giảng Frontpage đơn giản ta soạn thảo giảng Microsoft Word Chỉ cần kiến thức ngơn ngữ HTML giải gần tất vấn đề thiết kế giảng Hướng dẫn thiết kế giảng điện tử Microsoft Frontpage Bước 1: Mở trang Website tập hợp nhiều trang web tập tin khác liên kết lại với Mỡi website có trang chủ trang bạn sẽ xem gõ địa website Chọn File/New/Page or Web Bạn mở trang trắng (Blank page) hay lựa chọn số trang mẫu sẵn có (Page Template) Ở đây, chúng ta mở trang trắng (chưa có gì) Khi cần lưu bạn đã làm, đơn giản chọn lịnh Save (hay Save As lưu thành file mới) menu File Bước 2: Nhập văn định dạng Sau trang đã mở, sẵn sàng cho bạn đưa liệu hình ảnh trang trí vào, phần góc bên trái cửa sổ Frontpage có ba bảng (tab) chọn lựa gờm Normal, HTML, Preview Công dụng chúng sau: - Normal: Cho phép bạn soạn thảo trang web tình trạng gần giớng hiển thị trình duyệt - HTML: Cho phép bạn soạn thảo trang web với đầy đủ mã ng̀n Bạn sẽ thấy tồn tag (thẻ) nội HTML trang làm việc với trang web giống mở NotePad - Preview: Xem trình duyệt web khơng sửa Để soạn thảo văn tiếng Việt với font Unicode, bạn mở menu File/Properties/Language, chọn Save the document as: Unicode (UTF-8) Hay chọn bảng HTML thay dòng rồi chuyển trở lại bảng Normal Chú y: Nếu dùng font tiếng Việt khác ABC, VNI, Bách Khoa, bạn phải thay dòng Nếu bạn dùng tiếng Việt Unicode, bạn xác lập mặc định UTF-8 cho Frontpage cách lưu trang thành trang mẫu có tên Normal.htm thư mục Program Files/Microsoft Office/Templates/1033/Pages/normal.tem/ Bạn dùng trình gõ tiếng Việt hỡ trợ Unicode VietSpell, Vietkey, Unikey, để nhập tiếng Việt soạn thảo Việc định dạng văn tương tự Word với công cụ Formatting, tức bạn chọn kiểu tiêu đề, font kích cỡ font, làm đậm, nghiêng, gạch dưới, canh lề, so hàng, màu font, màu Cách làm: Chọn vùng văn cần định dạng rồi bấm biểu tượng định dạng công cụ Bước 3: Tạo chữ cuộn (Marquee) Bạn thêm vào trang web dòng chữ cuộn để thu hút chú ý, bạn chỉnh tớc độ, hướng di chuyển kích thước, font chữ kiểu cách Marquee Cách làm: Chọn menu Insert/Web Component/Dynamic Effects/Marquee Trong cửa sổ Marquee Properties, bạn nhập dòng văn vào ô Text rồi bấm OK Bạn chọn chiều cuộn, tớc độ cuộn, kích thước màu cho khung cuộn cửa sổ Để định dạng phần văn Marquee, bạn bấm nút Style/Format rồi chọn Font Frontpage sẽ đặt Marquee lên trang web bạn bạn sẽ khơng thấy cuộn bảng Normal, muốn xem đoạn văn cuộn bạn phải chuyển qua bảng Preview Bước 4: Chèn file văn Bạn chèn nội dung file văn vào Frontpage, với định dạng cho phép là: Word, Rtf, Txt, Excel, HTML, Cách làm: Di chuyển dấu nháy đến vị trí chèn file, mở menu Insert/File rồi định file cần chèn Bước 5: Tạo liên kết (link) văn Một liên kết lệnh HTML nhúng trang web, lệnh yêu cầu trình duyệt hiển thị trang web hay file khác người xem bấm chuột vào đoạn văn hay hình ảnh tương ứng Mỡi liên kết có hai phần: phần liên kết phần “đích” Theo mặc định, người dùng di chuyển chuột đến liên kết, sẽ đổi hình dạng thành bàn tay để báo hiệu trạng thái cửa sổ trình duyệt sẽ hiển thị địa đới tượng đích Cách làm: Chọn cụm từ để tạo liên kết văn đã soạn thảo, mở menu Insert/Hyperlink hay bấm biểu tượng Insert Hyperlink Toolbar Trong hộp thoại Insert Hyperlink, bạn định địa file đích cách chọn liệt kê hay gõ địa vào ô Address rồi bấm OK Cụm từ liên kết sẽ gạch để thể liên kết Nếu liên kết đến địa e-mail, bạn chọn Link to/E-mail Address rồi nhập địa e-mail tiêu đề (subject), Frontpage sẽ tự động chèn dòng “mailto:” vào trước địa e-mail Chú y: Địa liên kết file có hai loại: - Điạ chỉ tuyệt đới: Điạ đầy đủ, xác Thí dụ : “C:/web/andi/image/logo/lh3d.gif” Hay http://andi.com.vn/lh com/index.htm” - Địa chỉ tương đối: Địa định vị theo mối quan hệ tương đới(trên, dưới, ngang hàng) với trang chủ Thí dụ: Nếu đối tượng liên kết chứa cùng thư mục với trang chủ, ta cần ghi “tên file” Nếu thư mục khác ngang cấp, ta ghi “ /tên thư mục/tên file” Nếu thư mục cấp, ta ghi “ /tên file” Nếu thư mục cấp, ta ghi “tên thư mục/tên file” Ngoài ra, theo mặc định trình duyệt, người xem bấm chuột vào liên kết file dạng chương trình (exe, com, zip ), hay multimedia (audio, video ) trình duyệt sẽ cho hộp thoại để bạn chọn tải file máy cá nhân hay chạy chương trình tương ứng Bước 6: Sửa/ xoá liên kết Bạn di chuyển dấu nháy đến liên kết rồi bấm biểu tượng Insert Hyperlink Toolbar, hộp thoại Edit Hyperlink chọn Remove Link hay sửa lại địa liên kết ô Address Bước 7: Tạo các đánh dấu trang (Bookmark) Khi người xem bấm vào liên kết nạp trang web mới, trang web lớn hình, người xem cần phải cuộn hình nhiều lần để đến đoạn cần xem Để giảm bớt phiền tối này, bạn tạo liên kết đến xác đoạn văn cần xem Bookmark Bạn di chuyển từ vị trí đến vị trí khác cùng trang web Bookmark Cách làm: Bạn cần đặt dấu nháy nơi bạn muốn đặt bookmark, mở menu Insert/Bookmark, nhập tên cho Bookmark rồi bấm OK Bước 8: Liên kết đến Bookmark Để liên kết đến Bookmark cùng trang web, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink, chọn Bookmark Để liên kết đến Bookmark trang web khác, bạn chọn cụm từ cần liên kết, mở menu Insert/Hyperlink Chọn trang web đích ô liệt kê rồi bấm nút Bookmark Trong danh sách Bookmark có trang web đích, chọn Bookmark đích Chú y: Liên kết bookmark có dạng “#tên bookmark” (thí dụ: weblh/ ctv/ctvlk.htm#lvd) mã lệnh có biểu tượng cờ soạn thảo bảng Normal Bước 9: Tạo liên kết dạng đồ ảnh Bạn chèn hình vào trang web, chia hình làm nhiều phần rời cho mỡi phần liên kết với trang web Đặc điểm gọi đồ ảnh (Image map) Cách làm: Di chuyển dấu nháy đến vị trí cần chèn hình, mở menu Insert/Picture/From file Trong hộp thoại Picture, chọn file hình rời chọn OK Sau hình đã chèn vào trang web, chọn hình để vẽ điểm nóng (hotspots) tạo thành đờ ảnh Frontpage sẽ hiển thị công cụ Picture, bấm chuột vào nút Rectangular Hotspot cơng cụ Giữ phím trái chuột kéo trỏ chuột để vẽ hình chữ nhật có kích thước tuỳ ý lên hình, sau nhả Hộp thoại Insert Hyperlink xuất hiện, bạn định file liên kết cho vùng ảnh mà bạn đã chọn Bạn tiếp tục vẽ vùng khác chọn liên kết file cho vùng kết thúc Chú y: Bấm phím phải chuột lên hình rời chọn Picture Properties để xác định vị trí hình, canh lề, tạo đường viền, Bước 10: Thêm âm nền cho trang web Một cách để làm cho trang web bạn thêm hấp dẫn thêm nhạc vào đó, nhạc phát thời gian hay phát liên tục chừng trang web còn mở tuỳ bạn Cách làm: Bấm phím phải chuột vào vùng trớng trang web rời chọn lịnh Page Properties Trong hộp thoại Page Properties, chọn bảng : General/Background Sound/Location/Browse, định file âm (wav, mid, ram, ra, aif, aifc, au, snd) Bạn định cho phát liên tục (đánh dấu chọn Forever) hay số lần định (bỏ dấu chọn Forever nhập số vào Loop) Bước 11: Thêm Video vào trang web Bạn thêm clip ảnh động vào trang web để chúng tự động thực mỗi trang web mở Cách làm: Bấm chuột vào vùng trống trang web, mở menu Insert/Picture/Video Chỉ định file video (avi, asf, ram, ra) Bạn tạo liên kết đến file video Cách làm: Chọn đoạn văn để tạo liên kết, mở menu Insert/Hyperlink Trong hộp thoại Create Hyperlink, chọn file video đích Sau liên kết tạo, bạn chuyển qua bảng Preview để xem trang web bấm chuột vào liên kết Windows sẽ tự động mở chương trình xem video thích hợp “chiếu” file video Bạn chèn file ảnh khác (GIF, JPG, BMP, PNG) vào website, FrontPage có kèm theo “kho” (Clip Art) với hàng trăm ảnh có sẵn bao gờm nút ảnh động, ảnh nền, ảnh nghệ thuật, ảnh minh hoạ, chí còn có file âm video Ngồi ra, FrontPage còn có khả đặc biệt tự động tạo thumbnail (ảnh đại diện nhỏ ảnh gốc) để tăng tốc độ hiển thị xem trang web - Chèn ảnh: Di chuyển trỏ đến nơi cần đặt ảnh, mở menu Insert/ Picture/From File, chọn file ảnh rời bấm OK Bạn chọn ảnh kho FrontPage cách mở menu Insert/Picture/Clip Art/Clip Organizer hay truy cập vào kho ảnh Microsoft internet (Insert/Picture/Clip Art/Clips Online) -Tạo Thumbnail: Bấm chuột vào ảnh rồi bấm chuột vào biểu tượng Auto Thumbnail công cụ, hay bấm phím phải chuột vào ảnh rời chọn lệnh Auto Thumbnail menu rút gọn FrontPage sẽ thay ảnh gốc ảnh đại diện nhỏ liên kết với ảnh gốc Khi người xem bấm chuột vào ảnh đại diện, trình duyệt sẽ hiển thị ảnh ngun gớc - Tạo liên kết cho file ảnh: Bạn tạo liên kết với ảnh website, ngoại trừ thumbnail (vì thumbnail đã có liên kết với file ảnh gớc) Bấm phím phải chuột vào ảnh rời chọn lệnh Hyperlink menu rút gọn - Thay đổi kích thước ảnh: Bấm chuột vào ảnh để khung chỉnh kích thước bao quanh ảnh, bấm phím chuột vào ô vuông cạnh, giữ phím kéo chuột để thay đổi kích thước rộng hay cao tương ứng Dùng vng bớn góc để thay đổi kích thước giữ ngun tỷ lệ dọc/ngang Bạn bấm phím phải chuột vào ảnh rời chọn lệnh Picture Properties để điều chỉnh vị trí, kích thước tạo khung viền, định khoảng không gian trống bao quanh ảnh Bước 13 Nút Hover Đây thực chất Java applet tạo FrontPage nhằm làm cho website sinh động Bạn dùng nút hover để liên kết đến website hay file khác, người xem di chuyển chuột lên nút hover, nút sẽ chuyển màu hay chuyển hình thái để tạo cảm giác “nổi - Đưa trỏ đến nơi cần tạo nút hover website, mở menu Insert/Web Component, chọn Dynamic Effects/Hover Buton rồi bấm nút Finish Trong hộp thoại Hover Button Properties, bạn đặt tên cho nút (Button text), tạo liên kết (Link to), chọn màu cho nút (Button color), chọn hiệu ứng động danh sách Effect, chọn màu cho hiệu ứng (Effect color), kích thước nút (Width/Height) Bạn bấm nút Custom hộp thoại muốn định cho “chơi” nhạc di chuyển (hoặc bấm) chuột lên nút hay muốn định hai file ảnh làm nút bấm trạng thái bình thường có chuột Chú y: Bạn xem hiệu ứng nút hover trình duyệt, không xem FrontPage Bước 14 Làm văn chuyển động với HTML động FrontPage cung cấp sẵn số hiệu ứng văn động để tránh đơn điệu như: chữ rơi từng từ, rơi từng câu, bay, nhảy, cuộn sóng, - Chọn dòng văn ḿn cho chuyển động, mở menu Format/Dynamic HTML Effects Trong công cụ DHTML Effects, bạn chọn kiện (On), chọn hiệu ứng (Apply) chọn hướng chuyển động (Choose Settings) Để tháo bỏ DHTML đã có, bạn chọn Remove Effect Bước 15 Hiệu ứng chuyển trang Bạn tạo hiệu ứng đặc biệt nạp trang hay thoát trang cách vào menu Format/Page Transitions Trong hộp thoại Page Transitions, bạn chọn kiện (Event), thời gian xẩy hiệu ứng (Duration) chọn hiệu ứng danh sách, thí dụ: Blend (rõ dần), Box (hình vng nhỏ/lớn dần), Circle (hình tròn nhỏ/lớn dần), Wipe (cuộn), Random (thay đổi hiệu ứng ngẫu nhiên) Với 15 bước trên, đủ để thiết kế giảng dạng website cách hấp dẫn Có thể làm trang web phong phú với phần đồ hoạ “chuyên nghiệp” (Flash, 3D, XaraWebstyle ) hay tương tác với người dùng qua ứng dụng web, quản lý sở liệu, v.v Dựa bước Tơi đã soạn giảng điện tử Hố phân tích Bài giảng đã áp dụng giảng dạy nhiều năm đem lại nhiều hiệu tích cực Quý thầy xem minh hoạ bải giảng phần báo cáo Lời kết Microsoft frontpage công cụ đơn giản để soạn thảo giảng điện tử Tuy nhiên để có giảng tớt hồn tồn phụ thuộc vào giáo viên Phải thiết kế cho phù hợp với đối tượng giảng dạy Bài giảng điện tử phải hỗ trợ phương tiện dạy học khác cách hợp lý nhằm phục vụ cho phương pháp giảng dạy khác (diễn giảng, gợi mở, thảo luận nêu vấn đề, thảo luận nhóm, thí nghiệm trình bày, thí nghiệm nghiên cứu, …) nhằm thực tớt mục tiêu việc dạy học TÀI LIỆU THAM KHẢO [1] Thiết kế Website Micosoft Frontpage Tạp chí e-chip [2] Microsoft Office Frontpage 2003 Microsoft Corporation  ... menu Insert/Web Component/Dynamic Effects/Marquee Trong cửa sổ Marquee Properties, bạn nhập dòng văn vào Text rời bấm OK Bạn chọn chiều cuộn, tớc độ cuộn, kích thước màu cho khung cuộn cửa... chỉ tuyệt đới: Điạ đầy đủ, xác Thí dụ : “C:/web/andi/image/logo/lh3d.gif” Hay http://andi .com. vn/lh com/ index.htm” - Địa chỉ tương đối: Địa định vị theo mối quan hệ tương đối(trên, dưới,... Ngồi ra, theo mặc định trình duyệt, người xem bấm chuột vào liên kết file dạng chương trình (exe, com, zip ), hay multimedia (audio, video ) trình duyệt sẽ cho hộp thoại để bạn chọn tải file máy