实验与实训指导书.docx

1、实验与实训指导书实验与实训指导书课程名称：电子商务网站设计实训课程编号：适用专业：电子商务、信息管理、计算机应用学时数：7周（56学时）编 写：包敏保险职业学院信息系2005年12月实训目的与基本要求：实训目的：（1）通过Dreamweaver或FrontPage等网页制作工具和相应的网页制作技术（如ASP，JavaScript和VBScript等）的使用，使学生较全面地掌握动态网页的制作过程与技巧；（2）通过本实训课程的学习，学生应能独立开发不太复杂、但具有一定应用价值的电子商务网站系统。基本要求：（1）端正实训态度，按时完成每次实训任务，全面掌握电子商务网站开发的全过程和技巧，掌握一技之长

2、，为今后就业扎下一定的基础；（2）实训形式采用学生动手实践为主，教师全程跟班指导；（3）鼓励学生自己独立完成实训任务，也可适当参考他人的程序，但应该掌握、理解，而不可照搬、照抄；（4）在实训阶段，主要目的是增强学生的实际动手编程开发的能力，而不再是局限于对一些概念的讲解上；（5）实训期间要求上交相应的实训报告；（6）实训结束，要求每位学生都应提交实训作品。实训原理与方法：根据学生个体水平的差异性，循序渐进，合理安排每次实训内容，使每个学生都能各取所需。在实训形式上，采取理论讲授与实际操作相结合的原则，以学生动手操作为主，适当辅以讲授，使学生系统地掌握所学知识。实训场地： 实训主要安排在学生机房

3、。实训设备及软件： 硬件设备没有太高要求，一般配置的计算机和一台投影仪即可。 软件要求：（1）服务器：Win2000 Server操作系统；IIS（默认安装）；Dreamweaver MX；Access 2000（或SQL Server 2000），其他图片处理软件。（2）学生机：Win2000 professional操作系统；IIS；Dreamweaver MX；Access 2000（或SQL Server 2000），其他图片处理软件。实训材料： 无特别说明。实训课时分配：实训总课时数为56，每周8课时，一般两个课时为一个实训单元。共七周完成。实训一 IIS的设置以及CSS的简单应用【

4、实训目的】1. 掌握IIS(Internet Information Server)的基本配置，会使用其发布网页（网站）。2. 掌握CSS(层叠样式表)的基本使用,会使用其来控制网站页面的整体样式。【实训内容】1. 配置自己机器上的IIS，并使用其来发布自己已经设计好的页面。2. 设计一个CSS文件和一个简单的登录页面login.htm，使用CSS文件控制登录页面的样式，页面效果如下：图1.1【步骤与方法】（）发布网站1在桌面上新建一个文件夹，以自己的姓名的拼音命名，如baomin，或者以自己的学号命名，目的是以后的实验内容都保存在此文件夹中。然后再在此文件夹中新建一文件夹，命名为01（注：以

5、实验序号命名），保存本次实验内容。2将已经建好的页面index.htm放入01文件夹中。3配置IIS。选择“我的电脑|控制面板|管理工具”，双击“Internet服务管理器”打开，如果IIS因某种原因被停止了，则在“Internet信息服务”中选取“默认web站点”项，然后按下钮，IIS就被启动了。4设置web站点发布的IP地址。如下图1.2。5新建虚拟目录/站点。选中“默认web站点”项，点击鼠标右键，选择“新建|虚拟目录”，取虚拟目录别名为“01”，下一步，在弹出的“虚拟目录创建向导”中选择我们要发布的页面index.htm所在的文件夹01（如下图1.3）。，然后确定。下一步，在访问权限窗

6、口中选择“浏览”，下一步，完成。在新建的虚拟目录“01”中，我们可以通过属性设置“默认打开文档”等属性。6浏览文件。在IIS中，选中index.htm，点击右键，浏览即可。（二）CSS样式的简单应用1打开Dreamweaver。选择“开始|程序|Macromedia|Macromedia Dreamweaver MX 2004”,打开Dreamweaver。2新建基本页login.htm。保存到01文件夹中。3插入表单。在新建页面的“设计”视图中，插入一个表单form。4插入表格。在表单中插入11的表格，居中对齐，宽为300象素，边框为0，填充为5，间距为0，在表格中输入文字“管理员登录”。让

7、文字居中。5设置表格样式。在右边的设计窗口中，通过单击新建图标，打开“新建CSS样式”窗口如下图1.4，取样式名称为tabtitle，点确定。在弹出的“.tabtitle的CSS样式定义”的窗口（如图1.5）的“类型”中设置字体为“宋体”，字体颜色为“#ffffff(白色)”，字体大小为“15象素”，粗体；在“背景”中设置背景颜色为“b0c4de”，点确定即可。6应用CSS样式。选中表格，在其下端的属性窗口中的“样式(Y)”属性中选择.tabtitle应用即可。7同上，继续插入一个42的表格，居中对齐，宽为300象素，边框为0，填充为5，间距为0。在表格的左列输入相应的文字，右对齐；右列分别插

