网页制作PPT-ch4.ppt
《网页制作PPT-ch4.ppt》由会员分享,可在线阅读,更多相关《网页制作PPT-ch4.ppt(34页珍藏版)》请在三一文库上搜索。
1、第4章 表单、CSS样式表和命令,4.1 案例10 “校园风貌校园留言簿1”网页 4.2 案例11 “校园风貌校园留言簿2”网页 4.3 案例12 定义CSS样式表,4.1 案例10 “校园风貌校园留言簿1”网页,案例效果 “校园风貌校园留言簿1”是一个留言网页。利用Dreamweaver软件提供的表单功能,实现访问者和网站之间的交流。下面通过详细的步骤来介绍制作这个网页的过程。,4.1 案例10 “校园风貌校园留言簿1”网页,设计过程 1新建“案例9.html”网页 2插入表单 3插入表格 4设置表格 5插入表格 6设置表格 7保存并预览,4.1 案例10 “校园风貌校园留言簿1”网页,相关
2、知识 1表单域和插入表单对象 (1)表单域 在 Dreamweaver 中,执行“插入”“表单”“表单”命令,如图4-31所示,或者通过从下图显示的“插入”(表单)工具栏中单击“表单”按钮,即可在窗口中插入表单域。 红线虚框内的区域即为表单域,所有的表单对象都要插入到该红线框内,这样服务器才能正确地处理用户所填写的信息。 如果执行插入表单域的操作后,在窗口中仍看不见表单域,则可执行“查看”“可视化助理”“不可见元素”命令,因为表单域是不可见元素。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 1表单域和插入表单对象 (2)表单对象 在Dreamweaver 中,表单输入类型称为表单
3、对象。用户可以通过“插入”“表单”菜单命令,从如图4-31所示的级联菜单中选择所需的对象进行插入操作;也可以在如图4-32所示的“插入”栏中的“表单”选项卡中直接单击表单对象按钮来插入表单对象。 “表单”按钮 。单击该按钮,在文档中插入表单。任何其他表单对象,如文本域、按钮等,都必须插入表单之中,这样所有浏览器才能正确处理这些数据。 “文本字段”按钮 。单击该按钮,在表单中插入文本域。文本域可接受任何类型的字母数字项。输入的文本可以显示为单行、多行或者显示为项目符号或星号(用于保护密码)。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 1表单域和插入表单对象 (2)表单对象 “隐藏
4、域”按钮 。单击该按钮,可以在表单域中插入一个可以存储用户数据的域。使用隐藏域可以存储用户输入的信息,如姓名、电子邮件地址或偏爱的查看方式等,以便该用户下次访问站点时可以再次使用这些数据。 “文本区域”按钮 。单击该按钮,可以在表单域中插入文本区域,在其中可以输入多行文字。 “复选框”按钮 。单击该按钮,可以在表单域中插入复选框。复选框允许在一组选项中选择多项,用户可以选择任意多个适用的选项。 “单选按钮”按钮 。单击该按钮,可以在表单域中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮,就会取消选择该组中的所有其他按钮。例如,用户可以选择“是”或“否”。,4.1 案例10 “校
5、园风貌校园留言簿1”网页,相关知识 1表单域和插入表单对象 (2)表单对象 “单选按钮组”按钮 。单击该按钮,可以在表单域中插入共享同一名称的单选按钮的集合。 “列表/菜单”按钮 。单击该按钮,可以在表单域中插入列表/菜单。“列表”选项在滚动列表中显示选项值,并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值,而且只允许用户选择一个选项。 “跳转菜单”按钮 。单击该按钮,可以在表单域中插入可导航的列表或弹出式菜单。跳转菜单允许您插入一种菜单,在这种菜单中的每个选项都链接到文档或文件。请参见创建跳转菜单。 “图像域”按钮 。单击该按钮,可以在表单域中插入图像。可以使用图像域替换
6、“提交”按钮,以生成图形化按钮。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 1表单域和插入表单对象 (2)表单对象 “文件域”按钮 。单击该按钮,可以在表单域中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件,并将这些文件作为表单数据上传。 “按钮”按钮 。单击该按钮,可以在表单域中插入文本按钮。按钮在单击时执行任务,如提交或重置表单。可以为按钮添加自定义名称或标签,或者使用预定义的“提交”或“重置”标签之一。 “标签”按钮 。单击该按钮,可以在表单域中给表单加上标签,以形式开头和结尾。 “字段集”按钮 。单击该按钮,可以在表单域中添加一个字段集的同时在HTM
7、L源代码中添加标签。该标签是表单元素逻辑组的容器标签,在其中可以继续插入单选按钮、复选框、图像以及文件域等对象。,4.1 案例10 “校园风貌校园留言簿1”网页,2设置文本字段的属性 文本字段有文本域和文本区域两种。单击“插入”(表单)工具栏中的 “文本域”按钮或“文本区域”按钮,即可在表单域中添加文本域或文本区域,例如在文档窗口中添加3个文本字段。 文本字段“属性”面板中各个参数的含义。 文本域。指定文本的名称,是表单识别该文本域的唯一标识。该名称中不能包含空格或特殊字符,可以使用字母、数字和下划线的任意组合。 字符宽度。设置域中最多可以显示的字符个数。 最多字符数。设置单行文本域中最多可以
8、输入的字符个数。如果将该文本框处保留空白,用户则可输入任意数量的文本。如果文本超过域的字符宽度,文本将滚动显示。如果输入超过了最大字符数,表单则会发出警告。 类型。指定文本字段为单行、多行还是密码域。 初始值。指定在首次载入表单时域中显示的值。 行数。设置多行文本域的高度。 换行。指定用户输入的信息较多,无法在定义的文本区域内显示时,如何显示用户输入的内容。选择“关闭”或“默认”选项,可防止文本换行到下一行,当用户输入的内容超过文本区域的右边界时,文本将向左侧滚动。选择“虚拟”选项,可在文本区域中设置自动换行,当用户输入的内容超过文本区域的右边界时,文本换行到下一行;当提交数据进行处理时,自动
9、换行并不应用于数据,数据作为一个字符串提交。选择“实体”选项,在文本区域可设置自动换行,当提交数据进行处理时,也对这些数据设置自动换行。 类。可以将CSS规则应用于对象。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 3设置复选框和单选按钮的属性 (1)设置复选框的属性 复选框的“属性”面板中的各个参数的含义如下: 复选框名称。给复选框命名,复选框的名称是表单识别该复选框的唯一标识。 选定值。设置复选框被选中时的取值。当用户提交表单时,该值被传送给服务器端应用程序。 初始状态。设置首次载入表单时复选框是已选中还是未选中。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 3
10、设置复选框和单选按钮的属性 (2)设置单选按钮的属性 下面以图4-1所示的校园留言簿中的“性别”为例介绍单选按钮的设置方法。在窗口中选择一个单选按钮,在“属性”面板的“单选按钮”和“选定值”文本框的默认值为“radiobutton”, 用户可以自行设定参数,然后在“初始状态”组合框中选中“未选中”单选按钮。 单选按钮的“属性”面板中的各个参数的含义如下: 单选按钮名称。给单选按钮命名,该名称是表单识别该单选按钮的唯一标识。 选定值。设置该单选按钮被选中时发给服务器的值。 初始状态。确定在浏览器中载入表单时该单选按钮是否被选中。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 按钮是表
11、单中非常重要的一个表单对象,如果没有按钮的话,就不会把表单中的数据传送出去。按钮属性的设置如下: 按钮名称。给按钮命名,按钮名称是表单识别该按钮的唯一标识。“提交”和“重置”是两个保留名称,“提交”通知表单将表单数据提交给处理应用程序脚本,“重置”将所有的表单域重置为初始值。 值。指定显示在按钮上的文本。在Dreamweaver 8中默认的值为“提交”,用户也可以自行设置文字内容。 动作。指定按钮被单击时发生的动作。共有3个单选按钮提供选择:选中“提交表单”单选按钮,当鼠标单击该按钮时,则将表单数据提交给处理程序或脚本;选中“重设表单”单选按钮,当鼠标单击该按钮时,则将自动地恢复所有表单对象的
12、初值;选中“无”单选按钮,当鼠标单击该按钮时不发生任何动作。,4.1 案例10 “校园风貌校园留言簿1”网页,相关知识 5设置列表/菜单和文件域的属性 (1)设置列表/菜单的属性 列表/菜单的属性设置如下: 列表/菜单。为该菜单指定一个表单能够识别的惟一标识。 类型。指定该菜单是单击时下拉的菜单,还是显示一个列有项目的可滚动列表。如果用户希望表单在浏览器中显示时仅有一个选项可见,则选中“菜单”单选按钮;如果用户希望表单在浏览器中显示时列出部分或全部的选项,或者允许用户选择多个菜单项,则选中“列表”单选按钮。 高度(仅“列表”类型)。设置菜单中显示的项数。 选定范围。指定用户是否可以从列表中选择
13、多个项。 初始化时选定。设置列表中默认的菜单项。单击列表中的一个或多个菜单项即可。,4.2 案例11 “校园风貌校园留言簿2”网页,相关知识 5设置列表/菜单和文件域的属性 文件域的属性设置如下: 文件域名称。指定文件域的名称,该名称是表单识别文件域的惟一标识。 字符宽度。指定该域最多显示的字符数。 最多字符数。指定域中最多可以容纳的字符数。如果用户通过单击“浏览”按钮来确定文件,文件名和路径则可超过指定的“最多字符数”的值。但是如果用户直接在文本框中输入文件名和路径,那么文件域仅允许输入“最多字符数”值所指定的字符数。,4.2 案例11 “校园风貌校园留言簿2”网页,案例效果 “校园风貌校园
14、留言簿2”是以“校园风貌校园留言簿1”为基础,加上Dreamweaver提供的表单的图像域和隐藏域功能制作而成。下面通过详细的步骤来介绍制作这个网页的过程。,4.2 案例11 “校园风貌校园留言簿2”网页,设计过程 1拆分单元格 2插入隐藏域 3插入图像域 4修改“重置留言”按钮 5保存并预览,4.2 案例11 “校园风貌校园留言簿2”网页,相关知识 1设置图像域的属性 图像域的属性设置如下: 图像区域。指定图像域的名称,该名称是表单识别图像域的惟一标识。 源文件。指定图像源文件的路径。 替换。用于输入描述性文本,如果该图像在浏览器中载入失败就将显示这些文本。 对齐。设置对象的对齐属性。 按钮
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 PPT ch4
链接地址:https://www.31doc.com/p-2093942.html