实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第3章 使用表格布局页面

1、学习目标,能够插入表格，会使用属性面板和菜单对表格进行设定和编辑 能够运用表格及表格的嵌套和叠加进行网页布局 能够对表格数据进行处理。,3.1 表格的建立和编辑 3.2 表格在页面布局中的应用,本章内容,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、单元格和设定单元格的高、宽、对齐方式、如何设置表格和单元格的背景颜色、如何制作细线表格。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 1）新建文件夹Ezu，将国旗图片拷贝到该文件夹中。利用站点设置对象向导新建站点，将站点文件夹定义为Ezu。 2）新建网页，保存为index.html，将网页的标题改为“E组”。 3）单击菜单“插入”“表格”命令，在弹出的对话框中设置表格为8行5列，表格宽度为578，单元格间距为1，其他参数为0，如图所示，单击“确定”按钮，则在网页中新建一个表格。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 鼠标单击表格的右侧空白处，取消选中表

2、格，在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，在弹出的对话框中设选择器名称为“d1”，单击“确定”按钮。在接下来弹出的“d1的CSS定义规则”对话框中选择“背景”选项，设“背景颜色”为#c9def3，单击“确定”按钮。 此时光标所在行显示蓝色。单击CSS属性面板的“目标规则”下拉列表，选择“删除类”，则蓝色去掉。 单击表格的底端选中整个表格，在属性面板的“类”中选择“d1”，则整个表格的背景色为浅蓝色，如图所示。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 4）拖拽鼠标从表格第1行到最后一行，选中所有单元格，在属性面板中设“高”为25，“水平”和“垂直”均设为居中，如图所示。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 5）拖拽鼠标从第1行第1个单元格到右端选中第1行所有单元格，在属性面板中设“背景颜色”为#efefef，则该行单元格变为浅灰色。拖拽鼠标选中该行第2个到右端的多个单元格，在属性面板中单击合并单元格按钮 ，设“水平”为右对齐，如图所示。,3.1 表格的建立和

3、编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 6）光标移到第1行第1个单元格内，在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t1”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字号为12，粗体，文字颜色为#FF6600。 在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t2”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字号为12，粗体，文字颜色为白色。 在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，打开“新建CSS规则”对话框，在“选择器名称”中输入“t3”，单击“确定”按钮两次，回到文档窗口。在CSS属性面板中，设字号为12，粗体，文字颜色为黑色。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 7）将光标移到第1行左侧单元格内，输入文字“E组”。选中文字，在CSS属性面板中设“目标规则”为“t1”。 光标移

4、到该行右侧单元格中，插入1个国家的国旗图像，选中图像，在属性面板中设“水平边距”设为5，使图像间保持距离，将光标移到国旗图像右侧，重复前面的操作插入其它3个国旗图像，如图所示。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 8）选中第2行单元格，在属性面板中设定背景颜色为#3771b0，则该行变为深蓝色背景。按住Ctrl键分别点击第3、5、7行的单元格，全部选中它们，设定这3行单元格的背景颜色为白色。同理再分别选中第4、6、8行单元格，设定这3行单元格的背景颜色为#ecf4ff，如图所示。,3.1 表格的建立和编辑,3.1.1 案例制作：2006世界杯E组对阵表,操作步骤： 9）参照最终效果图3-1所示，分别在相应的单元格中输入文字，选中第2行的文字，在属性面板的“目标规则”中选择“t2”。 选中第38行的文字，在属性面板的“目标规则”中选择“t3”。 将鼠标移到单元格的垂直边框上可拖动边框调整各列单元格的宽度，按F12进行预览。,3.1 表格的建立和编辑,3.1.2 新知解析,1.创建表格 创建表格可以通过“插入”面板或菜单两种方法实现。步骤如

5、下： 将光标移到要插入表格的位置 打开“插入”面板，切换到“常用”选项下，单击 表格按钮，或单击菜单“插入”“表格”命令， 弹出“表格”对话框，如右图所示，可根据需要 进行相应的参数设置。 单击“确定”按钮。,需要注意的是下面的设置项目： “表格宽度”的单位可以是百分比或像素。如果是百分比，则可分 为两种情况：如果不是嵌套表格，那么百分比是相对于浏览器窗口 而言；如果是嵌套表格，则百分比相对的是嵌套表格所在的单元格 宽度。 “边框粗细”设定表格边框的宽度，单位为像素。 “单元格边距”为表格内容和边框之间的空白区域，单位为像素。 “单元格间距”为单元格之间的距离，单位为像素。,3.1 表格的建立和编辑,2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表格。或光标放在表格中时，点击菜单“修改”“表格”“选择表格”命令。也可以将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取整个表格。 （2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击，就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元

6、格，就可以选中不连续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标拖拽的方法可以选取连续的一片单元格。 （3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行或列的图标出现时，单击鼠标即可选择行或列。,3.1 表格的建立和编辑,3.1 表格的建立和编辑,3. 设定表格和单元格属性 （1）表格属性 当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。,3.1 表格的建立和编辑,（2）行列和单元格属性的设定 这里将行、列和单元格的属性放在一起，主要是因为它们的属性面板的设置项目完全一样，差别只是应用属性的范围不同而已。选择行、列或单元格后属性面板如下图所示。面板分上下两部分，上面是选中区域内文字属性设定项目，下面是选中的行、列或单元格属性的设定。

7、,3.1 表格的建立和编辑,4. 编辑表格和单元格 （1）调整表格大小 选中表格后，利用属性面板设定表格的宽和高来改变大小。或选中表格后，表格上会出现3个控制点。将鼠标置于控制点上，当出现调整图标时，按下鼠标左键拖拽边框到想要的位置。 （2）更改列宽和行高 选定相应的行或列，通过属性面板设定行高或列宽值，从而改变行高列宽。也可以用鼠标拖动列、行的边框来更改列宽或行高。 （3）添加行和列 将光标置于表格中的适当位置，单击菜单“修改”“表格”“插入行”命令，则在当前行的上方插入一行。或单击菜单“修改”“表格”“插入列”命令，则在当前列的左侧插入一列。,3.1 表格的建立和编辑,（4）删除行和列 将光标置于要删除的行或列中的任意一个单元格，单击菜单“修改”“表格”“删除行”或“删除列”命令，则删除当前行或列。或者右键单击，在弹出的菜单中选择“表格”“删除行”或“删除列”命令，则删除当前行或列。 （5）拆分与合并单元格 拆分只能在一个单元格中进行，合并单元格应在多于一个单元格中进行。 合并单元格的步骤：选中要合并的几个单元格，单击属性面板的合并按钮 进行合并，或单击菜单“修改”“表格”“合并单

8、元格”命令进行相应操作。 拆分单元格的步骤：选中要拆分的单元格，单击属性面板的拆分按钮 ，或单击菜单“修改”“表格”“合并单元格”命令，会弹出“拆分单元格”对话框，如图所示。设定拆分方式和数值，单击“确定”按钮。,3.1 表格的建立和编辑,3.1.3 技巧提示,1. 填充和间距,2. 细线表格和细线的制作,3.1 表格的建立和编辑,3.1.4 实战演练：网站“行星大观”页眉导航部分制作,通过本案例的操作，你将学会：如何建立表格和插入表格内容、如何选中表格、行、单元格和设定单元格的高、宽、对齐方式、如何设置表格的背景图像、如何设置Flash背景透明。,3.1 表格的建立和编辑,3.1.4 实战演练：网站“行星大观”页眉导航部分制作,操作步骤： 1） 新建文件夹xingxingdaguan,在文件夹中新建image文件夹,将所有的素材拷贝到image文件夹中。 2）启动Dreamweaver CS5，单击菜单“站点”“新建站点”命令，通过站点设置对象向导新建站点xingxingdaguan，将文件夹xingxingdaguan定义为存放当前站点的文件夹。 3）新建网页，保存为logo.ht

9、ml，将网页的标题改为“行星大观”。 4）在网页中新建表格，表格为3行6列、宽770像素，其余参数均为0。 在CSS属性面板中设“目标规则”为“新CSS规则”，单击“编辑规则”按钮，在“选择器名称”输入名称为“d1”，单击“确定”。在接下来弹出“d1的CSS规则定义”对话框中，在“类型”选项下设“字体大小”为12。在“背景”选项下设“背景图像”为“image/logo.jpg”。在“方框”选项下设“宽”为770，“高”为181，单击“确定”按钮。,3.1 表格的建立和编辑,3.1.4 实战演练：网站“行星大观”页眉导航部分制作,操作步骤： 选中表格，在属性面板的“目标规则”中选择“d1”，此时表格的大小和背景发生了变化，如图所示。,3.1 表格的建立和编辑,3.1.4 实战演练：网站“行星大观”页眉导航部分制作,操作步骤： 5）选中第1行单元格，在属性面板中单击 按钮合并单元格，设单元格的“高”为138。光标移到第1行单元格中，单击菜单“插入”“媒体”“SWF命令”插入Flash文件other/flash.swf，选中Flash，在“属性”面板中设“高”为138，按键盘上回车键确认。设为wmode为透明。单击网页空白处，进行观察，如图所示。,3.1 表格的建立和编辑,3.1.4 实战演练：网站“行星大观”页眉导航部分制作,操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为居中对齐。输入对应文字，如图所示。,3.1 表格的建立和编辑,3.1.4 实战演练：网站“行星大观”页眉导航部分制作,操作步骤： 7）鼠标选中第3行第2个至右侧的所有单元格，合并单元格，在左、右单元格中输入文字，选中右侧单元格中的文字，在属性面板的“目标规则”中选择“d2”。最终版面布局如图所示。,3.2 表格在页面布局中的应用,3.2.1 案例制作：网站“球星风采”主页,通过本案例的操作，你将学会：如何建立表格和设置表格的背景

《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第3章 使用表格布局页面》由会员E****分享，可在线阅读，更多相关《实战Dreamweaver CS5 网页制作教程 第2版 教学课件 ppt 作者 刘天真 第3章 使用表格布局页面》请在金锄头文库上搜索。