第5章制作表格、表单.ppt
第5章 制作表格、表单与框架,本章要点创建表格、表单与框架的方法 设置表格以及单元格的属性编辑表单以及处理表单设置框架属性并制作框架网页本章主要介绍了网页页面布局工具表格和框架，以及作为收集信息使用的表单。表格是网页中一种用途非常广泛的工具，它不仅可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素是网页布局排版不可缺少的工具。表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛用于各种信息的搜集和反馈。框架网页是一种网页，当在浏览器中显示时，每个框架都可以显示不同的网页。框架网页本身并不包括可见内容，它只是一个容器，用于指定要在框架中显示的其他网页以及显示方式。5.1 表格表格是网页中一种用途非常广泛的工具，它不仅可以有序地排列数据，还表现在它可以精确地定位文本、图像及其他网页中的元素，这在网页版面布局方面是很重要的，所以表格是网页布局排版不可缺少的工具。作为一个网页设计人员，表格运用得熟练与否直接影响作品外观的好坏，这也是划分专业制作人士与业余爱好者的一种客观标准。5.1.1表格的新建和编辑1.创建新表格 将光标移到要插入表格的位置，然后可以通过下列四种方式中的任意一种，均可以弹出插入表格对话框如图5-1所示：,1）插入面板“常用”类上，单击“插入表格”按钮。2）通过主窗口的菜单“插入表格”命令。3）使用快捷组合键“Ctrl+Alt+T”。4）将插入面板调整到“常用”类上，拖动“插入表格”按钮到主窗口的工作区中。图5-1插入表格对话框,5.1.2操作表格和单元格1.选择表格(1）选择整个表格，方法如下：将光标置于表格中的某个单元格中，选择主菜单“修改表格选择表格”命令。将光标置于表格中的某个单元格中，再按两次组合键“Ctrl+A”。将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中选择“选 择表格”命令。将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标，单击表格的边线。图5-2选择整个表格(2）选择单个单元格，方法有以下几种：将光标置于所要选择的单元格中，按一次组合键“Ctrl+A”。将光标置于所要选择的单元格中，向右拖动鼠标。将光标置于所要选择的单元格中，选择“编辑全选”命令。按住Ctrl键，单击所要选择的单元格，再单击一次则取消对单元格的选择。,图5-3选择单个单元格(3）选择多个单元格，方法有以下几种：按住Ctrl键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如果要选择整行，将光标置于该行的左边缘，当光标变成图标 时单击鼠标左键。如果要选择整列，将光标置于该列的上边缘，当光标变成图标 时单击鼠标左键。图5-4选择多个单元格,(4）选择全部单元格的方法有以下几种：将光标置于第1个单元格中，并拖动鼠标至最后一个单元格。将光标置于第1个单元格中，按住Shift键，再单击最后一个单元格。将光标置于第1行的左边缘，当光标变成 图标时，向下拖动鼠标至最后一行。将光标置于第1列的上边缘，当光标变成 图标时，向右拖动鼠标至最后一列。图5-4选择所有单元格2.添加和删除行、列(1）在现有的表格中插入单元行，可以选择以下的操作之一：将光标移到要插入单元行的下一行，选择“修改表格行”命令。将光标移到要插入单元行的下一行，按组合键“Ctrl+M”。将光标移到要插入单元行的下一行，单击鼠标右键，在弹出的快捷菜单中选择“表格插入行”命令。（2）在现有的表格中插入单元列，可以选择以上的操作之一：将光标移到在插入单元列的右边一列，选择“修改表格插入行”命令。将光标移到要插入单元列的右边一列，按组合键“Ctrl+Shift+A”。将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“修改表格插入列”命令。,(3）如果想在现有的表格中添加多行或多列，操作是：首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择“表格插入行或列”命令，弹出“插入行或列”对话框。在图5-5所示对话框中进行相关的设置。图5-5插入行或列对话框(4）删除整行整列，可以采用下列办法之一：先选择欲删除的整行或整列，直接按Del键，即可删除。先将光标移到要删除的行或列中，选择“修改表格删除行”或“删除列”命令。将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格删除行”或“删除列”命令。5.1.3设置表格和单元格属性1.编辑表格(1）设置表格高度在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设置表格的高度，则必须通过表格属性面板来确定。,(2)合并拆分单元格对表格中的单元格进行合并拆分，既可以通过菜单命令来实现，也可以通过单元格属性面板（单击任意单元格，属性面板将会自动切换）上的快捷按钮来完成。(3)设置单元格的宽度及高度在单元格属性面板上可以改变单元格默认的宽度和高度。图5-6显示表格属性2.表格属性的设置(1）设置表格的边框颜色设置表格的边框颜色时，必须指定表格的边框线的宽度不为0。要为表格的边框指定颜色，首先选择表格，单击属性面板上“边框颜色”的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为表格的边框添加颜色。图5-7表格边框颜色设置,(2）设置表格的背景 表格的背景与网页背景一样，即可以设定为单一的颜色，也可以用图片作为表格的背景。要将表格背景设为单一的颜色，首先选择整个表格，再单击属性面板上“背景颜色”后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面板上的“背景图片”文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。图5-8表格背景设置3.格式化表格(1）设置行、列、单元格的属性首先选择行、列或单元格，打开【表格】的全部属性面板，设置水平排列方式、垂直排列方式、宽、高、背景、背景颜色、边框等，如图5-7所示。图5-9表格列属性面板,(2）表格模板Dreamweaver 8中有一个格式化表格的功能，套用系统提供的十几种表格模板。选择表格，单击菜单“命令”下的“格式化表格”命令，打开“格式化命令”对话框，如图5-10所示。图5-10格式化表格对话框4.导入表格数据在Dreamweaver 8中可以将一些具有制表符、逗号、句号、分号或其他分隔符的格式化好了的表格导入到网页文档中，这对于需要在网页中放置大量格式化数据的情况提供了更快捷的方法。,单击菜单“文件导入表格式数据”命令，打开“导入表格数据”对话框，如图5-11所示。数据文件一般是.txt或者其他程序创建的文件。图5-11导入表格数据对话框5.表格排序主要是针对具有格式数据的表格而言，根据表格列中的数据来排序。选择表格，单击菜单“命令排序表格”命令，打开对话框如图5-12所示。图5-12排序表格对话框,5.1.4使用布局表格和布局单元格前面提到可以利用表格来进行页面的布局，但处理起来较难掌握。Dreamweaver提供了布局视图，简化了用表格进行页面布局的过程。单击“插入”栏上的“布局”选项中的“布局视图”按钮，同理，可以单击“标准视图”回到标准视图下，在布局视图下使用的单元格和布局表格所排的版面全部转化为表格，如图5-13所示图5-13布局视图1.新建布局表格，步骤如下：(1)将标准视图切换到布局视图。(2)单击“绘制布局表格”按钮，鼠标变为“”字形状，在编辑区拖动鼠标绘制布局表格。效果如图5-14所示。图5-14布局表格2.新建布局单元格，步骤如下：在绘制好的表格里继续绘制布局单元格：在布局视图下，单击“绘制布局单元格”按钮，在编辑区拖动鼠标绘制一个单元格，如果事先没有绘制布局表格，则系统会自动创建一个布局表格作为布局单元格的容器。需要注意的是，单击一次按钮，只绘制一个单元格，按住Ctrl的同时可绘制多个布局单元格；当相邻单元格之间距离很小时，会自动吸附，如图5-15所示。,图5-15布局单元格3.创建嵌套布局表格在已经创建好的布局表格中，再绘制布局表格，即是嵌套布局表格。效果如图5-16所示。如果要在建立好的布局表格中输入数据，必须建立布局单元格。图5-16嵌套布局表格使用布局表格和布局单元格的时候应注意：(1）由于单元格不能从重叠，一个单元格中内容变化将导致单元格被撑大，从而影响到其他相邻的单元格。(2）所以最有效的方法就是绘制多个布局表格，以使页面布局的各部分相互隔离，这样不会相互影响。(3）在使用布局表格时，可以使用标尺和网格来辅助设计表格的尺寸大小。,4.设置布局表格和布局单元格属性(1）设置布局表格属性单击布局表格的标题栏或者边框，选中布局表格，出现“属性”检查器，进行相关的设置，如图5-17所示。图5-17布局表格属性对话框(2）设置布局单元格属性单击单元格边框，选中要设置的单元格，会出现控制句柄，在“属性”检查器中进行相关的设置，如图5-18所示。图5-18布局单元格属性对话框5.1.5案例：使用表格制作一个完整页面,1.案例效果，如图5-19所示。图5-19 案例效果,2.案例目标本例中利用Dreamweaver 8中的表格制作一个网站导航的页面，通过单击页面上的网站超级链接就可以进入到相应的网站。表格在Dreamweaver 8中的排版方面有着不可替代的作用，能否灵活应用表格对于制作优美的网页是至关重要的。通过本例的练习，能够熟练掌握使用表格进行页面布局的方法和技巧。3.操作步骤1）新建一个文件，命名为“table.htm”。2）单击属性面板上的【页面属性】按钮，在“页面属性”对话框中设置页面字体为“宋体”，大小为13，背景颜色为“#fcfff7”。如图5-20页面属性对话框所示。图5-20 页面属性对话框设置背景页面外观,3）单击“插入”“表格”命令，打开“表格”对话框，在文档中插入一个1行4列的表格。设置边框粗细为0，表格宽度为900像素。在表格内插入文字，从左到右分别为“欢迎光临”、“设为首页”、“网友留言”、“论坛”。设置文字字体为宋体，颜色为“#ffffff”，大小为13。4）在表格下方输入文字“推荐栏：首页修复PSP掌机 时尚美容减肥基金视频MP4考研WAP激战NBA人才天气海南手机图铃更多.”，设置文字字体为“宋体”，大小为13，颜色为“#000000”。5）单击“插入”“表格”命令，打开“表格”对话框，在文档中插入一个1行1列的表格。设置边框粗细为0，表格宽度为200像素。在表格内插入如图5-21所示的文字，设置文字字体为“宋体”，颜色为“#ffffff”，大小为13。图5-21 插入的文字,6）单击“插入”“表格”命令，打开“表格”对话框，在文档中插入一个3行4列的表格。设置边框粗细为1，表格宽度为700像素。在属性面板中设置边框颜色为“#00FF00”。对第一行单元格合并单元格，在表格内插入“名站导航”文字，设置单元格背景颜色为“00EE00”，设置文字字体为“宋体”，颜色为“#ffffff”，大小为13。7）在第2行中输入如图5-22所示文字，设置文字字体为“宋体”，颜色为“#ffffff”，大小为13。图5-22 插入的文字8）在第3行中输入如图5-24所示文字，设置文字字体为“宋体”，颜色为“#ffffff”，大小为13。,图5-23 插入的文字9）保存，按F12键在浏览器中预览。效果如图5-19所示。,5.2表单表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛用于各种信息的搜集和反馈。网页上的表单和我们日常生活中的表单在功能上有相同之处，表单提供者可以通过表单收集浏览者填写和发送的信息.5.2.1建立表单Dreamweaver 8提供了大量的表单元素，包括文本域、按钮、图像域、复选框、单选按钮、列表/菜单、文件域以及隐藏域等。组合使用这些表单可以满足绝大部分得信息收集需要。将“插入”面板切换到“表单”类下，即可看到各种表单元素。如图5-24所示：图5-24表单元素面板1.建立空白表单单击“插入”“板下“表单”“类项下的“表单”按钮或单击 按钮即可插入空白表单，在文档中将以红色虚线表示，代表一个表单区域，表单对象只能插入在红色虚线内。这个过程也可称之为建立表单布局得过程。其属性面板如图5-25所示：图5-25空白表单属性面板,其中：表单名称：为表单分配一个名称，表单命名之后就能使用JavaScript等脚本语言对它进行控制。动作：输入一个在服务器端处理表单信息的应用程序的URL，可输入应用程序路径或单击文件夹图标确定文件位置。方法：指的是将表单数据传给服务器的传送方式：GET(默认)、POST。目标：将表单处理完成后所显示的结果，所在的应用程序或脚本程序。MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型。默认设置是application/x-www-form-urlencode,通常与POST方法协同使用。如果要建立文件上传域，则可指定multipart/form-data类型。如果使用纯文本类型，则可使用text/plain。2.添加文本域表单文本域是常见表单元素之一，它可以接受任何文本、字母或数字类型。输入的文本可以为多行、单行、项目符号或星号。插入文本域的方法：将光标置于所需的位置上，然后单击“插入”工具栏“表单”分类上的“文本字段”按钮。设置文本域属性的方法：选中插入的文本域，然后在属性面板中选择相应的设置，如图5-26所示。图5-26设置文本域属性,5.5 习题1.如何使用表格设计页面布局？2.如何使用布局表格和布局单元格布局页面？3.如何使用框架布局页面？4.常用的表单有哪些类型？5.如何提交表单？,
