《新建网页──丰富网站的内容》教学设计

2024-08-19

《新建网页──丰富网站的内容》教学设计（通用3篇）

《新建网页──丰富网站的内容》教学设计篇1

《新建网页──丰富网站的内容》教学设计

【教材使用】宁教厅审定山东教育出版社出版软件FrontPage2000

【适用年级】8年级上册

【适用单元】网页制作第2大节

【教材分析】

本节的内容分为三部分：一是新建网页；二是添加图片；三是添加背景音乐。第一部分新建网页是本章节的重点部分，使用导航栏建立网页也是本章节中的难点；第二部分网页建立好要添加文字和图片信息将其做为一节课内容；第三部分背景音乐和下一节的网页的背景合成一节课内容，这样便于学生的理解和掌握。

第一部分新建网页，也是这一节课的内容，它是在创建站点和主页之后的内容，教材中详细地介绍了使用导航栏创建网页的过程，先设计站点结构，然后再编辑网页的内容。一笔带过的是在网页视图下创建网页的方法，是编辑一个个网页，再将网页组成站点。

本章节的一个难点是使用导航栏建立网页，学生接受起来不易，但使用这种方法组织的网站有头绪，有点像网站的“结构地图”，也易于后续链接知识的学习，同时也与前一节课中的网站准备工作中的网站组织结构图是相呼应的，它是网站宏观布局的具体实施的关键一步。

使用网页视图方式建立网页，在课本中一笔带过，但是从知识的呈上启下来看，学生更易接受这个方案，缺点是网站中建立许多个网页时，若无网站的组织结构图，建立工作将陷入迷茫中，同时也对后续的超链接的学习就造成一定的困难，因此课本中不采纳这种方法建立网页。

本节课采用先简单介绍网页视图方式添加网页，后过渡到导航栏中新建网页，这种方法：一是将知识合理顺延和过渡，从学生已知入手过渡到学生的新知；二是可以将难点分散进行学习，便于学生的理解与吸收。

在创建网页时导航栏与网页的重命名必须保持一致，这是本节课一个难点也是一个重点。

【学情分析】

学生在学习“创建站点”后，对软件中的导航栏的作用没有一个直观的理解，但是对于创建站点已经有了一定的了解，而创建网页的命令与创建网站的命令是一组，可以借助学生从已有知识过渡到难理解的导航栏中，因此可以从网页视图下添加网页的方法中过渡到导航栏中添加，这样学生能很平顺地接受在导航中添加网页以及理解它的优势。

【教学目标】

1．知识目标

（1）掌握打开站点的基本方法；

（2）掌握新建网页的基本方法。

2．技能目标

通过学生探究学习过程中，掌握新建网页的不同方法。

3．情感目标：

（1）通过新建网页的学习，培养学生的对比学习能力；

（2）利用导航栏知识，培养学生的整体布局网站的综合信息素养能力。

【教学重、难点】

1．在使用导航栏建立网页时，导航栏中的命名与网页的命名一致是难点；

2．网页名称应与网页中的信息一致是重点。

【课时安排】2课时

【教学方法】对比法、任务驱动法

【课前准备】软件FrontPage2000 多媒体广播系统

【教学设计】

第一课时

在网页视图下添加网页教学过程

教师活动

教学意图

学生活动

一、导入部分

上节课我们建立了“我的家乡”站点，大家能使用“我的电脑”或“资源管理器”找到他们吗？找到后请大家打开站点并预览自己所编辑的主页信息。

问：大家看看自己编辑的主页信息中有没有错误？有错了，该如何修改？

问：一个网站中一张网页不能够表达一个站点的所有信息，那就需要许多个网页，我如何增加网页呢？

我们这一节课就来解决这些问题。（板书课题：第2节新建网页）

（1）使学生确认自己站点所在的位置，复习上节课预览网页的知识便于后面知识的学习。

（2）通过学生的观察，发现问题，激发学生解决问题的兴趣。

（3）留给学生思考的问题，让学生带着问题学习新知。

从计算机中查找自己的站点„„

学生观察发现问题„„

学生思考„„

二、新课部分

