《网络教育应用》实验教案完整版.docx

1、网络教育应用实验教案完整版网络教育应用实验教案系别：教育科学与技术系年级：教育技术学2008级教师：黄克斌2010年9月网络教育应用实验教案目 录实验项目：实验一 HTML标记的基本语法和Dreamweaver的基本操作实验二 表格的使用实验三 表单及JavaScript/VBScript 的使用实验四 ASP编辑环境及ASP基本语法实验五 ASP对象内置对象实验六 使用ADO对象访问数据库实验七 使用ASP内置组件实验八 CSS样式表实验九 层和时间线动画实验十 框架实验十一 行为实验十二 综合应用开发实验注意事项：1、 实验之前应认真阅读实验讲义及教材有关章节。2、 实验室内禁止抽烟、禁止

2、大声喧哗。3、 严格按照规定操作所有仪器设备，如有损坏或丢失，应及时报告，并根据情况进行赔偿。4、 实验中注意原始数据的记载和保存。5、 注意保持场地清洁，实验完毕，主动协助指导教师清扫整理实验室。6、 实验之后，认真填写实验报告。实验一、HTML标记的基本语法和Dreamweaver的基本操作一、实验目的：1、熟悉HTML文件的编辑环境（记事本或Dreamweaver），了解HTML文件的基本结构，并使用Internet Explorer测试HTML文件的操作。2、了解网站的制作流程，掌握用Dreamweaver建构网站和制作网页的主要步骤。3、掌握HTML中与文字、图片、页面有关的基本标记

3、。4、掌握用Dreamweaver中文字、图片、页面的处理方法。5、了解HTML中与超级链接有关的HTML标记。6、掌握在Dreamweaver中制作一般链接、邮件链接、锚点链接、文件下载的方法。7、学会用Dreamweaver制作图像映射、导航条、跳转菜单。二、实验内容：1、用Dreamweaver MX 2004建立一个本地站点，站点名为Mysite。2、在Mysite站点中建立一个首页：index.htm（样式参照实验资料附录：index.jpg），设置好首页的大小、样式、背景，并在首页中插入文字、图片、链接、邮件链接、锚点链接等内容。三、实验原理建立一个网站，首先要在本地机器上做好网站

4、，再传到网上的虚拟空间上。本地站点的建立定义好之后，就要开始新建网页文件和文件夹。网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。论坛这个栏目的命名，大家都是用b

5、bs作文件夹名称。四、实验步骤1、在硬盘上建立一个站点目录如：F:Mysite，文件夹Mysite下建立有文件夹pic、fla、css、db等，分别用于存放网站中可能用到的图片、动画、样式以及数据库等文件。打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点， 接下来需要给站点起一个名字，可以起任意一个名字。按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。 按下一步，选择要定义的本地根文件夹，这里选择Mysite文件夹。

6、点“选择”按钮，因为没有使用远程服务器，就选择“无”。 按下一步，在出现站点相关信息对话框下选择“完成”按钮，一个站点就定义好了。2、站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件，给新建的文件输入名称，如index.htm。3、双击Mysite站点中的index.htm，打开一个空白的页面。我们将从这个空白页面开始制作，了解页面属性的设置和作用。在工作区点鼠标右键，选择页面属性，打开页面属性对话框：在其中，我们可以设置页面的边距、背景、链接等属性。设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。用得比较多的还有背景图像，选择一

7、个已经做好的图像，就可以设置成页面的背景图像。4、页面大小参数的设定现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。 采用象素为单位，是使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800600的分辨率。 使用百分比，可以在各种显示器上有相同的效果，宽度设置为100时，在各种显示器上全屏显示。下面分别介绍这两种方法。简明步骤：打开一个页面插入表格设置表格宽度打开index.htm文件，点击插入表格图标，打开“

8、插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0。一个可以在各种显示器上全屏幕显示的网页就搭建好了。以后要做的是在表格里填充内容。下面介绍象素大小的表格设置，选择像素为单位，值为768。可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。相对使用百分比制作网页，采用像素比较简单。做一个在800600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。完全下载一个表格的内容，才能在IE中显示出来。如果页面文件小，可

9、以只有一个表格放内容。如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。5、页面的版式设计做一个网页，先要规划好版式，通过插入表格可以实现网页版式的布局。常用的版式是分栏结构，如下图所示， 以上是一个主页的简单结构，由三个表格组成。第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。典型的二分栏结构。下面一个表格，一行一列，放版权声明。常见的分栏结构，还有三分栏，四分栏，下面是一个三分栏的结

