《DW07使用表格总结》由会员分享，可在线阅读，更多相关《DW07使用表格总结（64页珍藏版）》请在金锄头文库上搜索。
1、主讲：主讲：韩维韩维良良2018年年10月月第7章使用表格第一第一节节 使用表格使用表格对页对页面面进进行布局行布局由于网页的主要组成元素是文字、图形或其它一些可视化元素（如Flash动画、图像或文本段落），为了不使它们从一个边缘流向另一个边缘，必须将它们插入到一个“容器”中，这个“容器”就是表格。表格能将表格能将页页面划分面划分为为任意矩形区域，除了可以使大任意矩形区域，除了可以使大量的信息量的信息资资料有料有组织组织地排列起来以便管理外，地排列起来以便管理外，还还可以可以用于网用于网页页布局，将网布局，将网页页中的元素放到表格的中的元素放到表格的单单元格中元格中进进行行页页面排版，是最常用
2、的一种控制面排版，是最常用的一种控制页页面整体布局的面整体布局的工具。工具。2018年10月15日星期一3教育学院网站建网站建设设第7章使用表格实际上，在 Internet 上的绝大多数网页都是用表格辅助布局的。借助表格实现网页的精细排版。可以说表格的灵活应用是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了网页设计师的水平。2018年10月15日星期一4教育学院网站建网站建设设第7章使用表格一、版面布局概述一、版面布局概述一般情况下一个网页主要包括：LOGO （标志），Banner（横幅广告条），导航栏，导航菜单，网页正文，版权声明。在设计页面布局时，也正是围绕着这些元素展开的。在页
3、面制作过程中要确定一个页面的布局（版式），应该综合考虑如何安臵页面中的各种内容，比如标题文字、导航栏、图片、动画、超链接等。2018年10月15日星期一5教育学院网站建网站建设设第7章使用表格做一个网页，尤其是主页，先要规划好版面布局（页页面的条面的条块块分割分割）。如同一个容器，规划好位臵。几种常用的版式（分栏结构）：二分栏，三分栏的结构等。2018年10月15日星期一6教育学院网站建网站建设设第7章使用表格2018年10月15日星期一7教育学院网站建网站建设设第7章使用表格2018年10月15日星期一8教育学院网站建网站建设设第7章使用表格常见的网页布局类型：有“国”字型、“匡”字型、“三
4、”字型、“川”字型等。网站建网站建设设第7章使用表格1“国国”字型字型网站建网站建设设第7章使用表格2“匡匡”字型字型网站建网站建设设第7章使用表格3“三三”字型字型网站建网站建设设第7章使用表格4“川川”字型字型网站建网站建设设第7章使用表格5其他其他类类型型封面型型框架型(1) (2) Flash (3) 网站建网站建设设第7章使用表格6、网、网页页页页面的构成面的构成1）网页尺寸根据屏幕分辨率的大小设计网页的宽度。一般如果屏幕分辨率为800*600 那么设计网页的尺寸为780*428 ，如果屏幕分辨率为1024*768 ，那么设计页面尺寸为980*600 。2）页头（页眉）通常放臵log
5、o（网站标志）和banner（广告条）3）页脚放臵版权信息、联系电话、网站介绍、备案信息等等。4）导航栏各版块栏目的超链接。网站建网站建设设第7章使用表格第二第二节节 插入表格插入表格一、一、创创建表格建表格1、插入表格、插入表格在文档窗口的设计视图中，将插入点臵于要插入表格的位臵，单击“插入”菜单中的“表格”或单击插入栏的“常用”中的“插入表格”按钮Ctrl+Alt+T 。设臵行列数以及边框等。，或者2018年10月15日星期一16教育学院网站建网站建设设第7章使用表格网站建网站建设设第7章使用表格在对话框中进行选项设臵。行、列数行、列数：用于设臵插入表格的行数和列数。表格表格宽宽度度：用于
6、设臵表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与其上一级窗口的宽度将保持相同的百分比。边边框粗框粗细细：用于设臵表格的边框宽度。单单元格元格边边距距：(属性面板是填充填充)用于设臵表格中单元格中的内容与单元格边框的距离。2018年10月15日星期一18教育学院网站建网站建设设第7章使用表格单单元格元格间间距距：用于设臵表格中单元格之间的间距。页页眉眉：把表格的第一行或第一列作为标题行或标题列，作为标题行或标题列的行或列的内容将以粗体的形式显示。分别为无、左、顶部、两者。即确定是否启用表格的行列标题。在左侧为行标题，在顶部为列标题。辅辅助功能
7、中的助功能中的标题标题：用于设臵表格标题，该标题在表格的外侧。(选中后，可知，也作为表格的一部分)摘要摘要：用于描述表格的相关信息。2018年10月15日星期一19教育学院网站建网站建设设第7章使用表格辅辅助中的助中的标题标题2018年10月15日星期一20教育学院网站建网站建设设第7章使用表格表格表格宽宽度菜度菜单单：单击表格中的任意位臵，在表格的上方或者下方显示宽度和宽度分布。单击其中的小三角可以对其进行相应的设臵。也可以在“查看”中“可视化助理”的“表格宽度”中设臵显示或者隐藏，默认显示。2018年10月15日星期一21教育学院网站建网站建设设第7章使用表格实践：实现如下的操作。2018
8、年10月15日星期一22教育学院网站建网站建设设第7章使用表格在网页中插入表格后，可以向单元格中直接输入文本或插入其它的对象，如图像、动画等，还可以向表格中插入嵌套表格。另外, 表格内容的排版等。当然，用户也可以从外部导入其它软件编辑的表格，如Excel电子表格等。2018年10月15日星期一23教育学院网站建网站建设设第7章使用表格2、表格的、表格的html标签标签a1b1a2b22018年10月15日星期一24教育学院网站建网站建设设第7章使用表格 表格标记 行标记 2018年10月15日星期一单元格标记25教育学院网站建网站建设设第7章使用表格第三第三节节 选择选择表格表格一、一、选择选
9、择表格表格鼠标指针指向表格左上角，当鼠标指针右下角出现表格图形时，单击。将光标指向表格边框，单击鼠标，可以选择整个表格。“修改”“表格”“选定表格”；右击，选“表格”“选定表格”表格内任意单击，在“标签选择器”中单击其它方法不常用略。2018年10月15日星期一26教育学院网站建网站建设设第7章使用表格二、二、选择选择表格的行或列表格的行或列鼠标指针指向行左边缘或者列的顶边，出现实心箭头时单击，或者单击并拖动可选择多行或者多列。从某处按下左键，拖动出一个多行多列的矩形区域。插入点臵于某单元格中时，在“标签选择器”单击 ，则选中插入点所在的行。单击表格宽度菜单中的小三角，选“选择列”2018年1
10、0月15日星期一27教育学院网站建网站建设设第7章使用表格三、三、选择单选择单元格元格1、选择单选择单个个单单元格元格Ctrl+ 单击在单元格中单击，按下Ctrl+A2、选择选择相相邻邻的的单单元格元格单击首，Shift+ 单击尾3、选择选择不相不相邻邻的的单单元格元格Ctrl+ 逐个单击2018年10月15日星期一28教育学院网站建网站建设设第7章使用表格4、用、用“标签选择器标签选择器”选择单元格选择单元格插入点臵于某单元格中时，在“标签选择器”中单击，则选中插入点所在单元格。网页中插入的表格状态栏中的“标签选择器”2018年10月15日星期一29教育学院网站建网站建设设第7章使用表格第四
11、第四节节 设设置表格的属性置表格的属性选择要设臵属性的表格区域 (可以是整个表格、一行或一列或一个单元格)后，在属性面板中设臵。2018年10月15日星期一30教育学院网站建网站建设设第7章使用表格表格表格：用于设臵表格的名称。行和列行和列：用于设臵表格的行数和列数。宽宽：用于设臵表格的宽度，单位为“百分比”或“像素”。填充填充：用于设臵单元格中的内容与边框之间的距离。（单位：象素）(内边距)，在表格插入对话框称为单元格边距。间间距距：用于设臵单元格之间的距离，（单位：象素）对齐对齐：用于设臵表格在网页中的对齐方式。2018年10月15日星期一31教育学院网站建网站建设设第7章使用表格2018
12、年10月15日星期一教育学院网站建网站建设设第7章使用表格border(边框的厚度边框的厚度) cellpadding(单元格填充单元格填充)内容内容内容内容cellspacing(单元格间距单元格间距)内容内容内容内容2018年10月15日星期一33教育学院网站建网站建设设第7章使用表格边边框框：用于设臵表格外边框的宽度。类类：用于设臵表格的CSS 样式。单击单击按按钮钮，（宽度橡皮擦）可以取消单元格的宽度设臵，使其宽度随单元格的内容自动缩放。单击单击按按钮钮，（高度橡皮擦）可以取消单元格的高度设臵，使其高度随单元格的内容自动调整。单击单击按按钮钮，可以将表格宽度转换为像素。单击单击按按钮钮
13、，可以将表格宽度转换为百分比。2018年10月15日星期一34教育学院网站建网站建设设第7章使用表格2018年10月15日星期一教育学院网站建网站建设设第7章使用表格第五第五节节 设设置行、列和置行、列和单单元格的属性元格的属性单击某单元格，在属性面板中可以设臵其属性，上半部分为单元格内文本的属性，下半部分为单元格的属性。2018年10月15日星期一36教育学院网站建网站建设设第7章使用表格一、拆分和合并一、拆分和合并单单元格元格拆分单元格的操作是将一个单元格拆分为几个连续的单元格；拆分方法拆分方法 ：选取一个单元格，单击属性面板中的“拆分单元格为行或列”的数目。按钮填写拆分行（列）2018年
14、10月15日星期一37教育学院网站建网站建设设第7章使用表格合并是将多个连续的单元格合并成一个；合并方法合并方法：选取待合并的多个连续的单元格，单击属性面板中的“合并所选单元格”按钮。二、二、设设置置单单元格内容的元格内容的对齐对齐方式方式水平水平：设臵单元格内容在水平方向上的对齐方式，主要有：默认、左、中、右。垂直垂直：设臵单元格内容在垂直方向上的对齐方式，主要有：默认、顶端、剧中、底部、基线。2018年10月15日星期一38教育学院网站建网站建设设第7章使用表格三、三、设设置置单单元格背景元格背景选取单元格，在属性面板中的“背景”中添加背景图片或在“背景颜色”中选取一种颜色或利用16进制数
15、指定一种颜色；2018年10月15日星期一39教育学院网站建网站建设设第7章使用表格第六第六节节 表格基本操作表格基本操作一、一、调调整表格大小整表格大小1、调调整列整列宽宽：拖动列右边框。2、调调整行高整行高：拖动行下边框。3、调调整表整表宽宽：选中表格，拖动右侧尺寸控点。4、调调整表高整表高：选中表格，拖动底边尺寸控点。5、同同时调时调整表整表宽宽表高表高：选中表格，拖动右下角尺寸控点。2018年10月15日星期一40教育学院网站建网站建设设第7章使用表格二、清除和均化表格大小二、清除和均化表格大小1、清除所有高度、清除所有高度方法：选中表格，选择表格宽度菜单中的“清除所有高度”。或者“修
16、改”“表格”“清除单元格高度”。使表格高度收缩至最小程度，即不能再小了。2018年10月15日星期一41教育学院网站建网站建设设第7章使用表格2、清除所有、清除所有宽宽度度方法：选中表格，选择表格宽度菜单中的“清除所有宽度”。或者“修改”“表格”“清除单元格宽度”。使表格宽度收缩至最小程度，即不能再小了。3、统统一所有一所有宽宽度度宽度不一致现象：代码设臵与可视化属性中设臵的不一致。方法：选中表格，选择表格宽度菜单中的“使所有宽度一致”2018年10月15日星期一42教育学院网站建网站建设设第7章使用表格4、统统一列一列宽宽调整表格中的各列宽度后，可以使再其宽度相同。方法：单击某一列，在其列宽
17、度菜单中，选择“清除列宽”。2018年10月15日星期一43教育学院网站建网站建设设第7章使用表格三、增加行和列三、增加行和列1、增加行、增加行方法：右击某行“表格”“插入行”/ “插入行或列”；“修改”“表格”“插入行”/ “插入行或列”命令。“插入”“表格对象”“在上面插入行”/ “在下面插入行”命令。选中表格，在属性面板中“行”数中增加数值。网站建网站建设设2018年10月15日星期一44教育学院第7章使用表格2018年10月15日星期一45教育学院网站建网站建设设第7章使用表格2、增加列、增加列方法：右击某列“表格”“插入列”/ “插入行或列”；“修改”“表格”“插入列”/ “插入行或
18、列”命令。“插入”“表格对象”“在左边插入列”/ “在右边插入列”命令。选中表格，在属性面板中“列”数中增加数值。2018年10月15日星期一46教育学院网站建网站建设设第7章使用表格四、四、删删除表格元素除表格元素1、删删除除单单元格内的元格内的对对象象方法：选中一个或者多个单元格，按Delete，或者“编辑”“清除”。2、删删除行除行方法：在欲删除的行中单击，选择“修改”“表格”“删除行”命令；在欲删除的行中右击，选择“删除行”命令；选中表格，在属性面板中“行”数中减少数值，则从表格底部删除相应的行数。2018年10月15日星期一47教育学院网站建网站建设设第7章使用表格3、删删除列除列方
19、法：在欲删除的列中单击，选择“修改”“表格”“删除列”命令；在欲删除的列中右击，选择“删除列”命令；选中表格，在属性面板中“列”数中减少数值，则从表格右端删除相应的列数。2018年10月15日星期一48教育学院网站建网站建设设第7章使用表格五、剪切、复制和粘五、剪切、复制和粘贴单贴单元格元格1、剪切或者复制、剪切或者复制单单元格元格方法：选中一个包含一个或者多个单元格的矩形区域 ， “编 辑 ” “剪 切 ”/ “复 制 ”， 或 者Ctrl+X/Ctrl+C;如果选中区域包含整行或者整列，则为剪切后删除所含的整行或者整列，反之，剪切后仅清除所选单元格的内容，复制对原内容没有影响。2018年1
20、0月15日星期一49教育学院网站建网站建设设第7章使用表格2、粘、粘贴单贴单元格元格单击欲粘贴处, “编辑”“粘贴”，或者Ctrl+V;如果是粘贴整行整列，则将插入整行或者整列。也可选择性的粘贴：单击欲粘贴处 , “编辑”“选择性粘贴”; 再选择粘贴类型。2018年10月15日星期一50教育学院网站建网站建设设第7章使用表格六、合并和拆分六、合并和拆分单单元格元格1、合并、合并方法：选中欲合并的多个相邻单元格，“修改”“表格”“合并单元格”或者右击选择“表格”“合并单元格”。或者单击某单元格，“修改”“表格”“增加行宽”，则 向下合并一行向下合并一行。单击某单元格，“修改”“表格”“增加列宽”
21、，则 向右合并一列。向右合并一列。2018年10月15日星期一51教育学院网站建网站建设设第7章使用表格2、拆分、拆分方法：选中欲拆分的单元格，“修改”“表格”“拆分单元格”或者右击选择“表格”“拆分单元格”。再选择拆分类型以及相应拆分数量。2018年10月15日星期一52教育学院网站建网站建设设第7章使用表格或者单击某个合并后的单元格，“修改”“表格”“减少行宽”，则在其下方拆分出一行。单击某单元格，“修改”“表格”“减少列宽”，则在其右侧拆分出一列。2018年10月15日星期一53教育学院网站建网站建设设第7章使用表格七、表格嵌套七、表格嵌套在一个表格中嵌套另一个表格，在网页设计中是非常普
22、遍的操作，从而保证各自属性的设臵不受干扰。方法：单击现有表格中的一个单元格，选择“插入”菜单中的“表格”, 设臵相关属性。练习练习：设计一个二分栏的页面布局。2018年10月15日星期一54教育学院网站建网站建设设第7章使用表格第七第七节节 操作数据表格操作数据表格一、一、导导入表格数据入表格数据可以将在Excel表格或者文本文件中的表格式数据导入到Dreamweaver 中。前提前提：导入到网页中的表格，须以 CSV 格式或文本格式以特定的分隔符分隔才可以实现导入。如将EXCEL 中的电子表格另存为 CSV 格式（一个工作表存为一个CSV 文件）。2018年10月15日星期一55教育学院网站
23、建网站建设设第7章使用表格方法：单击欲插入处，选择“文件”“导入”“表格式数据”或选择“插入”“表格对象”“导入表格式数据”菜单命令。也可以导入 Excel的原始数据，有时兼容性不好出错。2018年10月15日星期一56教育学院，网站建网站建设设第7章使用表格二、二、导导出表格数据出表格数据方法：将插入点臵于欲导出的表格中，选择“文件”“导出”“表格”。再选择定界符和换行符的类型。导出的表格格式为：CSV 格式。2018年10月15日星期一57教育学院网站建网站建设设第7章使用表格三、排序表格数据三、排序表格数据可以根据单个列的内容对表格中的行进行排序。方法：选择表格（或单击任意单元格），执行
24、“命令”“排序表格”。注意：不能对包含合并单元格的表格进行排序。2018年10月15日星期一58教育学院网站建网站建设设第7章使用表格2018年10月15日星期一59教育学院网站建网站建设设第7章使用表格第八第八节节 表格特殊属性表格特殊属性可以利用 表格标签的特殊属性设臵隐藏或者显示单元格的分隔线、表格边框的功能。一、一、隐隐藏和藏和显显示示单单元格分隔元格分隔线线方法：设臵 表格标签的rules 属性:Rows：隐藏单元格的横向分隔线；Cols：隐藏单元格的竖向分隔线；none：隐藏单元格的横、竖向分隔线；在代码中设臵表格“bordercolor ”为 red，再设臵某种隐藏，完成后在预览
25、中观看效果。2018年10月15日星期一60教育学院网站建网站建设设第7章使用表格二、二、隐隐藏和藏和显显示表格示表格边边框框方法：设臵表格标签的frame属性:vsides：显示表格的左右边框；hsides：显示表格的上下边框；above ：显示表格的上边框；below ：显示表格的下边框；rhs：显示表格的右边框；lhs：显示表格的左边框；void：不显示表格的边框；2018年10月15日星期一61教育学院网站建网站建设设第7章使用表格实实践：践：用无边框表格实现二分栏布局，边距均为0，居中，另外，表格布局宽度为 980。2018年10月15日星期一62教育学院网站建网站建设设第7章使用表格?实践：国字型网页布局设计2018年10月15日星期一63教育学院网站建网站建设设第7章使用表格实践：2018年10月15日星期一64教育学院网站建网站建设设
