8/ Thầy/Cô mong muốn một thư viện điện tử hỗ trợ việc dạy học văn miêu tả có các nội dung về :
3.1.1.Xây dựng chương trình Thư viện điện tử hỗ trợ dạy học văn miêu tả cho học sinh lớp 4, 5 dựa trên phần mềm Dreamweaver 9
3.1.1.1. Quy trình xây dựng chương trình
Sau thời gian nghiên cứu từ các tài liệu và tham khảo ý kiến của các nhà chuyên môn về CNTT, tác giả đã quyết định lựa chọn phần mềm Macromedia Dreamweaver thiết kế trình bày websites, sử dụng phần mềm Adobe Flash để xây dựng trò chơi học tập và các công cụ hỗ trợ biên tập hình ảnh, phim là Adobe Photoshop, UleadStudio Pro để xây dựng Thư viện điện tử hỗ trợ dạy học VMT lớp 4, 5.
Dreamweaver là phần mềm hỗ trợ soạn thảo trang web mạnh với nhiều công cụ hỗ trợ xây dựng trang web chuyên nghiệp và tiện dụng. Thiết kế thư viện theo hướng lập websites giúp cho người dùng dễ dàng sử dụng vào tương thích với các hệ thống máy tính. Máy tính chỉ cần có trình duyệt web là có thể sử dụng được mà điều này thì máy tính nào cũng đáp ứng được. Bên cạnh đó, thiết kế theo hướng lập websites sẽ dễ nâng cấp và có hướng mở cho người dùng cập nhật thêm vào thư viện. Khác với một số phần mềm lập trình khác như C++, Visual Basic,….hỗ trợ rất tốt về công cụ và ngôn ngữ lập trình ứng dụng Windows nhưng rất hạn chế về chức năng đồ hoạ, tạo hoạt hình, giao diện thiết kế chủ yếu là những khuôn mẫu (form) có sẵn theo giao diện Windows chuẩn, không thể hiện được khả năng sáng tạo thì thiết kế websites lại có thể bù đắp được những khiếm khuyết này.
a/ Lập kế hoạch xây dựng chương trình
- Mục đích xây dựng chương trình: nhằm tạo ra một thư viện điện tử hỗ trợ GV tiểu học trong quá trình lựa chọn tư liệu về các đối tượng miêu tả khi soạn giáo án điện tử trong quá trình dạy các tiết VMT.
- Đối tượng sử dụng : đối tượng sử dụng chính là GV tiểu học lớp 4-5. - Phác thảo cấu trúc chương trình, lựa chọn ngữ liệu bài tập, âm thanh, phần tử đồ họa, phương án viết mã, thiết kế giao diện.
b/ Xây dựng cơ sở dữ liệu cho chương trình
- Lựa chọn, tập hợp, xây dựng tư liệu về đối tượng miêu tả
- Sưu tầm, tuyển chọn hình ảnh, đoạn phim, nhạc nền, âm thanh từ internet và cuộc sống; các đoạn văn trích trong các tác phẩm văn học trong suốt quá trình làm thư viện.
- Xử lý hình ảnh thô bằng phần mềm Adobe Photoshop cho phù hợp với mục đích sử dụng và dùng phần mềm này để thiết kế các bảng thông báo trong toàn bộ chương trình.
- Xử lý các âm thanh, nhạc nền và đoạn phim thô bằng phần mềm Corel VideoStudio Pro X3 tạo ra các đoạn phim phù hợp với nội dung chương trình.
- Thiết kế các trò chơi điện tử mở rộng vốn từ bằng phần mềm Adobe Flash Professional CS5
- Nhập ngữ liệu.
c/ Xây dựng trang web
Tạo bộ web
- Tạo cấu trúc thư mục trên đĩa D: gồm các thư mục như sau:
Trong đó thư mục Images dùng để lưu trữ hình ảnh, thư mục css dùng để lưu trữ các tập tin định dạng trang web. Ngoài ra ta còn tạo thêm các thư mục Movie để lưu trữ các đoạn phim, thư mục Games chứa các tập tin trò chơi.
- Khởi động Dreamweaver CS5 o Vào menu Site, chọn New site
o Điền các thông tin như sau: Site name: tên của website, Local Site Folder: trỏ đến thư mục sẽ chứa bộ web là thư mục “Ho tro day van mieu ta”.
o Nhấp nút Save để lưu lại.
Thiết kế bố cục trang web
Ta thiết kế các trang web theo bố cục như sau:
- Tạo trang bố cục layout.html o Vào menu File > New
o Chọn Blank Page, chọn HTML, nhấp chọn nút Create
o Vào menu File > Save, đặt tên tập tin là layout.html, lưu trong thư mục “Ho tro day van mieu ta”
Banner Menu ngang
Menu dọc Nội dung trang web
-
- Tạo trang định dạng trang web o Vào menu File > New
o Chọn Blank Page, chọn CSS, nhấp chọn nút Create
o Vào menu File > Save, đặt tên tập tin là default.css, lưu trong thư mục “Ho tro day van mieu ta\Css” (adsbygoogle = window.adsbygoogle || []).push({});
- Tạo bố cục cho trang Layout.html - Tạo khung toàn trang web (wrapper) o Mở trang Layout.html
o Vào menu Insert > Layout Object > Div tag, đặt tên cho thẻ: wrapper, chọn OK.
o Hoặc gõ nội dung sau vào trang Layout.html (ở chế độ code): <div class= “wrapper”> </div>
- Tương tự, ta tạo các thẻ cho các vùng: menu_top, content, footer. Bên trong content, ta tạo thêm 2 thẻ nữa là leftmenu và maincontent.
- Tạo thêm 2 thẻ leftmenu cho vùng menu dọc bên trái trang web và thẻ maincontent cho vùng nội dung chính của trang web.
- Mở trang default.css để định dạng kích thước cho các vùng như sau: .wrapper{ width:800px; height:1000px; margin:0; padding:0; } .banner{ width:800px; height:200px;} .menu_top{ width:800px; height:50px; } .content{ width:800px; height:680px; }
.leftmneu{ width:200px; } .maincontent{ width:600px;} .footer{ width:800px; height:70px; } Thiết kế banner
- Dùng chương trình Photoshop thiết kế banner cho trang web với kích thước là 800x200 px
- Gắn hình vào trang web o Mở file Layout.html
o Trong phần lớp banner, gõ nội dung sau: <div class="banner">
<img src="../Images/header copy.jpg" width="800" height="200" /> </div><!--het banner-->
Trong đó: img là thẻ chèn hình, src là từ khóa chỉ đường dẫn đến tập tin hình ảnh, width, height là chiều rộng và cao của hình.
Thiết kế menu
- Mỗi menu có 2 hình cho 2 trạng thái: trạng thái bình thường và trạng thái khi chuột lướt qua menu. Ta tạo menu bằng phần mềm Xara Webstyle 4. Kết quả ta được dãy menu như sau:
- Chèn các nút menu vào trang web
- Vào menu Insert, chọn Rollover image, và thực hiện như hình sau: o Image name: đặt tên cho hình
o Rollover image: chọn hình ở trạng thái chuột lướt qua trên.
Thiết kế menu dọc trái
- Trong vùng menu dọc trái trang web ta chèn các hình rollover làm menu
- Vào menu Insert > Rollover image, điền các thông tin như sau: o Image name: đặt tên cho hình
o Orginal image: chọn hình ở trạng thái bình thường
o Rollover image: chọn hình ở trạng thái chuột lướt qua trên. - Thực hiện lần lượt, ta được như sau:
Thiết kết footer
- Chèn hình vào footer
o Mở file default.css, trong lớp footer, ta gõ dòng background- image và đường dẫn đến tập tin hình ảnh dùng làm nền cho footer.
.footer{ width:800px; height:100px; background-image:url(../Images/footer_t.png); background-repeat:repeat; clear:both; }
- Gõ thêm văn bản vào trong phần footer
o Mở file layout.html, trong phần footer ta gõ thêm các văn bản
Trong đó: thẻ <br/> là thẻ dùng để cho văn bản xuống dòng Các định dạng khác
- Khung viền xung quanh trang web (adsbygoogle = window.adsbygoogle || []).push({});
o Mở tập tin Default.css, ta gõ thêm lệnh định dạng đường viền border như sau:
.wrapper{ width:800px; height:1000px; margin:0; padding:0; border:thin #006 solid;
}
Trong đó: thin là độ dày của đường viền, #006 là mã màu của đường viền và solid là kiểu của đường viền.
- Hình nền, màu nền cho trang web
o Mở tập tin Default.css, ta gõ thêm lệnh định dạng màu nền hay hình nền như sau: body{ background:#669; background:url(../Images/footer_t.png) repeat; } Trong đó:
background:#669 là dùng một màu là màu nền, với #669 là mã màu.
background:url(../Images/footer_t.png) là dùng một hình làm hình nền, repeat là thuộc tính thiết lập hình ảnh có lặp lại hay không.
Chỉ sử dụng một trong hai dòng trên. Thiết lập liên kết
- Mở trang layout.html ở chế độ Design
- Chọn các đối tượng cần tạo liên kết (menu ngang, dọc)
- Điền tên trang web sẽ được liên kết đến trong ô Link của thanh
Properties
Tạo trang template (mẫu)
Template là trang mẫu, được dùng để tạo các trang con theo trang mẫu (giống hoàn toàn bố cục, chỉ khác nhau phần nội dung bài viết) một cách nhanh chóng.
- Tạo vùng nội dung cho trang mẫu
o Chọn vùng content để thiết lập vùng nội dung (vùng có thể sửa) bằng cách đặt dấu nháy vào trong thẻ
o Insert > Template Object > Editable Regional o Nhấp Ok để tạo trang mẫu
o Đặt tên cho vùng sửa được trên trang mẫu
- Vào menu File > Save, và chọn OK khi có thông báo cập nhật lại liên kết
Tạo các trang con từ trang mẫu
- File > New
- Chọn Page from Template
- Chọn site Ho tro day van mieu ta, và chọn mẫu là layout - Nhấp nút Create để tạo
- Lưu trang web lại với tên là các trang con của website (tên các trang mà ta đã gõ khi tạo liên kết cho menu ngang và dọc).
Chèn nội dung vào trang web
- Chèn bảng
o Insert > Table
o Điền các thông tin: Số dòng (Row), số cột (Column), Chiều rộng của bảng (Table width), Độ dày nét kẻ của bảng (Border thickness)…
- Chèn hình vào ô trong bảng o Đặt dấu nháy vào trong ô o Insert > Image (adsbygoogle = window.adsbygoogle || []).push({});
- Chèn phim
o Insert > Media > FLV…
o Nhấp chọn Browse để tìm đến tập tin phim cần chèn o Skin: chọn mẫu điều khiển phim
3.1.1.2. Kiểm tra và thử nghiệm chương trình
Thử nghiệm và gỡ rối : Chạy thử website, kiểm tra các liên kết, các đoạn phim, trò chơi chèn vào trang web. Thử nghiệm bộ web trên nhiều máy tính để kiểm tra những phát sinh và có biện pháp khắc phục kịp thời.
Đóng gói chương trình: Ghi website vào đĩa DVD
3.1.2. Thiết kế Thư viện điện tử hỗ trợ dạy học văn miêu tả cho học sinh lớp 4, 5