第七讲表格网页制作精选PPT.ppt
《第七讲表格网页制作精选PPT.ppt》由会员分享,可在线阅读,更多相关《第七讲表格网页制作精选PPT.ppt(85页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第七讲表格网页制作1 1第1页,本讲稿共85页7.1 创建表格创建表格7.1.1 7.1.1 表格的基本概念表格的基本概念表格的基本概念表格的基本概念在网页中,表格的结构如图在网页中,表格的结构如图在网页中,表格的结构如图在网页中,表格的结构如图7.17.1所示。所示。所示。所示。表格由一些线条分开的小格组成。线条即是表格的边表格由一些线条分开的小格组成。线条即是表格的边表格由一些线条分开的小格组成。线条即是表格的边表格由一些线条分开的小格组成。线条即是表格的边框,被边框分割开来的区域称之为单元格,数据、框,被边框分割开来的区域称之为单元格,数据、框,被边框分割开来的区域称之为单元格,数据、框
2、,被边框分割开来的区域称之为单元格,数据、文字、图形、图片等对象均可根据需要放在相应的文字、图形、图片等对象均可根据需要放在相应的文字、图形、图片等对象均可根据需要放在相应的文字、图形、图片等对象均可根据需要放在相应的单元格中。位于水平方向上的一系列单元格称作一单元格中。位于水平方向上的一系列单元格称作一单元格中。位于水平方向上的一系列单元格称作一单元格中。位于水平方向上的一系列单元格称作一行,位于垂直方向上的一系列单元格称作一列。行,位于垂直方向上的一系列单元格称作一列。行,位于垂直方向上的一系列单元格称作一列。行,位于垂直方向上的一系列单元格称作一列。在单元格中,可以输入文字和其他对象,这
3、些文字或对象在单元格中,可以输入文字和其他对象,这些文字或对象在单元格中,可以输入文字和其他对象,这些文字或对象在单元格中,可以输入文字和其他对象,这些文字或对象同单元格边缘之间的距离称作单元格内部边距(同单元格边缘之间的距离称作单元格内部边距(同单元格边缘之间的距离称作单元格内部边距(同单元格边缘之间的距离称作单元格内部边距(cell cell paddingpadding)。)。)。)。单元格之间的距离称作单元格间距(单元格之间的距离称作单元格间距(单元格之间的距离称作单元格间距(单元格之间的距离称作单元格间距(cell cell spacingspacing)。)。)。)。2 2第2页,
4、本讲稿共85页图图7.13 3第3页,本讲稿共85页7.1.2 7.1.2 插入表格插入表格插入表格插入表格【例【例【例【例7.17.1】插入表格】插入表格】插入表格】插入表格 将插入点放置到文档中要插入表格的地方。将插入点放置到文档中要插入表格的地方。将插入点放置到文档中要插入表格的地方。将插入点放置到文档中要插入表格的地方。执行执行执行执行Insert|TableInsert|Table(插入插入插入插入|表格)命令,或单击普通对象表格)命令,或单击普通对象表格)命令,或单击普通对象表格)命令,或单击普通对象面板上的面板上的面板上的面板上的Insert TableInsert Table按
5、钮(见图按钮(见图按钮(见图按钮(见图7.27.2)。如果没有预先设置)。如果没有预先设置)。如果没有预先设置)。如果没有预先设置插入点的位置,可以直接从对象面板中将该按钮拖动到文档插入点的位置,可以直接从对象面板中将该按钮拖动到文档插入点的位置,可以直接从对象面板中将该按钮拖动到文档插入点的位置,可以直接从对象面板中将该按钮拖动到文档中需要插入表格的位置,打开如图中需要插入表格的位置,打开如图中需要插入表格的位置,打开如图中需要插入表格的位置,打开如图7.37.3所示的对话框,提示确所示的对话框,提示确所示的对话框,提示确所示的对话框,提示确定表格的格式。定表格的格式。定表格的格式。定表格的
6、格式。在在在在Rows Rows(行)文本框中,输入要插入表格的行数。行)文本框中,输入要插入表格的行数。行)文本框中,输入要插入表格的行数。行)文本框中,输入要插入表格的行数。在在在在ColumnsColumns(列)文本框中,输入要插入表格的列数。列)文本框中,输入要插入表格的列数。列)文本框中,输入要插入表格的列数。列)文本框中,输入要插入表格的列数。在在在在Cell PaddingCell Padding文本框中,输入单元格中对象同单元格内文本框中,输入单元格中对象同单元格内文本框中,输入单元格中对象同单元格内文本框中,输入单元格中对象同单元格内部边界之间的距离,单位为像素点。部边界之
7、间的距离,单位为像素点。部边界之间的距离,单位为像素点。部边界之间的距离,单位为像素点。4 4第4页,本讲稿共85页图图7.25 5第5页,本讲稿共85页图图7.36 6第6页,本讲稿共85页在在在在Cell SpacingCell Spacing文本框中,输入单元格之间的距离值,单位为像素文本框中,输入单元格之间的距离值,单位为像素文本框中,输入单元格之间的距离值,单位为像素文本框中,输入单元格之间的距离值,单位为像素点。点。点。点。在在在在WidthWidth文本框中输入表格宽度值,单位可以在右方的下拉列表中选文本框中输入表格宽度值,单位可以在右方的下拉列表中选文本框中输入表格宽度值,单位
8、可以在右方的下拉列表中选文本框中输入表格宽度值,单位可以在右方的下拉列表中选择。择。择。择。PixelPixel(像素),以绝对的像素值来设置表格宽度;像素),以绝对的像素值来设置表格宽度;像素),以绝对的像素值来设置表格宽度;像素),以绝对的像素值来设置表格宽度;PercentPercent(百分比),设置表格宽度同浏览器窗口宽度的百分百分比),设置表格宽度同浏览器窗口宽度的百分百分比),设置表格宽度同浏览器窗口宽度的百分百分比),设置表格宽度同浏览器窗口宽度的百分比。比。比。比。在在在在BorderBorder(边框)文本框中,输入边框的宽度,单位为像素点,边框)文本框中,输入边框的宽度,
9、单位为像素点,边框)文本框中,输入边框的宽度,单位为像素点,边框)文本框中,输入边框的宽度,单位为像素点,0 0表示无边框。表示无边框。表示无边框。表示无边框。设置完毕,单击设置完毕,单击设置完毕,单击设置完毕,单击OKOK按钮,确定操作。一个表格就会出现在文按钮,确定操作。一个表格就会出现在文按钮,确定操作。一个表格就会出现在文按钮,确定操作。一个表格就会出现在文档中,如图档中,如图档中,如图档中,如图7.47.4所示。所示。所示。所示。7.1.3 7.1.3 在表格中添加内容在表格中添加内容在表格中添加内容在表格中添加内容表格的内容要添加到表格的单元格中。单元格中可以插入任何类型表格的内容
10、要添加到表格的单元格中。单元格中可以插入任何类型表格的内容要添加到表格的单元格中。单元格中可以插入任何类型表格的内容要添加到表格的单元格中。单元格中可以插入任何类型的数据,例如文本、图像、表单甚至表格等。同时也可以按照的数据,例如文本、图像、表单甚至表格等。同时也可以按照的数据,例如文本、图像、表单甚至表格等。同时也可以按照的数据,例如文本、图像、表单甚至表格等。同时也可以按照通常的编辑页面元素的方法,编辑其中的内容。例如,可以编通常的编辑页面元素的方法,编辑其中的内容。例如,可以编通常的编辑页面元素的方法,编辑其中的内容。例如,可以编通常的编辑页面元素的方法,编辑其中的内容。例如,可以编辑其
11、中的文本,也可以设置其中的文本格式。辑其中的文本,也可以设置其中的文本格式。辑其中的文本,也可以设置其中的文本格式。辑其中的文本,也可以设置其中的文本格式。7 7第7页,本讲稿共85页图图7.48 8第8页,本讲稿共85页单击要插入内容的单元格,可以直接插入、编辑文本,也可插单击要插入内容的单元格,可以直接插入、编辑文本,也可插单击要插入内容的单元格,可以直接插入、编辑文本,也可插单击要插入内容的单元格,可以直接插入、编辑文本,也可插入图像、导航条、表单等页面元素,方法同不在表格中的方入图像、导航条、表单等页面元素,方法同不在表格中的方入图像、导航条、表单等页面元素,方法同不在表格中的方入图像
12、、导航条、表单等页面元素,方法同不在表格中的方法完全相同。在一个单元格中输入完毕,按法完全相同。在一个单元格中输入完毕,按法完全相同。在一个单元格中输入完毕,按法完全相同。在一个单元格中输入完毕,按TabTab键,可以将键,可以将键,可以将键,可以将插入点移动到下一个单元格中,以便继续输入。如果在当插入点移动到下一个单元格中,以便继续输入。如果在当插入点移动到下一个单元格中,以便继续输入。如果在当插入点移动到下一个单元格中,以便继续输入。如果在当前行的最后一个单元格中按前行的最后一个单元格中按前行的最后一个单元格中按前行的最后一个单元格中按TabTab键,则将插入点移动到下键,则将插入点移动到
13、下键,则将插入点移动到下键,则将插入点移动到下一行中的第一个单元格内。按一行中的第一个单元格内。按一行中的第一个单元格内。按一行中的第一个单元格内。按Shift+TabShift+Tab键可将插入点移键可将插入点移键可将插入点移键可将插入点移动到上一个单元格。在当前行的第一个单元格中按动到上一个单元格。在当前行的第一个单元格中按动到上一个单元格。在当前行的第一个单元格中按动到上一个单元格。在当前行的第一个单元格中按Shift+TabShift+Tab键,则将插入移到上一行中的最后一个单元格键,则将插入移到上一行中的最后一个单元格键,则将插入移到上一行中的最后一个单元格键,则将插入移到上一行中的
14、最后一个单元格内。当然,也可直接用鼠标单击需要输入文本的单元格,内。当然,也可直接用鼠标单击需要输入文本的单元格,内。当然,也可直接用鼠标单击需要输入文本的单元格,内。当然,也可直接用鼠标单击需要输入文本的单元格,直接将插入点转移到该单元格中。图直接将插入点转移到该单元格中。图直接将插入点转移到该单元格中。图直接将插入点转移到该单元格中。图7.57.5是在表格中插入是在表格中插入是在表格中插入是在表格中插入的文本和图像。的文本和图像。的文本和图像。的文本和图像。9 9第9页,本讲稿共85页图图7.51010第10页,本讲稿共85页7.1.4 7.1.4 利用文本文件创建表格利用文本文件创建表格
15、利用文本文件创建表格利用文本文件创建表格如果已有一些数据在如果已有一些数据在如果已有一些数据在如果已有一些数据在Microsoft Excel Microsoft Excel 的工作表中,或在的工作表中,或在的工作表中,或在的工作表中,或在Microsoft Access Microsoft Access 的数据库中,或在其他形式的文件系统的数据库中,或在其他形式的文件系统的数据库中,或在其他形式的文件系统的数据库中,或在其他形式的文件系统中,如果在中,如果在中,如果在中,如果在HTMLHTML文件中重新输入这些数据,就会显得非文件中重新输入这些数据,就会显得非文件中重新输入这些数据,就会显得
16、非文件中重新输入这些数据,就会显得非常麻烦,如果数据量很大,也就不大现实。常麻烦,如果数据量很大,也就不大现实。常麻烦,如果数据量很大,也就不大现实。常麻烦,如果数据量很大,也就不大现实。在在在在DreamweaverDreamweaver中,允许导入其他类型文档中的数据,从而避中,允许导入其他类型文档中的数据,从而避中,允许导入其他类型文档中的数据,从而避中,允许导入其他类型文档中的数据,从而避免了再次输入数据的麻烦。免了再次输入数据的麻烦。免了再次输入数据的麻烦。免了再次输入数据的麻烦。1.1.生成分隔符类型的文本数据文件生成分隔符类型的文本数据文件生成分隔符类型的文本数据文件生成分隔符类
17、型的文本数据文件在在在在DreamweaverDreamweaver中,如果要导入表格数据,必须首先将数中,如果要导入表格数据,必须首先将数中,如果要导入表格数据,必须首先将数中,如果要导入表格数据,必须首先将数据存储为以某种分隔符作数据间隔的纯文本文件,图据存储为以某种分隔符作数据间隔的纯文本文件,图据存储为以某种分隔符作数据间隔的纯文本文件,图据存储为以某种分隔符作数据间隔的纯文本文件,图7.67.6、图图图图7.77.7所示分别是以所示分别是以所示分别是以所示分别是以TabTab和逗号作分隔符的数据文件格式。和逗号作分隔符的数据文件格式。和逗号作分隔符的数据文件格式。和逗号作分隔符的数据
18、文件格式。这种格式文件可以使用相应软件的存储工具生成,如这种格式文件可以使用相应软件的存储工具生成,如这种格式文件可以使用相应软件的存储工具生成,如这种格式文件可以使用相应软件的存储工具生成,如Microsoft Excel Microsoft Excel 中的中的中的中的“文件文件文件文件|另存为另存为另存为另存为”命令等,也可以命令等,也可以命令等,也可以命令等,也可以手工编辑。手工编辑。手工编辑。手工编辑。1111第11页,本讲稿共85页图图7.61212第12页,本讲稿共85页图图7.71313第13页,本讲稿共85页注意:注意:注意:注意:文件中的一行相当于表格的一行,一行中的各列文
19、件中的一行相当于表格的一行,一行中的各列文件中的一行相当于表格的一行,一行中的各列文件中的一行相当于表格的一行,一行中的各列数据间用数据间用数据间用数据间用TabTab空格或逗号隔开,在这样的文件中,数据不像空格或逗号隔开,在这样的文件中,数据不像空格或逗号隔开,在这样的文件中,数据不像空格或逗号隔开,在这样的文件中,数据不像表格中的数据排得那样整齐。表格中的数据排得那样整齐。表格中的数据排得那样整齐。表格中的数据排得那样整齐。2.2.从格式化文本数据文件中导入表格数据从格式化文本数据文件中导入表格数据从格式化文本数据文件中导入表格数据从格式化文本数据文件中导入表格数据【例【例【例【例7.27
20、.2】利用格式化文本创建表格】利用格式化文本创建表格】利用格式化文本创建表格】利用格式化文本创建表格 执行执行执行执行File|ImportFile|Import(文件文件文件文件|导入)命令,再选择导入)命令,再选择导入)命令,再选择导入)命令,再选择Import Table Import Table Data Data(导入表格数据);或执行导入表格数据);或执行导入表格数据);或执行导入表格数据);或执行Insert|Tabular DataInsert|Tabular Data(插入插入插入插入|表格数据);也可以直接单击对象面板上的表格数据);也可以直接单击对象面板上的表格数据);也
21、可以直接单击对象面板上的表格数据);也可以直接单击对象面板上的Insert Tabular DataInsert Tabular Data(插入表格数据)按钮插入表格数据)按钮插入表格数据)按钮插入表格数据)按钮(图图图图7.8)7.8)。打开。打开。打开。打开Insert Tabular DataInsert Tabular Data(插入表格数据)对话框(图插入表格数据)对话框(图插入表格数据)对话框(图插入表格数据)对话框(图7.97.9),提),提),提),提示选择数据文件及格式。示选择数据文件及格式。示选择数据文件及格式。示选择数据文件及格式。1414第14页,本讲稿共85页图图7.
22、81515第15页,本讲稿共85页图图7.91616第16页,本讲稿共85页 在在在在Data FileData File(数据文件)文本框中,输入含有分隔符数据文件)文本框中,输入含有分隔符数据文件)文本框中,输入含有分隔符数据文件)文本框中,输入含有分隔符的数据文件的路径和名称,也可以单击的数据文件的路径和名称,也可以单击的数据文件的路径和名称,也可以单击的数据文件的路径和名称,也可以单击BrowseBrowse(浏览)浏览)浏览)浏览)按钮,从磁盘上选择数据文件。按钮,从磁盘上选择数据文件。按钮,从磁盘上选择数据文件。按钮,从磁盘上选择数据文件。在在在在DelimiterDelimite
23、r(分隔符)下拉列表中,选择文本数据文件分隔符)下拉列表中,选择文本数据文件分隔符)下拉列表中,选择文本数据文件分隔符)下拉列表中,选择文本数据文件中所采用的分隔符。例如,如果数据文件采用制表符中所采用的分隔符。例如,如果数据文件采用制表符中所采用的分隔符。例如,如果数据文件采用制表符中所采用的分隔符。例如,如果数据文件采用制表符作为分隔符,则应该选择作为分隔符,则应该选择作为分隔符,则应该选择作为分隔符,则应该选择TabTab(制表符);如果数据文制表符);如果数据文制表符);如果数据文制表符);如果数据文件中使用逗号作为分隔符,则可以选择件中使用逗号作为分隔符,则可以选择件中使用逗号作为分
24、隔符,则可以选择件中使用逗号作为分隔符,则可以选择CommaComma(逗号)逗号)逗号)逗号)。其中分隔符种类有以下几种:。其中分隔符种类有以下几种:。其中分隔符种类有以下几种:。其中分隔符种类有以下几种:TabTab(制表符)、制表符)、制表符)、制表符)、CommaComma(逗号)、逗号)、逗号)、逗号)、SemicolonSemicolon(分号)、分号)、分号)、分号)、ColonColon(冒号)、冒号)、冒号)、冒号)、OtherOther(其他)。其他)。其他)。其他)。如果在如果在如果在如果在DelimiterDelimiter(分隔符)下拉列表中没有合适的分隔分隔符)下拉
25、列表中没有合适的分隔分隔符)下拉列表中没有合适的分隔分隔符)下拉列表中没有合适的分隔符号,则可以选择符号,则可以选择符号,则可以选择符号,则可以选择OtherOther,然后在右方的文本框中手工然后在右方的文本框中手工然后在右方的文本框中手工然后在右方的文本框中手工输入需要的分隔符。输入需要的分隔符。输入需要的分隔符。输入需要的分隔符。1717第17页,本讲稿共85页在在在在Table WidthTable Width(表格宽度)区域进行表格宽度的设置。选择表格宽度)区域进行表格宽度的设置。选择表格宽度)区域进行表格宽度的设置。选择表格宽度)区域进行表格宽度的设置。选择Fit To Fit T
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第七 表格 网页 制作 精选 PPT
限制150内