《电子商务网页制作 教学课件 ppt 作者 谢嵘 010》由会员分享，可在线阅读，更多相关《电子商务网页制作 教学课件 ppt 作者 谢嵘 010（40页珍藏版）》请在金锄头文库上搜索。
1、主编：谢嵘,随着网络技术的日新月异，网页技术不紧紧局限于制作一个网页或者一个网站，人们将网页分为了静态动态网页和动态网页。前面我们所讲的都是静态网页的制作，那么什么是动态网页呢？细心的人们发现：现在许多网页的文件扩展名不再只是“.html”，还有“asp”、“php”、“jsp”等等，这些都是采用动态网页技术制作出来的。无论是动态网页还是静态网页，都可以展示基本的文字和图片信息，但从网站开发、管理、维护的角度来看就有很大的差别。 本项目从认识动态网页入手，介绍了动态网页的特点和功能，以及动态网页的制作方法。,项目10 制作动态网页,项目导学,体验活动一：体验用户注册和登录,活动任务： 进行用户
2、注册，了解网上注册的流程；并使用注册账号进行登录。 活动指导： 动态网站是时下最流行，那么我们平时所接触到的哪些网站是动态网站呢？让我们体验一下最熟悉的淘宝网站，在淘宝网站上进行用户注册，然后试一下，换一台机器进行用户登录，我们会看到什么呢？,项目10 制作动态网页,体验活动一：体验用户注册和登录,活动步骤： 打开IE浏览器，进入“淘宝网”，地址：。 用户注册：进入“邮箱注册”。,项目10 制作动态网页,体验活动一：体验用户注册和登录,活动步骤： 填写注册信息：在注册页面上填写相关信息。 确认邮件：通过邮箱验证注册信息。,项目10 制作动态网页,体验活动一：体验用户注册和登录,活动步骤： 登录
3、邮箱，点击链接网页。 完成注册（记住淘宝账户名和支付宝账户名）。,项目10 制作动态网页,体验活动一：体验用户注册和登录,活动步骤： 换一台机器，使用刚注册的用户名登录。,项目10 制作动态网页,活动小结,在完成了以上体验活动后，根据操作步骤请填写完后面的操作。,项目5 使用图像美化页面,体验活动二：安装、设置IIS辑图像,活动任务： 安装IIS组件并配置IIS。 活动指导： IIS是 Internet Information Server的缩写，它是一个World Wide Web Server。Gopher Server和FTP Server全部包容在里面。 有了IIS，就意味着你能发布网
4、页，并且有ASP（Active Server Pages）、JAVA、VBscript产生页面，有着一些扩展功能，是做动态网页的必备程序之一。,项目10 制作动态网页,体验活动二：安装、设置IIS辑图像,活动步骤： 进入“控制面板”，双击打开“添加或删除程序”，选择“添加或删除Windows组件”。 在打开的组件中，将“Internet信息服务”前面的复选框内打勾，接着插入Windows XP操作系统的安装光盘。,项目10 制作动态网页,体验活动二：安装、设置IIS辑图像,活动步骤： 点击“下一步”进行安装，直到完成。 在“控制面板”下的“管理工具”中，双击打开Internet信息服务即IIS
5、。,项目10 制作动态网页,体验活动二：安装、设置IIS辑图像,活动步骤： 单击左侧的树形图标的“+”，直到打开“默认网站”，选中“默认网站”，点击右键，选择“属性”。 在打开的“默认网站属性”对话框中，选择“主目录”选项卡，将本地路径和权限设置如图所示。,项目10 制作动态网页,体验活动二：安装、设置IIS辑图像,活动步骤： 接下来，选择“文档”选项卡，点击“添加”，然后在文本框中输入index.asp，点击“确定”。将默认网页设置为新添加的index.asp。 在浏览器中输入http:/localhost/查看显示页面。,项目10 制作动态网页,体验活动三：创建数据库,活动任务： 创建数据
6、库文件；添加数据内容；创建数据库链接。活动指导： 制作动态网页，数据库是必不可少的条件。这里以Microsoft Access2007为例，讲解如何创建数据库和建立数据库连接。,项目10 制作动态网页,体验活动三：创建数据库,活动步骤： 在D盘Test文件夹下，单击右键，选择“新建Access数据库”，将文件名改为Test.mdb。 双击打开Test.mdb，选择“创建”菜单中的“表设计”。,项目10 制作动态网页,体验活动三：创建数据库,活动步骤： 根据图所示的步骤进行设计：将“字段名称”和“数据类型”按照图所示进行创建，并设置username字段为主键；前三个字段大小改为20，email字
7、段改为30；将“表名称”设置为UserTable。,项目10 制作动态网页,体验活动三：创建数据库,活动步骤： 添加数据，按照图所示的步骤进行数据的添加；右击表名“UserTable”，选择“数据表视图”，切换到数据编辑方式下。在4列中分别输入数据，username中输入“user”，userpass中输入“123”，conpass中输入“123”，email中输入“”。,项目10 制作动态网页,体验活动四：制作登陆页面,活动任务： 创建站点；新建登录页面。 活动指导： 运用Dreamweaver工具，和前面所学过的知识制作登录页面。,项目10 制作动态网页,体验活动四：制作登陆页面,活动步骤
8、： 创建站点。编辑站点名称：Test。 选择服务器技术为“ASP VBScript”。,项目10 制作动态网页,体验活动四：制作登陆页面,活动步骤： 创建asp登录页面，选择“新建文档”空白页中的“ASP VBScript”。 编辑登录页面，运用前面所学习过的知识，制作如图所示的登录页面。,项目10 制作动态网页,体验活动四：制作登陆页面,活动步骤： 保存编辑好的页面，命名为index.asp，创建一个登录成功的跳转页面和一个登录的失败的跳转页面，分别命名为“success.asp”和“error.asp”。,项目10 制作动态网页,体验活动五：连接登陆记录集,活动任务： 连接登录页面的数据集
9、。 活动指导： 编辑好页面后，下一步就是要连接页面和数据集，只有连接了数据库，才能算是真正的动态网页。,项目10 制作动态网页,体验活动五：连接登陆记录集,活动步骤： 添加数据库。在“窗口”菜单中选择“服务器”。 在打开的“服务器”侧边栏中点击“+”，选择“自定义连接字符串”。,项目10 制作动态网页,体验活动五：连接登陆记录集,活动步骤： 在连接名称中填入“conn”；在连接字符串中，填入“Driver=Microsoft Access Driver (*.mdb); DBQ=D:TestTest.mdb”/DBQ可按照自己创建的数据库的路径填写。 填好“连接字符串”，点击“测试”，会弹出“
10、成功创建连接脚本”对话框，点击“确定”完成数据库连接。,项目10 制作动态网页,体验活动五：连接登陆记录集,活动步骤： 选择“服务器行为”选项卡；点击“+”号，添加行为类型“用户身份验证”中的“登录用户”。 “用户名列”为username，“密码列”为userpass，“登录成功跳转页面”为success.asp，“登录失败跳转页面”为error.asp,项目10 制作动态网页,体验活动五：连接登陆记录集,活动步骤： 测试。启动浏览器，预览页面，输入用户名user1，密码123，如图所示（用户名和密码为在数据库中添加的数据）；点击“登录”，看看结果如何？登录成功，跳转到success.asp页
11、面。,项目10 制作动态网页,体验活动六：注册用户,活动任务： 制作注册页面；进行数据验证。 活动指导： 当数据库中没有用户信息时，需要用户自己进行注册，则需要进入注册页面。通过下面的体验可以实现登录页面的制作和数据库的验证。,项目10 制作动态网页,体验活动六：注册用户,活动步骤： 制作注册页面如图所示；按照设计页面，制作注册窗口，4个文本框：用户名，密码，确认密码和电子邮件；2个按钮：提交，重填。 设置服务器行为。在“服务器行为”中点击“+”，选择“插入记录”。,项目10 制作动态网页,体验活动六：注册用户,活动步骤： 编辑验证内容。选择“连接”内容为conn，选择“插入成功”后跳转页面为
12、success.asp，设置表单元素“conuserpass”的验证列为conpass。,项目10 制作动态网页,活动小结,根据操作步骤请填写完后面的操作。,项目5 使用图像美化页面,相关知识,一、编辑登陆页面代码 用户登录 /页面名称 ,项目10 制作动态网页,相关知识,一、编辑登陆页面代码 用户名： /用户名文本框，命名为username,项目10 制作动态网页,相关知识,一、编辑登陆页面代码 (*请输入注册的用户名) 密码： /密码文本框，类型为“password”（输入不可见，为*），命名为userpass (*请输入密码),项目10 制作动态网页,相关知识,一、编辑登陆页面代码 /登
13、录按钮，类型为“submit”，命名为submit ,项目10 制作动态网页,相关知识,二、注册用户页面代码 用户注册 ,项目10 制作动态网页,相关知识,二、注册用户页面代码 用户名：,项目10 制作动态网页,相关知识,二、注册用户页面代码 /用户名文本框，设置类型为text，命名为username (*请填写需要注册的用户名) 密码： /密码框，设置类型为password，命名为userpass,项目10 制作动态网页,相关知识,二、注册用户页面代码 (*请填写登录用的密码) 确认密码： /确认密码框，设置类型为password，命名为conuserpass (*请再次输入密码) ,项目10 制作动态网页,相关知识,二、注册用户页面代码 电子邮件地址： /电子邮件文本框，设置类型为text，命名为email (*请输入您的电子邮箱) ,项目10 制作动态网页,相关知识,二、注册用户页面代码 ,项目10 制作动态网页,
