实验与实训指导书.docx

资源描述

实验与实训指导书.docx

《实验与实训指导书.docx》由会员分享，可在线阅读，更多相关《实验与实训指导书.docx（41页珍藏版）》请在冰豆网上搜索。

实验与实训指导书.docx

实验与实训指导书

课程名称：

电子商务网站设计实训

课程编号：

适用专业：

电子商务、信息管理、计算机应用

学时数：

7周（56学时）

编写：

包敏

保险职业学院信息系

2005年12月

实训目的与基本要求：

·实训目的：

（1）通过Dreamweaver或FrontPage等网页制作工具和相应的网页制作技术（如ASP，JavaScript和VBScript等）的使用，使学生较全面地掌握动态网页的制作过程与技巧；

（2）通过本实训课程的学习，学生应能独立开发不太复杂、但具有一定应用价值的电子商务网站系统。

·基本要求：

（1）端正实训态度，按时完成每次实训任务，全面掌握电子商务网站开发的全过程和技巧，掌握一技之长，为今后就业扎下一定的基础；

（2）实训形式采用学生动手实践为主，教师全程跟班指导；

（3）鼓励学生自己独立完成实训任务，也可适当参考他人的程序，但应该掌握、理解，而不可照搬、照抄；

（4）在实训阶段，主要目的是增强学生的实际动手编程开发的能力，而不再是局限于对一些概念的讲解上；

（5）实训期间要求上交相应的实训报告；

（6）实训结束，要求每位学生都应提交实训作品。

实训原理与方法：

根据学生个体水平的差异性，循序渐进，合理安排每次实训内容，使每个学生都能各取所需。

在实训形式上，采取理论讲授与实际操作相结合的原则，以学生动手操作为主，适当辅以讲授，使学生系统地掌握所学知识。

实训场地：

实训主要安排在学生机房。

实训设备及软件：

硬件设备没有太高要求，一般配置的计算机和一台投影仪即可。

软件要求：

（1）服务器：

Win2000Server操作系统；IIS（默认安装）；DreamweaverMX；Access2000（或SQLServer2000），其他图片处理软件。

（2）学生机：

Win2000professional操作系统；IIS；DreamweaverMX；Access2000（或SQLServer2000），其他图片处理软件。

实训材料：

无特别说明。

实训课时分配：

实训总课时数为56，每周8课时，一般两个课时为一个实训单元。

共七周完成。

实训一IIS的设置以及CSS的简单应用

【实训目的】

1.掌握IIS（InternetInformationServer）的基本配置，会使用其发布网页（网站）。

2.掌握CSS（层叠样式表）的基本使用,会使用其来控制网站页面的整体样式。

【实训内容】

1.配置自己机器上的IIS，并使用其来发布自己已经设计好的页面。

2.设计一个CSS文件和一个简单的登录页面login.htm，使用CSS文件控制登录页面的样式，页面效果如下：

图1.1

【步骤与方法】

（－）发布网站

1．在桌面上新建一个文件夹，以自己的姓名的拼音命名，如baomin，或者以自己的学号命名，目的是以后的实验内容都保存在此文件夹中。

然后再在此文件夹中新建一文件夹，命名为01（注：

以实验序号命名），保存本次实验内容。

2．将已经建好的页面index.htm放入01文件夹中。

3．配置IIS。

选择“我的电脑|控制面板|管理工具”，双击“Internet服务管理器”打开，如果IIS因某种原因被停止了，则在“Internet信息服务”中选取“默认web站点”项，然后按下

钮，IIS就被启动了。

4．设置web站点发布的IP地址。

如下图1.2。

5．新建虚拟目录/站点。

选中“默认web站点”项，点击鼠标右键，选择“新建|虚拟目录”，取虚拟目录别名为“01”，下一步，在弹出的“虚拟目录创建向导”中选择我们要发布的页面index.htm所在的文件夹01（如下图1.3）。

，然后确定。

下一步，在访问权限窗口中选择“浏览”，下一步，完成。

在新建的虚拟目录“01”中，我们可以通过属性设置“默认打开文档”等属性。

6．浏览文件。

在IIS中，选中index.htm，点击右键，浏览即可。

（二）CSS样式的简单应用

1．打开Dreamweaver。

选择“开始|程序|Macromedia|MacromediaDreamweaverMX2004”,打开Dreamweaver。

2．新建基本页login.htm。

保存到01文件夹中。

3．插入表单。

在新建页面的“设计”视图中，插入一个表单form。

4．插入表格。

在表单中插入1×1的表格，居中对齐，宽为300象素，边框为0，填充为5，间距为0，在表格中输入文字“管理员登录”。

让文字居中。

5．设置表格样式。

在右边的设计窗口中，通过单击新建图标

，打开“新建CSS样式”窗口如下图1.4，取样式名称为tabtitle，点确定。

在弹出的“.tabtitle的CSS样式定义”的窗口（如图1.5）的“类型”中设置字体为“宋体”，字体颜色为“#ffffff（白色）”，字体大小为“15象素”，粗体；在“背景”中设置背景颜色为“b0c4de”，点确定即可。

