第6章Dreamweave中表格和表单的应用
合集下载
第6章表格在网页中的应用 中文版Dreamweaver CS6网页制作课件
从入门到精通
清华大学出版社
6
Dreamweaver CS6
从入门到精通
6.2 对表格进行编辑
6.2.1 选择整个表格 6.2.2 行或列的选中 6.2.3 单元格的选中 6.2.4 单元格的合并与拆分 Contents 6.2.5 行或列的添加与删除
中文版Dreamweaver CS6网页制作从入门到精通
13
中文版Dreamweaver CS6网页制作从入门到精通
6.2.5 行或列的添加与删除
1
2 3
单行或单列的添加
多行或多列的添加
行或列的删除
从入门到精通
清华大学出版社
14
中文版Dreamweaver CS6网页制作从入门到精通
1．单行或单列的添加
将鼠标光标定位到相应的单元格中，选择【修改】/ 【表格】/【插入行】命令可在当前选择单元格上面添 加一行，选择【修改】/【表格】/【插入列】命令， 可在当前列左侧插入一列。 将鼠标光标定位到相应的单元格中单击鼠标右键，在 弹出的快捷菜单选择【表格】/【插入行】命令或【表 格】/【插入列】命令，可实现单行或单列的插入。 将鼠标光标定位到相应的单元格中，选择【插入】/ 【表格对象】菜单下的“在上面插入行”、“在下面 插入行”、“在左边插入列”和“在右边插入列”命 令，可选中插入行或列的位置。
从入门到精通 清华大学出版社 12
中文版Dreamweaver CS6网页制作从入门到精通
2．单元格的拆分 单元格的拆分是将一个单元格拆分为多个单元 格的操作。拆分单元格的方法同合并单元格相 似，只是在选择拆分命令后，会打开“拆分单 元格”对话框，用户需要在其中进行拆分设置。
从入门到精通
清华大学出版社
Dreamweaver cs5中文版入门与提高实例教程课件第6章表格技术
6.3 操作表格
选择表格元素 调整表格的尺寸、行高和列宽 使用扩展表格模式 增加、删除行和列 复制、粘贴与清除单元格 合并、折分单元格 表格数据排序
注意： 使用扩展表格模式时，一旦选择了表格中的某个对象或放置了插入点， 就应该返回到“设计”视图的“标准”模式下进行编辑。诸如调整大小之类的一些 可视操作在“扩展表格”模式中不会产生预期结果。
第6章 表格技术
本章重点
本章将介绍表格的作用及使用方法，内容包括：有关表格的操作，如插入表格、 格式化表格、拆分与合并单元格、剪切和粘帖单元格、删除行列以及插入行等操作，
学习目的 通过本章的学习，您可以掌握：
在页面插入表格以及对表格进行各种操作的方法。 文本数据与表格数据之间的导入导出的方法。 利用表格技术对页面进行布局的方法。
6.3.7 表格数据的导入与导出
1．导入表格式数据
2．导出表格数据
注意：如果不指定文件所使用的分
隔符，文件将不能正确导入，则数据也 不能在表格中正确格式化。
6.5 利用表格布局页面
6.3.2 设置表格和单元格属性
如果要设置单元格的属性，则选中单元格，执行“窗口”/“属性”命令展开单 元格属性面板进行修改。
用户不能直接在属性面板上设置表格或单元格的背景图像。如果希望将图像设 置为表格或单元格的背景，就要用到表格属性的CSS设置面板。
注意：使用属性检查器更改表格和其元素的属性时，需要注意表格格式设置 的优先顺序：单元格格式设置优先于行格式设置，行格式设置又优先于表格格式 设置。例如，如果将单个单元格的背景颜色设置为蓝色，然后将整个表格的背景 颜色设置为黄色，则蓝色单元格不会变为黄色，因为单元格格式设置优先于表格 格式设置。
dreamweaver cs6网页设计资料 项目八 使用表单
本项目中，通过2个工作任务向大 家介绍如何制作表单。很多人都有 过填写表单的经历，利用表单可以 帮助Internet服务器从用户处收集 信息，例如收集用户资料、获取用 户订单，也可以实现搜索接口。在 Internet上也同样存在大量的表单 ，让你输入文字，让你进行选择。 希望通过这些任务的实际操作，能 够使读者掌握这些知识。
（8 )保存网页，按 F12 键进入浏览器。输入“热点新闻”，从列表 框中选择“新闻标题”，单击“搜索”按钮，如图所示。
网页就调用新浪网的搜索引擎进行搜索了。结果如图所示。
重点：创建表和域 难点：创建各种域
（2）根据页面排版的需要，在表单中插入12行2列的表格，如图所 示。
（3）分别在表格中输入文字，并且设置文字的字体、颜色等属性， 并设置单元格背景色，如图所示。
（4）在表格的第1行“用户名”和第4行“姓名”右侧插入单行文本 域，在属性面板设置该域的“字符宽度”为25，“最多字符数”为2擎”网页
这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、 单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用 户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。 操作步骤如下： （1）新建页面，单击插入面板表单分类下的 按钮，在页面中插入表单。
（9）最后插入“日”文本域，设置其“字符宽度”为2，“最大字 符数”为2，如图所示。
（10）分别在表格中第7、8、9行的“证件号码”、“电子邮件”、 “联系电话”后面的单元格中插入单行文本域，根据实际需要，设置其 “字符宽度”和“最大字符数”，如图所示。
（11）单击“插入”面板上“表单”分类中的 按钮，在第10行的 “所在省份”后面的单元格中插入下拉菜单，单击属性面板上的“列表值” 按钮，打开“列表值”对话框，在“项目标签”栏中输入“北京”等各省 市名称，在“值”栏中输入对应的值，如图所示。
（8 )保存网页，按 F12 键进入浏览器。输入“热点新闻”，从列表 框中选择“新闻标题”，单击“搜索”按钮，如图所示。
网页就调用新浪网的搜索引擎进行搜索了。结果如图所示。
重点：创建表和域 难点：创建各种域
（2）根据页面排版的需要，在表单中插入12行2列的表格，如图所 示。
（3）分别在表格中输入文字，并且设置文字的字体、颜色等属性， 并设置单元格背景色，如图所示。
（4）在表格的第1行“用户名”和第4行“姓名”右侧插入单行文本 域，在属性面板设置该域的“字符宽度”为25，“最多字符数”为2擎”网页
这是一个当前网站中较为普遍的新用户注册表单，包含文本域、密码域、 单选按钮、复选框、下拉菜单、按钮、图像域等表单对象。可以完成新用 户注册的用户名、密码、电子邮件、所在省份、兴趣爱好等内容。 操作步骤如下： （1）新建页面，单击插入面板表单分类下的 按钮，在页面中插入表单。
（9）最后插入“日”文本域，设置其“字符宽度”为2，“最大字 符数”为2，如图所示。
（10）分别在表格中第7、8、9行的“证件号码”、“电子邮件”、 “联系电话”后面的单元格中插入单行文本域，根据实际需要，设置其 “字符宽度”和“最大字符数”，如图所示。
（11）单击“插入”面板上“表单”分类中的 按钮，在第10行的 “所在省份”后面的单元格中插入下拉菜单，单击属性面板上的“列表值” 按钮，打开“列表值”对话框，在“项目标签”栏中输入“北京”等各省 市名称，在“值”栏中输入对应的值，如图所示。
网页设计与制作第6章 表单的使用
❖ 一系列的选项。其中每个选项都是超级链接，选中 每一个选项都将打开一个链接。
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
Dreamweaver和excel的一些使用技巧
Dreamweaver和excel的一些使用技巧Dreamweaver和excel的一些使用技巧excel成组填充多张表格的固定单元格成组填充多张表格的固定单元格我们知道每次打开Excel,软件总是默认打开多张工作表。
由此就可看出Excel除了拥有强大的单张表格的处理能力，更适合在多张相互关联的表格中协调工作。
要协调关联，当然首先就需要同步输入。
因此，在很多情况下，都会需要同时在多张表格的相同单元格中输入同样的内容。
那么如何对表格进行成组编辑呢?首先我们单击第一个工作表的标签名"Sheetl”，然后按住Sh辻t键，单击最后一张表格的标签名“Sheet3”（如果我们想关联的表格不在一起，可以按住Ct讥键进行点选）。
此时，我们看到Excel的标题栏上的名称岀现了“工作组”字样，我们就可以进行对工作组的编辑工作了。
在需要一次输入多张表格内容的单元格中随便写点什么，我们发现，“工作组” 中所有表格的同一位置都显示出相应内容了。
但是，仅仅同步输入是远远不够的。
比如，我们需要将多张表格中相同位置的数据统一改变格式该怎么办呢?首先，我们得改变第一张表格的数据格式，再单击“编辑”菜单的“填充”选项，然后在其子菜单中选择“至同组工作表”。
这时，Excel会弹出“填充成组工作表”的对话框，在这里我们选择“格式” 一项，点“确定” 后，同组中所有表格该位置的数据格式都改变了。
Dreamweaver表格的使用Dreamweaver表格的使用1、点击插入/表格，打开表格面板进行设置。
行数、列数、宽度、边框等，“单元格填充”为单元格内侧与内容的距离；“单元格间距”为单元格之间的距离，单位均为像素。
2、插入表格后，在表格的边框上点击一下，可以全选整个表格。
然后在下而的属性面板里可以进行各种设置。
3、把光标移到其中一个单元格，此时看到的属性面板，就是单元格的属性而板。
也可以进行各种关于单元格的操作。
如背景色、背景图、边框、合并、拆分等。
dream表格的用途
dream表格的用途在网页设计和制作中，表格是一种非常常用的布局工具。
Dreamweaver中的表格主要用于对网页元素进行排版和定位，让页面布局更加规整和易于管理。
以下是Dreamweaver表格的主要用途：1. 创建页面布局：通过创建表格，可以将页面分成不同的区域，每个区域可以放置不同的内容，如导航菜单、页眉、页脚等。
这样可以让页面结构更加清晰，也有利于后期维护和修改。
2. 对齐和定位元素：在Dreamweaver中，可以使用表格的单元格对页面中的元素进行定位和调整。
通过调整单元格的大小和位置，可以精确控制元素在页面上的位置，使其对齐到相应的位置。
3. 制作复杂布局：有些网页布局比较复杂，使用简单的HTML 标记很难实现。
这时可以使用Dreamweaver的表格来创建复杂的布局，例如多列的固定宽度、弹性宽度等。
通过灵活地调整表格的大小、合并或拆分单元格，可以实现各种复杂的布局效果。
4. 管理对齐和间距：在使用表格布局时，可以很容易地调整元素的对齐方式和间距。
通过设置表格的对齐方式、单元格间距和边距等属性，可以控制元素之间的空间关系，使其看起来更加整洁美观。
5. 控制样式和外观：除了基本的布局和对齐功能外，还可以使用CSS样式来美化表格。
通过为表格或单元格添加样式，可以改变它们的背景颜色、边框样式、字体等外观属性，使页面更加美观。
总之，Dreamweaver中的表格是一种强大的布局工具，可以帮助网页设计师创建精确、整洁的页面布局。
但需要注意的是，过度使用表格可能会使代码变得复杂和难以维护。
因此，在实际开发中，应该根据具体情况选择合适的布局方法，并尽量使用CSS进行布局和样式设置。
DREAMWEAVERcs6模块8使用表单
模块八---使用表单
本模块导读
表单是网页中能够让浏览者与网页制作者进行交流的元素。在各种网站中，表单扮 演着相当重要的角色，由这些表单配合相关程序，使得网页可以收集、分析用户的反馈 意见，做出科学、合理的决策，是一个网站成功的重要因素。
本模块主要讲解表单及表单对象在网页中的应用及其属性设置，从而能创作出带表 单的静态网页。并且详细介绍了“文本域和隐藏域”、“复选框和单选按钮”、“列表 和菜单”、“表单按钮”等几项常用表单对象的设置与使用。最通过实例来讲解表单对 象的综合运用，加深读者对表单功能的理解。
图8-1 “插入”栏“表单”面板
模块八---使用表单
任务一 创建表单
1. 表单：在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表 单之中，这样所有浏览器才能正确处理这些数据。
2. 文本字段：文本字段可接受任何类型的字母或数字项。输入的文本可以显示为单行、 多行或者显示为项目符号或星号（用于保护密码）。文本框用来输入比较简单的信息。
模块八---使用表单
任务一 创建表单
子任务 2 认识表单对象
表单相当于一个容器，它容纳的是承载数据的表单对象，例如：文本框、复选框等。因 此一个完整的表单包括二部分：表单及表单对象，二者缺一不可。
用户可以通过单击【插入】→【表单】来插入表单对象，或者通过“插入”栏的“表单” 面板来插入表单对象，如图 8-1 所示。
或“重置”标签之一。
13.
标签：可在文档中给表单加上标签，以<label></label>形式开头和结
尾。
14.
字段集：可在文本中设置文本标签。
模块八---使用表单
任务一 创建表单
子任务 3 插入表单
本模块导读
表单是网页中能够让浏览者与网页制作者进行交流的元素。在各种网站中，表单扮 演着相当重要的角色，由这些表单配合相关程序，使得网页可以收集、分析用户的反馈 意见，做出科学、合理的决策，是一个网站成功的重要因素。
本模块主要讲解表单及表单对象在网页中的应用及其属性设置，从而能创作出带表 单的静态网页。并且详细介绍了“文本域和隐藏域”、“复选框和单选按钮”、“列表 和菜单”、“表单按钮”等几项常用表单对象的设置与使用。最通过实例来讲解表单对 象的综合运用，加深读者对表单功能的理解。
图8-1 “插入”栏“表单”面板
模块八---使用表单
任务一 创建表单
1. 表单：在文档中插入表单。任何其他表单对象，如文本域、按钮等，都必须插入表 单之中，这样所有浏览器才能正确处理这些数据。
2. 文本字段：文本字段可接受任何类型的字母或数字项。输入的文本可以显示为单行、 多行或者显示为项目符号或星号（用于保护密码）。文本框用来输入比较简单的信息。
模块八---使用表单
任务一 创建表单
子任务 2 认识表单对象
表单相当于一个容器，它容纳的是承载数据的表单对象，例如：文本框、复选框等。因 此一个完整的表单包括二部分：表单及表单对象，二者缺一不可。
用户可以通过单击【插入】→【表单】来插入表单对象，或者通过“插入”栏的“表单” 面板来插入表单对象，如图 8-1 所示。
或“重置”标签之一。
13.
标签：可在文档中给表单加上标签，以<label></label>形式开头和结
尾。
14.
字段集：可在文本中设置文本标签。
模块八---使用表单
任务一 创建表单
子任务 3 插入表单
《使用Dreamweaver制作网页》之表单的使用
六、教学反思
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
教案设计
《使用Dreamweaver制作网页》之
通过本课学生们的操作过程，反映出一定的问题，在今后的教学中应注重培养学生的观察力，多听多看，不仅要提高专业技能素养，还有不断提升自身的艺术修养，使作品具有一定的观赏性、艺术性及实用性。
（三）能力拓展，完善制作
师：通过之前的分析与操作，小组讨论完成，按钮及文本域部分的制作。
生：单击”插入”栏的”表单”类别中的”按钮”图标。
单击”插入”栏的”表单”类别中的”文本域”图标。
（四）完成作品，相互评价
通过小组合作，最终完成作品，在相互展示作品的同时，不断完善自身能力。
五、总结归纳
总结本节课知识要点，并通过学生作品，归纳不足之处，使学生不断提升自己，增强学生的学习兴趣。
学情分析：通过前几节课的学习，学生已经对表单的功能有了清楚的认识，掌握了表单元素各自的特性，绝大多数学生理论基础扎实，操作能力需通过具体实例制作过程来进一步完善加强。
教学目标：1、通过制作注册页面，能够合理运用表单。
2、根据网页中各部分的功能选择适合的表单元素。
3、通过分析、讨论、操作，培养学生的技能素养；通过小组实验，培养学生的合作意识和探究意识；通过任务驱动的教学模式，使学生在不断解决难题的同时拥有成就感，从而激发学生的学习欲望。
生：先插入表单，再通过表格对表单进行布局。
【自主分析】插入表单的方法：单击”插入”栏的”表单”类别中的”表单”图标。
师：介绍插入文本字段的方法。
【教学展示】单击”插入”栏的”表单”类别中的”文本字段”图标。
师：通过对文本字段的属性设置，请同学们讨论分析如何设置密码部分。
生：单击”插入”栏的”表单”类别中的”文本字段”图标，然后在属性检查器中设置文本域的”类型”为”密码”。
教案设计
《使用Dreamweaver制作网页》之
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第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中表格和表单的
•按钮
• 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中表格和表单的