表格和页面布局课件

表格和页面布局PPT课件第三章使用表格使用表格表格和页面布局PPT课件表格的功能v无论用于对齐数据还是在页面上文本进行排版，表无论用于对齐数据还是在页面上文本进行排版，表格都体现了强大的功能。它几乎成了现在所有大型格都体现了强大的功能。它几乎成了现在所有大型网站排版的首选布局工具。网站排版的首选布局工具。v表格与层能互相转换。虽然层也能控制元素在页面表格与层能互相转换。虽然层也能控制元素在页面中的显示位置，但是层对老版本的浏览器的支持不中的显示位置，但是层对老版本的浏览器的支持不是很好。所以，我们要更好的运用表格来布局。是很好。所以，我们要更好的运用表格来布局。v表格的三个基本元素：表格的三个基本元素：（1）行（水平线的间隔，用）行（水平线的间隔，用定义）定义）（2）列（垂直线的间隔）列（垂直线的间隔）（3）单元格（行和列的交叉元素，）单元格（行和列的交叉元素，用用定义）定义）表格和页面布局PPT课件创建表格v在网页中插入表格在网页中插入表格（1）新建一个）新建一个HTML文档。文档。（2）将光标空位在需要插入表格的位置，在）将光标空位在需要插入表格的位置，在“插入插入”栏的栏的“常用常用”选项卡中单击选项卡中单击“插入插入表格表格”按钮。（也可用菜单实现，或用快捷按钮。（也可用菜单实现，或用快捷键键Ctrl+Alt+T）（3）在弹出的对话框中作相关设置。）在弹出的对话框中作相关设置。（4）单击确定即可。）单击确定即可。表格和页面布局PPT课件插入表格对话框v边框（边框（border）:输入表格线的像素宽度。如果不需要显示输入表格线的像素宽度。如果不需要显示表格线。则输入为表格线。则输入为0。v单元格填充（单元格填充（Cell Padding）:它表示输入单元格的内容与它表示输入单元格的内容与单元格边线之间的像素数。单元格的上、下、左、右都是一单元格边线之间的像素数。单元格的上、下、左、右都是一个值。个值。v单元格间距（单元格间距（Cell Spacing）：它单元格之间的距离的像素）：它单元格之间的距离的像素数。数。表格和页面布局PPT课件操作表格v选择表格及其元素选择表格及其元素方法多种：方法多种：（1）单击表格的左上角（光标呈十字型时），或）单击表格的左上角（光标呈十字型时），或单击表格右边缘及下边缘或单元格内边框的平行光单击表格右边缘及下边缘或单元格内边框的平行光标线单击。标线单击。（2）在单元格中单击，）在单元格中单击，“修改修改”“表格表格”“选中选中表格表格”。（3）在状态栏中单击）在状态栏中单击标签，最常用。标签，最常用。（4）在单元格中单击，使用）在单元格中单击，使用两次两次Ctrl+A。表格和页面布局PPT课件操作表格v选择表格的行或列选择表格的行或列（1）将光标定位于行的左边缘或列的上端，）将光标定位于行的左边缘或列的上端，出现选择箭头时，单击即可。出现选择箭头时，单击即可。（2）也可使用拖动鼠标的方法来实现选择多）也可使用拖动鼠标的方法来实现选择多行或多列。行或多列。v选择单元格选择单元格在一个单元格中单击，按住在一个单元格中单击，按住Shift键，可选择键，可选择连续区域。按住连续区域。按住Ctrl键，可以选择不连续的键，可以选择不连续的单元格。单元格。表格和页面布局PPT课件添加或删除行（列）v添加行或列添加行或列（1）要添加行，单击）要添加行，单击“修改修改”“表格表格”“插入插入行行”。也可在右键的关联菜单中选择。（默认被插。也可在右键的关联菜单中选择。（默认被插入的行是在光标的上边）入的行是在光标的上边）（2）同理，要添加列，只须把）同理，要添加列，只须把“插入行插入行”改成改成“插入列插入列”。（默认被插入的列是在光标左边）。（默认被插入的列是在光标左边）v要一次插入多行和多列：可以使用要一次插入多行和多列：可以使用“插入行或列插入行或列”命令。命令。v小技巧：将光标定位在最后一行的最后的一个单元小技巧：将光标定位在最后一行的最后的一个单元格中，按下格中，按下Tab 键可快速追回一行。键可快速追回一行。表格和页面布局PPT课件添加或删除行（列）v删除行或列删除行或列在需要删除行或列的位置单击，执行下列操在需要删除行或列的位置单击，执行下列操作作（教材中有误，请注意！）（教材中有误，请注意！）（1）删除行：）删除行：“修改修改”“表格表格”“删除删除行行”。（2）删除列：）删除列：“修改修改”“表格表格”“删除删除列列”。v小技巧：在表格选中一整行或一整列，然后小技巧：在表格选中一整行或一整列，然后按下按下Delete键。键。表格和页面布局PPT课件拆分与合并单元格v拆分单元格具体步骤：拆分单元格具体步骤：（1）在要拆分的单元格中单击。）在要拆分的单元格中单击。（2）“修改修改”“表格表格”“分割单元格分割单元格”命令，或在属性中命令，或在属性中单击分割单元格按钮。（左下角）（单击分割单元格按钮。（左下角）（3）可以在弹出面板中，）可以在弹出面板中，选择选择“行行”或或“列列”，还可以是多行或多列。，还可以是多行或多列。v合并单元格具体步骤：合并单元格具体步骤：注：要合并的单元格必须是连续且是矩形。注：要合并的单元格必须是连续且是矩形。（1）选中要合并的多个单元格。）选中要合并的多个单元格。（2）“修改修改”“表格表格”“合并单元格合并单元格”命令，或在属性面命令，或在属性面板中使用合并单元格按钮。板中使用合并单元格按钮。合并后每个单元格的内容都将放在一个单元格里面。合并后每个单元格的内容都将放在一个单元格里面。表格和页面布局PPT课件表格属性面板表格和页面布局PPT课件对表格中的数据进行排序v具体步骤：具体步骤：（1）在网页中插入表格，填入数据项目。）在网页中插入表格，填入数据项目。（2）使用鼠标选择要重新排序的表格。）使用鼠标选择要重新排序的表格。（3）打开）打开“命令命令”菜单，选择菜单，选择“表格排序表格排序”命令。打开如下对话框。命令。打开如下对话框。（4）在对话设置框中，可以选择多种排序方）在对话设置框中，可以选择多种排序方式。还可以使用二级排序。式。还可以使用二级排序。表格和页面布局PPT课件对表格中的数据进行排序v排序表格对话框表格和页面布局PPT课件对表格中的数据进行排序“排序方式排序方式”确定哪个列的值将用于对表格的行进行排序。“顺序顺序”确定是按字母还是按数字顺序以及是以升序（A 到 Z，小数字到大数字）还是降序对列进行排序。当列的内容是数字时，选择“按数字顺序”。如果按字母顺序对一组由一位或两位数组成的数字进行排序，则会将这些数字作为单词进行排序（排序结果如 1、10、2、20、3、30），而不是将它们作为数字进行排序（排序结果如 1、2、3、10、20、30）。表格和页面布局PPT课件对表格中的数据进行排序“再按再按”/“顺序顺序”确定在不同列上第二种排序方法的排序顺序。在“再按”弹出式菜单中指定应用第二种排序方法的列，并在“顺序”弹出式菜单中指定第二种排序方法的排序顺序。“排序包含第一行排序包含第一行”指定表格的第一行应该包括在排序中。如果第一行是标题，不应移动，则不选择此选项。“对对 THEAD 行（如果存在）进行排序行（如果存在）进行排序”指定使用与 body 行相同的条件对表格 thead 部分（如果存在）中的所有行进行排序。（请注意，即使在排序后 thead 行仍将保留在 thead 部分中并仍显示在表格的顶部。）表格和页面布局PPT课件对表格中的数据进行排序“对对 TFOOT 行（如果存在）进行排序行（如果存在）进行排序”指定使用与 body 行相同的条件对表格 tfoot 部分（如果存在）中的所有行进行排序。（请注意，即使在排序后 tfoot 行仍将保留在 tfoot 部分中并仍显示在表格的底部。）“排序的行保留排序的行保留 TR 属性属性”指定排序后表格行的属性（例如颜色）应该保持与相同内容的关联。如果表格行使用两种交替的颜色，则取消选择此选项以确保排序后的表格仍具有颜色交替的行。如果行属性特定于每行的内容，则选择此选项以确保这些属性保持与排序后表格中正确的行关联在一起。表格和页面布局PPT课件注意事项v使用交替的颜色格式化表格使用交替的颜色格式化表格如果以前使用了交替的颜色格式化表格，在重新排序后，可如果以前使用了交替的颜色格式化表格，在重新排序后，可能会发生混乱。如果不选择能会发生混乱。如果不选择“排序的行保留排序的行保留TR属性属性”复选复选框，就可以避免这种情况的发生。框，就可以避免这种情况的发生。v将第一行排序：在默认的情况下，将第一行排序：在默认的情况下，Dreamweaver不对第一不对第一行排序，如果表格中无标题行，选择行排序，如果表格中无标题行，选择“排序包含第一行排序包含第一行”复复选框。选框。v将头文件进行排序：在默认情况下，将头文件进行排序：在默认情况下，Dreamweaver不对头不对头行进行排序，如要对头行进行排序，可选择行进行排序，如要对头行进行排序，可选择“对对THEAD行行（如果存在）进行排序（如果存在）进行排序”复选框。复选框。v对脚文件进行排序：在默认情况下，对脚文件进行排序：在默认情况下，Dreamweaver不对脚不对脚行进行排序，如要对脚行进行排序，可选择行进行排序，如要对脚行进行排序，可选择“对对TFOOT行行（如果存在）进行排序（如果存在）进行排序”复选框。复选框。表格和页面布局PPT课件将表格转化为层v网页设计者可以调整页面布局。如是是表格布局，网页设计者可以调整页面布局。如是是表格布局，调整比较麻烦，此时，我们可以将表格转化成层，调整比较麻烦，此时，我们可以将表格转化成层，然后通过移动层来调整布局，方便又快捷。然后通过移动层来调整布局，方便又快捷。v具体步骤：具体步骤：选择菜单选择菜单“修改修改”“转换转换”“表格到层表格到层”命令。命令。注：文档中的表格被转换成层，但空的表格单元格注：文档中的表格被转换成层，但空的表格单元格不会转换。不会转换。表格和页面布局PPT课件自动套用表格格式vDreamweaver MX中预置了多种表格设计风格，使用这些预置设计风格格式化表格，可以大大提高表格的设计效率。v具体步骤：（1）选定需要格式化的表格，然后选择菜单“命令”“格式化表格”。（2）在出现的对话框中，从左边的列表内选择一个设计方案。右边显示出设计示例。表格和页面布局PPT课件格式化表格对话框表格和页面布局PPT课件第六章页面布局页面布局表格和页面布局PPT课件简介v由于网页设计中进行页面布局常用的是使用由于网页设计中进行页面布局常用的是使用表格。表格排版定位准确，整齐划一，有强表格。表格排版定位准确，整齐划一，有强烈的美感，但它比较专业，对初学者来说，烈的美感，但它比较专业，对初学者来说，要掌握好表格的使用还需很长的时间，所以要掌握好表格的使用还需很长的时间，所以DreamweaverMX为我们提供了布局视图功为我们提供了布局视图功能。能。v在布局视图中，我们可以随意的拖放布局单在布局视图中，我们可以随意的拖放布局单元格到所需的位置。操作起来比较简单。元格到所需的位置。操作起来比较简单。表格和页面布局PPT课件具体特征v在在“插入插入”栏单击栏单击“布局布局”选项，它有选项，它有“标准视图标准视图”和和“布局视图布局视图”两个按钮。两个按钮。v在这里我们单击在这里我们单击“布局视图布局视图”按钮，会弹出消息框。按钮，会弹出消息框。v注：此时只有注：此时只有“绘制布局表格绘制布局表格”和和“绘制布局单元绘制布局单元格格”两个按钮可用。而两个按钮可用。而“插入表格插入表格”和和“描绘层描绘层”将不可用。将不可用。我们单击我们单击“标准视图标准视图”可回到标准视图下，但此时可回到标准视图下，但此时的在布局视图中使用的表格和单元格所排的版面，的在布局视图中使用的表格和单元格所排的版面，都将会转化为表格。都将会转化为表格。表格和页面布局PPT课件建立布局单元格和表格v如果在新建布局表格之前新建一个布局单元格，系如果在新建布局表格之前新建一个布局单元格，系统会自动为创建一个布局表格为布局单元格来作为统会自动为创建一个布局表格为布局单元格来作为它的容器。它的容器。即布局单元格不能脱离布局表格而独立存在。即布局单元格不能脱离布局表格而独立存在。v要一次创建多个布局单元格，请按住要一次创建多个布局单元格，请按住Ctrl键不放，键不放，连续拖动鼠标即可。连续拖动鼠标即可。v如何取消自动吸附功能：当新建布局单元格时，如如何取消自动吸附功能：当新建布局单元格时，如果与另一个单元格的距离很近（小于果与另一个单元格的距离很近（小于8个像素），个像素），那这个单元格会自动吸附到另一个单元格，要取消，那这个单元格会自动吸附到另一个单元格，要取消，只需在画单元格时，按住只需在画单元格时，按住ALT键即可。键即可。v注：单元格内不能嵌套单元格。注：单元格内不能嵌套单元格。表格和页面布局PPT课件新建布局表格v边框颜色：在默认的状态下，单元格边框是蓝色，边框颜色：在默认的状态下，单元格边框是蓝色，当鼠标放上时是红色。当鼠标放上时是红色。表格边框是绿色，背景色是灰色，我们也可以在参表格边框是绿色，背景色是灰色，我们也可以在参数设置中改变它们。数设置中改变它们。v表格可以嵌套，但嵌套表格不能超过外层表格的大表格可以嵌套，但嵌套表格不能超过外层表格的大小。小。v为了更好的对布局单元格和布局表格定位，我们可为了更好的对布局单元格和布局表格定位，我们可以调用网格。以调用网格。v如果要在表格中加入元素（文字，图片等），必须如果要在表格中加入元素（文字，图片等），必须在表格中建立布局单元格，然后在单元格中输入所在表格中建立布局单元格，然后在单元格中输入所需元素。需元素。表格和页面布局PPT课件消除布局单元格的高度v当向布局单元格中添加内容之后，默认的单当向布局单元格中添加内容之后，默认的单元格高度很有可能与内容的高度不符，这时元格高度很有可能与内容的高度不符，这时候我们要清除单元格的高度。候我们要清除单元格的高度。v单击布局表格的标签或者边框，选中要清除单击布局表格的标签或者边框，选中要清除单元格高度的表格。单元格高度的表格。v单击列头，在弹出菜单中选择单击列头，在弹出菜单中选择“清除单元格清除单元格高度高度”命令。命令。表格和页面布局PPT课件设置布局单元格和表格的属性v单击单元格的边框，如果出现控制句柄，表示已经单击单元格的边框，如果出现控制句柄，表示已经选中要设置的单元格。选中要设置的单元格。如果不好选中，可以按住如果不好选中，可以按住Ctrl键，再在单元格中任键，再在单元格中任意处单击，便可快速选择单元格，推荐使用。意处单击，便可快速选择单元格，推荐使用。v它的属性中的它的属性中的“宽宽”有两种方式。有两种方式。一种为固定数值，另一种为自动伸缩。可以理解为一种为固定数值，另一种为自动伸缩。可以理解为标准视图中表格中使用像素或百分比。大家可以对标准视图中表格中使用像素或百分比。大家可以对比联想。比联想。“水平水平”“”“垂直垂直”可以设置元素的对齐方式。可以设置元素的对齐方式。“不换行不换行”复选框可以防止单元格中的文本自动换复选框可以防止单元格中的文本自动换行。行。表格和页面布局PPT课件设置布局单元格和表格的属性v在表格属性中，有四个小按钮要清楚它们的在表格属性中，有四个小按钮要清楚它们的功能。功能。一个是清除表格的行高；一个是清除表格的行高；一个是单元格的宽度和单元格的内容一致；一个是单元格的宽度和单元格的内容一致；一个是可移除所有分隔符图像；一个是可移除所有分隔符图像；一个可以清除嵌套表格，它只清除嵌套表格，一个可以清除嵌套表格，它只清除嵌套表格，而不会清除其中的内容。而不会清除其中的内容。v固定宽度可以与自由伸缩宽度互相转化。但固定宽度可以与自由伸缩宽度互相转化。但没多大实际意义。没多大实际意义。表格和页面布局PPT课件设置“布局”参数v执行执行“编辑编辑”菜单的菜单的“参数选择参数选择”命令（命令（Ctrl+U）v选择选择“分类分类”列表框中的列表框中的“布局视图布局视图”选项。选项。表格和页面布局PPT课件间隔图像v所谓间隔图像是在自由伸缩表格中用来控制所谓间隔图像是在自由伸缩表格中用来控制表格宽度的透明图像，这幅图片不会显示在表格宽度的透明图像，这幅图片不会显示在浏览器中，可以在列头菜单中添加间隔图像。浏览器中，可以在列头菜单中添加间隔图像。v注：此间隔图像可以由注：此间隔图像可以由DreamweaverMX自自动生成。动生成。表格和页面布局PPT课件网页属性的两个的重点v标题的设置标题的设置任何一个网页文件，都要给它加上标题，一任何一个网页文件，都要给它加上标题，一可方便浏览者阅读和切换，二便于收藏。我可方便浏览者阅读和切换，二便于收藏。我们一定要记住给每个文档加上标题。们一定要记住给每个文档加上标题。v文件头的设置文件头的设置文件头的作用是为了方便搜索引擎搜索页面，文件头的作用是为了方便搜索引擎搜索页面，以便达到良好的宣传效果。关键字、内容提以便达到良好的宣传效果。关键字、内容提示等内容都是很重要的设置。示等内容都是很重要的设置。表格和页面布局PPT课件如何设置v新建一个新建一个HTML文档。文档。v在编辑区内单击右键（或用菜单操作，快捷键为在编辑区内单击右键（或用菜单操作，快捷键为Ctrl+J），在关联菜单中选择），在关联菜单中选择“页面属性页面属性”。v在弹出的在弹出的“页面属性页面属性”对话框中，来进行设置。对话框中，来进行设置。v具体设置见详细操作讲解。具体设置见详细操作讲解。注：其中的注：其中的“跟踪图像跟踪图像”选项是网页排版的一种辅选项是网页排版的一种辅助方式，主要用来进行图像的对位，它只是网页编助方式，主要用来进行图像的对位，它只是网页编辑有效，对辑有效，对HTML文档不会产生任何效果。它不会文档不会产生任何效果。它不会在浏览器中显示出来。当透明度为在浏览器中显示出来。当透明度为100%时，为全时，为全可见，为可见，为50%时，为半透明，当为时，为半透明，当为0%时，为不可时，为不可见。见。表格和页面布局PPT课件如何设置头元素v新建一个新建一个HTML文档。文档。v在在“插入插入”栏中选择栏中选择“文件头文件头”选项卡。选项卡。v“文件头文件头”中共包括：中共包括：Meta（来描述创作者的内容）（来描述创作者的内容）关键字关键字（供搜索引擎搜索之用，尤为重要）（供搜索引擎搜索之用，尤为重要）说明（对说明（对HTML文档的内容描述）文档的内容描述）刷新刷新（用作大型实时变更的数据，如股票，航空（用作大型实时变更的数据，如股票，航空论坛等，或当主页迁移时，为了方便浏览者，可论坛等，或当主页迁移时，为了方便浏览者，可设置为自动跳转到新的站点。设置为自动跳转到新的站点。）基础（设置文档的相对位置及打开方式）基础（设置文档的相对位置及打开方式）链接（与链接（与CSS样式的链接）样式的链接）v建议大家在设置之后，在代码视图里观察源代码建议大家在设置之后，在代码视图里观察源代码的变化。有什么变化，了解它们各自的作用。）的变化。有什么变化，了解它们各自的作用。）