6．应用CSS样式。

选中表格，在其下端的属性窗口中的“样式（Y）”属性中选择.tabtitle应用即可。

7．同上，继续插入一个4×2的表格，居中对齐，宽为300象素，边框为0，填充为5，间距为0。

在表格的左列输入相应的文字，右对齐；右列分别插入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.5

10．保存login.htm。

实验内容完成。

【数据记录与整理】略

【结果分析】略

【思考题】

1．叙述IIS配置的全过程。

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．在两个表格中分别输入不同的内容。

4．在4行1列的表格

标记前插入

标签，在结束标记

后加入

标签。

5．修改

标记的属性为：

none"id="div1">

6．在标记中加入如下JavaScript脚本，控制样式。

functionShowDiv（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列的表格中修改属性为：

（1）;"title="03电商"class=tit>

8．保存，预览即可。

【数据记录与整理】略

【结果分析】略

【思考题】

1．想想除了单击（onClick）之外，其他的一些鼠标事件（如鼠标移上时、鼠标移走时、鼠标拖动时）该如何写。

实训三JavaScript脚本的初步使用

（1）

【实训目的】

熟悉JavaScript脚本语言的基本应用，会使用它来实现一些简单的网页特效。

【实训内容】

使用JavaScript脚本进行简单的输入控制（如光标自动停留，输入检查等），实现效果如下图所示。

图3.1

【步骤与方法】

1．同样新建文件夹03，保存本次实验内容。

2．新建一个html页面，其内容同第一次实验内容，如上图所示。

3．更改3个文本框属性，并分别取名为username，passwd，key，表单名称默认为form1。

4．在标记中增加以下脚本：

functionSetFocus（obj）//设置焦点

{

if（obj.UserName.value==""）

obj.UserName.focus（）;

else

obj.UserName.select（）;

}

functionCheckForm（obj）//输入框检查

{

if（obj.UserName.value==""）

{

alert（"请输入用户名！

"）;

obj.UserName.focus（）;

returnfalse;

}

if（obj.Passwd.value==""）

{

alert（"请输入密码！

"）;

obj.Passwd.focus（）;

returnfalse;

}

if（obj.key.value==""）

{

alert（"请输入确认码！

"）;

obj.key.focus（）;

returnfalse;

}

obj.submit（）;

}

functionIsDigit（）//判断是否数字

{

return（（event.keyCode>=48）&&（event.keyCode<=57））;

}

5．写key输入框的属性为：

6．设置“确认”按钮属性为：

CheckForm（login）;">

7．设置标记属性为：

8．保存，预览即可。

注意：

判断是否为空是空串（""），而非空格串（""）。

【数据记录与整理】略

【结果分析】略

【思考题】

1．除了掌握本次实验内容外，上网查找网络资源，尝试使用JavaScript实现一些更实用、有趣的效果。

实训四使用ASP脚本将客户端数据写入数据库

【实训目的】

熟悉ASP的初步使用，掌握将客户端的数据写入后台Access数据库的基本方法。

【实训内容】

写一个ASP文件addData.asp，将上次实验login.htm页面中的用户名（username）和密码（passwd）写入到数据库user.mdb的user表中。

【步骤与方法】

1．新建文件夹04，保存本次实验内容。

2．新建数据库user.mdb。

开始|程序|MicrosoftAccess2000，单击新建按钮。

双击“使用设计器创建表”输入字段名称：

id,username,passwd，类型分别为（自动编号），文本，文本。

3．保存表名为user，数据库名为user.mdb。

4．打开Dreamweaver，新建动态页（脚本为VBScript），文件名为addData.asp，在代码设计器中删除自动生成的所有代码，并书写代码如下：

username=request.form（"username"）

passwd=request.form（"passwd"）

dimdrive

drive="driver={microsoftaccessdriver（*.mdb）};dbq="&server.MapPath（"user.mdb"）'连接数据库

setconn=server.CreateObject（"ADODB.connection"）

conn.opendrive'打开数据库连接

'//////////conn.open"drive"'打开数据库连接

sqlstr="insertintouser（username,passwd）values（'"&username&"','"&passwd&"'）"

conn.executesqlstr'运行语句

conn.close'关闭连接

setconn=nothing

response.write（"数据成功写入数据库！

"）

5．保存代码。

6．打开前次所作页面login.htm，将标记的action属性改为：

action="addData.asp"，并保存。

7．建虚拟目录04，浏览login.htm，实现写数据库功能。

【实训的重点与难点】

（1）建数据库连接。

有两种方式：

a.手动方式：

通过操作ODBC数据源实现数据库连接（给学生演示）。

b.直接通过ASP程序实现。

如：

dimdrive

drive="driver={microsoftaccessdriver（*.mdb）};dbq="&server.MapPath（"user.mdb"）

setconn=server.CreateObject（"ADODB.connection"）

conn.opendrive

