《网页设计与编程》课程网站开发与教学实例的结合初探

摘要:课程网站的开发及利用是网络课程建设的重要手段。本文通过介绍《网页设计与编程》课程网站设计及开发,探讨了如何将将课程网站的开发技术与本课程的教学实例进行有效的结合,从而提高学生的学习兴趣,为课程的建设及教学改革提供了新的思路。

关键词:网页设计与编程;XHTML;CSS;JavaScript;教学改革

中图分类号:G642文献标识码:A文章编号:1009-3044(2009)14-3829-04

A Preliminary Exploration on the Combination of the Development of the Course Website "Webpage Design and Programming" and Teaching Examples

MO Xiao-mei

(Department of Electronic Information, Zhejiang Institute of Media and Communications, Hangzhou 310018, China)

Abstract: The development and utilization of course website is an important method of the construction of network course. According to the introduction of design and development of the course website "Webpage Design and Programming", this paper discusses how to combine effectively the development technology of course website and the teaching examples of this course, thus inspires the students’ interest of course study, and proposes a new way of the course's construction and reformation.

Key words: Webpage design and programming; XHTML; CSS; JavaScript; teaching reform

1 引言

网络教学是教育发展的趋势。网络课程是指综合运用网络技术、计算机技术和多媒体技术的辅助教学课程。网络课程的建设是建设数字化校园、推进教育信息化和现代化进程的重要环节,也是满足学生多形式、多样化学习,提高教学质量的重要途径。课程网站是网络教学的主要平台,网络课程的建设主要是通过课程网站提供的各种功能如:教学资源共享、课堂内外的教学平台、作品展示及评选、以及师生网络交流互动的方式实现。

《网页设计与编程》是计算机专业课中的一门实践性、操作性、综合性较强的课程,其主要内容为XHTML、CSS及JavaScript三大网页设计核心技术。在网络教学迅速发展的今天,建立《网页设计与编程》课程的教学网站不仅是教学改革与建设的要求,更是课程教学内在的要求。通过课程网站的建设,一方面为本课程的教学提供更丰富的教学资源及有效的教学手段;另一方面,教师可以将课程网站建设的各个方面作为本课程的具体案例,结合课程教学的展示,能够更进一步激发学生的学习兴趣。

2 《网页设计与编程》课程网站的设计

2.1 网站的结构设计

为了充分满足课程建设的需求,同时结合本课程的特点,我们将《网页设计与编程》课程网站分为5大功能模块,分别是:课程信息、课程学习、实践教学、课后练习及讨论答疑。其中每个模块下又分为3个栏目,共15个栏目。这些内容较完整的涵盖了课程教学及建设的各个方面。网站的基本结构如图1所示。

2.2 课程信息

课程信息模块包括课程简介、教学大纲及教师团队。这些栏目可以帮助学生了解课程的概况、本科及专科的教学大纲要求以及教师的信息等。

2.3 课程学习

课程学习的模块分为网络课程、电子教案及网络资源。“网络课程”栏目按章节以网页的形式提供教学课件,方便学生课后自学;“电子教案”栏目则提供课堂教学的教案下载,方便教师的课堂教学及学生课后的复习;“网络资源”栏目包括技术网址、常用术语、参考文献及软件下载等。

2.4 实践教学

实践教学模块分为实验指导、课程设计及学生作品。“实验指导”栏目包括实验目录、实验内容简介及效果预览,并提供实验指导书的下载使用;“课程设计”栏目提供本科及专科的课程设计大纲、历年的课程设计任务书及时间安排表、课程设计指导书,以及课程设计报告书的参考格式;“学生作品”栏目则提供一些优秀的学生作品网站欣赏。

2.5 课后练习

课后练习模块包括习题配备、作业布置及自测练习。“习题配备”栏目提供与课程相关的3大技术的练习题题库,并允许浏览者利用相应的按钮来显示各题的答案;“作业布置”栏目明确各章的课后作业题及要求;“自测练习”栏目则提供XHTML、CSS及JavaScript的自测练习题,允许浏览者用单选按钮选择题目的答案,并利用“交卷”按钮来反馈答题的正确、错误及漏答的题数,利用“清除”按钮来重新答题,并提供显示答案的功能,以对照自己的选项正误。

