2.4.2.1. Thiết kế trang chủ
a. Ý tưởng thiết kế
Trang chủ là giao diện chính của ebook, thể hiện tiêu đề của ebook và đề mục chứa nội dung bên trong. Ở đây, người đọc cĩ một cái nhìn tổng quát nhất về tồn bộ cấu trúc của ebook, đồng thời lựa chọn được nội dung mà mình cần tìm hiểu. Từ trang chủ, người đọc cĩ thể đến các trang con bằng cách click chuột vào tiêu đề của nĩ. Các trang con của trang chủ gồm:
Giáo khoa: Giới thiệu hệ thống các bài học trong chương “Nguyên tử” và chương “Bảng tuần hồn các nguyên tố hĩa học- định luật tuần hồn”. Các bài được thiết kế theo nội dung sách giáo khoa. Cĩ kèm theo bài tập và phương pháp giải sau mỗi bài học. Trong các bài học lí thuyết cĩ kèm theo các mơ hình động về các thí nghiệm hoặc các mẫu nguyên tử minh họa, được thiết kế trên nền flipping bookvới hiệu ứng đẹp mắt hấp dẫn người đọc.
Bài tập: Sau khi đã lĩnh hội được các kiến thức giáo khoa trong từng
chương, người đọc cĩ thể vận dụng vào việc giải các bài tập ở trong chương đĩ. Mỗi chương cĩ một sách bài tập riêng kèm theo phương pháp giải của từng bài. Người đọc cĩ thể kiểm tra lại kết quả của mình hoặc tham khảo phương pháp giải khi nhấn vào nút “hướng dẫn” bên dưới mỗi bài tập.
Liên hệ
Sơ lược về
tác giả Hướng dẫn sử dụng GV khi sử Gợi ý cho dụng ebook
Gợi ý cho HS khi sử dụng ebook
Trắc nghiệm: Kết thúc mỗi chương, người đọc cĩ thể tự kiểm tra lại
kiến thức của mình qua một bài trắc nghiệm (khơng cĩ lời giải kèm theo). Bài trắc nghiệm được thiết kế với bốn lựa chọn một đáp án và khung thời gian qui định tối đa là một phút cho một câu hỏi.
Tư liệu:Cung cấp cho người đọc những thơng tin liên quan đến nội
dung giáo khoa, bao gồm những thơng tin về quá trình khám phá nguyên tử, những học thuyết về cấu tạo nguyên tử, những thảm họa liên quan đến việc sử dụng năng lượng hạt nhân, ý nghĩa và nguồn gốc tên gọi một số nguyên tố hĩa học.
Vui học: Cung cấp một số trị chơi (game) để người đọc thư giãn
với chính những kiến thức trong chương. Các trị chơi được thiết kế trên nền flash, địi hỏi người đọc vận dụng nhanh các kiến thức đã học, đồng thời địi hỏi những kĩ năng thao tác khác.
Mơ hình: Chứa đựng những thí nghiệm được ảo hĩa nhờ flash, giúp người đọc tiếp cận với quá trình khám phá nguyên tử; những mơ hình về nguyên tử giúp người đọc dễ dàng hình dung về cấu tạo nguyên tử; bảng tuần hồn cho phép người đọc tra cứu nhanh về nguyên tử.
Liên hệ: Giới thiệu những thơng tin về ebook và tác giả của ebook
Hình 2.13. Trang chủ của ebook b. Thể hiện ý tưởng
Tạo thư mục “E:/Ebook” trong đĩa cứng để chứa tồn bộ ebook.
Thiết kế các tiêu đề bằng Xara3D 6.0
- Cài đặt Xara3D.
- Chạy chương trình Xara3D bằng cách vào “Start/All Programs/Xara/ Xara3D6.exe”.
- Vào menu file/new để tạo một khung làm việc mới.
- Trong khung soạn thảo xĩa nội dung cĩ sẵn bằng phím backspace, sau đĩ nhập nội dung biểu tượng cần tạo, ví dụ “EBOOK”.
Hình 2.14. Giao diện chính của Xara3D
- Thay đổi font chữ, giãn dịng, cỡ chữ, canh lề bằng cách nhấn vào biểu tượng “Aa” trên thanh cơng cụ ở lề trái để mở hộp thoại Text options.
Hình 2.15. Hộp thoại Text Option
- Mở khung “Animation options” để tạo hiệu ứng cho chữ, nhấn tổ hợp phím Ctrl + Space để áp dụng hiệu ứng.
- Nhấn tổ hợp phím Ctrl+Alt+E để xuất ra file hình, đặt tên là “ebook.gif”, lưu lại trong thư “ebook/level1/image”.
Hình 2.16. Kết quả của quá trình tạo tiêu đề “ebook” bằng Xara3D (adsbygoogle = window.adsbygoogle || []).push({});
- Tiến hành tương tự để thiết kế các tiêu đề khác gồm: “Hĩa học 10”, tên chương “Nguyên tử”, tên chương “Bảng tuần hồn các nguyên tố hĩa học. Định luật tuần hồn”, các tiêu đề của các trang con: “GIÁO KHOA”, “BÀI TẬP”, “TRẮC NGHIỆM”, “VUI HỌC”, “TƯ LIỆU”, “MƠ HÌNH”, “VUI HỌC”.
Dùng Adobe Dreamwaver CS4 để thiết kế trang chủ
- Cài đặt Adobe Dreamwaver CS4 (sau đây gọi tắt là Dreamwave) từ đĩa DVD.
- Chạy phần mềm bằng cách chọn Start/All Programs/Adobe Dreamwave CS4.
Hình 2.17. Giao diện Dreamwave
- Từ trình đơn File, chọn New, trong hộp thoại “New Document” chọn “Blank Page”, trong khung Page Type chọn “HTML”, trong khung Layout chọn “<none>”,sau đĩ click nút “Create”.
- Một trang mới được tạo ra. Trong khung làm việc chính, chọn chế độ làm việc là “Design”, ở ơ Title đặt tiêu đề cho trang là “Ebook hĩa học 10”.
- Nhấn tổ hợp phím Ctrl+S, mở hộp thoại Save, tìm đến thư mục “Ebook”, lưu lại với tên “ebook.htm”.
Hình 2.19. Hộp thoại “Save As”
- Trên thanh Properties ở phía dưới khung làm việc nhấn vào nút “Page Properties”, hộp thoại “Page Properties” được mở ra, sau đĩ thiết lập các thuộc tính cần thiết như font chữ (Page font), cỡ chữ (Size), màu chữ (Text color), nhấn nút “Browse” để thiết lập hình nền. Sau khi thiết lập xong nhấp nút “Apply” rồi nhấp “OK”.
Hình 2.20. Hộp thoại Page Properties
Hình 2.21. Khung thiết kế trang chủ sau khi thiết lập
- Tạo tiêu đề cho các trang con: trên thanh Insert, chọn tag “Layout” rồi chọn cơng cụ “Draw AP Div”, dùng chuột vẽ ơ vuơng lên phần trên của trang đề. Sau đĩ nhấn tổ hợp phím Ctrl+Alt+I để mở hộp thoại “Select Image Source”, tìm đến thư mục ebook/image, chọn file “ebook.gif” , nhấn nút “OK” để chèn tiêu đề ebook vào vùng làm việc.
Hình 2.22. Hộp thoại Select Image Source
- Trên thanh “Properties”, điều chỉnh kích cỡ của tiêu đề về mức phù hợp bằng cách chọn các thơng số W (chiều rộng) và H (chiều cao).
Hình 2.23. Thanh Properties
- Tiến hành tương tự các bước trên để tạo tiêu đề cho các trang con: “Giáo khoa”, “Bài tập”, “Trắc nghiệm”, “Vui học”, “Tư liệu”, “Mơ hình”, “Liên hệ”.
Hình 2.24. Trang chủ được thiết kế hồn chỉnh
2.4.2.2. Thiết kế trang “Giáo khoa”
a. Ý tưởng thiết kế
Đây là trang chứa nội dung chính của ebook.
Trang “Giáo khoa” bao gồm một trang giới thiệu chung và hai trang con chứa nội dung giáo khoa của hai chương. Nội dung trang giáo khoa được thiết kế bám sát nội dung chương 1 và chương 2 của sách giáo khoa hĩa học lớp 10 ban cơ bản. Mục tiêu là cung cấp cho người đọc những kiến thức cơ bản về cấu tạo nguyên tử và bảng tuần hồn các nguyên tố hĩa học- định luật tuần hồn.
Ở trang đầu tiên, người đọc được giới thiệu sơ lược về kết cấu và nội dung của trang. Sau khi tìm hiểu chung, người đọc sẽ quyết định tham khảo chương 1 hay chương 2 bằng cách click chuột vào biểu tượng của chương đĩ. Hoặc, nếu muốn tham khảo các nội dung khác của ebook, người đọc cĩ thể trở về trang chủ.
Hình 2.25. Giao diện trang giáo khoa
Ở các trang “Chương 1” và “chương 2”, người đọc được cung cấp bảng mục lục các bài của chương đĩ để tra cứu, khi muốn tìm hiểu bài học nào, người đọc sẽ click chuột vào biểu tượng tương ứng với bài học đĩ trên một khay chứa các biểu tượng chuyển động trong khơng gian. Một quyển sách điện tử sẽ xuất hiện và khay chứa biểu tượng được thu nhỏ lên gĩc trái.
Hình 2.26. Giao diện trang “Chương 1”
Để lật từng trang sách, người đọc cĩ thể nhấp trái hai lần vào một gĩc của trang sách, hoặc người đọc cũng cĩ thể nhấp chuột vào trang đĩ và kéo rê nĩ.
Nút dùng để đưa khay chứa các biểu tượng bài học trở về giữa quyển sách hoặc thu nhỏ nĩ lại bên gĩc trái.
Nút dùng bật/tắt chế độ dùng các rê chuột để lật từng trang sách. Nút dùng để ẩn quyển sách đi.
b. Thể hiện ý tưởng (adsbygoogle = window.adsbygoogle || []).push({});
Thiết kế các trang sách bằng Adobe Flash Professional CS5
Cài đặt phần mềm Adobe Flash Professional CS5 (sau đây gọi tắt là flash) vào đĩa cứng.
Tạo thư mục mới “ebook/level1/pages”. Trong thư mục mới, tạo thêm các thư mục con “lesson1”, “lesson2”, … để chứa nội dung các bài 1, bài 2, …
Chạy phần mềm flash bằng cách click chọn “Start/All Program/Adobe Flash Professioal CS5”. Mở một tài liệu mới bằng cách click chọn File/ New/ ActionScript 2.0.
Định dạng cho tài liệu mới bằng cách vào Modify/Document. Hộp thoại “Document Settings” xuất hiện. Định lại kích thước của tài liệu về 375x530 pixels, chuyển màu nền sang màu xanh.
Hình 2.28. Hộp thoại Document Settings
Chọn cơng cụ “rectangle” vẽ một hình chữ nhật kích thước nhỏ hơn kích thước của trang. Chọn hình chữ nhật vừa tạo rồi vào hộp “Color”, chọn kiểu tơ là Radial gradient, chọn màu để tạo ra phơng nền.
Dùng cơng cụ “Text tool”, nhấp và kéo rê chuột trên khung làm việc để tạo ra một vùng văn bản. Trong hộp “Properties”, thay đổi các thuộc tính của văn bản
như kiểu chữ, cỡ chữ, màu chữ cho phù hợp. Sau đĩ tiến hành nhập các nội dung giáo khoa vào vùng văn bản.
Để chèn hình vào khung soạn thảo, ta thực hiện thao tác File/Import/Import to Stage. Sau đĩ tìm đến file hình ảnh cần chèn, nhấp “OK”. Muốn chỉnh sửa kích cỡ hình ảnh, chọn cơng cụ “Free Transform Tool”, nhấp vào hình ảnh cần chỉnh sửa để thay đổi kích thước.
Hình 2.29. Thiết kế một trang sách bằng flash
Sau khi hồn thành, mỗi trang được xuất ra file *.swf bằng cách vào File/Export/Export Movie. Hộp thoại “Export Movie” được kích hoạt. Mỗi trang được lưu theo tên “Ebook/level1/pages/lesson[x]/page[yy].swf”, trong đĩ [x] là số thứ tự của bài học, yy là số thứ tự của trang- được đánh số theo dạng 00, 01, 02, … Thí dụ: trang 3 của bài 1 được lưu với tên là “Ebook/ level1/ pages/ lesson1/ page03.swf”. Tên của các file phải được đạt theo đúng cú pháp để cịn được gọi lại trong Action Script. Lưu lại khung soạn thảo với tên “page.fla” trong thư mục khác.
Hình 2.30. Hộp thoại Export Movie
Các trang khác được thiết kế trên nền file flash đã cĩ sẵn, chỉ thay đổi nội dung văn bản và các hiệu ứng khác.
Thiết kế menu 3D và hiệu ứng lật sách bằng flash.
Chuẩn bị các hình ảnh làm biểu tượng của mỗi bài học:
Mở một tài liệu flash mới, vào Modify/Document để thay đổi kích thước của tài liệu là 120x89 pixels, chọn màu nền là màu xanh. Dùng các cơng cụ trên thanh cơng cụ để vẽ hình.
Sau khi hồn thành thiết kế, ta dùng lệnh File/Export/Export Image để xuất hình ảnh, lưu lại với tên “Ebook/level1/photos_tb[x]/pic[y].jpg”, với [x] là số thứ tự của chương, [y] là số thứ tự của bài học. Thí dụ, biểu tượng của bài 1, chương 1 được xuất ra với tên “Ebook/level1/photos_tb1/pic1.jpg”.
Chuẩn bị các file xml chứa thơng tin các biểu tượng và bài học:
Chạy phần mềm Dreamwave, trong khung “Create New”, chọn “XML”. Một tài liệu xml mới được tạo ra, thêm vào đĩ các dịng thơng tin về đường dẫn đến file chứa hình ảnh biểu tượng và thứ tự của bài học.
Đối với chương 1, cú pháp của file xml là:
<images >
<img image="photo_tb1/pic1.jpg" title="BÀI 1" url="1"/> <img image="photo_tb1/pic2.jpg" title="BÀI 2" url="2"/> <img image="photo_tb1/pic3.jpg" title="BÀI 3" url="3"/> <img image="photo_tb1/pic4.jpg" title="BÀI 4" url="4"/> <img image="photo_tb1/pic5.jpg" title="BÀI 5" url="5"/> <img image="photo_tb1/pic6.jpg" title="BÀI 6" url="6"/> <img image="photo_tb1/pic7.jpg" title="TƯ LIỆU" url="_tl"/> <img image="photo_tb1/pic8.jpg" title="ĐỌC THÊM" url="_ext"/> </images>
File này được lưu lại với tên “Ebook/level1/photos1.xml” . Đối với chương 2, cú pháp của file xml là:
<images >
<img image="photo_tb2/pic1.jpg" title="BÀI 7" url="7"/> <img image="photo_tb2/pic2.jpg" title="BÀI 8" url="8"/> <img image="photo_tb2/pic3.jpg" title="BÀI 9" url="9"/> <img image="photo_tb2/pic4.jpg" title="BÀI 10" url="10"/> <img image="photo_tb2/pic5.jpg" title="BÀI 11" url="11"/> <img image="photo_tb2/pic6.jpg" title="TƯ LIỆU" url="_tl2"/> </images>
File này được lưu lại với tên “Ebook/level1/photos2.xml”.
Hình 2.32. Giao diện khung soạn thảo file “Ebook/level1/photos1.xml”
Thực hiện tương tự các bước như trên để tạo ra các file chứa thơng tin về các trang sách. Thí dụ, file chứa thơng tin về bài 1 chương 1 cĩ nội dung là:
<FlippingBook> <width>770</width> <height>530</height> (adsbygoogle = window.adsbygoogle || []).push({});
<scaleContent>false</scaleContent> <firstPage>0</firstPage>
<alwaysOpened> false </alwaysOpened> <autoFlip> 50 </autoFlip> <staticShadowsDepth> 1 </staticShadowsDepth> <dynamicShadowsDepth> 1 </dynamicShadowsDepth> <moveSpeed> 2 </moveSpeed> <closeSpeed> 3 </closeSpeed> <gotoSpeed> 3 </gotoSpeed> <flipSound></flipSound> <pageBack> 0x1C90CB </pageBack>
<loadOnDemand> true </loadOnDemand> <cachePages> true </cachePages>
<cacheSize> 4 </cacheSize>
<preloaderType> Progress Bar </preloaderType> <userPreloaderId></userPreloaderId> <pages> <page>pages/lesson1/page00.swf</page> <page>pages/page.swf</page> <page>pages/lesson1/page01.swf</page> <page>pages/lesson1/page02.swf</page> <page>pages/lesson1/page04.swf</page> <page>pages/lesson1/page05.swf</page> <page>pages/lesson1/page06.swf</page> <page>pages/lesson1/page07.swf</page> <page>pages/lesson1/page09.swf</page> <page>pages/lesson1/page10.swf</page> <page>pages/lesson1/page11.swf</page> <page>pages/lesson1/page12.swf</page> <page>pages/lesson1/page13.swf</page> <page>pages/lesson1/page14.swf</page> <page>pages/lesson1/page15.swf</page> <page>pages/lesson1/page16.swf</page> <page>pages/lesson1/page17.swf</page> <page>pages/lesson1/page19.swf</page> <page>pages/lesson1/page20.swf</page> <page>pages/lesson1/page21.swf</page> <page>pages/lesson1/page22.swf</page> <page>pages/lesson1/page23.swf</page> <page>pages/lesson1/page24.swf</page>
<page>pages/lesson1/page25.swf</page> <page>pages/page.swf</page>
<page>pages/page.swf</page> </pages>
</FlippingBook>
File này được lưu lại với tên là “Ebook/level1/config1/ config_lesson1.xml”.
Viết Action Script để tạo menu 3D và hiệu ứng flipping book :
Chạy phần mềm flash, mở một tài liệu mới bằng lệnh “File/New/ Action Script 2.0”. Chọn menu “Modify/Document” để thiết lập kích thước của tài liệu là 770x560.
Tạo hình nền bằng lệnh “File/Import Movie”, tìm đến hình ảnh cần làm hình nền. Dùng cơng cụ “Text Tool” để soạn tiêu đề chương và các nội dung bên trong của chương.
Mở Action-Frame bằng phím F9. Trong cửa sổ action, viết đoạn mã lệnh:
import flash.filters.BlurFilter; var radiusX:Number = 200; var radiusY:Number = 60;
var centerX:Number = Stage.width / 2; var centerY:Number = Stage.height / 3; var scale:Number=100;
var flag:Boolean = false; var xmlFile = "photos1.xml"; var speed:Number = 0.03; var mouse_acc = 10000; var objectBlurGain = 70; var blurQuality = 2; var xml:XML = new XML(); xml["scope"] = this;
xml.ignoreWhite = true; xml.load(xmlFile); xml.onLoad = function() {
var nodes = this.firstChild.childNodes; numItems = 8;
for (var i = 0; i < numItems; i++) {
var t:MovieClip = _root.attachMovie("item", "item" + i, i + 1); t._angle = i * ((Math.PI * 2) / numItems);
t._alpha = 100;
var easingFunc = mx.transitions.easing.Regular.easeOut; var xsa = 0;
var xfa = 100; var duration = 1;
new mx.transitions.Tween(t, "_alpha", easingFunc, xsa, xfa, duration, true);
var attr = nodes[i].attributes; t.txt_name.text = attr.title; t.txt = attr.url; t._load.loadMovie(attr.image); t["info"] = nodes[i].attributes; } this["scope"].onEnterFrame = mouse_move; }; function mouse_move() { if (flag){
scale=20; centerX=100; centerY=20; } else{ scale=100; centerX=Stage.width/2; centerY=Stage.height/2; } radiusX=200*scale/100; radiusY=60*scale/100;
for (var i = 0; i < numItems; i++) {
var curr_mc = this["item" + i];
curr_mc._x = Math.cos(curr_mc._angle) * radiusX + centerX; curr_mc._y = Math.sin(curr_mc._angle) * radiusY + centerY; var s:Number = curr_mc._y / (centerY + radiusY);
curr_mc._xscale = curr_mc._yscale = s * 100; curr_mc._angle += curr_mc._parent.speed; var dpth = Math.round(curr_mc._xscale) + 120; (adsbygoogle = window.adsbygoogle || []).push({});
curr_mc.swapDepths(Math.round(curr_mc._xscale) + 120); var bx = Math.round(-curr_mc._xscale + objectBlurGain); var by = Math.round(-curr_mc._yscale + objectBlurGain); var bl = new BlurFilter(bx, by, blurQuality);
var myFilters = new Array(); myFilters.push(bl);
curr_mc.filters = myFilters; curr_mc._xscale=scale;
curr_mc._yscale=scale; }
}
onMouseUp = function () {
for (var i = 0; i < numItems; i++) {
var cur_Mc:MovieClip = this["item" + i];
if (cur_Mc.hitTest(_root._xmouse, _root._ymouse)) {
flag = true;
removeMovieClip(myBook); var temp = cur_Mc.txt;
var extXMLFile="config1/config_lesson"+temp+".xml"; var initObj = new Object();
initObj.extXML = extXMLFile;
_root.attachMovie("FFlippingBookSymbol", "myBook", 0, initObj); myBook._x=Stage.width/2; myBook._y=Stage.height/2+15; myBook.flipOnClickProp=false; } } }; onMouseMove = function () {
speed = (_root._xmouse - centerX) / mouse_acc; };
Sau khi hồn thành, file này được xuất ra với tên “Ebook/level1/ chuong 1.swf”, đồng thời lưu lại với tên “chuong 1.fla” để sử dụng cho các nội dung khác.
Hình 2.33. File “chuong 1.swf”
Tiếp tục sử dụng file “chuong 1.fla”, thay đổi một số lệnh sau trong action script:
var xmlFile = "photos2.xml";
var extXMLFile="config2/config_lesson"+temp+".xml";
Sau đĩ xuất ra thành file “Ebook/level1/chuong 2.swf”. Thiết kế các trang giáo khoa bằng Dreamwave
Dùng phần mềm Xara3D để thiết kế thêm các biểu tượng: “trang chủ”, “chương 1”, “chương 2”. Các bước thiết kế tiến hành tương tự quá trình thiết kế các biểu tượng cho trang chủ.
Chạy phần mềm Dreamwave, tạo một trang HTML mới, đặt Title là Giáo khoa, lưu lại với tên là “Ebook/level1/giaokhoa.html”. Trong khung soạn thảo, lần lượt thiết kế các biểu tượng: “Ebook hĩa học 10”, “Nguyên tử”, “Bảng tuần hồn
các nguyên tố hĩa học”, “Trang chủ”, “Chương 1”, “Chương 2” theo bố cục như hình bên dưới. Quy trình thiết kế được tiến hành như khi tiến hành với trang chủ.