web技术应用实验指导书(V2.3)20120115.doc

WEB技术应用实验指导书
第二版

主编：吴 伟 敏

南京邮电大学教育科学与技术学院
2011年
一、 Web技术应用实验课程的性质、目的和任务
性质：《Web技术应用》课程是广告学专业必修专业基础课。本实验是《Web技术应用》课程的课内上机实验教学环节。
目的和任务：本课程是一门实践性较强的课程。在学生系统学习了Web基础知识及有关编程基本技能的基础上，经上机实践，使学生更加全面地掌握Web应用开发的基本技术和方法；综合运用课堂上所掌握的相关知识，熟练使用网页制作工具及编程语言的基本用法进行应用系统、各类Web运用的开发以及调试，掌握Web开发中各个环节所需基本技能的训练，能设计出美观实用的Web网站。
通过理论和实验教学，使学生掌握Web应用的一般方法，具备建立开发环境、建立网页、采用JavaScript来丰富网页展现形式、采用CSS来管理网页样式的一般方法，了解服务器端脚本语言或采用其它编程语言来构建服务器端程序的基本方法，能创建一个完整的网站运用。
二、 实验内容、学时分配及基本要求
序号
实验名称
课时
实验内容及要求
实验类型
1
开发环境的建立
2
内容：
掌握IIS的安装方法； 掌握有关Web服务器的配置方法；安装相关软件和开发工具。
要求：
了解当前计算机的配置，完整实现有关服务器端所需软件的安装；
正确配置Web服务器的各项参数并测试；
熟悉IIS或相关的软件的主目录、安全性、IP地址、端口等的配置。
演示
2
HTML与网页布局
2
内容：
熟悉HTML语言的基本语法；掌握不同的标签对网页的影响及其效果；利用HTML部分实现自己设计的需求。
要求：
了解HTML规范的基本内容，熟悉其中重要标签及常用标签的功能和用法；
通过实例体会不同的标签之间的区别和不同属性间的差异；
掌握Dreamweaver或Frontpage等软件的使用方法，熟悉网页布局的方法。
验证
3
JavaScript与网页特效
2
内容：
在纯HTML网页中加入JavaScript的方法；熟悉JavaScript的内置对象及其使用方法；掌握利用JavaScript实现特殊显示效果的方法。
要求：
掌握JavaScript嵌入网页的方式；
通过实践掌握JavaScript的基本语法；
了解JavaScript的内置对象及其使用方法；
尝试使用JavaScript实现一个完整的网页特效。
验证
4
动态主页设计
2
内容：
在前期对网站的策划和设计的基础上，利用所学的有关知识，进行一个完整网站的制作；实现动态主页的制作；掌握网站开发的基本流程。
要求：
利用任何一种动态网页技术来实现动态网页；
了解连接数据库的基本方法；
通过实现更多功能完善自己的网站。
综合
三、 实验设备和环境
1.实验硬件设备
PIV以上、1G内存 。具备上网条件。
2. 实验软件环境
Windows2003/XP/2008、Dreamweaver、Access、SQL Server，Apache，IE。
四、 考核及实验报告
1. 考核
本课程实验非独立设课，考核方式以学生上机操作和完成设计作业相结合。实验成绩的评定：实验到课率（10％）；实验完成（70％）；实验效果（20％）。实验成绩占课程总成绩的20％。
2.实验报告
实验报告内容：实验题目（写明该次实验题目）；实验内容（实验操作的步骤或实验过程，要求步骤完整）；实验小结（实验中遇到的问题及解决方法）等，具体实验报告的要求可以参实验指导书的有关内容。
实验报告要书写规范、文字简练、语句通顺、图表清晰。
五、 参考站点

