Phần bài tập chia làm 2 trang riờng với 2 dạng bài tập: tự luận và trắc nghiệm. Trang bài tập tự luận và trang bài tập trắc nghiệm giống nhau về ý tưởng thiết kế. Trang bài tập tự luận gồm 6 chuyờn đề: Nguyờn tử, Bảng tuần hồn cỏc nguyờn tố húa học…., mỗi chuyờn đề lại bao gồm cỏc chủ đề và phần luyện tập. Giao diện trang sẽ được chia thành 2 phần: bờn trỏi là danh sỏch cỏc chuyờn đề và chủ đề nhỏ, bờn phải là nội dung cỏc bài tập theo từng chuyờn đề. Yờu cầu đặt ra là trong cỏc bài tập ở mỗi chủ đề đú, GV muốn cú lựa chọn Ẩn/Hiện lời giải hoặc hướng dẫn giải. Khi người dựng muốn xem lời giải hoặc hướng dẫn chỉ việc bấm vào nỳt Hiện, lập tức mở ra nội dung lời giải hoặc hướng dẫn cho người dựng cú thể theo dừi.
2.5.5.1. Thực hiện
Để đỏp ứng được yờu cầu nờu trờn, ta sử dụng cụng cụ Dreamweaver hoặc Fontpage để thực hiện. Trước hết ta chia phần bài tập thành cỏc chuyờn đề, mỗi chuyờn đề tương ứng với một file cú phần mở rộng là *.htm. Cỏch làm như sau:
- Trong phần nội dung bài tập theo cỏc chủ đề ở dạng *.doc chỳng ta chọn cỏch lưu File → Save as type → Web page, sau đú sử dụng Fontpage tạo cỏc trang Mucluc.htm, Noidung.htm, Header.htm và sau cựng là trang index.htm với dạng mẫu frame. Lưu ý cần hiệu chỉnh cỏc cụng thức và cỏc phương trỡnh phản ứng húa học sao cho cõn đối trờn trang web. Trong trường hợp cỏc cụng thức phức tạp, chỳng ta cần lưu dưới dạng file ảnh rồi chốn chỳng vào trang web.
Hỡnh 2.23. Chọn lưu tệp dạng *.htm
- Tạo bookmark cho từng chủ đề trong mỗi chuyờn đề từ 1ữ5 của trang “Bài tập” bằng cỏch: Trờn cửa sổ Design của file Chuyende1.htm chỳng ta di chuyển đến từng dũng tiờu đề của cỏc chủ đề, giả sử ta di chuyển đến chủ đề 1, bấm chuột vào đầu dũng rồi mở Insert/BookMark rồi nhập tờn bookmark là tờn cỏc chủ đề tương ứng.
Hỡnh 2.24. Tạo Bookmark cho cỏc chủ đề trờn trang “Bài tập húa học”
Tương tự cỏch làm như vậy đối với tất cả cỏc chủ đề theo cỏc chuyờn đề của trang “Bài tập”
- Tạo trang Mucluc.htm: dựng Dreamweaver hoặc FrontPage – mở File/New để tạo 1 trang mới rồi mở cửa sổ Design nhập vào danh mục cỏc chuyờn đề và cỏc chủ đề của trang “Bài tập”. Save file mới vừa tạo lấy tờn là Mucluc.htm cú giao diện thiết kế như hỡnh dưới đõy:
Tương tự như việc tạo trang Mucluc.htm, chỳng ta thiết kế cỏc trang Header.htm và trang Noidung.htm. Trang Header.htm chỉ đơn giản là chốn 1 file flash làm banner, trang Noidung.htm cú nội dung giống như nội dung của trang Mucluc.htm.
- Bước tiếp theo là mở chương trỡnh FrontPage – chọn File/New/More page templates/Frames Pages/Banner and Contents chỳng ta được giao diện thiết kế như hỡnh sau:
Hỡnh 2.26. Giao diện trang index.htm với khung mẫu frame
Tại cỏc nỳt “ Set Initial Page” chỳng ta bấm chọn tới cỏc file HTML tương ứng với từng frame.
Bước tiếp theo chỳng ta phải tạo cỏc liờn kết dừng cho từng chuyờn đề và từng chủ đề cho trang “Bài tập”. Ở menu bờn trỏi (đúng vai trũ là mục lục) bụi đen từng dũng tiờu đề rồi chọn liờn kết đến trang tương ứng. Giả sử tạo liờn kết dừng cho chuyờn đề 1, ta làm như sau: bụi đen phần tiờu đề chuyờn đề 1, bấm chọn Insert/HyperLink. Trờn bảng Edit Hyperlink mở ra, ta chọn Target Frame với trang hiển thị mặc định là Page Default (main) rồi nhấn OK.
Hỡnh 2.28. Tạo cỏc liờn kết dừng cho trang “Bài tập húa học”
Đối với liờn kết cho cỏc chủ đề, ta cần bấm chọn thờm phần Bookmark rồi chọn tờn chủ đề tương ứng, trang hiển thị mặc định cũng vẫn là Page Default (main) rồi nhấn OK.