本模块中的“习题配备”及“自测练习”部分综合运用了课程教学内容中的3大核心技术:XHTML、CSS及JavaScript进行编写,可以在课程教学的后期为学生展示3大技术的综合应用。

2.6 讨论答疑

讨论答疑模块主要通过BBS论坛的功能来实现。论坛提供3大功能板块:讨论区、作业区和我的推荐,分别用于讨论答疑、作业提交、资源及优秀作品推荐和展示。

讨论答疑模块使用ASP技术开发,数据库采用Access。这里也为学生后续学习ASP动态网站开发埋下了一个伏笔。

3 课程网站开发技术与教学实例的结合

由于《网页设计与编程》课程网站的开发过程中用到Web标准中的3大主流技术:XHTML、CSS及JavaScript,而这些技术同时也属于课程的主要教学内容,因此可为课程的教学提供一些现实的案例。比如,在讲XHTML语言的文本标记时,可以利用“课程简介”页面中的文字内容进行变化,来讲解不同标记的应用效果;在讲解CSS的应用时,可以结合课程网站的总体风格及其相应的CSS文件进行讲解;在课程网站的课程测试模块中,“习题配备”部分的显示答案和隐藏答案部分,综合应用了CSS的层属性及JavaScript的按钮对象编程功能;而“自测练习”页面的各项功能,更能直观的展示JavaScript语言综合编程的应用,适合作为补充性的案例引导学生进行分析和修改,提高学生的自学能力。

下面我们以“习题配备”及“自测练习”栏目的实现为例,探讨如何利用XHTML、CSS及JavaScript三大网页设计的核心技术来实现许多课程网站中提供的“学生自测”功能,包括显示和隐藏答案、以及利用表单编程来显示测试结果等功能。并对这些实例在课程的案例教学中的适用情况进行了分析和建议。

3.1 “习题配备”中的显示和隐藏答案功能

3.1.1 显示和隐藏答案的页面效果

“习题配备”栏目提供基础及XHTML知识、CSS、JavaScript三大网页设计核心技术的练习题库,形式上有填空、选择、判断、简答4种题型。这些题目考虑到为学生课后复习提供方便,为每一小题各配备了一个同时具备显示和隐藏答案功能的按钮,如图2所示。这样学生可以在看到某一题目的时候有意识的先思考一下自己是否已经掌握了相应的知识点,然后通过对应的按钮进行核对答案。

当浏览者单击某一题目的按钮,如第一题的“显示答案”按钮时,则显示相应题目的答案,同时按钮表面的文字由“显示答案”,变为“隐藏答案”,如图3所示。再次单击同一按钮则回到开始的状态,如图2所示。

3.1.2 显示、隐藏答案的功能函数及其页面应用

1) 函数的定义

首先定义一个实现显示和隐藏功能的JavaScript函数,并把该函数放在页面的头部(与之间)。函数代码如下:

function showhide(sname,sid){

if(sid.style.display=="none"){

sid.style.display="block";

sname.innerText="隐藏答案";

}else{

sid.style.display="none";

sname.innerText="显示答案";

}}

其中sname参数对应调用该函数的按钮对象,sid参数对应按钮所控制表格的id值。

用XHTML及CSS编辑页面。其中第一题的页面内容代码如下:

1.JavaScript有四种基本的数据类型,它们是:_______类型、_______类型、_______类型和_______类型

(1)数值(2)字符(3)布尔(4)对象

整个题目区域用一个表格来定义,这里答案显示区域为第二行第二列单元格中的一个嵌套表格,并用style="display:none"的CSS属性定义其初始内容为隐藏状态,用id="t1"定义该隐藏表格的id值为t1。第二行的第一列单元格中放置的就是“显示答案”按钮,并通过onclick="showhide(this,t1);"的代码实现单击事件编程,进而调用前面所定义的显示、隐藏功能函数。通过单击按钮时调用函数来改变t1表格的显示、隐藏状态,同时相应的改变按钮自身的显示文字

该页面实例所运用到的知识点主要包括:XHTML表格及表单元素的编辑、用CSS定义表格或层中的显示、隐藏属性、JavaScript的按钮事件编程,以及JavaScript函数的定义和调用,比较适合于作为JavaScript函数应用的教学实例。

3.2 “自测练习”中的JavaScript表单编程

3.2.1 “自测练习”的页面效果