1．打开站点

2．新建网页

3．保存网页及网页重命名

（任务一）大家看到页面状态是浏览状态，在这个状态下是不能修改网页信息的，如果想修改只能在网页的编辑状态下才行，因此大家必须启动网页的制作软件FrontPage2000。

（任务二）刚才大家也看到主页是在站点文件夹之中，因此我们要打开站点才能看到主页，并修改主页。看看软件中“文件”菜单栏中有没有“打开站点”这个命令，并动手尝试的打开自己的站点。

教师辅导„„

（任务三）大家已经打开网站，看看“文件”菜单中有没有添加网页的命令，自己动手试试给自己的站点增加两个网页“宁夏风景名胜”和“宁夏古诗文欣赏”。同时结合课本P67将相应的网页的文字内容录入到网页中。大家可以互相交流。

教师进行辅导„„

（任务四）大家刚才建立了网页，并为网页添加了文字，因此需要大家及时将自己的网页保存在网站中。大家动手实践„„ 教师进行辅导„„

广播展示命名时出现的问题„„

（1）在大家保存时应正确选择自己的站点，输入网页名称即可保存。

（2）在此过程中，有的同学未能输入网页名称，就点击保存了，出现一个现象：网页全部都是new-page_1(2，3，4)．htm的形式，多了自己也被迷糊了。出现这种情况时大家可以使用文件夹列表窗体来重新给网页命名。具体操作：选中你的网页文件，使用右键的快捷菜单完成，它的操作类似于“资源管理器”中的命令操作。一定要注意命名时不能将网页的属性．htm丢弃了，若已经丢弃，请将它加上。

（3）保存完成后，若还想给网页增加信息，一定要在文件夹列表窗体中双击网页的名称，当你看到你所双击的网页名称与编辑窗口中的名称一致时，在输入信息，完成后随时保存信息。

让学生了解在什么状态下可以修改网页。

引导学生从已知过渡到新知来学习打开站点方法，达到举一反三效果。

学生已经在新建站点中看到过新建网页，很容易接受，同时通过交流达到共同进步。

引导学生保存自己的网页。学生在动手过程中就会引出重命名操作。

将本节课的难点集中展示出来，并纠正出错的原因

学生启动制作软件„„

学生动手实践„„

学生改正自己错误„„

三、小结

这节课你都学会了什么？

巩固本节课知识

学生自己总结„„

第二课时使用导航栏添加网页教学过程

教师活动

教学意图

学生活动

一、导入部分

教师打开学生的一份网站作品进行展示„„

（将作品的本人叫起来）问：你的网站中的网页表达的什么信息？再问：你的网站还想需要表达什么内容？

设想：当你的网页增加的比较多时，你会发现自己的思路不一定很清晰。想解决这个问题，大家必须手绘一个网站组织结构图才能，这样也会带来许多不方便之处。还有没有能直接体现出来我们网站的组织结构图来呢？有的。可以使用导航栏来建立网页。

（板书课题：使用导航栏建立网页）。

引导学生说自己的创作意图

引出本节课的课题

学生表述自己想法„„

二、新课部分

1．导航栏的作用

2．新建网页

视图栏中“导航”按钮是一个站点创建和系统管理的显示视图。使用导航栏新建网页，先组织网站的结构，后为每个网页添加内容。这与我们第一节准备工作中组织的网站结构图就相互呼应起来，思路清晰明了。

（任务一：）大家结合课本P64完成“做一做”。

教师进行辅导„„

广播展示出现的问题„„

（1）FrontPage 2000只是当你在一个站点上工作时才会创建导航栏，独立的网页则不行。

（2）导航栏中主页是第一个添加到导航结构的网页，一般都叫做default．htm或index．htm，想进行添加新网页时，应注意网页之间网页的层次关系。父层网页是包含另一个网页的父网页，其他网页是他的下一级。导航栏可以横排或竖排。

（3）导航栏中若出现层次错误时，可以使用拖动的办法来改善他们的层次。

（4）导航栏中的命名应与双击后进入的网页名一致才行，这是本节课的难点。