8、入3个文本框，在属性窗口中分别进行相应的设置即可，并分别改名称为“username”、“passwd”、“key”。8合并第4行单元格，分别插入两个按钮，居中对齐。第1个按钮名称为submit，类型为submit；第2个按钮名称为reset，类型为reset。9设置表单控件样式。同上，新建一个标签样式，名称选择“input”，确定。在“input样式定义”窗口中选择“边框”选项，设置样式为“实线”，宽度为“1象素(px)”，颜色为“#666666”，确定即可。图1.2图1.3图1.4图1.510保存login.htm。实验内容完成。【数据记录与整理】略【结果分析】略【思考题】1叙述IIS配置的

9、全过程。2自己再做一个更复杂的页面，应用CSS样式进行设置。实训二 应用Div标记实现简单菜单【实训目的】掌握Div标签的使用，能熟练使用它与Table结合实现一些菜单功能。【实训内容】应用Div标记和Table标记实现简单的后台管理功能菜单，效果如下边功能菜单所示。图2.1【步骤与方法】1在上次实验的文件夹（baomin）中新建文件夹02，将本次实验的内容取名为menu.htm，并保存在02文件夹中。2在“设计视图”中插入一个1行1列的表格和一个4行1列的表格，两表格边框为0，填充为5，间距为0，宽度为200象素。通过css样式为两个表格设置不同的背景颜色。3在两个表格中分别输入不同的内容。

10、4在4行1列的表格标记前插入标签，在结束标记后加入标签。5修改标记的属性为：6在标记中加入如下JavaScript脚本，控制样式。function ShowDiv( div_id ) if( document.all.item(div+div_id).style.display = block ) document.all.item(div+div_id).style.display = none; else document.all.item(div+div_id).style.display = block;7在1行1列的表格中修改属性为：8保存，预览即可。【数据记录与整理】略【结果分析】

11、略【思考题】1想想除了单击（onClick）之外，其他的一些鼠标事件（如鼠标移上时、鼠标移走时、鼠标拖动时）该如何写。实训三 JavaScript脚本的初步使用（1）【实训目的】熟悉JavaScript脚本语言的基本应用，会使用它来实现一些简单的网页特效。【实训内容】 使用JavaScript脚本进行简单的输入控制（如光标自动停留，输入检查等），实现效果如下图所示。图3.1【步骤与方法】1 同样新建文件夹03，保存本次实验内容。2 新建一个html页面，其内容同第一次实验内容，如上图所示。3 更改3个文本框属性，并分别取名为username，passwd，key，表单名称默认为form1。4

12、在标记中增加以下脚本：function SetFocus(obj)/设置焦点 if (obj.UserName.value = ) obj.UserName.focus(); else obj.UserName.select();function CheckForm(obj)/输入框检查 if(obj.UserName.value = ) alert(请输入用户名！); obj.UserName.focus(); return false; if(obj.Passwd.value = ) alert(请输入密码！); obj.Passwd.focus(); return false; if(o

13、bj.key.value = ) alert(请输入确认码！); obj.key.focus(); return false; obj.submit();function IsDigit()/判断是否数字return (event.keyCode = 48) & (event.keyCode = 57);5 写key输入框的属性为：6设置“确认”按钮属性为：7设置标记属性为：8保存，预览即可。注意：判断是否为空是空串（），而非空格串（ ）。【数据记录与整理】略【结果分析】略【思考题】1 除了掌握本次实验内容外，上网查找网络资源，尝试使用JavaScript实现一些更实用、有趣的效果。实训四 使

14、用ASP脚本将客户端数据写入数据库【实训目的】熟悉ASP的初步使用，掌握将客户端的数据写入后台Access数据库的基本方法。【实训内容】写一个ASP文件addData.asp，将上次实验login.htm页面中的用户名（username）和密码（passwd）写入到数据库user.mdb的user表中。【步骤与方法】1 新建文件夹04，保存本次实验内容。2 新建数据库user.mdb。开始|程序|Microsoft Access 2000，单击新建按钮。双击“使用设计器创建表”输入字段名称：id,username,passwd，类型分别为(自动编号)，文本，文本。3 保存表名为user，数据库

15、名为user.mdb。4 打开Dreamweaver，新建动态页（脚本为VBScript），文件名为addData.asp，在代码设计器中删除自动生成的所有代码，并书写代码如下：5 保存代码。6 打开前次所作页面login.htm，将标记的action属性改为：action=addData.asp，并保存。7 建虚拟目录04，浏览login.htm，实现写数据库功能。【实训的重点与难点】（1）建数据库连接。有两种方式：a. 手动方式：通过操作ODBC数据源实现数据库连接（给学生演示）。b. 直接通过ASP程序实现。如：dim drivedrive=driver=microsoft access

16、 driver (*.mdb);dbq=&server.MapPath(user.mdb)set conn=server.CreateObject(ADODB.connection)conn.open drive（2）SQL语句的使用。如：sqlstr = insert into user(username,passwd) values(&username&,&passwd&)conn.execute sqlstr 运行语句【数据记录与整理】略【结果分析】略【思考题】1想想其他类型的数据（如数字型、日期型）如何写sql语句。参考：文本型的写法：&文本型变量&数字型的写法：&数字型变量&日期型的

