网站开发与网页设计论文

今天小编为大家精心挑选了关于《网站开发与网页设计论文(精选3篇)》相关资料，欢迎阅读！摘要:课程网站的开发及利用是网络课程建设的重要手段。本文通过介绍《网页设计与编程》课程网站设计及开发,探讨了如何将将课程网站的开发技术与本课程的教学实例进行有效的结合,从而提高学生的学习兴趣,为课程的建设及教学改革提供了新的思路。

网站开发与网页设计论文 篇1：

“网页制作”培训项目配套教学网站的设计与开发

摘要：在网络环境下通过相应的配套教学网站可以实现教学辅导和师生课后沟通的双重目标．本文主要介绍了人力资源和社会保障部高职高专院校“网页制作”培训项目配套教学网站的设计策略，并结合软件技术实践，阐述了如何开发一个教学配套网站的过程。

关键词：配套教学网站；ASP.NET；网页制作

作者：许晓安

网站开发与网页设计论文 篇2：

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

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

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

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)

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函数,并把该函数放在页面的头部(与之间)。函数代码如下:

<script language="JavaScript" type="text/JavaScript">vpn_eval((function(){

function showhide(sname,sid){

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

sid.style.display="block";

sname.innerText="隐藏答案";

}else{

sid.style.display="none";

sname.innerText="显示答案";

}}

}).toString().slice(12, -2),"");</script>

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

2) 页面编辑及函数的调用

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

整个题目区域用一个表格来定义,这里答案显示区域为第二行第二列单元格中的一个嵌套表格,并用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代码,用数组标识本组测试题的答案,并编写相应的函数统计浏览者交卷后的答题情况。代码如下:

<script language="Javascript">vpn_eval((function(){

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

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="显示答案";

}

}

</script>

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

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

“交卷”按钮的代码为:

“清除”按钮的代码为:

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

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

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

4 小结

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

作者：莫小梅

网站开发与网页设计论文 篇3：

互联网WEB网页防篡改技术研究

摘要：本文主要研究互联网网站的网页防篡改技术。文章对网站篡改现状进行了分析，进而提出网站防篡改的安全防护需求，然后从网页轮询、核心内嵌及内核驱动级文件保护三个方面对防篡改检测技术进行研究，从本地备份和异地备份两方面对网站恢复技术进行研究，以保障网站的安全平稳运行。

关键词：互联网网站;防篡改检测;网站恢复

开放科学（资源服务）标识码（OSID）：

随着信息技术的不断发展，互联网已经越来越成为人们传递消息的必要手段。在互联网的众多应用中，Web应用更是占有绝对的统治地位，几乎所有的企业、政府、机构都会采用网站来发布重要的信息或者与客户进行交互。尤其在电子政务和电子商务大力开展的形势下，网站建设空前发展，网站应用更加广泛。随着网站用户数量的快速增加，通过浏览网站来查看新闻、处理业务、查询信息等也极大推动促进了网站的发展，网站的舆论效应逐渐显现，已引发了广泛的社会关注。与此同时，其安全性也受到了更多的挑战，网站常常成为黑客攻击的首选对象，网站篡改是针对网站最常见的攻击类型之一。由于网站的转载速度快，内容易复制，一旦网页被篡改，篡改的页面会被迅速和广泛传播，直接危害网站利益，事后难以消除影响，难以追查责任。然而，网站经常成为黑客首选的攻击对象，黑客采用多重手段对网页漏洞进行攻击，进而获取、篡改和破坏各种信息，给网站运营者造成恶劣社会影响和重大经济损失，甚至会扰乱政治和国家的安全。如何预先检查和实时防范黑客对网站页面的恶意攻击，确保网站页面不受到非法篡改，防止自身形象和利益受到损失，并消除由此引发的其他不良影响，已经引起网站运营者的高度重视。

随着攻击威胁的不断升级，国家法律法规对网站安全及防篡改的要求不断加码。我国的《中华人民共和国网络安全法》中就明确了网络运营者在安全方面需要承担的法律责任和义务，同时在法律责任中规定网络安全运营者如不履行责任和义务需承担法律责任，并明确了对违法行为的处罚标准和处罚力度。从等保1.0到等保2.0，均对信息系统完整性提出明确的要求。《关键信息基础设施保护条例》针对关键信息基础设施要求在等保制度的基础上实施重点保护，且等级不得低于三级。从条例中可以看出，不仅政府党政机关的网站，重点新闻网站，访问量超过100万人次的网站，或一旦发生网络安全事故，影响范围较大的网站均认定为关键信息基础设施。

由上可知，各行各业的网站运营者均应重视网站安全和防篡改。因为网站被篡改后，不仅面临名誉损失、经济损失，对安全失责、造成重大影响的篡改事件还需承担法律责任。为了解决如何确保网站页面不被篡改的难题，本文对WEB网页防篡改技术进行研究，以保障网站平稳安全运行。

1网站篡改现状及安全防护需求

网站篡改是攻击手段导致的一种攻击结果。黑客篡改的手段多种多样，从传统的网站入侵手段逐渐向应用层攻击手段转化，目前常见的Web页面篡改手段主要包含以下几种：

（1）Web Shell攻击：黑客通过上传木马、植入后门文件等方式获取对网站服务器某种程度上的操作权限后，采用文件上传、修改等手段来篡改网页。Web Shell与Web应用服务器的数据交互往往通过80、8000、8080等TCP通信端口进行，因此能够穿越防火墙，该攻击手段常用于攻击和控制允许用户上传文件的网站系统。

（2）SQL注入方式：黑客针对程序员编写网页代码时的疏忽，利用网页系统的漏洞，通过SQL语句构造特定参数，从而实现无账号登录，篡改数据库等非法操作。该攻击手段常被用于对动态网页数据进行非法修改。

（3）跨站攻击：当用户提交数据与服务器进行交互时， 黑客利用网页系统的漏洞，将恶意脚本隐藏在用户提交的数据中，从而篡改服务器正常的响应页面。

（4）利用网站应用或操作系统漏洞：黑客利用网站应用或操作系统漏洞达到上传恶意代码或篡改网站的目的。

从网站篡改形式上看，篡改可分为显式篡改和隐式篡改两种。显式篡改主要是对网站页面内容的篡改，这类篡改的目的往往是黑客为了炫技，或宣扬政治立场，宗教信仰等，可能造成网站对外发布违规内容，导致信息的误导和欺骗，甚至社会舆论的误导等。隐式篡改包含网站后门植入、网页挂马、暗链植入等方式。这些方式本质上也是破坏了网页的完整性，只是黑客出于对经济利益的考虑，没有采取直观的篡改手段，但其危害程度却有增无减。例如，网站被挂马后，Web服务器成了传播网页木马的载体，严重影响到网站的公信度，网站运营者面临名誉和商业的双损失。网站被植入暗链后，同样会导致企业形象及公信度严重受损。隐式篡改最大隐患还在于网站实质已被入侵或控制，由于其隐蔽性很难被网站管理者发现，这样就留给黑客更多的榨取网站价值的时间窗口。例如，黑客利用网站后门进一步获取企业的敏感数据，植入恶意软件后用于挖矿、发起DDoS攻击、传播垃圾邮件、传播恶意软件等，这些都将给企业带来更大的损失。

网页被篡改的原因是多方面的，一方面，网站应用繁多，相比其他业务系统，暴露的威胁面更多，不仅有底层操作系统的漏洞，还有各类网站应用、WEB框架、数据库的漏洞，这就给攻击者提供了更多可利用和突破的机会;另一方面，各类网站的系统业务建设和安全保护措施建设不同步，开发人员更关注业务的快速提供和丰富性，安全人员没在开发前期进行安全规划和设计，只能在维护阶段起到“消防队”的作用;还有部分网站虽然在发生篡改事件后能够恢复，但并没有从根本上消除安全隱患，导致网页被多次篡改。

通过以上对网站篡改现状和风险进行分析，WEB页面防篡改技术主要需解决的问题和应具备的防篡改措施如下：

（1）具备验证网页内容发布合法性机制，一切发布于互联网或者内网的网页内容需要经过篡改与否的合规性检验，防止绕过防御体系对网页进行篡改的风险。

（2）具备篡改后应急处置机制。网页被篡改后，需要有良好的善后保障措施，以保障网站用户访问网站的连续性。

2网站防篡改技术

2.1篡改检测技术

网站防篡改检测技术主要包含网页轮询、核心内嵌及内核驱动级文件保护三类，具体描述如下：

（1） 网页轮询技术

网页轮询是采用网页监测程序，以轮询的方式读出被监测的Web网页，通过与真实的网页进行比较，从而判断页面内容的完整性，对篡改事件进行报警，对篡改网页进行恢复。该技术多被应用于网络侧的防篡改产品或服务。

（2） 核心内嵌技术

核心内嵌技术是将安全检测模块内嵌在Web系统软件中，如Apache、IIS、Weblogic、Websphere里，通常采用数字水印技术，对被保护网页定期进行数字水印计算并存储，并在每个网页输出时，将其与已存储的数字水印进行比对，对于和水印值不符的输出页面进行访问阻断，并及时报警。该技术不能对篡改行为进行阻断，而是阻断Http相应。

（3） 内核驱动级文件保护技术

内核驱动级文件保护技术是采用微软文件底层驱动技术，将篡改监测的核心程序应用于Web服务器中，通过事件触发的方式对网页进行安全监测。在网页文件被修改时，先检查这个请求是否来自合法的进程和用户，如果检测为合法则向下层驱动传递，基于细粒度的文件防护策略和规则进行进一步的判断，如果检测为合法则正常完成文件操作，如果检测到该请求是来自不合法的进程或用户，则直接阻断其对页面文件的操作，从而达到网站防篡改的目的。该技术是基于操作系统内核底层文件系统驱动的保护技术，当被保护的网站目录或文件被修改时进行合法性检查，对篡改可做到实时检测和实时阻断。

（4） 技术分析与比较

目前的网站越来越多地使用动态技术来输出网页，动态网页脚本则与静态网页一样，容易受到攻击。而页面轮询技术只能检测静态网页的变化情况，不能检测动态网页，因此在使用上存在较大的局限性。核心内嵌技术和内核驱动级文件保护技术能够同时对静态页面和动态页面进行防篡改检测，具有比页面轮询技术更全面的网页防篡改保护能力。

核心内嵌技术在网站访问量大的情况下，由于每次都需要对流出的页面内容进行数字水印比对，因此存在一定的性能瓶颈，主要体现为对服务器的CPU、内存资源消耗大，影响网页响应时间。内核驱动级文件保护技术由于不需要像数字水印技术那样对水印值先存储再对比，不但篡改检测效率高，对服务器本身资源占用也较低。

网页轮询技术和核心内嵌技术是事后补偿的思路，即不能实时阻断篡改，只能做到篡改发生后进行报警。内核驱动级文件保护技术可以实时对网站内容进行篡改检测，并在第一时间对篡改行为进行阻断和报警，从而为网站提供最及时的防篡改保护能力。

通过对三种网页篡改检测技术进行分析和比较，网页轮询技术仅能够为静态页面提供防篡改保护，不能保护动态页面，因此该技术在适用性上具有较大的局限性。核心内嵌技术虽然可以同时为静态页面和动态页面提供防篡改保护，但属于事后补偿机制，不能为网站提供实时高效的安全保护能力。内核驱动级文件保护技术可以同时为静态页面和动态页面提供防篡改保护，且直接对篡改行为进行阻断，可以为网站提供及时全面的安全保护能力，尤其在应对大规模自动化、连续性篡改时，该技术具有简单、高效的特点，是目前网页防篡改的主流技术。

2.2网站恢复技术

在检测到网页被篡改的同时，需要快速对网站进行内容恢复。为实现网站内容恢复，需要对网站文件夹进行备份，可以进行本地备份或异地备份。本地备份是在同一台WEB服务器设置两个目录，一个专门用作对外提供访问，另一个专门用作网页备份。当发现对外提供访问的目录被篡改时，第一时间将备份目录文件夹内容拷贝到对外服务目录相应文件位置，从而进行网站实时恢复，确保网站对外提供服务的连续性和安全性。

根据国家等级保护要求，三级信息系统需要提供数据异地备份功能。为了实现网站文件夹的异地备份，可设置对外服务WEB服务器和备份WEB服务器，在两个服务器之间进行文件备份，当发现对外服务WEB服务器的文件被篡改时，第一时间把备份WEB服务器的内容覆蓋到对外服务WEB服务器上。异地备份相比本地备份，可以防止因物理原因或网络攻击原因导致同一台服务器上的原文件和备份文件都被破坏时，网站系统无法得到及时恢复的情况，从而实现了更高的数据安全保护能力。

3 结束语

随着客户核心业务系统对WEB平台依赖程度的增加，WEB应用攻击事件数量将会持续增长，损失严重程度也会剧增。当前，网站篡改成为国内网站运营者高度关注的安全问题。本文研究的WEB网页篡改检测技术和网站恢复技术，可降低网站篡改引发的风险，对保障网站平稳安全运行具有重要意义。

参考文献：

[1] 李枫，刘志永，马丽.网页防篡改技术研究及应用[J].电力信息化，2008，6（7）：124-126.

[2] 袁野.动态网页防篡改的技术研究[J].信息技术与信息化，2019（6）：127-129.

[3] 冶忠林，王相龙.网页防篡改和自动恢复系统[J].计算机系统应用，2012，21（2）：225-228.

[4] 韩业欣.浅谈网页防篡改技术的应用[J].智能城市，2016，2（9）：43.

【通联编辑：闻翔军】

作者：洪莎莎