《表格和页面布局》PPT课件.ppt

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