第八章 用表格布局页面.ppt

《第八章 用表格布局页面.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第八章用表格布局页面10/4/20211中原工学院信息商务学院计科系8.1认识表格网页向浏览者提供的信息是多样化的，例如文字、图像、Flash动画等。如何使这些网页元素在网页中的合理位置上显示出来，使网页变得有条理和美观，是设计人员在设计网页之前必须考虑的事情。表格在网页中不仅可以排列数据，而且可以帮助设计者高效、准确地定位各种网页元素，使页面显得整齐有序、分类明确，便于访问者浏览。10/4/20212中原工学院信息商务学院计科系认识表格表格是网页布局最常用、最古老方式，在网页布局应用中达到登峰造极的地步。一个最典型例子就是网页设计师可以直接使用图像编辑器画图、切图，最后再由图像

2、编辑器全自动生成表格布局的页面。10/4/20213中原工学院信息商务学院计科系表格的构成10/4/20214中原工学院信息商务学院计科系8.2.1插入表格在DW中，单击【插入】栏的【常用】选项卡中的【表格】按钮，打开【表格】对话框。效果图10/4/20215中原工学院信息商务学院计科系表格属性在【表格】对话框中，主要参数选项的具体作用如下：【行数】：表格的行数；【列数】：表格的列数；【表格宽度】：可在文本框中输入表格的宽度，在右边的下拉列表中选择度量单位，可以选择【百分比】和【像素】两个选项；【边框粗细】：表格边框的粗细，以像素为单位；【单元格边距】：单元格中的内容与单元格边框

3、之间的距离值；【单元格间距】：单元格与单元格之间的距离值；10/4/20216中原工学院信息商务学院计科系表格属性【页眉】：可以选择表格的表头样式，图标中的深蓝色部分表示表头所在的行或列。【辅助功能】：在【标题】文本框中可以输入表格的标题名称；在【对齐标题】下拉列表中可以选择表格标题的对齐方式。【摘要】：可以在文本框中输入表格的摘要说明内容，摘要内容不会在浏览器中显示。10/4/20217中原工学院信息商务学院计科系8.2.2选择表格选择整个表格方法1：将鼠标移至表格左上角，当鼠标变成表格形状时点击即可方法2：单击表格的任意单元格，方法3：将鼠标移至表格的右边框或下边框时，当鼠标

4、变成或时单击即可选中表格然后点击10/4/20218中原工学院信息商务学院计科系选择表格选择表格的行或列方法1：单击某单元格，直接拖动鼠标即选择该行或该列；方法2：将鼠标移至表格的上边缘或左边缘，当鼠标变成向下黑箭头或向右黑箭头时点击，即可选中该列或该行。选择某个单元格方法1：按住Ctrl键，直接单击单元格即可；方法2：单击某个单元格，按Ctrl+A即可。选择多个单元格：一直按住Ctrl键，点击需要选中的单元格即可。10/4/20219中原工学院信息商务学院计科系8.3设置表格调整表格大小（要选中表格）水平调整大小：在右边框上，鼠标变成拖动即可垂直调整大小：在下边框上，鼠标变成拖

5、动即可水平和垂直同时调整大小：在右下角上，鼠标变成拖动即可调整列宽和行高调整列宽：在某列右边框上，鼠标变成拖动即可调整行高：在某行下边框上，鼠标变成拖动即可添加行、列删除行、列拆分单元格：先选择要拆分的单元格合并单元格：先选择要合并的两个及以上的连续单元格10/4/202110中原工学院信息商务学院计科系设置表格添加和删除行、列拆分和合并单元格设置表格属性（先选中表格，在属性面板设置）a和d（清除列宽/行高）：从表格中删除所有显式指定的宽度/高度（即清除width/height属性）上图红色方框的按钮从左至右，分别编号为a、b、c、db和c（将表格宽度转换成像素/百分比）：将表格

6、中的所有显式指定的宽度的值都转换成像素值/百分比（即将width属性的值改为像素值/百分比）10/4/202111中原工学院信息商务学院计科系设置表格设置单元格、行、列属性（先选中，在属性面板设置）10/4/202112中原工学院信息商务学院计科系8.5使用表格数据排序表格数据（【命令】

7、【排序表格】）10/4/202113中原工学院信息商务学院计科系导入表格式数据在设计视图中，将光标放在需要插入表格的地方；【文件】

8、【导入】

9、【表格式数据】或将“插入”工具栏切换到“数据”对象组，单击“导入表格式数据”按钮；在对话框中对数据源以及参数进行选择。10/4/202114中原工学院信息

10、商务学院计科系导出表格数据打开需要导出表格的HTML文档，将光标放到表格的单元格中；在菜单中执行【文件】

11、【导出】

12、【表格】命令；单击“导出”按钮就弹出“表格导出为”对话框，进行保存即可。10/4/202115中原工学院信息商务学院计科系8.6使用布局模式为了方便我们精准、简单和高效的使用表格来布局页面，DW为表格提供了3种工作模式。【查看】

13、【表格模式】标准模式：该模式是表格的默认工作模式，也是最接近浏览器中预览效果的模式，前面对表格的所有操作都是在此模式下完成的；扩展表格模式