电子商务网站建设实训指导书.doc

山西药科职业学院电子商务网站建设与维护实训指导书执笔人： 贾文雅 王一日 期：2011年2月29日实训一 建立Web应用开发及运行环境一、实训目的1掌握Web运行环境的建立方法 2掌握JSP应用环境的建立 二、实训环境Windows XP/2000/2003操作系统、JDK6、Tomcat 6.0、MyEclipse 6.5三、实训内容1安装JDK62安装服务器软件Tomcat 6.03安装、配置SQL Server 20054安装网络购书系统5安装、配置MyEclipse 6四、实训步骤（一）安装JDK61安装JDK6默认安装。2配置系统环境变量（1）右击桌面上“我的电脑”，选择【属性】，在弹出的“系统属性”窗口中选择【高级】标签。（2）单击【环境变量】按钮，在“系统变量”列表框中选择“Path”参数，并单击【编辑】按钮。在变量值前面加入JAVA的路径“C：Program FilesJavajdk160_11bin ;”，【确定】。（3）单击【新建】按钮，设置环境变量CLASSPATH，其变量值为“”。3测试安装结果（1）打开记事本，编辑一简单的JAVA程序，保存至C：，如图1-1所示。图1-1 JAVA小程序（2）在DOS命令提示符下执行：C：Javac HWjava。在当前目录下生成HWclass文件。（3）在DOS命令提示符下运行C：Java HW，显示“Hello World!”，如图1-2所示。图1-2 JAVA程序运行结果（二）安装服务器软件Tomcat 61Tomcat安装Choose install Location建议为“C：Tomcat 60”，如图1-3所示。Java Virtual Machine为“C：Program FilesJavajdk160_11”，如图1-4所示。其余默认安装。图1-3 tomcat 60安装路径 图1-4 J2SE路径2测试Tomcat确认Tomcat处于运行状态。在浏览器地址输入http：/127001：8080或http：/localhost：8080，如看到Tomcat主页表示安装成功。3编写第1个JSP程序（1）在Tomcat 60的webappsex_D02目录文件下新建ex2-01jsp文件，打开记事本，编写如图1-5所示的程序。图1-5 JSP小程序（2）在浏览器地址栏输入http：/127001：8080/ex_D02/ex2-01jsp，运行此程序，可以看到运行结果。（三）安装及配置SQL Server 20051安装SQL Server 2005。2【开始】|【运行】输入“servicesmsc”命令，如图1-6所示，打开【服务】窗口。 图1-6 JSP小程序3鼠标右键启动3个服务：SQL Server （*）、SQL Server Agent（*）、SQL Server Browser4【开始】|【程序】|【Microsoft SQL Server 2005】|【 配置工具】|【 SQL Server 外围应用配置器】服务和连接的外围应用应用配置器远程连接选择“本地连接和远程连接”选择“同时使用TCP/IP和named pipes”【确定】。5启动SQL Server 2005 ： 【开始】|【程序】|【Microsoft SQL Server 2005】|【 SQL Server Management Studio】打开【对象资源管理器】鼠标右击服务器名称【属性】安全性服务器身份验证SQL Server和Windows身份验证模式。6【对象资源管理器】安全性登录名sa右键【属性】状态启用登录。7【对象资源管理器】安全性登录名sa右键【属性】常规取消“强制实施密码策略”，密码重设（空）。8【对象资源管理器】鼠标右击服务器名称【重新启动】（四）安装网络购书系统1首先将bookshop整个文件夹拷贝到tomcat发布目录webapps下。2导入数据库（1）打开SQL Server 2005 的【对象资源管理器】窗口鼠标右击【数据库】【还原数据库】，显示“还原为数据库”窗口。（2）在“目标数据库”文本框中输入数据库名称“bookshop”；选择【源设备】单选按钮，单击右侧的【选择文件】按钮，弹出“指定备份”窗口。（3）单击【添加】按钮，进入“定位备份文件”窗口，【文件类型】选择“所有文件（*）”，选择文件Tomcat 60webappsbookshopbookshop0804文件【确定】，如图1-7所示。图1-7 选择数据库文件（4）勾选“选择用于还原的备份集”，如图1-8所示。图1-8 勾选“选择用于还原的备份集”（5）选择左侧的“项”，注意数据库的还原位置。图1-9 数据库的还原位置3创建数据源（1）打开“控制面板”“管理工具”“数据源”（ODBC），选择“系统DSN”选项卡。（2）单击【添加】按钮，弹出“创建新数据源”对话框。（3）选择【SQL Server】，单击【完成】按钮。（4）弹出“创建到SQL Server的新数据源”窗口，在“名称”文本框输入数据源名称。在网上书店中，为数据源起名bookshoplk。在服务器文本框输入SQL 2005的服务器名称，如“LZM-34B2062D547”。单击【下一步】按钮，如图1-10所示。图1-10 创建数据库窗口（5）在弹出的窗口中选择【使用用户输入登录ID和密码的SQL Server验证】单选按钮，在【登录ID】和【密码】文本框中输入对bookshop数据库有存取权限的SQL Server账号（sa）和密码（无）。单击【下一步】按钮。（6）在弹出的窗口中，选择【更改默认的数据库为】复选框，并选择bookshop数据库，单击【下一步】按钮。（7）在弹出的窗口中单击【完成】按钮。（8）在弹出的“ODBC Microsoft SQL Server安装”窗口中单击【测试数据源】按钮。（9）弹出“SQL Server ODBC数据源测试”窗口，如果对话框提示测试成功，表示DSN设置正确，单击【确定】按钮，完成系统DSN的建立。4网站的发布重启tomcat，在浏览器地址栏中输入：http：/127001：8080/bookshop（初始账号和密码：pds/pass）http：/127001：8080/bookshop/admin初始账号和密码：admin/pass）（五）安装及配置MyEclipse1安装MyEclipse运行“MyEclipse_650GA_E33exe”文件安装Eclipse。2 输入序列号启动Eclipse65，弹出“Subscription Key Information”窗口单击【Enter Subscription】按钮Name： flowbytecn；Serial： sLR8ZC-855575-66525457680638618。图1-11 输入序列号3汉化将eclipse文件夹拷贝到MyEclipse 6.5的根目录下，将eclipse文件夹内的文件覆盖。在拷贝的过程中会出现文件覆盖的弹出窗口，单击“确定”。重新启动MyEclipse 6.5。4运用MyEclipse6.5，制作第一个JSP程序（）启动MyEclipse 6.5，配置环境。【窗口】【首选项】找到左边树型菜单中的【MyEclipse Enterprice Workbench】【server】【Tomcat】【Tomcat 6.x】，如图1-12所示，directory为tomcat6.0的安装根目录路径。图1-12 在【首选项】中配置tomcat安装路径（）选择左边树型菜单中的【tomcat 6.x】【JDK】单击右边的【Add】按钮弹出“TomcatAdd JVM”窗口单击JRE主目录右侧的【浏览】的按钮，找到“jdk1.6.0_11”文件夹所在位置，如图1-13所示。图1-13 “jdk1.6.0_11”文件夹所在位置（3）创建web project。【文件】|【新建】|【web project （Optional Maven Support）】在project name中输入一个工程名字，如图1-14所示。点击【完成】后在左侧的“包资源管理器”中出现。图1-14 创建web project（4）右击【MyProiect】|【WebRoot】新建JSP弹击“Create a new JSP page”窗口，如图1-15所示。在“File Name”文本框中输入JSP文件的名字，如login.jsp。图1-15 新建JSP文件菜单（5）打开JSP文件进行编辑。（6）部署JSP项目。点击 工具栏中的按钮，打开“Project Deployments”窗口单击【Add】按钮选 中容器tomcat 6.x单击【完成】按钮，如图1-16所示。 部署完成，在Tomcat 60webapps下生成votew文件夹及MyEclipse工作区voteWebRoot文件夹下的所有文件。 图1-16 部属JSP项目（7）部署完毕，接下来启动tomcat服务。点击工具栏中的 按钮旁边的三角形，选中【tomcat】|【 start】。（8）最后到IE浏览器中打开运行 。http：/localhost：8080/MyProject/loginjsp。实训2 HTML的表格和表单一、实训目的要求1掌握HTML表格的概念；2掌握HTML表单的概念；3熟练掌握HTML表格的制作方法的技巧；4学会HTML表单的制作方法。二、实训内容及操作步骤【操作一】1打开记事本软件。2输入以下内容：简单表格制作方法学生基本情况表 姓名性别年龄籍贯总分专业特长王小林男25宁波567电子商务软件开发朱风烽男23上海542现代物流网络游戏孙伟萍女22南京587计算机ASP语言张生笑女24苏州512电子商务数据库开发周卫文男25上海541现代物流网络游戏3将文件保存在D:student141.txt。4将文件保存在D:student141.html。5运行141.html文件后得到的结果。【操作二】1打开记事本软件。2输入以下内容：复杂表格制作方法教学业绩定量表 大项系项完成课时自评分自评分考评分 教 学 业 绩 50 分 教 学 工 作 量 （40分）满教学工作量180课时得40分，每超50课时加1分。（双肩挑人员工作量减半） 第一学期课程名称授课班级完成课时48分45分VB程序设计 电子商务概论 VFP数据库管理 计算机200401 电子商务200506 现代物流200304 80课时 48课时 76课时 第二学期电子商务网站建设 网络营销与策划 商业信息技术电子商务200302 电子商务200201 电子商务20020480课时 76课时 48课时论文指导24人 教学效果10分 考核优秀为10分，良好为8分，一般为5分，较差不计分，（本项按已通过的教学评估的结果打分，尚未进行教学评估的，由系、教研室组织考核，进行打分。学院评估结果有效期为二年）3将文件保存在D:student142.txt。4将文件保存在D:student142.html。5运行142.html文件后得到的结果。【操作三】1打开记事本软件。2输入以下内容：简单表单制作方法学生学习情况调查表 姓名： 学号： 男： 女 所在城市 上海 南京 宁波 北京 西安 您喜欢的课程： 电子商务 VB程序设计 C程序设计 西方经济学 网络营销 网站建设 ASP程序设计 电子商务与物流 3将文件保存在D:student143.txt。4将文件保存在D:student143.html。5运行143.html文件后得到的结果。【操作四】1打开记事本软件。2输入以下内容：复杂表单制作方法商品信息反馈表 客户名称： 账号： 密码： 单位性质： 国营集体 个体 合资 独资 所在城市 上海 南京 宁波 北京 西安 您喜欢的商品： 笔记本电脑 数码照相机 数字电视机彩信手机 滚筒洗衣机 数字电冰箱 欧式燃气灶中央空调 建议和意见：您有什么好的建议和意思请写在这里： 3将文件保存在D:student144.txt。4将文件保存在D:student144.html。5运行144.html文件后得到的结果。【小结】通过以上的实训可以使学生掌握表格和表单的概念，学会表格的制作方法和技巧，掌握表单的一般制作方法。表格各单元格中的颜色可以根据以下的几个命令得到：表格的背景色彩 行的背景色彩表元的背景色彩或 #=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称：Black（黑色） , Olive(橄榄色)Teal(深青色) , Red（红色）Blue（蓝色） , Maroon(茶色)Navy(深蓝色) , Gray(灰色)Lime（浅绿色） , Fuchsia(紫红色)White(白色) , Green(绿色)Purple(紫色) ，Silver(银色)Yellow（黄色） , Aqua (水绿色)【思考题】1表格标题的位置由什么属性决定，请说出其格式。2表格的边框尺寸由什么属性决定，请说出其格式。3说出表格单元格内的文字对齐方式，请说出其格式。4如何实现跨多行、多列的表元，请说出其格式。实训三 网页设计基础-HTML语言【实训前的准备】1检查是否连接了Internet。2检查操作系统是否Windows 98/2000或Windows XP。3在除C：盘上（可以在D：盘、E盘、或其他逻辑盘）创建一个新文件夹，名字为student。4检查系统是否有：Word 2000、Dreamweaver、FrontPage、记事本等软件。一、实训目的1了解HTML 文档结构；2初步掌握基本标记的使用；3能够运用MyEclipse 6.5制作简单网页。二、实训环境Windows XP/2000/2003操作系统、MyEclipse 6.5三、实训内容1使用MyEclipse 6.5制作只有一行文字的网页，了解HTML 文档结构。2在IE浏览器中打开编写的网页文件，查看运行效果；3在网页中添加文本内容，并对页面格式进行设置排版，制作一个简单文字内容的网页；4在网页中添加图片，并对页面格式进行设置排版，制作一个简单图文内容的网页；5制作一个索引网页，建立与前面网页之间的超连接；6制作一个简单的个人主页。四、实训步骤1使用MyEclipse编辑HTML文件（1）【开始】|【程序】|【MyEclipse 6.5】|【 MyEclipse 6.5】（2）【文件】|【新建】|【项目】【常规】|【项目】，单击【下一步】按钮（3）【文件】|【新建】|【HTML（Advanced Templates）】（4）观察网页的基本结构，了解基本结构所用标记的作用，保存文件，在IE 浏览器中查看网页运行效果。（5）在空白网页的标记之间输入文字“上海商学院”，存盘并查看运行效果。2制作一个简单文字内容的网页（1）新建一个空白网页；（2）添加适量文字；（3）利用HTML文字标记进行版面编排，要求：n 使用标题；n 分段、分行、段落对齐方式；n 设置字体（字体、大小、颜色、风格）；n 插入水平线等。（4）保存文件（文件名为1htm）；（5）在IE 浏览器中查看网页运行效果；（6）重复的过程，更改标记属性，观察运行效果。3制作一个简单图文内容的网页（1）新建一个空白网页，在网页中添加适量文字，利用HTML 文字标记进行版面编排；（2）运用HTML 标记插入图片，设置图片的属性，进行图文混排；（3）保存文件（文件名为2htm），查看网页运行效果。4建立超链接（1）新建一个空白网页，在网页中添加三个超链接，分别链接到前面制作的网页（1htm 和2htm）上，保存文件，查看网页运行效果，进行链接测试。（2）在网页中建立其它网站的超链接， 分别链接到“ 上海商学守” 主页（http：/wwwsbseducn），“新浪网”主页（http：/wwwsinacomcn），查看网页运行效果，进行链接测试。5制作一个简单的个人主页。根据前面的练习，制作个人主页，要求：有个人简介，图片，超链接等内容，作到页面美观，内容充实。五、实训要求1独立完成实训内容；2保存制作的网页；3记录实训过程存在的问题，书写实训报告。六、思考题1网页的基本结构包括哪些部分，各部分的功能是什么？2网页设计中有哪些常用的图片类型，如何设置属性？3网页设计中如何设置超链接？实训四 网页设计基础-CSS基本语法【实训前的准备】1检查是否连接了Internet。2检查操作系统是否 Windows XP。3在除C：盘上（可以在D：盘、E盘、或其他逻辑盘）创建一个新文件夹，名字为student。4检查系统是否有：Word 2003、Dreamweaver、FrontPage、记事本等软件。一、实训目的1 了解XHTML；2 掌握在网页中引用CSS 的方法；3 掌握CSS 的基本语法规则；4 掌握CSS 的常用选择器；5 掌握使用Dreamweaver 定义CSS 的方法。二、实训环境Windows XP/2000/2003操作系统、MyEclipse 6.5三、实训内容1CSS 的引入和基本选择器应用；2利用CSS 对网页进行控制；3利用W3school 网站进行CSS 的练习。四、实训步骤1CSS的引入和基本选择器应用；（1）内嵌样式表将定义的样式以 ”text/css”样式定义形式插入到文档的Head区，此种方法样式将影响当前整个页面。建立网页Css1.htm，代码如下：H1color:red; Font-family:”华文行揩”,”宋体”;Bodycolor:black;Font-size:9pt;.fntcolor：blue;Font-family:”隶书”; Font-size:14pt;这是标题一这是正文这是使用Fnt 类后的效果（2）行内样式将定义的样式以标记的属性形式插入，如： ，此种方法样式只影响当前标记所影响的区域。建立网页Css2htm，代码如下：H1color:red; Font-family：”华文行揩”，”宋体”;Bodycolor:black;Font-size:9pt;.fntcolor:blue;Font-family:”隶书”; Font-size:14pt;这是标题一这是正文这是使用Fnt 类后的效果30”这是中效果只使用于此段（3）外部样式表将所有样式的信息存放在一个单独的文件中（扩展名为Css），然后用把它链接到每个HTML 页面中。如果你希望样式能够影响你站点上的所有文件，这是很好的办法。链接格式：2利用CSS对网页进行控制；（1）创建如图4-1所示页面（css3.htm）。图4-1 未使用CSS 样式前的网页（2）建立样式文件style.css，格式化上面页面如图4-2所示。实训五、六 VBScript综合实训【实训前的准备】1检查是否连接了Internet。2检查操作系统是否Windows 98/2000或Windows XP。3在除C：盘上（可以在D：盘、E盘、或其他逻辑盘）创建一个新文件夹，名字为student。4检查系统是否有：Word 2000、Dreamweaver、FrontPage、记事本等软件。一、实训目的1了解VBScript的运行环境。2熟悉VBScript的编辑工具。3熟悉VBScript在HTML中的应用。4. 了解VBScript的数据类型，和常用函数的基本应用。5熟悉VBScript的过程、条件语句、循环语句的基本应用。二、实训内容及操作步骤】【操作一】VBScript中ifthenelse语句应用实训1打开记事本或者Dreamweaver软件。2输入以下内容：If.Then.Else的应用Sub GreetingMessage() If Hour(Now) 8 Then MsgBox 您早! ElseIf Hour(Now) 12 Then MsgBox 早上好! ElseIf Hour(Now) 14 Then MsgBox 午安! ElseIf Hour(Now) 17 Then MsgBox 下午好! ElseIf Hour(Now) 22 Then MsgBox 晚上好! Else MsgBox 晚安! End Ifend subGreetingMessage()3将文件保存在D:studentif.txt。（编辑修改用）4将文件保存在D:studentif.asp。（运行用）5运行if.asp文件后即可得到结果。【操作二】VBScript中SelectCase应用实训1打开记事本或者Dreamweaver软件。2输入以下内容：Select.Case的应用dim op,x,y,zop=*x=21y=32SelectCase(op) 调用SelectCase过程sub SelectCase(Name)Select Case Name Case + z=x+y msgbox 值为:&Z&Case - z=x-y msgbox 值为:&Z& Case * z=x*y msgbox 值为:&Z& Case Else msgbox 值无效End Selectend sub 3将文件保存在D:studentselectcase.txt。（编辑修改用）4将文件保存在D:student selectcase html。（运行用）5运行selectcase.html文件后即可得到结果。【操作三】VBScript中Do whileloop循环应用实训1打开记事本软件。2输入以下内容：Do whileloop循环应用%dim total,numtotal=0num=1do while numDo whileloop循环运行结果是：3将文件保存在D:studentDowhile.txt。4将文件保存在D:studentDowhile.asp。5运行Dowhile.asp文件后即可得到结果。【操作四】VBScript中Do untilloop循环应用实训1打开记事本软件。2输入以下内容：Do untilloop循环应用Do untilloop循环运行结果是：3将文件保存在D:studentuntil.txt。4将文件保存在D:studentuntil.asp。5运行until.asp文件后即可得到结果。【操作五】VBScript中Function函数的应用实训1打开记事本或者Dreamweaver软件。2输入以下内容：Function函数的应用3将文件保存在D:studentfunction.txt。（编辑修改用）4将文件保存在D:studentfunction.asp。（运行用）5运行function.asp文件后即可得到结果。【操作六】VBScript中数据验证实训1打开记事本或者Dreamweaver软件。2输入以下内容：数据验证 请填写注册信息： 呢称: 密码: 3将文件保存在D:studentvb2.txt。（编辑修改用）4将文件保存在D:studentvb2.html。（运行用）5运行vb2.html文件后即可得到结果。四、小结VBScript是ASP的默认语言，是VB家族的最新成员，可以说VBScript是VB的子集。当然，VBScript不是ASP唯一的脚本语言。它可以作为客户端编程语言，也可以作为服务器端编程语言。前者是可以由浏览器解释执行的语言，浏览器可以完成所有的工作，减轻了服务器的负担；而VBScript作为服务器端编程语言不受浏览器的限制。通过以上的实训可以使学生了解VBScript的基本运行环境，熟悉VBScript语言的基本语法和VBScript的基本用法。同时，让学生掌握在HTML文件中直接嵌入VBScript脚本的方法，为以后ASP编程打好基础。思考题1VB与VBScript的关系？2VBScript中变量的声明与C中的变量声明相同吗？VBScript中变量的声明规则是什么？3VBScript中如何调用VBScript的过程？4利用VBScript编程，在网页中输出1100间的所有奇数。5. 利用VBScritpt编程，自动输出一个8行，3列，宽度为80，页面居中的表格。要求：表格奇数行的背景颜色为红色（red），偶数行的背景颜色为黄色（yellow）图4-2 应用样式后的效果要求：（1）标题：字体为华文彩云，华文琥珀， 华文行楷；字号40pt；字色红色；背景色：#FFFFCC。导航条：背景色为#33CCFF。（2）导航栏：标题背景色为#FFFFCC，上边框为：实线，2pt宽，色值：#FFCC00；内容背景色：#FFCCFF；导航栏右边框为：点划线，1pt宽，色值：#0033FF。底框：背景色：#99CCFF；上边框：双线，2pt宽。（3）文本框：背景色：#FFFFCC；边框：宽度1pt，实线。（4）正文字号：9pt。（除标题）（5）超级链接：正常色：黑色，无修饰；鼠标悬停时：红色，加下划线；激活时：红色，加下划线；访问过的链接：黑色，无修饰。五、实训要求1根据指导书实例和操作步骤，独立完成实训内容。2记录实训中出现的问题，以用解决办法。六、思考题1HTML与XHTML的区别，在网页设计中各有什么用处？2CSS的基本思想。3CSS选择器有哪些，在网页设计中如何选择使用。实训七 ASP的内置对象及其应用【实训前的准备】1检查是否连接了Internet。2检查操作系统是否为Windows 98/2000或Windows XP。3检查是否装有IIS或PWS一、实训目的要求1了解ASP的运行环境。2熟悉IIS中的相关配置。3掌握如何运行ASP文件。二、实训内容及操作步骤【操作一】IIS5.0的安装1如果系统中IIS5.0没有安装，可以在控制面板的添加/删除程序中选择添加删除 Windows 组件中选择添加 IIS组件，