2.3.1. “Trang chủ”
Hình 2.3. Giao diện Trang chủ
Trang chủ (TrangChu.html) là tập tin được mở ra khi bạn nhắp chuột vào nút trên tập tin autorun.exe (tự động mở ra khi cho đĩa CD E-book vào ổ đĩa), hay nếu bạn vào E-book bằng cách mở trên ổ đĩa cứng máy tính của bạn. Đây là nơi chứa liên kết đến các trang khác trong E-book. Trang chủ được thiết kế như sau: Thanh tựa đề (banner): Thiết kế bằng phần mềm Sothink Glanda.
Tựa đề Nội dung Thông tin tác giả Phim trang chủ Nút nhấn liên kết
-61-
- Mở chương trình Sothink Glanda vào cửa sổ làm việc, nhấp chọn Banner và OK, chọn khuôn mẫu SunShine > next > next > finish.
- Điều chỉnh kích thước phim theo mong muốn (Modify >Movies Properties), nhập lại (Width:1000; Height:120) > OK.
- Thay hình nền, nhấp chọn hình nền của khuôn mẫu và nhấn phím delete trên bàn phím, nhấp chuột vào Import > Fit to movie > OK để thêm hình nền mới vào. - Đổi chữ tựa đề, nhấp vào biểu tượng chữ T trong thẻ Tools của thanh công cụ (View > Tools), chọn kiểu chữ, cỡ chữ, màu chữ hay các định dạng khác như mong muốn.
- Thêm hình động vào phim, chọn thẻ Files trên thanh công cụ, chọn đường dẫn đến tập tin có chứa các hình động đã được thiết kế trên file.swf. Nhấp vào dấu “+” trước tên tập tin/chọn thư mục movieclips/nhấp vào hình muốn chèn rồi kéo, thả vào vị trí thích hợp trên phim.
- Chạy thử phim, nhấp chuột vào trên thanh công cụ.
- Xuất tập tin dưới dạng file.swf, nhấp chuột vào trên thanh công cụ, đặt tên tuaWeb_chinh.swf, chọn đường dẫn myEbook/film để lưu phim.
Phim trang chủ: Thiết kế bằng Proshow Producer.
- Mở chương trình Proshow Producer vào cửa sổ làm việc, trên cửa sổ Folder List chọn thư mục chứa hình ảnh cần chèn vào phim, nhấp chọn từng hình ảnh ở cửa sổ bên dưới rồi kéo và thả vào từng slide ở cửa sổ Slide List.
- Thêm hiệu ứng chuyển cảnh cho hình ảnh, nhấp chuột vào ở giữa các slide, chọn hiệu ứng như mong muốn.
- Thêm nhạc cho phim, nhấp chuột phải vào khung SoundTrack chọn Manage Soundtracks > > Add Sound file, rồi chọn nhạc như ý.
-62-
- Xuất bản phim, nhấp chọn , chọn kiểu file muốn xuất. Ở đây, chọn Flash: Menus/no menus; Shows/bỏ chọn Include Intro Show; Output Options/ mặc định, sau đó nhấp chọn Create, chọn thư mục đường dẫn myEbook/film và đặt tên tập tin (filmChinh.swf)/Save.
Lưu ý: chương trình tự tạo thêm một tập tin khác là fimChinh-show0.flv. Nút liên kết: Thiết kế bằng Crystal Button 2007.
- Mở chương trình vào cửa sổ làm việc, chọn thẻ Smooth 2, nhấp chọn nút mong muốn.
- Viết chữ lên nút, nhấp vào biểu tượng , định dạng chữ như ý muốn.
Hình 2.4. Cửa sổ làm việc Crystal Button- định dạng chữ cho nút liên kết - Thay đổi kích thước nút, nhấp vào , chọn các thuộc tính
-63-
Hình 2.5. Cửa sổ làm việc Crystal Button- thay đổi kích thước nút liên kết - Xuất nút nhấn, File/Export Button Image, chọn thư mục myEbook/image, chọn định dạng file là .png hay .jpg và đặt tên file là BH1. png.
- Tiến hành làm tương tự đối với các file BH2.png, BT1.png, BT2.png, …, HD1.png, HD2.png.
Giao diện chính: Thiết kế bằng Macromedia Dreamweaver 8.
- Mở chương trình, Start >Macromedia Dreamweaver 8 trên trang khởi động ở ngăn Create from Samples nhấp chọn Page Design (CSS), chọn kiểu trang, nhấp Create.
-64-
- Chỉnh sửa lại bố cục trang, màu sắc của các thẻ div (masthead, content, info) như mong muốn.
- Tạo tựa đề web, nhấp chọn thẻ div masthead, Insert/Media/Flash/tuaWeb_chinh.swf.
- Chèn hình nền cho trang chủ, nhấp chọn div content, chọn Windows > CSS styles > Curent > background-image/duocsach.png,
> background-color: #D9FFD9.
- Chèn phim chính vào, Insert > Layer Objects > Layer, sau đó Insert > Media > Flash, chọn filmChinh-show0.flv, kéo layer về vị trí mong muốn.
- Chèn các nút liên kết, Insert > Layer Objects > Layer, rồi Insert > Image Objects > Rollover Image, nhấp Browse chọn BH1.png (Original image) và BH2.png (Rollover image), tiếp tục nhấp Browse chọn baiHoc.html (When clicked, Go to URL) > OK. Làm tương tự cho các nút nhấn liên kết khác.
- Chèn thêm các chữ động vào vùng content, Insert > Image. - Tương tự, chèn Rollover Image cho thẻ div info, sửa lại chữ. - Lưu tập tin là TrangChu.html trong thư mục myEbook/site.
2.3.2. Trang “Giới thiệu”
- “Giới thiệu” là trang để giới thiệu về Sách điện tử và Tác giả. Bố cục tương tự như Trang chủ nên ta chỉ cần File > Save as đặt tên là GioiThieu.html.
-65-
Hình 2.7. Giao diện trang Giới thiệu - Thanh tựa đề “Giới thiệu” thiết kế bằng Sothink Glanda.
- Insert > Table để chèn bảng, gõ chữ Sách điện tử và Tác giả vào từng cột, sau đó chèn hình ngôi sao Insert > Image Objects > Rollover Image.
- Dùng Sothink Glanda để thiết kế GTSDT.swf và GTTG.swf. Vào cửa sổ làm việc File > New (Blank Document), import hình nền, gõ chữ, thêm hiệu ứng cho chữ. Nhấp chuột phải vào cửa sổ scene 1 > Add scene. Làm tương tự để thêm các scene 2, 3, … Để cho tập tin ở chế độ trình chiếu tự động: diễn hết scene này rồi
-66-
chuyển sang scene kế tiếp, chọn scene, chuột phải, Properties > Action > Exit scene > Goto scene, chọn scene kế tiếp trong phim trình chiếu.
- Tạo hành động cho chữ Sách điện tử, Tác giả để khi nhấn vào chữ nào thì nội dung hiển thị là tập tin tương ứng. Nhấp chọn chữ, trong mục Properties > Link đặt dấu #. Mở Windows >Behaviors >onClick >Show-hide layer, hide layer 1 (chứa GTSDT.swf) và unhide layer 2 (chứa GTTG.swf), làm tương tự nhưng chọn ngược lại cho chữ Tác giả.
2.3.3. Trang “Hướng dẫn”
- File > Save as từ tập tin GioiThieu.html và đặt tên là HuongDan.html. - Xóa table, layer 2, chèn tập tin HD.swf vào layer 1.
-67-
- Tạo tập tin HD.swf bằng chương trình CamStudio. Khởi động chương trình vào cửa sổ làm việc, nhấn chọn nút (record), mở sách điện tử ra và thực hiện những thao tác để giới thiệu sách. Khi hoàn tất nhấn nút , chọn đường dẫn myEbook/film, lưu file (có thể lưu ở dạng file.avi).
- Tạo nút nhấn liên kết bằng Adobe Photoshop CS. Mở cửa sổ làm việc của chương trình, mở một tập tin mới (ctrl+N), kích thước 100/100, nền white.
+ Dùng công cụ Eliptical Maquee tool, tạo 1 layer mới (Ctrl+Shift+N), sau đó vẽ 1 vòng tròn và tô màu xanh cho nó.
+ Tạo tiếp 1 layer nữa, sau đó vẽ 1 hình elip như hình 2.9.
+ Chọn công cụ Gradient, màu trước là màu trắng, loại màu Gradient từ trắng đến mờ dần. Kích chuột vào điểm trên của quả cầu và kéo xuống dưới tâm.
+ Tiếp tục tạo 1 layer mới, và vẽ 1 hình elip nhỏ ở phía dưới.
+ Chọn công cụ Brush (B), tô vào vùng elip như hình 2.10. + Vào Fiter >Blur > Gausian Blur, thông số Radius:
25.4.
+ Chọn công cụ Gradient, màu trước là màu đen – dải màu từ đen đến mờ dần. Sau đó kéo từ trên xuống dưới như hình 2.11.
Hình 2.9. Cửa sổ làm việc PS – vẽ hình elip
-68-
+ Chọn chế độ hòa trộn cho layer 3 là Overlay.
+ Mở tập tin home.png, sao chép hình ngôi nhà và dán vào lớp mới (layer 4), kéo layer 4 xuống dưới layer 2 như hình 2.12.
Hình 2.12. Thao tác cuối cùng tạo nút nhấn liên kết
+ Lưu tập tin (File>Save as) với tên home.png trong thư mục myEbook/images.
2.3.4. Trang “Bài học”
Trang này gồm các bài học được cấu trúc như sách giáo khoa. Nội dung từng bài được chia thành các mục lớn để tiện theo dõi, có kèm theo phim và hình ảnh minh họa.
- Dùng CSS trong Macromedia Dreamweaver để tạo bố cục cho trang Bài học (tương tự cách làm trang Giới thiệu). Chỉnh sửa lại bố cục như mong muốn.
-69-
Hình 2.13. Giao diện trang Bài học
- Tựa đề web và tựa bài học được thiết kế bằng Sothink Glanda.
- Các nút nhấn liên kết là các quả cầu pha lê được thiết kế bằng Adobe Photoshop CS.
-70-
+ Khởi động chương trình Easy Button & Menu Maker vào cửa sổ làm việc. Nhấp chọn thẻ Menu Templates, chọn kiểu thể hiện cho thực đơn.
+ Nhấn Add Item, gõ chữ lên thực đơn, định dạng chữ như ý muốn. + Nhấn Add Submenu tạo menu cấp con.
+ Khi hoàn tất thực đơn, nhấn Insert into Web Page >Next, đặt tên cho thư mục chứa thực đơn. Sao chép mã lệnh và dán vào vị trí mong muốn trên trang web đang thiết kế.
- Nội dung bài học được thiết kế bằng Macromedia Flash 8: + Khởi động Flash > Flash Slide Presentation.
+ Gõ nội dung bài học và chèn hình ảnh, phim vào từng slide 1, 2, … + Chèn các nút liên kết được làm bằng Crystal Button vào từng slide.
+ Tạo hành động cho các nút liên kết, nhấp chọn nút, Window/Behaviors, nhấn nút “+” (Add behavior), Screen > Go to Next Screen hoặc Go to Previous Screen cho nút “Tiếp tục” và nút “Quay lại”.
2.3.5. Trang “Bài tập”
Gồm các bài tập đi kèm theo mỗi bài học (trừ hai bài thực hành 36, 37). Được chia làm 3 phần chính: bài tập giáo khoa, bài tập làm thêm, bài tập kiểm tra. Bên cạnh đó còn có một số phương pháp để giải nhanh bài tập trắc nghiệm và một ngân hàng câu hỏi tự luận và trắc nghiệm cho các bạn tham khảo.
- Cách tạo bố cục, tựa đề, các nút liên kết, thanh thực đơn, nội dung bài tập tương tự như trang Bài học.
-71-
Hình 2.14. Giao diện trang Bài tập
- Các bài tập kiểm tra trắc nghiệm sau mỗi bài được tạo bằng chương trình Macromedia Flash 8.
-72-
+ Nhấp vào layer Interactions, xóa bỏ các frame chỉ giữ lại frame đầu, frame cuối và frame có chứa Multiple Choice Interaction. Thêm các frame giữa (nhấp chuột phải > Insert Frame) cho đủ số lượng câu hỏi trắc nghiệm.
+ Chỉnh sửa lại frame đầu và cuối như ý muốn.
+ Nhấp chuột phải vào nội dung frame giữa, chọn Break Apart.
+ Nhấp chọn Multiple Choice Interaction ở bên trái, vào Window >Component Inspector (Alt+F7). Điền các thông tin vào các thẻ Start, Options, Assets như hình sau:
Thẻ Start
-73-
Interaction ID tương ứng với thứ tự của câu hỏi trong bài kiểm tra. Chọn Correct ở Checkbox1 nếu đáp án là câu A.
Thẻ Options
Hình 2.16. Điền thông tin tạo câu hỏi trắc nghiệm trên thẻ Option
-74-
Hình 2.17. Điền thông tin tạo câu hỏi trắc nghiệm trên thẻ Assets
+ Trở lại màn hình Flash, gõ câu hỏi và câu trả lời tương ứng với các checkbox đã được tạo.
+ Làm tương tự với các frame còn lại ứng với các câu hỏi tiếp theo.
+ Sau khi hoàn tất bài kiểm tra, nhấn ctrl+s, rồi ctrl+enter để xuất phim, chép phim vào thư mục myEbook/film.
- Các bài kiểm tra tổng hợp được tạo bằng Articulate Quizmaker '09.
+ Nhấn vào trong cửa sổ làm việc của chương trình để bắt đầu tạo câu hỏi 1. Nhập nội dung câu hỏi; nội dung câu trả lời và nhấn chọn trước đáp án đúng;
-75-
chọn điểm cho mỗi đúng là 1, câu sai là 0; gõ câu thông báo khi người tham gia trả lời đúng hay sai (như hình 2.18).
Hình 2.18. Cửa sổ tạo câu hỏi trắc nghiệm bằng Articulate Quizmaker '09 + Nhập xong, nhấn Save & Close để lưu câu hỏi, làm tương tự với các câu hỏi tiếp theo.
-76-
Hình 2.19. Cửa sổ tạo thuộc tính cho bài kiểm tra bằng Articulate Quizmaker '09 + Xuất (Publish) tập tin ra dưới dạng web, chép cả thư mục lưu trữ vào thư mục bài tập.
2.3.6. Trang “Tư liệu”
Đây là trang bổ sung thêm các kiến thức ngoài bài học trong sách giáo khoa. Cấu trúc trang gồm 4 phần chính: Hình ảnh về kim loại, Đặc tính của kim loại, Chuyện kể về kim loại, Chuyện kể về nhà bác học.
Tên tập tin sẽ xuất
Thời gian làm bài Số % điểm cần đạt
-77-
Hình 2.20. Giao diện trang Tư liệu
- Cách tạo bố cục trang, tựa đề, các nút nhấn liên kết, thanh thực đơn, chèn hình ảnh, nội dung các mục tương tự như trang Bài tập. Ở đây chúng tôi chỉ trình bày hai chỗ khác biệt:
-78-
Nội dung phần Đặc tính của kim loại được tạo bằng chương trình Macromedia FlashPaper.
Kể chuyện về kim loại hay Kể chuyện về nhà bác học được tạo bằng FLIP Flash Album Deluxe.
Tạo tập tin dacTinh_Li.swf bằng Macromedia FlashPaper.
+ Khởi động Macromedia FlashPaper, vào cửa sổ làm việc. Đồng thời mở thư mục có chứa tập tin TSVL_Li.doc, nhấp chuột trái vào tên tập tin này rồi kéo thả vào vùng làm việc của FlashPaper.
+ Nhấp chuột vào Save as Macromedia Flash trên thanh tác vụ, chọn đường dẫn đến thư mục myEbook/film, rồi đặt tên tập tin như trên.
Tạo keVeKL.swf bằng FLIP Flash Album Deluxe.
+ Vào cửa sổ làm việc của FLIP Flash Album Deluxe > Add Photos, chọn hình ảnh muốn đưa vào câu chuyện.
+ Nhấp chọn thẻ Cover Pg, gõ tên cuốn sách và tác giả vào khung Title và Desc. Add Flash Color Page để chọn định dạng cho bìa sách.
+ Chọn thẻ End Pg, làm tương tự như trên.
+ Chọn thẻ Page Info để gõ số trang, chủ đề chuyện.
+ Thẻ Advance, để chọn chất lượng hình ảnh, khuôn mẫu cho sách.
+ Lưu tập tin, xem thử phim (Preview), và xuất phim (Export Flash Album) vào thư mục myEbook/film.
2.3.7. Trang “Vui học”
Là trang với giao diện vui nhộn, chứa các thông tin bổ ích, giúp các em học sinh có thể vừa học, vừa chơi và thư giãn sau khi học bài và làm bài tập. Cấu trúc trang có 4 phần chính: Đố vui, Tìm từ, Thử tài, Giải trí.
-79-
Hình 2.21. Giao diện trang Vui học
- Các nội dung trong trang được thiết kế tương tự như các trang ở phần khác. Riêng chỉ có trò chơi ô chữ (Tìm từ) được tạo bằng phần mềm EclipseCrossword, cách tạo như sau:
-80-
+ Vào cửa sổ làm việc gõ các từ sẽ là đáp án vào khung Word, câu hỏi cho từ đó vào khung Clue for this word, rồi Add word to list.
+ Khi hoàn thành tất cả các từ nhấp chọn Next, chọn thư mục, đặt tên để lưu đáp án và câu hỏi.
+ Trong cửa sổ “What would you like to call this crossword puzzle?”, gõ tên “Ochu1” vào khung Name of this crossword (có thể gõ tên tác giả vào khung Your name), chọn Next > Next, nhấp chuột vào “Make another puzzle like this one” để chọn cách thể hiện ô chữ, nhấp Next > Save crossword, đặt tên để lưu ô chữ.
+ Nhấp chọn thẻ Save as a web page > Interaction with JavaScript đặt tên cho tập tin là oChu1.html.
+ Mở tập tin oChu1.html bằng Dreamweaver, ở chế độ làm việc Code, sao chép đoạn mã lệnh và dán vào trang timTu.html.
+ Thoát khỏi chương trình tạo ô chữ (Close) và hoàn tất công việc.
2.4. Hướng dẫn sử dụng E-book
- Nếu mở E-book từ đĩa cứng trên máy tính của bạn, chọn thư mục myEbook/ site, nhấp đúp chuột vào tập tin TrangChu.html để vào Trang chủ. (Nếu trình duyệt web của bạn đang ở chế độ bảo vệ, chương trình sẽ khóa tập tin lại,
bạn nhấp chuột trái lên
hộp thoại này và nhấp chọn Allow Blocked Content...)
Từ Trang chủ, bạn nhấp chuột vào nút nhấn liên kết để xem phim hướng dẫn sử dụng E-book.
- Còn nếu chạy trên đĩa CD, khi cho đĩa CD vào ổ đĩa, chương trình sẽ tự động chạy tập tin autorun.exe và từ đó bạn mở Trang chủ ra, làm tương tự như trên để