（2）SQL语句的使用。

如：

sqlstr="insertintouser（username,passwd）values（'"&username&"','"&passwd&"'）"

conn.executesqlstr'运行语句

【数据记录与整理】略

【结果分析】略

【思考题】

1．想想其他类型的数据（如数字型、日期型）如何写sql语句。

参考：

文本型的写法：

'"&文本型变量&"'

数字型的写法：

"&数字型变量&"

日期型的写法：

#"&日期型变量&"#

实训五使用ASP的Recordset对象读取数据库

内容输出到浏览器

【实训目的】

熟悉ASP的Recordset（记录集）对象的初步使用，掌握将后台Access数据库中的数据读取到浏览器的的使用方法。

【实训内容】

写一个ASP文件display.asp，将数据库score.mdb的成绩表score（学号,姓名,语文,数学,英语）中的所有内容都输出到浏览器上显示出来。

图5.1

【步骤与方法】

1．新建文件夹05，保存本次实验内容。

2．通过Access新建数据库score.mdb的成绩表score（学号,姓名,语文,数学,英语），其中类型为：

学号（自动编号），姓名（文本），语文（数字），数学（数字），英语（数字）。

并在表中插入n条记录。

3．新建动态页display.asp，保存在04文件夹中，在页面中写入如下代码：

dimdrive

drive="driver={microsoftaccessdriver（*.mdb）};dbq="&server.MapPath（"score.mdb"）

setconn=server.CreateObject（"ADODB.connection"）

conn.opendrive

sqlstr="select*fromscoreorderby学号"'读出score表中的所有数据

setrs=server.CreateObject（"adodb.recordset"）

rs.opensqlstr,conn,3,2

'输出表头名称

fori=0tors.fields.count-1

response.write""&rs（i）.name&""

'输出score表中的内容，使用双重循环

rs.movefirst

whilenotrs.eof

row=""

fori=0tors.fields.count-1

row=row&""&rs（i）&""'输出一条记录的所有字段值

response.writerow&""

rs.movenext'移到下一条记录

wend

4．新建虚拟站点，浏览display.asp即可。

【实训的重点与难点】

1．记录集对象Recordset的使用，如表头的输出：

rs（i）.name；内容的输出：

<%=rs（i）%>或者<%=rs（"字段名称"）%>均可。

2．VBS循环语句的使用。

常用的有：

for……next和while……wend等。

【数据记录与整理】略

【结果分析】略

【思考题】

1．自己动手重做一次实验，熟练掌握记录集（Recordset）对象的使用。

实训六JavaScript脚本的初步使用

（2）

－－控制语句及函数的使用

【实训目的】

熟练掌握JavaScript脚本的控制语句和函数，会用它来实现一些简单的功能，为编写更复杂的程序打下基础。

【实训内容】

要求：

使用JavaScript脚本完成以下实验内容。

1.输出逻辑表达式的结果：

4*（5+2）%2&&3<4

2.在页面上通过脚本显示6级标题。

效果如下：

这是6级标题

这是5级标题

这是4级标题

这是3级标题

这是2级标题

这是1级标题

3.使用双重循环，在页面上显示一个“9×9乘法表”。

效果如下：

9×9乘法表

1*1=1

1*2=22*2=4

1*3=32*3=63*3=9

1*4=42*4=83*4=124*4=16

1*5=52*5=103*5=154*5=205*5=25

1*6=62*6=123*6=184*6=245*6=306*6=36

1*7=72*7=143*7=214*7=285*7=356*7=427*7=49

1*8=82*8=163*8=244*8=325*8=406*8=487*8=568*8=64

1*9=92*9=183*9=274*9=365*9=456*9=547*9=638*9=729*9=81

4.设计一个递归函数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&&3<4）

得到运行结果为：

3．

（2）新建基本页02.htm，在代码视图中写入如下JavaScript脚本即可：

vari;

for（i=6;i>=1;i--）

document.write（"这是"+i+"级标题"）;

按F12即可浏览到以上结果。

4．（3）新建基本页03.htm，在代码视图中写入如下JavaScript脚本：

document.write（"

"）;
document.write（"
9×9乘法表
"）;
vari,j;
for（i=1;i<=9;i++）
for（j=1;j<=i;j++）
{
if（j==1）document.writeln（）;
document.write（j+"*"+i+"="+i*j+"\t"）;
}
document.write（"

"）;

5．新建基本页04.htm，在代码视图中写入如下JavaScript脚本：

functionRecursion（n）

{

if（n<=1）return1;

returnn*Recursion（n-1）;

}

varn;

n=prompt（"请输入阶乘的n：

","0"）;

alert（n+"的阶乘是：

"+Recursion（n））;

【数据记录与整理】略

【结果分析】略

【思考题】

1．上网收集一些JavaScript的网页特效。

实训七简单投票功能的实现

【实训目的】

进一步掌握ASP的Recordset（记录集）对象的使用，学习Recordset对象自带的增加（rs.addnewrs.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

展开阅读全文