7. Cấu trúc của đề tài
1.3.6. Kỹ thuật thiết kế website giảng dạy hóa học dựa vào công cụ visual
2010
- Tạo một project website đặt tên là hoahocdaicuong.
- Tạo thêm các thư mục mới tương ứng với các mục trong sơ đồ website: thuvien, baigiangdientu,baitap, kiemtra, ontap, thinghiem, nhahoahoc, Images, baigiangflash.
- Thêm các file hình ảnh của website vào trong thư mục Images, các bài giảng điện tử vào thư mục baigiangflash.
1.3.6.1.Tạo giao diện trang chủ
- Chỉnh sửa file site.master. thay đổi hình ảnh banner (hình ảnh trên cùng). Sử dụng Image control, dẫn tới file hình ảnh.
- Chỉnh sửa menu để dẫn tới các thư mục tương ứng đã tạo ra trước.
- Thay đổi màu sắc, font chữ, bố cục website bằng chỉnh sửa các thuộc tính CSS trong file Site.css.
- Giao diện trang chủ được thiết lập :
1.3.6.2. Tạo site bài giảng điện tử
- Tạo các trang aspx mới trong thư mục baigiangdientu.
- Tạo các bài giảng điện tử ở dạng flash nhờ phần mềm Articulate studio. Phần mềm này giúp tạo ra giao diện trực quan, sinh động cho bài giảng.
- Sử dụng các thẻ HTML để tạo giao diện trang bài giảng.
- Dùng các thẻ object để nhúng các file bài giảng ở định dạng flash vào trang web.
<object id=”presentation” width=”730” height=”540” style=”float:right; padding- right:10px”classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000”
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=8,0,0,0” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”../../BaigiangFlash/Ch1sodotuduy.swf” /> <param name=”quality” value=”hight” />
<param name=”bgcolor” value=”#ffffff” /> <param name=”allowFullScreen” value=”true” />
<embed src=”../../BaigiangFlash/Ch1sodotuduy.swf” quality=”high” bgcolor=”#ffffff” width=”700” height=”540” name=”presentation” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash”
pluginspage=”http://www.adobe.com/go/getflashplayer” allowFullScreen=”true” /> </object>
1.3.6.3. Tạo site Ôn tập - Tạo một trang aspx mới.
- Sử dụng các thẻ HTML và CSS để định dạng nội dung ôn tập trên trang web.
- Sử dụng các Hyperlink Control để dẫn trang web tới các trang web ôn tập tiếp theo và liền trước.
<%@ Page Title="Ôn tập" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Hoahoc.Ontap.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h1 class="center">Chương 1 : NGUYÊN TỬ</h1>
<p class="demuc">I. Thành phần cấu tạo của nguyên tử</p>
<p class="cat">Kết luận : thành phần cấu tạo của nguyên tử gồm:</p> <ul class="cat"> <li>Hạt nhân nằm ở tâm nguyên tử gồm các hạt proton và nơtron</li>
<li>Vỏ nguyên tử gồm các electron chuyển động xung quanh hạt nhân</li></ul> <pclass="navigationOntap">1<ahref="WebForm2.aspx">2</a><a
href="WebForm3.aspx">3</a><ahref="WebForm4.aspx">4</a><ahref="WebForm5. aspx">5</a></p></asp:Content>
1.3.6.4. Tạo site kiểm tra
- Tạo các trang aspx mới để đưa đề bài và đáp án lên.
- Sử dụng các thẻ HTML, CSS và Control Asp.net để đưa nội dung đề bài và đáp án.
- Ví dụ nhúng nội dung đáp án
<object id="presentation" width="730" height="1000" style="float:right; padding-right:10px" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab# version=8,0,0,0"
align="middle">
<param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="dade2.swf" />
<param name="quality" value="hight" /> <param name="bgcolor" value="#ffffff" /> <param name="allowFullScreen" value="true" />
<embed src="dade2.swf" quality="high" bgcolor="#ffffff" width="700" height="540"name="presentation"align="middle" lowScriptAccess="sameDomain" allowFullScreen="true"type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer" allowFullScreen="true" /> </object>
1.3.6.5. Tạo site bài tập
- Tạo nội dung bài tập ở định dạng flash bằng công cụ Articulate Studio. Phần mềm giúp tạo giao diện bài tập, cung cấp các đáp án, và chấm điểm cho bài làm của học sinh.
- Sử dụng HTML, CSS để đưa nội dung các file flash hoặc file pdf lên trình duyệt.
<br /><br />
<p class="cat center">Cấu tạo nguyên tử và liên kết hóa học</p> <br /><br />
<iframe src="cautaonguyentu.pdf" width="720" height="1200"></iframe>
1.3.6.4. Tạo site thí nghiệm
- Nội dung thí nghiệm được chứa trong các file video. Copy các file này vào thư mục ThinghiemMovie
- Sử dụng các thẻ HTML object để đưa nội dung video lên trang web <object type="video/x-ms-wmv" width="200" height="200"> <param name="Thinghiemdienly" value ="Thinghiemdienly.wmv" />
</object>