实验一 开发环境的建立
一、 实验目的和要求
1． 了解网站建设的前期准备工作；
2． 规划步骤及如何建立一个网站；
3． 掌握服务器的安装过程；
4． 了解维护时所需要考虑的安全措施。
二、 实验准备
1． 分析网站建设的前期准备工作。包括：人员，服务器（软、硬件）的选择，域名的获得等；
2． 分析服务器的安装过程及软件的维护。包括：IIS；SQL Server；ASP；.net Framework等；
3． 预习有关软件的相关使用方法。
三、 实验内容
1．如果安装的是Windows Professional操作系统：
(1) 安装并配置IIS，安装完成后发布IIS的默认主页，完成IIS的启动和停止操作；
(2) 安装并配置SQL Server个人版数据库系统，完成停止和启动SQL Server的操作。
2．如果安装了Windows Server操作系统：
(1) 安装并配置IIS，安装完成后发布IIS的默认主页，完成IIS的启动和停止操作；
(2) 安装并配置 SQL Server企业版/标准版数据库系统,并完成停止和启动SQL Server的操作。
3．安装并配置Windows操作系统下的ASP运行环境
(1) 配置IIS，测试安装是否成功；
(2) 安装并配置 SQL Server企业版/标准版数据库系统，并完成停止和启动SQL Server的操作。
2．为一个Web站点的开发小组规划一个Windows Server下的ASP工作环境。
假设该组有10个成员，客户端可能使用不同的操作系统。请画出该环境的示意图，标明所需的硬件、软件，并规划环境的IP地址。
3．在Windows环境下完成IIS 的安装、配置与信息发布。前面工作的基础上完成以下工作：
（1） 网络的硬件连接；
（2） Windows Server的安装与测试；
（3） 客户端操作系统和浏览器安装与测试；
（4）IIS的安装；
（5）TCP/IP协议的安装与配置；
（6）主页的发布；
（7）使用FTP工具应用FTP协议实现上传和下载文件的操作。
四、 思考题
1． 在Windows Professional版本和Windows Server版本上安装和运行是否存在差异？
2． 在IIS的Web服务器上，主页、FTP的默认发布目录是什么？
3． Web的体系结构是什样的？请简述它的工作过程？
五、 选作题
使用Apache建立WEB站点，安装相应的服务软件，比较和体会IIS与Apache的异同。
实验二 HTML与网页布局
一、 实验目的和要求
1． 了解HTTP协议的基本特点；
2． 了解HTTP协议的基本开发方法；
3． 熟练掌握HTML语言标准。
二、 实验准备
1． 分析各种编辑工具间的差异，学会根据项目的要求选择合适的编辑工具；
2． 预习有关软件的使用方法。包括：DreamWeaver；FrontPage等。
三、 实验内容
1． 应用HTML制作第一个页面，向浏览器输出一行文字。
2． 使用HTML制作一个页面，要有背景图案，页面显示内容及格式如图2.1所示。

图2.1 页面显示内容及格式
3．制作一个页面，上有文字、图像和朋友的E-Mail地址，在文字和图像上创建超级链接，当用户点击链接时， 页面转跳到其它页面，点击E-Mail地址时，打开信箱，发送邮件。
4．使用HTML/DHTML技术制作一个本学期使用的课表。
5．制作一个计算器界面，界面如图2.2所示。

图2.2 计算器界面
6．使用DHTML技术制作一个页面，页面内容及显示格式如下：
(1) 使用内联样式单实现。
(2) 使用嵌入式样式单实现。
(3) 使用外部链接样式单实现。
7．修改上机练习5的代码，使页面上的文字和按钮具有动态效果。例如，当用户把鼠标移动到按钮上时，按钮将改变其显示方式等。
8．制作一个页面，使图像的说明文字在图像之中，请注意文字颜色的选择，使用户能把图像和文字区分开。
9．选择Dreamweaver、Flash、FrontPage等软件，能够使用这些工具制作一个在人才市场推销自己的个人主页，并在建立好的Web服务器上发布。
四、 思考题
1． 表单在页面中起什么作用？
2． 网页的基本元素有哪些?
3． HTML的本质是什么？它是什么格式的文件? HTML文件的结构是什么样的
五、 选作题
开发一个年级网站，该网站应有：
（1） 你所在系的概貌，并介绍相关信息。
（2）年级概貌，所学专业，并介绍相关信息。
（3） 你所在班级的概貌，并介绍相关信息。
（4） 每个人的情况介绍。
为完成该课题，需成立：
（1） 年级设计与规划小组，负责年级网站的规划、设计、信息采集与年级网站蓝图的制作，并分配与协调班级网页的制作工作。
(2) 班级设计与规划小组，负责班级网站的规划、设计、信息采集与班级网站蓝图的制作，并分配和协调个人网页的制作工作。
实验三 JavaScript与网页特效
一、 实验目的和要求
1． 了解客户端脚本的基本特点；
2． 了解JavaScript的基本语法；
3． 熟练掌握JavaScript的语言标准。
二、 实验准备
1. 掌握有关函数和对象的基本概念；
2. 学习JavaScript语句的编写和调试方法，了解各种编辑工具间的差异。
三、 实验内容
1. 使用<script>标记把一小段脚本程序嵌入HTML页面，并在浏览器中显示它的结果。
2. 使用脚本语言制作一个具有动画效应的页面。
3. 使用JavaScript编制一段代码完成以下功能：
（1）要求用户输入一个电话号码。
（2）用确认框检查输入是否正确(是否为合法输入字符，位长是否合理等)。
（3）根据输入给出相应的提示。
4. 制作一个页面，页面上有五幅图像，图像等分在一个圆上，当用户点击页面时，图象逆时钟移动。
5. 页面上有一幅图像，在状态栏显示有关图像的说明。当用户点击图像时，换成另一幅图像，同时状态栏的内容也做相应的变更。
6. 制作一个页面，页面上有四个独立的块，每个块显示不同的内容，或图像加文字说明，或表格加文字说明，或表格加图像等等，当用户用鼠标在页面上点击时，将显示该鼠标所在位置对象的标记名和ID。
7. 在客户端验证用户输入信息，如果输入正确，允许链接到网站；如果不正确，禁止链接，要求用户界面友好。
8. 制作一个页面，状态栏将根据页面内容滚动显示。
9. 制作一个数字钟，根据网页下载持续时间进行收费。
10. 制作一个打猎游戏，页面上有几个猎物，或在飞或在跑，用户用鼠标追赶猎物，追上后用鼠标单击猎物，弹出信息框说明猎物被击中，同时猎物消失。
11. 为某单位的主页制作标题，使标题具有动态效果。
四、 思考题
1． JavaScript是如何在页面中发挥作用的？
2． JavaScript能完成哪些功能?
3． JavaScript的本质是什么？它于C语言或C＋＋有何异同?
五、 选作题
1． 应用VBScript制作一个计算器，可以对整数和小数进行加、减、乘、除运算，计算器的界面如图所示，使用VBScript脚本语言完成控件之间的事件响应任务和计算任务。

