05表格设计与运用.docVIP

实验五 表格设计与运用 1. 表格设计 （1）将切割的图片转换成背景。选中页面右侧中部的空白图片，如图1所示。 图1 选中图片效果 （2）参照“04图文混排”中的“1.插入日期”中的第（2）-（5）步的操作方法，将选中的图片转换成背景图片。 （3）插入表格，并设置表格属性。转换到【设计】视图，选中需要插入表格的背景图片，单击文档窗口上方的“常用”标签中的“表格”按钮，弹出的表格对话框的参数设置如图2所示，插入一个1行2列的表格。 图2 “表格”对话框参数设置 （4）选中表格中的第2 单元格（右侧单元格），在【属性】面板中将其宽度调整为40%，如图3所示。其效果如图4所示。 图3 设置表格第2单元格宽度为40% 图4 页面中表格效果 （5）在第1单元格中插入一个7行2列的表格（表格嵌套）。选中表格中的第1 单元格（左侧单元格），单击文档窗口上方的“常用”标签中的“表格”按钮，弹出表格对话框的参数设置如图5所示，插入一个7行2列的表格。页面上效果如图6所示。 图5 “表格”参数设置 图6 页面中表格效果 （6）调整表格（合并、调整颜色、对齐方式、宽高等）。 1）合并单元格。选中第1行的1、2两个单元格（拖动鼠标选择），单击“修改|表格|合并表格”菜单项，将其合并为一个单元格。用同样的方法，将第7行的1、2两个单元格合并为1行。其效果如图7所示。 图7 合并完成后的表格效果 2）设置单元格对齐方式及行高，并填充背景颜色。选中表格中的第1行（将鼠标放在紧贴第1行的左边线外侧，光标将变成一个指向右的箭头，此时单击，即可选中第1行），将【属性】面板中的相关参数设置如图8所示。 图8 第1行单元格的属性参数设置 3）选中表格中第2、3、4、5、6、7行单元格，将【属性】面板中的相关参数设置如图9所示。 图9 第1列第2、3、4、5、6、7单元格属性参数设置 4）调整表格中第3、5、7行单元格的背景颜色。用鼠标选中第3行的全部单元格（拖动鼠标进行选择），将属性面板中“背景颜色”参数设置如图10所示。 图10 表格中第3行背景颜色设置 5）用同样的方法，分别将表格中第5、7行的背景颜色设置为相同的浅绿色（#F3FEE0）。页面上表格的最终效果如图11所示。 图11 页面上表格效果 6）添加表格边框。单击表格顶部最外层的绿色提示线，选中表格，如图12所示。将【表格属性】中的“边框”参数设置为1。如图13所示。保存文件，按【F12】键浏览，效果如图14所示。 图12 单击表格最外层的提示线 图13 【表格属性】“边框”参数设置 图14 网页浏览效果 （7）在表格中插入文字和图片，并设置相应的参数。 1）插入标题文字。单击表格中第1行（标题行），将出现一个文本光标，此时输入标题文字“Photoshop 基本操作”。 2) 创建CSS样式表，为标题文字设置字体、字号、颜色等。选中标题文字，将【CSS属性】面板的“目标规则”设置为“新 CSS 规则”，然后单击“编辑规则”按钮，弹出“新建 CSS 规则”对话框，将“选择器类型”设置为“ID （仅应用于一个HTML元素）”；将“选择器名称”命名为“bt”，单击“确定”按钮，弹出“#bt 的CSS规则定义”对话框，将“字体”设置为“幼圆”，“字号”设置为“18px”，其他参数不变，如图15所示。单击“确定”按钮，返回【CSS属性】面板。此时【CSS属性】面板如图16所示。 图15 “#bt CSS规则定义”参数设置 图16 【CSS属性】面板参数效果 3）插入表体文字。单击表格中第2行第1列单元格，将出现一个文本光标，此时输入文字“相关概念”；再单击第 行第2列单元格，输入文字“文件操作”；用同样的方法，对其他单元格输入相应的文字。然后选中表格的第2、3、4、5、6行所有的单元格，如图17所示。 图17 选中表格相应单元格效果 4）将【CSS属性】面板的“目标规则”设置为“新 CSS 规则”，然后单击“编辑规则”按钮，弹出“新建 CSS 规则”对话框，将“选择器类型”设置为“类 （可应用于任何HTML元素）”；将“选择器名称”命名为“bg”，单击“确定”按钮，弹出“.bg 的CSS规则定义”对话框，将“字体”设置为“微软雅黑”，“字号”设置为“14px”，颜色设置为“灰色”（#666），其他参数不变，如图18所示。单击“确定”按钮，完成对“.bg ”的CSS规则定义。表格效果如图19所示。 图18 “.bt CSS规则定义”参数设置 图19 表格效果 5）在表格最后一行添加文字。选中表格最后一行，输入文字“more…”。选中文字，在【属性】上将其设置为红色，将“水平对齐”设置为“右对齐”，在省略号后面插入两个空格（按空格键两次）调整一下它的位置。 6）保存文件，只能【F12】键进行浏览。 （8）在表格中插