“自测练习”栏目包括XHTML、CSS、JavaScript三组在线自测题目,全部采用单选题型,便于学生自查自己的课程知识掌握情况。浏览者在完成每组测试题后可以通过“交卷”按钮交卷,也可以通过“清除”按钮重新答题,如图4所示。

当浏览者单击“交卷”按钮时,首先弹出一个确认对话框以供确认,如图5所示,单击其中的“确定”按钮后即弹出测试结果提示框,如图6所示。

“自测练习”栏目还提供了类似于“习题配备”栏目中的显示、隐藏答案功能,可以一次性显示或隐藏本次测试中所有题目的答案,以供浏览者核对。

3.2.2 “自测练习”中的JavaScript编程及实现

1) 数组定义及函数功能

首先在页面头部插入如下的JavaScript代码,用数组标识本组测试题的答案,并编写相应的函数统计浏览者交卷后的答题情况。代码如下:

//标识正确答案,这个数组的最大下标就是总的题目数量

var ans=new Array;

ans[0]="null";

ans[1]="b";

ans[2]="b"

ans[3]="b"

ans[4]="a";

ans[5]="d";

ans[6]="c";

ans[7]="c";

ans[8]="d";

ans[9]="b";

ans[10]="b";

ans[11]="a";

ans[12]="c";

ans[13]="a";

ans[14]="a";

ans[15]="c";

ans[16]="b";

ans[17]="a";

ans[18]="b";

ans[19]="a";

ans[20]="b";

//标识正确回答的题目数量

var score = 0,flag=0;

//获得正确的题目数

function Engine(question, answer) {

if (answer == ans[question])

score++;

}

//"交卷"按钮的功能

function total()

{

//标识已经回答的答案

var t=new Array();

t[0]=-1;

score = 0;

flag=0;

for(i=1;i

{

var temp=document.getElementsByName("a"+i);

for (j=0;j

{

if(temp[j].checked)

t[i]=temp[j].value;

}

if(! t[i]) flag++;

Engine(i,t[i]);

}

//判断是否交卷,显示回答情况

if(window.confirm("你确定交卷?"))

{

if(flag==0)

{

if(score==20)

alert("恭喜你,你全答对了");

else

alert("你答对了"+score+"题"+",答错了"+(20-score)+"题");

}

else if(flag==20)

alert("你未回答任何题目");

else

alert("你答对了"+score+"题,答错了"+(20-score-flag)+"题,有" +flag+"题未回答");

}

}

//显示正确答案

function showhide(sname,sid){

if(sid.style.display=="none"){

sid.style.display="block";

sname.innerText="隐藏答案";

}else{

sid.style.display="none";

sname.innerText="显示答案";

}

}

2) 页面设置及JavaScript的表单编程

自测页面采用表单设计,其中包括每一小题的题目、选项、所有相应的单选按钮,以及三个功能按钮都属于同一表单。表单的内部用表格进行排版。为了与页面头部的JavaScript函数所使用的函数相对应,页面中每一小题用到的同组单选按钮name属性分别为a1、a2、a3……,其中每一组按钮对应的value值分别为a、b、c、d。然后分别对三个功能按钮的代码进行设置。

“交卷”按钮的代码为:

“清除”按钮的代码为:

“显示答案”按钮的代码为:

其中按钮的onclick 事件调用了showhide函数,函数中的第一个参数s对应按钮本身的id,第二个参数ans对应按钮下方的一个隐藏表格的id,表格中的内容就是自测题的答案。

该页面实例编程的主要难点是JavaScript表单编程中较为复杂的函数定义,以及函数与表单界面中各元素命名的结合,尤其适合作为锻炼学生综合的网页编程能力的教学实例。在实际的教学中,可以把自测结果所考虑到的各种情况由简入繁,从简单到全面,采用启发式教学,培养学生的发散性思维,以及严谨的编程方法和能力。

4 小结

对于《网页设计与编程》课程网站来说,除了实现课程所需要的网络教学平台的功能以外,其开发过程所用到的许多技术本身也属于课程的教学内容,因此可以作为一个贯穿整个教学过程的综合案例,使其充分发挥课程网站的作用。《网页设计与编程》课程网站的这双重功能已经成为本课程教学建设和改革中新的亮点和特色,并在实际的教学过程中取得较好的效果。