（5）上节课我们已经建立的网页如何到站点中？在视图窗口点击“导航”按钮，切换到导航视图。在文件夹窗口中将文件“宁夏风景名胜．htm”和“宁夏古诗文欣赏．htm”拖动到“导航”窗口，仔细选择停放的位置，让示意图标和其他二级图标在一个线上，然后就看到这两个文件成为站点的一部分了。

引导学生了解使用导航栏的优势。

难点集中解决„„

学生实践„„

学生进行改错„„

三、练习

课本P75第1题。

巩固本节课知识

四、小结

这节课你都学会了什么？

学生自己总结„„

【教学反思】

本节课，若按课本中的思路进行，学生学完后，只会依葫芦画瓢，只知其所以然，而不知其所以不然，还是处在一种困惑中。

由此，我将这节课改成两节上，即分散难点知识，又便于学生掌握，学生在学习的过程中实践比较多，在实践过程中不断出现新的疑问，可以激发学生的解决问题的积极情绪，对普遍出现的问题可以通过广播系统来解说，师生互动比较多，教师真正起到了“引”的作用。

《新建网页──丰富网站的内容》教学设计篇2

目前大多数单位的网页防篡改系统是直接采购现成的系统,并且现有CMS的设计没有考虑与网页防篡改系统相结合来应用,所以为了配合网页防篡改系统的部署,必须对CMS进行适当地改造。鉴于此,本文提出一种能与网页防篡改系统相配合的互动网站内容管理系统改造方案。

1 网页防篡改系统的实现原理及其局限性

1.1 网页防篡改技术的实现原理

首先来看看网页防篡改技术是如何实现的。网页防篡改系统可分为三个部分:备份端、监控端和控制端。备份端是网页源文件存放的服务器,通常部署有CMS;监控端是部署在面向互联网的WEB服务器上,监控端技术是网页防篡改技术的核心,目标是实现准确、迅速地检测、阻止或恢复对目标文件的非法修改、删除和添加;控制端是防篡改系统的管理工作站,负责与监控端建立连接,准确实时地获取并显示监控信息,发送监控命令,进行日志操作,获取报警信息等。

目前国内外常见的网页防篡改技术主要有:

(1)时间轮询技术:利用一个网页检测程序,以轮询方式读出要监控的网页文件,与备份端网页文件相比较,来判断网页内容的完整性,对于被篡改的网页进行报警和恢复。

(2)核心内嵌技术+事件触发技术:核心内嵌技术即密码水印技术,最初先将网页内容采取非对称加密存放,在外来访问请求时将经过加密验证过的网页进行解密对外发布,若未经过验证则拒绝对外发布,并调用备份端网页文件进行验证解密后对外发布。

(3)文件过滤驱动技术+事件触发技术:将篡改监测的核心程序通过操作系统文件底层驱动技术应用到服务器中,通过事件触发方式进行自动监测,对文件夹的所有文件内容,对照其底层文件属性,经过内置散列快速算法进行实时监测,若发现属性变更,通过非协议方式,纯文件安全拷贝方式将备份路径文件夹内容拷贝到监测文件夹相应文件位置,通过底层文件驱动技术,整个文件复制过程达到毫秒级,使得公众无法看到被篡改页面。

1.2 网页防篡改系统部署的局限性

根据网页防篡改技术的实现原理可以知道,网页防篡改系统保证了监控端的文件与备份端的文件的一致性,所以为了WEB系统整体的安全性,必须是将备份端服务器部署在安全的内网,也就是产生备份端网页文件的CMS也必须部署在内网。

然而很多网站的功能是丰富多采的,比如媒体类网站的“在线投稿”、政务类网站的“网上行政审批”等互动功能,必须要求CMS面向公众,面向互联网,这样就意味着CMS服务器必须部署在外网区,如此,做为数据源的备份端如果受到攻击,那么防篡改系统的保护就毫无意义了。

2 内容管理系统的改造方案

2.1 需求分析与设计思路

为了实现网站的互动功能,又不破坏防篡改系统的整体安全性,本文提出对现有CMS进行轻量级地改造,将发布功能模块从CMS系统中独立出来,且对用户操作透明的设计方案。以下就以在线投稿功能为例,阐述方案的设计思路。

