项目一　了解网站的概念 项目二　创建个人网站“鸿渐工作室” 项目三　制作“鸿渐工作室”的主页 项目四　HTML语言 项目五　制作“家乡特产”网页 项目六　制作“给我留言”网页 项目七　制作“应用技巧”网页 项目八　模板制作及应用.

Presentation on theme: "项目一　了解网站的概念 项目二　创建个人网站“鸿渐工作室” 项目三　制作“鸿渐工作室”的主页 项目四　HTML语言 项目五　制作“家乡特产”网页 项目六　制作“给我留言”网页 项目七　制作“应用技巧”网页 项目八　模板制作及应用."— Presentation transcript:

1

2 项目一　了解网站的概念 项目二　创建个人网站“鸿渐工作室” 项目三　制作“鸿渐工作室”的主页 项目四　HTML语言 项目五　制作“家乡特产”网页 项目六　制作“给我留言”网页 项目七　制作“应用技巧”网页 项目八　模板制作及应用

3 项目描述 浏览者作为网站的用户，可以从网站了解相关信息，但是网站管理员如何通过网页获得浏览者的信息呢？在这个项目当中，将介绍使用表单来获得信息的基本方法，并制作一个用于和用户进行交互的“给我留言”网页，效果如下图所示。

4 项目目标 能够使用“检查表单”对话框对表单中的文本字段、多行文本区域等表单元素进行输入内容正确性验证。 掌握在页面中插入表单及表单元素、并设置它们的属性；

5 项目六　制作“给我留言”网页 任务一　插入表单 任务二　检查表单

6 步骤 1 建立本栏目目录结构 依据第一单元建立的网站目录结构，本单元的“访客信息”栏目内容将建立在“bbs”文件夹中。利用第一单元介绍的创建文件和文件夹的方法，在“bbs”文件夹中新建一个网页文件“bbs.html”。然后把本单元素材文件中的“send.html”文件和“bbsimages”文件夹复制到“bbs”文件夹中。 所在路径 文件/文件夹的名字 说明 D:\mysite\bbs bbs.html “访客信息”页面 send.html 提交后显示的页面 bbsimages 存放“访客信息”栏目中需要的图片 表6-1 “访客信息”栏目的目录结构

7 2 创建表单 步骤 打开“bbs.html”页面，修改页面标题为“访客信息”。
选择“修改”→“页面属性”菜单项，弹出“页面属性”对话框，在“外观（CSS）”选项中设置“大小”为14像素，“左边距”、“上边距”、“下边距”为0像素，此时页面默认字体（宋体）大小为14像素。 设置页面属性

8 2 创建表单 步骤 单击菜单栏中的“窗口”→“插入”菜单项，打开插入菜单栏。
光标放入文档窗口中，然后单击插入栏中的“表单”按钮 ；或选择“插入”→“表单”→“表单”菜单项，在页面中插入一个表单。插入的表单在文档窗口中以红色虚线表示。 表单

9 2 创建表单 步骤 在表单的虚线框中单击，插入一个11行2列的表格，设置表格属性。
插入表格，选中表格，在“属性”面板中设置表格对齐属性为“居中对齐”。设置第1列列宽为72像素，填写第1列中单元格的内容。

10 步骤 2 创建表单

11 步骤 3 设置表单属性 单击表单轮廓线，或从文档窗口左下角的标签选择器中选择“<form#form1>”标签，选中表单。在表单“属性”面板设置动作为“send.html”，其他保持默认值。

12 步骤 4 插入表单元素 切换“插入栏到“表单”类别，工具栏中按钮如图所示。

13 步骤 4 插入表单元素 插入“留言标题”文本字段 ：在“留言标题”右边的单元格内单击，然后在插入栏“表单”类别中单击 “文本字段”按钮 ，弹出如图所示的“输入标签辅助功能属性”对话框。该对话框可以用来为插入的文本字段添加标签，在本操作步骤中，因为前面已经输入文本标签“留言标题”，所以不需要再添加，单击“取消”按钮。

14 步骤 4 插入表单元素 单击选中“留言标题”文本字段（或从文档窗口左下角的标签选择其中选择“input#textfield”标签），在“属性”面板中设置文本字段名称为“title”，“初始值”文本框中输入“请在这里输入留言标题！”。

15 步骤 4 插入表单元素 插入“留言人姓名”文本字段：在表格第2行“留言人姓名”右边的单元各中插入一个本字段。单击选中该文本字段，为该文本字段设置属性，输入名称“username”，最多字符数为10，类型为“单行”，如图所示。

16 步骤 4 插入表单元素 插入单选按钮：将光标移入表格第3行“性别”右边的单元格中，然后单击插入栏“表单”类别中“单选按钮”按钮，在弹出的“输入标签辅助功能属性”对话框中，设置标签文字为“帅哥”，如图所示，单击“确定”按钮。