图3.1 计算器界面
2． 为某企业网站设计并制作一个业务查询栏目。当用户输入正确的用户名及口令后，允许用户进行查询。请读者完成用户需求分析，确定查询的项目，设计并规划栏目的界面，并使用JavaScript脚本语言完成控件之间的响应任务和计算任务(如果存在计算任务)。
3． 某银行网站希望增加一个栏目，用户在界面中输入本金、存款方式和存款时间后，即可得到到期后的本金和利息之和共有多少，以利于客户选择存款方式。完成该栏目的设计与制作。
实验四 动态主页设计
一、 实验目的和要求
1． 了解服务器端脚本的基本特点；
2． 熟练掌握ASP.Net的基本语法；
3. 掌握客户端与服务器端进行数据交换的方法；
4． 掌握ASP.Net连接数据库的方法和数据库的有关操作。
二、 实验准备
1. 掌握有关ASP.Net运行的机制和脚本语言用法；
2. 学习ASP.Net的编写和调试方法，并建立数据库。
3. 预习有关软件的使用方法。包括：SQLServer；DreamWeaver等。
三、 实验内容
1． 应用ASP.Net技术在浏览器中输出三行由大变小的文字。
2． 应用VBScript和 JavaScript混合编制一个ASP.Net文件。用VBScript读取系统当前时间，用JavaScript接收系统时间，并向用户显示。
3． 为商家制作一个用户意见征求应用，当用户在表单中输入信息后，单击“确定”按钮，将信息发往服务器端，商家根据用户意见向用户返回信息。
4． 请使用ASP.Net技术获得浏览器的名字和版本号、服务器的端口号等信息。
5． 请用不同的方式向浏览器输出信息。
6． 制作一个网站在线人数和总访问人数统计程序，如果用户离开页面或在5分钟内不刷新页面，被认为离线。
7． 在服务器端libdb数据库中创建Readers表存储读者信息，
(1)用SQL Server建立一个数据库，在库中建一张表存贮读者信息，如图4.1所示。
(2)为数据库建立数据源。
(3)设计并编制源代码。

图4.1 Readers表数据
8． 输出libdb数据库中Readers表的表头。
9． 输出libdb数据库中Readers表的所有记录。
10． 在Readers表中插入一位新读者的记录。
11． 在Readers表把账号是000004读者的电话号码改为84627711。
12． 小项目：制作一个如图4.2所示的网上购物表单，商家返回的信息如题图4.3所示。
图4.2网上购物表单

图4.3 商家返回信息
四、 思考题
1． 客户端脚本和服务器端脚本的区别是什么？
2． 解释动态Web页面和静态Web页面的含义。在网页中插入动画或影视媒体是否就称其为动态的页面?
五、 选作题
1． 为网站完成一个留言板的制作，留言板的界面如图4.4所示，当用户点击页面上“浏览留言”超链接时，显示留言数据库中的内容。
图4.4 留言板界面
2． 使用ASP.Net技术及ADO功能建立一个班级网站，要求：
(1)建立一个班级数据库，数据库中应有班级的基本信息，如：通信录、成绩单等。
(2)制作一个动态网页。该网页能够接收用户信息，并根据用户要求激活服务器端的ASP程序，把后台数据库信息发布到前端的浏览器。
(3)在网页中提供各种查询功能，例如：查询某位同学的学习成绩、计算班级的及格率或优秀率等等。

附件：
实验报告
班级： 姓名： 学号：
课程名称
Web技术
应用
实验项目

实验项目类型
验证
演示
综合
设计
指导教师

成 绩

一、实验目的

二、实验步骤

18

三、实验过程原始记录(数据、图表、计算等)

四、实验结果及分析

签名：
年 月 日
备注：
1、此表表头必须按此格式制作。
2、表头以下的栏目和内容，各系部可根据实验课程的具体需要和要求确定，表中所
列内容仅供参考。该栏可以根据需要加页。
3、一门课程有多个实验项目的，应每一个实验项目一份。

20