Các bước thiết kế WebQuestĐể thiết kế một WebQuest ta cần phải thực hiện theo các bước: xác định cấu trúc bài giảng, khởi động chương trình Notepad, nhập nội dung bài giảng, chèn hình ản
Trang 12.2.1. Các bước thiết kế WebQuest
Để thiết kế một WebQuest ta cần phải thực hiện theo các bước: xác định cấu trúc bài giảng, khởi động chương trình Notepad, nhập nội dung bài giảng, chèn hình ảnh, đồ họa, âm thanh , xây dựng các hoạt động nhận thức cho học sinh, kiểm tra đánh giá kiến thức của học sinh
2.2.1.1. Xác định cấu trúc bài giảng
Công việc quan trọng đầu tiên khi làm WebQuest là phải xác định được cấu trúc của bài giảng Mỗi bài giảng là tập hợp của nhiều thông tin, hình ảnh minh họa, các đoạn phim thí nghiệm Tất cả sẽ được lưu trong cùng một thư mục
2.2.1.2. Khởi động chương trình Notepad
Chọn Start\ Program\ Accessories\ Notepad
Nhập vào nội dung sau là cấu trúc chung của một trang web (HTML):
<html>
<head>
<title> Tiêu đề </title>
Các thẻ tiêu đề khác
</head>
<body> Văn bản và các thẻ của trang web
</body>
</html>
Lưu tập tin với phần mở rộng là HTM hoặc HTML
2.2.1.3. Nhập nội dung bài giảng
- Tạo biên dùng chung: có thể dùng nhiều thẻ <TABLE> lồng vào nhau để trang trí, tạo khung viền cho trang
Trang 2- Nhập nội dung bài giảng vào phần chính của trang: trên phần chính của trang web thể hiện nội dung của tiến trình dạy học bao gồm:
+ Mục tiêu bài giảng: học sinh đạt được những yêu cầu ở mục tiêu sau khi học xong bài
+ Nội dung kiến thức đã được trình bày dựa theo SGK và tài liệu tham khảo
+ Các hình ảnh minh họa
+ Các đoạn phim thí nghiệm
+ Các hình thức tổ chức tiết học và hoạt động nhận thức của học sinh
Để phân biệt mỗi đoạn không thể dùng phím Enter mà phải dùng các thẻ
Thẻ <p> có cấu trúc <p> </p> để ngắt đoạn
Thẻ <br> để xuống dòng
2.2.1.4. Chèn hình ảnh, đồ họa, âm thanh, các đoạn phim thí nghiệm vào trang web
Chọn hình ảnh, âm thanh hay các đoạn phim thí nghiệm thích hợp với nội dung bài giảng Để chèn một file ảnh (.jpg, gif, bmp) hoặc các đoạn phim (.mpg, avi) vào trang web ta dùng thẻ <IMG> có cấu trúc:
<img align = top/middle/bottom
Alt = text
Border = n
Src = url
Width = width
Height = height
Hspace = vspace
Trang 3Vspace = hspace
Title = title
Dynsrc =url>
Trong đó:
Align = top/ middle/ bottom/ left/ right: căn hàng văn bản bao quanh ảnh
Alt = text: chỉ định văn bản sẽ được hiển thị nếu chức năng showpicture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ họa Chú ý phải đặt văn bản trong dấu “ ” nếu trong văn bản chứa các dấu cách hay các kí tự đặc biệt – trong trường hợp ngược lại có thể không cần dấu “ ”
Border = n: đặt kích thước đường viền được vẽ quanh ảnh (tính theo đơn vị pixel) Src = url: địa chỉ của file ảnh cần chèn vào tài liệu
Width/ height: chỉ định kích thước của ảnh được hiển thị
Hspace/ Vspace: chỉ định khoảng trống xung quanh hình ảnh (tính theo đơn vị pixel) theo bốn phía trên, dưới, trái, phải
Title = title: văn bản sẽ hiển thị khi con chuột trỏ trên ảnh
Dynsrc = url: địa chỉ của file video
Tuy nhiên, với thẻ <IMG> thì không thể chèn các thí nghiệm có đuôi swf và video chèn vào có sự bất tiện là ta không thể cho dừng lại nửa chừng được Vì vậy, đối với phim thí nghiệm và thí nghiệm ảo ta nên dùng thẻ <OBJECT>
- Để nhúng đoạn phim video ta dùng đoạn mã sau:
<OBJECT id=video style=”WIDTH: (độ rộng)px; HEIGHT: (độ cao)px” type=application/x-oleobject classid=CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6>
<PARAM NAME=”allowFullscreen” VALUE=”true”>
Trang 4<PARAM NAME=”Autostart” VALUE=”99”>
<PARAM NAME=”URL” VALUE=”Địa chỉ lưu đoạn phim”>
<PARAM NAME=quanlity value=high>
</OBJECT>
- Để nhúng các file thí nghiệm có đuôi swf ta dùng đoạn mã sau:
<OBJECT classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” WIDTH=”Độ rộng” HEIGHT=”Độ cao”>
<PARAM NAME=movie VALUE=”Địa chỉ đoạn thí nghiệm”>
<PARAM NAME=quanlity VALUE=high>
</OBJECT>
Ta có thể thay đổi chiều rộng và chiều cao tùy ý và chú ý đặt địa chỉ đoạn phim, đoạn thí nghiệm đúng với vị trí đặt file video
2.2.1.5. Xây dựng các hoạt động nhận thức cho học sinh
Dựa vào nội dung kiến thức đã được chọn lựa cùng với khả năng thiết lập WebQuest để dự kiến các hoạt động dạy học phù hợp Tương ứng với từng nội dung kiến thức, giáo viên có thể thiết kế các câu hỏi hướng dẫn, dẫn dắt hay kiến tạo các tình huống có vấn đề để học sinh chủ động lĩnh hội tri thức
2.2.1.6. Khả năng liên kết
Có thể nói khả năng nổi trội của web là khả năng liên kết không những với các bookmart trong cùng một trang, các trang web hay file khác trong cùng một máy tính
mà còn có thể liên kết với những địa chỉ trên internet
- Liên kết đến các trang hay các file khác trong máy
Cú pháp:
<A HREF = url
Trang 5NAME = name TABINDEX = n TITLE = title TARGET =_blank/ _self>
</A>
Trong đó:
+ HREF: là địa chỉ của trang web được liên kết, là một URL nào đó
+ NAME: đặt tên cho vị trí đặt thẻ
+ TABINDEX: thứ tự di chuyển khi ấn phím tab
+ TITLE: văn bản hiển thị khi di chuột trên siêu liên kết
+ TARGET: mở trang web được liên kết trong một cửa sổ mới (_blank) hoặc trong cửa sổ hiện tại (_self), trong một frame (tên frame)
- Liên kết đến các địa chỉ internet: sử dụng cú pháp:
<form name=”form”>
<p><select NAME=”site” onChange=”formHandler()”>
<option VALUE=”Đường link đến trang web”>Nội dung hiển thị trên trang web</option>
</select></p></form>
Ta có thể tạo thêm nhiều địa chỉ trang web nữa bằng cách dùng thẻ <option> như trên
2.2.1.7. Kiểm tra đánh giá kiến thức của học sinh
Sau mỗi tiết học, thường có phần củng cố giúp học sinh nhớ lại kiến thức bài học, đồng thời rèn luyện kĩ năng vận dụng kiến thức đó để giải các bài toán có liên quan
Trang 6Khi thiết kế WebQuest, giáo viên cần đưa ra các bài tập về nhà,các câu hỏi, bài tập trắc nghiệm để học sinh tự củng cố kiến thức của mình Qua đó các em có thể tự ôn tập,
tự kiểm tra, đánh giá khả năng kiến thức của mình
2.2.1.8. Hoàn thiện bài giảng
- Chọn màu nền: nên chọn nền có màu sáng trắng, chữ màu sẫm để dễ đọc, không gây chói
Đặt thêm các tham số sau vào thẻ <BODY>
+ BACKGROUND= Đặt một ảnh làm ảnh nền cho văn bản Phần sau dấu bằng là URL của file
+ BGCOLOR= Đặt màu nền cho trang khi hiển thị Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có một giá trị thì trình duyệt sẽ hiển thị màu nền trước, sau đó mới tải ảnh lên phía trên
+ TEXT= Xác định màu chữ của văn bản, kể cả đề mục + ALINK=, VLINK= Xác định màu sắc cho các siêu liên kết trong văn bản + LINK= Tương ứng, alink (active link) là liên kết đang được kích hoạt - tức là khi đã được click chuột lên; vlink (visited link) chỉ liên kết đã từng được kích hoạt
- Sử dụng thêm hiệu ứng: Để lôi cuốn học sinh, WebQuest phải sinh động do vậy ta
có thể dùng các thẻ in đậm <b>, in nghiêng <i> hoặc dùng thẻ <font> để điều chỉnh kích thước và màu sắc văn bản
2.2.1.9. Kiểm tra lại WebQuest
Mở WebQuest chạy thử trên trình duyệt Internet Explorer Nếu phát hiện sai sót cần chỉnh sửa, ta click chuột phải vào View Source để chỉnh sửa trực tiếp Sửa xong, ta Save lại rồi Refresh (nhấn F5) để xem lại bài sau khi chỉnh sửa