17 4 插入表单元素 步骤 用同样的方法插入另外两个单选按钮“美女”和“保密”，分别将标签文字设置为“美女”和“保密”。
在“属性”面板中，分别设置三个单选按钮的属性，这三个单选按钮为一个按钮组，本组单选按钮示为“帅哥”单选按钮名称均设置为“radiobutton1”，“帅哥”单选按钮的初始状态为“已勾选”，其他两个为“未选中”，选定值依次为“rb11”、“rb12”、“rb13”。如图所示的属性设置。

18 步骤 4 插入表单元素 插入“选择(列表/菜单)”：把光标放入“年龄”右侧的单元格，然后单击插入栏“表单”类别中的“选择(列表/菜单)”按钮 ，在弹出的“输入标签辅助功能属性”对话框中单击“取消”按钮。 单击刚插入的“选择(列表/菜单)”，然后在“属性”面板中，单击 按钮，在弹出的“列表值”对话框中单击加号按钮 ，表示在列表框中添加一个项目，在“项目标签”栏和“值”栏中输入相关文字，结果如图所示。设置完毕后单击“确定”按钮，回到“属性”面板，从“初始化时选定”列表框中选择“15”选项。

19 步骤 骤 4 插入表单元素 插入“单选按钮组”：将光标移入表格第4行“选择头像”右边的单元格，然后在插入栏“表单”类别中单击“单选按钮组”按钮 ，弹出“单选按钮组”对话框。不同的单选按钮采用不同的值，8个单选按钮分别设置值为“an1”、“an2”、“an3”、“an4”、“an5”、“an6”、“an7”、“an8”，如图所示。

20 步骤 4 插入表单元素 用鼠标拖拽调整本组各单选按钮的位置，删除每个单选按钮右边的标签，插入“bbsimages”文件夹中相应的图片，如图所示。

21 步骤 4 插入表单元素 插入“自定义头像”文件域：在“自定义头像”右边的单元格中单击，然后在插入栏“表单”类别中单击“文件域”按钮 ，弹出“输入标签辅助功能属性”对话框，单击“取消”按钮。插入文件域后，页面及文件域属性如图所示。

22 步骤 4 插入表单元素 插入“电子邮件” 文本字段：在“电 子邮件”右边的单 元格中单击，插入 “电子邮件”文本 字段，在属性面板 中命名文本域名称 为“ ”。 插入“个人网站” 文本字段:在“个人 网站”右边的单元 格中单击，插入 “个、人网站”文 本字段，在属性面 板中命名文本域名 称为“WebSite”。 插入复选框：在 “个人爱好”右边 单元格中单击，然 后单击插入栏“表 单”类别中的“复 选框”按钮 ，弹 出“输入标签辅助 功能属性”对话框， 在“标签”文本框 中输入“看书” 。

23 步骤 4 插入表单元素 单击“确定”按钮，在页面中创建一个“看书”复选框。单击选中复选框，在属性面板中，设置复选框的属性，如图所示。

24 步骤 4 插入表单元素 按照同样的方法再添加6个复选框，并依次输入“看书”、“体育”、“购物”、“上网”、“电影”和“其他”等不同的标签文字，把各复选框的“选定值”设为不同的值，如图所示。 插入文本域：在“留言内容”右侧的单元格中单击，然后单击插入栏“表单”类别中的“文本区域”按钮 ，弹出“输入标签辅助功能属性”对话框，单击“取消”按钮，一个“文本区域”插入到了页面。单击选中插入的文本区域，设置文本区域属性，如图所示。

25 步骤 4 插入表单元素 插入按钮：在第11行第2列单元格中插入两个按钮：一个是“提交”按钮，一个是“重置”按钮。选中第二个按钮，在属性面板中，“动作”设置为“重设表单”，“值”自动变成“重置”。

26 相关知识 当页面处于“设计”视图时，表单用红色虚线框表示，如果没有看见红色虚线框，可以勾选菜单栏“查看”→“可视化助理”→“不可见元素”选项。 1 2 表单属性面板参数介绍“表单ID”属性：标识表单的唯一名称，该名称可以在脚本语言中引用，不设置时，系统自动为表单按格式form+N命名。

27 相关知识 “方法” 属性：选择表单中数据向服务器发送的方法，包括“POST”和“GET”选项。“POST”方法将发送的数据嵌入在HTTP请求中，可以发送大量的数据；而“GET”方法将发送的数据附加到页面的URL地址中，只能够发送少量的数据。默认为“GET”方法。 “编码类型”属性：选择向服务器提交的数据所采用的编码处理方法，如果要通过“文件域”上传文件，需要选择“multipart/form-data”类型。 “动作”属性：设置后台处理文件，该文件用于处理表单内提交的信息，一般常见的是ASP或PHP文件。