17、写法：#&日期型变量&#实训五 使用ASP的Recordset对象读取数据库内容输出到浏览器【实训目的】熟悉ASP的Recordset（记录集）对象的初步使用，掌握将后台Access数据库中的数据读取到浏览器的的使用方法。【实训内容】写一个ASP文件display.asp，将数据库score.mdb的成绩表score(学号,姓名,语文,数学,英语)中的所有内容都输出到浏览器上显示出来。图5.1【步骤与方法】1 新建文件夹05，保存本次实验内容。2 通过Access新建数据库score.mdb的成绩表score(学号,姓名,语文,数学,英语)，其中类型为：学号（自动编号），姓名（文本），语文（数

18、字），数学（数字），英语（数字）。并在表中插入n条记录。3 新建动态页display.asp，保存在04文件夹中，在页面中写入如下代码： % 输出表头名称for i = 0 to rs.fields.count - 1 response.write &rs(i).name&next%输出score表中的内容，使用双重循环rs.movefirstwhile not rs.eof row = for i = 0 to rs.fields.count - 1 row = row&rs(i)& 输出一条记录的所有字段值 next response.write row& rs.movenext 移到下一

19、条记录wend%4 新建虚拟站点，浏览display.asp即可。【实训的重点与难点】1 记录集对象Recordset的使用，如表头的输出：rs(i).name；内容的输出：或者均可。2 VBS循环语句的使用。常用的有：fornext和whilewend等。【数据记录与整理】略【结果分析】略【思考题】1 自己动手重做一次实验，熟练掌握记录集（Recordset）对象的使用。实训六 JavaScript脚本的初步使用（2）控制语句及函数的使用【实训目的】熟练掌握JavaScript脚本的控制语句和函数，会用它来实现一些简单的功能，为编写更复杂的程序打下基础。【实训内容】要求：使用JavaScri

20、pt脚本完成以下实验内容。1. 输出逻辑表达式的结果：4*(5+2)%2&342. 在页面上通过脚本显示6级标题。效果如下：这是6级标题这是5级标题这是4级标题这是3级标题这是2级标题这是1级标题3. 使用双重循环，在页面上显示一个“99乘法表”。效果如下：99乘法表1*1=11*2=2 2*2=41*3=3 2*3=6 3*3=91*4=4 2*4=8 3*4=12 4*4=161*5=5 2*5=10 3*5=15 4*5=20 5*5=251*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=361*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6

21、*7=42 7*7=491*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=641*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=814. 设计一个递归函数Recursion(n)，求阶乘n!的值。已知：对于n!，如果整数n=1,n!=1；否则n!=n*(n-1)!注意：其中n的值由用户输入。【步骤与方法】1 新建文件夹06，保存本次实验内容。2 （1）新建基本页01.htm，在代码视图中写入如下JavaScript脚本：document.write(4*(5+2)%2&34

22、)得到运行结果为：03 （2）新建基本页02.htm，在代码视图中写入如下JavaScript脚本即可：var i;for(i = 6; i = 1; i-) document.write(这是+i+级标题);按F12即可浏览到以上结果。4 （3）新建基本页03.htm，在代码视图中写入如下JavaScript脚本：document.write();document.write(99乘法表);var i,j;for(i = 1; i = 9; i+) for(j = 1; j = i; j+) if(j = 1)document.writeln(); document.write(j+*+i+

23、=+i*j+t); document.write();5 新建基本页04.htm，在代码视图中写入如下JavaScript脚本：function Recursion(n) if(n = 1)return 1; return n * Recursion(n - 1);var n;n = prompt(请输入阶乘的n：,0);alert(n+的阶乘是：+Recursion(n);【数据记录与整理】略【结果分析】略【思考题】1上网收集一些JavaScript的网页特效。实训七 简单投票功能的实现【实训目的】进一步掌握ASP的Recordset（记录集）对象的使用，学习Recordset对象自带的增加

24、（rs.addnew rs.update）、修改（rs.update）、删除（rs.delete）方法的使用；以及比例图的使用方法。【实训内容】 编写一个投票调查页面vote.htm（如下图7.1），投票的结果保存在数据库vote.mdb的成绩表vote(id,毛泽东,周恩来,邱吉尔,爱因斯坦,比尔盖茨,其他)中；另外，为了防止重复投票，新建一数据表voteRecord(id,ip,votetime)，记录客户端的ip和投票时间，限制同一ip（在一定时间内）只能投票一次。另外，setvote.asp程序的功能是若voteRecord数据表中无此IP，则执行两个数据表的改写操作，否则给出出错信息。displayVote.asp的功能是以比例图的方式显示投票结果（如下图7.2）。图7.1图7.2【步骤与方法】1、新建文件夹07（可自定义）、新建数据库（vote.mdb）、新建数据表(vote、voteRecord)。2、编写vote.htm页面（自己进行美化），注意按钮类型：投票（submit）、查看结果（button）。button按钮的onClick事件执行opennewwin()函数，打开display