Dreamweaver制作动态网页.ppt

Dreamweaver制作动态网页 DSN数据源的设置Dreamweaver站点的定义注册与登录设计留言板设计 2020 4 9 1 注册与登录设计 对于一个具有动态页面的网站来说 最重要的就是与用户进行交互 为了得到稳定的客户源 或其他原因 需要用户注册成为网站的会员才能使用网站的其他功能 因此 必须设计一个让用户可以注册以及登录的网页 2020 4 9 2 总体设计 主要包含以下几项 配置ODBC数据源 编写一个与数据库进行连接的ASP文件 设计登录页面 设计一个注册的页面 编写对数据库进行操作的相关ASP文件 编写对登录 注册操作成功 失败进行处理的页面 2020 4 9 3 详细设计 一 分析网站设计内容 划分出页面组成及元素二 确立数据库及建立数据库表三 配置设计环境四 设计登录页面五 设计注册页面 2020 4 9 4 一 分析网站内容 划分页面组成及元素 2020 4 9 5 二 确立数据库及建立数据库表 建立一个名为USER的Access数据库 在这个数据库里面只需要一个数据表USER 数据表中各字段设计如下表 2020 4 9 6 在Access中实现建立数据库清单步骤 1 启动MicrosoftAccess 单击右侧 新建文件 任务窗格中的 空数据库 选项 则会弹出 文件新建数据库 对话框 提示数据库保存的位置 数据库名为user mdb 保存完毕后 显示新建的user数据库开始界面 2 在新建的数据库开始界面中双击 使用设计器创建表 选项 打开表设计器设计数据表 在设计器 字段名称 列中分别输入上页数据表中的字段名称 然后在 数据类型 下拉列表项中选择该字段的数据类型 然后在下面常规选项卡中对字段大小 格式 必填字段 是否允许空字符串等进行设置 2020 4 9 7 3 对于用户名和密码字段的设计 其大小一般用户名限制在20位以内 密码限制在15位以内 对密码字段一定进行加密 最简单的办法是单击Password字段的 输入掩码 栏 再单击右边显现的 按钮 弹出 输入掩友向导 对话框 在 输入掩码 列表框中选中 密码 一栏 单击 完成 按钮 这样 在数据表中的密码就全部以 表示了 4 选择user字段 然后右击鼠标 在弹出的快捷菜单中选择 主键 命令 将此字段设置为主键 最后执行菜单栏上的 文件 保存 命令 将弹出 另存为 对话框 将此表保存为user 5 双击user数据表 向数据表中输入用户名和密码 数据库建立完成 2020 4 9 8 三 配置设计环境 1 定义IIS站点先在硬盘上建立一个用来存放站点上以后所要建立起来的网页的目录 命名为mysite 将IIS默认站点的名字更改为自己想要的名称 然后将本地网站上建立一个虚拟目录 别名为刚才在硬盘上建立的目录mysite 2020 4 9 9 2 建立Dreamweaver站点在Dreamweaver8起始页执行菜单栏的 站点 管理站点 命令 在打开的 管理站点 对话框中单击 新建 按钮 来新建一个Dreamweaver站点 步骤为 1 在Dreamweaver8菜单栏中选择 站点 管理站点 命令 打开 管理站点 对话框 在对话框中单击 新建 按钮 然后在弹出的菜单中选择 站点 命令 将弹出 站点定义为 对话框 2 在对话框中默认显示的是 基本 选项卡 在 基本 选项卡中可以根据向导来定义站点 也可以用 高级 选项卡来定义站点 在 名称 文本框中 输入站点名字 我的小站 单击下一步 进入下一界面 2020 4 9 10 3 此页面询问是否使用服务器技术 选中 是 我想使用服务器技术 单选钮 然后在 哪种服务器技术 下拉列表中选择服务器使用的动态网页技术 单击 下一步 进入下一页面 4 在此页面中会询问如何使用文件的问题 可以选中 在本地进行编辑和测试 并在此页面的文本框中输入或选择文件在计算机中的路径 单击 下一步 进入下一页面 5 在此界面会询问如何连接到测试服务器 可以在其下拉列表中选择 本地 网络 然后在下面文本框中输入测试文件夹在服务器上的位置 单击 下一步 进入下一界面 2020 4 9 11 6 在此界面中需要设置浏览站点的URL 并单击 测试URL 按钮来检查输入的URL是否正确 单击 下一步 进入下一界面 7 在此界面中 从对话框中选择 否 不启用存回和取出 单选钮 单击 下一步 进入下一界面 8 在此界面中将显示刚才定义的站点信息 检查设置的信息有没有错误 如果正确单击完成 按钮 2020 4 9 12 3 建立数据源根据ODBC数据源知识 新建一个名为login的系统DSN 在数据源名文本框中输入 login 选择数据库 user mdb 步骤为 1 执行 开始 设置 控制面板 命令 或者执行 开始 程序 管理工具 命令 在 管理工具 窗口中双击 数据源 图标 将打开 ODBC数据源管理器 对话框 2 在 文件DSN 选项卡中 单击 添加 按钮 将弹出 创建新数据源 对话框 提示用户选择数据源的驱动程序 2020 4 9 13 3 选择一个合适的数据源驱动程序 DriverdoMicrosoftAccess mdb 然后单击 下一步 按钮 进入下一页面 4 在对话框中输入要创建的DSN文件的名称 也可以单击 浏览 按钮 在弹出的对话框中选择或者创建一个合适的DSN文件 如输入login 单击下一步 进入下一页面 5 此时会显示刚才配置的数据源信息 当检查配置正确后 可单击 完成 按钮 将弹出 ODBCMicrosoftAccess安装 对话框 2020 4 9 14 6 单击 选择 按钮 在弹出的对话框中选择一个合适的数据库文件 也可以单击 创建 按钮 在弹出的对话框中创建一个新的数据库 7 此时在 文件DSN 选项卡中 可以看到刚创建的文件DSN出现在其中 单击 确定 按钮 关闭 ODBC数据源管理器 对话框 2020 4 9 15 4 建立数据库连接在Dreamweaver8窗口中 打开 应用程序 面板组 在 数据库 面板上按照提示完成 为该文件创建站点 选择一种文档类型 和 设置站点的测试服务器 操作后 单击面板左上角的 按钮 在弹出的菜单中选择 数据源名称 命令 将弹出 数据源名称 对话框 在 连接名称 文本框中输入 conn 在 数据源名称 下拉列表中选择刚才建立的系统DSN名称 login 然后单击 测试 按钮 可以看到一个表示连接成功的对话框 单击 确定 按钮 就完成了数据库连接的配置 Dreamweaver8自动生成了一个 Connections 的文件夹以及一个名为 conn asp 的文件 2020 4 9 16 四 设计登录页面 启动Dreamweaver8 设计登录页面 具体步骤如下 1 在Dreamweaver8的起始页中选择创建ASP文件 保存为 Login asp 2 在工作区的文档窗口中选择 设计 视图 在文档工具栏的 标题 文本框中输入 用户登录 然后单击 表单 插入栏中的 表单 按钮 在设计视图中添加一个表单 名称设为Login 2020 4 9 17 3 在表单中添加一个4行2列的表格 将表格的 边框属性 设置为0 表示看不到表格边框 在文档窗口下方的状态栏上单击标签 选整个表格 再在 属性 面板中将表格 对齐 方式设置为 居中对齐 4 选中整个表格 在 属性 面板中的 背景图像 文本框中为表格设置背景图片 并将第一行的单元格合并为一行 5 向表格中添加用户名称 用户密码文本域以及注册和登录按钮 再在上面添加文字说明 2020 4 9 18 6 因为注册按钮不进行提交表单的操作 所以要对它进行一些设置 在设计视图中选择注册按钮 在属性面板中单击右边的 快速标签编辑器 图标 在 编辑标签 文本框内添加如下代码 onClick location href register asp 此段代码表示如果单击注册按钮 将会跳转到 注册页面 7 在完成页面设计后 现在利用Dreamweaver的 服务器行为 来完成对 登录 过程的操作和处理 首先在设计视图中 将光标移到Login表单内 然后在 应用程序 面板组的 服务器行为 面板上单击左上角的 号按钮 在弹出的菜单中选择 用户身份验证 登录用户 命令 在弹出的 登录用户 对话框中进行设置 设置内容参见下表 2020 4 9 19 2020 4 9 20 五 设计注册页面 注册页面与登录页面的设计类似 页面元素的具体设置如下表所示 2020 4 9 21 完成网页设计后 就可以利用Dreamweaver的 服务器行为 来完成对 注册 过程的操作和处理 其具体步骤如下 1 在文档窗口的设计视图中 将光标移到RegisterForm表单内 在 应用程序 面板组中的 服务器行为 面板中单击左上角的 按钮 在弹出的菜单中选择 插入记录 命令 将弹出 插入记录 对话框 2020 4 9 22 2 插入记录 对话框里的各项设置如下表 2020 4 9 23 对于 确认密码 只是让用户再次确定输入的密码是不是正确的 所以此字段不需要插入到user表中去 单击 确定 按钮后 关闭此对话框 则Dreamweaver8会自生成 Register asp中添加相关的ASP代码 3 完成上面设置后 需要考虑另外一个问题 因为在user中 用户名和密码都不能为空值 在当前注册页面中单击 注册 按钮时 就会认为插入的是一个用户名和密码都为空值的记录 那么插入操作就会出错 所以 必须在用户单击 注册 按钮前检查一下用户输入的数据是不是正确的 可以编写一段JavaScript代码来实现这个功能 可在区加入代码 2020 4 9 24 functionCheckForm if RegisterForm UserName value alert 用户名不能为空 RegisterForm UserName focus returnfalse elseif RegisterForm Password value alert 密码不能为空 RegisterForm Password focus returnfalse elseif RegisterForm Password value RegisterForm cPassword value alert 两次输入的密码不一致 请重新输入 RegisterForm Password value RegisterForm cPassword value RegisterForm Password focus returnfalse elseRegisterForm submit 2020 4 9 25 4 将光标移到 RegisterForm 表单内 然后在 应用程序 面板组中的 服务器行为 面板上单击左上角的 号按钮 在弹出的菜单中选择 用户身份验证 检查新用户名 将弹出 检查新用户名 对话框 在 检查新用户名 对话框中 在 用户名字段 下拉列表中选择 UserName 在 如果已存在文 则转到 文本框中输入 RegisterFailure html 然后单击 确定 按钮 关闭此对话框 则Dreamweaver8会自动在Register asp里添加相关的ASP代码 2020 4 9 26 六 编辑登录成功和失败页面以及注册成功和失败页面 2020 4 9 27 留言本设计 一 设计思想如图所示 一个完整的留言本程序可以分为两个部分 一部分是用户留言 用户在选择不同留言主题后 即可在留言页面中查看其他人的留言以及发表留言 另一部分是管理员对留言进行管理 可以对留言进行审查以及删除 2020 4 9 28 2020 4 9 29 二 数据库设计 有关留言本的数据库Msgboard中的数据表可以分为两个部分 一部分为相关主题的数据表MsgTopic 另一部分为用户留言记录的数据表 相关主题数据表的设计如下表所示 2020 4 9 30 用户留言数据表的设计如下表所示 2020 4 9 31 三 准备工作 1 定义IIS站点 2 定义Dreamweaver8站点 3 配置ODBC数据源 4 在Dreamweaver中建立数据库连接 2020 4 9 32 四 选择留言主题页面设计 设计好的选择留言主题页面为方便起见 可以在此设置一个 管理留言 的链接 单击此链接将打开留言管理页面 从数据库中读取留言主题的具体操作步骤如下1 单击 绑定 面板中的 按钮 在弹出的菜单中选择 记录集 查询 命令 将弹出 记录集 对话框 在此对话框中设置 名称 为 Recordset1 在 连接 下拉列表中选择已经建立好的数据库连接connMsg 在 表格 下拉列表中选择数据库表格MsgTopic 并选择显示 MsgID 和 MsgSubject 两个字段 在 排序 下拉列表中选择 MsgID 为 升序 单击确定按钮 关闭此对话框 2020 4 9 33 2 展开 绑定 面板中的 记录集 树型结构 将MsgSubject字段拖曳到表格的最后一行右边的单元格中 然后选择表格中的此动态文本 在属性面板中单击 链接 文本框右边的 浏览文件 按钮 将弹出 选择文件 对话框 在 选择文件 对话框中的 URL 文本框中输入 msgboard asp 然后单击 参数 按钮 在弹出的 参数 对话框的 名称 栏中输入要传递的参数名称MsgID 然后单击 值 栏右边的 绑定到动态数据源 按钮 在弹出的 动态数据 对话框的 域 框中选择 MsgID 字段作为参数的值 然后单击 确定 按钮 关闭所有的对话框 3 选中表格中的最后一行 单击 服务器行为 面板上的 按钮 在弹出的菜单中选择 重复区域 命令 将弹出 重复区域 对话框 在该对话框中选择 记录集 为 Recordset1 并选中 所有记录 单选按钮以显示所有记录 单击 确定 按钮 关闭此对话框 2020 4 9 34 4 将鼠标光标移动到最后一行左边的单元格中 将文档窗口切换到 代码 视图 加入相应的代码 5 在 设计 视图中 选中 管理留言 文本字样 右击鼠标 在弹出的快捷菜单中选择 创建链接 命令 在弹出的 选择文件 对话框中的 URL 文本框中输入 Manage Msg asp 后单击 确定 按钮 关闭此对话框 完成选择留言主题的页面设计 2020 4 9 35 五 用户留言页面设计 设计好的用户留言页面的结构 此页面中共有3个表格 第1个表格是用来显示留言主题及主题的详细内容 第二个表格是用来显示用户的留言 数据库中的记录为空 则此表格不会显示 第3个表格是让用户来留言的表格 将需要显示的内容填充在此页面中 具体操作步骤如下 2020 4 9 36 1 在 绑定 面板中单击加号按钮 在弹出的菜单中选择 记录集 查询 命令 将弹出 记录集 对话框 将此对话框中的 名称 文本框中输入 Rs1 在 连接 下拉列表中选择已经建立好的数据库连接connMsg 选择 表格 为数据库表MsgTopic 并选中 全部 单选按钮以显示所有的列 然后将 筛选 设置为 MsgID URL参数 和 MsgID 单击 确定 按钮 关闭此对话框 2020 4 9 37 2 单击 绑定 面板上的加号按钮 在弹出的菜单中选择 记录集 查询 命令 将弹出 记录集 对话框 将此对话框中的 名称 设置为Rs2 在 连接 下拉列表中选择已经建立好的数据库连接connMsg 在 表格 下拉列表中选择数据库表MsgContent 并选中 全部 单选按钮以显示所有的列 将 筛选 设置为 MsgID URL参数 和 MsgID 然后单击此对话框中的 高级 按钮 对话框将转为高级模式 在 记录集 的高级模式下 展开 数据库项 列表框中的 表格 树型结构 选择 MsgContent 下的 Auditing 字段 然后单击 WHERE 按钮 则会在 SQL 列表框中添加有关Auditing的查询条件 将此SQL语句补充完整 整个SQL语句应为 SELECT FROMMsgContentWHEREMsgID MMColParamANDAuditing True单击确定按钮 关闭此对话框 返回 绑定 面板 这样在 绑定 面板中就会出现两个查询记录集 2020 4 9 38 3 展开 绑定 面板中的 记录集 Rs1 将 MsgSubject 字段拖曳到第1个表格中的 主题 文本字样的右边 同样地 将 记录集 Rs1 中的MsgContent字段以及 记录集 Rs2 中的 UserIP UserID MsgDate NoteContent 字段拖曳到文档中的相应位置 4 将光标移到 来自于 文本字样的表格上 右击鼠标 在弹出的快捷菜单中选择 表格 选择表格命令 便可选中第2个表格 单击 服务器行为 面板上的加号按钮 在弹出的菜单中选择 显示区域 如果记录集不为空则显示区域命令 将弹出 如果记录集不为空则显示区域命令 对话框 在此对话框中的 记录集 下拉列表中选择记录集Rs2 单击 确定 按钮 关闭此对话框 此设置表示如果没有用户留言 则不显示此区域 2020 4 9 39 5 再次选中第2个表格 单击 服务器行为 面板上的加号按钮 在弹出的菜单中选择 重复区域 命令 将弹出 重复区域 对话框 在此对话框中的 记录集 下拉列表中选择记录集Rs2 并选择显示所有记录 然后单击 确定 按钮 关闭此对话框 6 将光标移到 Rs2 NoteContent 上 将文档窗口切换到 代码 视图 加入以下代码 7 将光标移在第3个表格中的 清除 按钮的旁边 在 表单 插入栏中单击 隐藏域 按钮 插入一个隐藏区域 并在 属性 面板上将其 名称 设置为Auditing 将其 值 设置为0 2020 4 9 40 8 同样地 再次插入一个隐藏区域 将其 名称 设置为UserIP 将其 值 设置为 REMOTE ADDR 表示获得用户所使用的计算机的IP 9 再插入一个隐藏区域 将其 名称 设置为MsgID 将其值设置为 2020 4 9 41 10 在 服务器行为 面板中单击加号按钮 在弹出的菜单中选择 插入记录 命令 将弹出 插入记录 对话框 在此对话框中将 连接 设置为已经建立好的数据库连接connMsg 将 插入到表格 设置为数据库表MsgContent 将 插入后 转到 设置为Message asp 将 获取值自 设置为PostForm 然后利用 列 与 提交为 下拉列表中的选项 在 表单元素 列表框中将表单元素与数据库中的字段联系起来 最后单击 确定 按钮 关闭此对话框 这样就完成了留言页面的设计 对插入后转到的Message asp还要进行简单的设计 因为需要管理员对留言的内容进行审查以确保留言的信息没有违反法律的言论 所以需要对留言的内容进行审查 Message asp页面设计有返回和关闭链接 代码如下 返回 nbsp 关闭 2020 4 9 42 六 管理员留言管理页面的设计 管理员留言管理页面中需要显示的内容 设计步骤如下 1 在 绑定 面板上单击加号按钮 在弹出的菜单中选择 记录