28 3 相关知识 “插入”栏“表单”类别各按钮功能简介 “表单”按钮 “文本字段”按钮 “隐藏域”按钮 “文本区域”按钮 向页面插入一个隐藏
域，可以存储并提交 非用户输入的信息， 该信息对用户而言是 隐藏的。 向页面插入表单，网页中所有表单元素都必须插入在表单内，才能够使表单页面提交的所有数据被后台处理程序全部接收。表单在浏览器中是不可见的。 向页面插入文本字段， 文本字段可以接受文 本、字母或数字等内 容，输入的内容可以 显示为单行、多行或 密码形式。 包含多行文本的输入 元素，类似文本字段， 默认显示有滚动条。 “表单”按钮 “文本字段”按钮 “隐藏域”按钮 “文本区域”按钮

29 3 相关知识 “插入”栏“表单”类别各按钮功能简介 “复选框”按钮：复选框允许用户从一组选项中选择多个选项。
“单选按钮”按钮：单选按钮代表互相排斥的选择。多个单选按钮在同一页面中成组使用时，这些单选按钮必须使用相同的名称，以确保只能选中其中的一个。 “单选按钮组”：弹出“单选按钮组”对话框，用于创建一组单选按钮。 “选择（列表/菜单）：”在表单中插入一个列表或菜单，列表和菜单可以同时显示多项内容。用户可以从列表中选择多项内容，但只能从菜单中选择一项。 “跳转菜单”：插入用于跳转的列表或菜单。通过其中选项，实现将页面跳转到指定的 URL。

30 3 相关知识 “插入”栏“表单”类别各按钮功能简介 “图像域”：使用图像作为“提交”按钮。
“文件域”：在表单中插入文本框和“浏览”按钮。用户可以手动输入要上传的文件（如字处理文档或图形文件）的路径，也可以使用“浏览”按钮定位并选择文件。文件域要求使用“POST”方法将文件从浏览器传输到服务器。 “按钮”：在表单中插入“提交”按钮、“重置”按钮或普通按钮。 “标签”：在表单中插入标签。 “字段集”：在表单中插入字段集。

31 相关知识 4 文本字段“属性”面板参数介绍 文本域 字符宽度 最多字符数 类型 初始值 禁用 只读

32 5 相关知识 单选按钮“属性”面板参数介绍 单选按钮 选定值 初始状态 类 单选按 钮组 “名称”文本框 “+”和”-” ▲和▼ “标签”
1 2 3 4 单选按 钮组 “名称”文本框 “+”和”-” 5 6 7 ▲和▼ “标签” “布局，使用”选项组 “换行符”选项 8 9 10 11

33 6 相关知识 文件域“属性”面板参数介绍 “字符宽度”文本框 设定该域可显示的字符数。 “文件域名称”文本框 命名文件域。 “类”下拉列表
“最多字符数” 用于设置文件域内输入 文本的样式。 设定该域最多可 容纳的字符数。

34 相关知识 7 与单选按钮“选定值”一样，复选框的“选定值”用于设置被选中时的取值，同一组的每个复选框必须赋予不同的“选定值”。当用户提交表单时，把该值传递给后台处理程序。在传递表单时，传递的不是“看书”等字样，而是“选定值”中的值。 Dreamweaver CS5会把同一组的每个“复选框名称”自动设置为不同。

35 8 相关知识 标准表单按钮通常分为“提交”、“重置”或“普通”，作用分别如下。
单击该按钮时提交表单，把包含该按钮的表单内容发送到表单参数“action”指定的地址。 “提交”按钮 单击该按钮时，表单恢复刚载入时的状态，可重新填写表单。 “重置”按钮 “普通”按钮 单击该按钮时，根 据处理脚本激活一 种操作。该按钮没 有内在行为，但可 用“JavaScript”等脚本语言指定动作。

36 项目六　制作“给我留言”网页 任务一　插入表单 任务二　检查表单

37 相关知识 1 验证文本内容为“必需的” 本步骤设置“bbs。html”页面中“留言人姓名”文本字段的验证规则为“必须的”，即该文本域内必须输入内容。 运行DreamWeaver CS6，打开“bbs.html”页面，选择菜单栏“窗口”菜单下的“行为”选项，在面板组添加“行为”面板。单击“bbs.html”页面中的“提交”按钮，然后在“行为”面板上单击“添加行为”按钮 ，在弹出的下拉菜单中选择“检查表单”选项，打开“检查表单”对话框，如图所示。

