2.4.2.1. Trang chủ
a. Ý tưởng thiết kế
Trang chủ là nơi mà các nội dung quan trọng nhất cần được liên kết với nhau một cách hợp lý và khoa học nhằm mục đích tạo mọi điều kiện dễ dàng cho người sử dụng nhanh chóng tra cứu được các nội dung cần xem. Bên cạnh đó trang chủ cần được thể hiện một cách sinh động và đẹp mắt để người xem không có cảm giác nhàm chán, đây cũng chính là ưu điểm của SGK điện tử mà SGK thường không có được.
1/ Banner giới thiệu tựa đề SGK điện tử và người biên soạn. 2/ Menu chứa 4 mục chính gồm các nội dung sau:
Giáo khoa: Giới thiệu hệ thống các bài trong chương 2 “Nhóm nitơ” và chương 3 “Nhóm cacbon”. Các bài được thiết kế giống nội dung trình bày trong SGK. Mỗi một bài có lý thuyết, tư liệu. Ở phần lí thuyết có hình ảnh minh họa, phim và mô phỏng thí nghiệm rất sinh động gây hứng thú học tập cho học sinh. Ở phần tư liệu có các kiến thức cuộc sống liên quan đến nội dung bài học giúp các em hiểu sâu hơn và thấy rõ vai trò của hóa học trong cuộc sống.
Phương pháp giải bài tập: Trang này cung cấp cho các em phương pháp giải bài tập của từng chương. Có nội dung từng phương pháp, bài tập mẫu và bài tập tự luyện có gợi ý giúp các em rèn luyện kĩ năng giải toán hóa học.
Bài tập: Sau khi đã xem xong phần lí thuyết ở trang Giáo khoa, rèn luyện kĩ năng giải toán trong trang phương pháp giải bài tập, HS có thể vận dụng kiến thức, kĩ năng để làm các bài tập trắc nghiệm. Mỗi câu hỏi đều có đáp án, giúp HS có thể kiểm tra bài làm dễ dàng và nhanh chóng. Cuối cùng HS có thể kiểm tra kiến thức đã lĩnh hội được bằng cách hoàn thành các đề kiểm tra trắc nghiệm. Sau
khi làm xong máy sẽ tự chấm điểm giúp cho HS tự đánh giá được kết quả học tập của mình.
Hóa học vui: Gồm đố vui hóa học, ảo thuật hóa học và game giúp HS vừa học vừa giải trí với những kiến thức bổ ích, hấp dẫn.
3/ Nội dung giới thiệu: Lời mở đầu giới thiệu e-book. 4/ Menu chứa 3 mục phụ gồm các nội dung sau:
Liên hệ: Cung cấp họ tên và địa chỉ liên lạc của người thiết kế e-book. Trợ giúp: Giới thiệu cấu trúc và hướng dẫn cách sử dụng e-book. Bảng tuần hoàn: Giúp các em tra cứu dễ dàng khi sử dụng.
b. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript 2.0 (ngôn ngữ kịch bản)
Trình tự các bước thiết kế:
- Thiết kế giao diện tổng thể bằng Photoshop.
- Thiết kế banner bằng Photoshop (hình ảnh) và Flash CS3 (chuyển động).
Dùng Photoshop chuẩn bị các hình ảnh cần thiết để sử dụng như hình nền, các hình text tựa đề.
Trên các layer chèn các hình ảnh đã chuẩn bị vào và sử dụng các kỹ thuật của Flash như MotionTween và Mask Layer để tạo được các hiệu ứng như mong muốn.
- Thiết kế menu các nút bấm bằng Photoshop (hình ảnh) và Flash CS3.
Chèn hình nút bấm “Giáo khoa” vào Flash, nhấp chuột phải vào hình chọn “Covert to symbol” chọn loại symbol là MovieClip và đặt tên là bt_mc_sgk, sau đó kéo symbol bt_mc_sgk vừa tạo trong Library ra Stage, đặt đúng vị trí cần hiển thị và đặt tên instance name là “bt_sgk”.
Tạo 1 MovieClip có kích thước 900x368px, có tên là loader và có instance name là loaderM.
Thực hiện các thao tác tương tự cho các nút còn lại và thay đổi tên instance name của movieclip loader lần lượt như sau “loaderM2”, “loaderM3”, “loaderM4”.
Viết mã lệnh vào các nút để tải được nội dung các file SWF vào movieclip loaderM như sau:
* Nút “GIÁO KHOA”
loaderM.loadMovie("sgk_mucluc.swf");
loaderM2.unloadMovie("pp_giaibaitap.swf"); loaderM3.unloadMovie("baitap.swf");
loaderM4.unloadMovie("hoahocvui.swf"); * Nút “PHƯƠNG PHÁP GIẢI BÀI TẬP”
loaderM2.loadMovie("pp_giaibaitap.swf"); loaderM.unloadMovie("sgk_mucluc.swf"); loaderM3.unloadMovie("baitap.swf"); loaderM4.unloadMovie("hoahocvui.swf"); *Nút “BÀI TẬP” loaderM3.loadMovie("baitap.swf"); loaderM.unloadMovie("sgk_mucluc.swf");
loaderM2.unloadMovie("pp_giaibaitap.swf"); loaderM4.unloadMovie("hoahocvui.swf"); *Nút “HÓA HỌC VUI” loaderM4.loadMovie("hoahocvui.swf"); loaderM.unloadMovie("sgk_mucluc.swf"); loaderM3.unloadMovie("baitap.swf"); loaderM2.unloadMovie("pp_giaibaitap.swf"); *Nút “Liên hệ” bt_lienhe.onRollOver = function () { lienhe._alpha = 100;}; bt_lienhe.onRollOut = function () {lienhe._alpha = 0;}; *Nút “Trợ giúp” trogiup.onPress = function(){getURL("trogiup.html","_blank");} *Nút “Bảng tuần hoàn” bangtuanhoan.onPress = function(){getURL("bangtuanhoan.html","_blank");}
2.4.2.2. Trang “GIÁO KHOA” a. Ý tưởng thiết kế
Trang “GIÁO KHOA” có chức năng liệt kê tất cả các bài học sẽ có trong SGK nhằm mục đích cho người xem nắm bắt được nội dung toàn bộ SGK một cách tổng quát nhất. Nhiệm vụ chính của trang “GIÁO KHOA” là chuyển đổi nhanh chóng nội dung của các bài có trong SGK qua sự tương tác của người sử dụng. Nếu có nhiều nội dung tựa bài so với màn hình thể hiện, sẽ có chức năng “scroll” màn hình để thấy được nội dung các bài bên dưới.
b. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngôn ngữ kịch bản)
Trình tự các bước thiết kế:
- Thiết kế giao diện tổng thể bằng Photoshop.
- Thiết kế các chức năng trang “GIÁO KHOA” bằng Flash. - Trong Flash tạo các layer tương ứng như hình mô tả.
- Action Layer dùng để viết các mã lệnh điều khiển.
- Layer “msk” dùng để chứa 01 movieclip có instance name là “msk” kích thước 835x360, có chức năng chỉ cho phép xem nội dung trong vùng kích thước này, vùng nội dung bên ngoài kích thước này sẽ không thấy được.
- Layer “content” chứa 1 movieclip có instance name là “content” chứa nội dung (là các tựa bài trong sách giáo khoa).
- Layer “scroller” chứa 01 movieclip có instance name là “scroller” chức năng giúp người dùng điều khiển nội dung bên trong lên xuống tùy theo nhu cầu xem nội dung.
- Layer “scroller_bg ” chứa hình nền có chiều dài giới hạn cho việc kéo xuống của người dùng.
- Vào frame 1 của Action Layer sử dụng đoạn code sau để điều khiển các thành phần làm việc đúng chức năng và trùng khớp với nhau.
- Sử dụng lệnh loadMovie cho các nút nhấn là tiêu đề các bài để hiện nội dung các file SWF đã được thiết kế sẵn (bai09.swf đến bai24.swf) và lệnh unloadMovie để làm ẩn nội dung của file “sgk_mucluc.swf”.
2.4.2.3. Trang “Nội dung sách giáo khoa” a. Ý tưởng thiết kế
Trang “Nội dung” có chức năng và nhiệm vụ thể hiện nội dung của bài theo các mục lớn tương ứng với SGK, nội dung các mục lớn này có thể nhanh chóng chuyển đổi với nhau nhờ hệ thống menu bên trái, SGK có bao nhiêu bài thì sẽ có bấy nhiêu trang “Nội dung” tương ứng đi kèm. Trong trang nội dung gồm phần lý thuyết, tư liệu. Phần lý thuyết được soạn thảo dựa vào nội dung của SGK nhưng có thêm nhiều hình ảnh minh hoạ phong phú, phim thí nghiệm sinh động, các mô phỏng flash hấp dẫn, tăng tính trực quan và hứng thú cho các em. Phần tư liệu là các kiến thức cuộc sống liên quan đến nội dung bài học. Khi xem sẽ mở ra một trang html mới chứa nội dung phim ảnh.
Lấy “Bài 11: Amoniac và Muối Amoni” làm mẫu, trang này được trình bày thiết kế như sau :
b. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngôn ngữ kịch bản)
Trình tự các bước thiết kế:
- Thiết kế các chức năng trang “Nộidung” bài 11 bằng Flash. - Trong Flash tạo các layer tương ứng như hình mô tả:
+ Action Layer dùng để viết các mã lệnh điều khiển.
+ Frame Name dùng để đánh dấu frame từ “f1” đến “f9” , tùy theo nội dung của các mục lớn trong từng bài sẽ có số frame tương ứng, cụ thể trong trường hợp bài này ta có 09 nội dung cần thể hiện nên cần 09 frame khác nhau, mỗi frame mang một nội dung đã được định trước đặt tại layer “content”.
+ Layer “tieude” dùng để chứa các tiêu đề “A: Amoniac” & “B: Muối Amoni”. + Layer “button” chứa 09 button ở menu bên trái, có ten instance name lần lượt là “bt1” đến “bt9”.
+ Layer “line”chứa hình đường phân cách giữa phần menu trái và nội dung. + Layer “content” chứa 08 movieclip đều có instance name là “content” chứa 08 nội dung khác nhau, nội dung bao gồm hình ảnh, văn bản, phim và các file flash minh họa cho bài học.
+ Vào frame 1 của Action Layer sử dụng đoạn code sau để điều khiển khi nhấn các nút bên menu trái sẽ đến được frame nội dung mong muốn.
- Chuyển đến giai đoạn thiết kế các frame nội dung.
Nhấp 2 lần vào frame 1 layer content để thấy cấu trúc movieclip “content”. - Frame nội dung chứa movieclip “content” có các layer như hình mô tả:
Tương tự như trang SGK, nếu nội dung dài hơn màn hình thể hiện sẽ có thanh cuộn để kéo nội dung lên xuống.
Nhấp tiếp 02 lần vào frame trên layer “content” vào cấu trúc của phần nội dung chính.
- Nội dung chính gồm có 04 layer như hình trên. - Layer AS chứa lệnh điều khiển.
- Layer “swf” chứa movieclip loadMovie có tên instance name là “loadswf”, có nhiệm vụ thể hiện các file flash minh họa đã đuợc để sẵn ở thư mục bên ngoài vào màn hình.
- Layer “video” chứa các đối tượng có nhiệm vụ thể hiện các file film FLV.
- Layer “noidungchinh” là hình ảnh chứa nội dung văn bản của bài học. * Để load các file flash minh họa vào ta dùng lệnh sau:
* Để chèn phim FLV vào ta kéo đối tượng từ Library vào
Sau đó nhấn Shift+F7 để mở bảng Component Inspector và chỉnh sửa lại 02 thông số như sau:
Làm tương tự cho các frame nội dung còn lại.
Hoàn tất phần thiết kế trang “Nộidung” cho “Bài 11: Amoniac và Muối Amoni”.
Tiếp tục làm cho đến hết các bài có trong SGK.
2.4.2.4. Trang “PHƯƠNG PHÁP GIẢI BÀI TẬP” a. Ý tưởng thiết kế
Trang “PHƯƠNG PHÁP GIẢI BÀI TẬP” có chức năng và nhiệm vụ tương tự như trang “GIÁO KHOA”, có một chút khác biệt so với trang “GIÁO KHOA” là những nút nhấn của trang “PHƯƠNG PHÁP GIẢI BÀI TẬP” sẽ mở ra cửa sổ mới các trang html được thiết kế sẵn, Trang “PHƯƠNG PHÁP GIẢI BÀI TẬP” được thiết kế như sau:
b. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngôn ngữ kịch bản)
Trình tự các bước thiết kế:.
- Trong Flash tạo các layer tương ứng như hình mô tả.
- Action Layer dùng để viết các mã lệnh điều khiển.
- Layer “msk” dùng để chứa 01 movieclip có instance name là “msk” kích thước 835x360, có chức năng chỉ cho phép xem nội dung trong vùng kích thước này, vùng nội dung bên ngoài kích thước này sẽ không thấy được.
- Layer “content” chứa 1 movieclip có instance name là “content” chứa nội dung (là các phương pháp giải bài tập). Mỗi một button là một nội dung tương ứng khi bấm vào.
- Tương tự Layer “scroller” chứa 01 movieclip có instance name là “scroller” chức năng giúp người dùng điều khiển nội dung bên trong lên xuống tùy theo nhu cầu xem nội dung.
- Sử dụng lệnh getURL cho các nút nhấn là tiêu đề các bài để hiện nội dung các file html đã được thiết kế sẵn (đặt tại các thư mục pp2 & pp3) để mở cửa sổ mới chứa nội dung của file html đó.
.
- Hoàn tất phần thiết kế trang “PHƯƠNG PHÁP GIẢI BÀI TẬP ”.
2.4.2.5. Trang “BÀI TẬP” a. Ý tưởng thiết kế
Trang “BÀI TẬP” có chức năng và nhiệm vụ tương tự như trang “PHƯƠNG PHÁP GIẢI BÀI TẬP”, trang này được trình bày thiết kế như sau :
b. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngôn ngữ kịch bản)
Trình tự các bước thiết kế:
- Thiết kế các chức năng trang “BÀI TẬP ” bằng Flash. - Trong Flash tạo các layer tương ứng như hình mô tả.
+ Action Layer dùng để viết các mã lệnh điều khiển.
+ Layer “msk” dùng để chứa 01 movieclip có instance name là “msk” kích thước 835x360, có chức năng chỉ cho phép xem nội dung trong vùng kích thước này, vùng nội dung bên ngoài kích thước này sẽ không thấy được.
+ Layer “content” chứa 1 movieclip có instance name là “content” chứa nội dung (bao gồm các nội dung trong trang). Mỗi một nội dung tương ứng với một nút. + Tương tự Layer “scroller” chứa 01 movieclip có instance name là “scroller” chức năng giúp người dùng điều khiển nội dung bên trong lên xuống tùy theo nhu cầu xem nội dung.
+ Sử dụng lệnh getURL cho các nút nhấn là tiêu đề các bài để hiện nội dung các file html đã được thiết kế sẵn (đặt tại các thư mục bt2 & bt3) để mở cửa sổ mới chứa nội dung của file html đó.
Hoàn tất phần thiết kế trang “BÀI TẬP ”.
2.4.2.6. Trang “HÓA HỌC VUI” a. Ý tưởng thiết kế
Trang “HÓA HỌC VUI” có chức năng và nhiệm vụ tương tự như trang “PHƯƠNG PHÁP GIẢI BÀI TẬP”, trang này được trình bày thiết kế như sau:
b. Thể hiện ý tưởng bằng Adobe Photoshop CS3 và Adobe flash CS3 + ActionScript2.0 (ngôn ngữ kịch bản)
Trình tự các bước thiết kế:
- Thiết kế giao diện tổng thể bằng Photoshop.
- Thiết kế các chức năng trang “HÓA HỌC VUI” bằng Flash. - Trong Flash tạo các layer tương ứng như hình mô tả.
+ Action Layer dùng để viết các mã lệnh điều khiển.
+ Layer “bt” chứa các nút, mỗi một nút chứa một nội dung (là các nội dung trong các trang html).
+ Layer “bg” chứa hình nền của trang.
. - Sử dụng lệnh getURL cho các nút nhấn là tiêu đề các bài để hiện nội dung các file html đã được thiết kế sẵn để mở cửa sổ mới chứa nội dung của file html đó.
Hoàn tất phần thiết kế trang “HÓA HỌC VUI”.
2.4.2.7. Dùng Dreamweaver và Swf text để thiết kế trang html a. Dùng Dreamweaver và Swf text để thiết kế trang “trắc nghiệm”
- Do cấu trúc gần như tương tự trang “tư liệu” nên từ trang “tư liệu” chọn File > Save As và lưu lại với tên là 1.html trong folder “ Trắc nghiệm chương 2”. Từ trang “Tư liệu” mới tạo chỉnh sửa nội dung cho phù hợp.
- Tiêu đề “Trắc nghiệm chương 2” được tạo bằng phần mềm Swf text. - Thiết kế bài trắc nghiệm bằng phần mềm Course Builder:
Đặt con trỏ tại vị trí muốn đặt câu hỏi. Chọn Insert > CourseBuilder Interaction. Chọn Multiple Choice chọn loại 3.
Ghi trực tiếp nội dung của từng câu và 4 sự lựa chọn.
Sau đó click vào nút đỏ để chọn toàn bộ câu. Tiến hành Edit từng câu.
+ Chọn Multiple Choice → chọn loại 1. Khi đó xuất hiện 4 tab là: Gallery, General, Choices, Action Mgr.
+ ChọnGeneral.
Ví dụ làm câu 1
Interaction name: cau1
Chọn câu A là câu đúng click chuột vào choice1 và chọn correct trong mục Choice Is đối với các câu khác ta chọn Incorrect
+ Chọn Action Mgr
Trong phần If Correct, nhấp chuột chọn Popup Message sau đó chọn Edit, ghi nội dung máy sẽ báo khi người làm chọn đáp án đúng, ví dụ: Câu 1 đúng.
Làm tương tự với phần else If Correct (khi người làm chọn đáp án sai) và esles If Unknown Response (khi người làm bỏ trống câu đó).
Làm tương tự đối với các câu còn lại.
b. Dùng Dreamweaver và Swf text để thiết kế trang bài kiểm tra
Tiến hành tương tự như trang trắc nghiệm. Điểm khác là có tính điểm và thời gian + Trong thẻGeneral
Judge Interaction: chọn On a specific event (set using the Judge Interaction Behavior).
Trong thẻ Choices
Chọn câu A là câu đúng click chuột vào choice1 và chọn correct trong mục Choice Is đối với các câu khác ta chọn Incorrect, điểm câu đúng ghi 1 và câu sai ghi 0 vào mục Score.
+ Thẻ Action Mgr: làm tương tự như trên Sau khi làm xong 25 câu, ta thiết kế kết quả:
Đặt tên trong mục Interaction Name. Trong Judge Interaction, chọn “when the user clicks a button labelled”, ghi vào ô trống “Kết quả”.
Chọn Action Mgr. Chọn Segment, click nút Add và ghi vào ô