《dreamweaver第六单元》由会员分享，可在线阅读，更多相关《dreamweaver第六单元（63页珍藏版）》请在金锄头文库上搜索。
1、Dreamweaver网页制作 第六单元 制作“访客信息”网页 主 编：王树平 副主编：杜大志 王润泉 目录上一页下一页退出 任务描述：前面学习了网页制作的相关知识，已经知道， 浏览者作为网站的用户，可以从网站了解相关信息，但是网站 管理员如何通过网页获得浏览者的信息呢？在这个单元当中， 将介绍使用表单来获得信息的基本方法，制作一个用于和用户 进行交互的“访客信息”网页，效果如下图所示。 第六单元 制作“访客信息”网页 目录上一页下一页退出 第六单元 制作“访客信息”网页 任务一 插入表单 任务二 检查表单 任务三 使用代码制作表单网页 目录上一页下一页退出 第六单元 制作“访客信息”网页 任
2、务一 插入表单 任务描述：在页面中插入表单及表单元素制作“访客信息”页 面。 任务分析：表单是网站与用户之间沟通的桥梁，其应用非 常广泛，如制作访客信息、论坛、留言板、用户注册和在线交 易等类型的网页。有了表单，网站不仅是信息提供者，同时也 是信息获取者。因此，应用表单可以与Web站点的访问者进行 交互。本任务通过向网页插入一个表单，然后使用表格对“访客 信息”的各个表单元素进行布局，制作一个“访客信息”页面，学 习表单页面制作的基本方法。 目录上一页下一页退出 任务一 插入表单 自己动手： 1建立本栏目目录结构 。 所在路径文件/文件夹的名字说明 D:mysitebbs bbs.html “
3、访客信息”页面 sed.html 提交后显示的页面 bbsimages 存放“访客信息”栏目 中需要的图片 本栏目目录结构如下表所示： 目录上一页下一页退出 任务一 插入表单 2创建表单。 打开“bbs.html”页面，修改页面标题并设置“页面属性 ”。将“插入”栏切换到“表单”类别。 “表单”类别包含用于创建表单和插入表单元 素的按钮，当鼠标指针指向一个按钮时，会 出现相应的提示信息。 目录上一页下一页退出 任务一 插入表单 表单 插入的表单在文档窗口中以红色虚线表示。 如果没有看到红色虚线框,如 何让其显示呢? 目录上一页下一页退出 任务一 插入表单 在表单的虚线框中单击，插入一个11行列
4、的表格，设置 表格属性,在第一列单元格中填写内容，此时页面如下图所示 : 目录上一页下一页退出 3设置表单属性 选中表单后，在表单“属性”面板设置动作为sed.html，其 他保持默认值。 任务一 插入表单 “表单”属性面板选项介绍 选择表单的方法：单击表单轮廓线，或从文档窗口左下角 的标签选择器中选择“”标签 。 目录上一页下一页退出 任务一 插入表单 4插入表单元素 切换“插入”栏到“表单”类别，工具栏中按钮如下图所示： 表 单 文 本 字 段 隐 藏 域 文 本 区 域 复 选 框 单 选 按 钮 单 选 按 钮 组 列 表 / 菜 单 跳 转 菜 单 图 像 域 文 件 域 按 钮 标
5、 签 字 段 集 各按钮功能简介 目录上一页下一页退出 任务一 插入表单 A. 插入“留言标题”文本字段 。 选中“留言标题”文本字段，在“属性”面板中设置文本字段名 称为“title”，“初始值”文本框中输入“请在这里输入留言标题！”。 B. 插入“留言人姓名”文本字段 ” 。 文本字段名称 文本字段“属性”面板参数介绍 目录上一页下一页退出 C. 插入单选按钮 。在“属性”面板中，分别设置三个单选按钮 的属性 。下图所示为“帅哥”单选按钮属性设置。 D. 插入“列表/菜单” 。 任务一 插入表单 单选按钮“属性”面板参数介绍 目录上一页下一页退出 E. 插入 “单选按钮组” 。 任务一 插
6、入表单 “单选按钮组”对话框选项介绍 目录上一页下一页退出 F. 插入 “自定义头像”文件域 。 插入文件域后，页面及文件域属性如下图所示。 文件域“属性”面板参数介绍 任务一 插入表单 目录上一页下一页退出 G. 插入 “电子邮件”文本字段 。 H. 插入“个人网站”文本字段 。 I. 插入复选框 。 单击“插入”栏“表单 ”类别中的“复选框” 按钮，弹出“输入 标签辅助功能属性 ”对话框，在“标签 文字”文本框中输 入“看书”。 任务一 插入表单 目录上一页下一页退出 在“属性”面板中，设置复选框的属性，如下图所示 。 按照同样的方法再添加5个复选框，并依次输入“体育”、 “购物”、“上网
7、”、“电影”和“其他”等不同的标签文字，把各复 选框的“选定值”设为不同的值，生成一组名称均为“checkbox1” 复选框，如下图所示。 设置复选框的“选定值”时要注意什么？ 任务一 插入表单 目录上一页下一页退出 任务一 插入表单 J. 插入文本域并设置属性 。 K. 插入按钮 。 标准表单按钮的种类和作用分别是什么？ 目录上一页下一页退出 任务总结： 任务一 插入表单 1插入表单及表单属性的设置。 2插入表单元素及表单元素属性的设置。 3表单的作用。 4通常“访客信息”只是网页中的一小部分，表单一般都 是插入到布局表格的一个单元格内，而不是将整个页面的布局 表格都插入到表单中。 一个表单
8、页面制作完成后，还需要后台处理程序的协助才 能完成信息的互动任务。表单有两个重要组成部分，一是描述 表单的HTML源代码，二是用于处理用户在表单域中输入信息 的服务器端应用程序，如“ASP”、“CGI”等。本单元仅介绍前一 部分，即如何利用表单及相关标记生成用户界面。 目录上一页下一页退出 举一反三： 任务一 插入表单 1分析如图所示的“会员资料登记”页面中有哪些表单元素 。 A.启发思路： 常用的表单元素有：文本框、密码框、单选按钮、复 选框、按钮等。 B.分组完成任务。 目录上一页下一页退出 2 将本单元“举一反三”文件夹中的网页“practice6-1.html” 拷贝到D盘根目录，将表
9、单中的“单选按钮组”修改为“列表/菜单” 元素，“列表/菜单”元素修改为“单选按钮组”，并使其具有相同 的功能。 A.启发思路： 多个单选按钮在同一页面中成组使用时，这些单选按 钮必须使用相同的名称，以确保只能选中其中的一个。用 户可以从列表中选择多项内容，但只能从菜单中选择一项 。 B.分组完成任务。 任务一 插入表单 目录上一页下一页退出 作业： 1利用本单元所学的知识，制作个人网站的“个人简介”网 页“practice6-2.html”，效果如下图所示。 要点提示：首先插入表单，然后在表单中插入8行2列的表 格，并设置表格属性，之后插入表单元素。 任务一 插入表单 目录上一页下一页退出
10、任务二 检查表单 任务描述：检验“访客信息”栏目中表单输入数据的正确性 。 任务分析：用户在表单中输入内容时，可能会输入各种各 样的数据，其中有些可能是无效的，为了避免这些无效的数据 提交到后台服务器，可以使用“检查表单”验证用户输入的正确 性。本任务将对“访客信息”表单中的“留言人姓名”和“电子邮件” 中输入的内容进行验证。首先验证一个“文本域”的内容是“必须 的”，然后验证一个“文本域”的内容必须符合电子邮件地址。通 过设置文本域的验证规则，来验证用户输入的内容是否有效， 如果用户输入的内容不符合规则，则给出错误提示。 第六单元 制作“访客信息”网页 目录上一页下一页退出 自己动手： 1验
11、证文本内容为“必需的” 。 运行Dreamweaver 8，打开“bbs.html”页面，选择菜单栏“ 窗口”菜单下的“行为”选项，在面板组添加“行为”面板。单击 “bbs.html”页面中的“提交”按钮，然后在“行为”面板上单击“添加 行为”按钮，在弹出的下拉菜单中选择“检查表单”选项，打开“检 查表单”对话框，如下图所示。 选中 此复 选框 任务二 检查表单 各属性选项有 什么作用？ 目录上一页下一页退出 按下F12键，预览“bbs.html”页面。完成表单中各选项的数 据输入，把“留言人姓名”文本框中的内容全部删除，单击“提交” 按钮，会弹出如下图所示提示框，提示输入的信息有误，要求“
12、留言人姓名”文本框中必须输入数据而不能为空。 任务二 检查表单 目录上一页下一页退出 2验证文本内容必须符合“电子邮件地址” 打开“检查表单”对话框。由于“电子邮件”文本域的名称为 “Email”，所以在“检查表单”对话框的“命名的栏位”列表框中， 选择文本“Email”在表单“form1”，然后选中“可接受”中的“电子邮 件地址”单选按钮，如下图所示，设置完成后单击“确定”按钮， 保存文件。 选中 电子 邮件 地址 任务二 检查表单 目录上一页下一页退出 任务小结 1. 了解检查表单的作用。 2. 验证文本内容为“必需的”。 3. 验证文本内容必需符合“电子邮件地址”。 任务二 检查表单 目
13、录上一页下一页退出 举一反三 利用本单元所学的知识，制作个人网站的“用户登录”网页 “practice6-3.html”，效果如下图所示。设置验证规则，要求用 户必须输入用户名和密码，并且其中密码必须是数字格式，若 不符合要求，则显示错误提示信息。 任务二 检查表单 目录上一页下一页退出 作业： 1总结“检查表单”行为可以检查的表单元素有哪些。 2在运行“检查表单”时，必须先单击“提交”按钮吗？ 任务二 检查表单 1启发思路： 使用“检查表单”对话框完成 2分组完成任务。 目录上一页下一页退出 任务三 使用代码制作表单网页 任务描述：用代码设计表单页面。 任务分析：当用户浏览此表单页面时，可以
14、向网页中输入 数据，单击其中的“提交”按钮，可以把输入的数据发送到后台 服务器。本任务要求在Dreamweaver 8的“代码”视图中使用 HTML语言设计表单页面，添加“文本字段”、“单选按钮”、“复选 框”等表单元素。 第六单元 制作“访客信息”网页 目录上一页下一页退出 自己动手： 1使用标签制作一个表单 。 在D盘新建一个名为“BD”的文件夹，将光盘中本单元素材 “HTML”文件夹中的“send.html”文件拷贝到新建的文件夹中。 然后运行Dreamweaver 8，在“BD”文件夹中新建一个网页 文件，命名为“email.html”。切换到“代码”视图，在页面 和之间插入表单“fo
15、rm1”的源代码如下。 任务三 使用代码制作表单网页 !-其中的send.html文件在素材文件夹中- 表单标签格式 目录上一页下一页退出 2添加文本字段和单选按钮 在表单“form1”中添加文本字段和单选按钮后预览效果如 下： 任务三 使用代码制作表单网页 目录上一页下一页退出 在上文代码的和之间添加如下代码。 to:学海无涯 from: 性别： 男 男 女 文本字段语句格式 单选按钮的语句格式 任务三 使用代码制作表单网页 目录上一页下一页退出 3添加下拉式菜单 在表单“form1”中添加下拉菜单后预览效果如下图所示。 任务三 使用代码制作表单网页 目录上一页下一页退出 在上一步所添加代码的后边添加下面代码： 学历:
