表格和页面布局实用教案

1、创建表格 在网页中插入表格（1）新建一个HTML文档。（2）将光标空位在需要(xyo)插入表格的位置，在“插入”栏的“常用”选项卡中单击“插入表格”按钮。（也可用菜单实现，或用快捷键Ctrl+Alt+T）（3）在弹出的对话框中作相关设置。（4）单击确定即可。第1页/共31页第一页，共32页。插入(ch r)表格对话框 边框（border）:输入表格(biog)线的像素宽度。如果不需要显示表格(biog)线。则输入为0。 单元格填充（Cell Padding）:它表示输入单元格的内容与单元格边线之间的像素数。单元格的上、下、左、右都是一个值。 单元格间距（Cell Spacing）：它单元格之间

2、的距离的像素数。第2页/共31页第二页，共32页。操作(cozu)表格 选择表格及其元素方法多种：（1）单击表格的左上角（光标呈十字型时），或单击表格右边缘及下边缘或单元格内边框的平行光标线单击。（2）在单元格中单击，“修改”“表格”“选中表格”。（3）在状态栏中单击标签(bioqin)，最常用。（4）在单元格中单击，使用两次Ctrl+A。第3页/共31页第三页，共32页。操作(cozu)表格 选择表格的行或列（1）将光标定位于行的左边缘或列的上端，出现选择箭头时，单击即可。（2）也可使用(shyng)拖动鼠标的方法来实现选择多行或多列。 选择单元格在一个单元格中单击，按住Shift键，可选择

3、连续区域。按住Ctrl键，可以选择不连续的单元格。第4页/共31页第四页，共32页。添加(tin ji)或删除行（列） 添加行或列（1）要添加行，单击“修改”“表格”“插入行”。也可在右键的关联菜单中选择。（默认被插入的行是在光标的上边）（2）同理，要添加列，只须把“插入行”改成“插入列”。（默认被插入的列是在光标左边） 要一次插入多行和多列：可以使用(shyng)“插入行或列”命令。 小技巧：将光标定位在最后一行的最后的一个单元格中，按下Tab 键可快速追回一行。第5页/共31页第五页，共32页。添加(tin ji)或删除行（列） 删除行或列在需要删除行或列的位置单击，执行下列操作（教材中有

4、误，请注意！）（1）删除行：“修改” “表格(biog)” “删除行”。（2）删除列：“修改” “表格(biog)” “删除列”。 小技巧：在表格(biog)选中一整行或一整列，然后按下Delete键。第6页/共31页第六页，共32页。拆分与合并(hbng)单元格 拆分单元格具体步骤：（1）在要拆分的单元格中单击。（2）“修改”“表格”“分割单元格”命令，或在属性中单击分割单元格按钮。（左下角）（3）可以在弹出面板中，选择“行”或“列”，还可以是多行或多列。 合并单元格具体步骤：注：要合并的单元格必须是连续且是矩形。（1）选中要合并的多个(du )单元格。（2） “修改”“表格”“合并单元格”

5、命令，或在属性面板中使用合并单元格按钮。合并后每个单元格的内容都将放在一个单元格里面。第7页/共31页第七页，共32页。表格属性(shxng)面板第8页/共31页第八页，共32页。对表格中的数据进行(jnxng)排序 具体步骤：（1）在网页中插入表格，填入数据项目。（2）使用鼠标选择(xunz)要重新排序的表格。（3）打开“命令”菜单，选择(xunz)“表格排序”命令。打开如下对话框。（4）在对话设置框中，可以选择(xunz)多种排序方式。还可以使用二级排序。第9页/共31页第九页，共32页。对表格中的数据进行(jnxng)排序 排序(pi x)表格对话框第10页/共31页第十页，共32页。对

6、表格(biog)中的数据进行排序“排序方式”确定哪个列的值将用于对表格的行进行排序。“顺序”确定是按字母还是按数字顺序以及是以升序（A 到 Z，小数字到大数字）还是降序对列进行排序。当列的内容是数字时，选择“按数字顺序”。如果(rgu)按字母顺序对一组由一位或两位数组成的数字进行排序，则会将这些数字作为单词进行排序（排序结果如 1、10、2、20、3、30），而不是将它们作为数字进行排序（排序结果如 1、2、3、10、20、30）。 第11页/共31页第十一页，共32页。对表格中的数据(shj)进行排序“再按”/“顺序(shnx)”确定在不同列上第二种排序方法的排序顺序(shnx)。在“再按”

7、弹出式菜单中指定应用第二种排序方法的列，并在“顺序(shnx)”弹出式菜单中指定第二种排序方法的排序顺序(shnx)。“排序包含第一行”指定表格的第一行应该包括在排序中。如果第一行是标题，不应移动，则不选择此选项。“对 THEAD 行（如果存在）进行排序”指定使用与 body 行相同的条件对表格 thead 部分（如果存在）中的所有行进行排序。（请注意，即使在排序后 thead 行仍将保留在 thead 部分中并仍显示在表格的顶部。）第12页/共31页第十二页，共32页。对表格中的数据(shj)进行排序“对 TFOOT 行（如果存在）进行排序”指定使用与 body 行相同的条件对表格 tfoo

8、t 部分（如果存在）中的所有行进行排序。（请注意，即使在排序后 tfoot 行仍将保留在 tfoot 部分中并仍显示在表格的底部。）“排序的行保留 TR 属性”指定排序后表格行的属性（例如(lr)颜色）应该保持与相同内容的关联。如果表格行使用两种交替的颜色，则取消选择此选项以确保排序后的表格仍具有颜色交替的行。如果行属性特定于每行的内容，则选择此选项以确保这些属性保持与排序后表格中正确的行关联在一起。第13页/共31页第十三页，共32页。注意事项 使用交替的颜色格式化表格如果以前使用了交替的颜色格式化表格，在重新排序后，可能(knng)会发生混乱。如果不选择“排序的行保留TR属性”复选框，就可

9、以避免这种情况的发生。 将第一行排序：在默认的情况下，Dreamweaver不对第一行排序，如果表格中无标题行，选择“排序包含第一行”复选框。 将头文件进行排序：在默认情况下，Dreamweaver不对头行进行排序，如要对头行进行排序，可选择“对THEAD行（如果存在）进行排序”复选框。 对脚文件进行排序：在默认情况下，Dreamweaver不对脚行进行排序，如要对脚行进行排序，可选择“对TFOOT行（如果存在）进行排序”复选框。第14页/共31页第十四页，共32页。将表格(biog)转化为层 网页设计者可以调整页面布局。如是是表格布局，调整比较麻烦，此时，我们可以将表格转化成层，然后通过移动

10、层来调整布局，方便又快捷。 具体步骤：选择(xunz)菜单“修改”“转换”“表格到层”命令。注：文档中的表格被转换成层，但空的表格单元格不会转换。第15页/共31页第十五页，共32页。自动(zdng)套用表格格式 Dreamweaver MX中预置了多种表格设计(shj)风格，使用这些预置设计(shj)风格格式化表格，可以大大提高表格的设计(shj)效率。 具体步骤：（1）选定需要格式化的表格，然后选择菜单“命令”“格式化表格”。（2）在出现的对话框中，从左边的列表内选择一个设计(shj)方案。右边显示出设计(shj)示例。第16页/共31页第十六页，共32页。格式化表格(biog)对话框第1

11、7页/共31页第十七页，共32页。第六章页面(y min)布局第18页/共31页第十八页，共32页。简介(jin ji) 由于网页设计中进行页面布局常用的是使用表格。表格排版定位准确，整齐划一，有强烈的美感，但它比较专业，对初学者来说，要掌握(zhngw)好表格的使用还需很长的时间，所以DreamweaverMX为我们提供了布局视图功能。 在布局视图中，我们可以随意的拖放布局单元格到所需的位置。操作起来比较简单。第19页/共31页第十九页，共32页。具体(jt)特征 在“插入”栏单击“布局”选项，它有“标准视图”和“布局视图”两个按钮。 在这里(zhl)我们单击“布局视图”按钮，会弹出消息框。

12、 注：此时只有“绘制布局表格”和“绘制布局单元格”两个按钮可用。而“插入表格”和“描绘层”将不可用。我们单击“标准视图”可回到标准视图下，但此时的在布局视图中使用的表格和单元格所排的版面，都将会转化为表格。第20页/共31页第二十页，共32页。建立布局(bj)单元格和表格 如果在新建布局表格之前新建一个布局单元格，系统会自动为创建一个布局表格为布局单元格来作为它的容器(rngq)。即布局单元格不能脱离布局表格而独立存在。 要一次创建多个布局单元格，请按住Ctrl键不放，连续拖动鼠标即可。 如何取消自动吸附功能：当新建布局单元格时，如果与另一个单元格的距离很近（小于8个像素），那这个单元格会自动

13、吸附到另一个单元格，要取消，只需在画单元格时，按住ALT键即可。 注：单元格内不能嵌套单元格。第21页/共31页第二十一页，共32页。新建布局(bj)表格 边框颜色：在默认的状态下，单元格边框是蓝色，当鼠标放上时是红色。表格边框是绿色，背景色是灰色，我们也可以在参数设置中改变它们。 表格可以嵌套，但嵌套表格不能超过外层表格的大小。 为了更好的对布局单元格和布局表格定位，我们可以调用(dioyng)网格。 如果要在表格中加入元素（文字，图片等），必须在表格中建立布局单元格，然后在单元格中输入所需元素。第22页/共31页第二十二页，共32页。消除(xioch)布局单元格的高度 当向布局单元格中添加

14、内容之后，默认的单元格高度很有可能与内容的高度不符，这时候我们要清除单元格的高度。 单击布局表格的标签或者(huzh)边框，选中要清除单元格高度的表格。 单击列头，在弹出菜单中选择“清除单元格高度”命令。第23页/共31页第二十三页，共32页。设置布局单元格和表格(biog)的属性 单击单元格的边框，如果出现控制句柄，表示已经选中要设置的单元格。如果不好选中，可以按住Ctrl键，再在单元格中任意处单击，便可快速选择(xunz)单元格，推荐使用。 它的属性中的“宽”有两种方式。一种为固定数值，另一种为自动伸缩。可以理解为标准视图中表格中使用像素或百分比。大家可以对比联想。“水平”“垂直”可以设置

15、元素的对齐方式。“不换行”复选框可以防止单元格中的文本自动换行。第24页/共31页第二十四页，共32页。设置布局单元格和表格(biog)的属性 在表格属性中，有四个小按钮要清楚它们(t men)的功能。一个是清除表格的行高；一个是单元格的宽度和单元格的内容一致；一个是可移除所有分隔符图像；一个可以清除嵌套表格，它只清除嵌套表格，而不会清除其中的内容。 固定宽度可以与自由伸缩宽度互相转化。但没多大实际意义。第25页/共31页第二十五页，共32页。设置“布局(bj)”参数 执行“编辑”菜单的“参数选择(xunz)”命令（Ctrl+U） 选择(xunz)“分类”列表框中的“布局视图”选项。第26页/

16、共31页第二十六页，共32页。间隔(jin g)图像 所谓间隔图像是在自由伸缩表格中用来控制表格宽度的透明图像，这幅图片(tpin)不会显示在浏览器中，可以在列头菜单中添加间隔图像。 注：此间隔图像可以由DreamweaverMX自动生成。第27页/共31页第二十七页，共32页。网页属性(shxng)的两个的重点 标题的设置任何一个网页文件，都要给它加上标题，一可方便浏览者阅读和切换，二便于收藏。我们一定要记住给每个文档加上标题。 文件头的设置文件头的作用是为了方便搜索引擎搜索页面，以便达到良好的宣传效果(xiogu)。关键字、内容提示等内容都是很重要的设置。第28页/共31页第二十八页，共3

17、2页。如何(rh)设置 新建一个HTML文档。 在编辑区内单击右键（或用菜单操作，快捷键为Ctrl+J），在关联菜单中选择“页面属性”。 在弹出的“页面属性”对话框中，来进行设置。 具体设置见详细操作讲解。注：其中(qzhng)的“跟踪图像”选项是网页排版的一种辅助方式，主要用来进行图像的对位，它只是网页编辑有效，对HTML文档不会产生任何效果。它不会在浏览器中显示出来。当透明度为100%时，为全可见，为50%时，为半透明，当为0%时，为不可见。第29页/共31页第二十九页，共32页。如何(rh)设置头元素 新建一个HTML文档。 在“插入”栏中选择“文件头”选项卡。 “文件头”中共包括：Meta（来描述创作者的内容）关键字（供搜索引擎搜索之用，尤为重要）说明（对HTML文档的内容描述）刷新（用作大型实时变更的数据，如股票，航空论坛等，或当主页迁移时，为了方便浏览者，可设置为自动跳转到新的站点。 ）基础（设置文档的相对(xingdu)位置及打开方式）链接（与CSS样式的链接） 建议大家在设置之后，在代码视图里观察源代码的变化。有什么变化，了解它们各自的作用。）第30页/共