项目二 任务一 设计制作动态网页和数据库（课件）《网页设计》（外研社版）

《网页设计》 1 项目描述 项目分解 2 体验ASP 动态网页的设计制作 熟悉数据库在电子商务中的应用 动手设计制作网上书店动态网页 任务一 设计制作动态网页和数据库 任务二 设计制作网上书店动态网页 项目二 设计制作网上店铺的元素 任务一 设计制作动态网页和数据库 活动一 制作第一张ASP动态网页 活动二 设计制作网上书店数据库 3 活动三 链接网上书店WEB数据库 活动背景 活动一 制作第一张ASP 动态网页 4 大家往往有这种体验，到电子商务网站购物之前需要注册登记，在线交易时网站需要记录客户选购的商品信息和支付信息，实施订单管理，信息交互更新量大。这些都需要采用动态网页技术来实现。 5 Step1：活动任务分析 ASP（全称Active Server Page，动态服务器主页）是微软公司推出的一种动态网页技术。ASP是提供了一种嵌在HTML中的脚本程序在Web服务器端执行的环境。ASP同HTML文件一样都是文本文件，是以.asp为扩展名的文本文件。利用ASP，可以创建和运行动态的Web应用程序。 ASP 工作流程 活动实施 6 Step2：新建网站 （1）创建动态网页 打开Dreamweaver，单击新建下的“ASP VBScript”按钮，选择ASP VBScript编写网页程序，创建动态网页。 （2）新建站点 打开网上书店站点bookshop，执行“站点/新建站点”命令，设置站点名称为“网上书店”，本地文件夹为“bookshop”。 ASP 工作流程 （3）输入标题 设置网页标题“我的第一张ASP网页”。 （4）保存文件 执行“文件/保存”命令，在站点下，文件名为“Home Page”，保存类型为ASP。 活动实施 7 Step3：制作网页 （1）输入代码 将显示模式切换为代码模式，在body之间输入代码。 ASP网页切代码 在编辑窗口输入代码 输入代码 活动实施 8 Step3：制作网页 （2）设计效果 返回设计状态，可以看到插入的代码ASP 情况。单击“实时代码”、“实时视图”，可以看到代码与设计制作后服务器实时反馈的情况。 实时视图 活动实施 9 Step4：预览效果 按“F12”，预览效果。127.0.0.1 为本地默认的IP 地址，也可用localhost代替。 预览效果 活动实施 10 在bookshop 站点下新建文件名为“asp1”的ASP 网页。要求如下。 （1）网页标题：网上书店ASP 网页。 （2）在第一行输出文字：“谢谢光临网上书店”。 （3）在第二行输出服务器的日期。 （4）在第三行输出文字：制作者姓名。 体验活动评价表 任务拓展 活动背景 活动二 设计制作网上书店数据库 11 数据库是一个用来储存数据信息的仓库，许多相关数据的集合构成一个数据库。也可以将同类的数据集合在一起，采用表的方式来统一管理，形成了数据表。Access 是微软公司开发的Office 组件之一。由于其操作简单，并能胜任小型的数据库应用，得到了广泛应用。 活动实施 12 Step1：活动任务分析 在网页中增加了对数据库的运用，就可以十分便利和有效地对数据库的各项信息进行新增、修改、删除和查询等操作，实现对网络数据的处理，从而达到网页的交互功能，为管理和决策提供必要的信息。网上书店的用户注册与管理、图书购入和销售管理都需要对数据进行信息管理。 13 Step2：创建数据库 （1）创建数据库 运行Access，选择“空数据库”，单击文件夹图标，将数据库取名为“bookshop”，并保存到站点的“data”文件夹下，再单击“创建”按钮。 新建数据库 （2）创建表格 单击开始工具栏中“设计视图”创建表。在“另存为”对话框中输入表名称为“yh”。 活动实施 14 Step3：设计数据表 ① 首先设计一张存储用户各种信息的“yh”数据表。分别建立注册时所需信息的字段名和数据类型。 ② 依次输入字段名称、数据类型和说明，并在字段属性中做对应设置。选中“用户账号”字段，单击“表格工具/设计”中的 “主键”按钮。 设置主键 注册日期时间两个字段的默认值分别为函数date( )和time( )。 活动实施 活动实施 15 Step4：输入记录 双击表“yh”输入一条记录。 任务拓展 16 创建网上书店的图书表格 （1）在bookshop 数据库中创建“book”表，存储各类书籍的相关信息。 （2）自选五本，依据内容输入5 条记录。 （3）保存“book”表。 体验活动评价表 活动背景 活动三 链接网上书店WEB 数据库 17 用Access 建立了书店的数据库bookshop，数据库中有两张表，一张是存放用户信息的“yh”表，另一张是存放书籍信息的“book”表。 18 Step1：活动任务分析 数据库应用，首先解决的问题就是数据库的链接。 ASP 应用程序通过ODBC 驱动程序就可以成功地与Access 数据库链接。在DW 中数据库的链接方式有两种：数据源名称（DSN）方式和使用字符串方式。 活动实施 19 Step2：数据库链接 1. 数据源方式 ① 打开ASP 网页，执行“窗口/ 显示面板”命令，单击面板中的“数据库”按钮，打开数据库对话窗口。 数据库窗口 “数据源名称（DSN）”对话框 ③ 单击“定义”按钮，打开“ODBC数据管理器”对话框，在“系统DSN”标签，单击“添加”按钮。 ② 单击“+”按钮，打开下拉菜单。单击“数据源名称（DSN）”，打开“数据源名称（DSN）”对话框。 活动实施 20 Step2：数据库链接 ④ 在“创建新数据源”对话框中，选择安装数据源的驱动程序。 ⑤ 选择数据库驱动类型后，再选择数据源。测试成功后再单击“确定”按钮关闭“数据源（DSN）”对话框。 在“数据库”标签下出现数据库连接名称以及数据库中的数据表等内容。 对连接的数据库进行编辑、重置、测试数据库的连接，测试连接，会返回连接成功信息。 数据库连接信息 活动实施 21 Step2：数据库链接 2.字符串方式 ① 新建一张ASP网页，取名为“datalink”保存至网站文件夹下。 ③ 在“自定义连接字符串”对话框中，设置数据库连接名称以及数据库连接字符串。 连接字符串内容 ② 单击面板上的“数据库”按钮，“+”按钮打开下拉菜单。在“数据库”标签下出现数据库连接方式，选择“自定义连接字符串”。 活动实施 22 Step2：数据库链接 采用数据库连接字符串方式，在“数据库”标签下同样会出现数据库连接名称以及数据库下数据表等。 字符串方式同样会在站点文件夹下自动生成一个名为“Connections”的文件夹，并在此文件夹下自动生成一个名为“datalink.asp”的数据库链接的信息文件。 数据库标签 datalink 网页中数据库链接信息 字符串方式操作简单，但在数据库链接文件中暴露了数据库文件的名字和路径，可能会给网络数据库的安全带来隐患。 活动实施 感谢观看 23 $$