38 相关知识 1 验证文本内容为“必需的” 由于“bbs.html”页面表单“form1”中“留言人姓名”文本域的名称为“username”，所以在“检查表单”对话框的域列表框中，选择选项 “input（username）”,然后选中“值”为“必需的”复选框，表示“留言人姓名”文本字段中必须输入内容，设置完成后单击“确定”按钮，保存文件。 此时右侧行为面板中，“检查表单”行为的默认事件为“onClick”，如图所示，也就是说单击“提交”按钮事件会触发“检查表单”行为。

39 相关知识 1 验证文本内容为“必需的” 按下F12键，预览“bbs.html”页面。完成表单中各选项的数据输入，把“留言人姓名”文本框中的内容全部删除，单击“提交”按钮，会弹出提示框，如图所示，提示输入的信息有误，要求“留言人姓名”文本框中必须输入数据而不能为空。 单击“确定”按钮，用户只需在“留言人姓名”文本框中输入数据，然后再单击“提交”按钮即可正确完成提交。

40 2 验证文本内容必须符合“电子邮件地址” 相关知识
在步骤二中已经建立了单击“提交”按钮后的 “检查表单”行为，在行为面板中双击 按钮，打开“检查表单”对话框，由于“电子邮件”文本域的名称为“ ”，所以“检查表单”对话框的“域”列表框中，选择“input（ ）”，在单选按钮组中选择 “电子邮件地址”单选按钮，如图所示。此时这个“检查表单”行为有两个功能，一是检查“留言人姓名”文本框内必须输入内容。而是检查“电子邮件”文本框输入内容符合电子邮件地址格式。设置完成后单击“确定”按钮，保存文件。

41 2 验证文本内容必须符合“电子邮件地址” 相关知识
按下F12键，预览“bbs.html”页面，除“电子邮件”文本框中输入错误的邮件地址（如“123”）外，正确地输入其他表单内容，然后单击“提交”按钮，这时会弹出提示框，提示输入的电子邮件信息有误。

42 相关知识 1 “检查表单”对话框中各选项功能 1 2 3 “命名的栏位”列表框:列出的是表单中所有的文本域。 检查表单即是对表单中的文本域进行检查，包括单行文本域、密码域和多行文本域等。 “值”选项:选中“必需的”，代表此文本域在提交时必须填写内容。 “可接收”选项组:指定表单元素所能接受的值，该项有如下4个单选按钮。

43 4 5 6 7 1 “检查表单”对话框中各选项功能 相关知识 “任何东西”： “数字”单选按钮： “电子邮件地址” 单选按钮： 单选按钮：
如果该域是必需的但不需要包含任何特定类型的数据，则单击“任何东西”按钮。如果没有选中“必需的”复选框，则“任何东西”选项就没有意义了，相当于该域未附加“检查表单”动作。 4 “任何东西”： 5 检查域中输入的内容是否符合电子邮件格式“数字从…到…” “数字”单选按钮： 6 “电子邮件地址” 单选按钮： 检查该域是否只包含数字，即文本域中只能接收数字形式的数据。 7 检查域是否包含指定范围内的数字，即文本域只能接受一定范围内的数字。 单选按钮：

44 项目练习 一、单选题 1.表单域可能不包含（ ）元素。 A）文本域 B)密码域 C)提交交按钮 D)隐藏域 2.如果要在网页中添加表单，应在文档中添加的标记符是（ ） A)<input> B)<form></form> C)<object> </object> D)<applet></applet> 3.下列关于各表单域的描述不正确的一项是。（ ） A)单选按钮一般以两个或者两各以上的形式出现 B)复选框在表单中一般都不是单独出现的，都是多个复选框同时使用 C）图片域可以用来代替按钮的作用 D）我们可以在菜单域中选择多项信息

45 项目练习 一、单选题 4.表单主要用来（ ）。 A）显示图象 B）设置超链接 C）收集信息 D）浏览网页信息 5.在Dreamweaver中，可利用表单与浏览者进行交流，在设计中要区分性别，通常采用（ ）。 A）复选框 B）单选按钮 C）文本框 D）提交按钮 6.以下（ ）不是表单的功能。 A）可收集站点访问者信息 B）可访问任何服务信息 C）可提交用户信息 D）可实现网页与浏览者间的交互

46 项目练习 一、单选题 7.在Dreamweaver中设计表单时，如果想让用户浏览网页时，输入自己的照片，应使用（ ）表单元素来设置"您的照片"项。 A）单选钮 B）文件域 C）图像域 D）多行文本域 8.点击（ ），表单中的数据会被传送至表单处理程序。 A)单选按钮 B)下拉按钮 C)重置按钮 D)提交按钮

47 项目练习 二、简答题 1.表单的作用是什么？ 2.总结“检查表单”行为可以检查的表单元素有哪些。 3.在运行“检查表单”时，必须先单击“提交”按钮吗？

48