《网络教育应用》实验教案完整版.docx
《《网络教育应用》实验教案完整版.docx》由会员分享，可在线阅读，更多相关《《网络教育应用》实验教案完整版.docx（46页珍藏版）》请在冰豆网上搜索。
《网络教育应用》实验教案完整版
《网络教育应用》
实
验
教
案
系别：
教育科学与技术系
年级：
教育技术学2008级
教师：
黄克斌
2010年9月
《网络教育应用》实验教案
目录
实验项目：
实验一HTML标记的基本语法和Dreamweaver的基本操作
实验二表格的使用
实验三表单及JavaScript/VBScript的使用
实验四ASP编辑环境及ASP基本语法
实验五ASP对象内置对象
实验六使用ADO对象访问数据库
实验七使用ASP内置组件
实验八CSS样式表
实验九层和时间线动画
实验十框架
实验十一行为
实验十二综合应用开发
实验注意事项：
1、实验之前应认真阅读实验讲义及教材有关章节。
2、实验室内禁止抽烟、禁止大声喧哗。
3、严格按照规定操作所有仪器设备，如有损坏或丢失，应及时报告，并根据情况进行赔偿。
4、实验中注意原始数据的记载和保存。
5、注意保持场地清洁，实验完毕，主动协助指导教师清扫整理实验室。
6、实验之后，认真填写实验报告。
实验一、HTML标记的基本语法和Dreamweaver的基本操作
一、实验目的：
1、熟悉HTML文件的编辑环境（记事本或Dreamweaver），了解HTML文件的基本结构，并使用InternetExplorer测试HTML文件的操作。
2、了解网站的制作流程，掌握用Dreamweaver建构网站和制作网页的主要步骤。
3、掌握HTML中与文字、图片、页面有关的基本标记。
4、掌握用Dreamweaver中文字、图片、页面的处理方法。
5、了解HTML中与超级链接有关的HTML标记。
6、掌握在Dreamweaver中制作一般链接、邮件链接、锚点链接、文件下载的方法。
7、学会用Dreamweaver制作图像映射、导航条、跳转菜单。
二、实验内容：
1、用DreamweaverMX2004建立一个本地站点，站点名为Mysite。
2、在Mysite站点中建立一个首页：
index.htm（样式参照实验资料附录：
index.jpg），设置好首页的大小、样式、背景，并在首页中插入文字、图片、链接、邮件链接、锚点链接等内容。
三、实验原理
建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。
本地站点的建立定义好之后，就要开始新建网页文件和文件夹。
网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。
同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。
不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。
文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开发时，有统一的命名规则相当重要。
例如个人简历这个栏目，命名的文件夹名称可以是jianli，如果命名成英文，可以是me。
论坛这个栏目的命名，大家都是用bbs作文件夹名称。
四、实验步骤
1、在硬盘上建立一个站点目录
如：
F:
\Mysite，文件夹Mysite下建立有文件夹pic、fla、css、db等，分别用于存放网站中可能用到的图片、动画、样式以及数据库等文件。
打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点，
接下来需要给站点起一个名字，可以起任意一个名字。
按下一步按钮，选择是否使用服务器技术。
因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。
按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。
按下一步，选择要定义的本地根文件夹，这里选择Mysite文件夹。
点“选择”按钮，因为没有使用远程服务器，就选择“无”。
按下一步，在出现站点相关信息对话框下选择“完成”按钮，一个站点就定义好了。
2、站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件，给新建的文件输入名称，如index.htm。
3、双击Mysite站点中的index.htm，打开一个空白的页面。
我们将从这个空白页面开始制作，了解页面属性的设置和作用。
在工作区点鼠标右键，选择页面属性，打开页面属性对话框：
在其中，我们可以设置页面的边距、背景、链接等属性。
设置左边界，顶部边界，边界宽度，边界高度都为0，可以使页面中的表格与背景没有空隙。
用得比较多的还有背景图像，选择一个已经做好的图像，就可以设置成页面的背景图像。
4、页面大小参数的设定
现在有好几种尺寸的显示器，“14、15、17、19”英寸，网页要在每个显示器上显示正常，就要设置恰当的参数，常用的是在页面中插入表格放内容，采用象素和百分比两种。
采用象素为单位，是使用最多的显示器为参照的，现在数量最多的显示器是15英寸和17英寸的，所以页面使用象素为单位时，是以15英寸为标准，常用800×600的分辨率。
使用百分比，可以在各种显示器上有相同的效果，宽度设置为100％时，在各种显示器上全屏显示。
下面分别介绍这两种方法。
简明步骤：
打开一个页面→插入表格→设置表格宽度
打开index.htm文件，点击插入表格图标，打开“插入表格”对话框，设置行数为1，列数为1，宽度选百分比，值为100，边框为0。
一个可以在各种显示器上全屏幕显示的网页就搭建好了。
以后要做的是在表格里填充内容。
下面介绍象素大小的表格设置，选择像素为单位，值为768。
可以在15英寸显示器上全屏幕显示，在17英寸显示器上也有好的显示效果。
相对使用百分比制作网页，采用像素比较简单。
做一个在800×600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：
“宽768高430”，“宽776高430”等。
用像素为单位的表格，大多是把表格设置为居中对齐。
选中表格，在属性面板选择对齐方式为居中对齐。
完全下载一个表格的内容，才能在IE中显示出来。
如果页面文件小，可以只有一个表格放内容。
如果页面文件很大，可以在页面中，从上到下放几个宽度相同的表格，分别放不同的内容，这样就会一个一个显示表格里面的内容，不用等整个网页的内容下载完。
5、页面的版式设计
做一个网页，先要规划好版式，通过插入表格可以实现网页版式的布局。
常用的版式是分栏结构，如下图所示，
以上是一个主页的简单结构，由三个表格组成。
第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。
中间一个表格，一行二列，里面再分别插入两个表格，左边表格放导航或者图片，右边表格放网页内容。
典型的二分栏结构。
下面一个表格，一行一列，放版权声明。
常见的分栏结构，还有三分栏，四分栏，下面是一个三分栏的结构：
6、Dreamweaver的使用
使用DreamweaverMX工作区，默认的界面中，工作区很小，如果要把工作区变大，选择工作区右侧、下侧的三角形按钮，就可以隐藏面板组和属性面板。
如果要使用面板组，再点击三角形按钮。
在Dreamweaver工作区中，可以插入文字、图片、动画以及一般链接、邮件链接、锚点链接、文件下载等等。
7、了解Dreamweaver工作区中，文字、图片、动画以及链接等对应的HTML标记。
8、利用文本编辑器，输入编辑下面的HTML代码，存盘，然后用浏览器打开浏览效果。
这是我的第一个网页文件这是正文内容。
--这是注释，在网页中不会起作用-->
并试着更改其中内容，看有什么变化。
实验二表格的使用
一、实验目的：
1、了解HTML中与表格及表格属性有关的HTML标记。
2、掌握在Dreamweaver中制作数据表格和排版表格。
3、了解特殊表格在Dreamweaver中的运用。
二、实验内容：
在Mysite站点中完善首页index.htm，实现参照样式index.jpg相同的版面布局结构，并再现相同的效果。
本次实验将学习网页制作中与表格有关的HTML标记，通过本次实验，应熟练掌握用DreamWeaver制作数据表格和排版表格。
三、实验原理
DreamweaverMX2004在表格的设计上做出了很大的改进。
使用表格可以清晰地显示列表的数据，而且它在网页定位上起着重要的作用，尤其是对于使用非IE浏览器的用户来说，使用表格定位的网页比使用图层定位的网页更具有优势。
在插入菜单栏中，选择插入表格后，Dreameaver弹出表格设置框，如下图所示：
对话框中，可以设置表格的行数和列数。
另外也可以设置其它参数：
表格宽度：
两种表示形式，像素和百分比，设置为像素后，则表格的页面固定，不能随着显示器的大小改变而改变；设置为百分比后，表格的页面大小可以随着显示器分辨率的大小不同而自动改变。
边框粗细：
设置为0则不显示表格边框，显示边框通常设置为1。
单元格边距：
表示单元格内部文字、图片等元素距离单元格边框的距离。
单元格间距：
表示单元格与单元格之间的距离。
页眉：
快速设置表格的样式。
标题：
设置数据输出的表格题头，用于说明表格的内容，如：
表一学生成绩表等。
对齐标题：
设置数据输出的表格题头对齐方式，可以是左对齐、右对齐、顶部对齐和底部对齐。
表格对应的HTML标签为：
行对应的HTML标签为：
……
列对应的HTML标签为：
…… | 在DreamweaverMX2004的设计视图中，先将光标放入单元格中，用鼠标单击HTML标签栏上的标签，可以选中整个单元格、行以及整个表格。
在设计视图中，还可以设置单元的边框、背景等。
通过对表格的添加、删除、合并、拆分等操作，可以很好的实现数据输出和版面布局的需要。
DreamweaverMX2004新增加了表格宽度辅助线功能，我们在编辑网页表格的时候能清楚地看到表格中各单元的宽度以及变化，很直观。
如果我们不想让DreamweaverMX2004自动显示宽度辅助线，选中表格，点击宽度辅助线数字和小三角形，从菜单中选择“隐藏表格宽度”。
点击工具栏上的视图（viewoption）图标，从下拉菜单中选择“可视化助理”，把“表格宽度”选项钩选，即可显示表格宽度。
四、实验步骤
1、创建表格，设计页面的版式
选择“插入—表格”选项，弹出属性设置窗口，其中“行”和“列”分别设置为3，“表格宽度”设置为800，“边框”设置为0。
移动表格中单元格的边框，设计页面版式。
2、设置页面属性
选择“修改—页面属性…”，弹出属性设置窗口，设置页面的背景颜色为蓝色、左边距为100像素、上边距为0，确定。
3、合并单元格：
选中第一行第一列的单元格，按住鼠标不放，拖动鼠标到最后一列，即可选中第一行中的三个单元格，然后，右键单击鼠标，选择“表格--合并单元格”，则三列合并为一列。
在布局表格的第一行中可以放置网站的LOGO、题头动画等。
4、拆分单元格：
右键单击要拆分的单元格，选择“表格—插入列”或者“表格—插入行”，即可将单元格拆分为多行或多列。
5、设置单元格的边框大小、间距、背景图片和颜色
单击DreamweaverMX2004工作面板下部左侧的属性按钮（黑色三角符号），当黑色三角符号指向底部的时候，可以展开当前编辑区的属性选项。
在编辑区中单击要设置属性的单元格，在属性面板上设置边框大小、间距、背景图片和颜色等相应的参数。
6、修饰单元格：
制作细线表格
在做网页中如果把表格的borer=1的话，表格的边框会很粗。
但如果令其border=0的话那又显示不出边框来，如何制作出细线表格呢？
实现细线表格需要到HTML代码中修改，其设置方法如下，
|
7、设置单元格的对齐方式：
水平对齐方式有，左对齐、右对齐、居中对齐；垂直对齐方式有，顶端对齐、底部对齐、居中对齐和基线对齐。
8、通过表格对首页版式进行布局，实现实例index.jpg中的效果。
实验三表单及JavaScript/VBScript的使用
一、实验目的：
1、了解HTML中与表单、表单对象有关的标记。
2、掌握在Dreamweaver中制作表单的方法。
3、掌握在Dreamweaver中如何插入各种表单对象，并设置其属性。
4、用JavaScript/VBScript编写客户端脚本。
5、用JavaScript/VBScript实现网页特效。
二、实验内容：
1、制作一个如下图所示的登陆界面，如下图所示：
2、用客户端脚本实现表单数据输入的有效性验证
3、用JavaScript/VBScript实现水波荡漾的特效。
三、实验原理
表单可以收集用户的信息和反馈意见，是网站管理者与浏览者之间沟通的桥梁。
表单包括两个部分：
一部分是HTML源代码用于描述表单（例如，域，标签和用户在页面上看见的按钮），另一部分是脚本或应用程序用于处理提交的信息（如CGI脚本）。
不使用处理脚本就不能搜集表单数据。
表单由文本域、复选框、单选框、菜单、文件地址域、按钮等表单对象组成，所有的部分都包含在一个由标识符标志起来的表单结构中。
表单的种类有注册表、留言薄、站点导航条、搜索引擎等。
表单标记符