先来看看在普通的CMS中,处理一篇投稿的工作流程。首先,在线投稿用户登录CMS提交稿件后,CMS将稿件页面的文字信息保存在后台数据库中,页面中的图片或其他附件则是上传到CMS服务器本地。而后,网站审核员对该稿件进行审核确认后,CMS将自动生成对应的静态页面或动态页面,即在网站上发布了该稿件。在这投稿、审核、发布的流程当中,对于存储在数据库中的稿件文字信息的防护,网页防篡改系统是无能为力的,因此本文并不讨论对数据库信息的防护,而对于投稿用户提交的图片和其他类型的附件却是网页防篡改系统保护的本职所在。所以,改造方案所要解决的问题的实质就是如何处理用户提交的图片及附件。

本文提出的改造方案是将现有的CMS拆分为内容审核系统和内容发布系统,分别部署于外网区(防火墙DMZ区)和内网区。待审核员确认一稿件审核通过时,内容审核系统将自动向内容发布系统提交审核员占个账号、密码及稿件ID信息,之后由内容发布系统自动下载内容审核服务器上的图片及附件文件,并连同数据库中读取的稿件正文一并生成稿件的静态网页文件,至此,审核过程完成,向审核员浏览器返回操作成功页面。最后由防篡改系统将静态网页和图片、附件等网页文件自动同步到监控端——WEB服务器。系统的数据流如图1所示。

2.2 系统的拓朴结构

系统部署的拓朴结构如图2所示。其中WEB服务器和内容审核服务器是两个逻辑上独立的站点,在实际部署中可以部署在同一台物理服务器上,所以新的部署方案并不会增加硬件的开销。

2.3 方案实现的技术要点

(1)内容审核系统加密提交账号等信息。为了实现对审核员操作的透明性,审稿操作过程中的自动从内容审核系统切换至内容发布系统。为了保证这一过程的安全,防范最坏情况的出现——内容审核服务器沦陷后被安装了监听程序,内容审核系统向内容发布系统提交的审核员账号、密码及稿件ID信息必须经过加密,内容发布系统解密验证后再进行之后的操作。

(2)内容发布系统远程下载的实现方法。内容发布系统复制内容审核系统的图片及附件文件是通过远程下载实现的,如果内容审核系统的设计是将附件文件的路径保存在数据库中,那么以﹒NET平台为例,可以利用WebClient类的DownloadFile()方法实现将内容审核服务器上的文件下载到内容发布服务器;如果内容审核系统的稿件是由网页编辑器生成,那么可以先通过正则表达式匹配稿件的HTML源代码获取附件文件的路径。如下列返回图片名称的正则表达式:

这个表达式可以匹配如“IMG SRC="../image/01/10001jpg"”类似的字符串,以获取图片的相对路径。

(3)利用防篡改系统对内容审核服务器进行防护。虽然内容审核服务器面向互联网,但是也并非无防可守。由于防篡改系统一般都具有指定目录监控功能,所以可以指定对系统的脚本等关键目录进行保护,充分利用防篡改系统的防护功能。对于附件保存目录,虽然不能将之设置成写保护,但是可以严格设置其访问权限,如取消其可执行权限。

3 结束语

本文讨论了网页防篡改系统的技术原理及局限性,并介绍了为配合网页防篡改系统的部署,实现网站的互动功能,对现有CMS进行轻量级改造的设计方案,不破坏CMS现有的架构,只是将CMS中内容发布功能独立出来部署在内网中安全的服务器上运行。方案改造的工作量小,不降低WEB系统的整体安全性,不增加硬件开销,且操作上对用户透明,是易于实施和部署的。

此外,对于WEB系统的整体安全而言,由系统的数据流图可以看出,数据库在CMS中的作用贯穿始终,但是网页防篡改系统对数据库的防护却无能为力。虽然数据库的安全防护不在本文讨论之列,但是正如木桶原理所指出的,WEB系统的安全防护应该是一个立体的综合防护,本文提出的方案应当和其他的网站加固方案一起综合应用,这样才能让CMS不会成为木桶中的那块短板。

