第6章Dreamweave中表格和表单的 应用
•按钮
• 1、普通按钮 • 当type=“button”时，表示该输入项输入的是 普通按钮。 • value属性：用来设定显示在按钮上的文字。 • 2、提交按钮 • 当type=“submit”时，表示该输入项输入的是 提交按钮。 • 单击提交按钮后，浏览器可以将表单的输入信息 传递给服务器。
•应用范围： • 由于它的最大优点就是节省版面，所以，像制作友 情链接，站点导航等页面对象时，使用跳转菜单是很 好的选择。
第6章Dreamweave中表格和表单的 应用
3rew
演讲完毕，谢谢听讲!
再见，see you again
2020/11/26
第6章Dreamweave中表格和表单的 应用
第6章Dreamweave中表格和表单的 应用
•选择表格
•表格的选取是编辑表格的前提，要在表格中进行任 何操作都离不开选取表格。 整个表格的选择 整行或整列的选择 单个单元格的选择 一行或矩形单元格的选择 单击一个单元格,然后按住shift键单击另一个 单元格.这两个单元格定义的直线和矩形区域中的所 有单元格都将被选择。 在按住ctrl键的同时单击要选择的单元格、行 或列，可选择不相邻的单元格。
第6章Dreamweave中表格和表单的 应用
•图 表格属性
第6章Dreamweave中表格和表单的 应用
• 拆分与合并单元格 • 修改---表格---合并拆分单元格
• 插入或删除行或列 • 修改---表格---删除行或列
• 格式化表格 • 命令---格式化表格 如下图所示
•
第6章Dreamweave中表格和表单的 应用
• 在“插入栏”的“常用”选项卡中单击
“表格”按钮；
•
按【Ctrl+Alt+T】键。
第6章Dreamweave中表格和表单的 应用
•图 表格
•在“表格”对话框中可对各项参数进行设置。
第6章Dreamweave中表格和表单的 应用
•在表格中添加内容
• 将表格插入到文档后即可向表格中添加文本或图 像等内容。向表格中添加内容的方法很简单，只需 将光标定位到要输入内容的单元格，再输入文本即 可。
• 单选框和复选框
• 1、单选框：单选按钮作为一个组使用，提供彼 此排斥的选项值。用户在单选按钮组内只能选择一 个选项。 • 当type=“radio”时,表示该输入项是一个单选 项,用户只能选择单选项中的一项作为输入信息。 • checked属性，用来表示此项被默认选中。 • value属性，用来设定选中项目后传送到服务器 端的。
•图 格式化表格
第6章Dreamweave中表格和表单的 应用
表单
表单是用于实现浏览者与网页制作者之间信息 交互的一种网页对象，在 Internet 中表单被广泛 应用于各种信息的搜集与反馈。
第6章Dreamweave中表格和表单的 应用
通常表单的工作过程如下:
(1）访问者在浏览有表单的页面时，可填写必 要的信息，然后单击“提交”按钮。
第6章Dreamweave中表格和表单的 应用
• 2、复选框：复选框主要用来选择选项不唯一的 一些信息。 • 当type=“checkbox”时,表示该输入项是一个 复选框，用户可以同时选中表单中的一个或多个复 选项作为输入信息。 • checked属性，用来表示此项被默认选中 • value属性，用来设定选中项目后传送到服务器 端的值。
第6章Dreamweave中表格和表单的 应用
设置表格属性
为了使表格更具特色，需要在“表格”属性面板 中对表格线的颜色、表格或单元格的背景、边框等 进行设置。“表格”属性面板中显示了所插入的表 格的所有特性，通过修改面板中的参数可快速地编 辑表格外观。如果窗口中没有显示属性面板，可选 择[窗口][属性]菜单命令打开。如下图所示。
•
selected=“selected”>选项值
• </option>
•
<option value=“value” >选项值
• </option>
• ……
• </select>
第6章Dreamweave中表格和表单的 应用
• size属性：用来设定显示的选项数目，默认值为 1。
• multiple属性：用来设定列表中的项目多选。 • 当<select>标签里面有size属性和multiple属性 时，表示是列表；没有size属性和multiple属性， 则表示下拉菜单。当然，在列表中，二者不一定同 时使用。
第6章Dreamweave中表 格和表单的应用
2020/11/26
第6章Dreamweave中表格和表单的 应用
•表格
• 在网页设计中，页面布局是一个重要的部分。 Dreamweaver 8.0提供了多种方法来创建和控制网 页布局，最普通的方法就是使用表格，使用表格可 以简化页面布局设计过程、导入表格化数据、设计 页面分栏及定位页面上的文本和图像等。
应用
•输入标记
• <input>标签是表单中的输入标记，它是个单
标签。
• <input name=“file_name”
•
type=“type_name” />
选中插入的单行文本域，设置文本域相关属性，
如下图所示。
•
第6章Dreamweave中表格和表单的 应用
•1、单行文本框
• type=text，表示该输入项输入的是字符串，输 入的内容以单行显示。 • type=text，<input>标签除了有name和type 属性外,还有3个可选的属性:value、size、 maxlength。 • value属性：用来设定文本框中的初始值 • size属性：用来设定文本框的长度 • maxlength属性：用来设定该文本框允许用户 输入的最大字符数。
第6章Dreamweave中表格和表单的 应用
• 3、重置按钮 • 当type=“reset”时，表示该输入项输入的是 重置按钮。 • 单击重置按钮后，浏览器可以清除表单的输入信 息而恢复到默认的表单内容设定。 • 一般情况提交和重置按钮应该同时出现。
•
第6章Dreamweave中表格和表单的 应用
rows=“value”
•
cols=“value” value=“value”>
• </textarea>
第6章Dreamweave中表格和表单的 应用
• cols属性：用来设定多行文本框一次能显示的 列数。 • rows属性：用来设定多行文本框一次能显示的 行数。
第6章Dreamweave中表格和表单的 应用
•文件输入框
• 当type=“file”时，表示该输入项是一个文件 输入框，用户可以在文件输入框的内部填写自己硬 盘中的文件路径，然后通过表单上传。 • 语法： • <input type=file name=“file_name”/>
第6章Dreamweave中表格和表单的 应用
•跳转菜单
• 在网页中,用户可利用跳转菜单行为和列表菜单来 设计弹出式列表。每一个项目都指示一个超链接目标。 当浏览者选择菜单的项目时，如同单击了网页中的超 级链接一样，跳转到选项目所示的目标网页。
第6章Dreamweave中表格和表单的 应用
•菜单和列表
• 在表单中，通过<select>和<option>标签就可
以在浏览器中出现一个下拉式的菜单或带有滚动条的
列表菜单。
• 语法：
• <select name=“name” size=“value”
•
multiple=“multiple”>
•
<option value=“value”
•
第6章Dreamweave中表格和表单的
应用
•2、密码框：
• 当type=“password”时，其使用方法与
text很相似。
• password 所输入的字符全以t;textarea>标签用来制作多行文本框，成对标
签。
• 语法：
• <textarea name=“name”
•返回 目录 第6章Dreamweave中表格和表单的
应用
• 插入表格
•
在Dreamweaver 8.0“文档”窗口的
“设计”视图中，将插入点置于需要插入表
格的位置。如果文档是空白的，则只能将插
入点放置在文档的开头。
•
执行下列操作之一打开“表格”对话框，
如下图所示。
•
选择[插入][表格]菜单命令；
(2）提交的信息通过Internet传送到服务器上。
(3）服务器上有专门的程序对这些数据进行处 理，如果有错误会返回错误信息，并要求纠正错误。
(4）当数据完整无误后，服务器反馈一个输入 完成信息。
第6章Dreamweave中表格和表单的 应用
•图 “表单”面 板
•返回 目录 第6章Dreamweave中表格和表单的