2.5.4.1. í tưởng thiết kế
Phần thớ nghiệm húa học chủ yếu bao gồm cỏc file dạng *.swf nờn chỳng ta cú thể thiết kế trang này theo cỏch sau: Phớa bờn trỏi của trang ta tạo danh mục chứa danh sỏch cỏc tờn bài thớ nghiệm theo cỏc chương để người học dễ theo dừi và tỡm kiếm. Tiếp đú tạo danh sỏch cỏc thớ nghiệm theo chư kốm theo hỡnh ảnh minh họa của những bài thớ nghiệm đú rồi đưa vào trang giữa. Mỗi chương bao gồm ba bài thớ nghiệm rồi cú nỳt bấm “Xem tiếp” để mở tồn bộ cỏc bài thớ nghiệm của chương đú trờn trang web. Khi bấm chọn bất kỳ một bài thớ nghiệm nào, trờn trang web sẽ trỡnh chiếu tồn bộ nội dung của bài đú.
2.5.4.2. Thực hiện
Trước hết, mở cụng cụ Dreamweaver, tạo một file cú tờn là index.htm trong thư mục “Thớ nghiệm”, sau đú tạo cỏc table chứa banner và flash giới thiệu trang “Thớ nghiệm húa học” (cũng tương tự như cỏch tạo flash của cỏc chương trước đú). Giao diện trang “Thớ nghiệm húa học” như sau:
Hỡnh 2.20. Giao diện chớnh của trang “Thớ nghiệm húa học”
Tạo menu bờn trỏi chứa danh mục cỏc bài thớ nghiệm và trang Danhmuc.htm chứa danh sỏch cỏc bài thớ nghiệm chia theo từng chương.
Hỡnh 2.21. Giao diện trang Danhmuc.htm
Tạo lần lượt cỏc trang tương ứng với mỗi bài thớ nghiệm (dạng flash) rồi liờn kết nú với trang chớnh nhờ tớnh năng liờn kết dạng frame.
Hỡnh 2.22. Chốn file flash trờn nền web
Cỏc bài thớ nghiệm trong mỗi chương được hiển thị khi người sử dụng bấm lựa chọn vào hỡnh ảnh hoặc bấm vào liờn kết phớa bờn dưới cỏc ảnh nhỏ đú.
Tạo cỏc bảng và tạo frame trờn trang index để hiển thị trang Danhmuc.htm khi người dựng mở vào trang “Thớ nghiệm húa học”
Ngồi ra cũng cần tạo cỏc file *.css để định nghĩa cỏc thuộc tớnh màu, phụng, cỡ chữ, hỡnh nền,… cho trang “Thớ nghiệm húa học”.