10、构：6、Dreamweaver的使用使用Dreamweaver MX工作区，默认的界面中，工作区很小，如果要把工作区变大，选择工作区右侧、下侧的三角形按钮，就可以隐藏面板组和属性面板。如果要使用面板组，再点击三角形按钮。在Dreamweaver工作区中，可以插入文字、图片、动画以及一般链接、邮件链接、锚点链接、文件下载等等。7、了解Dreamweaver工作区中，文字、图片、动画以及链接等对应的HTML标记。8、利用文本编辑器，输入编辑下面的HTML代码，存盘，然后用浏览器打开浏览效果。 这是我的第一个网页文件 这是正文内容。 并试着更改其中内容，看有什么变化。实验二 表格的使用一、实验目的：

11、1、了解HTML中与表格及表格属性有关的HTML标记。2、掌握在Dreamweaver中制作数据表格和排版表格。3、了解特殊表格在Dreamweaver中的运用。二、实验内容：在Mysite站点中完善首页index.htm，实现参照样式index.jpg相同的版面布局结构，并再现相同的效果。本次实验将学习网页制作中与表格有关的HTML标记，通过本次实验，应熟练掌握用DreamWeaver制作数据表格和排版表格。三、实验原理Dreamweaver MX 2004在表格的设计上做出了很大的改进。使用表格可以清晰地显示列表的数据，而且它在网页定位上起着重要的作用，尤其是对于使用非IE浏览器的用户来说

12、，使用表格定位的网页比使用图层定位的网页更具有优势。在插入菜单栏中，选择插入表格后， Dreameaver 弹出表格设置框，如下图所示：对话框中，可以设置表格的行数和列数。另外也可以设置其它参数：表格宽度：两种表示形式，像素和百分比，设置为像素后，则表格的页面固定，不能随着显示器的大小改变而改变；设置为百分比后，表格的页面大小可以随着显示器分辨率的大小不同而自动改变。边框粗细：设置为0则不显示表格边框，显示边框通常设置为1。单元格边距：表示单元格内部文字、图片等元素距离单元格边框的距离。单元格间距：表示单元格与单元格之间的距离。页眉：快速设置表格的样式。标题：设置数据输出的表格题头，用于说明表

13、格的内容，如：表一 学生成绩表等。对齐标题：设置数据输出的表格题头对齐方式，可以是左对齐、右对齐、顶部对齐和底部对齐。表格对应的HTML标签为： 行对应的HTML标签为： 列对应的HTML标签为： 在Dreamweaver MX 2004的设计视图中，先将光标放入单元格中，用鼠标单击HTML标签栏上的标签，可以选中整个单元格、行以及整个表格。在设计视图中，还可以设置单元的边框、背景等。通过对表格的添加、删除、合并、拆分等操作，可以很好的实现数据输出和版面布局的需要。Dreamweaver MX 2004新增加了表格宽度辅助线功能，我们在编辑网页表格的时候能清楚地看到表格中各单元的宽度以及变化，

14、很直观。如果我们不想让Dreamweaver MX 2004自动显示宽度辅助线，选中表格，点击宽度辅助线数字和小三角形，从菜单中选择“隐藏表格宽度”。点击工具栏上的视图（view option）图标，从下拉菜单中选择“可视化助理”，把“表格宽度”选项钩选，即可显示表格宽度。四、实验步骤1、创建表格，设计页面的版式选择“插入表格”选项，弹出属性设置窗口，其中“行”和“列”分别设置为3，“表格宽度”设置为800，“边框”设置为0。移动表格中单元格的边框，设计页面版式。2、设置页面属性选择“修改页面属性”，弹出属性设置窗口，设置页面的背景颜色为蓝色、左边距为100像素、上边距为0，确定。3、合并单元

15、格：选中第一行第一列的单元格，按住鼠标不放，拖动鼠标到最后一列，即可选中第一行中的三个单元格，然后，右键单击鼠标，选择“表格-合并单元格”，则三列合并为一列。在布局表格的第一行中可以放置网站的LOGO、题头动画等。4、拆分单元格：右键单击要拆分的单元格，选择“表格插入列”或者“表格插入行”，即可将单元格拆分为多行或多列。 5、设置单元格的边框大小、间距、背景图片和颜色单击Dreamweaver MX 2004工作面板下部左侧的属性按钮（黑色三角符号），当黑色三角符号指向底部的时候，可以展开当前编辑区的属性选项。在编辑区中单击要设置属性的单元格，在属性面板上设置边框大小、间距、背景图片和颜色等相