摘要：为了安全,网页防篡改系统要求将网站内容管理服务器部署在内网,而具有在线投稿、网上行政审批等互动功能的网站内容管理系统必须面向共众,面向互联网。为了配合网页防篡改系统的部署,本文介绍了对互动网站内容管理系统的一种轻量级改造方案,不降低WEB系统的整体安全性的前提下,实现互动用户直接通过互联网访问,操作上对用户透明,并且易于实施和部署。

关键词：网页防篡改,网站信息安全,互动网站,内容管理系统

参考文献

[1]吴瑟,唐保国.网页防篡改系统方案的研究与实现[J].电脑开发与应用.2010.

[2]姚滢.网页防篡改系统的研究与设计方案[J].计算机安全.2010.

《新建网页──丰富网站的内容》教学设计篇3

关键词：网站设计与网站管理教学网站 ASP DIV CSS

一、构建课程教学网站的目的及意义

随着互联网和信息技术的飞速发展，我们的学习方式也在产生变革，学生在查找资料时，从传统的查阅图书到了如今的利用互联网络上的资源为自己答疑解惑。电子商务专业与信息技术紧密相关，而网页设计与网站管理作为电子商务专业的必修课程，更应该实现学科教学与信息技术的完美结合，这必将成为当今学校教学的发展趋势之一。

通过构建课程教学网站，可以给学生和老师提供一个交流的平台，给学生提供一种学习的辅助工具，实现教学资源的共享，提高高校教学质量。

二、构建课程教学网站的技术与方法

1、DIV+CSS

DIV+CSS是一种常用的网页布局方法，这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式，可实现网页页面内容与表现相分离。不仅让整个网页看起来条理清晰，而且修改起来很方便。

2、ASP+IIS+SQL

现在常用的网站开发语言有ASP、PHP、JSP、ASP.NET等。ASP是微软所开发的一种后台脚本语言，它的语法和Visual BASIC类似，虽然ASP存在着安全性等问题，但是它简单易用。目前在微软的.net战略中新推出的ASP.net借鉴了Java技术的优点，使用C Sharp （C#）语言作为ASP.net的推荐语言，同时改进了以前ASP的安全性差等缺点。但是平台的局限性和ASP自身的安全性限制了ASP的广泛应用。

PHP的源代码完全公开，平台无关性是PHP的最大优点，但是如果在PHP中不使用ODBC，而用其自带的数据库函数来连接数据库的话，使用不同的数据库，PHP的函数名不能统一。这样，使得程序的移植变得有些麻烦。

JSP的最大优点是平台无关性，除了这个优点，JSP/Servlet的效率以及安全性也是相当惊人的。因此，JSP/Servlet虽然在国内目前的应用并不广泛，但是其前途不可限量。

如今主流的Web服务器软件主要由IIS或Apache组成。IIS支持ASP且只能运行在Windows平台下，Apache支持PHP，CGI，JSP且可运行于多种平台，虽然Apache是世界使用排名第一的Web服务器平台，但是众所周知，Windows以易用而出名，也因此占据不少的服务器市场。

综合以上分析，在构建课程教学网站时，采用的是DIV CSS的网页布局方法，结构清晰，修改方便；开发环境选择的是微软的ASP和IIS应用服务器，由于其简单易用，便于学生参与；数据层选择的是SQL Server2008，它是迄今为止最强大最全面的SQL Server版本。

三、课程教学网站的主要内容

1、提供注册登录功能，让学生能够实名上传作业，下载教学课件等；

2、课程安排，将理论课程、实验课程及课程设计安排详细说明及指导文档上传到网络，使学生能把握课程学习的进度；

3、提供教学视频，上传与课程相关的视频供学生学习；

4、作品展示区域，将往届优秀的学生作品在网上展示，供学生观摩学习；

5、开设交流论坛，供学生与老师或学生与学生之间进行交流；

6、资源推荐，将与课程相关的优秀资源网站链接推荐给学生。

根据以上分析，课程教学网站的结构如下：