《网页制作三合一实用教程 教学课件 ppt 作者 王爱赪 杜金 郭海 第二章》由会员分享，可在线阅读，更多相关《网页制作三合一实用教程 教学课件 ppt 作者 王爱赪 杜金 郭海 第二章（41页珍藏版）》请在金锄头文库上搜索。
1、第3章在网页中插入其他对象,本章要点 2.1 “课程表”网页 2.2 “版画图像和Flash动画浏览”网页 2.3 “随身听世界”网页,2.1 “课程表”网页,2.1.1 制作简单的表格与调整表格大小 图2-1-1 “表格”对话框 将光标移到需要插入表格的位置，单击“插入”（常用）栏内的“表格”按钮，弹出“表格”对话框，如图2-1-1所示。 1“表格”对话框内各选项的作用 （1）“行数”和“列数”文本框：输入表格的行数和列数。 （2）“表格宽度”文本框：输入表格宽度值，其单位为像素或百分数。如果选择“百分比”，则表示表格占页面或它的母体容量宽度的百分比。 （3）“边框粗细”文本框：输入表格边框
2、的宽度数值，其单位为像素。 （4）“单元格边距”文本框：输入的数表示单元格之间两个相邻边框线间的距离。 （5）“单元格间距”文本框：输入单元格内的对象与单元格边框间的空白数，单位为像素。,2.1 “课程表”网页,图2-1-1 “表格”对话框,2.1 “课程表”网页,图2-1-2 制作的第1个表格 （6）“页眉”栏：用来设置表格的页眉单元格。其中的字体将被设置成居中和黑体格式。 （7）“辅助功能”栏：其中“标题”文本框，用来输入表格的标题；“对齐标题”下拉列表框，用来设置标题与表格的位置关系，默认为表格的顶部；“摘要”列表框，用来输入表格的摘要。 通过上述设置后，单击“确定”按钮，即可插入符合要
3、求的表格。按照图2-1-1所示进行设置后制作的第1个表格如图2-1-2所示。 2调整表格大小 （1）调整整个表格的大小。单击表格的边框，选中该表格，此时表格右边、下边和右下角会出现3个方形的黑色控制柄。再用鼠标拖曳控制柄，即可调整整个表格的大小。 （2）调整表格中行或列的大小。将鼠标指针移到表格线处，当鼠标指针变为双箭头横线或双箭头竖线时，拖曳鼠标，即可调整表格线的位置，从而调整了表格行或列的大小。,2.1 “课程表”网页,图2-1-2 制作的第1个表格,2.1 “课程表”网页,3表格和单元格标签 （1）表格标签。选中表格后，在表格的上边或下边会用绿色显示出表格的宽度，如图2-1-2所示。单击
4、上边的黑三角按钮，弹出“表格”快捷菜单。利用“表格”快捷菜单可以对表格进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。 （2）单元格标签。选中表格后，在表格标签的上面会显示出每一列单元格的标签，如图2-1-2所示。单击第2行的任意一个标签的黑三角按钮，弹出“单元格”快捷菜单，利用该菜单中的菜单命令，可以对表格的单元格进行选择、清除和插入操作。 2.1.2 表格属性的设置 1选择表格 （1）选择整个表格。单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现三个方形黑色控制柄。,2.1 “课程表”网页,（2）选择多个表格单元格。按住Ctrl键，同时依次单击所有要选择的表
5、格单元格。 （3）选择表格的一行或一列单元格。将鼠标移到一行的最左边或移到一列的最上边，当鼠标指针呈黑色箭头时单击鼠标，即可选中一行或一列。 （4）选择表格的多行或多列单元格。按住Ctrl键，将鼠标依次移到要选择的各行或各列，当鼠标指针呈黑色箭头时单击鼠标，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的起始处，当鼠标指针呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。 2整个表格属性的设置 单击表格的外边框，选中整个表格，此时表格的“属性”栏如图2-1-3所示。,2.1 “课程表”网页,图2-1-3 表格的“属性”栏,2.1 “课程表”网页,表格“属性”栏内各选项的作用如下。 （1）
6、“表格Id”下拉列表框：用来输入表格的名字。 （2）“行”和“列”文本框：用来输入表格的行数与列数。 （3）“宽”和“高”文本框：用来输入表格的宽度与高度数。它们的单位可利用其右边的下拉列表框来选择，其中的选项有“”（百分数）和“像素”。 （4）“填充”文本框：用来输入单元格内的内容与单元格边框间的空白数，单位为像素。 （5）“间距”文本框：用来输入单元格之间两个相邻边框线间的距离。 （6）“对齐”下拉列表框：用来设置表格的对齐方式。 （7）“边框”文本框：用来输入表格边框宽度，单位为像素。 （8）“类”下拉列表框：用于设置表格的样式。,2.1 “课程表”网页,（9）6个按钮： 按钮用来清除行
7、高， 按钮用来清除列宽， 按钮用来将表格宽度的单位转换为像素， 按钮用来将表格宽度的单位改为百分比， 按钮用来将表格高度的单位转换为像素， 按钮用来将表格宽度的单位改为百分比。 （10）“背景颜色”和“背景图像”文本框：用来设置表格的背景色和背景图像。 （11）“边框颜色”按钮与文本框：用来设置表格的边框线颜色。 3表格单元格属性的设置 选中几个单元格，此时“属性”栏变为表格单元格“属性”栏，如图2-1-4所示。,2.1 “课程表”网页,图2-1-4 表格单元格“属性”栏,2.1 “课程表”网页,表格单元格“属性”栏中，上半部分用来设置单元格内文本的属性，它与文本“属性”栏的选项基本一样。下半
8、部分用来设置单元格的属性，各选项的作用如下。 （1）“合并所选单元格”按钮：选中要合并的单元格，再单击按钮，即可将选中的单元格合并。将如图2-1-2所示表格第1行、第7行的所有单元格合并，将第1列中的第3列到第6列合并，将第1列中的第8列和第6列合并，其效果如图2-1-5所示。 （2）“拆分单元格”按钮：选中一个单元格，单击按钮，弹出“拆分单元格”对话框，如图2-1-6所示。选中“行”单选钮，表示要拆分为几行；选中“列”单选钮，表示要拆分为几列。在“列数”（“行数”）数值选择框内选择列或行的个数，再单击“确定”按钮即可。将如图2-1-5所示的表格中左边第1列第3行和第1列第5行的单元格拆分为2
9、列，其效果如图2-1-7所示。,2.1 “课程表”网页,图2-1-5 合并单元格后的效果 图2-1-6 “拆分单元格”对话框,2.1 “课程表”网页,再将如图2-1-8所示表格中第3行第2列单元格拆分为4行，将第5行第2列单元格拆分为两行，其效果如图2-1-8所示。 （3）“水平”和“垂直”下拉列表框：用来选择水平对齐方式和垂直对齐方式。 （4）“宽”和“高”文本框：设置单元格宽度与高度。 （5）“不换行”复选框：选中该复选框，则当单元格内的文字超过单元格的宽度时，不换行，自动将单元格的宽度加大到刚刚可以放下文字；没选中该复选框，则当单元格内的文字超过单元格的宽度时，自动换行。,2.1 “课程
10、表”网页,图2-1-7 拆分单元格后的效果1 图2-1-8 拆分单元格后的效果2,2.1 “课程表”网页,（6）“标题”复选框：如果选中该复选框，则单元格中的文字以标题的格式显示（粗体、居中）；如果没选中该复选框，则单元格中的文字不以标题的格式显示。 （7）“背景”和“背景颜色”按钮与文本框：用来给表格单元格加背景图像或背景色。 （8）“边框”按钮与文本框：用来设置表格单元格的双线条边框线的颜色，双线条边框线的颜色一样。当该文本框不输入任何内容时，其设置与表格的“边框”颜色一样。 2.1.3 编辑表格 图2-1-9 表格的快捷菜单 将鼠标指针移到表格内，单击鼠标右键，弹出其快捷菜单，再单击该菜
11、单内的“表格”菜单命令，调出它的下一级菜单，如图2-1-9所示。利用该菜单，可以对表格进行多种编辑操作。,2.1 “课程表”网页,图2-1-9 表格的快捷菜单,2.1 “课程表”网页,1在表格中插入行或列 （1）在表格中插入一行或一列。选中一行或一列单元格。再单击如图2-1-9所示菜单中的“插入行”或“插入列”菜单命令，即可在选中行的上边插入一行或在选中列的左边插入一列。按Tab键可以在表格单元格内移动光标，当光标在最后一个单元格时，再按Tab键，即可在表格的下边增加一行。 （2）在表格中插入多行或多列。选中一行或一列。单击如图2-1-9所示菜单中的“插入行或列”菜单命令，弹出“插入行或列”对
12、话框，如图2-1-10所示。该对话框内各选项的作用如下所述。 图2-1-10 “插入行或列”对话框 “插入”栏。选择“行”单选钮，表示插入行；选择“列”单选钮，表示插入列。“行数”（“列数”）数值选择框内的数字表示插入的行数或列数。 “位置”栏：选择“所选之上”单选钮，表示在选定行的上边或选定列的左边插入行或列；选择“所选之下”单选钮，表示在选定行的下边或选定列的右边插入行或列。 进行设置后，单击“确定”按钮，即可在选中的一行的上边或下边插入多行，或者在选中的一列的左边或右边插入多列。,2.1 “课程表”网页,图2-1-10 “插入行或列”对话框,2.1 “课程表”网页,2删除表格中的行或列
13、（1）利用表格的快捷菜单删除表格中的行与列。选中要删除的行或列，再单击如图2-1-9所示菜单中的“删除行”或“删除列”菜单命令，即可删除选定的行或列。 （2）利用清除命令删除表格中的行与列。选中要删除的行或列，再单击“编辑”“清除”菜单命令，即可删除选定的行或列。 3复制和移动表格的单元格 （1）选中要复制或移动的表格的单元格，它们应构成一个矩形。 （2）单击“编辑”“复制”菜单命令或单击“编辑”“剪切”菜单命令。 （3）将光标移到要复制或移动处，再单击“编辑”“粘贴”菜单命令即可完成操作。,2.2 “版画图像和Flash动画浏览”网页,2.2.1 插入Applet 1插入Applet的方法
14、Applet是Java的小型应用程序。Java是一种高级的编程语言，可以在Internet网上应用，用它可以编写许多精彩的动画。Java Applet可以嵌入HTML文档中，通过主页发布到Internet网上。可以从网上下载Java Applet程序文件及有关文件，存放在本地站点的一个子目录下。 （1）单击“插入”（常用）栏“媒体”快捷菜单中的“Applet”按钮，弹出“选择文件”对话框。利用该对话框可以调入扩展名为.class的Java Applet程序文件。 使用Java Applet程序时应先看Java Applet程序作者给出的说明，再按照说明进行操作。 （2）插入文件后，网页文档窗口
15、内会显示一个Java Applet图标。单击选中它后，可以用鼠标拖曳插件图标的黑色控制柄，来调整它的大小。 2Java Applet对象的“属性”栏 Java Applet对象的“属性”栏如图2-2-1所示，其中主要选项的作用如下所述。,2.2 “版画图像和Flash动画浏览”网页,图2-2-1 Java Applet对象的“属性”栏,2.2 “版画图像和Flash动画浏览”网页,（1）“代码”文本框与“文件夹”按钮：文本框用来输入Java Applet程序文件的路径和名字。单击“文件夹”按钮，弹出“选择Java Applet文件”对话框，利用该对话框可调入Applet程序。 （2）“基址”文
16、本框：用来输入Java Applet程序文件的名字。 （3）“替代”文本框与“文件夹”按钮：输入Java Applet说明文件的路径与名字。单击“文件夹”按钮可选择Java Applet说明文件。 （4）“参数”按钮：单击该按钮，可以弹出“参数”对话框，利用该对话框可以设置Java Applet程序中所使用的参数。 2.2.2 插入Flash对象和图像查看器 1插入Flash动画 （1）单击“插入”（常用）栏“媒体”快捷菜单中的“Flash”按钮，弹出“选择文件”对话框。在“选择文件”对话框中选择要导入的SWF文件，单击“确定”按钮，导入Flash文件。Flash动画在网页文档中的显示效果如图2-2-2左图所示。,2.2 “版画图像和Flash动画浏览”网页,（2）Flash对象“属性”栏如图2-2