16、应的参数。 6、修饰单元格：制作细线表格在做网页中如果把表格的borer=1的话，表格的边框会很粗。但如果令其border=0的话那又显示不出边框来，如何制作出细线表格呢？实现细线表格需要到HTML代码中修改，其设置方法如下， 7、设置单元格的对齐方式：水平对齐方式有，左对齐、右对齐、居中对齐；垂直对齐方式有，顶端对齐、底部对齐、居中对齐和基线对齐。8、通过表格对首页版式进行布局，实现实例index.jpg中的效果。 实验三 表单及JavaScript/VBScript 的使用一、实验目的：1、了解HTML中与表单、表单对象有关的标记。2、掌握在Dreamweaver中制作表单的方法。3、掌握

17、在Dreamweaver中如何插入各种表单对象，并设置其属性。4、用JavaScript/VBScript编写客户端脚本。5、用JavaScript/VBScript实现网页特效。二、实验内容：1、制作一个如下图所示的登陆界面，如下图所示：2、用客户端脚本实现表单数据输入的有效性验证3、用JavaScript/VBScript实现水波荡漾的特效。三、实验原理表单可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。 表单包括两个部分：一部分是HTML源代码用于描述表单（例如，域，标签和用户在页面上看见的按钮），另一部分是脚本或应用程序用于处理提交的信息（如CGI脚本）。不使用处理脚

18、本就不能搜集表单数据。 表单由文本域、复选框、单选框、菜单、文件地址域、按钮等表单对象组成，所有的部分都包含在一个由标识符标志起来的表单结构中。 表单的种类有注册表、留言薄、站点导航条、搜索引擎等。表单标记符，表单可以很简单，只有一个输入域，也可以很复杂，例如有按钮、检查框、滚动窗口的多区域等。最常使用的表单元素标记有三种，即INPUT、SELECT和TEXTAREA。的作用是在表单中建立各种的输入域。其主要的属性有name、value、type等3个。name被用来表示不同的输入域，value被用来给输入域设定初值，type被用来确定可接受的输入域的类型。type属性可定义为text（单行文

19、本域）、password（口令域）、radio（圆形单选域）、checkbox（复选框）、reset（复位钮）、submit（提交按钮）、range（范围域）、hidden（隐藏域）。当需要使用滚动列表和下拉菜单时，可使用标记符。通过使用标记符可以定义列表项，支持multiple、name、size这3种属性。当需要为用户提供一个较大的文本输入区域时，可用标记符来建立一个多行文本区。使用cols、rows和name这3种属性。cols用于定义文本区的列数，rows用于定义该文本区的行数，name为该区域的名字。在ASP中，VBScript是默认的脚本语言，如需改变，可在HTML文件的开头作如下

20、声明： 或者 四、实验步骤1、制作一个登陆界面选择“文件-新建创建HTML文件”，进入一个新建文件的工作窗口，在设计视图下，选择工具栏左端的黑色三角符号，单击，弹出选项菜单，选择“表单”栏目，可以看到工具栏上的图标随着更换成常见的表单选项。接下来根据需要选择插入所需的表单选项。完成登陆界面的制作。2、用客户端脚本实现表单数据输入的有效性验证，验证规则是：用户名和密码不能为空，否则弹出警告对话框。表单数据校验function cheakform()if (document.loginform.username.value=) window.alert(请输入用户名！); document.log

21、inform.username.focus(); return(false);if(document.loginform.userpswd.value=)alert(请输入密码！);document.loginform.userpswd.focus();return(false);document.loginform.submit();用户登录用户名：密码：3、实现水波荡漾的效果本效果是用JavaApplet实现的。Anfy软件提供了系列的网页特效，可以先安装Anfy软件，浏览查看自己中意的网页特效。在这里用到的是lake效果，实现方法是: 将实现效果必须的三个文件，AnLake.class、

22、Lware.class和anfy class拷到网页文件同级目录下，将以下之间的代码插入到网页的HTML文件中。并将/设置图片大小/设置要在水面呈现倒影效果的图片/设置在倒影图片上运动的图片/设置在倒影上运动图片的位置Please A HREF= Java(tm).注意：JavaApplet运行时，要求浏览器支持，如果显示不出效果，则要求单独安装JAVA虚拟机（JVM）。实验四 ASP编辑环境及ASP基本语法一、实验目的：1、学会IIS Web服务器的设置；2、了解ASP的基本概念和编辑环境；3、了解ASP程序的基本结构；4、掌握在Dreamweaver MX2004调试ASP程序的基本方法。二、实验内容：1、安装和配置Internet信息服务管理器（IIS）；2、建立简单的ASP程序，通过该程序接收表单输入的数据，并将结果输出到Web页